Merge pull request #1550 from automatisch/AUT-563

feat: render AdminSettingsLayout once for all child routes

packages/e2e-tests/fixtures/admin/roles-page.js

@@ -31,7 +31,7 @@ export class AdminRolesPage extends AuthenticatedPage {
     await this.roleDrawerLink.click();
     await this.isMounted();
     await this.rolesLoader.waitFor({
-      state: 'detached'
+      state: 'detached',
     });
   }
 
@@ -43,9 +43,7 @@ export class AdminRolesPage extends AuthenticatedPage {
       state: 'detached',
     });
     return this.roleRow.filter({
-      has: this.page.getByTestId('role-name').filter({
-        hasText: name,
-      }),
+      has: this.page.getByTestId('role-name').getByText(name, { exact: true }),
     });
   }
 

packages/e2e-tests/tests/admin/manage-roles.spec.js

@@ -197,7 +197,7 @@ test.describe('Role management page', () => {
         await adminCreateUserPage.passwordInput.fill('sample');
         await adminCreateUserPage.roleInput.click();
         await adminCreateUserPage.page
-          .getByRole('option', { name: 'Delete Role' })
+          .getByRole('option', { name: 'Delete Role', exact: true })
           .click();
         await adminCreateUserPage.createButton.click();
         await adminUsersPage.snackbar.waitFor({

packages/web/src/adminSettingsRoutes.jsx

@@ -1,5 +1,5 @@
 import { Route, Navigate } from 'react-router-dom';
-import AdminSettingsLayout from 'components/AdminSettingsLayout';
+
 import Users from 'pages/Users';
 import EditUser from 'pages/EditUser';
 import CreateUser from 'pages/CreateUser';
@@ -19,9 +19,7 @@ export default (
       path={URLS.USERS}
       element={
         <Can I="read" a="User">
-          <AdminSettingsLayout>
-            <Users />
-          </AdminSettingsLayout>
+          <Users />
         </Can>
       }
     />
@@ -30,9 +28,7 @@ export default (
       path={URLS.CREATE_USER}
       element={
         <Can I="create" a="User">
-          <AdminSettingsLayout>
-            <CreateUser />
-          </AdminSettingsLayout>
+          <CreateUser />
         </Can>
       }
     />
@@ -41,9 +37,7 @@ export default (
       path={URLS.USER_PATTERN}
       element={
         <Can I="update" a="User">
-          <AdminSettingsLayout>
-            <EditUser />
-          </AdminSettingsLayout>
+          <EditUser />
         </Can>
       }
     />
@@ -52,9 +46,7 @@ export default (
       path={URLS.ROLES}
       element={
         <Can I="read" a="Role">
-          <AdminSettingsLayout>
-            <Roles />
-          </AdminSettingsLayout>
+          <Roles />
         </Can>
       }
     />
@@ -63,9 +55,7 @@ export default (
       path={URLS.CREATE_ROLE}
       element={
         <Can I="create" a="Role">
-          <AdminSettingsLayout>
-            <CreateRole />
-          </AdminSettingsLayout>
+          <CreateRole />
         </Can>
       }
     />
@@ -74,9 +64,7 @@ export default (
       path={URLS.ROLE_PATTERN}
       element={
         <Can I="update" a="Role">
-          <AdminSettingsLayout>
-            <EditRole />
-          </AdminSettingsLayout>
+          <EditRole />
         </Can>
       }
     />
@@ -85,9 +73,7 @@ export default (
       path={URLS.USER_INTERFACE}
       element={
         <Can I="update" a="Config">
-          <AdminSettingsLayout>
-            <UserInterface />
-          </AdminSettingsLayout>
+          <UserInterface />
         </Can>
       }
     />
@@ -98,9 +84,7 @@ export default (
         <Can I="read" a="SamlAuthProvider">
           <Can I="update" a="SamlAuthProvider">
             <Can I="create" a="SamlAuthProvider">
-              <AdminSettingsLayout>
-                <Authentication />
-              </AdminSettingsLayout>
+              <Authentication />
             </Can>
           </Can>
         </Can>
@@ -111,9 +95,7 @@ export default (
       path={URLS.ADMIN_APPS}
       element={
         <Can I="update" a="App">
-          <AdminSettingsLayout>
-            <AdminApplications />
-          </AdminSettingsLayout>
+          <AdminApplications />
         </Can>
       }
     />
@@ -122,9 +104,7 @@ export default (
       path={`${URLS.ADMIN_APP_PATTERN}/*`}
       element={
         <Can I="update" a="App">
-          <AdminSettingsLayout>
-            <AdminApplication />
-          </AdminSettingsLayout>
+          <AdminApplication />
         </Can>
       }
     />

packages/web/src/components/AccountDropdownMenu/index.jsx

@@ -36,12 +36,16 @@ function AccountDropdownMenu(props) {
       open={open}
       onClose={onClose}
     >
-      <MenuItem component={Link} to={URLS.SETTINGS_DASHBOARD}>
+      <MenuItem component={Link} to={URLS.SETTINGS_DASHBOARD} onClick={onClose}>
         {formatMessage('accountDropdownMenu.settings')}
       </MenuItem>
 
       <Can I="read" a="User">
-        <MenuItem component={Link} to={URLS.ADMIN_SETTINGS_DASHBOARD}>
+        <MenuItem
+          component={Link}
+          to={URLS.ADMIN_SETTINGS_DASHBOARD}
+          onClick={onClose}
+        >
           {formatMessage('accountDropdownMenu.adminSettings')}
         </MenuItem>
       </Can>

packages/web/src/components/AdminSettingsLayout/index.jsx

@@ -1,10 +1,11 @@
-import PropTypes from 'prop-types';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import GroupIcon from '@mui/icons-material/Group';
 import GroupsIcon from '@mui/icons-material/Groups';
 import LockIcon from '@mui/icons-material/LockPerson';
 import BrushIcon from '@mui/icons-material/Brush';
 import AppsIcon from '@mui/icons-material/Apps';
+import { Outlet } from 'react-router-dom';
+
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import { useTheme } from '@mui/material/styles';
@@ -12,6 +13,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
+import Can from 'components/Can';
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
@@ -68,7 +70,7 @@ function createDrawerLinks({
   return items;
 }
 
-function SettingsLayout({ children }) {
+function SettingsLayout() {
   const theme = useTheme();
   const formatMessage = useFormatMessage();
   const currentUserAbility = useCurrentUserAbility();
@@ -95,13 +97,12 @@ function SettingsLayout({ children }) {
     },
   ];
   return (
-    <>
+    <Can I="read" a="User">
       <AppBar
         drawerOpen={isDrawerOpen}
         onDrawerOpen={openDrawer}
         onDrawerClose={closeDrawer}
       />
-
       <Box sx={{ display: 'flex' }}>
         <Drawer
           links={drawerLinks}
@@ -110,19 +111,13 @@ function SettingsLayout({ children }) {
           onOpen={openDrawer}
           onClose={closeDrawer}
         />
-
         <Box sx={{ flex: 1 }}>
           <Toolbar />
-
-          {children}
+          <Outlet />
         </Box>
       </Box>
-    </>
+    </Can>
   );
 }
 
-SettingsLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
 export default SettingsLayout;

packages/web/src/routes.jsx

@@ -2,6 +2,7 @@ import { Route, Routes as ReactRouterRoutes, Navigate } from 'react-router-dom';
 import Layout from 'components/Layout';
 import NoResultFound from 'components/NotFound';
 import PublicLayout from 'components/PublicLayout';
+import AdminSettingsLayout from 'components/AdminSettingsLayout';
 import Applications from 'pages/Applications';
 import Application from 'pages/Application';
 import Executions from 'pages/Executions';
@@ -139,8 +140,9 @@ function Routes() {
 
       <Route path={URLS.SETTINGS}>{settingsRoutes}</Route>
 
-      <Route path={URLS.ADMIN_SETTINGS}>{adminSettingsRoutes}</Route>
-
+      <Route path={URLS.ADMIN_SETTINGS} element={<AdminSettingsLayout />}>
+        {adminSettingsRoutes}
+      </Route>
       <Route path="*" element={<NoResultFound />} />
     </ReactRouterRoutes>
   );