feat: Adds new admin feature preview setting management

.changeset/quick-rings-wave.md

@@ -0,0 +1,7 @@
+---
+"@rocket.chat/meteor": minor
+"@rocket.chat/i18n": minor
+"@rocket.chat/ui-client": minor
+---
+
+Added new Admin Feature Preview management view, this will allow the workspace admins to both enable feature previewing in the workspace as well as define which feature previews are enabled by default for the users in the workspace.

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,27 @@
+import type { FeaturePreviewProps } from '@rocket.chat/ui-client';
+
+export const useFeaturePreviewEnableQuery = (features: FeaturePreviewProps[]) => {
+	return Object.entries(
+		features
+			.map((item) => {
+				if (!item.enableQuery) {
+					return item;
+				}
+
+				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,127 @@
+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 {
+			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',