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

apps/meteor/client/views/admin/featurePreview/AdminFeaturePreviewPage.tsx

@@ -0,0 +1,127 @@
+import {
+	ButtonGroup,
+	Button,
+	Box,
+	ToggleSwitch,
+	Accordion,
+	AccordionItem,
+	Field,
+	FieldGroup,
+	FieldLabel,
+	FieldRow,
+	FieldHint,
+	Callout,
+	Margins,
+} from '@rocket.chat/fuselage';
+import { useDefaultSettingFeaturePreviewList, Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '@rocket.chat/ui-client';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useToastMessageDispatch, useTranslation, useSettingsDispatch } from '@rocket.chat/ui-contexts';
+import type { ChangeEvent } from 'react';
+import { Fragment } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { useFeaturePreviewEnableQuery } from '../../../hooks/useFeaturePreviewEnableQuery';
+import { useEditableSetting } from '../EditableSettingsContext';
+import Setting from '../settings/Setting';
+import SettingsGroupPageSkeleton from '../settings/SettingsGroupPage/SettingsGroupPageSkeleton';
+
+const AdminFeaturePreviewPage = () => {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const allowFeaturePreviewSetting = useEditableSetting('Accounts_AllowFeaturePreview');
+	const { features } = useDefaultSettingFeaturePreviewList();
+
+	const {
+		watch,
+		formState: { isDirty },
+		setValue,
+		handleSubmit,
+		reset,
+	} = useForm({
+		defaultValues: { featuresPreview: features },
+	});
+	const { featuresPreview } = watch();
+	const dispatch = useSettingsDispatch();
+
+	const handleSave = async () => {
+		try {
+			const featuresToBeSaved = featuresPreview.map((feature) => ({ name: feature.name, value: feature.value }));
+
+			await dispatch([
+				{ _id: allowFeaturePreviewSetting!._id, value: allowFeaturePreviewSetting!.value },
+				{ _id: 'Accounts_Default_User_Preferences_featuresPreview', value: JSON.stringify(featuresToBeSaved) },
+			]);
+			dispatchToastMessage({ type: 'success', message: t('Preferences_saved') });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		} finally {
+			reset({ featuresPreview });
+		}
+	};
+
+	const handleFeatures = (e: ChangeEvent<HTMLInputElement>) => {
+		const updated = featuresPreview.map((item) => (item.name === e.target.name ? { ...item, value: e.target.checked } : item));
+		setValue('featuresPreview', updated, { shouldDirty: true });
+	};
+
+	const grouppedFeaturesPreview = useFeaturePreviewEnableQuery(featuresPreview);
+
+	if (!allowFeaturePreviewSetting) {
+		// TODO: Implement FeaturePreviewSkeleton component
+		return <SettingsGroupPageSkeleton />;
+	}
+
+	return (
+		<Page>
+			<PageHeader title={t('Feature_preview')} />
+			<PageScrollableContentWithShadow>
+				<Box maxWidth='x600' width='full' alignSelf='center'>
+					<Box>
+						<Margins block={24}>
+							<Box fontScale='p1'>{t('Feature_preview_admin_page_description')}</Box>
+							<Callout>{t('Feature_preview_page_callout')}</Callout>
+							<Callout>{t('Feature_preview_admin_page_callout')}</Callout>
+							<Setting settingId='Accounts_AllowFeaturePreview' sectionChanged={allowFeaturePreviewSetting.changed} />
+						</Margins>
+					</Box>
+					<Accordion>
+						{grouppedFeaturesPreview?.map(([group, features], index) => (
+							<AccordionItem defaultExpanded={index === 0} key={group} title={t(group as TranslationKey)}>
+								<FieldGroup>
+									{features.map((feature) => (
+										<Fragment key={feature.name}>
+											<Field>
+												<FieldRow>
+													<FieldLabel htmlFor={feature.name}>{t(feature.i18n)}</FieldLabel>
+													<ToggleSwitch
+														id={feature.name}
+														checked={feature.value}
+														name={feature.name}
+														onChange={handleFeatures}
+														disabled={feature.disabled || !allowFeaturePreviewSetting.value}
+													/>
+												</FieldRow>
+												{feature.description && <FieldHint marginBlockStart={12}>{t(feature.description)}</FieldHint>}
+											</Field>
+											{feature.imageUrl && <Box is='img' width='100%' height='auto' marginBlockStart={16} src={feature.imageUrl} alt='' />}
+										</Fragment>
+									))}
+								</FieldGroup>
+							</AccordionItem>
+						))}
+					</Accordion>
+				</Box>
+			</PageScrollableContentWithShadow>
+			<PageFooter isDirty={isDirty || allowFeaturePreviewSetting.changed}>
+				<ButtonGroup>
+					<Button onClick={() => reset({ featuresPreview: features })}>{t('Cancel')}</Button>
+					<Button primary disabled={!(isDirty || allowFeaturePreviewSetting.changed)} onClick={handleSubmit(handleSave)}>
+						{t('Save_changes')}
+					</Button>
+				</ButtonGroup>
+			</PageFooter>
+		</Page>
+	);
+};
+
+export default AdminFeaturePreviewPage;

apps/meteor/client/views/admin/featurePreview/AdminFeaturePreviewRoute.tsx

@@ -0,0 +1,25 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+
+import AdminFeaturePreviewPage from './AdminFeaturePreviewPage';
+import SettingsProvider from '../../../providers/SettingsProvider';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+import EditableSettingsProvider from '../settings/EditableSettingsProvider';
+
+const AdminFeaturePreviewRoute = () => {
+	const canViewFeaturesPreview = usePermission('manage-cloud');
+
+	if (!canViewFeaturesPreview) {
+		return <NotAuthorizedPage />;
+	}
+
+	return (
+		<SettingsProvider>
+			<EditableSettingsProvider>
+				<AdminFeaturePreviewPage />
+			</EditableSettingsProvider>
+		</SettingsProvider>
+	);
+};
+
+export default memo(AdminFeaturePreviewRoute);