From aa7627bc0be5fef82e68fb8404dae9e313e01327 Mon Sep 17 00:00:00 2001 From: David Leek Date: Mon, 3 Jul 2023 13:36:49 +0200 Subject: [PATCH] feat/admin menu reorganize (#4129) ## About the changes Reorganizes the items in the menu to align with the tabs on the admin page. Also makes admin menu available to all users, they can get there anyways when using API access link, and all admin-only pages are disabled for non-admins. Also adds API access to the mobile drawer menu, in accordance with how the configure menu is laid out. --- .../menu/Header/DrawerMenu/DrawerMenu.tsx | 32 ++++----- frontend/src/component/menu/Header/Header.tsx | 65 +++++++------------ frontend/src/component/menu/routes.ts | 42 ++++++------ 3 files changed, 54 insertions(+), 85 deletions(-) diff --git a/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx b/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx index 813f3bb5a0..782b59d14c 100644 --- a/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx +++ b/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx @@ -7,7 +7,6 @@ import ExitToApp from '@mui/icons-material/ExitToApp'; import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg'; import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg'; import NavigationLink from '../NavigationLink/NavigationLink'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { basePath } from 'utils/formatPath'; import { IFlags } from 'interfaces/uiConfig'; import { INavigationMenuItem } from 'interfaces/route'; @@ -31,7 +30,6 @@ interface IDrawerMenuProps { title?: string; open?: boolean; toggleDrawer: () => void; - admin?: boolean; links: Array<{ value: string; icon: ReactNode; @@ -51,7 +49,6 @@ export const DrawerMenu: VFC = ({ flags = {}, open = false, toggleDrawer, - admin = false, routes, }) => { const renderLinks = () => { @@ -115,25 +112,18 @@ export const DrawerMenu: VFC = ({ /> ))} - - + - - {routes.adminRoutes.map(item => ( - toggleDrawer()} - path={item.path} - text={item.title} - key={item.path} - /> - ))} - - - } - /> + + {routes.adminRoutes.map(item => ( + toggleDrawer()} + path={item.path} + text={item.title} + key={item.path} + /> + ))} +
{renderLinks()} diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx index 2c4a5e6aa3..077287e956 100644 --- a/frontend/src/component/menu/Header/Header.tsx +++ b/frontend/src/component/menu/Header/Header.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState, VFC } from 'react'; +import { useState, VFC } from 'react'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useTheme } from '@mui/material/styles'; import { Link } from 'react-router-dom'; @@ -21,8 +21,6 @@ import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText import { DrawerMenu } from './DrawerMenu/DrawerMenu'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { flexRow, focusable } from 'themes/themeStyles'; -import { ADMIN } from 'component/providers/AccessProvider/permissions'; -import { IPermission } from 'interfaces/user'; import { NavigationMenu } from './NavigationMenu/NavigationMenu'; import { getRoutes, @@ -35,7 +33,6 @@ import { LightModeOutlined, } from '@mui/icons-material'; import { filterByConfig } from 'component/common/util'; -import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions'; import { useId } from 'hooks/useId'; import { INavigationMenuItem } from 'interfaces/route'; import { ThemeMode } from 'component/common/ThemeMode/ThemeMode'; @@ -118,8 +115,6 @@ const Header: VFC = () => { const [adminRef, setAdminRef] = useState(null); const [configRef, setConfigRef] = useState(null); - const [admin, setAdmin] = useState(false); - const { permissions } = useAuthPermissions(); const { uiConfig, isOss, isPro, isEnterprise } = useUiConfig(); const smallScreen = useMediaQuery(theme.breakpoints.down('md')); const [openDrawer, setOpenDrawer] = useState(false); @@ -128,16 +123,6 @@ const Header: VFC = () => { const onAdminClose = () => setAdminRef(null); const onConfigureClose = () => setConfigRef(null); - useEffect(() => { - const admin = permissions?.find( - (element: IPermission) => element.permission === ADMIN - ); - - if (admin) { - setAdmin(true); - } - }, [permissions]); - const routes = getRoutes(); const filterByMode = (route: INavigationMenuItem): boolean => { @@ -159,9 +144,15 @@ const Header: VFC = () => { }, ]) .filter(filterByConfig(uiConfig)), - mobileRoutes: getCondensedRoutes(routes.mobileRoutes).filter( - filterByConfig(uiConfig) - ), + mobileRoutes: getCondensedRoutes(routes.mobileRoutes) + .concat([ + { + path: '/admin/api', + title: 'API access', + menu: {}, + }, + ]) + .filter(filterByConfig(uiConfig)), adminRoutes: adminMenuRoutes .filter(filterByConfig(uiConfig)) .filter(filterByMode) @@ -191,7 +182,6 @@ const Header: VFC = () => { links={uiConfig.links} open={openDrawer} toggleDrawer={toggleDrawer} - admin={admin} routes={filteredMainRoutes} /> @@ -273,29 +263,18 @@ const Header: VFC = () => { - - - setAdminRef(e.currentTarget) - } - aria-controls={ - adminRef ? adminId : undefined - } - aria-expanded={Boolean(adminRef)} - size="large" - disableRipple - > - - - - - } - /> + + setAdminRef(e.currentTarget)} + aria-controls={adminRef ? adminId : undefined} + aria-expanded={Boolean(adminRef)} + size="large" + disableRipple + > + + + +