Update admin menu (#4389)

## About the changes
- add divider
- reorder items
- add flag for project
https://linear.app/unleash/project/[high][s][none]-improved-menu-aefaca264034

Closes https://linear.app/unleash/issue/1-1101/improved-menu-enterprise

frontend/src/component/menu/Header/Header.tsx

@@ -123,6 +123,7 @@ const Header: VFC = () => {
     const { uiConfig, isOss, isPro, isEnterprise } = useUiConfig();
     const smallScreen = useMediaQuery(theme.breakpoints.down('md'));
     const [openDrawer, setOpenDrawer] = useState(false);
+    const showApiAccessInConfigure = !uiConfig?.flags?.frontendNavigationUpdate;
 
     const toggleDrawer = () => setOpenDrawer(prev => !prev);
     const onAdminClose = () => setAdminRef(null);
@@ -141,23 +142,31 @@ const Header: VFC = () => {
 
     const filteredMainRoutes = {
         mainNavRoutes: getCondensedRoutes(routes.mainNavRoutes)
-            .concat([
+            .concat(
-                {
+                showApiAccessInConfigure
-                    path: '/admin/api',
+                    ? [
-                    title: 'API access',
+                          {
-                    menu: {},
+                              path: '/admin/api',
-                },
+                              title: 'API access',
-            ])
+                              menu: {},
+                          },
+                      ]
+                    : []
+            )
             .filter(filterByConfig(uiConfig))
             .map(mapRouteLink),
         mobileRoutes: getCondensedRoutes(routes.mobileRoutes)
-            .concat([
+            .concat(
-                {
+                showApiAccessInConfigure
-                    path: '/admin/api',
+                    ? [
-                    title: 'API access',
+                          {
-                    menu: {},
+                              path: '/admin/api',
-                },
+                              title: 'API access',
-            ])
+                              menu: {},
+                          },
+                      ]
+                    : []
+            )
             .filter(filterByConfig(uiConfig))
             .map(mapRouteLink),
         adminRoutes: adminMenuRoutes

frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx

@@ -1,4 +1,8 @@
+import { Divider } from '@mui/material';
 import { Menu, MenuItem, styled } from '@mui/material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 
 interface INavigationMenuProps {
@@ -38,6 +42,9 @@ export const NavigationMenu = ({
     anchorEl,
     style,
 }: INavigationMenuProps) => {
+    const { uiConfig } = useUiConfig();
+    const showDividers = uiConfig?.flags?.frontendNavigationUpdate;
+
     return (
         <Menu
             id={id}
@@ -46,10 +53,17 @@ export const NavigationMenu = ({
             open={Boolean(anchorEl)}
             style={style}
         >
-            {options.map(option => {
+            {options.map((option, i) => (
-                return (
+                <Fragment key={option.path}>
+                    <ConditionallyRender
+                        condition={Boolean(
+                            showDividers &&
+                                options[i - 1]?.group &&
+                                options[i - 1]?.group !== option.group
+                        )}
+                        show={<Divider variant="middle" />}
+                    />
                     <MenuItem
-                        key={option.path}
                         component={StyledLink}
                         to={option.path}
                         onClick={handleClose}
@@ -57,8 +71,8 @@ export const NavigationMenu = ({
                         <StyledSpan />
                         {option.title}
                     </MenuItem>
-                );
+                </Fragment>
-            })}
+            ))}
         </Menu>
     );
 };

frontend/src/component/menu/routes.ts

@@ -457,69 +457,89 @@ export const adminMenuRoutes: INavigationMenuItem[] = [
         path: '/admin/users',
         title: 'Users',
         menu: { adminSettings: true },
+        group: 'users',
     },
     {
         path: '/admin/service-accounts',
         title: 'Service accounts',
         menu: { adminSettings: true, mode: ['enterprise'] },
+        group: 'users',
     },
     {
         path: '/admin/groups',
         title: 'Groups',
         menu: { adminSettings: true, mode: ['enterprise'] },
         flag: UG,
+        group: 'users',
     },
     {
         path: '/admin/roles/*',
         title: 'Roles',
         menu: { adminSettings: true, mode: ['enterprise'] },
+        group: 'users',
+    },
+    {
+        path: '/admin/api',
+        title: 'API access',
+        flag: 'frontendNavigationUpdate',
+        menu: { adminSettings: true },
+        group: 'access',
     },
     {
         path: '/admin/cors',
         title: 'CORS origins',
         flag: 'embedProxyFrontend',
         menu: { adminSettings: true },
+        group: 'access',
     },
     {
         path: '/admin/auth',
         title: 'Single sign-on',
         menu: { adminSettings: true },
-    },
+        group: 'access',
-    {
-        path: '/admin/instance',
-        title: 'Instance stats',
-        menu: { adminSettings: true },
     },
     {
         path: '/admin/network/*',
         title: 'Network',
         menu: { adminSettings: true, mode: ['pro', 'enterprise'] },
         configFlag: 'networkViewEnabled',
+        group: 'instance',
     },
     {
         path: '/admin/maintenance',
         title: 'Maintenance',
         menu: { adminSettings: true },
+        group: 'instance',
     },
     {
-        path: '/admin/admin-invoices',
+        path: '/admin/instance',
-        title: 'Billing & invoices',
+        title: 'Instance stats',
-        menu: { adminSettings: true, mode: ['pro'] },
+        menu: { adminSettings: true },
+        group: 'instance',
     },
     {
         path: '/admin/instance-privacy',
         title: 'Instance privacy',
         menu: { adminSettings: true },
+        group: 'instance',
     },
     {
-        path: '/history',
+        path: '/admin/admin-invoices',
-        title: 'Event log',
+        title: 'Billing & invoices',
-        menu: { adminSettings: true },
+        menu: { adminSettings: true, mode: ['pro'] },
+        group: 'instance',
     },
     {
         path: '/admin/logins',
         title: 'Login history',
         menu: { adminSettings: true, mode: ['enterprise'] },
+        group: 'log',
+    },
+    {
+        path: '/history',
+        title: 'Event log',
+        menu: { adminSettings: true },
+        group: 'log',
     },
 ];
 

frontend/src/interfaces/route.ts

@@ -22,6 +22,7 @@ export interface INavigationMenuItem {
     menu: IRouteMenu;
     flag?: keyof IFlags;
     configFlag?: keyof IUiConfig;
+    group?: string;
 }
 
 interface IRouteMenu {

frontend/src/interfaces/uiConfig.ts

@@ -54,6 +54,7 @@ export interface IFlags {
     strategyVariant?: boolean;
     newProjectLayout?: boolean;
     configurableFeatureTypeLifetimes?: boolean;
+    frontendNavigationUpdate?: boolean;
 }
 
 export interface IVersionInfo {

src/lib/__snapshots__/create-config.test.ts.snap

@@ -79,6 +79,7 @@ exports[`should create default config 1`] = `
       "emitPotentiallyStaleEvents": false,
       "featuresExportImport": true,
       "filterInvalidClientMetrics": false,
+      "frontendNavigationUpdate": false,
       "googleAuthEnabled": false,
       "maintenanceMode": false,
       "messageBanner": {
@@ -113,6 +114,7 @@ exports[`should create default config 1`] = `
       "emitPotentiallyStaleEvents": false,
       "featuresExportImport": true,
       "filterInvalidClientMetrics": false,
+      "frontendNavigationUpdate": false,
       "googleAuthEnabled": false,
       "maintenanceMode": false,
       "messageBanner": {

src/lib/types/experimental.ts

@@ -26,7 +26,8 @@ export type IFlagKey =
     | 'slackAppAddon'
     | 'emitPotentiallyStaleEvents'
     | 'configurableFeatureTypeLifetimes'
-    | 'filterInvalidClientMetrics';
+    | 'filterInvalidClientMetrics'
+    | 'frontendNavigationUpdate';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -115,7 +116,6 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_EMIT_POTENTIALLY_STALE_EVENTS,
         false,
     ),
-
     configurableFeatureTypeLifetimes: parseEnvVarBoolean(
         process.env.UNLEASH_EXPERIMENTAL_CONFIGURABLE_FEATURE_TYPE_LIFETIMES,
         false,
@@ -124,6 +124,10 @@ const flags: IFlags = {
         process.env.FILTER_INVALID_CLIENT_METRICS,
         false,
     ),
+    frontendNavigationUpdate: parseEnvVarBoolean(
+        process.env.UNLEASH_NAVIGATION_UPDATE,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {

src/server-dev.ts

@@ -42,6 +42,7 @@ process.nextTick(async () => {
                         emitPotentiallyStaleEvents: true,
                         slackAppAddon: true,
                         configurableFeatureTypeLifetimes: true,
+                        frontendNavigationUpdate: true,
                     },
                 },
                 authentication: {