feat/admin menu reorganize (#4129)

## About the changes
<!-- Describe the changes introduced. What are they and why are they
being introduced? Feel free to also add screenshots or steps to view the
changes if they're visual. -->

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.

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<IDrawerMenuProps> = ({
     flags = {},
     open = false,
     toggleDrawer,
-    admin = false,
     routes,
 }) => {
     const renderLinks = () => {
@@ -115,25 +112,18 @@ export const DrawerMenu: VFC<IDrawerMenuProps> = ({
                         />
                     ))}
                 </List>
-                <ConditionallyRender
+                <Divider />
-                    condition={admin}
-                    show={
-                        <>
-                            <Divider />
 
-                            <List className={styles.drawerList}>
+                <List className={styles.drawerList}>
-                                {routes.adminRoutes.map(item => (
+                    {routes.adminRoutes.map(item => (
-                                    <NavigationLink
+                        <NavigationLink
-                                        handleClose={() => toggleDrawer()}
+                            handleClose={() => toggleDrawer()}
-                                        path={item.path}
+                            path={item.path}
-                                        text={item.title}
+                            text={item.title}
-                                        key={item.path}
+                            key={item.path}
-                                    />
+                        />
-                                ))}
+                    ))}
-                            </List>
+                </List>
-                        </>
-                    }
-                />
                 <Divider />
                 <div className={styles.iconLinkList}>
                     {renderLinks()}

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<HTMLButtonElement | null>(null);
     const [configRef, setConfigRef] = useState<HTMLButtonElement | null>(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(
+        mobileRoutes: getCondensedRoutes(routes.mobileRoutes)
-            filterByConfig(uiConfig)
+            .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}
                     />
                     <StyledUserContainer>
@@ -273,29 +263,18 @@ const Header: VFC = () => {
                                 <MenuBookIcon />
                             </IconButton>
                         </Tooltip>
-                        <ConditionallyRender
+                        <Tooltip title="Settings" arrow>
-                            condition={admin}
+                            <StyledIconButton
-                            show={
+                                onClick={e => setAdminRef(e.currentTarget)}
-                                <Tooltip title="Settings" arrow>
+                                aria-controls={adminRef ? adminId : undefined}
-                                    <StyledIconButton
+                                aria-expanded={Boolean(adminRef)}
-                                        onClick={e =>
+                                size="large"
-                                            setAdminRef(e.currentTarget)
+                                disableRipple
-                                        }
+                            >
-                                        aria-controls={
+                                <SettingsIcon />
-                                            adminRef ? adminId : undefined
+                                <KeyboardArrowDown sx={styledIconProps} />
-                                        }
+                            </StyledIconButton>
-                                        aria-expanded={Boolean(adminRef)}
+                        </Tooltip>
-                                        size="large"
-                                        disableRipple
-                                    >
-                                        <SettingsIcon />
-                                        <KeyboardArrowDown
-                                            sx={styledIconProps}
-                                        />
-                                    </StyledIconButton>
-                                </Tooltip>
-                            }
-                        />
                         <NavigationMenu
                             id={adminId}
                             options={filteredMainRoutes.adminRoutes}

frontend/src/component/menu/routes.ts

@@ -442,21 +442,16 @@ export const routes: IRoute[] = [
 ];
 
 export const adminMenuRoutes: INavigationMenuItem[] = [
-    {
-        path: '/history',
-        title: 'Event log',
-        menu: { adminSettings: true },
-    },
-    {
-        path: '/admin/logins',
-        title: 'Login history',
-        menu: { adminSettings: true, mode: ['enterprise'] },
-    },
     {
         path: '/admin/users',
         title: 'Users',
         menu: { adminSettings: true },
     },
+    {
+        path: '/admin/service-accounts',
+        title: 'Service accounts',
+        menu: { adminSettings: true, mode: ['enterprise'] },
+    },
     {
         path: '/admin/groups',
         title: 'Groups',
@@ -468,6 +463,12 @@ export const adminMenuRoutes: INavigationMenuItem[] = [
         title: 'Roles',
         menu: { adminSettings: true, mode: ['enterprise'] },
     },
+    {
+        path: '/admin/cors',
+        title: 'CORS origins',
+        flag: 'embedProxyFrontend',
+        menu: { adminSettings: true },
+    },
     {
         path: '/admin/auth',
         title: 'Single sign-on',
@@ -478,11 +479,6 @@ export const adminMenuRoutes: INavigationMenuItem[] = [
         title: 'Instance stats',
         menu: { adminSettings: true },
     },
-    {
-        path: '/admin/service-accounts',
-        title: 'Service accounts',
-        menu: { adminSettings: true, mode: ['enterprise'] },
-    },
     {
         path: '/admin/network/*',
         title: 'Network',
@@ -494,12 +490,6 @@ export const adminMenuRoutes: INavigationMenuItem[] = [
         title: 'Maintenance',
         menu: { adminSettings: true },
     },
-    {
-        path: '/admin/cors',
-        title: 'CORS origins',
-        flag: 'embedProxyFrontend',
-        menu: { adminSettings: true },
-    },
     {
         path: '/admin/admin-invoices',
         title: 'Billing & invoices',
@@ -510,6 +500,16 @@ export const adminMenuRoutes: INavigationMenuItem[] = [
         title: 'Instance privacy',
         menu: { adminSettings: true },
     },
+    {
+        path: '/history',
+        title: 'Event log',
+        menu: { adminSettings: true },
+    },
+    {
+        path: '/admin/logins',
+        title: 'Login history',
+        menu: { adminSettings: true, mode: ['enterprise'] },
+    },
 ];
 
 export const getRoute = (path: string) =>