sartography/spiff-arena
1
0
Fork 0
mirror of https://github.com/sartography/spiff-arena.git synced 2025-01-12 02:24:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

revert ux to clickable table rows (#1172)

Browse Source 
Co-authored-by: burnettk <burnettk@users.noreply.github.com>
This commit is contained in:
Kevin Burnett 2024-03-06 04:26:53 -08:00 committed by GitHub
parent c77d5a81c4
commit afc4de4939
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
View File

@ -11,7 +11,7 @@ import {
} from '@carbon/react'; } from '@carbon/react';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import 'react-datepicker/dist/react-datepicker.css'; import 'react-datepicker/dist/react-datepicker.css';
import { Link, useNavigate, useSearchParams } from 'react-router-dom'; import { useNavigate, useSearchParams } from 'react-router-dom';
import { import {
getLastMilestoneFromProcessInstance, getLastMilestoneFromProcessInstance,
@ -260,15 +260,17 @@ export default function ProcessInstanceListTable({
processInstance: ProcessInstance, processInstance: ProcessInstance,
id: number id: number
) => { ) => {
const modifiedModelId = modifyProcessIdentifierForPathParam( return <span data-qa="paginated-entity-id">{id}</span>;
processInstance.process_model_identifier // when we get rid of clickable table rows, something like this will be better
); // const modifiedModelId = modifyProcessIdentifierForPathParam(
const piLink = `${processInstanceShowPathPrefix}/${modifiedModelId}/${processInstance.id}`; // processInstance.process_model_identifier
return ( // );
<span data-qa="paginated-entity-id"> // const piLink = `${processInstanceShowPathPrefix}/${modifiedModelId}/${processInstance.id}`;
<Link to={piLink}>{id}</Link> // return (
</span> // <span data-qa="paginated-entity-id">
); // <Link to={piLink}>{id}</Link>
// </span>
// );
}; };
const formatProcessModelIdentifier = ( const formatProcessModelIdentifier = (
processInstance: ProcessInstance, processInstance: ProcessInstance,
@ -498,6 +500,15 @@ export default function ProcessInstanceListTable({
} }
} }
const rowStyle = { cursor: 'pointer' };
const modifiedModelId = modifyProcessIdentifierForPathParam(
processInstance.process_model_identifier
);
const navigateToProcessInstance = () => {
navigate(
`${processInstanceShowPathPrefix}/${modifiedModelId}/${processInstance.id}`
);
};
let variantFromMetadata = 'all'; let variantFromMetadata = 'all';
if (reportMetadataFromProcessInstances) { if (reportMetadataFromProcessInstances) {
reportMetadataFromProcessInstances.filter_by.forEach((filter: any) => { reportMetadataFromProcessInstances.filter_by.forEach((filter: any) => {
@ -513,7 +524,10 @@ export default function ProcessInstanceListTable({
return ( return (
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
<tr <tr
style={rowStyle}
key={processInstance.id} key={processInstance.id}
onClick={navigateToProcessInstance}
onKeyDown={navigateToProcessInstance}
className={`process-instance-list-row-variant-${variantFromMetadata}`} className={`process-instance-list-row-variant-${variantFromMetadata}`}
> >
{currentRow} {currentRow}