instances tests are mostly passing, issues with table resizing on the list w/ burnettk

spiffworkflow-frontend/cypress/e2e/process_groups.cy.js

@@ -32,7 +32,7 @@ describe('process-groups', () => {
 
     cy.contains('Delete Process Group').click();
     cy.contains('Are you sure');
-    cy.getBySel('modal-confirmation-dialog').get('.cds--btn--danger').click();
+    cy.getBySel('modal-confirmation-dialog').find('.cds--btn--danger').click();
     cy.url().should('include', `process-groups`);
     cy.contains(groupId).should('not.exist');
   });

spiffworkflow-frontend/cypress/e2e/process_instances.cy.js

@@ -48,7 +48,7 @@ const updateBpmnPythonScriptWithMonaco = (
     .focused() // change subject to currently focused element
     // .type('{ctrl}a') // had been doing it this way, but it turns out to be flaky relative to clear()
     .clear()
-    .type(pythonScript);
+    .type(pythonScript, { delay: 30 });
 
   cy.contains('Close').click();
   // wait for a little bit for the xml to get set before saving
@@ -111,8 +111,10 @@ describe('process-instances', () => {
   });
 
   it('can create a new instance and can modify with monaco text editor', () => {
-    const originalPythonScript = 'person = "Kevin"';
-    const newPythonScript = 'person = "Mike"';
+    // leave off the ending double quote since manco adds it
+    const originalPythonScript = 'person = "Kevin';
+    const newPythonScript = 'person = "Mike';
+
     const bpmnFile = 'process_model_one.bpmn';
 
     // Change bpmn
@@ -152,7 +154,7 @@ describe('process-instances', () => {
     cy.basicPaginationTest();
   });
 
-  it('can filter', () => {
+  it.only('can filter', () => {
     cy.getBySel('process-instance-list-link').click();
     cy.assertAtLeastOneItemInPaginatedResults();
 

spiffworkflow-frontend/cypress/support/commands.js

@@ -35,7 +35,7 @@ Cypress.Commands.add('navigateToHome', () => {
 });
 
 Cypress.Commands.add('navigateToAdmin', () => {
-  cy.getBySel('spiffworkflow-logo').click();
+  cy.visit('/admin');
 });
 
 Cypress.Commands.add('login', (selector, ...args) => {

spiffworkflow-frontend/src/components/NavigationBar.tsx

@@ -1,6 +1,14 @@
 import {
   Header,
+  HeaderContainer,
+  HeaderMenuButton,
+  SkipToContent,
   Theme,
+  HeaderMenu,
+  SideNav,
+  SideNavItem,
+  SideNavItems,
+  HeaderSideNavItems,
   HeaderName,
   HeaderNavigation,
   HeaderMenuItem,
@@ -77,35 +85,60 @@ export default function NavigationBar() {
     );
   };
 
-  if (activeKey) {
+  const headerMenuItems = () => {
     return (
-      <div className="spiffworkflow-header-container">
-        <Theme theme="g100">
-          <Header aria-label="Spiffworkflow">
-            <HeaderName href="/" prefix="">
+      <>
+        <HeaderMenuItem href="/" isCurrentPage={isActivePage('/')}>
+          Home
+        </HeaderMenuItem>
+        <HeaderMenuItem
+          href="/admin/process-groups"
+          isCurrentPage={isActivePage('/admin/process-groups')}
+          data-qa="header-nav-processes"
+        >
+          Processes
+        </HeaderMenuItem>
+        <HeaderMenuItem
+          href="/admin/process-instances"
+          isCurrentPage={isActivePage('/admin/process-instances')}
+        >
+          Process Instances
+        </HeaderMenuItem>
+      </>
+    );
+  };
+
+  if (activeKey) {
+    // TODO: apply theme g100 to the header
+    return (
+      <HeaderContainer
+        render={({ isSideNavExpanded, onClickSideNavExpand }: any) => (
+          <Header aria-label="IBM Platform Name">
+            <SkipToContent />
+            <HeaderMenuButton
+              aria-label="Open menu"
+              onClick={onClickSideNavExpand}
+              isActive={isSideNavExpanded}
+            />
+            <HeaderName href="/" prefix="" data-qa="spiffworkflow-logo">
               <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 aria-label="Spiffworkflow">
+              {headerMenuItems()}
             </HeaderNavigation>
+            <SideNav
+              aria-label="Side navigation"
+              expanded={isSideNavExpanded}
+              isPersistent={false}
+            >
+              <SideNavItems>
+                <HeaderSideNavItems>{headerMenuItems()}</HeaderSideNavItems>
+              </SideNavItems>
+            </SideNav>
             <HeaderGlobalBar>{loginAndLogoutAction()}</HeaderGlobalBar>
           </Header>
-        </Theme>
-      </div>
+        )}
+      />
     );
   }
   return null;

spiffworkflow-frontend/src/index.css

@@ -30,6 +30,10 @@ span.bjs-crumb {
   margin-bottom: 2em;
 }
 
+// forces the navigation items to be displayed at all viewport sizes
+.cds--header__nav {
+	display: block;
+}
 
 .active-task-highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
   fill: yellow !important;

spiffworkflow-frontend/src/index.scss

@@ -1,3 +1,5 @@
+// @use '@carbon/react/scss/themes';
+// @use '@carbon/react/scss/theme' with ($theme: themes.$g100);
 @use '@carbon/react';
 @use '@carbon/styles';
 // @include grid.flex-grid();

spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx

@@ -17,6 +17,11 @@ import {
   Grid,
   Column,
   MultiSelect,
+  TableHeader,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableCell,
   // @ts-ignore
 } from '@carbon/react';
 import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config';
@@ -373,55 +378,144 @@ export default function ProcessInstanceList() {
   };
 
   const buildTable = () => {
-    const rows = processInstances.map((row: any) => {
-      const formattedStartDate =
-        convertSecondsToFormattedDate(row.start_in_seconds) || '-';
-      const formattedEndDate =
-        convertSecondsToFormattedDate(row.end_in_seconds) || '-';
+    // const rows = processInstances.map((row: any) => {
+    //   const formattedStartDate =
+    //     convertSecondsToFormattedDate(row.start_in_seconds) || '-';
+    //   const formattedEndDate =
+    //     convertSecondsToFormattedDate(row.end_in_seconds) || '-';
+    //
+    //   return (
+    //     <tr key={row.id}>
+    //       <td>
+    //         <Link
+    //           data-qa="process-instance-show-link"
+    //           to={`/admin/process-models/${row.process_group_identifier}/${row.process_model_identifier}/process-instances/${row.id}`}
+    //         >
+    //           {row.id}
+    //         </Link>
+    //       </td>
+    //       <td>
+    //         <Link to={`/admin/process-groups/${row.process_group_identifier}`}>
+    //           {row.process_group_identifier}
+    //         </Link>
+    //       </td>
+    //       <td>
+    //         <Link
+    //           to={`/admin/process-models/${row.process_group_identifier}/${row.process_model_identifier}`}
+    //         >
+    //           {row.process_model_identifier}
+    //         </Link>
+    //       </td>
+    //       <td>{formattedStartDate}</td>
+    //       <td>{formattedEndDate}</td>
+    //       <td data-qa={`process-instance-status-${row.status}`}>
+    //         {row.status}
+    //       </td>
+    //     </tr>
+    //   );
+    // });
+    // return (
+    //   <Table size="lg">
+    //     <thead>
+    //       <tr>
+    //         <th>Process Instance Id</th>
+    //         <th>Process Group</th>
+    //         <th>Process Model</th>
+    //         <th>Start Time</th>
+    //         <th>End Time</th>
+    //         <th>Status</th>
+    //       </tr>
+    //     </thead>
+    //     <tbody>{rows}</tbody>
+    //   </Table>
+    // );
+    const rows = [
+      {
+        id: 'load-balancer-1',
+        name: 'Load Balancer 1',
+        rule: 'Round robin',
+        Status: 'Starting',
+        other: 'Test',
+        example: '22',
+      },
+      {
+        id: 'load-balancer-2',
+        name: 'Load Balancer 2',
+        rule: 'DNS delegation',
+        status: 'Active',
+        other: 'Test',
+        example: '22',
+      },
+      {
+        id: 'load-balancer-3',
+        name: 'Load Balancer 3',
+        rule: 'Round robin',
+        status: 'Disabled',
+        other: 'Test',
+        example: '22',
+      },
+      {
+        id: 'load-balancer-4',
+        name: 'Load Balancer 4',
+        rule: 'Round robin',
+        status: 'Disabled',
+        other: 'Test',
+        example: '22',
+      },
+      {
+        id: 'load-balancer-5',
+        name: 'Load Balancer 5',
+        rule: 'Round robin',
+        status: 'Disabled',
+        other: 'Test',
+        example: '22',
+      },
+      {
+        id: 'load-balancer-6',
+        name: 'Load Balancer 6',
+        rule: 'Round robin',
+        status: 'Disabled',
+        other: 'Test',
+        example: '22',
+      },
+      {
+        id: 'load-balancer-7',
+        name: 'Load Balancer 7',
+        rule: 'Round robin',
+        status: 'Disabled',
+        other: 'Test',
+        example: '22',
+      },
+    ];
+    const headers = ['Name', 'Rule', 'Status', 'Other', 'Example'];
 
-      return (
-        <tr key={row.id}>
-          <td>
-            <Link
-              data-qa="process-instance-show-link"
-              to={`/admin/process-models/${row.process_group_identifier}/${row.process_model_identifier}/process-instances/${row.id}`}
-            >
-              {row.id}
-            </Link>
-          </td>
-          <td>
-            <Link to={`/admin/process-groups/${row.process_group_identifier}`}>
-              {row.process_group_identifier}
-            </Link>
-          </td>
-          <td>
-            <Link
-              to={`/admin/process-models/${row.process_group_identifier}/${row.process_model_identifier}`}
-            >
-              {row.process_model_identifier}
-            </Link>
-          </td>
-          <td>{formattedStartDate}</td>
-          <td>{formattedEndDate}</td>
-          <td data-qa={`process-instance-status-${row.status}`}>
-            {row.status}
-          </td>
-        </tr>
-      );
-    });
     return (
-      <Table striped bordered>
-        <thead>
-          <tr>
-            <th>Process Instance Id</th>
-            <th>Process Group</th>
-            <th>Process Model</th>
-            <th>Start Time</th>
-            <th>End Time</th>
-            <th>Status</th>
-          </tr>
-        </thead>
-        <tbody>{rows}</tbody>
+      <Table size="lg" useZebraStyles={false} isSortable>
+        <TableHead>
+          <TableRow>
+            {headers.map((header) => (
+              <TableHeader
+                id={header}
+                key={header}
+                isSortable
+                sortDirection="ASC"
+              >
+                {header}
+              </TableHeader>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.id}>
+              {Object.keys(row)
+                .filter((key) => key !== 'id')
+                .map((key) => {
+                  return <TableCell key={key}>{(row as any)[key]}</TableCell>;
+                })}
+            </TableRow>
+          ))}
+        </TableBody>
       </Table>
     );
   };

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

@@ -283,7 +283,6 @@ export default function ProcessModelEditDiagram() {
     // we should update this to act like updating scripts
     // where we pass an event to bpmn-js
     setScriptModeling(modeling);
-
     setScriptText(script || '');
     setScriptType(scriptTypeString);
     setScriptEventBus(eventBus);
@@ -559,28 +558,25 @@ export default function ProcessModelEditDiagram() {
     if (scriptElement) {
       scriptName = (scriptElement as any).di.bpmnElement.name;
     }
+
     return (
-      <Modal size="xl" show={showScriptEditor} onHide={handleScriptEditorClose}>
-        <Modal.Header closeButton>
-          <Modal.Title>Editing Script: {scriptName}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <Editor
-            height={500}
-            width="auto"
-            options={generalEditorOptions()}
-            defaultLanguage="python"
-            defaultValue={scriptText}
-            onChange={handleEditorScriptChange}
-            onMount={handleEditorDidMount}
-          />
-          {scriptUnitTestEditorElement()}
-        </Modal.Body>
-        <Modal.Footer>
-          <Button variant="secondary" onClick={handleScriptEditorClose}>
-            Close
-          </Button>
-        </Modal.Footer>
+      <Modal
+        open={showScriptEditor}
+        modalHeading={`Editing Script: ${scriptName}`}
+        primaryButtonText="Close"
+        onRequestSubmit={handleScriptEditorClose}
+        size="lg"
+      >
+        <Editor
+          height={500}
+          width="auto"
+          options={generalEditorOptions()}
+          defaultLanguage="python"
+          value={scriptText}
+          onChange={handleEditorScriptChange}
+          onMount={handleEditorDidMount}
+        />
+        {scriptUnitTestEditorElement()}
       </Modal>
     );
   };