diff --git a/apps/meteor/client/views/admin/settings/Setting/MemoizedSetting.tsx b/apps/meteor/client/views/admin/settings/Setting/MemoizedSetting.tsx index 8957f8a6ccfbc..e97a979a148e7 100644 --- a/apps/meteor/client/views/admin/settings/Setting/MemoizedSetting.tsx +++ b/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' && {hint}} {callout && ( {callout} diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/ActionSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/ActionSettingInput.tsx index 2add1216798eb..53a0ac53df419 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/ActionSettingInput.tsx +++ b/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 } {sectionChanged && {t('Save_to_enable_this_action')}} + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/AssetSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/AssetSettingInput.tsx index fa4c91798713f..2f05ce556286c 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/AssetSettingInput.tsx +++ b/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, '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 + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx index a98045434d43d..624150b1709b6 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx +++ b/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({ /> + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.tsx index e90fd06db8229..6cdc22a33ad17 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.tsx +++ b/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({ Variable name: {_id.replace(/theme-color-/, '@')} + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.tsx index 496fee8656f29..7863bc59852fb 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.tsx +++ b/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} /> + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.tsx index 6d7f7335c0b6d..b6f2fca1ea634 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.tsx +++ b/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} /> + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.tsx index 562d8b6b03ffb..49f09f0b97f19 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.tsx +++ b/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} /> + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/LanguageSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/LanguageSettingInput.tsx index 5ece11abd5cd5..ad0d5a72ba50c 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/LanguageSettingInput.tsx +++ b/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])} /> + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/LookupSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/LookupSettingInput.tsx index 85715c27fade4..5395f28d3634c 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/LookupSettingInput.tsx +++ b/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])} /> + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.tsx index 3bb9cef58e386..d16dee10c07bf 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.tsx +++ b/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)])} /> + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.tsx index 57532b8d1fe46..70e9d69cefed1 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.tsx +++ b/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} /> + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.tsx index 00c541d8673eb..d4f5666ab8ee1 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.tsx +++ b/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 && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/RoomPickSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/RoomPickSettingInput.tsx index f5a974c7f027e..e61e12483943a 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/RoomPickSettingInput.tsx +++ b/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} /> + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.tsx index 8d9e6489e6f08..cbd456ea25f08 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.tsx +++ b/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)])} /> + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/SelectTimezoneSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/SelectTimezoneSettingInput.tsx index 9418b77283ec3..8da5da22d51a5 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/SelectTimezoneSettingInput.tsx +++ b/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])} /> + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.tsx index 192cefbd4e205..b1dcb1be74ba3 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.tsx +++ b/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({ /> )} + {hint && {hint}} ); } diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx index 9a0348774130b..18d8f62611ca6 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx +++ b/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({