feat: Adds new admin feature preview setting management

.changeset/quick-rings-wave.md

@@ -0,0 +1,7 @@
+---
+"@rocket.chat/meteor": patch
+"@rocket.chat/i18n": patch
+"@rocket.chat/ui-client": patch
+---
+
+Added new Admin Feature Preview management view

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useAccountItems.tsx

@@ -1,15 +1,15 @@
 import { Badge } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
-import { defaultFeaturesPreview, useFeaturePreviewList } from '@rocket.chat/ui-client';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { defaultFeaturesPreview, usePreferenceFeaturePreviewList } from '@rocket.chat/ui-client';
 import { useRouter, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
 export const useAccountItems = (): GenericMenuItemProps[] => {
 	const t = useTranslation();
 	const router = useRouter();
 
-	const { unseenFeatures, featurePreviewEnabled } = useFeaturePreviewList();
+	const { unseenFeatures, featurePreviewEnabled } = usePreferenceFeaturePreviewList();
 
 	const handleMyAccount = useEffectEvent(() => {
 		router.navigate('/account');

apps/meteor/client/hooks/useFeaturePreviewEnableQuery.ts

@@ -0,0 +1,24 @@
+import type { FeaturePreviewProps } from '@rocket.chat/ui-client';
+
+export const useFeaturePreviewEnableQuery = (features: FeaturePreviewProps[]) => {
+	return Object.entries(
+		features
+			.map((item) => {
+				if (item.enableQuery) {
+					const expected = item.enableQuery.value;
+					const received = features.find((el) => el.name === item.enableQuery?.name)?.value;
+					if (expected !== received) {
+						item.disabled = true;
+						item.value = false;
+					} else {
+						item.disabled = false;
+					}
+				}
+				return item;
+			})
+			.reduce((result, currentValue) => {
+				(result[currentValue.group] = result[currentValue.group] || []).push(currentValue);
+				return result;
+			}, {} as Record<FeaturePreviewProps['group'], FeaturePreviewProps[]>),
+	);
+};

apps/meteor/client/sidebar/header/hooks/useAccountItems.tsx

@@ -1,15 +1,15 @@
 import { Badge } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { defaultFeaturesPreview, useFeaturePreviewList } from '@rocket.chat/ui-client';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { defaultFeaturesPreview, usePreferenceFeaturePreviewList } from '@rocket.chat/ui-client';
 import { useRouter, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
 export const useAccountItems = (): GenericMenuItemProps[] => {
 	const t = useTranslation();
 	const router = useRouter();
 
-	const { unseenFeatures, featurePreviewEnabled } = useFeaturePreviewList();
+	const { unseenFeatures, featurePreviewEnabled } = usePreferenceFeaturePreviewList();
 
 	const handleMyAccount = useMutableCallback(() => {
 		router.navigate('/account');

apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.tsx

@@ -1,4 +1,3 @@
-import { css } from '@rocket.chat/css-in-js';
 import {
 	ButtonGroup,
 	Button,
@@ -13,36 +12,23 @@ import {
 	FieldLabel,
 	FieldRow,
 	FieldHint,
+	Callout,
+	Margins,
 } from '@rocket.chat/fuselage';
-import type { FeaturePreviewProps } from '@rocket.chat/ui-client';
-import { useFeaturePreviewList } from '@rocket.chat/ui-client';
+import { usePreferenceFeaturePreviewList } from '@rocket.chat/ui-client';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useToastMessageDispatch, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
 import type { ChangeEvent } from 'react';
 import React, { useEffect, Fragment } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '../../../components/Page';
+import { useFeaturePreviewEnableQuery } from '../../../hooks/useFeaturePreviewEnableQuery';
 
-const handleEnableQuery = (features: FeaturePreviewProps[]) => {
-	return features.map((item) => {
-		if (item.enableQuery) {
-			const expected = item.enableQuery.value;
-			const received = features.find((el) => el.name === item.enableQuery?.name)?.value;
-			if (expected !== received) {
-				item.disabled = true;
-				item.value = false;
-			} else {
-				item.disabled = false;
-			}
-		}
-		return item;
-	});
-};
 const AccountFeaturePreviewPage = () => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
-	const { features, unseenFeatures } = useFeaturePreviewList();
+	const { features, unseenFeatures } = usePreferenceFeaturePreviewList();
 
 	const setUserPreferences = useEndpoint('POST', '/v1/users.setPreferences');
 
@@ -85,12 +71,7 @@ const AccountFeaturePreviewPage = () => {
 		setValue('featuresPreview', updated, { shouldDirty: true });
 	};
 
-	const grouppedFeaturesPreview = Object.entries(
-		handleEnableQuery(featuresPreview).reduce((result, currentValue) => {
-			(result[currentValue.group] = result[currentValue.group] || []).push(currentValue);
-			return result;
-		}, {} as Record<FeaturePreviewProps['group'], FeaturePreviewProps[]>),
-	);
+	const grouppedFeaturesPreview = useFeaturePreviewEnableQuery(featuresPreview);
 
 	return (
 		<Page>
@@ -105,14 +86,11 @@ const AccountFeaturePreviewPage = () => {
 					)}
 					{featuresPreview.length > 0 && (
 						<>
-							<Box
-								className={css`
-									white-space: break-spaces;
-								`}
-								pbe={24}
-								fontScale='p1'
-							>
-								{t('Feature_preview_page_description')}
+							<Box>
+								<Margins block={24}>
+									<Box fontScale='p1'>{t('Feature_preview_page_description')}</Box>
+									<Callout>{t('Feature_preview_page_callout')}</Callout>
+								</Margins>
 							</Box>
 							<Accordion>
 								{grouppedFeaturesPreview?.map(([group, features], index) => (

apps/meteor/client/views/account/sidebarItems.tsx

@@ -1,10 +1,9 @@
-import { defaultFeaturesPreview } from '@rocket.chat/ui-client';
+import { defaultFeaturesPreview, FeaturePreviewBadge } from '@rocket.chat/ui-client';
 import React from 'react';
 
 import { hasPermission, hasAtLeastOnePermission } from '../../../app/authorization/client';
 import { settings } from '../../../app/settings/client';
 import { createSidebarItems } from '../../lib/createSidebarItems';
-import AccountFeaturePreviewBadge from './featurePreview/AccountFeaturePreviewBadge';
 
 export const {
 	registerSidebarItem: registerAccountSidebarItem,
@@ -54,7 +53,7 @@ export const {
 		href: '/account/feature-preview',
 		i18nLabel: 'Feature_preview',
 		icon: 'flask',
-		badge: () => <AccountFeaturePreviewBadge />,
+		badge: () => <FeaturePreviewBadge />,
 		permissionGranted: () => settings.get('Accounts_AllowFeaturePreview') && defaultFeaturesPreview?.length > 0,
 	},
 	{

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

@@ -0,0 +1,130 @@
+import {
+	ButtonGroup,
+	Button,
+	Box,
+	ToggleSwitch,
+	Accordion,
+	Field,
+	FieldGroup,
+	FieldLabel,
+	FieldRow,
+	FieldHint,
+	Callout,
+	Margins,
+} from '@rocket.chat/fuselage';
+import { useDefaultSettingFeaturePreviewList } 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 React, { Fragment } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '../../../components/Page';
+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 {
+			if (!allowFeaturePreviewSetting) {
+				throw Error(`AdminFeaturePreviewPage-handleSave-SettingNotFound`);
+			}
+			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' w='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) => (
+							<Accordion.Item 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 mbs={12}>{t(feature.description)}</FieldHint>}
+											</Field>
+											{feature.imageUrl && <Box is='img' width='100%' height='auto' mbs={16} src={feature.imageUrl} alt='' />}
+										</Fragment>
+									))}
+								</FieldGroup>
+							</Accordion.Item>
+						))}
+					</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,26 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+import React, { memo } from 'react';
+
+import SettingsProvider from '../../../providers/SettingsProvider';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+import EditableSettingsProvider from '../settings/EditableSettingsProvider';
+import AdminFeaturePreviewPage from './AdminFeaturePreviewPage';
+
+const AdminFeaturePreviewRoute = (): ReactElement => {
+	const canViewFeaturesPreview = usePermission('manage-cloud');
+
+	if (!canViewFeaturesPreview) {
+		return <NotAuthorizedPage />;
+	}
+
+	return (
+		<SettingsProvider privileged>
+			<EditableSettingsProvider>
+				<AdminFeaturePreviewPage />
+			</EditableSettingsProvider>
+		</SettingsProvider>
+	);
+};
+
+export default memo(AdminFeaturePreviewRoute);

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

@@ -104,6 +104,10 @@ declare module '@rocket.chat/ui-contexts' {
 			pathname: `/admin/subscription`;
 			pattern: '/admin/subscription';
 		};
+		'admin-feature-preview': {
+			pathname: '/admin/feature-preview';
+			pattern: '/admin/feature-preview';
+		};
 	}
 }
 
@@ -237,3 +241,8 @@ registerAdminRoute('/subscription', {
 	name: 'subscription',
 	component: lazy(() => import('./subscription/SubscriptionRoute')),
 });
+
+registerAdminRoute('/feature-preview', {
+	name: 'admin-feature-preview',
+	component: lazy(() => import('./featurePreview/AdminFeaturePreviewRoute')),
+});

apps/meteor/client/views/admin/sidebarItems.ts → apps/meteor/client/views/admin/sidebarItems.tsx

@@ -1,3 +1,5 @@
+import { defaultFeaturesPreview } from '@rocket.chat/ui-client';
+
 import { hasPermission, hasAtLeastOnePermission, hasAllPermission } from '../../../app/authorization/client';
 import { createSidebarItems } from '../../lib/createSidebarItems';
 
@@ -129,6 +131,12 @@ export const {
 		icon: 'emoji',
 		permissionGranted: (): boolean => hasPermission('manage-emoji'),
 	},
+	{
+		href: '/admin/feature-preview',
+		i18nLabel: 'Feature_preview',
+		icon: 'flask',
+		permissionGranted: () => defaultFeaturesPreview?.length > 0,
+	},
 	{
 		href: '/admin/settings',
 		i18nLabel: 'Settings',