BED-4810: Vertical Nav (#1106)

* chore: added useApiVersion hook

* wip: added main nav

* feature: added main nav structure

* chore: added react router dom

* feat: added main nav, subnav and show nav bar hook components

* feat: added subnav and assets

* fix: styling cleanup

* fix: admin pages spacing, and menus overlap spacing

* chore: added AppIcon Component to bh-shared-ui and then imported into CE

* chore: added test for subnav

* fix: added top value in position for subnav

* chore: removed unused header and leftnav components

* chore: fixed typo in subnav tests

* wip: structure for main nav tests

* chore: reorganized route constants into route folder

* chore: removed unused conditional

* chore: cleanup, fixed alt text and removed data test ids

* wip: added 2 tests and test ids for test queries

* chore: corrected data-testid typo and added correct banner

* fix: added margin top to logo banner for better spacing

* feat: added powered by in nav

* fix: fixed styling for powered by alignment

* chore: added types

* chore: added missing license text and some typing cleanup

* chore: added tests to main nav

* chore: matched text to design, added role to element for testing & a11y

* chore: added vars for nav and subnav width as well as zindex

* fix: changed from tier management to group management

* fix: styling changes to hover text in dark mode, underline for action

* fix: typo in dark mode bg class

* fix: subnav styling for color in hover text and no decoration on title

* chore: class cleanup, fixed color transition

* fix: styling on active route vs non active in list item

* fix: have list item handle color changes

* chore: removed unneeded option in include

* fix: updated support page to not have language explicitly in url

* fix: reverted date of license to original

* chore: added cn util to conditional classes

* chore: added cn util to manage conditional classes

* fix: removed nav bar from home route

* fix: fixed failing test

* fix: fixed failing test from class change in implementation

* chore: expand collapse nav with tw hover and grouping (#1116)

* chore: expand collapse nav with tw hover and grouping

* test: MainNav classes use group-hover selector to display

---------

Co-authored-by: Ben Waples <[email protected]>

---------

Co-authored-by: Ulises Rangel <[email protected]>
Co-authored-by: Ben Waples <[email protected]>

cmd/ui/src/App.tsx

@@ -20,35 +20,46 @@ import makeStyles from '@mui/styles/makeStyles';
 import {
     AppNotifications,
     GenericErrorBoundaryFallback,
+    MainNav,
     NotificationsProvider,
     components,
     darkPalette,
     lightPalette,
     setRootClass,
     typography,
     useFeatureFlags,
+    useShowNavBar,
 } from 'bh-shared-ui';
 import { createBrowserHistory } from 'history';
 import React, { useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useQueryClient } from 'react-query';
-import { unstable_HistoryRouter as BrowserRouter, useLocation } from 'react-router-dom';
-import Header from 'src/components/Header';
+import { unstable_HistoryRouter as BrowserRouter } from 'react-router-dom';
 import { fullyAuthenticatedSelector, initialize } from 'src/ducks/auth/authSlice';
-import { ROUTE_EXPIRED_PASSWORD, ROUTE_LOGIN, ROUTE_USER_DISABLED } from 'src/ducks/global/routes';
+import { ROUTES } from 'src/routes';
 import { useAppDispatch, useAppSelector } from 'src/store';
 import { initializeBHEClient } from 'src/utils';
 import Content from 'src/views/Content';
+import {
+    MainNavPrimaryListData,
+    useMainNavLogoData,
+    useMainNavSecondaryListData,
+} from './components/MainNav/MainNavData';
 import Notifier from './components/Notifier';
 import { setDarkMode } from './ducks/global/actions';
 
 export const Inner: React.FC = () => {
     const dispatch = useAppDispatch();
     const authState = useAppSelector((state) => state.auth);
     const queryClient = useQueryClient();
-    const location = useLocation();
     const fullyAuthenticated = useAppSelector(fullyAuthenticatedSelector);
     const featureFlagsRes = useFeatureFlags({ retry: false, enabled: !!authState.isInitialized && fullyAuthenticated });
+    const mainNavData = {
+        logo: useMainNavLogoData(),
+        primaryList: MainNavPrimaryListData,
+        secondaryList: useMainNavSecondaryListData(),
+    };
+    const showNavBar = useShowNavBar(ROUTES);
 
     const darkMode = useAppSelector((state) => state.global.view.darkMode);
 
@@ -168,15 +179,9 @@ export const Inner: React.FC = () => {
         return null;
     }
 
-    const showHeader = !['', '/', ROUTE_LOGIN, ROUTE_EXPIRED_PASSWORD, ROUTE_USER_DISABLED].includes(location.pathname);
-
     return (
         <Box className={`${classes.applicationContainer}`} id='app-root'>
-            {showHeader && (
-                <Box className={classes.applicationHeader}>
-                    <Header />
-                </Box>
-            )}
+            {showNavBar && <MainNav mainNavData={mainNavData} />}
             <Box className={classes.applicationContent}>
                 <Content />
             </Box>

cmd/ui/src/components/AuthenticatedRoute/AuthenticatedRoute.test.tsx

@@ -15,7 +15,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { createMemoryHistory } from 'history';
-import { ROUTE_EXPIRED_PASSWORD, ROUTE_HOME, ROUTE_LOGIN } from 'src/ducks/global/routes';
+import { ROUTE_EXPIRED_PASSWORD, ROUTE_HOME, ROUTE_LOGIN } from 'src/routes/constants';
 import { render, screen } from 'src/test-utils';
 import AuthenticatedRoute from './AuthenticatedRoute';
 

cmd/ui/src/components/AuthenticatedRoute/AuthenticatedRoute.tsx

@@ -16,7 +16,7 @@
 
 import { Navigate, useLocation } from 'react-router-dom';
 import { authExpiredSelector } from 'src/ducks/auth/authSlice';
-import { ROUTE_EXPIRED_PASSWORD, ROUTE_LOGIN } from 'src/ducks/global/routes';
+import { ROUTE_EXPIRED_PASSWORD, ROUTE_LOGIN } from 'src/routes/constants';
 import { useAppSelector } from 'src/store';
 
 const AuthenticatedRoute: React.FC<{ children: any }> = ({ children }): React.ReactElement => {