[FIX] Color setting editing issues (#16706)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

app/settings/server/functions/settings.js

@@ -64,10 +64,7 @@ const overrideSetting = (_id, value, options) => {
 * @param {Object} setting
 */
 
-settings.add = function(_id, value, options = {}) {
-	if (options == null) {
-		options = {};
-	}
+settings.add = function(_id, value, { editor, ...options } = {}) {
 	if (!_id || value == null) {
 		return false;
 	}
@@ -112,9 +109,9 @@ settings.add = function(_id, value, options = {}) {
 			createdAt: new Date(),
 		},
 	};
-	if (options.editor != null) {
-		updateOperations.$setOnInsert.editor = options.editor;
-		delete options.editor;
+	if (editor != null) {
+		updateOperations.$setOnInsert.editor = editor;
+		updateOperations.$setOnInsert.packageEditor = editor;
 	}
 	if (options.value == null) {
 		if (options.force === true) {

app/theme/server/server.js

@@ -106,6 +106,7 @@ export const theme = new class {
 		this.variables[name] = {
 			type,
 			value,
+			editor,
 		};
 		if (persist) {
 			const config = {

client/components/admin/settings/Setting.js

@@ -67,11 +67,13 @@ export function Setting({ settingId, sectionChanged }) {
 	const {
 		value: contextValue,
 		editor: contextEditor,
+		packageEditor,
 		update,
 		reset,
 		...setting
 	} = useSetting(settingId);
 
+
 	const t = useTranslation();
 
 	const [value, setValue] = useState(contextValue);
@@ -116,7 +118,7 @@ export function Setting({ settingId, sectionChanged }) {
 	const label = (i18nLabel && t(i18nLabel)) || (_id || t(_id));
 	const hint = useMemo(() => t.has(i18nDescription) && <MarkdownText>{t(i18nDescription)}</MarkdownText>, [i18nDescription]);
 	const callout = useMemo(() => alert && <RawText>{t(alert)}</RawText>, [alert]);
-	const hasResetButton = !disableReset && !readonly && type !== 'asset' && JSON.stringify(value) !== JSON.stringify(packageValue) && !disabled;
+	const hasResetButton = !disableReset && !readonly && type !== 'asset' && (JSON.stringify(packageEditor) !== JSON.stringify(editor) || JSON.stringify(value) !== JSON.stringify(packageValue)) && !disabled;
 
 	return <MemoizedSetting
 		type={type}

client/components/admin/settings/SettingsState.js

@@ -325,12 +325,12 @@ export const useSection = (groupId, sectionName) => {
 		const persistedSettings = filterSettings(state.persistedSettings);
 
 		const changes = settings.map((setting) => {
-			const { _id, value, packageValue, editor } = persistedSettings.find(({ _id }) => _id === setting._id);
+			const { _id, value, packageValue, packageEditor } = persistedSettings.find(({ _id }) => _id === setting._id);
 			return {
 				_id,
 				value: packageValue,
-				editor,
-				changed: packageValue !== value,
+				editor: packageEditor,
+				changed: JSON.stringify(packageValue) !== JSON.stringify(value),
 			};
 		});
 
@@ -348,29 +348,29 @@ export const useSection = (groupId, sectionName) => {
 export const useSettingActions = (persistedSetting) => {
 	const { hydrate } = useContext(SettingsContext);
 
-	const update = useDebouncedCallback(({ value = persistedSetting.value, editor = persistedSetting.editor }) => {
+	const update = useDebouncedCallback(({ value, editor }) => {
 		const changes = [{
 			_id: persistedSetting._id,
-			value,
-			editor,
-			changed: (value !== persistedSetting.value) || (editor !== persistedSetting.editor),
+			...value !== undefined && { value },
+			...editor !== undefined && { editor },
+			changed: JSON.stringify(persistedSetting.value) !== JSON.stringify(value) || JSON.stringify(editor) !== JSON.stringify(persistedSetting.editor),
 		}];
 
 		hydrate(changes);
-	}, 70, [hydrate, persistedSetting]);
+	}, 100, [hydrate, persistedSetting]);
 
 	const reset = useDebouncedCallback(() => {
-		const { _id, value, packageValue, editor } = persistedSetting;
+		const { _id, value, packageValue, packageEditor, editor } = persistedSetting;
 
 		const changes = [{
 			_id,
 			value: packageValue,
-			editor,
-			changed: JSON.stringify(packageValue) !== JSON.stringify(value),
+			editor: packageEditor,
+			changed: JSON.stringify(packageValue) !== JSON.stringify(value) || JSON.stringify(packageEditor) !== JSON.stringify(editor),
 		}];
 
 		hydrate(changes);
-	}, 70, [hydrate, persistedSetting]);
+	}, 100, [hydrate, persistedSetting]);
 
 	return { update, reset };
 };

client/components/admin/settings/inputs/ColorSettingInput.js

@@ -4,10 +4,10 @@ import {
 	Flex,
 	InputBox,
 	Margins,
-	SelectInput,
 	TextInput,
+	Select,
 } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { useTranslation } from '../../../../contexts/TranslationContext';
 import { ResetSettingButton } from '../ResetSettingButton';
@@ -17,7 +17,7 @@ export function ColorSettingInput({
 	label,
 	value,
 	editor,
-	allowedTypes,
+	allowedTypes = [],
 	placeholder,
 	readonly,
 	autocomplete,
@@ -29,14 +29,13 @@ export function ColorSettingInput({
 }) {
 	const t = useTranslation();
 
-	const handleChange = (event) => {
+	const handleChange = useCallback((event) => {
 		onChangeValue && onChangeValue(event.currentTarget.value);
-	};
+	}, []);
 
-	const handleEditorTypeChange = (event) => {
-		const editor = event.currentTarget.value.trim();
-		onChangeEditor && onChangeEditor(editor);
-	};
+	const handleEditorTypeChange = useCallback((value) => {
+		onChangeEditor && onChangeEditor(value);
+	}, []);
 
 	return <>
 		<Flex.Container>
@@ -71,7 +70,7 @@ export function ColorSettingInput({
 							onChange={handleChange}
 						/>}
 					</Flex.Item>
-					<SelectInput
+					<Select
 						data-qa-setting-id={`${ _id }_editor`}
 						type='color'
 						id={`${ _id }_editor`}
@@ -80,11 +79,11 @@ export function ColorSettingInput({
 						readOnly={readonly}
 						autoComplete={autocomplete === false ? 'off' : undefined}
 						onChange={handleEditorTypeChange}
-					>
-						{allowedTypes && allowedTypes.map((allowedType) =>
-							<SelectInput.Option key={allowedType} value={allowedType}>{t(allowedType)}</SelectInput.Option>,
-						)}
-					</SelectInput>
+						options={allowedTypes.map((type) => [
+							type,
+							t(type),
+						])}
+					/>
 				</Margins>
 			</Field.Row>
 		</Margins>

private/server/dynamic-css.js

@@ -138,6 +138,8 @@
 
 	var DynamicCss = {};
 
+	window.DynamicCss = DynamicCss;
+
 	DynamicCss.test = function () {
 		return window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)');
 	};

server/startup/migrations/index.js

@@ -172,4 +172,5 @@ import './v171';
 import './v172';
 import './v173';
 import './v174';
+import './v175';
 import './xrun';

server/startup/migrations/v175.js

@@ -0,0 +1,18 @@
+import { Migrations } from '../../../app/migrations/server';
+import { theme } from '../../../app/theme/server/server';
+import { Settings } from '../../../app/models';
+
+Migrations.add({
+	version: 175,
+	up() {
+		Object.entries(theme.variables)
+			.filter(([, value]) => value.type === 'color')
+			.forEach(([key, { editor }]) => {
+				Settings.update({ _id: `theme-color-${ key }` }, {
+					$set: {
+						packageEditor: editor,
+					},
+				});
+			});
+	},
+});