close the side nav when you select an item to navigate to (#1255)

* close the side nav when you select an item to navigate to

* clear errors when changing pages

---------

Co-authored-by: burnettk <burnettk@users.noreply.github.com>

spiffworkflow-frontend/src/ContainerForExtensions.tsx

@@ -1,5 +1,5 @@
 import { Content } from '@carbon/react';
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route, useLocation } from 'react-router-dom';
 import React, { useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
@@ -19,6 +19,7 @@ import BaseRoutes from './routes/BaseRoutes';
 import BackendIsDown from './routes/BackendIsDown';
 import Login from './routes/Login';
 import NavigationBar from './components/NavigationBar';
+import useAPIError from './hooks/UseApiError';
 
 export default function ContainerForExtensions() {
   const [backendIsUp, setBackendIsUp] = useState<boolean | null>(null);
@@ -38,6 +39,19 @@ export default function ContainerForExtensions() {
     permissionRequestData
   );
 
+  const { removeError } = useAPIError();
+
+  const location = useLocation();
+
+  // never carry an error message across to a different path
+  useEffect(() => {
+    removeError();
+    // if we include the removeError function to the dependency array of this useEffect, it causes
+    // an infinite loop where the page with the error adds the error,
+    // then this runs and it removes the error, etc. it is ok not to include it here, i think, because it never changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]);
+
   // eslint-disable-next-line sonarjs/cognitive-complexity
   useEffect(() => {
     const processExtensionResult = (processModels: ProcessModel[]) => {

spiffworkflow-frontend/src/components/NavigationBar.tsx

@@ -174,7 +174,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
     return null;
   };
 
-  const configurationElement = () => {
+  const configurationElement = (closeSideNavMenuIfExpanded?: Function) => {
     return (
       <Can
         I="GET"
@@ -197,6 +197,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
                       <HeaderMenuItem
                         element={Link}
                         to="/configuration"
+                        onClick={closeSideNavMenuIfExpanded}
                         isCurrentPage={isActivePage('/configuration')}
                       >
                         Configuration
@@ -233,7 +234,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
     );
   };
 
-  const headerMenuItems = () => {
+  const headerMenuItems = (closeSideNavMenuIfExpanded?: Function) => {
     if (!UserService.isLoggedIn()) {
       return null;
     }
@@ -243,6 +244,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
           <HeaderMenuItem<LinkProps>
             element={Link}
             to="/"
+            onClick={closeSideNavMenuIfExpanded}
             isCurrentPage={isActivePage('/')}
           >
             <div>Home</div>
@@ -254,6 +256,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
             <HeaderMenuItem
               element={Link}
               to={processGroupPath}
+              onClick={closeSideNavMenuIfExpanded}
               isCurrentPage={isActivePage(processGroupPath)}
               data-qa="header-nav-processes"
             >
@@ -270,6 +273,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
             <HeaderMenuItem
               element={Link}
               to="/process-instances"
+              onClick={closeSideNavMenuIfExpanded}
               isCurrentPage={isActivePage('/process-instances')}
             >
               Process Instances
@@ -281,6 +285,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
             <HeaderMenuItem
               element={Link}
               to="/messages"
+              onClick={closeSideNavMenuIfExpanded}
               isCurrentPage={isActivePage('/messages')}
             >
               Messages
@@ -292,13 +297,14 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
             <HeaderMenuItem
               element={Link}
               to="/data-stores"
+              onClick={closeSideNavMenuIfExpanded}
               isCurrentPage={isActivePage('/data-stores')}
             >
               Data Stores
             </HeaderMenuItem>
           </SpiffTooltip>
         </Can>
-        {configurationElement()}
+        {configurationElement(closeSideNavMenuIfExpanded)}
         <ExtensionUxElementForDisplay
           displayLocation="header_menu_item"
           elementCallback={extensionHeaderMenuItemElement}
@@ -331,7 +337,18 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
   if (activeKey && ability) {
     return (
       <HeaderContainer
-        render={({ isSideNavExpanded, onClickSideNavExpand }: any) => (
+        render={({ isSideNavExpanded, onClickSideNavExpand }: any) => {
+          // define function to call onClickSideNavExpand if the side nav is not expanded
+          // and the user clicks on a header menu item
+          function closeSideNavMenuIfExpanded() {
+            if (isSideNavExpanded) {
+              // this function that is yielded to us by carbon is more of a toggle than an expand.
+              // here we are using it to close the menu if it is open.
+              onClickSideNavExpand();
+            }
+          }
+
+          return (
             <Header aria-label="IBM Platform Name" className="cds--g100">
               <SkipToContent />
               <HeaderMenuButton
@@ -343,6 +360,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
               <HeaderName
                 element={Link}
                 to="/"
+                onClick={closeSideNavMenuIfExpanded}
                 prefix=""
                 data-qa="spiffworkflow-logo"
               >
@@ -361,12 +379,15 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
                 isPersistent={false}
               >
                 <SideNavItems>
-                <HeaderSideNavItems>{headerMenuItems()}</HeaderSideNavItems>
+                  <HeaderSideNavItems>
+                    {headerMenuItems(closeSideNavMenuIfExpanded)}
+                  </HeaderSideNavItems>
                 </SideNavItems>
               </SideNav>
               <HeaderGlobalBar>{logoutAction()}</HeaderGlobalBar>
             </Header>
-        )}
+          );
+        }}
       />
     );
   }