snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.spec.tsx

@@ -0,0 +1,72 @@
+import type { ISetting } from '@rocket.chat/core-typings';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { PropsWithChildren } from 'react';
+
+import SettingsGroupPage from './SettingsGroupPage';
+import EditableSettingsProvider from '../EditableSettingsProvider';
+import SettingsSection from '../SettingsSection';
+
+const mockSettingsDispatch = jest.fn();
+
+jest.mock('@rocket.chat/ui-contexts', () => ({
+	...jest.requireActual('@rocket.chat/ui-contexts'),
+	useSettingsDispatch: () => mockSettingsDispatch,
+}));
+
+jest.mock('@rocket.chat/ui-client', () => ({
+	...jest.requireActual('@rocket.chat/ui-client'),
+	PageFooter: ({ children }: PropsWithChildren) => <footer>{children}</footer>,
+}));
+
+jest.mock('../hooks/useHasSettingModule', () => ({
+	useHasSettingModule: () => false,
+}));
+
+const settingStructure = {
+	packageValue: 2,
+	blocked: false,
+	public: true,
+	type: 'int',
+	group: 'Test_Group',
+	section: '',
+	sorter: 0,
+	i18nLabel: 'Test_Integer',
+} as Partial<ISetting>;
+
+describe('SettingsGroupPage', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should show an error toast when saving a cleared integer setting fails', async () => {
+		const error = new Error('Invalid integer value');
+		const mockDispatchToastMessage = jest.fn();
+		mockSettingsDispatch.mockRejectedValue(error);
+
+		render(
+			<SettingsGroupPage _id='Test_Group' i18nLabel='Test_Group'>
+				<SettingsSection groupId='Test_Group' sectionName='' solo />
+			</SettingsGroupPage>,
+			{
+				wrapper: mockAppRoot()
+					.wrap((children) => <EditableSettingsProvider>{children}</EditableSettingsProvider>)
+					.withSetting('Test_Integer', 2, settingStructure)
+					.withToastMessageDispatch(mockDispatchToastMessage)
+					.build(),
+			},
+		);
+
+		await userEvent.clear(screen.getByRole('spinbutton'));
+
+		const saveButton = screen.getByRole('button', { name: 'Save_changes' });
+		await waitFor(() => expect(saveButton).toBeEnabled());
+		await userEvent.click(saveButton);
+
+		await waitFor(() => {
+			expect(mockSettingsDispatch).toHaveBeenCalledWith([{ _id: 'Test_Integer', value: NaN }], expect.any(Function));
+			expect(mockDispatchToastMessage).toHaveBeenCalledWith({ type: 'error', message: error });
+		});
+	});
+});

apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.stories.tsx

@@ -0,0 +1,23 @@
+import type { StoryObj, Meta, StoryFn } from '@storybook/react';
+
+import SettingsGroupPage from './SettingsGroupPage';
+import SettingsGroupPageSkeleton from './SettingsGroupPageSkeleton';
+
+export default {
+	component: SettingsGroupPage,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { hideNoControlsWarning: true },
+	},
+} satisfies Meta<typeof SettingsGroupPage>;
+
+export const Default: StoryObj<typeof SettingsGroupPage> = {};
+
+export const WithGroup: StoryObj<typeof SettingsGroupPage> = {
+	args: {
+		_id: 'General',
+		i18nLabel: 'General',
+	},
+};
+
+export const Skeleton: StoryFn<typeof SettingsGroupPageSkeleton> = () => <SettingsGroupPageSkeleton />;

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

@@ -0,0 +1,177 @@
+import type { ISetting, ISettingColor } from '@rocket.chat/core-typings';
+import { Accordion, Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '@rocket.chat/ui-client';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useToastMessageDispatch, useSettingsDispatch, useSettings } from '@rocket.chat/ui-contexts';
+import type { ReactNode, MouseEvent, SubmitEvent } from 'react';
+import { useMemo, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { EditableSetting } from '../../EditableSettingsContext';
+import { useEditableSettingsDispatch, useEditableSettings } from '../../EditableSettingsContext';
+
+export type SettingsGroupPageProps = {
+	children: ReactNode;
+	headerButtons?: ReactNode;
+	onClickBack?: () => void;
+	_id: string;
+	i18nLabel: string;
+	i18nDescription?: string;
+	tabs?: ReactNode;
+	isCustom?: boolean;
+};
+
+const SettingsGroupPage = ({
+	children = undefined,
+	headerButtons = undefined,
+	onClickBack,
+	_id,
+	i18nLabel,
+	i18nDescription = undefined,
+	tabs = undefined,
+	isCustom = false,
+}: SettingsGroupPageProps) => {
+	const { t, i18n } = useTranslation();
+	const dispatch = useSettingsDispatch();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const changedEditableSettings = useEditableSettings(
+		useMemo(
+			() => ({
+				group: _id,
+				changed: true,
+			}),
+			[_id],
+		),
+	);
+
+	const hasInvalidSetting = changedEditableSettings.some((setting) => setting.invalid);
+	const isSaveDisabled = changedEditableSettings.length === 0 || hasInvalidSetting;
+
+	const originalSettings = useSettings(
+		useMemo(
+			() => ({
+				_id: changedEditableSettings.map(({ _id }) => _id),
+			}),
+			[changedEditableSettings],
+		),
+	);
+
+	const isColorSetting = (setting: ISetting): setting is ISettingColor => setting.type === 'color';
+
+	const save = useStableCallback(async () => {
+		const changes = changedEditableSettings.map((setting) => {
+			if (isColorSetting(setting)) {
+				return {
+					_id: setting._id,
+					value: setting.value,
+					editor: setting.editor,
+				};
+			}
+
+			return {
+				_id: setting._id,
+				value: setting.value,
+			};
+		});
+
+		if (isSaveDisabled) {
+			return;
+		}
+
+		try {
+			await dispatch(changes, () => dispatchToastMessage({ type: 'success', message: t('Settings_updated') }));
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	});
+
+	const dispatchToEditing = useEditableSettingsDispatch();
+
+	const cancel = useStableCallback(() => {
+		const settingsToDispatch = changedEditableSettings
+			.map(({ _id }) => originalSettings.find((setting) => setting._id === _id))
+			.map((setting) => {
+				if (!setting) {
+					return;
+				}
+
+				if (isColorSetting(setting)) {
+					return {
+						_id: setting._id,
+						value: setting.value,
+						editor: setting.editor,
+						changed: false,
+					};
+				}
+
+				return {
+					_id: setting._id,
+					value: setting.value,
+					changed: false,
+				};
+			})
+			.filter(Boolean);
+		dispatchToEditing(settingsToDispatch as Partial<EditableSetting>[]);
+	});
+
+	const handleSubmit = (event: SubmitEvent<HTMLFormElement>): void => {
+		event.preventDefault();
+		save();
+	};
+
+	const handleCancelClick = (event: MouseEvent<HTMLOrSVGElement>): void => {
+		event.preventDefault();
+		cancel();
+	};
+
+	const handleSaveClick = (event: MouseEvent<HTMLOrSVGElement>): void => {
+		event.preventDefault();
+		save();
+	};
+
+	if (!_id) {
+		return <Page>{children}</Page>;
+	}
+
+	const isTranslationKey = (key: string): key is TranslationKey => (key as TranslationKey) !== undefined;
+
+	return (
+		<Page is='form' action='#' method='post' onSubmit={handleSubmit}>
+			<PageHeader onClickBack={onClickBack} title={i18nLabel && isTranslationKey(i18nLabel) && t(i18nLabel)}>
+				<ButtonGroup>{headerButtons}</ButtonGroup>
+			</PageHeader>
+			{tabs}
+			{isCustom ? (
+				children
+			) : (
+				<PageScrollableContentWithShadow>
+					<Box marginBlock='none' marginInline='auto' width='full' maxWidth='x580'>
+						{i18nDescription && isTranslationKey(i18nDescription) && i18n.exists(i18nDescription) && (
+							<Box is='p' color='hint' fontScale='p2'>
+								{t(i18nDescription)}
+							</Box>
+						)}
+
+						<Accordion>{children}</Accordion>
+					</Box>
+				</PageScrollableContentWithShadow>
+			)}
+			<PageFooter isDirty={!(changedEditableSettings.length === 0)}>
+				<ButtonGroup>
+					{changedEditableSettings.length > 0 && (
+						<Button type='reset' onClick={handleCancelClick}>
+							{t('Cancel')}
+						</Button>
+					)}
+					<Button className='save' disabled={isSaveDisabled} primary type='submit' onClick={handleSaveClick}>
+						{t('Save_changes')}
+					</Button>
+				</ButtonGroup>
+			</PageFooter>
+		</Page>
+	);
+};
+
+export default memo(SettingsGroupPage);

apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPageSkeleton.tsx

@@ -0,0 +1,25 @@
+import { Accordion, Box, Skeleton } from '@rocket.chat/fuselage';
+import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useMemo } from 'react';
+
+import SettingsSectionSkeleton from '../SettingsSection/SettingsSectionSkeleton';
+
+const SettingsGroupPageSkeleton = () => (
+	<Page>
+		<PageHeader title={<Skeleton style={{ width: '20rem' }} />} />
+		<PageContent>
+			<Box style={useMemo(() => ({ margin: '0 auto', width: '100%', maxWidth: '590px' }), [])}>
+				<Box is='p' color='hint' fontScale='p2'>
+					<Skeleton />
+					<Skeleton />
+					<Skeleton width='75%' />
+				</Box>
+				<Accordion>
+					<SettingsSectionSkeleton />
+				</Accordion>
+			</Box>
+		</PageContent>
+	</Page>
+);
+
+export default SettingsGroupPageSkeleton;

apps/meteor/client/views/admin/settings/SettingsGroupPage/index.ts

@@ -0,0 +1 @@
+export { default } from './SettingsGroupPage';