From aa2c21efb4dc53aaac08dc4314e760f39145888d Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 10 Mar 2023 10:36:42 -0500 Subject: [PATCH 1/2] When a row is clicked in a Process Instance list take the end user to that process instance UNLESS they click on the column containing the process name, in which case take them to that process model. Belugh. --- .../components/ProcessInstanceListTable.tsx | 85 ++++++++++++------- 1 file changed, 54 insertions(+), 31 deletions(-) diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx index 76a044405..d4af460d5 100644 --- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx +++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx @@ -1,10 +1,5 @@ import { useEffect, useMemo, useRef, useState } from 'react'; -import { - Link, - useNavigate, - useParams, - useSearchParams, -} from 'react-router-dom'; +import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; // @ts-ignore import { Filter, Close, AddAlt } from '@carbon/icons-react'; @@ -66,7 +61,6 @@ import ProcessModelSearch from './ProcessModelSearch'; import ProcessInstanceReportSearch from './ProcessInstanceReportSearch'; import ProcessInstanceListDeleteReport from './ProcessInstanceListDeleteReport'; import ProcessInstanceListSaveAsReport from './ProcessInstanceListSaveAsReport'; -import { FormatProcessModelDisplayName } from './MiniComponents'; import { Notification } from './Notification'; import useAPIError from '../hooks/UseApiError'; @@ -1203,28 +1197,13 @@ export default function ProcessInstanceListTable({ }); const formatProcessInstanceId = (row: ProcessInstance, id: number) => { - const modifiedProcessModelId: String = - modifyProcessIdentifierForPathParam(row.process_model_identifier); - return ( - - {id} - - ); + return {id}; }; const formatProcessModelIdentifier = (_row: any, identifier: any) => { - return ( - - {identifier} - - ); + return {identifier}; + }; + const formatProcessModelDisplayName = (_row: any, identifier: any) => { + return {identifier}; }; const formatSecondsForDisplay = (_row: any, seconds: any) => { @@ -1237,7 +1216,7 @@ export default function ProcessInstanceListTable({ const reportColumnFormatters: Record = { id: formatProcessInstanceId, process_model_identifier: formatProcessModelIdentifier, - process_model_display_name: FormatProcessModelDisplayName, + process_model_display_name: formatProcessModelDisplayName, start_in_seconds: formatSecondsForDisplay, end_in_seconds: formatSecondsForDisplay, }; @@ -1245,21 +1224,65 @@ export default function ProcessInstanceListTable({ const formatter = reportColumnFormatters[column.accessor] ?? defaultFormatter; const value = row[column.accessor]; + const modifiedModelId = modifyProcessIdentifierForPathParam( + row.process_model_identifier + ); + const navigateToProcessInstance = () => { + navigate( + `${processInstanceShowPathPrefix}/${modifiedModelId}/${row.id}` + ); + }; + const navigateToProcessModel = () => { + navigate(`/admin/process-models/${modifiedModelId}`); + }; + if (column.accessor === 'status') { return ( - + // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions + {formatter(row, value)} ); } - return {formatter(row, value)}; + console.log(column.accessor); + if (column.accessor === 'process_model_display_name') { + const pmStyle = { background: 'rgba(0, 0, 0, .02)' }; + return ( + // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions + + {formatter(row, value)} + + ); + } + return ( + // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions + + {formatter(row, value)} + + ); }; const rows = processInstances.map((row: any) => { const currentRow = reportColumns().map((column: any) => { return formattedColumn(row, column); }); - return {currentRow}; + const rowStyle = { cursor: 'pointer' }; + return ( + + {currentRow} + + ); }); return ( From 1de98877114e80d77a7fc4ffbc1884a88b30cfc8 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 10 Mar 2023 12:56:37 -0500 Subject: [PATCH 2/2] Fixing Cypress Tests --- spiffworkflow-frontend/cypress.config.js | 2 +- spiffworkflow-frontend/cypress/e2e/process_instances.cy.js | 2 +- spiffworkflow-frontend/cypress/e2e/process_models.cy.js | 2 +- spiffworkflow-frontend/cypress/e2e/tasks.cy.js | 6 +++--- .../src/components/ProcessInstanceListTable.tsx | 1 + 5 files changed, 7 insertions(+), 6 deletions(-) diff --git a/spiffworkflow-frontend/cypress.config.js b/spiffworkflow-frontend/cypress.config.js index f7f7b48c7..5dc0a4f35 100644 --- a/spiffworkflow-frontend/cypress.config.js +++ b/spiffworkflow-frontend/cypress.config.js @@ -32,7 +32,7 @@ if (process.env.SPIFFWORKFLOW_FRONTEND_URL) { const cypressConfig = { projectId: 'crax1q', - + defaultCommandTimeout: 10000, videoUploadOnPasses: false, chromeWebSecurity: false, e2e: { diff --git a/spiffworkflow-frontend/cypress/e2e/process_instances.cy.js b/spiffworkflow-frontend/cypress/e2e/process_instances.cy.js index 846d41627..64e0418a3 100644 --- a/spiffworkflow-frontend/cypress/e2e/process_instances.cy.js +++ b/spiffworkflow-frontend/cypress/e2e/process_instances.cy.js @@ -158,7 +158,7 @@ describe('process-instances', () => { // make sure we have some process instances cy.runPrimaryBpmnFile(); cy.getBySel('process-instance-list-link').click(); - cy.getBySel('process-instance-show-link').first().click(); + cy.getBySel('process-instance-show-link-id').first().click(); cy.getBySel('process-instance-log-list-link').click(); cy.getBySel('process-instance-log-detailed').click(); cy.contains('process_model_one'); diff --git a/spiffworkflow-frontend/cypress/e2e/process_models.cy.js b/spiffworkflow-frontend/cypress/e2e/process_models.cy.js index 0e9250463..9e7bd55d7 100644 --- a/spiffworkflow-frontend/cypress/e2e/process_models.cy.js +++ b/spiffworkflow-frontend/cypress/e2e/process_models.cy.js @@ -168,7 +168,7 @@ describe('process-models', () => { .click(); cy.runPrimaryBpmnFile(); - cy.getBySel('process-instance-show-link').click(); + cy.getBySel('process-instance-show-link-id').click(); cy.getBySel('process-instance-delete').click(); cy.contains('Are you sure'); cy.getBySel('process-instance-delete-modal-confirmation-dialog') diff --git a/spiffworkflow-frontend/cypress/e2e/tasks.cy.js b/spiffworkflow-frontend/cypress/e2e/tasks.cy.js index 922c42091..06e59d81c 100644 --- a/spiffworkflow-frontend/cypress/e2e/tasks.cy.js +++ b/spiffworkflow-frontend/cypress/e2e/tasks.cy.js @@ -74,7 +74,7 @@ describe('tasks', () => { cy.assertAtLeastOneItemInPaginatedResults(); // This should get the first one which should be the one we just completed - cy.getBySel('process-instance-show-link').first().click(); + cy.getBySel('process-instance-show-link-id').first().click(); cy.contains('Process Instance Id: '); cy.get(`g[data-element-id=form3]`).click(); @@ -106,7 +106,7 @@ describe('tasks', () => { cy.assertAtLeastOneItemInPaginatedResults(); // This should get the first one which should be the one we just completed - cy.getBySel('process-instance-show-link').first().click(); + cy.getBySel('process-instance-show-link-id').first().click(); cy.contains('Process Instance Id: '); cy.contains('Status: complete'); }); @@ -120,6 +120,6 @@ describe('tasks', () => { kickOffModelWithForm(); cy.navigateToHome(); - cy.basicPaginationTest('process-instance-show-link'); + cy.basicPaginationTest('process-instance-show-link-id'); }); }); diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx index d4af460d5..8c8f818f5 100644 --- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx +++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx @@ -1265,6 +1265,7 @@ export default function ProcessInstanceListTable({ return ( // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions