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

2022-11-04 15:07:40 -04:00 · 2022-11-04 15:07:40 -04:00 · bac7dbcac1
parent 08bfbccffb
commit bac7dbcac1
8 changed files with 229 additions and 98 deletions
--- a/spiffworkflow-frontend/cypress/e2e/process_groups.cy.js
+++ b/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');
  });
--- a/spiffworkflow-frontend/cypress/e2e/process_instances.cy.js
+++ b/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();

--- a/spiffworkflow-frontend/cypress/support/commands.js
+++ b/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) => {
--- a/spiffworkflow-frontend/src/components/NavigationBar.tsx
+++ b/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,21 +85,16 @@ export default function NavigationBar() {
    );
  };

-  if (activeKey) {
+  const headerMenuItems = () => {
    return (
-      <div className="spiffworkflow-header-container">
-        <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')}
+          data-qa="header-nav-processes"
        >
          Processes
        </HeaderMenuItem>
@ -101,11 +104,41 @@ export default function NavigationBar() {
        >
          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="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;
--- a/spiffworkflow-frontend/src/index.css
+++ b/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;
--- a/spiffworkflow-frontend/src/index.scss
+++ b/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();
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx
+++ b/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}`}
+      <Table size="lg" useZebraStyles={false} isSortable>
+        <TableHead>
+          <TableRow>
+            {headers.map((header) => (
+              <TableHeader
+                id={header}
+                key={header}
+                isSortable
+                sortDirection="ASC"
              >
-              {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>
+                {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>
    );
  };
--- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
+++ b/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>
+      <Modal
+        open={showScriptEditor}
+        modalHeading={`Editing Script: ${scriptName}`}
+        primaryButtonText="Close"
+        onRequestSubmit={handleScriptEditorClose}
+        size="lg"
+      >
        <Editor
          height={500}
          width="auto"
          options={generalEditorOptions()}
          defaultLanguage="python"
-            defaultValue={scriptText}
+          value={scriptText}
          onChange={handleEditorScriptChange}
          onMount={handleEditorDidMount}
        />
        {scriptUnitTestEditorElement()}
-        </Modal.Body>
-        <Modal.Footer>
-          <Button variant="secondary" onClick={handleScriptEditorClose}>
-            Close
-          </Button>
-        </Modal.Footer>
      </Modal>
    );
  };