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,42 +337,57 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
   if (activeKey && ability) {
     return (
       <HeaderContainer
-        render={({ isSideNavExpanded, onClickSideNavExpand }: any) => (
+        render={({ isSideNavExpanded, onClickSideNavExpand }: any) => {
-          <Header aria-label="IBM Platform Name" className="cds--g100">
+          // define function to call onClickSideNavExpand if the side nav is not expanded
-            <SkipToContent />
+          // and the user clicks on a header menu item
-            <HeaderMenuButton
+          function closeSideNavMenuIfExpanded() {
-              data-qa="header-menu-expand-button"
+            if (isSideNavExpanded) {
-              aria-label="Open menu"
+              // this function that is yielded to us by carbon is more of a toggle than an expand.
-              onClick={onClickSideNavExpand}
+              // here we are using it to close the menu if it is open.
-              isActive={isSideNavExpanded}
+              onClickSideNavExpand();
-            />
+            }
-            <HeaderName
+          }
-              element={Link}
+
-              to="/"
+          return (
-              prefix=""
+            <Header aria-label="IBM Platform Name" className="cds--g100">
-              data-qa="spiffworkflow-logo"
+              <SkipToContent />
-            >
+              <HeaderMenuButton
-              <img src={logo} className="app-logo" alt="logo" />
+                data-qa="header-menu-expand-button"
-            </HeaderName>
+                aria-label="Open menu"
-            <HeaderNavigation
+                onClick={onClickSideNavExpand}
-              data-qa="main-nav-header"
+                isActive={isSideNavExpanded}
-              aria-label="Spiffworkflow"
+              />
-            >
+              <HeaderName
-              {headerMenuItems()}
+                element={Link}
-            </HeaderNavigation>
+                to="/"
-            <SideNav
+                onClick={closeSideNavMenuIfExpanded}
-              data-qa="side-nav-items"
+                prefix=""
-              aria-label="Side navigation"
+                data-qa="spiffworkflow-logo"
-              expanded={isSideNavExpanded}
+              >
-              isPersistent={false}
+                <img src={logo} className="app-logo" alt="logo" />
-            >
+              </HeaderName>
-              <SideNavItems>
+              <HeaderNavigation
-                <HeaderSideNavItems>{headerMenuItems()}</HeaderSideNavItems>
+                data-qa="main-nav-header"
-              </SideNavItems>
+                aria-label="Spiffworkflow"
-            </SideNav>
+              >
-            <HeaderGlobalBar>{logoutAction()}</HeaderGlobalBar>
+                {headerMenuItems()}
-          </Header>
+              </HeaderNavigation>
-        )}
+              <SideNav
+                data-qa="side-nav-items"
+                aria-label="Side navigation"
+                expanded={isSideNavExpanded}
+                isPersistent={false}
+              >
+                <SideNavItems>
+                  <HeaderSideNavItems>
+                    {headerMenuItems(closeSideNavMenuIfExpanded)}
+                  </HeaderSideNavItems>
+                </SideNavItems>
+              </SideNav>
+              <HeaderGlobalBar>{logoutAction()}</HeaderGlobalBar>
+            </Header>
+          );
+        }}
       />
     );
   }