Skip to content

Commit 92a44ee

Browse files
gabriellshsandranymarkjuliajforestidougfabris
authored
feat: Use fuselage-forms in account pages (RocketChat#36525)
Co-authored-by: sandranymark <sandra@nymark.nu> Co-authored-by: juliajforesti <juliajforesti@gmail.com> Co-authored-by: Douglas Fabris <devfabris@gmail.com>
1 parent 8a30bfb commit 92a44ee

12 files changed

+209
-504
lines changed

‎apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx‎

Lines changed: 17 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import { css } from '@rocket.chat/css-in-js';
22
import type { SelectOption } from '@rocket.chat/fuselage';
3+
import { Accordion, AccordionItem, Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
34
import {
45
FieldDescription,
5-
Accordion,
6-
AccordionItem,
7-
Box,
8-
Button,
9-
ButtonGroup,
106
Field,
117
FieldGroup,
128
FieldHint,
@@ -15,7 +11,7 @@ import {
1511
RadioButton,
1612
Select,
1713
ToggleSwitch,
18-
} from '@rocket.chat/fuselage';
14+
} from '@rocket.chat/fuselage-forms';
1915
import { ExternalLink, Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '@rocket.chat/ui-client';
2016
import { useTranslation, useToastMessageDispatch, useEndpoint, useSetting } from '@rocket.chat/ui-contexts';
2117
import { useMutation } from '@tanstack/react-query';
@@ -49,11 +45,6 @@ const AccessibilityPage = () => {
4945
);
5046

5147
const pageFormId = useId();
52-
const fontSizeId = useId();
53-
const mentionsWithSymbolId = useId();
54-
const clockModeId = useId();
55-
const hideUsernamesId = useId();
56-
const hideRolesId = useId();
5748
const linkListId = useId();
5849

5950
const {
@@ -113,14 +104,14 @@ const AccessibilityPage = () => {
113104
return (
114105
<Field key={id} pbe={themes.length - 1 ? undefined : 'x28'} pbs={index === 0 ? undefined : 'x28'}>
115106
<FieldRow>
116-
<FieldLabel display='flex' alignItems='center' htmlFor={id}>
107+
<FieldLabel display='flex' alignItems='center'>
117108
{t(title)}
118109
</FieldLabel>
119110
<Controller
120111
control={control}
121112
name='themeAppearence'
122-
render={({ field: { onChange, value, ref } }) => (
123-
<RadioButton id={id} ref={ref} onChange={() => onChange(id)} checked={value === id} />
113+
render={({ field: { value, onChange, ...field } }) => (
114+
<RadioButton id={id} {...field} onChange={() => onChange(id)} checked={value === id} />
124115
)}
125116
/>
126117
</FieldRow>
@@ -137,29 +128,19 @@ const AccessibilityPage = () => {
137128
<legend>{t('Adjustable_layout')}</legend>
138129
</VisuallyHidden>
139130
<Field>
140-
<FieldLabel htmlFor={fontSizeId} mbe={12}>
141-
{t('Font_size')}
142-
</FieldLabel>
131+
<FieldLabel mbe={12}>{t('Font_size')}</FieldLabel>
143132
<FieldRow>
144-
<Controller
145-
control={control}
146-
name='fontSize'
147-
render={({ field: { onChange, value } }) => (
148-
<Select id={fontSizeId} value={value} onChange={onChange} options={fontSizes(t)} />
149-
)}
150-
/>
133+
<Controller control={control} name='fontSize' render={({ field }) => <Select {...field} options={fontSizes(t)} />} />
151134
</FieldRow>
152135
<FieldDescription mb={12}>{t('Adjustable_font_size_description')}</FieldDescription>
153136
</Field>
154137
<Field>
155138
<FieldRow>
156-
<FieldLabel htmlFor={mentionsWithSymbolId}>{t('Mentions_with_@_symbol')}</FieldLabel>
139+
<FieldLabel>{t('Mentions_with_@_symbol')}</FieldLabel>
157140
<Controller
158141
control={control}
159142
name='mentionsWithSymbol'
160-
render={({ field: { onChange, value, ref } }) => (
161-
<ToggleSwitch id={mentionsWithSymbolId} ref={ref} checked={value} onChange={onChange} />
162-
)}
143+
render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
163144
/>
164145
</FieldRow>
165146
<FieldDescription
@@ -172,30 +153,23 @@ const AccessibilityPage = () => {
172153
</FieldDescription>
173154
</Field>
174155
<Field>
175-
<FieldLabel htmlFor={clockModeId}>{t('Message_TimeFormat')}</FieldLabel>
156+
<FieldLabel>{t('Message_TimeFormat')}</FieldLabel>
176157
<FieldRow>
177158
<Controller
178159
name='clockMode'
179160
control={control}
180-
render={({ field: { value, onChange } }) => (
181-
<Select id={clockModeId} value={`${value}`} onChange={onChange} options={timeFormatOptions} />
182-
)}
161+
render={({ field: { value, ...field } }) => <Select {...field} value={`${value}`} options={timeFormatOptions} />}
183162
/>
184163
</FieldRow>
185164
</Field>
186165
<Field>
187166
<FieldRow>
188-
<FieldLabel htmlFor={hideUsernamesId}>{t('Show_usernames')}</FieldLabel>
167+
<FieldLabel>{t('Show_usernames')}</FieldLabel>
189168
<Controller
190169
name='hideUsernames'
191170
control={control}
192-
render={({ field: { value, onChange, ref } }) => (
193-
<ToggleSwitch
194-
id={hideUsernamesId}
195-
ref={ref}
196-
checked={!value}
197-
onChange={(e) => onChange(!(e.target as HTMLInputElement).checked)}
198-
/>
171+
render={({ field: { value, onChange, ...field } }) => (
172+
<ToggleSwitch {...field} checked={!value} onChange={(e) => onChange(!(e.target as HTMLInputElement).checked)} />
199173
)}
200174
/>
201175
</FieldRow>
@@ -204,17 +178,12 @@ const AccessibilityPage = () => {
204178
{displayRolesEnabled && (
205179
<Field>
206180
<FieldRow>
207-
<FieldLabel htmlFor={hideRolesId}>{t('Show_roles')}</FieldLabel>
181+
<FieldLabel>{t('Show_roles')}</FieldLabel>
208182
<Controller
209183
name='hideRoles'
210184
control={control}
211-
render={({ field: { value, onChange, ref } }) => (
212-
<ToggleSwitch
213-
id={hideRolesId}
214-
ref={ref}
215-
checked={!value}
216-
onChange={(e) => onChange(!(e.target as HTMLInputElement).checked)}
217-
/>
185+
render={({ field: { value, onChange, ...field } }) => (
186+
<ToggleSwitch {...field} checked={!value} onChange={(e) => onChange(!(e.target as HTMLInputElement).checked)} />
218187
)}
219188
/>
220189
</FieldRow>

‎apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import type { SelectOption } from '@rocket.chat/fuselage';
2-
import { SelectLegacy, Box, Button, Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage';
3-
import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
2+
import { Box, Button } from '@rocket.chat/fuselage';
3+
import { Select, Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage-forms';
44
import { Page, PageHeader, PageScrollableContentWithShadow } from '@rocket.chat/ui-client';
55
import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
6-
import { useId, useMemo } from 'react';
6+
import { useMemo } from 'react';
77
import { useForm, Controller } from 'react-hook-form';
88
import { useTranslation } from 'react-i18next';
99

@@ -37,11 +37,9 @@ const AccountIntegrationsPage = () => {
3737
},
3838
});
3939

40-
const handleSubmitForm = useEffectEvent(({ accountSelected }: { accountSelected: string }) => {
40+
const handleSubmitForm = ({ accountSelected }: { accountSelected: string }) => {
4141
removeMutation.mutate({ accountSelected });
42-
});
43-
44-
const accountSelectedId = useId();
42+
};
4543

4644
return (
4745
<Page>
@@ -55,17 +53,13 @@ const AccountIntegrationsPage = () => {
5553
control={control}
5654
name='accountSelected'
5755
rules={{ required: t('Required_field', { field: t('WebDAV_Accounts') }) }}
58-
render={({ field }) => <SelectLegacy {...field} options={options} placeholder={t('Select_an_option')} />}
56+
render={({ field }) => <Select {...field} options={options} placeholder={t('Select_an_option')} />}
5957
/>
6058
<Button type='submit' danger>
6159
{t('Remove')}
6260
</Button>
6361
</FieldRow>
64-
{errors?.accountSelected && (
65-
<FieldError aria-live='assertive' id={`${accountSelectedId}-error`}>
66-
{errors.accountSelected.message}
67-
</FieldError>
68-
)}
62+
{errors?.accountSelected && <FieldError>{errors.accountSelected.message}</FieldError>}
6963
</Field>
7064
</Box>
7165
</PageScrollableContentWithShadow>

‎apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import { AccordionItem, Box, Field, FieldGroup, FieldLabel, FieldRow, FieldHint, Tag, ToggleSwitch } from '@rocket.chat/fuselage';
1+
import { AccordionItem, Tag } from '@rocket.chat/fuselage';
2+
import { Field, FieldGroup, FieldLabel, FieldRow, FieldHint, ToggleSwitch } from '@rocket.chat/fuselage-forms';
23
import { useTranslation, usePermission, useSetting } from '@rocket.chat/ui-contexts';
3-
import { useId } from 'react';
4-
import { useFormContext } from 'react-hook-form';
4+
import { Controller, useFormContext } from 'react-hook-form';
55

66
import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';
77

88
const PreferencesConversationTranscript = () => {
99
const t = useTranslation();
10-
11-
const { register } = useFormContext();
10+
const { control } = useFormContext();
1211

1312
const { data: hasLicense = false } = useHasLicenseModule('livechat-enterprise');
1413
const alwaysSendEmailTranscript = useSetting('Livechat_transcript_send_always');
@@ -17,40 +16,39 @@ const PreferencesConversationTranscript = () => {
1716
const canSendTranscriptEmail = canSendTranscriptEmailPermission && !alwaysSendEmailTranscript;
1817
const cantSendTranscriptPDF = !canSendTranscriptPDF || !hasLicense;
1918

20-
const omnichannelTranscriptPDF = useId();
21-
const omnichannelTranscriptEmail = useId();
22-
2319
return (
2420
<AccordionItem defaultExpanded title={t('Conversational_transcript')}>
2521
<FieldGroup>
2622
<Field>
2723
<FieldRow>
28-
<FieldLabel htmlFor={omnichannelTranscriptPDF}>
29-
<Box display='flex' alignItems='center'>
30-
{t('Omnichannel_transcript_pdf')}
31-
<Box marginInline={4}>
32-
{!hasLicense && <Tag variant='featured'>{t('Premium')}</Tag>}
33-
{!canSendTranscriptPDF && hasLicense && <Tag>{t('No_permission')}</Tag>}
34-
</Box>
35-
</Box>
24+
<FieldLabel>
25+
{t('Omnichannel_transcript_pdf')}
26+
{!hasLicense && (
27+
<Tag mi={4} variant='featured'>
28+
{t('Premium')}
29+
</Tag>
30+
)}
31+
{!canSendTranscriptPDF && hasLicense && <Tag mi={4}>{t('No_permission')}</Tag>}
3632
</FieldLabel>
37-
<ToggleSwitch id={omnichannelTranscriptPDF} disabled={cantSendTranscriptPDF} {...register('omnichannelTranscriptPDF')} />
33+
<Controller
34+
control={control}
35+
name='omnichannelTranscriptPDF'
36+
render={({ field: { value, ...field } }) => <ToggleSwitch disabled={cantSendTranscriptPDF} {...field} checked={value} />}
37+
/>
3838
</FieldRow>
3939
<FieldHint>{t('Accounts_Default_User_Preferences_omnichannelTranscriptPDF_Description')}</FieldHint>
4040
</Field>
4141
<Field>
4242
<FieldRow>
43-
<FieldLabel htmlFor={omnichannelTranscriptEmail}>
44-
<Box display='flex' alignItems='center'>
45-
{t('Omnichannel_transcript_email')}
46-
{!canSendTranscriptEmailPermission && (
47-
<Box marginInline={4}>
48-
<Tag>{t('No_permission')}</Tag>
49-
</Box>
50-
)}
51-
</Box>
43+
<FieldLabel>
44+
{t('Omnichannel_transcript_email')}
45+
{!canSendTranscriptEmailPermission && <Tag mi={4}>{t('No_permission')}</Tag>}
5246
</FieldLabel>
53-
<ToggleSwitch id={omnichannelTranscriptEmail} disabled={!canSendTranscriptEmail} {...register('omnichannelTranscriptEmail')} />
47+
<Controller
48+
control={control}
49+
name='omnichannelTranscriptEmail'
50+
render={({ field: { value, ...field } }) => <ToggleSwitch disabled={!canSendTranscriptEmail} {...field} checked={value} />}
51+
/>
5452
</FieldRow>
5553
<FieldHint>{t('Accounts_Default_User_Preferences_omnichannelTranscriptEmail_Description')}</FieldHint>
5654
</Field>

‎apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
1-
import { Field, FieldGroup, FieldHint, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage';
2-
import { useId } from 'react';
1+
import { Field, FieldGroup, FieldHint, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage-forms';
32
import type { ReactElement } from 'react';
4-
import { useFormContext } from 'react-hook-form';
3+
import { Controller, useFormContext } from 'react-hook-form';
54
import { useTranslation } from 'react-i18next';
65

76
export const PreferencesGeneral = (): ReactElement => {
87
const { t } = useTranslation();
9-
const { register } = useFormContext();
10-
const omnichannelHideAfterClosing = useId();
8+
const { control } = useFormContext();
119

1210
return (
1311
<FieldGroup marginBlockEnd='1.5rem' paddingInline='0.5rem'>
1412
<Field>
1513
<FieldRow>
16-
<FieldLabel htmlFor={omnichannelHideAfterClosing}>{t('Omnichannel_hide_conversation_after_closing')}</FieldLabel>
17-
<ToggleSwitch id={omnichannelHideAfterClosing} {...register('omnichannelHideConversationAfterClosing')} />
14+
<FieldLabel>{t('Omnichannel_hide_conversation_after_closing')}</FieldLabel>
15+
<Controller
16+
control={control}
17+
name='omnichannelHideConversationAfterClosing'
18+
render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
19+
/>
1820
</FieldRow>
1921
<FieldHint>{t('Omnichannel_hide_conversation_after_closing_description')}</FieldHint>
2022
</Field>

‎apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { SelectOption } from '@rocket.chat/fuselage';
2-
import { AccordionItem, Field, FieldGroup, FieldLabel, FieldRow, MultiSelect } from '@rocket.chat/fuselage';
2+
import { AccordionItem } from '@rocket.chat/fuselage';
3+
import { Field, FieldGroup, FieldLabel, FieldRow, MultiSelect } from '@rocket.chat/fuselage-forms';
34
import { useUserPreference } from '@rocket.chat/ui-contexts';
4-
import { useId } from 'react';
55
import { Controller, useFormContext } from 'react-hook-form';
66
import { useTranslation } from 'react-i18next';
77

@@ -12,21 +12,18 @@ const PreferencesGlobalSection = () => {
1212
const options: SelectOption[] = userDontAskAgainList.map(({ action, label }) => [action, label]);
1313

1414
const { control } = useFormContext();
15-
const dontAskAgainListId = useId();
1615

1716
return (
1817
<AccordionItem title={t('Global')}>
1918
<FieldGroup>
2019
<Field>
21-
<FieldLabel is='span' htmlFor={dontAskAgainListId}>
22-
{t('Dont_ask_me_again_list')}
23-
</FieldLabel>
20+
<FieldLabel>{t('Dont_ask_me_again_list')}</FieldLabel>
2421
<FieldRow>
2522
<Controller
2623
name='dontAskAgainList'
2724
control={control}
2825
render={({ field: { value, onChange } }) => (
29-
<MultiSelect id={dontAskAgainListId} placeholder={t('Nothing_found')} value={value} onChange={onChange} options={options} />
26+
<MultiSelect placeholder={t('Nothing_found')} value={value} onChange={onChange} options={options} />
3027
)}
3128
/>
3229
</FieldRow>

‎apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
1-
import { AccordionItem, Field, FieldGroup, FieldLabel, FieldRow, FieldHint, TextAreaInput } from '@rocket.chat/fuselage';
2-
import { useId } from 'react';
3-
import { useFormContext } from 'react-hook-form';
1+
import { AccordionItem } from '@rocket.chat/fuselage';
2+
import { Field, FieldGroup, FieldLabel, FieldRow, FieldHint, TextAreaInput } from '@rocket.chat/fuselage-forms';
3+
import { Controller, useFormContext } from 'react-hook-form';
44
import { useTranslation } from 'react-i18next';
55

66
const PreferencesHighlightsSection = () => {
77
const { t } = useTranslation();
8-
const { register } = useFormContext();
9-
10-
const highlightsId = useId();
8+
const { control } = useFormContext();
119

1210
return (
1311
<AccordionItem title={t('Highlights')}>
1412
<FieldGroup>
1513
<Field>
16-
<FieldLabel htmlFor={highlightsId}>{t('Highlights_List')}</FieldLabel>
14+
<FieldLabel>{t('Highlights_List')}</FieldLabel>
1715
<FieldRow>
18-
<TextAreaInput id={highlightsId} {...register('highlights')} rows={4} />
16+
<Controller control={control} name='highlights' render={({ field }) => <TextAreaInput {...field} rows={4} />} />
1917
</FieldRow>
2018
<FieldHint>{t('Highlights_How_To')}</FieldHint>
2119
</Field>

0 commit comments

Comments
 (0)