diff --git a/.changeset/thirty-berries-learn.md b/.changeset/thirty-berries-learn.md new file mode 100644 index 0000000000000..99a88729c99af --- /dev/null +++ b/.changeset/thirty-berries-learn.md @@ -0,0 +1,8 @@ +--- +"@rocket.chat/meteor": patch +--- + +**Added tag to premium settings in CE workspaces** + +A premium tag will be displayed alongside the setting label for premium exclusive settings in CE workspaces. +This will bring visibility for users of our premium features while also informing them of the reason why the setting is currently disabled. diff --git a/apps/meteor/client/views/admin/settings/MemoizedSetting.tsx b/apps/meteor/client/views/admin/settings/MemoizedSetting.tsx index 5534e4cef7b39..d0b5c10e2c80a 100644 --- a/apps/meteor/client/views/admin/settings/MemoizedSetting.tsx +++ b/apps/meteor/client/views/admin/settings/MemoizedSetting.tsx @@ -55,7 +55,7 @@ type MemoizedSettingProps = { onResetButtonClick?: () => void; className?: string; invisible?: boolean; - label?: string; + label?: ReactNode; sectionChanged?: boolean; hasResetButton?: boolean; disabled?: boolean; diff --git a/apps/meteor/client/views/admin/settings/Setting.tsx b/apps/meteor/client/views/admin/settings/Setting.tsx index d9076e5fb4f62..6a08352b9180d 100644 --- a/apps/meteor/client/views/admin/settings/Setting.tsx +++ b/apps/meteor/client/views/admin/settings/Setting.tsx @@ -1,6 +1,6 @@ import type { ISettingColor, SettingEditor, SettingValue } from '@rocket.chat/core-typings'; import { isSettingColor, isSetting } from '@rocket.chat/core-typings'; -import { Button } from '@rocket.chat/fuselage'; +import { Box, Button, Tag } from '@rocket.chat/fuselage'; import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks'; import { useSettingStructure, useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; @@ -96,7 +96,7 @@ function Setting({ className = undefined, settingId, sectionChanged }: SettingPr const { _id, disabled, readonly, type, packageValue, i18nLabel, i18nDescription, alert, invisible } = setting; - const label = (t.has(i18nLabel) && t(i18nLabel)) || (t.has(_id) && t(_id)) || i18nLabel || _id; + const labelText = (t.has(i18nLabel) && t(i18nLabel)) || (t.has(_id) && t(_id)) || i18nLabel || _id; const hint = useMemo( () => @@ -119,6 +119,21 @@ function Setting({ className = undefined, settingId, sectionChanged }: SettingPr [shouldDisableEnterprise, t], ); + const label = useMemo(() => { + if (!shouldDisableEnterprise) { + return labelText; + } + + return ( + <> + + {labelText} + + {t('Premium')} + + ); + }, [labelText, shouldDisableEnterprise, t]); + const hasResetButton = !shouldDisableEnterprise && !readonly && @@ -132,7 +147,7 @@ function Setting({ className = undefined, settingId, sectionChanged }: SettingPr return ( , 'onChangeValue'> & { asset?: any; - required?: boolean; fileConstraints?: { extensions: string[] }; }; -function AssetSettingInput({ _id, label, value, asset, required, fileConstraints }: AssetSettingInputProps): ReactElement { +function AssetSettingInput({ _id, label, value, asset, required, disabled, fileConstraints }: AssetSettingInputProps): ReactElement { const t = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); @@ -78,19 +75,20 @@ function AssetSettingInput({ _id, label, value, asset, required, fileConstraints )}
{value?.url ? ( - ) : ( -
+ {t('Select_file')} -
+ )}
diff --git a/apps/meteor/client/views/admin/settings/inputs/BooleanSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/BooleanSettingInput.tsx index 7dc45f6a5392e..cf18a6f0d1df1 100644 --- a/apps/meteor/client/views/admin/settings/inputs/BooleanSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/BooleanSettingInput.tsx @@ -3,18 +3,10 @@ import type { ReactElement, SyntheticEvent } from 'react'; import React from 'react'; import ResetSettingButton from '../ResetSettingButton'; +import type { SettingInputProps } from './types'; + +type BooleanSettingInputProps = SettingInputProps; -type BooleanSettingInputProps = { - _id: string; - label: string; - disabled?: boolean; - readonly?: boolean; - required?: boolean; - value: boolean; - hasResetButton: boolean; - onChangeValue: (value: boolean) => void; - onResetButtonClick: () => void; -}; function BooleanSettingInput({ _id, label, diff --git a/apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirrorBox.tsx b/apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirrorBox.tsx index 730b22b6b58c0..ce6d2dfd60000 100644 --- a/apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirrorBox.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirrorBox.tsx @@ -2,10 +2,10 @@ import { css } from '@rocket.chat/css-in-js'; import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage'; import { useToggle } from '@rocket.chat/fuselage-hooks'; import { useTranslation } from '@rocket.chat/ui-contexts'; -import type { ReactElement } from 'react'; +import type { ReactElement, ReactNode } from 'react'; import React from 'react'; -const CodeMirrorBox = ({ label, children }: { label: string; children: ReactElement }) => { +const CodeMirrorBox = ({ label, children }: { label: ReactNode; children: ReactElement }) => { const t = useTranslation(); const [fullScreen, toggleFullScreen] = useToggle(false); diff --git a/apps/meteor/client/views/admin/settings/inputs/CodeSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/CodeSettingInput.tsx index 0424e862bd086..f019e4742bf49 100644 --- a/apps/meteor/client/views/admin/settings/inputs/CodeSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/CodeSettingInput.tsx @@ -5,21 +5,13 @@ import React from 'react'; import ResetSettingButton from '../ResetSettingButton'; import CodeMirror from './CodeMirror'; import CodeMirrorBox from './CodeMirror/CodeMirrorBox'; +import type { SettingInputProps } from './types'; -type CodeSettingInputProps = { - _id: string; - label: string; +type CodeSettingInputProps = SettingInputProps & { hint: string; - value?: string; code: string; - placeholder?: string; readonly: boolean; - autocomplete: boolean; disabled: boolean; - required?: boolean; - hasResetButton: boolean; - onChangeValue: (value: string) => void; - onResetButtonClick: () => void; }; function CodeSettingInput({ diff --git a/apps/meteor/client/views/admin/settings/inputs/ColorSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/ColorSettingInput.tsx index a4f61b8115497..dab9e63f7435c 100644 --- a/apps/meteor/client/views/admin/settings/inputs/ColorSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/ColorSettingInput.tsx @@ -5,23 +5,14 @@ import type { ReactElement } from 'react'; import React, { useCallback } from 'react'; import ResetSettingButton from '../ResetSettingButton'; +import type { SettingInputProps } from './types'; -type ColorSettingInputProps = { - _id: string; - label: string; +type ColorSettingInputProps = SettingInputProps & { value: string; editor: string; allowedTypes?: TranslationKey[]; - placeholder?: string; - readonly?: boolean; - autocomplete?: boolean; - disabled?: boolean; - required?: boolean; - hasResetButton?: boolean; - onChangeValue?: (value: string) => void; - onChangeEditor?: (value: string) => void; - onResetButtonClick?: () => void; }; + function ColorSettingInput({ _id, label, diff --git a/apps/meteor/client/views/admin/settings/inputs/FontSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/FontSettingInput.tsx index 1c1c45913bc13..4508f52222baf 100644 --- a/apps/meteor/client/views/admin/settings/inputs/FontSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/FontSettingInput.tsx @@ -3,20 +3,12 @@ import type { FormEventHandler, ReactElement } from 'react'; import React from 'react'; import ResetSettingButton from '../ResetSettingButton'; +import type { SettingInputProps } from './types'; -type FontSettingInputProps = { - _id: string; - label: string; +type FontSettingInputProps = SettingInputProps & { value: string; - placeholder?: string; - readonly?: boolean; - autocomplete?: boolean; - disabled?: boolean; - required?: boolean; - hasResetButton?: boolean; - onChangeValue?: (value: string) => void; - onResetButtonClick?: () => void; }; + function FontSettingInput({ _id, label, diff --git a/apps/meteor/client/views/admin/settings/inputs/GenericSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/GenericSettingInput.tsx index daabea2b1d0eb..8f6c38dbe22e1 100644 --- a/apps/meteor/client/views/admin/settings/inputs/GenericSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/GenericSettingInput.tsx @@ -3,20 +3,12 @@ import type { FormEventHandler, ReactElement } from 'react'; import React from 'react'; import ResetSettingButton from '../ResetSettingButton'; +import type { SettingInputProps } from './types'; -type GenericSettingInputProps = { - _id: string; - label: string; +type GenericSettingInputProps = SettingInputProps & { value: string; - placeholder?: string; - readonly?: boolean; - autocomplete?: boolean; - disabled?: boolean; - required?: boolean; - hasResetButton?: boolean; - onChangeValue?: (value: string) => void; - onResetButtonClick?: () => void; }; + function GenericSettingInput({ _id, label, diff --git a/apps/meteor/client/views/admin/settings/inputs/IntSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/IntSettingInput.tsx index 16100f128466f..053f00be2f85b 100644 --- a/apps/meteor/client/views/admin/settings/inputs/IntSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/IntSettingInput.tsx @@ -3,19 +3,10 @@ import type { FormEventHandler, ReactElement } from 'react'; import React from 'react'; import ResetSettingButton from '../ResetSettingButton'; +import type { SettingInputProps } from './types'; -type IntSettingInputProps = { - _id: string; - label: string; +type IntSettingInputProps = SettingInputProps & { value: string; - placeholder?: string; - readonly?: boolean; - autocomplete?: boolean; - disabled?: boolean; - required?: boolean; - hasResetButton?: boolean; - onChangeValue?: (value: string | number) => void; - onResetButtonClick?: () => void; }; function IntSettingInput({ diff --git a/apps/meteor/client/views/admin/settings/inputs/LanguageSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/LanguageSettingInput.tsx index f91642a5eed99..6044cc7546021 100644 --- a/apps/meteor/client/views/admin/settings/inputs/LanguageSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/LanguageSettingInput.tsx @@ -4,20 +4,9 @@ import type { ReactElement } from 'react'; import React from 'react'; import ResetSettingButton from '../ResetSettingButton'; +import type { SettingInputProps } from './types'; -type LanguageSettingInputProps = { - _id: string; - label: string; - value: string; - placeholder?: string; - readonly?: boolean; - autocomplete?: boolean; - disabled?: boolean; - required?: boolean; - hasResetButton?: boolean; - onChangeValue?: (value: string | number) => void; - onResetButtonClick?: () => void; -}; +type LanguageSettingInputProps = SettingInputProps; function LanguageSettingInput({ _id, diff --git a/apps/meteor/client/views/admin/settings/inputs/LookupSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/LookupSettingInput.tsx index 360eba91a7851..d2c7029f994d3 100644 --- a/apps/meteor/client/views/admin/settings/inputs/LookupSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/LookupSettingInput.tsx @@ -6,20 +6,10 @@ import React from 'react'; import type { AsyncState } from '../../../../hooks/useAsyncState'; import { useEndpointData } from '../../../../hooks/useEndpointData'; import ResetSettingButton from '../ResetSettingButton'; +import type { SettingInputProps } from './types'; -type LookupSettingInputProps = { - _id: string; - label: string; - value?: string; +type LookupSettingInputProps = SettingInputProps & { lookupEndpoint: PathPattern extends `/${infer U}` ? U : PathPattern; - placeholder?: string; - readonly?: boolean; - autocomplete?: boolean; - disabled?: boolean; - required?: boolean; - hasResetButton?: boolean; - onChangeValue?: (value: string) => void; - onResetButtonClick?: () => void; }; function LookupSettingInput({ diff --git a/apps/meteor/client/views/admin/settings/inputs/MultiSelectSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/MultiSelectSettingInput.tsx index c0d12ee401cf8..a484dc1133f0f 100644 --- a/apps/meteor/client/views/admin/settings/inputs/MultiSelectSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/MultiSelectSettingInput.tsx @@ -5,21 +5,11 @@ import type { ReactElement } from 'react'; import React from 'react'; import ResetSettingButton from '../ResetSettingButton'; +import type { SettingInputProps } from './types'; export type valuesOption = { key: string; i18nLabel: TranslationKey }; -type MultiSelectSettingInputProps = { - _id: string; - label: string; - value?: [string, string]; +type MultiSelectSettingInputProps = SettingInputProps<[string, string], string[]> & { values: valuesOption[]; - placeholder?: string; - readonly?: boolean; - autocomplete?: boolean; - disabled?: boolean; - required?: boolean; - hasResetButton?: boolean; - onChangeValue?: (value: string[]) => void; - onResetButtonClick?: () => void; }; function MultiSelectSettingInput({ diff --git a/apps/meteor/client/views/admin/settings/inputs/PasswordSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/PasswordSettingInput.tsx index 249fb7e8c90d6..75743c9f5a6c3 100644 --- a/apps/meteor/client/views/admin/settings/inputs/PasswordSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/PasswordSettingInput.tsx @@ -3,20 +3,9 @@ import type { EventHandler, ReactElement, SyntheticEvent } from 'react'; import React from 'react'; import ResetSettingButton from '../ResetSettingButton'; +import type { SettingInputProps } from './types'; -type PasswordSettingInputProps = { - _id: string; - label: string; - value?: string | number | readonly string[] | undefined; - placeholder?: string; - readonly?: boolean; - autocomplete?: boolean; - disabled?: boolean; - required?: boolean; - hasResetButton?: boolean; - onChangeValue?: (value: string) => void; - onResetButtonClick?: () => void; -}; +type PasswordSettingInputProps = SettingInputProps; function PasswordSettingInput({ _id, diff --git a/apps/meteor/client/views/admin/settings/inputs/RelativeUrlSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/RelativeUrlSettingInput.tsx index 681232e41802c..ac03596cc2739 100644 --- a/apps/meteor/client/views/admin/settings/inputs/RelativeUrlSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/RelativeUrlSettingInput.tsx @@ -4,20 +4,9 @@ import type { EventHandler, ReactElement, SyntheticEvent } from 'react'; import React from 'react'; import ResetSettingButton from '../ResetSettingButton'; +import type { SettingInputProps } from './types'; -type RelativeUrlSettingInputProps = { - _id: string; - label: string; - value?: string; - placeholder?: string; - readonly?: boolean; - autocomplete?: boolean; - disabled?: boolean; - required?: boolean; - hasResetButton?: boolean; - onChangeValue?: (value: string) => void; - onResetButtonClick?: () => void; -}; +type RelativeUrlSettingInputProps = SettingInputProps; function RelativeUrlSettingInput({ _id, diff --git a/apps/meteor/client/views/admin/settings/inputs/RoomPickSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/RoomPickSettingInput.tsx index fab66ff7a0664..df2a4c1b06880 100644 --- a/apps/meteor/client/views/admin/settings/inputs/RoomPickSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/RoomPickSettingInput.tsx @@ -5,19 +5,9 @@ import React from 'react'; import RoomAutoCompleteMultiple from '../../../../components/RoomAutoCompleteMultiple'; import ResetSettingButton from '../ResetSettingButton'; +import type { SettingInputProps } from './types'; -type RoomPickSettingInputProps = { - _id: string; - label: string; - value?: SettingValueRoomPick | ''; - placeholder?: string; - readonly?: boolean; - disabled?: boolean; - required?: boolean; - hasResetButton?: boolean; - onChangeValue: (value: SettingValueRoomPick) => void; - onResetButtonClick?: () => void; -}; +type RoomPickSettingInputProps = SettingInputProps; function RoomPickSettingInput({ _id, diff --git a/apps/meteor/client/views/admin/settings/inputs/SelectSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/SelectSettingInput.tsx index f12104f07d0c2..2ace88fda2cb6 100644 --- a/apps/meteor/client/views/admin/settings/inputs/SelectSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/SelectSettingInput.tsx @@ -5,20 +5,10 @@ import type { ReactElement } from 'react'; import React from 'react'; import ResetSettingButton from '../ResetSettingButton'; +import type { SettingInputProps } from './types'; -type SelectSettingInputProps = { - _id: string; - label: string; - value?: string; +type SelectSettingInputProps = SettingInputProps & { values?: { key: string; i18nLabel: TranslationKey }[]; - placeholder?: string; - readonly?: boolean; - autocomplete?: boolean; - disabled?: boolean; - required?: boolean; - hasResetButton?: boolean; - onChangeValue?: (value: string) => void; - onResetButtonClick?: () => void; }; function SelectSettingInput({ diff --git a/apps/meteor/client/views/admin/settings/inputs/SelectTimezoneSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/SelectTimezoneSettingInput.tsx index 55f877c77c44a..fd1fc147a51ad 100644 --- a/apps/meteor/client/views/admin/settings/inputs/SelectTimezoneSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/SelectTimezoneSettingInput.tsx @@ -4,20 +4,9 @@ import type { ReactElement } from 'react'; import React from 'react'; import ResetSettingButton from '../ResetSettingButton'; +import type { SettingInputProps } from './types'; -type SelectTimezoneSettingInputProps = { - _id: string; - label: string; - value?: string; - placeholder?: string; - readonly?: boolean; - autocomplete?: boolean; - disabled?: boolean; - required?: boolean; - hasResetButton?: boolean; - onChangeValue?: (value: string) => void; - onResetButtonClick?: () => void; -}; +type SelectTimezoneSettingInputProps = SettingInputProps; function SelectTimezoneSettingInput({ _id, diff --git a/apps/meteor/client/views/admin/settings/inputs/StringSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/StringSettingInput.tsx index 1803f54a36316..2652fb1221622 100644 --- a/apps/meteor/client/views/admin/settings/inputs/StringSettingInput.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/StringSettingInput.tsx @@ -3,22 +3,12 @@ import type { EventHandler, ReactElement, SyntheticEvent } from 'react'; import React from 'react'; import ResetSettingButton from '../ResetSettingButton'; +import type { SettingInputProps } from './types'; -type StringSettingInputProps = { - _id: string; - label: string; +type StringSettingInputProps = SettingInputProps & { name?: string; - value?: string; multiline?: boolean; - placeholder?: string; - readonly?: boolean; error?: string; - autocomplete?: boolean; - disabled?: boolean; - required?: boolean; - hasResetButton?: boolean; - onChangeValue?: (value: string) => void; - onResetButtonClick?: () => void; }; function StringSettingInput({ diff --git a/apps/meteor/client/views/admin/settings/inputs/types.ts b/apps/meteor/client/views/admin/settings/inputs/types.ts new file mode 100644 index 0000000000000..d978a3ad6b4d2 --- /dev/null +++ b/apps/meteor/client/views/admin/settings/inputs/types.ts @@ -0,0 +1,18 @@ +import type { ReactNode } from 'react'; + +export type SettingInputProps = { + _id: string; + label: ReactNode; + value?: V; + placeholder?: string; + readonly?: boolean; + autocomplete?: boolean; + disabled: boolean; + required?: boolean; + hint?: string; + editor?: string; + hasResetButton: boolean; + onChangeValue: (value: R) => void; + onResetButtonClick?: () => void; + onChangeEditor?: (value: string | undefined) => void; +};