chore: Renders back button through prop in admin settings (#32987)

RocketChat · Aug 6, 2024 · 5660be2 · 5660be2
1 parent e28be46
commit 5660be2
Show file tree

Hide file tree

Showing 11 changed files with 100 additions and 60 deletions.
diff --git a/apps/meteor/client/views/admin/settings/GroupPage.tsx b/apps/meteor/client/views/admin/settings/GroupPage.tsx
@@ -1,8 +1,8 @@
 import type { ISetting, ISettingColor } from '@rocket.chat/core-typings';
 import { Accordion, Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import { useToastMessageDispatch, useSettingsDispatch, useSettings, useTranslation, useRoute } from '@rocket.chat/ui-contexts';
+import { useToastMessageDispatch, useSettingsDispatch, useSettings, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactNode, FormEvent, MouseEvent } from 'react';
 import React, { useMemo, memo } from 'react';
 
@@ -14,6 +14,7 @@ import GroupPageSkeleton from './GroupPageSkeleton';
 type GroupPageProps = {
 	children: ReactNode;
 	headerButtons?: ReactNode;
+	onClickBack?: () => void;
 	_id: string;
 	i18nLabel: string;
 	i18nDescription?: string;
@@ -24,14 +25,14 @@ type GroupPageProps = {
 const GroupPage = ({
 	children = undefined,
 	headerButtons = undefined,
+	onClickBack,
 	_id,
 	i18nLabel,
 	i18nDescription = undefined,
 	tabs = undefined,
 	isCustom = false,
 }: GroupPageProps) => {
 	const t = useTranslation();
-	const router = useRoute('admin-settings');
 	const dispatch = useSettingsDispatch();
 	const dispatchToastMessage = useToastMessageDispatch();
 
@@ -56,7 +57,7 @@ const GroupPage = ({
 
 	const isColorSetting = (setting: ISetting): setting is ISettingColor => setting.type === 'color';
 
-	const save = useMutableCallback(async () => {
+	const save = useEffectEvent(async () => {
 		const changes = changedEditableSettings.map((setting) => {
 			if (isColorSetting(setting)) {
 				return {
@@ -86,7 +87,7 @@ const GroupPage = ({
 
 	const dispatchToEditing = useEditableSettingsDispatch();
 
-	const cancel = useMutableCallback(() => {
+	const cancel = useEffectEvent(() => {
 		const settingsToDispatch = changedEditableSettings
 			.map(({ _id }) => originalSettings.find((setting) => setting._id === _id))
 			.map((setting) => {
@@ -118,8 +119,6 @@ const GroupPage = ({
 		save();
 	};
 
-	const handleBack = useMutableCallback(() => router.push({}));
-
 	const handleCancelClick = (event: MouseEvent<HTMLOrSVGElement>): void => {
 		event.preventDefault();
 		cancel();
@@ -139,7 +138,7 @@ const GroupPage = ({
 
 	return (
 		<Page is='form' action='#' method='post' onSubmit={handleSubmit}>
-			<PageHeader onClickBack={handleBack} title={i18nLabel && isTranslationKey(i18nLabel) && t(i18nLabel)}>
+			<PageHeader onClickBack={onClickBack} title={i18nLabel && isTranslationKey(i18nLabel) && t(i18nLabel)}>
 				<ButtonGroup>{headerButtons}</ButtonGroup>
 			</PageHeader>
 			{tabs}

diff --git a/apps/meteor/client/views/admin/settings/GroupSelector.tsx b/apps/meteor/client/views/admin/settings/GroupSelector.tsx
@@ -11,32 +11,33 @@ import VoipGroupPage from './groups/VoipGroupPage';
 
 type GroupSelectorProps = {
 	groupId: GroupId;
+	onClickBack?: () => void;
 };
 
-const GroupSelector = ({ groupId }: GroupSelectorProps) => {
+const GroupSelector = ({ groupId, onClickBack }: GroupSelectorProps) => {
 	const group = useSettingStructure(groupId);
 
 	if (!group) {
 		return <GroupPage.Skeleton />;
 	}
 
 	if (groupId === 'Assets') {
-		return <AssetsGroupPage {...group} />;
+		return <AssetsGroupPage {...group} onClickBack={onClickBack} />;
 	}
 
 	if (groupId === 'OAuth') {
-		return <OAuthGroupPage {...group} />;
+		return <OAuthGroupPage {...group} onClickBack={onClickBack} />;
 	}
 
 	if (groupId === 'LDAP') {
-		return <LDAPGroupPage {...group} />;
+		return <LDAPGroupPage {...group} onClickBack={onClickBack} />;
 	}
 
 	if (groupId === 'Call_Center') {
-		return <VoipGroupPage {...group} />;
+		return <VoipGroupPage {...group} onClickBack={onClickBack} />;
 	}
 
-	return <TabbedGroupPage {...group} />;
+	return <TabbedGroupPage {...group} onClickBack={onClickBack} />;
 };
 
 export default GroupSelector;
diff --git a/apps/meteor/client/views/admin/settings/SettingsRoute.tsx b/apps/meteor/client/views/admin/settings/SettingsRoute.tsx
@@ -1,4 +1,4 @@
-import { useRouteParameter, useIsPrivilegedSettingsContext } from '@rocket.chat/ui-contexts';
+import { useRouteParameter, useIsPrivilegedSettingsContext, useRouter } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
 
@@ -10,6 +10,7 @@ import SettingsPage from './SettingsPage';
 export const SettingsRoute = (): ReactElement => {
 	const hasPermission = useIsPrivilegedSettingsContext();
 	const groupId = useRouteParameter('group');
+	const router = useRouter();
 
 	if (!hasPermission) {
 		return <NotAuthorizedPage />;
@@ -21,7 +22,7 @@ export const SettingsRoute = (): ReactElement => {
 
 	return (
 		<EditableSettingsProvider>
-			<GroupSelector groupId={groupId} />
+			<GroupSelector groupId={groupId} onClickBack={() => router.navigate('/admin/settings')} />
 		</EditableSettingsProvider>
 	);
 };

diff --git a/apps/meteor/client/views/admin/settings/groups/AssetsGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/AssetsGroupPage.tsx
@@ -6,14 +6,16 @@ import { useEditableSettingsGroupSections } from '../../EditableSettingsContext'
 import GroupPage from '../GroupPage';
 import Section from '../Section';
 
-type AssetsGroupPageProps = ISetting;
+type AssetsGroupPageProps = ISetting & {
+	onClickBack?: () => void;
+};
 
-function AssetsGroupPage({ _id, ...group }: AssetsGroupPageProps): ReactElement {
+function AssetsGroupPage({ _id, onClickBack, ...group }: AssetsGroupPageProps): ReactElement {
 	const sections = useEditableSettingsGroupSections(_id);
 	const solo = sections.length === 1;
 
 	return (
-		<GroupPage _id={_id} {...group}>
+		<GroupPage _id={_id} onClickBack={onClickBack} {...group}>
 			{sections.map((sectionName) => (
 				<Section key={sectionName} groupId={_id} hasReset={false} sectionName={sectionName} solo={solo} />
 			))}

diff --git a/apps/meteor/client/views/admin/settings/groups/GenericGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/GenericGroupPage.tsx
@@ -6,14 +6,16 @@ import { useEditableSettingsGroupSections } from '../../EditableSettingsContext'
 import GroupPage from '../GroupPage';
 import Section from '../Section';
 
-type GenericGroupPageProps = ISetting;
+type GenericGroupPageProps = ISetting & {
+	onClickBack?: () => void;
+};
 
-function GenericGroupPage({ _id, ...props }: GenericGroupPageProps): ReactElement {
+function GenericGroupPage({ _id, onClickBack, ...props }: GenericGroupPageProps): ReactElement {
 	const sections = useEditableSettingsGroupSections(_id);
 	const solo = sections.length === 1;
 
 	return (
-		<GroupPage _id={_id} {...props}>
+		<GroupPage _id={_id} onClickBack={onClickBack} {...props}>
 			{sections.map((sectionName) => (
 				<Section key={sectionName || ''} groupId={_id} sectionName={sectionName} solo={solo} />
 			))}

diff --git a/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx
@@ -10,7 +10,11 @@ import { useExternalLink } from '../../../../hooks/useExternalLink';
 import { useEditableSettings } from '../../EditableSettingsContext';
 import TabbedGroupPage from './TabbedGroupPage';
 
-function LDAPGroupPage({ _id, ...group }: ISetting): JSX.Element {
+type LDAPGroupPageProps = ISetting & {
+	onClickBack?: () => void;
+};
+
+function LDAPGroupPage({ _id, onClickBack, ...group }: LDAPGroupPageProps) {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const testConnection = useEndpoint('POST', '/v1/ldap.testConnection');
@@ -127,6 +131,7 @@ function LDAPGroupPage({ _id, ...group }: ISetting): JSX.Element {
 	return (
 		<TabbedGroupPage
 			_id={_id}
+			onClickBack={onClickBack}
 			{...group}
 			headerButtons={
 				<>

diff --git a/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage.tsx
@@ -12,9 +12,11 @@ import GroupPage from '../GroupPage';
 import Section from '../Section';
 import CreateOAuthModal from './CreateOAuthModal';
 
-type OAuthGroupPageProps = ISetting;
+type OAuthGroupPageProps = ISetting & {
+	onClickBack?: () => void;
+};
 
-function OAuthGroupPage({ _id, ...group }: OAuthGroupPageProps): ReactElement {
+function OAuthGroupPage({ _id, onClickBack, ...group }: OAuthGroupPageProps): ReactElement {
 	const sections = useEditableSettingsGroupSections(_id);
 	const solo = sections.length === 1;
 	const t = useTranslation();
@@ -95,6 +97,7 @@ function OAuthGroupPage({ _id, ...group }: OAuthGroupPageProps): ReactElement {
 		<GroupPage
 			_id={_id}
 			{...group}
+			onClickBack={onClickBack}
 			headerButtons={
 				<>
 					<Button onClick={handleRefreshOAuthServicesButtonClick}>{t('Refresh_oauth_services')}</Button>

diff --git a/apps/meteor/client/views/admin/settings/groups/TabbedGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/TabbedGroupPage.tsx
@@ -12,9 +12,10 @@ import GenericGroupPage from './GenericGroupPage';
 
 type TabbedGroupPageProps = ISetting & {
 	headerButtons?: ReactElement;
+	onClickBack?: () => void;
 };
 
-function TabbedGroupPage({ _id, ...props }: TabbedGroupPageProps): JSX.Element {
+function TabbedGroupPage({ _id, onClickBack, ...props }: TabbedGroupPageProps): JSX.Element {
 	const t = useTranslation();
 	const tabs = useEditableSettingsGroupTabs(_id);
 
@@ -25,7 +26,7 @@ function TabbedGroupPage({ _id, ...props }: TabbedGroupPageProps): JSX.Element {
 	const solo = sections.length === 1;
 
 	if (!tabs.length || (tabs.length === 1 && !tabs[0])) {
-		return <GenericGroupPage _id={_id} {...props} />;
+		return <GenericGroupPage _id={_id} onClickBack={onClickBack} {...props} />;
 	}
 
 	if (!tab && tabs[0]) {
@@ -43,7 +44,7 @@ function TabbedGroupPage({ _id, ...props }: TabbedGroupPageProps): JSX.Element {
 	);
 
 	return (
-		<GroupPage _id={_id} {...props} tabs={tabsComponent}>
+		<GroupPage _id={_id} onClickBack={onClickBack} {...props} tabs={tabsComponent}>
 			{sections.map((sectionName) => (
 				<Section key={sectionName || ''} groupId={_id} sectionName={sectionName} tabName={tab} solo={solo} />
 			))}

diff --git a/apps/meteor/client/views/admin/settings/groups/VoipGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage.tsx
@@ -11,7 +11,11 @@ import GroupPage from '../GroupPage';
 import Section from '../Section';
 import VoipExtensionsPage from './voip/VoipExtensionsPage';
 
-function VoipGroupPage({ _id, ...group }: ISetting): JSX.Element {
+type VoipGroupPageProps = ISetting & {
+	onClickBack?: () => void;
+};
+
+function VoipGroupPage({ _id, onClickBack, ...group }: VoipGroupPageProps) {
 	const t = useTranslation();
 	const voipEnabled = useSetting('VoIP_Enabled');
 
@@ -46,7 +50,7 @@ function VoipGroupPage({ _id, ...group }: ISetting): JSX.Element {
 	);
 
 	return (
-		<GroupPage _id={_id} {...group} tabs={tabsComponent} isCustom={true}>
+		<GroupPage _id={_id} {...group} tabs={tabsComponent} isCustom={true} onClickBack={onClickBack}>
 			{tab === 'Extensions' ? (
 				ExtensionsPageComponent
 			) : (

diff --git a/apps/meteor/tests/e2e/administration-settings.spec.ts b/apps/meteor/tests/e2e/administration-settings.spec.ts
@@ -0,0 +1,52 @@
+import { Users } from './fixtures/userStates';
+import { Admin } from './page-objects';
+import { getSettingValueById } from './utils';
+import { test, expect } from './utils/test';
+
+test.use({ storageState: Users.admin.state });
+
+test.describe.parallel('administration-settings', () => {
+	let poAdmin: Admin;
+
+	test.beforeEach(async ({ page }) => {
+		poAdmin = new Admin(page);
+	});
+
+	test.describe('General', () => {
+		let inputSiteURLSetting: string;
+
+		test.beforeAll(async ({ api }) => {
+			inputSiteURLSetting = (await getSettingValueById(api, 'Site_Url')) as string;
+		});
+
+		test.beforeEach(async ({ page }) => {
+			await page.goto('/admin/settings/General');
+		});
+
+		test('should be able to reset a setting after a change', async () => {
+			await poAdmin.inputSiteURL.fill('any_text');
+			await poAdmin.btnResetSiteURL.click();
+
+			await expect(poAdmin.inputSiteURL).toHaveValue(inputSiteURLSetting);
+		});
+
+		test('should be able to go back to the settings page', async ({ page }) => {
+			await poAdmin.btnBack.click();
+
+			await expect(page).toHaveURL('/admin/settings');
+		});
+	});
+
+	test.describe('Layout', () => {
+		test.beforeEach(async ({ page }) => {
+			await page.goto('/admin/settings/Layout');
+		});
+
+		test('should code mirror full screen be displayed correctly', async ({ page }) => {
+			await poAdmin.getAccordionBtnByName('Custom CSS').click();
+			await poAdmin.btnFullScreen.click();
+
+			await expect(page.getByRole('code')).toHaveCSS('width', '920px');
+		});
+	});
+});
diff --git a/apps/meteor/tests/e2e/administration.spec.ts b/apps/meteor/tests/e2e/administration.spec.ts
@@ -319,34 +319,4 @@ test.describe.parallel('administration', () => {
 			await expect(poAdmin.getIntegrationByName(incomingIntegrationName)).not.toBeVisible();
 		});
 	});
-
-	test.describe('Settings', () => {
-		test.describe('General', () => {
-			test.beforeEach(async ({ page }) => {
-				await page.goto('/admin/settings/General');
-			});
-
-			test.afterAll(async ({ api }) => {
-				await setSettingValueById(api, 'Language', 'en');
-			});
-
-			test('expect be able to reset a setting after a change', async () => {
-				await poAdmin.inputSiteURL.type('any_text');
-				await poAdmin.btnResetSiteURL.click();
-			});
-		});
-
-		test.describe('Layout', () => {
-			test.beforeEach(async ({ page }) => {
-				await page.goto('/admin/settings/Layout');
-			});
-
-			test('should code mirror full screen be displayed correctly', async ({ page }) => {
-				await poAdmin.getAccordionBtnByName('Custom CSS').click();
-				await poAdmin.btnFullScreen.click();
-
-				await expect(page.getByRole('code')).toHaveCSS('width', '920px');
-			});
-		});
-	});
 });