From bac7dbcac1b6b1751cd076e00109407ee6b18368 Mon Sep 17 00:00:00 2001 From: jasquat Date: Fri, 4 Nov 2022 15:07:40 -0400 Subject: [PATCH] instances tests are mostly passing, issues with table resizing on the list w/ burnettk --- .../cypress/e2e/process_groups.cy.js | 2 +- .../cypress/e2e/process_instances.cy.js | 10 +- .../cypress/support/commands.js | 2 +- .../src/components/NavigationBar.tsx | 79 +++++--- spiffworkflow-frontend/src/index.css | 4 + spiffworkflow-frontend/src/index.scss | 2 + .../src/routes/ProcessInstanceList.tsx | 188 +++++++++++++----- .../src/routes/ProcessModelEditDiagram.tsx | 40 ++-- 8 files changed, 229 insertions(+), 98 deletions(-) diff --git a/spiffworkflow-frontend/cypress/e2e/process_groups.cy.js b/spiffworkflow-frontend/cypress/e2e/process_groups.cy.js index 4860a68b..9e974084 100644 --- 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'); }); diff --git a/spiffworkflow-frontend/cypress/e2e/process_instances.cy.js b/spiffworkflow-frontend/cypress/e2e/process_instances.cy.js index d5383d5a..a2fcb266 100644 --- 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(); diff --git a/spiffworkflow-frontend/cypress/support/commands.js b/spiffworkflow-frontend/cypress/support/commands.js index e6d801d8..3a1a0ac4 100644 --- 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) => { diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx index 8dd0ed6b..4dd81f9a 100644 --- 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,35 +85,60 @@ export default function NavigationBar() { ); }; - if (activeKey) { + const headerMenuItems = () => { return ( -
- -
- + <> + + Home + + + Processes + + + Process Instances + + + ); + }; + + if (activeKey) { + // TODO: apply theme g100 to the header + return ( + ( +
+ + + logo - - - Home - - - Processes - - - Process Instances - + + {headerMenuItems()} + + + {headerMenuItems()} + + {loginAndLogoutAction()}
- -
+ )} + /> ); } return null; diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css index c51398c4..67494b82 100644 --- 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; diff --git a/spiffworkflow-frontend/src/index.scss b/spiffworkflow-frontend/src/index.scss index c9671651..b4c90da1 100644 --- 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(); diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx index 10ac2c0b..84ce676f 100644 --- 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 ( + // + // + // + // {row.id} + // + // + // + // + // {row.process_group_identifier} + // + // + // + // + // {row.process_model_identifier} + // + // + // {formattedStartDate} + // {formattedEndDate} + // + // {row.status} + // + // + // ); + // }); + // return ( + // + // + // + // + // + // + // + // + // + // + // + // {rows} + //
Process Instance IdProcess GroupProcess ModelStart TimeEnd TimeStatus
+ // ); + 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 ( - - - - {row.id} - - - - - {row.process_group_identifier} - - - - - {row.process_model_identifier} - - - {formattedStartDate} - {formattedEndDate} - - {row.status} - - - ); - }); return ( - - - - - - - - - - - - {rows} +
Process Instance IdProcess GroupProcess ModelStart TimeEnd TimeStatus
+ + + {headers.map((header) => ( + + {header} + + ))} + + + + {rows.map((row) => ( + + {Object.keys(row) + .filter((key) => key !== 'id') + .map((key) => { + return {(row as any)[key]}; + })} + + ))} +
); }; diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx index f6fb211f..8776df97 100644 --- 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 ( - - - Editing Script: {scriptName} - - - - {scriptUnitTestEditorElement()} - - - - + + + {scriptUnitTestEditorElement()} ); };