From 15035c5a4ad1e30b6e9f2f5479c5d033f0395ddb Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Mon, 31 Oct 2022 16:03:14 -0400
Subject: [PATCH] some more changes... navigation bar is broken due to header
 container w/ burnettk

---
 spiffworkflow-frontend/src/App.tsx            |  20 +-
 .../src/components/NavigationBar.tsx          | 204 +++++++++++++-----
 spiffworkflow-frontend/src/index.css          |   4 +-
 .../src/routes/ProcessModelEditDiagram.tsx    |   8 +-
 4 files changed, 161 insertions(+), 75 deletions(-)

diff --git a/spiffworkflow-frontend/src/App.tsx b/spiffworkflow-frontend/src/App.tsx
index 0684465e1..4a078c21e 100644
--- a/spiffworkflow-frontend/src/App.tsx
+++ b/spiffworkflow-frontend/src/App.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 // @ts-ignore
-// import { Container } from '@carbon/react';
+import { Content } from '@carbon/react';
 
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import ErrorContext from './contexts/ErrorContext';
@@ -46,14 +46,14 @@ export default function App() {
     );
   }
 
+  // <SubNavigation />
   return (
     <ErrorContext.Provider value={errorContextValueArray}>
-      <NavigationBar />
-      <div>
-        {errorTag}
-        <ErrorBoundary>
-          <BrowserRouter>
-            <SubNavigation />
+      <BrowserRouter>
+        <NavigationBar />
+        <Content>
+          {errorTag}
+          <ErrorBoundary>
             <main style={{ padding: '1rem 0' }}>
               <Routes>
                 <Route path="/" element={<HomePage />} />
@@ -69,9 +69,9 @@ export default function App() {
                 />
               </Routes>
             </main>
-          </BrowserRouter>
-        </ErrorBoundary>
-      </div>
+          </ErrorBoundary>
+        </Content>
+      </BrowserRouter>
     </ErrorContext.Provider>
   );
 }
diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx
index 2f70ff0c8..606a21184 100644
--- a/spiffworkflow-frontend/src/components/NavigationBar.tsx
+++ b/spiffworkflow-frontend/src/components/NavigationBar.tsx
@@ -1,72 +1,158 @@
-// @ts-ignore
-import { Button } from '@carbon/react';
-import { Navbar, Nav, Container } from 'react-bootstrap';
+import {
+  Header,
+  Theme,
+  HeaderName,
+  HeaderContainer,
+  HeaderNavigation,
+  HeaderMenuItem,
+  HeaderMenu,
+  // @ts-ignore
+} from '@carbon/react';
+import { useEffect, useState } from 'react';
+import { Navbar, Nav } from 'react-bootstrap';
+import { useLocation } from 'react-router-dom';
 // @ts-expect-error TS(2307) FIXME: Cannot find module '../logo.svg' or its correspond... Remove this comment to see the full error message
 import logo from '../logo.svg';
 import UserService from '../services/UserService';
 
 // for ref: https://react-bootstrap.github.io/components/navbar/
 export default function NavigationBar() {
-  const navElements = null;
+  // const navElements = null;
+  //
+  // const handleLogout = () => {
+  //   UserService.doLogout();
+  // };
+  //
+  // const handleLogin = () => {
+  //   UserService.doLogin();
+  // };
+  //
+  // const loginLink = () => {
+  //   if (!UserService.isLoggedIn()) {
+  //     return (
+  //       <Navbar.Collapse className="justify-content-end">
+  //         <Navbar.Text>
+  //           <Button variant="link" onClick={handleLogin}>
+  //             Login
+  //           </Button>
+  //         </Navbar.Text>
+  //       </Navbar.Collapse>
+  //     );
+  //   }
+  //   return null;
+  // };
+  //
+  // const logoutLink = () => {
+  //   if (UserService.isLoggedIn()) {
+  //     return (
+  //       <Navbar.Collapse className="justify-content-end">
+  //         <Navbar.Text>
+  //           Signed in as: <strong>{UserService.getUsername()}</strong>
+  //         </Navbar.Text>
+  //         <Navbar.Text>
+  //           <Button
+  //             variant="link"
+  //             onClick={handleLogout}
+  //             data-qa="logout-button"
+  //           >
+  //             Logout
+  //           </Button>
+  //         </Navbar.Text>
+  //       </Navbar.Collapse>
+  //     );
+  //   }
+  //   return null;
+  // };
 
-  const handleLogout = () => {
-    UserService.doLogout();
-  };
+  const location = useLocation();
+  const [activeKey, setActiveKey] = useState<string>('');
 
-  const handleLogin = () => {
-    UserService.doLogin();
-  };
-
-  const loginLink = () => {
-    if (!UserService.isLoggedIn()) {
-      return (
-        <Navbar.Collapse className="justify-content-end">
-          <Navbar.Text>
-            <Button variant="link" onClick={handleLogin}>
-              Login
-            </Button>
-          </Navbar.Text>
-        </Navbar.Collapse>
-      );
+  useEffect(() => {
+    let newActiveKey = '/admin/process-groups';
+    if (location.pathname.match(/^\/admin\/messages\b/)) {
+      newActiveKey = '/admin/messages';
+    } else if (location.pathname.match(/^\/admin\/process-instances\b/)) {
+      newActiveKey = '/admin/process-instances';
+    } else if (location.pathname.match(/^\/admin\/secrets\b/)) {
+      newActiveKey = '/admin/secrets';
+    } else if (location.pathname.match(/^\/admin\/authentications\b/)) {
+      newActiveKey = '/admin/authentications';
+    } else if (location.pathname === '/') {
+      newActiveKey = '/';
+    } else if (location.pathname.match(/^\/tasks\b/)) {
+      newActiveKey = '/';
     }
-    return null;
+    setActiveKey(newActiveKey);
+  }, [location]);
+
+  const isActivePage = (menuItemPath: string) => {
+    return activeKey === menuItemPath;
   };
 
-  const logoutLink = () => {
-    if (UserService.isLoggedIn()) {
-      return (
-        <Navbar.Collapse className="justify-content-end">
-          <Navbar.Text>
-            Signed in as: <strong>{UserService.getUsername()}</strong>
-          </Navbar.Text>
-          <Navbar.Text>
-            <Button
-              variant="link"
-              onClick={handleLogout}
-              data-qa="logout-button"
-            >
-              Logout
-            </Button>
-          </Navbar.Text>
-        </Navbar.Collapse>
-      );
-    }
-    return null;
-  };
+  //   return (
+  // <Theme theme="g100">
+  //     <Navbar bg="dark" expand="lg" variant="dark">
+  //       <Content>
+  //         <Navbar.Brand data-qa="spiffworkflow-logo" href="/admin">
+  //           <img src={logo} className="app-logo" alt="logo" />
+  //         </Navbar.Brand>
+  //         <Navbar.Toggle aria-controls="basic-navbar-nav" />
+  //         <Navbar.Collapse id="basic-navbar-nav">
+  //           <Nav className="me-auto">{navElements}</Nav>
+  //         </Navbar.Collapse>
+  //         {loginLink()}
+  //         {logoutLink()}
+  //       </Content>
+  //     </Navbar>
+  //     </Theme>
+  //   );
 
-  return (
-    <Navbar bg="dark" expand="lg" variant="dark">
-      <Container>
-        <Navbar.Brand data-qa="spiffworkflow-logo" href="/admin">
-          <img src={logo} className="app-logo" alt="logo" />
-        </Navbar.Brand>
-        <Navbar.Toggle aria-controls="basic-navbar-nav" />
-        <Navbar.Collapse id="basic-navbar-nav">
-          <Nav className="me-auto">{navElements}</Nav>
-        </Navbar.Collapse>
-        {loginLink()}
-        {logoutLink()}
-      </Container>
-    </Navbar>
-  );
+  // <Theme theme="g100">
+  //   <Header aria-label="IBM Platform Name">
+  //     <HeaderName href="#" prefix="IBM">
+  //       [Platform]
+  //     </HeaderName>
+  //     <HeaderNavigation aria-label="IBM [Platform]">
+  //       <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
+  //       <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
+  //       <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
+  //       <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
+  //         <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
+  //         <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
+  //         <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
+  //       </HeaderMenu>
+  //     </HeaderNavigation>
+  //   </Header>
+  // </Theme>
+  if (activeKey) {
+    return (
+      <HeaderContainer>
+        <Theme theme="g100">
+          <Header aria-label="Spiffworkflow">
+            <HeaderName href="/" prefix="">
+              <img src={logo} className="app-logo" alt="logo" />
+            </HeaderName>
+            <HeaderNavigation aria-label="Spifffff">
+              <HeaderMenuItem href="/" isCurrentPage={isActivePage('/')}>
+                Home
+              </HeaderMenuItem>
+              <HeaderMenuItem
+                href="/admin/process-groups"
+                isCurrentPage={isActivePage('/admin/process-groups')}
+              >
+                Processes
+              </HeaderMenuItem>
+              <HeaderMenuItem
+                href="/admin/process-instances"
+                isCurrentPage={isActivePage('/admin/process-instances')}
+              >
+                Process Instances
+              </HeaderMenuItem>
+            </HeaderNavigation>
+          </Header>
+        </Theme>
+      </HeaderContainer>
+    );
+  }
+  return null;
 }
diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css
index fd156c236..32a712d5a 100644
--- a/spiffworkflow-frontend/src/index.css
+++ b/spiffworkflow-frontend/src/index.css
@@ -20,8 +20,8 @@ span.bjs-crumb {
 }
 
 .app-logo {
-  height: 35%;
-  width: 35%;
+  height: 90%;
+  width: 90%;
   margin-top: 1em;
   margin-bottom: 1em;
 }
diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
index aa1eafc69..9ca0754ab 100644
--- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
@@ -1,8 +1,8 @@
 import { useContext, useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 // @ts-ignore
-import { Button, Modal, Stack } from '@carbon/react';
-import Container from 'react-bootstrap/Container';
+import { Button, Modal, Stack, Content } from '@carbon/react';
+// import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 
@@ -463,7 +463,7 @@ export default function ProcessModelEditDiagram() {
       }
       return (
         <main>
-          <Container>
+          <Content>
             <Row>
               <Col xs={8}>
                 <Button variant="link" disabled style={{ fontSize: '1.5em' }}>
@@ -504,7 +504,7 @@ export default function ProcessModelEditDiagram() {
               </Col>
               <Col xs={1}>{scriptUnitTestResultBoolElement}</Col>
             </Row>
-          </Container>
+          </Content>
           <Stack direction="horizontal" gap={3}>
             {unitTestFailureElement()}
           </Stack>