Chore: Convert AppSetting to tsx

apps/meteor/client/views/admin/apps/AppSetting.tsx

@@ -0,0 +1,99 @@
+import { ISettingSelectValue } from '@rocket.chat/apps-engine/definition/settings';
+import { ISettingBase, SettingValue } from '@rocket.chat/core-typings';
+import { useRouteParameter, useTranslation } from '@rocket.chat/ui-contexts';
+import React, { useMemo, useCallback, ReactElement } from 'react';
+
+import MarkdownText from '../../../components/MarkdownText';
+import MemoizedSetting from '../settings/MemoizedSetting';
+
+type AppTranslationFunction = {
+	(key: string, ...replaces: unknown[]): string;
+	has: (key: string | undefined) => boolean;
+};
+const useAppTranslation = (appId: string): AppTranslationFunction => {
+	const t = useTranslation();
+
+	const tApp = useCallback(
+		(key: string, ...args: unknown[]) => {
+			if (!key) {
+				return '';
+			}
+			const appKey = `project:apps-${appId}-${key}`;
+
+			if (t.has(appKey)) {
+				return t(appKey, ...args);
+			}
+			if (t.has(key)) {
+				return t(key, ...args);
+			}
+			return key;
+		},
+		[t, appId],
+	);
+
+	return Object.assign(tApp, {
+		has: useCallback(
+			(key: string | undefined) => {
+				if (!key) {
+					return false;
+				}
+
+				return t.has(`project:apps-${appId}-${key}`) || t.has(key);
+			},
+			[t, appId],
+		),
+	});
+};
+
+type AppSettingProps = {
+	appSetting: {
+		id: string;
+		type: ISettingBase['type'];
+		i18nLabel: string;
+		i18nDescription?: string;
+		values?: ISettingSelectValue[];
+		required: boolean;
+	};
+	onChange: (value: SettingValue) => void;
+	value: SettingValue;
+};
+function AppSetting({ appSetting, onChange, value, ...props }: AppSettingProps): ReactElement {
+	const appId = useRouteParameter('id');
+	const tApp = useAppTranslation(appId || '');
+
+	const { id, type, i18nLabel, i18nDescription, values, required } = appSetting;
+
+	const label = (i18nLabel && tApp(i18nLabel)) + (required ? ' *' : '') || id || tApp(id);
+	const hint = useMemo(() => i18nDescription && <MarkdownText content={tApp(i18nDescription)} />, [i18nDescription, tApp]);
+
+	let translatedValues;
+	if (values?.length) {
+		translatedValues = values.map((selectFieldEntry) => {
+			const { key, i18nLabel } = selectFieldEntry;
+
+			if (!i18nLabel) {
+				return selectFieldEntry;
+			}
+
+			return {
+				key,
+				i18nLabel: tApp(i18nLabel),
+			};
+		});
+	}
+
+	return (
+		<MemoizedSetting
+			type={type}
+			label={label}
+			hint={hint}
+			value={value}
+			onChangeValue={onChange}
+			_id={id}
+			{...{ translatedValues }}
+			{...props}
+		/>
+	);
+}
+
+export default AppSetting;

apps/meteor/client/views/admin/apps/AppSettingsAssembler.tsx

@@ -1,3 +1,4 @@
+import { SettingValue } from '@rocket.chat/core-typings';
 import { Box } from '@rocket.chat/fuselage';
 import { capitalize } from '@rocket.chat/string-helpers';
 import React, { ReactElement } from 'react';
@@ -7,8 +8,8 @@ import AppSetting from './AppSetting';
 
 type AppSettingsAssemblerProps = {
 	settings: ISettings;
-	values: Record<string, unknown>;
-	handlers: Record<string, (eventOrValue: unknown) => void>;
+	values: Record<string, SettingValue>;
+	handlers: Record<string, (eventOrValue: SettingValue) => void>;
 };
 const AppSettingsAssembler = ({ settings, values, handlers }: AppSettingsAssemblerProps): ReactElement => (
 	<Box>

apps/meteor/client/views/admin/apps/SettingsDisplay.tsx

@@ -1,4 +1,5 @@
 import { ISetting } from '@rocket.chat/apps-engine/definition/settings';
+import { SettingValue } from '@rocket.chat/core-typings';
 import { Box } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC, useMemo, useEffect, MutableRefObject } from 'react';
@@ -23,7 +24,11 @@ const SettingsDisplay: FC<SettingsDisplayProps> = ({ settings, setHasUnsavedChan
 		return Object.values(settings).reduce((ret, { id, value, packageValue }) => ({ ...ret, [id]: value ?? packageValue }), {});
 	}, [stringifiedSettings]);
 
-	const { values, handlers, hasUnsavedChanges } = useForm(reducedSettings);
+	const { values, handlers, hasUnsavedChanges } = useForm(reducedSettings) as {
+		values: Record<string, SettingValue>;
+		handlers: Record<string, (eventOrValue: SettingValue) => void>;
+		hasUnsavedChanges: boolean;
+	};
 	const stringifiedValues = JSON.stringify(values);
 
 	useEffect(() => {

apps/meteor/client/views/admin/settings/MemoizedSetting.tsx

@@ -49,7 +49,7 @@ type MemoizedSettingProps = {
 	callout?: ReactNode;
 	value?: SettingValue;
 	editor?: SettingEditor;
-	onChangeValue?: (value: unknown) => void;
+	onChangeValue?: (value: SettingValue) => void;
 	onChangeEditor?: (value: unknown) => void;
 	onResetButtonClick?: () => void;
 	className?: string;