Skip to content

Commit 65b57cc

Browse files
dougfabrisdougfabris
authored
refactor: Allow setting's hint customization (RocketChat#37032)
1 parent 3b2905b commit 65b57cc

18 files changed

Lines changed: 55 additions & 23 deletions

‎apps/meteor/client/views/admin/settings/Setting/MemoizedSetting.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { ISettingBase, SettingEditor, SettingValue } from '@rocket.chat/core-typings';
2-
import { Box, Callout, Field, FieldHint, Margins } from '@rocket.chat/fuselage';
2+
import { Box, Callout, Field, Margins } from '@rocket.chat/fuselage';
33
import type { ElementType, ReactElement, ReactNode } from 'react';
44
import { memo } from 'react';
55

@@ -99,7 +99,6 @@ const MemoizedSetting = ({
9999
disabled={disabled}
100100
{...inputProps}
101101
/>
102-
{hint && type !== 'code' && <FieldHint>{hint}</FieldHint>}
103102
{callout && (
104103
<Margins block={16}>
105104
<Callout type='warning'>{callout}</Callout>

‎apps/meteor/client/views/admin/settings/Setting/inputs/ActionSettingInput.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ import { useMethod, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
55
import type { ReactElement } from 'react';
66
import { useTranslation } from 'react-i18next';
77

8-
type ActionSettingInputProps = {
9-
_id: string;
10-
actionText: TranslationKey;
8+
import type { SettingInputProps } from './types';
9+
10+
type ActionSettingInputProps = SettingInputProps & {
1111
value: keyof ServerMethods;
12-
disabled: boolean;
12+
actionText: TranslationKey;
1313
sectionChanged: boolean;
1414
};
15-
function ActionSettingInput({ _id, actionText, value, disabled, sectionChanged }: ActionSettingInputProps): ReactElement {
15+
16+
function ActionSettingInput({ _id, actionText, value, hint, disabled, sectionChanged }: ActionSettingInputProps): ReactElement {
1617
const { t } = useTranslation();
1718

1819
const dispatchToastMessage = useToastMessageDispatch();
@@ -37,6 +38,7 @@ function ActionSettingInput({ _id, actionText, value, disabled, sectionChanged }
3738
</Button>
3839
</FieldRow>
3940
{sectionChanged && <FieldHint>{t('Save_to_enable_this_action')}</FieldHint>}
41+
{hint && <FieldHint>{hint}</FieldHint>}
4042
</>
4143
);
4244
}

‎apps/meteor/client/views/admin/settings/Setting/inputs/AssetSettingInput.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { css } from '@rocket.chat/css-in-js';
2-
import { Box, Button, Field, FieldLabel, FieldRow, Icon, Palette } from '@rocket.chat/fuselage';
2+
import { Box, Button, Field, FieldHint, FieldLabel, FieldRow, Icon, Palette } from '@rocket.chat/fuselage';
33
import { Random } from '@rocket.chat/random';
44
import { useToastMessageDispatch, useEndpoint, useTranslation, useUpload } from '@rocket.chat/ui-contexts';
55
import type { ChangeEventHandler, DragEvent, ReactElement, SyntheticEvent } from 'react';
@@ -11,7 +11,7 @@ type AssetSettingInputProps = Omit<SettingInputProps<{ url: string }>, 'onChange
1111
fileConstraints?: { extensions: string[] };
1212
};
1313

14-
function AssetSettingInput({ _id, label, value, asset, required, disabled, fileConstraints }: AssetSettingInputProps): ReactElement {
14+
function AssetSettingInput({ _id, label, value, hint, asset, required, disabled, fileConstraints }: AssetSettingInputProps): ReactElement {
1515
const t = useTranslation();
1616

1717
const dispatchToastMessage = useToastMessageDispatch();
@@ -125,6 +125,7 @@ function AssetSettingInput({ _id, label, value, asset, required, disabled, fileC
125125
</div>
126126
</Box>
127127
</FieldRow>
128+
{hint && <FieldHint>{hint}</FieldHint>}
128129
</Field>
129130
);
130131
}

‎apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Field, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage';
1+
import { Box, Field, FieldHint, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage';
22
import type { ReactElement, SyntheticEvent } from 'react';
33

44
import ResetSettingButton from '../ResetSettingButton';
@@ -13,6 +13,7 @@ function BooleanSettingInput({
1313
readonly,
1414
required,
1515
value,
16+
hint,
1617
hasResetButton,
1718
onChangeValue,
1819
onResetButtonClick,
@@ -39,6 +40,7 @@ function BooleanSettingInput({
3940
/>
4041
</Box>
4142
</FieldRow>
43+
{hint && <FieldHint>{hint}</FieldHint>}
4244
</Field>
4345
);
4446
}

‎apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ function ColorSettingInput({
1818
_id,
1919
label,
2020
value,
21+
hint,
2122
editor,
2223
allowedTypes = [],
2324
placeholder,
@@ -99,6 +100,7 @@ function ColorSettingInput({
99100
</FieldRow>
100101
</Margins>
101102
<FieldHint>Variable name: {_id.replace(/theme-color-/, '@')}</FieldHint>
103+
{hint && <FieldHint>{hint}</FieldHint>}
102104
</Field>
103105
);
104106
}

‎apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Field, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
1+
import { Field, FieldHint, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
22
import type { FormEventHandler, ReactElement } from 'react';
33

44
import ResetSettingButton from '../ResetSettingButton';
@@ -12,6 +12,7 @@ function FontSettingInput({
1212
_id,
1313
label,
1414
value,
15+
hint,
1516
placeholder,
1617
readonly,
1718
autocomplete,
@@ -45,6 +46,7 @@ function FontSettingInput({
4546
onChange={handleChange}
4647
/>
4748
</FieldRow>
49+
{hint && <FieldHint>{hint}</FieldHint>}
4850
</Field>
4951
);
5052
}

‎apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Field, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
1+
import { Field, FieldHint, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
22
import type { FormEventHandler, ReactElement } from 'react';
33

44
import ResetSettingButton from '../ResetSettingButton';
@@ -12,6 +12,7 @@ function GenericSettingInput({
1212
_id,
1313
label,
1414
value,
15+
hint,
1516
placeholder,
1617
readonly,
1718
autocomplete,
@@ -45,6 +46,7 @@ function GenericSettingInput({
4546
onChange={handleChange}
4647
/>
4748
</FieldRow>
49+
{hint && <FieldHint>{hint}</FieldHint>}
4850
</Field>
4951
);
5052
}

‎apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Field, FieldLabel, FieldRow, InputBox } from '@rocket.chat/fuselage';
1+
import { Field, FieldHint, FieldLabel, FieldRow, InputBox } from '@rocket.chat/fuselage';
22
import type { FormEventHandler, ReactElement } from 'react';
33

44
import ResetSettingButton from '../ResetSettingButton';
@@ -12,6 +12,7 @@ function IntSettingInput({
1212
_id,
1313
label,
1414
value,
15+
hint,
1516
placeholder,
1617
readonly,
1718
autocomplete,
@@ -46,6 +47,7 @@ function IntSettingInput({
4647
onChange={handleChange}
4748
/>
4849
</FieldRow>
50+
{hint && <FieldHint>{hint}</FieldHint>}
4951
</Field>
5052
);
5153
}

‎apps/meteor/client/views/admin/settings/Setting/inputs/LanguageSettingInput.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
1+
import { Field, FieldHint, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
22
import { useLanguages } from '@rocket.chat/ui-contexts';
33
import type { ReactElement } from 'react';
44

@@ -11,6 +11,7 @@ function LanguageSettingInput({
1111
_id,
1212
label,
1313
value,
14+
hint,
1415
placeholder,
1516
readonly,
1617
autocomplete,
@@ -47,6 +48,7 @@ function LanguageSettingInput({
4748
options={languages.map(({ key, name }) => [key, name])}
4849
/>
4950
</FieldRow>
51+
{hint && <FieldHint>{hint}</FieldHint>}
5052
</Field>
5153
);
5254
}

‎apps/meteor/client/views/admin/settings/Setting/inputs/LookupSettingInput.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
1+
import { Field, FieldHint, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
22
import type { PathPattern } from '@rocket.chat/rest-typings';
33
import { useEndpoint } from '@rocket.chat/ui-contexts';
44
import { useQuery } from '@tanstack/react-query';
@@ -16,6 +16,7 @@ function LookupSettingInput({
1616
_id,
1717
label,
1818
value,
19+
hint,
1920
placeholder,
2021
readonly,
2122
autocomplete,
@@ -60,6 +61,7 @@ function LookupSettingInput({
6061
options={values.map(({ key, label }) => [key, label])}
6162
/>
6263
</FieldRow>
64+
{hint && <FieldHint>{hint}</FieldHint>}
6365
</Field>
6466
);
6567
}

0 commit comments

Comments
 (0)