groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1550 from automatisch/AUT-563

Browse Source 
feat: render AdminSettingsLayout once for all child routes
This commit is contained in:
Ali BARIN
2024-03-06 18:56:59 +01:00
committed by GitHub
parent b51ae9ac38 9f7dee3baa
commit 613abaec1b
6 changed files with 31 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/e2e-tests/fixtures/admin/roles-page.js
View File

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

2
packages/e2e-tests/tests/admin/manage-roles.spec.js
View File

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

42
packages/web/src/adminSettingsRoutes.jsx
View File

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

8
packages/web/src/components/AccountDropdownMenu/index.jsx
View File

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

19
packages/web/src/components/AdminSettingsLayout/index.jsx
View File

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

6
packages/web/src/routes.jsx
View File

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