regression: Room breaking if advanced cron timer is invalid

apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.spec.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+
+import { createRenteionPolicySettingsMock as createMock } from '../../../tests/mocks/client/mockRetentionPolicySettings';
+import { createFakeRoom } from '../../../tests/mocks/data';
+import { setDate } from '../../../tests/mocks/mockDate';
+import RetentionPolicyCallout from './RetentionPolicyCallout';
+
+jest.useFakeTimers();
+
+describe('RetentionPolicyCallout', () => {
+	it('Should render callout if settings are valid', () => {
+		setDate();
+		const fakeRoom = createFakeRoom({ t: 'c' });
+		render(<RetentionPolicyCallout room={fakeRoom} />, { wrapper: createMock({ appliesToChannels: true, TTLChannels: 60000 }) });
+		expect(screen.getByRole('alert')).toHaveTextContent('a minute June 1, 2024, 12:30 AM');
+	});
+
+	it('Should not render callout if settings are invalid', () => {
+		setDate();
+		const fakeRoom = createFakeRoom({ t: 'c' });
+		render(<RetentionPolicyCallout room={fakeRoom} />, {
+			wrapper: createMock({ appliesToChannels: true, TTLChannels: 60000, advancedPrecisionCron: '* * * 12 *', advancedPrecision: true }),
+		});
+		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+	});
+});

apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
 import { usePruneWarningMessage } from '../../hooks/usePruneWarningMessage';
+import { withErrorBoundary } from '../withErrorBoundary';
 
 const RetentionPolicyCallout = ({ room }: { room: IRoom }) => {
 	const message = usePruneWarningMessage(room);
@@ -18,4 +19,4 @@ const RetentionPolicyCallout = ({ room }: { room: IRoom }) => {
 	);
 };
 
-export default RetentionPolicyCallout;
+export default withErrorBoundary(RetentionPolicyCallout);

apps/meteor/client/components/withErrorBoundary.tsx

@@ -0,0 +1,19 @@
+import type { ComponentType, ReactNode, ComponentProps } from 'react';
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+function withErrorBoundary<T extends object>(Component: ComponentType<T>, fallback: ReactNode = null) {
+	const WrappedComponent = function (props: ComponentProps<typeof Component>) {
+		return (
+			<ErrorBoundary fallback={<>{fallback}</>}>
+				<Component {...props} />
+			</ErrorBoundary>
+		);
+	};
+
+	WrappedComponent.displayName = `withErrorBoundary(${Component.displayName ?? Component.name ?? 'Component'})`;
+
+	return WrappedComponent;
+}
+
+export { withErrorBoundary };

apps/meteor/client/hooks/usePruneWarningMessage.spec.ts

@@ -1,46 +1,11 @@
 import type { IRoomWithRetentionPolicy } from '@rocket.chat/core-typings';
-import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { renderHook } from '@testing-library/react-hooks';
 
+import { createRenteionPolicySettingsMock as createMock } from '../../tests/mocks/client/mockRetentionPolicySettings';
 import { createFakeRoom } from '../../tests/mocks/data';
+import { setDate } from '../../tests/mocks/mockDate';
 import { usePruneWarningMessage } from './usePruneWarningMessage';
 
-const createMock = ({
-	enabled = true,
-	filesOnly = false,
-	doNotPrunePinned = false,
-	appliesToChannels = false,
-	TTLChannels = 60000,
-	appliesToGroups = false,
-	TTLGroups = 60000,
-	appliesToDMs = false,
-	TTLDMs = 60000,
-	precision = '0',
-	advancedPrecision = false,
-	advancedPrecisionCron = '*/30 * * * *',
-} = {}) => {
-	return mockAppRoot()
-		.withTranslations('en', 'core', {
-			RetentionPolicy_RoomWarning_NextRunDate: '{{maxAge}} {{nextRunDate}}',
-			RetentionPolicy_RoomWarning_Unpinned_NextRunDate: 'Unpinned {{maxAge}} {{nextRunDate}}',
-			RetentionPolicy_RoomWarning_FilesOnly_NextRunDate: 'FilesOnly {{maxAge}} {{nextRunDate}}',
-			RetentionPolicy_RoomWarning_UnpinnedFilesOnly_NextRunDate: 'UnpinnedFilesOnly {{maxAge}} {{nextRunDate}}',
-		})
-		.withSetting('RetentionPolicy_Enabled', enabled)
-		.withSetting('RetentionPolicy_FilesOnly', filesOnly)
-		.withSetting('RetentionPolicy_DoNotPrunePinned', doNotPrunePinned)
-		.withSetting('RetentionPolicy_AppliesToChannels', appliesToChannels)
-		.withSetting('RetentionPolicy_TTL_Channels', TTLChannels)
-		.withSetting('RetentionPolicy_AppliesToGroups', appliesToGroups)
-		.withSetting('RetentionPolicy_TTL_Groups', TTLGroups)
-		.withSetting('RetentionPolicy_AppliesToDMs', appliesToDMs)
-		.withSetting('RetentionPolicy_TTL_DMs', TTLDMs)
-		.withSetting('RetentionPolicy_Precision', precision)
-		.withSetting('RetentionPolicy_Advanced_Precision', advancedPrecision)
-		.withSetting('RetentionPolicy_Advanced_Precision_Cron', advancedPrecisionCron)
-		.build();
-};
-
 jest.useFakeTimers();
 
 const getRetentionRoomProps = (props: Partial<IRoomWithRetentionPolicy['retention']> = {}) => {
@@ -57,18 +22,6 @@ const getRetentionRoomProps = (props: Partial<IRoomWithRetentionPolicy['retentio
 	};
 };
 
-const setDate = (minutes = 1, hours = 0, date = 1) => {
-	// June 12, 2024, 12:00 AM
-	const fakeDate = new Date();
-	fakeDate.setFullYear(2024);
-	fakeDate.setMonth(5);
-	fakeDate.setDate(date);
-	fakeDate.setHours(hours);
-	fakeDate.setMinutes(minutes);
-	fakeDate.setSeconds(0);
-	jest.setSystemTime(fakeDate);
-};
-
 describe('usePruneWarningMessage hook', () => {
 	describe('Cron timer and precision', () => {
 		it('Should update the message after the nextRunDate has passaed', async () => {

apps/meteor/client/views/room/body/RetentionPolicyWarning.spec.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+
+import { createRenteionPolicySettingsMock as createMock } from '../../../../tests/mocks/client/mockRetentionPolicySettings';
+import { createFakeRoom } from '../../../../tests/mocks/data';
+import { setDate } from '../../../../tests/mocks/mockDate';
+import RetentionPolicyWarning from './RetentionPolicyWarning';
+
+jest.useFakeTimers();
+
+describe('RetentionPolicyWarning', () => {
+	it('Should render callout if settings are valid', () => {
+		setDate();
+		const fakeRoom = createFakeRoom({ t: 'c' });
+		render(<RetentionPolicyWarning room={fakeRoom} />, { wrapper: createMock({ appliesToChannels: true, TTLChannels: 60000 }) });
+		expect(screen.getByRole('alert')).toHaveTextContent('a minute June 1, 2024, 12:30 AM');
+	});
+
+	it('Should not render callout if settings are invalid', () => {
+		setDate();
+		const fakeRoom = createFakeRoom({ t: 'c' });
+		render(<RetentionPolicyWarning room={fakeRoom} />, {
+			wrapper: createMock({ appliesToChannels: true, TTLChannels: 60000, advancedPrecisionCron: '* * * 12 *', advancedPrecision: true }),
+		});
+		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+	});
+});

apps/meteor/client/views/room/body/RetentionPolicyWarning.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
 
+import { withErrorBoundary } from '../../../components/withErrorBoundary';
 import { usePruneWarningMessage } from '../../../hooks/usePruneWarningMessage';
 
 const RetentionPolicyWarning = ({ room }: { room: IRoom }): ReactElement => {
@@ -23,4 +24,4 @@ const RetentionPolicyWarning = ({ room }: { room: IRoom }): ReactElement => {
 	);
 };
 
-export default RetentionPolicyWarning;
+export default withErrorBoundary(RetentionPolicyWarning);

apps/meteor/tests/mocks/client/mockRetentionPolicySettings.ts

@@ -0,0 +1,37 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+
+export const createRenteionPolicySettingsMock = ({
+	enabled = true,
+	filesOnly = false,
+	doNotPrunePinned = false,
+	appliesToChannels = false,
+	TTLChannels = 60000,
+	appliesToGroups = false,
+	TTLGroups = 60000,
+	appliesToDMs = false,
+	TTLDMs = 60000,
+	precision = '0',
+	advancedPrecision = false,
+	advancedPrecisionCron = '*/30 * * * *',
+} = {}) => {
+	return mockAppRoot()
+		.withTranslations('en', 'core', {
+			RetentionPolicy_RoomWarning_NextRunDate: '{{maxAge}} {{nextRunDate}}',
+			RetentionPolicy_RoomWarning_Unpinned_NextRunDate: 'Unpinned {{maxAge}} {{nextRunDate}}',
+			RetentionPolicy_RoomWarning_FilesOnly_NextRunDate: 'FilesOnly {{maxAge}} {{nextRunDate}}',
+			RetentionPolicy_RoomWarning_UnpinnedFilesOnly_NextRunDate: 'UnpinnedFilesOnly {{maxAge}} {{nextRunDate}}',
+		})
+		.withSetting('RetentionPolicy_Enabled', enabled)
+		.withSetting('RetentionPolicy_FilesOnly', filesOnly)
+		.withSetting('RetentionPolicy_DoNotPrunePinned', doNotPrunePinned)
+		.withSetting('RetentionPolicy_AppliesToChannels', appliesToChannels)
+		.withSetting('RetentionPolicy_TTL_Channels', TTLChannels)
+		.withSetting('RetentionPolicy_AppliesToGroups', appliesToGroups)
+		.withSetting('RetentionPolicy_TTL_Groups', TTLGroups)
+		.withSetting('RetentionPolicy_AppliesToDMs', appliesToDMs)
+		.withSetting('RetentionPolicy_TTL_DMs', TTLDMs)
+		.withSetting('RetentionPolicy_Precision', precision)
+		.withSetting('RetentionPolicy_Advanced_Precision', advancedPrecision)
+		.withSetting('RetentionPolicy_Advanced_Precision_Cron', advancedPrecisionCron)
+		.build();
+};

apps/meteor/tests/mocks/mockDate.ts

@@ -0,0 +1,12 @@
+// you must use jest.useFakeTimers for this to work.
+export const setDate = (minutes = 1, hours = 0, date = 1) => {
+	// June 12, 2024, 12:00 AM
+	const fakeDate = new Date();
+	fakeDate.setFullYear(2024);
+	fakeDate.setMonth(5);
+	fakeDate.setDate(date);
+	fakeDate.setHours(hours);
+	fakeDate.setMinutes(minutes);
+	fakeDate.setSeconds(0);
+	jest.setSystemTime(fakeDate);
+};