From 5660be253d204401ff1c80b65625f12376385f3e Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Tue, 6 Aug 2024 16:32:21 -0300 Subject: [PATCH] chore: Renders back button through prop in admin settings (#32987) --- .../client/views/admin/settings/GroupPage.tsx | 15 +++--- .../views/admin/settings/GroupSelector.tsx | 13 ++--- .../views/admin/settings/SettingsRoute.tsx | 5 +- .../admin/settings/groups/AssetsGroupPage.tsx | 8 +-- .../settings/groups/GenericGroupPage.tsx | 8 +-- .../admin/settings/groups/LDAPGroupPage.tsx | 7 ++- .../admin/settings/groups/OAuthGroupPage.tsx | 7 ++- .../admin/settings/groups/TabbedGroupPage.tsx | 7 +-- .../admin/settings/groups/VoipGroupPage.tsx | 8 ++- .../tests/e2e/administration-settings.spec.ts | 52 +++++++++++++++++++ apps/meteor/tests/e2e/administration.spec.ts | 30 ----------- 11 files changed, 100 insertions(+), 60 deletions(-) create mode 100644 apps/meteor/tests/e2e/administration-settings.spec.ts diff --git a/apps/meteor/client/views/admin/settings/GroupPage.tsx b/apps/meteor/client/views/admin/settings/GroupPage.tsx index a68daff979c9..5946805a497e 100644 --- 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,6 +25,7 @@ type GroupPageProps = { const GroupPage = ({ children = undefined, headerButtons = undefined, + onClickBack, _id, i18nLabel, i18nDescription = undefined, @@ -31,7 +33,6 @@ const GroupPage = ({ 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): void => { event.preventDefault(); cancel(); @@ -139,7 +138,7 @@ const GroupPage = ({ return ( - + {headerButtons} {tabs} diff --git a/apps/meteor/client/views/admin/settings/GroupSelector.tsx b/apps/meteor/client/views/admin/settings/GroupSelector.tsx index defe2a0a9a45..6d6d90a566eb 100644 --- a/apps/meteor/client/views/admin/settings/GroupSelector.tsx +++ b/apps/meteor/client/views/admin/settings/GroupSelector.tsx @@ -11,9 +11,10 @@ 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) { @@ -21,22 +22,22 @@ const GroupSelector = ({ groupId }: GroupSelectorProps) => { } if (groupId === 'Assets') { - return ; + return ; } if (groupId === 'OAuth') { - return ; + return ; } if (groupId === 'LDAP') { - return ; + return ; } if (groupId === 'Call_Center') { - return ; + return ; } - return ; + return ; }; export default GroupSelector; diff --git a/apps/meteor/client/views/admin/settings/SettingsRoute.tsx b/apps/meteor/client/views/admin/settings/SettingsRoute.tsx index d0c0c0003778..c03aced8b5a0 100644 --- 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 ; @@ -21,7 +22,7 @@ export const SettingsRoute = (): ReactElement => { return ( - + router.navigate('/admin/settings')} /> ); }; diff --git a/apps/meteor/client/views/admin/settings/groups/AssetsGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/AssetsGroupPage.tsx index 6d4bb90e3d12..a5935eb47bc8 100644 --- 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 ( - + {sections.map((sectionName) => (
))} diff --git a/apps/meteor/client/views/admin/settings/groups/GenericGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/GenericGroupPage.tsx index 6f71ec9c1333..c9148547b955 100644 --- 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 ( - + {sections.map((sectionName) => (
))} diff --git a/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx index bea9ccd76222..a497738b9541 100644 --- 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 ( diff --git a/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage.tsx index 0bd65a3ad533..713a26935994 100644 --- 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 { diff --git a/apps/meteor/client/views/admin/settings/groups/TabbedGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/TabbedGroupPage.tsx index f3546f13d758..eeecf9cc3800 100644 --- 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 ; + return ; } if (!tab && tabs[0]) { @@ -43,7 +44,7 @@ function TabbedGroupPage({ _id, ...props }: TabbedGroupPageProps): JSX.Element { ); return ( - + {sections.map((sectionName) => (
))} diff --git a/apps/meteor/client/views/admin/settings/groups/VoipGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage.tsx index 82b55a152563..3b7c873f2268 100644 --- 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 ( - + {tab === 'Extensions' ? ( ExtensionsPageComponent ) : ( diff --git a/apps/meteor/tests/e2e/administration-settings.spec.ts b/apps/meteor/tests/e2e/administration-settings.spec.ts new file mode 100644 index 000000000000..d2996d6eac88 --- /dev/null +++ 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 index 703c4a4bd8b1..45fee011efc3 100644 --- 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'); - }); - }); - }); });