diff --git a/spiffworkflow-frontend/src/ContainerForExtensions.tsx b/spiffworkflow-frontend/src/ContainerForExtensions.tsx index 6c6c2e249..a5a51fc6b 100644 --- a/spiffworkflow-frontend/src/ContainerForExtensions.tsx +++ b/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(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[]) => { diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx index 53644a4d0..52e238b69 100644 --- a/spiffworkflow-frontend/src/components/NavigationBar.tsx +++ b/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 ( 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) { element={Link} to="/" + onClick={closeSideNavMenuIfExpanded} isCurrentPage={isActivePage('/')} >
Home
@@ -254,6 +256,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) { @@ -270,6 +273,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) { Process Instances @@ -281,6 +285,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) { Messages @@ -292,13 +297,14 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) { Data Stores
- {configurationElement()} + {configurationElement(closeSideNavMenuIfExpanded)} ( -
- - - - logo - - - {headerMenuItems()} - - - - {headerMenuItems()} - - - {logoutAction()} -
- )} + 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 ( +
+ + + + logo + + + {headerMenuItems()} + + + + + {headerMenuItems(closeSideNavMenuIfExpanded)} + + + + {logoutAction()} +
+ ); + }} /> ); }