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>
This commit is contained in:
Kevin Burnett 2024-03-22 21:47:54 +00:00 committed by GitHub
parent ab9e823dcf
commit 086234c901
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 75 additions and 40 deletions

View File

@ -1,5 +1,5 @@
import { Content } from '@carbon/react'; 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 React, { useEffect, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary'; import { ErrorBoundary } from 'react-error-boundary';
@ -19,6 +19,7 @@ import BaseRoutes from './routes/BaseRoutes';
import BackendIsDown from './routes/BackendIsDown'; import BackendIsDown from './routes/BackendIsDown';
import Login from './routes/Login'; import Login from './routes/Login';
import NavigationBar from './components/NavigationBar'; import NavigationBar from './components/NavigationBar';
import useAPIError from './hooks/UseApiError';
export default function ContainerForExtensions() { export default function ContainerForExtensions() {
const [backendIsUp, setBackendIsUp] = useState<boolean | null>(null); const [backendIsUp, setBackendIsUp] = useState<boolean | null>(null);
@ -38,6 +39,19 @@ export default function ContainerForExtensions() {
permissionRequestData 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 // eslint-disable-next-line sonarjs/cognitive-complexity
useEffect(() => { useEffect(() => {
const processExtensionResult = (processModels: ProcessModel[]) => { const processExtensionResult = (processModels: ProcessModel[]) => {

View File

@ -174,7 +174,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
return null; return null;
}; };
const configurationElement = () => { const configurationElement = (closeSideNavMenuIfExpanded?: Function) => {
return ( return (
<Can <Can
I="GET" I="GET"
@ -197,6 +197,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
<HeaderMenuItem <HeaderMenuItem
element={Link} element={Link}
to="/configuration" to="/configuration"
onClick={closeSideNavMenuIfExpanded}
isCurrentPage={isActivePage('/configuration')} isCurrentPage={isActivePage('/configuration')}
> >
Configuration Configuration
@ -233,7 +234,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
); );
}; };
const headerMenuItems = () => { const headerMenuItems = (closeSideNavMenuIfExpanded?: Function) => {
if (!UserService.isLoggedIn()) { if (!UserService.isLoggedIn()) {
return null; return null;
} }
@ -243,6 +244,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
<HeaderMenuItem<LinkProps> <HeaderMenuItem<LinkProps>
element={Link} element={Link}
to="/" to="/"
onClick={closeSideNavMenuIfExpanded}
isCurrentPage={isActivePage('/')} isCurrentPage={isActivePage('/')}
> >
<div>Home</div> <div>Home</div>
@ -254,6 +256,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
<HeaderMenuItem <HeaderMenuItem
element={Link} element={Link}
to={processGroupPath} to={processGroupPath}
onClick={closeSideNavMenuIfExpanded}
isCurrentPage={isActivePage(processGroupPath)} isCurrentPage={isActivePage(processGroupPath)}
data-qa="header-nav-processes" data-qa="header-nav-processes"
> >
@ -270,6 +273,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
<HeaderMenuItem <HeaderMenuItem
element={Link} element={Link}
to="/process-instances" to="/process-instances"
onClick={closeSideNavMenuIfExpanded}
isCurrentPage={isActivePage('/process-instances')} isCurrentPage={isActivePage('/process-instances')}
> >
Process Instances Process Instances
@ -281,6 +285,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
<HeaderMenuItem <HeaderMenuItem
element={Link} element={Link}
to="/messages" to="/messages"
onClick={closeSideNavMenuIfExpanded}
isCurrentPage={isActivePage('/messages')} isCurrentPage={isActivePage('/messages')}
> >
Messages Messages
@ -292,13 +297,14 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
<HeaderMenuItem <HeaderMenuItem
element={Link} element={Link}
to="/data-stores" to="/data-stores"
onClick={closeSideNavMenuIfExpanded}
isCurrentPage={isActivePage('/data-stores')} isCurrentPage={isActivePage('/data-stores')}
> >
Data Stores Data Stores
</HeaderMenuItem> </HeaderMenuItem>
</SpiffTooltip> </SpiffTooltip>
</Can> </Can>
{configurationElement()} {configurationElement(closeSideNavMenuIfExpanded)}
<ExtensionUxElementForDisplay <ExtensionUxElementForDisplay
displayLocation="header_menu_item" displayLocation="header_menu_item"
elementCallback={extensionHeaderMenuItemElement} elementCallback={extensionHeaderMenuItemElement}
@ -331,7 +337,18 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
if (activeKey && ability) { if (activeKey && ability) {
return ( return (
<HeaderContainer <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"> <Header aria-label="IBM Platform Name" className="cds--g100">
<SkipToContent /> <SkipToContent />
<HeaderMenuButton <HeaderMenuButton
@ -343,6 +360,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
<HeaderName <HeaderName
element={Link} element={Link}
to="/" to="/"
onClick={closeSideNavMenuIfExpanded}
prefix="" prefix=""
data-qa="spiffworkflow-logo" data-qa="spiffworkflow-logo"
> >
@ -361,12 +379,15 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
isPersistent={false} isPersistent={false}
> >
<SideNavItems> <SideNavItems>
<HeaderSideNavItems>{headerMenuItems()}</HeaderSideNavItems> <HeaderSideNavItems>
{headerMenuItems(closeSideNavMenuIfExpanded)}
</HeaderSideNavItems>
</SideNavItems> </SideNavItems>
</SideNav> </SideNav>
<HeaderGlobalBar>{logoutAction()}</HeaderGlobalBar> <HeaderGlobalBar>{logoutAction()}</HeaderGlobalBar>
</Header> </Header>
)} );
}}
/> />
); );
} }