RocketChat · kodiakhq · Mar 22, 2024 · Feb 22, 2024 · Mar 20, 2024 · Mar 21, 2024
diff --git a/.changeset/thirty-berries-learn.md 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.
@@ -55,7 +55,7 @@ type MemoizedSettingProps = {
 	onResetButtonClick?: () => void;
 	className?: string;
 	invisible?: boolean;
-	label?: string;
+	label?: ReactNode;
 	sectionChanged?: boolean;
 	hasResetButton?: boolean;
 	disabled?: boolean;

@@ -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='featured'>{t('Premium')}</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}

@@ -1,21 +1,18 @@
-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 React from 'react';
 
 import './AssetSettingInput.styles.css';
+import type { SettingInputProps } from './types';
 
-type AssetSettingInputProps = {
-	_id: string;
-	label: string;
-	value?: { url: string };
+type AssetSettingInputProps = Omit<SettingInputProps<{ url: string }>, '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
 					)}
 					<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>

@@ -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<boolean>;
 
-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,

@@ -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);
 

@@ -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({

@@ -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,

@@ -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,

@@ -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,

@@ -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<string, string | number> & {
 	value: string;
-	placeholder?: string;
-	readonly?: boolean;
-	autocomplete?: boolean;
-	disabled?: boolean;
-	required?: boolean;
-	hasResetButton?: boolean;
-	onChangeValue?: (value: string | number) => void;
-	onResetButtonClick?: () => void;
 };
 
 function IntSettingInput({

@@ -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<string, string | number>;
 
 function LanguageSettingInput({
 	_id,

@@ -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({

@@ -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({

@@ -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<string | number | readonly string[] | undefined>;
 
 function PasswordSettingInput({
 	_id,

@@ -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,