Merge branch 'release-6.13.0' into fix/gdpr-connection-data-misbehaving

.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/CHANGELOG.md

@@ -101,6 +101,47 @@
   - @rocket.chat/[email protected]
   </details>
 
+## 6.12.1
+
+### Patch Changes
+
+- Bump @rocket.chat/meteor version.
+
+- Bump @rocket.chat/meteor version.
+
+- ([#33242](https://github.com/RocketChat/Rocket.Chat/pull/33242) by [@dionisio-bot](https://github.com/dionisio-bot)) Allow to use the token from `room.v` when requesting transcript instead of visitor token. Visitors may change their tokens at any time, rendering old conversations impossible to access for them (or for APIs depending on token) as the visitor token won't match the `room.v` token.
+
+- ([#33268](https://github.com/RocketChat/Rocket.Chat/pull/33268) by [@dionisio-bot](https://github.com/dionisio-bot)) Security Hotfix (https://docs.rocket.chat/docs/security-fixes-and-updates)
+
+- ([#33265](https://github.com/RocketChat/Rocket.Chat/pull/33265) by [@dionisio-bot](https://github.com/dionisio-bot)) fixed retention policy max age settings not being respected after upgrade
+
+- <details><summary>Updated dependencies [3cbb9f6252]:</summary>
+
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  - @rocket.chat/[email protected]
+  </details>
+
 ## 6.12.0
 
 ### Minor Changes

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);