Chore: Convert AppSetting to tsx (#26625)

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

+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 } from 'react';
+import React, { useMemo, useCallback, ReactElement } from 'react';
 
 import MarkdownText from '../../../components/MarkdownText';
 import MemoizedSetting from '../settings/MemoizedSetting';
 
-const useAppTranslation = (appId) => {
+type AppTranslationFunction = {
+	(key: string, ...replaces: unknown[]): string;
+	has: (key: string | undefined) => boolean;
+};
+const useAppTranslation = (appId: string): AppTranslationFunction => {
 	const t = useTranslation();
 
 	const tApp = useCallback(
-		(key, ...args) => {
+		(key: string, ...args: unknown[]) => {
 			if (!key) {
 				return '';
 			}
-
 			const appKey = `project:apps-${appId}-${key}`;
-			return t(t.has(appKey) ? appKey : key, ...args);
-		},
-		[t, appId],
-	);
 
-	tApp.has = useCallback(
-		(key) => {
-			if (!key) {
-				return false;
+			if (t.has(appKey)) {
+				return t(appKey, ...args);
 			}
-
-			return t.has(`project:apps-${appId}-${key}`) || t.has(key);
+			if (t.has(key)) {
+				return t(key, ...args);
+			}
+			return key;
 		},
 		[t, appId],
 	);
 
-	return tApp;
+	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],
+		),
+	});
 };
 
-function AppSetting({ appSetting, onChange, value, ...props }) {
+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 tApp = useAppTranslation(appId || '');
 
 	const { id, type, i18nLabel, i18nDescription, values, required } = appSetting;
 
@@ -66,7 +90,7 @@ function AppSetting({ appSetting, onChange, value, ...props }) {
 			value={value}
 			onChangeValue={onChange}
 			_id={id}
-			values={translatedValues}
+			{...{ translatedValues }}
 			{...props}
 		/>
 	);

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

+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

 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;