status-im/spiff-arena
2
0
Fork 0
mirror of https://github.com/status-im/spiff-arena.git synced 2025-01-16 13:15:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

moved usage of ProcessBreadcrumb to use hotCrumbs except for report pages

Browse Source
This commit is contained in:
jasquat 2022-11-10 11:37:41 -05:00
parent 7565197e39
commit dfff56e460
7 changed files with 88 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spiffworkflow-frontend/src/components/ProcessBreadcrumb.tsx
View File

@ -32,7 +32,7 @@ const explodeCrumb = (crumb: HotCrumbItem) => {
if (lastPathItem !== undefined) { if (lastPathItem !== undefined) {
paths.push(lastPathItem); paths.push(lastPathItem);
} }
// process_models to process-models // process_model to process-models
const lastUrl = `/admin/${endingUrlType const lastUrl = `/admin/${endingUrlType
.replace('_', '-') .replace('_', '-')
.replace(/s*$/, 's')}/${paths.join(':')}`; .replace(/s*$/, 's')}/${paths.join(':')}`;

37
spiffworkflow-frontend/src/routes/MessageInstanceList.tsx
View File

@ -7,6 +7,8 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import { import {
convertSecondsToFormattedDate, convertSecondsToFormattedDate,
getPageInfoFromSearchParams, getPageInfoFromSearchParams,
modifyProcessModelPath,
unModifyProcessModelPath,
} from '../helpers'; } from '../helpers';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
@ -44,15 +46,9 @@ export default function MessageInstanceList() {
<td> <td>
<Link <Link
data-qa="process-model-show-link" data-qa="process-model-show-link"
to={`/admin/process-groups/${rowToUse.process_group_identifier}`} to={`/admin/process-models/${modifyProcessModelPath(
> rowToUse.process_model_identifier
{rowToUse.process_group_identifier} )}`}
</Link>
</td>
<td>
<Link
data-qa="process-model-show-link"
to={`/admin/process-models/${rowToUse.process_group_identifier}/${rowToUse.process_model_identifier}`}
> >
{rowToUse.process_model_identifier} {rowToUse.process_model_identifier}
</Link> </Link>
@ -60,7 +56,9 @@ export default function MessageInstanceList() {
<td> <td>
<Link <Link
data-qa="process-instance-show-link" data-qa="process-instance-show-link"
to={`/admin/process-models/${rowToUse.process_group_identifier}/${rowToUse.process_model_identifier}/process-instances/${rowToUse.process_instance_id}`} to={`/admin/process-models/${modifyProcessModelPath(
rowToUse.process_model_identifier
)}/process-instances/${rowToUse.process_instance_id}`}
> >
{rowToUse.process_instance_id} {rowToUse.process_instance_id}
</Link> </Link>
@ -80,7 +78,6 @@ export default function MessageInstanceList() {
<thead> <thead>
<tr> <tr>
<th>Instance Id</th> <th>Instance Id</th>
<th>Process Group</th>
<th>Process Model</th> <th>Process Model</th>
<th>Process Instance</th> <th>Process Instance</th>
<th>Message Model</th> <th>Message Model</th>
@ -107,9 +104,21 @@ export default function MessageInstanceList() {
)}&process_instance_id=${searchParams.get('process_instance_id')}`; )}&process_instance_id=${searchParams.get('process_instance_id')}`;
breadcrumbElement = ( breadcrumbElement = (
<ProcessBreadcrumb <ProcessBreadcrumb
processModelId={searchParams.get('process_model_id') as any} hotCrumbs={[
processGroupId={searchParams.get('process_group_id') as any} ['Process Groups', '/admin'],
linkProcessModel [
`Process Model: ${params.process_model_id}`,
`process_model:${unModifyProcessModelPath(
searchParams.get('process_model_id') || ''
)}:link`,
],
[
`${searchParams.get('process_instance_id')}`,
`/admin/process-models/${searchParams.get(
'process_model_id'
)}/process-instances/${searchParams.get('process_instance_id')}`,
],
]}
/> />
); );
} }

21
spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx
View File

@ -8,6 +8,7 @@ import {
getPageInfoFromSearchParams, getPageInfoFromSearchParams,
convertSecondsToFormattedDate, convertSecondsToFormattedDate,
modifyProcessModelPath, modifyProcessModelPath,
unModifyProcessModelPath,
} from '../helpers'; } from '../helpers';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
@ -33,7 +34,6 @@ export default function ProcessInstanceLogList() {
}, [searchParams, params]); }, [searchParams, params]);
const buildTable = () => { const buildTable = () => {
// return null;
const rows = processInstanceLogs.map((row) => { const rows = processInstanceLogs.map((row) => {
const rowToUse = row as any; const rowToUse = row as any;
return ( return (
@ -56,7 +56,7 @@ export default function ProcessInstanceLogList() {
); );
}); });
return ( return (
<Table striped bordered> <Table size="lg">
<thead> <thead>
<tr> <tr>
<th>Bpmn Process Identifier</th> <th>Bpmn Process Identifier</th>
@ -74,13 +74,24 @@ export default function ProcessInstanceLogList() {
}; };
if (pagination) { if (pagination) {
console.log('params.process_model_id', params.process_model_id);
const { page, perPage } = getPageInfoFromSearchParams(searchParams); const { page, perPage } = getPageInfoFromSearchParams(searchParams);
return ( return (
<main> <main>
<ProcessBreadcrumb <ProcessBreadcrumb
processModelId={params.process_model_id} hotCrumbs={[
processGroupId={params.process_group_id} ['Process Groups', '/admin'],
linkProcessModel [
`Process Model: ${params.process_model_id}`,
`process_model:${unModifyProcessModelPath(
params.process_model_id || ''
)}:link`,
],
[
`${params.process_instance_id}`,
`/admin/process-models/${params.process_model_id}/process-instances/${params.process_instance_id}`,
],
]}
/> />
<PaginationForTable <PaginationForTable
page={page} page={page}

74
spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
View File

@ -1,8 +1,15 @@
import { useContext, useEffect, useState } from 'react'; import { useContext, useEffect, useState } from 'react';
import Editor from '@monaco-editor/react'; import Editor from '@monaco-editor/react';
import { useParams, useNavigate, Link } from 'react-router-dom'; import { useParams, useNavigate, Link } from 'react-router-dom';
// @ts-ignore import {
import { Button, Modal, Stack } from '@carbon/react'; Grid,
Column,
Button,
Modal,
Stack,
UnorderedList,
// @ts-ignore
} from '@carbon/react';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
import ReactDiagramEditor from '../components/ReactDiagramEditor'; import ReactDiagramEditor from '../components/ReactDiagramEditor';
@ -129,19 +136,17 @@ export default function ProcessInstanceShow() {
distance: number distance: number
) => { ) => {
return ( return (
<li> <Link
<Link reloadDocument
reloadDocument data-qa="process-instance-step-link"
data-qa="process-instance-step-link" to={`/admin/process-models/${
to={`/admin/process-models/${ params.process_model_id
params.process_model_id }/process-instances/${params.process_instance_id}/${
}/process-instances/${params.process_instance_id}/${ currentSpiffStep(processInstanceToUse) + distance
currentSpiffStep(processInstanceToUse) + distance }`}
}`} >
> {label}
{label} </Link>
</Link>
</li>
); );
}; };
@ -150,7 +155,7 @@ export default function ProcessInstanceShow() {
return null; return null;
} }
return spiffStepLink(processInstanceToUse, 'Previous Step', -1); return spiffStepLink(processInstanceToUse, '<<', -1);
}; };
const nextStepLink = (processInstanceToUse: any) => { const nextStepLink = (processInstanceToUse: any) => {
@ -158,7 +163,7 @@ export default function ProcessInstanceShow() {
return null; return null;
} }
return spiffStepLink(processInstanceToUse, 'Next Step', 1); return spiffStepLink(processInstanceToUse, '>>', 1);
}; };
const getInfoTag = (processInstanceToUse: any) => { const getInfoTag = (processInstanceToUse: any) => {
@ -177,7 +182,7 @@ export default function ProcessInstanceShow() {
} }
return ( return (
<ul> <UnorderedList>
<li> <li>
Started:{' '} Started:{' '}
{convertSecondsToFormattedDate(processInstanceToUse.start_in_seconds)} {convertSecondsToFormattedDate(processInstanceToUse.start_in_seconds)}
@ -200,13 +205,7 @@ export default function ProcessInstanceShow() {
Messages Messages
</Link> </Link>
</li> </li>
<li> </UnorderedList>
Step {currentSpiffStep(processInstanceToUse)} of{' '}
{processInstanceToUse.spiff_step}
</li>
{previousStepLink(processInstanceToUse)}
{nextStepLink(processInstanceToUse)}
</ul>
); );
}; };
@ -433,6 +432,21 @@ export default function ProcessInstanceShow() {
return null; return null;
}; };
const stepsElement = (processInstanceToUse: any) => {
return (
<Grid fullWidth>
<Column sm={3} md={3} lg={3}>
<Stack orientation="horizontal" gap={3}>
{previousStepLink(processInstanceToUse)}
Step {currentSpiffStep(processInstanceToUse)} of{' '}
{processInstanceToUse.spiff_step}
{nextStepLink(processInstanceToUse)}
</Stack>
</Column>
</Grid>
);
};
if (processInstance && tasks) { if (processInstance && tasks) {
const processInstanceToUse = processInstance as any; const processInstanceToUse = processInstance as any;
const taskIds = getTaskIds(); const taskIds = getTaskIds();
@ -449,22 +463,28 @@ export default function ProcessInstanceShow() {
`Process Model: ${processModelId}`, `Process Model: ${processModelId}`,
`process_model:${processModelId}:link`, `process_model:${processModelId}:link`,
], ],
[`Process Instance: ${params.process_instance_id}`], [`${processInstanceToUse.id}`],
]} ]}
/> />
<h1>Process Instance Id: {processInstanceToUse.id}</h1>
<Stack orientation="horizontal" gap={3}> <Stack orientation="horizontal" gap={3}>
<h2>Process Instance Id: {processInstanceToUse.id}</h2>
<ButtonWithConfirmation <ButtonWithConfirmation
description="Delete Process Instance?" description="Delete Process Instance?"
onConfirmation={deleteProcessInstance} onConfirmation={deleteProcessInstance}
buttonLabel="Delete" buttonLabel="Delete"
confirmButtonLabel="Delete"
/> />
{terminateButton(processInstanceToUse)} {terminateButton(processInstanceToUse)}
{suspendButton(processInstanceToUse)} {suspendButton(processInstanceToUse)}
{resumeButton(processInstanceToUse)} {resumeButton(processInstanceToUse)}
</Stack> </Stack>
<br />
<br />
{getInfoTag(processInstanceToUse)} {getInfoTag(processInstanceToUse)}
<br />
{taskDataDisplayArea()} {taskDataDisplayArea()}
{stepsElement(processInstanceToUse)}
<br />
<ReactDiagramEditor <ReactDiagramEditor
processModelId={processModelId || ''} processModelId={processModelId || ''}
diagramXML={processInstanceToUse.bpmn_xml_file_contents || ''} diagramXML={processInstanceToUse.bpmn_xml_file_contents || ''}

1
spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx
View File

@ -30,7 +30,6 @@ export default function ProcessModelEdit() {
], ],
]} ]}
/> />
<ProcessBreadcrumb processGroupId={params.process_group_id} />
<h2>Edit Process Model: {(processModel as any).id}</h2> <h2>Edit Process Model: {(processModel as any).id}</h2>
<ProcessModelForm <ProcessModelForm
mode="edit" mode="edit"

2
spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
View File

@ -448,7 +448,7 @@ export default function ProcessModelShow() {
} }
return ( return (
<Grid fullWidth> <Grid fullWidth>
<Column md={4} lg={8}> <Column md={5} lg={9} sm={3}>
<Accordion align="end"> <Accordion align="end">
<AccordionItem <AccordionItem
data-qa="files-accordion" data-qa="files-accordion"

3
spiffworkflow-frontend/src/routes/ReactFormEditor.tsx
View File

@ -153,9 +153,6 @@ export default function ReactFormEditor() {
return ( return (
<main> <main>
<ProcessBreadcrumb <ProcessBreadcrumb
processGroupId={params.process_group_id}
processModelId={params.process_model_id}
linkProcessModel
hotCrumbs={[ hotCrumbs={[
['Process Groups', '/admin'], ['Process Groups', '/admin'],
[ [