refactor: Allow setting's hint customization

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

@@ -1,5 +1,5 @@
 import type { ISettingBase, SettingEditor, SettingValue } from '@rocket.chat/core-typings';
-import { Box, Callout, Field, FieldHint, Margins } from '@rocket.chat/fuselage';
+import { Box, Callout, Field, Margins } from '@rocket.chat/fuselage';
 import type { ElementType, ReactElement, ReactNode } from 'react';
 import { memo } from 'react';
 
@@ -99,7 +99,6 @@ const MemoizedSetting = ({
 					disabled={disabled}
 					{...inputProps}
 				/>
-				{hint && type !== 'code' && <FieldHint>{hint}</FieldHint>}
 				{callout && (
 					<Margins block={16}>
 						<Callout type='warning'>{callout}</Callout>

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

@@ -5,14 +5,15 @@ import { useMethod, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
-type ActionSettingInputProps = {
-	_id: string;
-	actionText: TranslationKey;
+import type { SettingInputProps } from './types';
+
+type ActionSettingInputProps = SettingInputProps & {
 	value: keyof ServerMethods;
-	disabled: boolean;
+	actionText: TranslationKey;
 	sectionChanged: boolean;
 };
-function ActionSettingInput({ _id, actionText, value, disabled, sectionChanged }: ActionSettingInputProps): ReactElement {
+
+function ActionSettingInput({ _id, actionText, value, hint, disabled, sectionChanged }: ActionSettingInputProps): ReactElement {
 	const { t } = useTranslation();
 
 	const dispatchToastMessage = useToastMessageDispatch();
@@ -37,6 +38,7 @@ function ActionSettingInput({ _id, actionText, value, disabled, sectionChanged }
 				</Button>
 			</FieldRow>
 			{sectionChanged && <FieldHint>{t('Save_to_enable_this_action')}</FieldHint>}
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</>
 	);
 }

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

@@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Button, Field, FieldLabel, FieldRow, Icon, Palette } from '@rocket.chat/fuselage';
+import { Box, Button, Field, FieldHint, FieldLabel, FieldRow, Icon, Palette } from '@rocket.chat/fuselage';
 import { Random } from '@rocket.chat/random';
 import { useToastMessageDispatch, useEndpoint, useTranslation, useUpload } from '@rocket.chat/ui-contexts';
 import type { ChangeEventHandler, DragEvent, ReactElement, SyntheticEvent } from 'react';
@@ -11,7 +11,7 @@ type AssetSettingInputProps = Omit<SettingInputProps<{ url: string }>, 'onChange
 	fileConstraints?: { extensions: string[] };
 };
 
-function AssetSettingInput({ _id, label, value, asset, required, disabled, fileConstraints }: AssetSettingInputProps): ReactElement {
+function AssetSettingInput({ _id, label, value, hint, asset, required, disabled, fileConstraints }: AssetSettingInputProps): ReactElement {
 	const t = useTranslation();
 
 	const dispatchToastMessage = useToastMessageDispatch();
@@ -125,6 +125,7 @@ function AssetSettingInput({ _id, label, value, asset, required, disabled, fileC
 					</div>
 				</Box>
 			</FieldRow>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

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

@@ -1,4 +1,4 @@
-import { Box, Field, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage';
+import { Box, Field, FieldHint, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage';
 import type { ReactElement, SyntheticEvent } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
@@ -13,6 +13,7 @@ function BooleanSettingInput({
 	readonly,
 	required,
 	value,
+	hint,
 	hasResetButton,
 	onChangeValue,
 	onResetButtonClick,
@@ -39,6 +40,7 @@ function BooleanSettingInput({
 					/>
 				</Box>
 			</FieldRow>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

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

@@ -18,6 +18,7 @@ function ColorSettingInput({
 	_id,
 	label,
 	value,
+	hint,
 	editor,
 	allowedTypes = [],
 	placeholder,
@@ -99,6 +100,7 @@ function ColorSettingInput({
 				</FieldRow>
 			</Margins>
 			<FieldHint>Variable name: {_id.replace(/theme-color-/, '@')}</FieldHint>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

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

@@ -1,4 +1,4 @@
-import { Field, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
+import { Field, FieldHint, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
 import type { FormEventHandler, ReactElement } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
@@ -12,6 +12,7 @@ function FontSettingInput({
 	_id,
 	label,
 	value,
+	hint,
 	placeholder,
 	readonly,
 	autocomplete,
@@ -45,6 +46,7 @@ function FontSettingInput({
 					onChange={handleChange}
 				/>
 			</FieldRow>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

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

@@ -1,4 +1,4 @@
-import { Field, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
+import { Field, FieldHint, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
 import type { FormEventHandler, ReactElement } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
@@ -12,6 +12,7 @@ function GenericSettingInput({
 	_id,
 	label,
 	value,
+	hint,
 	placeholder,
 	readonly,
 	autocomplete,
@@ -45,6 +46,7 @@ function GenericSettingInput({
 					onChange={handleChange}
 				/>
 			</FieldRow>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

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

@@ -1,4 +1,4 @@
-import { Field, FieldLabel, FieldRow, InputBox } from '@rocket.chat/fuselage';
+import { Field, FieldHint, FieldLabel, FieldRow, InputBox } from '@rocket.chat/fuselage';
 import type { FormEventHandler, ReactElement } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
@@ -12,6 +12,7 @@ function IntSettingInput({
 	_id,
 	label,
 	value,
+	hint,
 	placeholder,
 	readonly,
 	autocomplete,
@@ -46,6 +47,7 @@ function IntSettingInput({
 					onChange={handleChange}
 				/>
 			</FieldRow>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

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

@@ -1,4 +1,4 @@
-import { Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
+import { Field, FieldHint, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
 import { useLanguages } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 
@@ -11,6 +11,7 @@ function LanguageSettingInput({
 	_id,
 	label,
 	value,
+	hint,
 	placeholder,
 	readonly,
 	autocomplete,
@@ -47,6 +48,7 @@ function LanguageSettingInput({
 					options={languages.map(({ key, name }) => [key, name])}
 				/>
 			</FieldRow>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

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

@@ -1,4 +1,4 @@
-import { Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
+import { Field, FieldHint, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
 import type { PathPattern } from '@rocket.chat/rest-typings';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
@@ -16,6 +16,7 @@ function LookupSettingInput({
 	_id,
 	label,
 	value,
+	hint,
 	placeholder,
 	readonly,
 	autocomplete,
@@ -60,6 +61,7 @@ function LookupSettingInput({
 					options={values.map(({ key, label }) => [key, label])}
 				/>
 			</FieldRow>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.tsx

@@ -1,4 +1,4 @@
-import { FieldLabel, MultiSelectFiltered, MultiSelect, Field, FieldRow } from '@rocket.chat/fuselage';
+import { FieldLabel, MultiSelectFiltered, MultiSelect, Field, FieldRow, FieldHint } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -15,6 +15,7 @@ function MultiSelectSettingInput({
 	_id,
 	label,
 	value,
+	hint,
 	placeholder,
 	readonly,
 	disabled,
@@ -54,6 +55,7 @@ function MultiSelectSettingInput({
 					options={values.map(({ key, i18nLabel }) => [key, t(i18nLabel)])}
 				/>
 			</FieldRow>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.tsx

@@ -1,4 +1,4 @@
-import { Field, FieldLabel, FieldRow, PasswordInput } from '@rocket.chat/fuselage';
+import { Field, FieldHint, FieldLabel, FieldRow, PasswordInput } from '@rocket.chat/fuselage';
 import type { EventHandler, ReactElement, SyntheticEvent } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
@@ -10,6 +10,7 @@ function PasswordSettingInput({
 	_id,
 	label,
 	value,
+	hint,
 	placeholder,
 	readonly,
 	autocomplete,
@@ -43,6 +44,7 @@ function PasswordSettingInput({
 					onChange={handleChange}
 				/>
 			</FieldRow>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.tsx

@@ -1,4 +1,4 @@
-import { Field, FieldLabel, FieldRow, UrlInput } from '@rocket.chat/fuselage';
+import { Field, FieldHint, FieldLabel, FieldRow, UrlInput } from '@rocket.chat/fuselage';
 import { useAbsoluteUrl } from '@rocket.chat/ui-contexts';
 import type { EventHandler, ReactElement, SyntheticEvent } from 'react';
 
@@ -11,6 +11,7 @@ function RelativeUrlSettingInput({
 	_id,
 	label,
 	value,
+	hint,
 	placeholder,
 	readonly,
 	autocomplete,
@@ -44,6 +45,7 @@ function RelativeUrlSettingInput({
 				autoComplete={autocomplete === false ? 'off' : undefined}
 				onChange={handleChange}
 			/>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

apps/meteor/client/views/admin/settings/Setting/inputs/RoomPickSettingInput.tsx

@@ -1,5 +1,5 @@
 import type { SettingValueRoomPick } from '@rocket.chat/core-typings';
-import { Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
+import { Field, FieldHint, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 
 import RoomAutoCompleteMultiple from '../../../../../components/RoomAutoCompleteMultiple';
@@ -12,6 +12,7 @@ function RoomPickSettingInput({
 	_id,
 	label,
 	value,
+	hint,
 	placeholder,
 	readonly,
 	disabled,
@@ -46,6 +47,7 @@ function RoomPickSettingInput({
 					onChange={handleChange}
 				/>
 			</FieldRow>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.tsx

@@ -1,4 +1,4 @@
-import { Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
+import { Field, FieldHint, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,6 +14,7 @@ function SelectSettingInput({
 	_id,
 	label,
 	value,
+	hint,
 	placeholder,
 	readonly,
 	autocomplete,
@@ -51,6 +52,7 @@ function SelectSettingInput({
 					options={values.map(({ key, i18nLabel }) => [key, t(i18nLabel)])}
 				/>
 			</FieldRow>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

apps/meteor/client/views/admin/settings/Setting/inputs/SelectTimezoneSettingInput.tsx

@@ -1,4 +1,4 @@
-import { Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
+import { Field, FieldHint, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
 import moment from 'moment-timezone';
 import type { ReactElement } from 'react';
 
@@ -11,6 +11,7 @@ function SelectTimezoneSettingInput({
 	_id,
 	label,
 	value,
+	hint,
 	placeholder,
 	readonly,
 	autocomplete,
@@ -45,6 +46,7 @@ function SelectTimezoneSettingInput({
 					options={moment.tz.names().map((key) => [key, key])}
 				/>
 			</FieldRow>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.tsx

@@ -1,4 +1,4 @@
-import { Field, FieldLabel, FieldRow, TextAreaInput, TextInput } from '@rocket.chat/fuselage';
+import { Field, FieldHint, FieldLabel, FieldRow, TextAreaInput, TextInput } from '@rocket.chat/fuselage';
 import type { EventHandler, ReactElement, SyntheticEvent } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
@@ -22,6 +22,7 @@ function StringSettingInput({
 	error,
 	autocomplete,
 	value,
+	hint,
 	hasResetButton,
 	onChangeValue,
 	onResetButtonClick,
@@ -68,6 +69,7 @@ function StringSettingInput({
 					/>
 				)}
 			</FieldRow>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }

apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx

@@ -1,4 +1,4 @@
-import { Field, FieldLabel, FieldRow, InputBox, Select } from '@rocket.chat/fuselage';
+import { Field, FieldHint, FieldLabel, FieldRow, InputBox, Select } from '@rocket.chat/fuselage';
 import type { FormEventHandler, Key, ReactElement } from 'react';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -39,6 +39,7 @@ function TimespanSettingInput({
 	_id,
 	label,
 	value,
+	hint,
 	placeholder,
 	readonly,
 	autocomplete,
@@ -105,6 +106,7 @@ function TimespanSettingInput({
 			<FieldRow>
 				<Select value={timeUnit} disabled={disabled} options={timeUnitOptions} onChange={handleChangeTimeUnit} />
 			</FieldRow>
+			{hint && <FieldHint>{hint}</FieldHint>}
 		</Field>
 	);
 }