feat: Introduced section-based accordion groups to the App Settings interface (#34121)

.changeset/real-crabs-grin.md

+---
+'@rocket.chat/meteor': minor
+---
+
+Organizes App Settings interface by introducing section-based accordion groups to improve navigation and readability for administrators.

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSettings/AppSetting.tsx

 import type { ISettingSelectValue } from '@rocket.chat/apps-engine/definition/settings';
 import type { ISetting } from '@rocket.chat/apps-engine/definition/settings/ISetting';
-import { useRouteParameter, useTranslation } from '@rocket.chat/ui-contexts';
+import { useRouteParameter } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
-import { Utilities } from '../../../../../../ee/lib/misc/Utilities';
 import MarkdownText from '../../../../../components/MarkdownText';
 import MemoizedSetting from '../../../../admin/settings/Setting/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 = Utilities.getI18nKeyForApp(key, appId);
-
-			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(Utilities.getI18nKeyForApp(key, appId)) || t.has(key);
-			},
-			[t, appId],
-		),
-	});
-};
+import { useAppTranslation } from '../../../hooks/useAppTranslation';
 
 const AppSetting = ({ id, type, i18nLabel, i18nDescription, values, value, packageValue, ...props }: ISetting): ReactElement => {
 	const appId = useRouteParameter('id');

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSettings/AppSettings.tsx

-import { Box, FieldGroup } from '@rocket.chat/fuselage';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
+import { Box, FieldGroup, Accordion, AccordionItem } from '@rocket.chat/fuselage';
+import { useRouteParameter } from '@rocket.chat/ui-contexts';
+import React, { useMemo } from 'react';
 
 import AppSetting from './AppSetting';
 import type { ISettings } from '../../../../../apps/@types/IOrchestrator';
+import { useAppTranslation } from '../../../hooks/useAppTranslation';
 
 const AppSettings = ({ settings }: { settings: ISettings }) => {
-	const { t } = useTranslation();
+	const appId = useRouteParameter('id');
+	const tApp = useAppTranslation(appId || '');
+
+	const groupedSettings = useMemo(() => {
+		const groups = Object.values(settings).reduce(
+			(acc, setting) => {
+				const section = setting.section || 'general';
+				if (!acc[section]) {
+					acc[section] = [];
+				}
+				acc[section].push(setting);
+				return acc;
+			},
+			{} as Record<string, (typeof settings)[keyof typeof settings][]>,
+		);
+
+		return Object.entries(groups);
+	}, [settings]);
 
 	return (
-		<>
-			<Box display='flex' flexDirection='column' maxWidth='x640' w='full' marginInline='auto'>
-				<Box fontScale='h4' mb={12}>
-					{t('Settings')}
-				</Box>
-				<FieldGroup>
-					{Object.values(settings).map((field) => (
-						<AppSetting key={field.id} {...field} />
-					))}
-				</FieldGroup>
-			</Box>
-		</>
+		<Box display='flex' flexDirection='column' maxWidth='x640' w='full' marginInline='auto'>
+			<Accordion>
+				{groupedSettings.map(([section, sectionSettings], index) => (
+					<AccordionItem key={section} title={tApp(section)} defaultExpanded={index === 0}>
+						<FieldGroup>
+							{sectionSettings.map((field) => (
+								<AppSetting key={field.id} {...field} />
+							))}
+						</FieldGroup>
+					</AccordionItem>
+				))}
+			</Accordion>
+		</Box>
 	);
 };
 

apps/meteor/client/views/marketplace/hooks/useAppTranslation.ts

+import { useTranslation } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+
+import { Utilities } from '../../../../ee/lib/misc/Utilities';
+
+type AppTranslationFunction = {
+	(key: string, ...replaces: unknown[]): string;
+	has: (key: string | undefined) => boolean;
+};
+
+export const useAppTranslation = (appId: string): AppTranslationFunction => {
+	const t = useTranslation();
+
+	const tApp = useCallback(
+		(key: string, ...args: unknown[]) => {
+			if (!key) {
+				return '';
+			}
+			const appKey = Utilities.getI18nKeyForApp(key, appId);
+
+			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(Utilities.getI18nKeyForApp(key, appId)) || t.has(key);
+			},
+			[t, appId],
+		),
+	});
+};