feat: added enterprise tag to premium setting label

RocketChat · Mar 7, 2024 · ed7001b · ed7001b
1 parent 6ba833d
commit ed7001b
Show file tree

Hide file tree

Showing 19 changed files with 61 additions and 43 deletions.
diff --git a/apps/meteor/client/views/admin/settings/MemoizedSetting.tsx b/apps/meteor/client/views/admin/settings/MemoizedSetting.tsx
@@ -55,12 +55,13 @@ type MemoizedSettingProps = {
 	onResetButtonClick?: () => void;
 	className?: string;
 	invisible?: boolean;
-	label?: string;
+	label?: ReactNode;
 	sectionChanged?: boolean;
 	hasResetButton?: boolean;
 	disabled?: boolean;
 	required?: boolean;
 	showUpgradeButton?: ReactNode;
+	tag?: ReactNode;
 	actionText?: string;
 };
 

diff --git 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 (
+			<>
+				<Box is='span' mie={4}>
+					{labelText}
+				</Box>
+				<Tag variant='primary'>{t('Enterprise')}</Tag>
+			</>
+		);
+	}, [labelText, shouldDisableEnterprise, t]);
+
 	const hasResetButton =
 		!shouldDisableEnterprise &&
 		!readonly &&
@@ -132,7 +147,7 @@ function Setting({ className = undefined, settingId, sectionChanged }: SettingPr
 	return (
 		<MemoizedSetting
 			className={className}
-			label={label || undefined}
+			label={label}
 			hint={hint}
 			callout={callout}
 			showUpgradeButton={showUpgradeButton}

diff --git a/apps/meteor/client/views/admin/settings/inputs/AssetSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/AssetSettingInput.tsx
@@ -1,21 +1,22 @@
-import { Button, Field, FieldLabel, FieldRow, Icon } from '@rocket.chat/fuselage';
+import { Box, Button, Field, FieldLabel, FieldRow, Icon } 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';
+import type { ChangeEventHandler, DragEvent, ReactElement, ReactNode, SyntheticEvent } from 'react';
 import React from 'react';
 
 import './AssetSettingInput.styles.css';
 
 type AssetSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	value?: { url: string };
 	asset?: any;
 	required?: boolean;
+	disabled?: 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 +79,20 @@ function AssetSettingInput({ _id, label, value, asset, required, fileConstraints
 					)}
 					<div className='action'>
 						{value?.url ? (
-							<Button icon='trash' onClick={handleDeleteButtonClick}>
+							<Button icon='trash' disabled={disabled} onClick={handleDeleteButtonClick}>
 								{t('Delete')}
 							</Button>
 						) : (
-							<div className='rc-button rc-button--primary'>
+							<Box position='relative' className={`rcx-button rcx-button--primary ${disabled ? 'is-disabled' : ''}`}>
 								{t('Select_file')}
 								<input
 									className='AssetSettingInput__input'
 									type='file'
 									accept={`.${fileConstraints?.extensions?.join(', .')}`}
 									onChange={handleUpload}
+									disabled={disabled}
 								/>
-							</div>
+							</Box>
 						)}
 					</div>
 				</div>

diff --git a/apps/meteor/client/views/admin/settings/inputs/BooleanSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/BooleanSettingInput.tsx
@@ -1,12 +1,12 @@
 import { Box, Field, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage';
-import type { ReactElement, SyntheticEvent } from 'react';
+import type { ReactElement, ReactNode, SyntheticEvent } from 'react';
 import React from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 
 type BooleanSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	disabled?: boolean;
 	readonly?: boolean;
 	required?: boolean;

diff --git 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
@@ -1,5 +1,5 @@
 import { FieldLabel, FieldHint, FieldRow, Field } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
@@ -8,7 +8,7 @@ import CodeMirrorBox from './CodeMirror/CodeMirrorBox';
 
 type CodeSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	hint: string;
 	value?: string;
 	code: string;

diff --git a/apps/meteor/client/views/admin/settings/inputs/ColorSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/ColorSettingInput.tsx
@@ -1,14 +1,14 @@
 import { FieldLabel, FieldRow, FieldHint, Flex, InputBox, Margins, TextInput, Select, Field } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React, { useCallback } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 
 type ColorSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	value: string;
 	editor: string;
 	allowedTypes?: TranslationKey[];

diff --git a/apps/meteor/client/views/admin/settings/inputs/FontSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/FontSettingInput.tsx
@@ -1,12 +1,12 @@
 import { Field, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
-import type { FormEventHandler, ReactElement } from 'react';
+import type { FormEventHandler, ReactElement, ReactNode } from 'react';
 import React from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 
 type FontSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	value: string;
 	placeholder?: string;
 	readonly?: boolean;

diff --git a/apps/meteor/client/views/admin/settings/inputs/GenericSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/GenericSettingInput.tsx
@@ -1,12 +1,12 @@
 import { Field, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
-import type { FormEventHandler, ReactElement } from 'react';
+import type { FormEventHandler, ReactElement, ReactNode } from 'react';
 import React from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 
 type GenericSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	value: string;
 	placeholder?: string;
 	readonly?: boolean;

diff --git a/apps/meteor/client/views/admin/settings/inputs/IntSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/IntSettingInput.tsx
@@ -1,12 +1,12 @@
 import { Field, FieldLabel, FieldRow, InputBox } from '@rocket.chat/fuselage';
-import type { FormEventHandler, ReactElement } from 'react';
+import type { FormEventHandler, ReactElement, ReactNode } from 'react';
 import React from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 
 type IntSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	value: string;
 	placeholder?: string;
 	readonly?: boolean;

diff --git a/apps/meteor/client/views/admin/settings/inputs/LanguageSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/LanguageSettingInput.tsx
@@ -1,13 +1,13 @@
 import { Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
 import { useLanguages } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 
 type LanguageSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	value: string;
 	placeholder?: string;
 	readonly?: boolean;

diff --git a/apps/meteor/client/views/admin/settings/inputs/LookupSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/LookupSettingInput.tsx
@@ -1,6 +1,6 @@
 import { Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
 import type { PathPattern } from '@rocket.chat/rest-typings';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 
 import type { AsyncState } from '../../../../hooks/useAsyncState';
@@ -9,7 +9,7 @@ import ResetSettingButton from '../ResetSettingButton';
 
 type LookupSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	value?: string;
 	lookupEndpoint: PathPattern extends `/${infer U}` ? U : PathPattern;
 	placeholder?: string;

diff --git a/apps/meteor/client/views/admin/settings/inputs/MultiSelectSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/MultiSelectSettingInput.tsx
@@ -1,15 +1,15 @@
 import { FieldLabel, MultiSelectFiltered, MultiSelect, Field, FieldRow } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 
 export type valuesOption = { key: string; i18nLabel: TranslationKey };
 type MultiSelectSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	value?: [string, string];
 	values: valuesOption[];
 	placeholder?: string;

diff --git a/apps/meteor/client/views/admin/settings/inputs/PasswordSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/PasswordSettingInput.tsx
@@ -1,12 +1,12 @@
 import { Field, FieldLabel, FieldRow, PasswordInput } from '@rocket.chat/fuselage';
-import type { EventHandler, ReactElement, SyntheticEvent } from 'react';
+import type { EventHandler, ReactElement, ReactNode, SyntheticEvent } from 'react';
 import React from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 
 type PasswordSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	value?: string | number | readonly string[] | undefined;
 	placeholder?: string;
 	readonly?: boolean;

diff --git a/apps/meteor/client/views/admin/settings/inputs/RelativeUrlSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/RelativeUrlSettingInput.tsx
@@ -1,13 +1,13 @@
 import { Field, FieldLabel, FieldRow, UrlInput } from '@rocket.chat/fuselage';
 import { useAbsoluteUrl } from '@rocket.chat/ui-contexts';
-import type { EventHandler, ReactElement, SyntheticEvent } from 'react';
+import type { EventHandler, ReactElement, ReactNode, SyntheticEvent } from 'react';
 import React from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 
 type RelativeUrlSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	value?: string;
 	placeholder?: string;
 	readonly?: boolean;

diff --git a/apps/meteor/client/views/admin/settings/inputs/RoomPickSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/RoomPickSettingInput.tsx
@@ -1,14 +1,14 @@
 import type { SettingValueRoomPick } from '@rocket.chat/core-typings';
 import { Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 
 import RoomAutoCompleteMultiple from '../../../../components/RoomAutoCompleteMultiple';
 import ResetSettingButton from '../ResetSettingButton';
 
 type RoomPickSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	value?: SettingValueRoomPick | '';
 	placeholder?: string;
 	readonly?: boolean;

diff --git a/apps/meteor/client/views/admin/settings/inputs/SelectSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/SelectSettingInput.tsx
@@ -1,14 +1,14 @@
 import { Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 
 type SelectSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	value?: string;
 	values?: { key: string; i18nLabel: TranslationKey }[];
 	placeholder?: string;

diff --git a/apps/meteor/client/views/admin/settings/inputs/SelectTimezoneSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/SelectTimezoneSettingInput.tsx
@@ -1,13 +1,13 @@
 import { Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
 import moment from 'moment-timezone';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 
 type SelectTimezoneSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	value?: string;
 	placeholder?: string;
 	readonly?: boolean;

diff --git a/apps/meteor/client/views/admin/settings/inputs/StringSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/StringSettingInput.tsx
@@ -1,12 +1,12 @@
 import { Field, FieldLabel, FieldRow, TextAreaInput, TextInput } from '@rocket.chat/fuselage';
-import type { EventHandler, ReactElement, SyntheticEvent } from 'react';
+import type { EventHandler, ReactElement, ReactNode, SyntheticEvent } from 'react';
 import React from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 
 type StringSettingInputProps = {
 	_id: string;
-	label: string;
+	label: ReactNode;
 	name?: string;
 	value?: string;
 	multiline?: boolean;