feat: Adds new admin feature preview setting management (#33212)

Co-authored-by: Guilherme Gazzo <[email protected]>

.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,28 @@
+import type { FeaturePreviewProps } from '@rocket.chat/ui-client';
+import { useMemo } from 'react';
+
+const handleFeaturePreviewEnableQuery = (item: FeaturePreviewProps, _: any, features: FeaturePreviewProps[]) => {
+	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 groupFeaturePreview = (features: FeaturePreviewProps[]) =>
+	Object.entries(
+		features.reduce((result, currentValue) => {
+			(result[currentValue.group] = result[currentValue.group] || []).push(currentValue);
+			return result;
+		}, {} as Record<FeaturePreviewProps['group'], FeaturePreviewProps[]>),
+	);
+
+export const useFeaturePreviewEnableQuery = (features: FeaturePreviewProps[]) => {
+	return useMemo(() => groupFeaturePreview(features.map(handleFeaturePreviewEnableQuery)), [features]);
+};

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

@@ -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',