From d3da62c04aed5f9a38b77d5854d6d2ca3bc03f2f Mon Sep 17 00:00:00 2001
From: "kasia.oczkowska" <katarzyna.oczkowska@theworkingroup.net>
Date: Thu, 18 Jan 2024 15:25:11 +0000
Subject: [PATCH] feat: render AdminSettingsLayout once for all child routes

---
 packages/web/src/adminSettingsRoutes.jsx      | 42 +++++--------------
 .../components/AccountDropdownMenu/index.jsx  |  8 +++-
 .../components/AdminSettingsLayout/index.jsx  | 19 ++++-----
 packages/web/src/routes.jsx                   |  6 ++-
 4 files changed, 28 insertions(+), 47 deletions(-)

diff --git a/packages/web/src/adminSettingsRoutes.jsx b/packages/web/src/adminSettingsRoutes.jsx
index 340a92ed..3e842d81 100644
--- a/packages/web/src/adminSettingsRoutes.jsx
+++ b/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>
       }
     />
diff --git a/packages/web/src/components/AccountDropdownMenu/index.jsx b/packages/web/src/components/AccountDropdownMenu/index.jsx
index d60a4a66..a9d47670 100644
--- a/packages/web/src/components/AccountDropdownMenu/index.jsx
+++ b/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>
diff --git a/packages/web/src/components/AdminSettingsLayout/index.jsx b/packages/web/src/components/AdminSettingsLayout/index.jsx
index 3db28cc9..efe953b9 100644
--- a/packages/web/src/components/AdminSettingsLayout/index.jsx
+++ b/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;
diff --git a/packages/web/src/routes.jsx b/packages/web/src/routes.jsx
index 1e0dd588..d9784daa 100644
--- a/packages/web/src/routes.jsx
+++ b/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>
   );