moved usage of ProcessBreadcrumb to use hotCrumbs except for report pages

2022-11-10 11:37:41 -05:00 · 2022-11-10 11:37:41 -05:00 · dfff56e460
parent 7565197e39
commit dfff56e460
7 changed files with 88 additions and 52 deletions
--- a/spiffworkflow-frontend/src/components/ProcessBreadcrumb.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessBreadcrumb.tsx
@ -32,7 +32,7 @@ const explodeCrumb = (crumb: HotCrumbItem) => {
    if (lastPathItem !== undefined) {
      paths.push(lastPathItem);
    }
-    // process_models to process-models
+    // process_model to process-models
    const lastUrl = `/admin/${endingUrlType
      .replace('_', '-')
      .replace(/s*$/, 's')}/${paths.join(':')}`;
--- a/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx
+++ b/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx
@ -7,6 +7,8 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import {
  convertSecondsToFormattedDate,
  getPageInfoFromSearchParams,
+  modifyProcessModelPath,
+  unModifyProcessModelPath,
 } from '../helpers';
 import HttpService from '../services/HttpService';

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

@ -33,7 +34,6 @@ export default function ProcessInstanceLogList() {
  }, [searchParams, params]);

  const buildTable = () => {
-    // return null;
    const rows = processInstanceLogs.map((row) => {
      const rowToUse = row as any;
      return (
@ -56,7 +56,7 @@ export default function ProcessInstanceLogList() {
      );
    });
    return (
-      <Table striped bordered>
+      <Table size="lg">
        <thead>
          <tr>
            <th>Bpmn Process Identifier</th>
@ -74,13 +74,24 @@ export default function ProcessInstanceLogList() {
  };

  if (pagination) {
+    console.log('params.process_model_id', params.process_model_id);
    const { page, perPage } = getPageInfoFromSearchParams(searchParams);
    return (
      <main>
        <ProcessBreadcrumb
-          processModelId={params.process_model_id}
-          processGroupId={params.process_group_id}
-          linkProcessModel
+          hotCrumbs={[
+            ['Process Groups', '/admin'],
+            [
+              `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
          page={page}
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
@ -1,8 +1,15 @@
 import { useContext, useEffect, useState } from 'react';
 import Editor from '@monaco-editor/react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
-// @ts-ignore
-import { Button, Modal, Stack } from '@carbon/react';
+import {
+  Grid,
+  Column,
+  Button,
+  Modal,
+  Stack,
+  UnorderedList,
+  // @ts-ignore
+} from '@carbon/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import ReactDiagramEditor from '../components/ReactDiagramEditor';
@ -129,7 +136,6 @@ export default function ProcessInstanceShow() {
    distance: number
  ) => {
    return (
-      <li>
      <Link
        reloadDocument
        data-qa="process-instance-step-link"
@ -141,7 +147,6 @@ export default function ProcessInstanceShow() {
      >
        {label}
      </Link>
-      </li>
    );
  };

@ -150,7 +155,7 @@ export default function ProcessInstanceShow() {
      return null;
    }

-    return spiffStepLink(processInstanceToUse, 'Previous Step', -1);
+    return spiffStepLink(processInstanceToUse, '<<', -1);
  };

  const nextStepLink = (processInstanceToUse: any) => {
@ -158,7 +163,7 @@ export default function ProcessInstanceShow() {
      return null;
    }

-    return spiffStepLink(processInstanceToUse, 'Next Step', 1);
+    return spiffStepLink(processInstanceToUse, '>>', 1);
  };

  const getInfoTag = (processInstanceToUse: any) => {
@ -177,7 +182,7 @@ export default function ProcessInstanceShow() {
    }

    return (
-      <ul>
+      <UnorderedList>
        <li>
          Started:{' '}
          {convertSecondsToFormattedDate(processInstanceToUse.start_in_seconds)}
@ -200,13 +205,7 @@ export default function ProcessInstanceShow() {
            Messages
          </Link>
        </li>
-        <li>
-          Step {currentSpiffStep(processInstanceToUse)} of{' '}
-          {processInstanceToUse.spiff_step}
-        </li>
-        {previousStepLink(processInstanceToUse)}
-        {nextStepLink(processInstanceToUse)}
-      </ul>
+      </UnorderedList>
    );
  };

@ -433,6 +432,21 @@ export default function ProcessInstanceShow() {
    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) {
    const processInstanceToUse = processInstance as any;
    const taskIds = getTaskIds();
@ -449,22 +463,28 @@ export default function ProcessInstanceShow() {
              `Process Model: ${processModelId}`,
              `process_model:${processModelId}:link`,
            ],
-            [`Process Instance: ${params.process_instance_id}`],
+            [`${processInstanceToUse.id}`],
          ]}
        />
+        <h1>Process Instance Id: {processInstanceToUse.id}</h1>
        <Stack orientation="horizontal" gap={3}>
-          <h2>Process Instance Id: {processInstanceToUse.id}</h2>
          <ButtonWithConfirmation
            description="Delete Process Instance?"
            onConfirmation={deleteProcessInstance}
            buttonLabel="Delete"
+            confirmButtonLabel="Delete"
          />
          {terminateButton(processInstanceToUse)}
          {suspendButton(processInstanceToUse)}
          {resumeButton(processInstanceToUse)}
        </Stack>
+        <br />
+        <br />
        {getInfoTag(processInstanceToUse)}
+        <br />
        {taskDataDisplayArea()}
+        {stepsElement(processInstanceToUse)}
+        <br />
        <ReactDiagramEditor
          processModelId={processModelId || ''}
          diagramXML={processInstanceToUse.bpmn_xml_file_contents || ''}
--- a/spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx
@ -30,7 +30,6 @@ export default function ProcessModelEdit() {
            ],
          ]}
        />
-        <ProcessBreadcrumb processGroupId={params.process_group_id} />
        <h2>Edit Process Model: {(processModel as any).id}</h2>
        <ProcessModelForm
          mode="edit"
--- a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
@ -448,7 +448,7 @@ export default function ProcessModelShow() {
    }
    return (
      <Grid fullWidth>
-        <Column md={4} lg={8}>
+        <Column md={5} lg={9} sm={3}>
          <Accordion align="end">
            <AccordionItem
              data-qa="files-accordion"
--- a/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx
+++ b/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx
@ -153,9 +153,6 @@ export default function ReactFormEditor() {
    return (
      <main>
        <ProcessBreadcrumb
-          processGroupId={params.process_group_id}
-          processModelId={params.process_model_id}
-          linkProcessModel
          hotCrumbs={[
            ['Process Groups', '/admin'],
            [