From 148559ee6986579fa9d64b10313e6249c2a410b0 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 76a04440..d4af460d 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 cd6a7f58060d07d9dceaed5865a532db53563f90 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 f7f7b48c..5dc0a4f3 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 846d4162..64e0418a 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 0e925046..9e7bd55d 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 922c4209..06e59d81 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 d4af460d..8c8f818f 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