updated breadcrumbs to work with new process models ids w/ burnettk cullerton

spiffworkflow-frontend/cypress/e2e/process_instances.cy.js

@@ -75,7 +75,7 @@ describe('process-instances', () => {
     cy.logout();
   });
 
-  it('can create a new instance and can modify', () => {
+  it.only('can create a new instance and can modify', () => {
     const originalDmnOutputForKevin = 'Very wonderful';
     const newDmnOutputForKevin = 'The new wonderful';
     const dmnOutputForDan = 'pretty wonderful';

spiffworkflow-frontend/src/components/FileInput.tsx

@@ -28,7 +28,9 @@ export default class FileInput extends React.Component<Props> {
 
   handleSubmit(event: any) {
     event.preventDefault();
-    const modifiedProcessModelId = modifyProcessModelPath(`${this.processGroupId}/${this.processModelId}`);
+    const modifiedProcessModelId = modifyProcessModelPath(
+      `${this.processGroupId}/${this.processModelId}`
+    );
     const url = `/process-models/${modifiedProcessModelId}/files`;
     const formData = new FormData();
     formData.append('file', this.fileInput.current.files[0]);

spiffworkflow-frontend/src/components/ProcessBreadcrumb.tsx

@@ -1,5 +1,6 @@
 // @ts-ignore
 import { Breadcrumb, BreadcrumbItem } from '@carbon/react';
+import { splitProcessModelId } from '../helpers';
 import { HotCrumbItem } from '../interfaces';
 
 type OwnProps = {
@@ -9,6 +10,39 @@ type OwnProps = {
   hotCrumbs?: HotCrumbItem[];
 };
 
+const explodeCrumb = (crumb: HotCrumbItem) => {
+  const url: string = crumb[1] || '';
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_unused, processModelId, link] = url.split(':');
+  const processModelIdSegments = splitProcessModelId(processModelId);
+  const paths: string[] = [];
+  const lastPathItem = processModelIdSegments.pop();
+  const breadcrumbItems = processModelIdSegments.map(
+    (processModelIdSegment: string) => {
+      paths.push(processModelIdSegment);
+      const fullUrl = `/admin/process-groups/${paths.join(':')}`;
+      return (
+        <BreadcrumbItem key={processModelIdSegment} href={fullUrl}>
+          {processModelIdSegment}
+        </BreadcrumbItem>
+      );
+    }
+  );
+  if (link === 'link') {
+    const lastUrl = `/admin/process-models/${paths.join(':')}:${lastPathItem}`;
+    breadcrumbItems.push(
+      <BreadcrumbItem key={lastPathItem} href={lastUrl}>
+        {lastPathItem}
+      </BreadcrumbItem>
+    );
+  } else {
+    breadcrumbItems.push(
+      <BreadcrumbItem isCurrentPage>{lastPathItem}</BreadcrumbItem>
+    );
+  }
+  return breadcrumbItems;
+};
+
 export default function ProcessBreadcrumb({
   processModelId,
   processGroupId,
@@ -18,28 +52,19 @@ export default function ProcessBreadcrumb({
   let processGroupBreadcrumb = null;
   let processModelBreadcrumb = null;
   if (hotCrumbs) {
-    const lastItem = hotCrumbs.pop();
-    if (lastItem === undefined) {
-      return null;
-    }
-    const lastCrumb = (
-      <BreadcrumbItem isCurrentPage>{lastItem[0]}</BreadcrumbItem>
-    );
     const leadingCrumbLinks = hotCrumbs.map((crumb: any) => {
       const valueLabel = crumb[0];
       const url = crumb[1];
+      if (url.startsWith('process_model:')) {
+        return explodeCrumb(crumb);
+      }
       return (
         <BreadcrumbItem key={valueLabel} href={url}>
           {valueLabel}
         </BreadcrumbItem>
       );
     });
-    return (
+    return <Breadcrumb noTrailingSlash>{leadingCrumbLinks}</Breadcrumb>;
-      <Breadcrumb noTrailingSlash>
-        {leadingCrumbLinks}
-        {lastCrumb}
-      </Breadcrumb>
-    );
   }
   if (processModelId) {
     if (linkProcessModel) {

spiffworkflow-frontend/src/helpers.tsx

@@ -126,7 +126,9 @@ export const unModifyProcessModelPath = (path: String) => {
 
 export const getGroupFromModifiedModelId = (modifiedId: String) => {
   const finalSplitIndex = modifiedId.lastIndexOf(':');
-  const groupId = modifiedId.slice(0, finalSplitIndex);
+  return modifiedId.slice(0, finalSplitIndex);
-  console.log(`groupId: ${groupId}`);
+};
-  return groupId;
+
+export const splitProcessModelId = (processModelId: String) => {
+  return processModelId.split('/');
 };

spiffworkflow-frontend/src/routes/HomePage.tsx

@@ -3,7 +3,10 @@ import { useEffect, useState } from 'react';
 import { Button, Table } from '@carbon/react';
 import { Link, useSearchParams } from 'react-router-dom';
 import PaginationForTable from '../components/PaginationForTable';
-import {getPageInfoFromSearchParams, modifyProcessModelPath} from '../helpers';
+import {
+  getPageInfoFromSearchParams,
+  modifyProcessModelPath,
+} from '../helpers';
 import HttpService from '../services/HttpService';
 import { PaginationObject, RecentProcessModel } from '../interfaces';
 

spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx

@@ -28,7 +28,6 @@ import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config';
 import {
   convertDateStringToSeconds,
   convertSecondsToFormattedDate,
-  getGroupFromModifiedModelId,
   getPageInfoFromSearchParams,
   getProcessModelFullIdentifierFromSearchParams,
   modifyProcessModelPath,

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -8,7 +8,6 @@ import HttpService from '../services/HttpService';
 import ReactDiagramEditor from '../components/ReactDiagramEditor';
 import {
   convertSecondsToFormattedDate,
-  modifyProcessModelPath,
   unModifyProcessModelPath,
 } from '../helpers';
 import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
@@ -29,10 +28,7 @@ export default function ProcessInstanceShow() {
   const unModifiedProcessModelId = unModifyProcessModelPath(
     `${params.process_model_id}`
   );
-  const modifiedProcessModelId = params.process_model_id
+  const modifiedProcessModelId = params.process_model_id;
-
-  console.log(`params.process_model_id: ${params.process_model_id}`);
-  console.log(`modifiedProcessModelId: ${modifiedProcessModelId}`);
 
   const navigateToProcessInstances = (_result: any) => {
     navigate(
@@ -55,7 +51,7 @@ export default function ProcessInstanceShow() {
         path: `/process-instance/${params.process_instance_id}/tasks?all_tasks=true&spiff_step=${params.spiff_step}`,
         successCallback: setTasks,
       });
-  }, [params]);
+  }, [params, modifiedProcessModelId]);
 
   const deleteProcessInstance = () => {
     HttpService.makeCallToBackend({

spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx

@@ -6,7 +6,10 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
 import ErrorContext from '../contexts/ErrorContext';
-import {getGroupFromModifiedModelId, modifyProcessModelPath} from "../helpers";
+import {
+  getGroupFromModifiedModelId,
+  modifyProcessModelPath,
+} from '../helpers';
 
 export default function ProcessModelEdit() {
   const [displayName, setDisplayName] = useState('');

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

@@ -17,8 +17,7 @@ import ReactDiagramEditor from '../components/ReactDiagramEditor';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import ErrorContext from '../contexts/ErrorContext';
-import { makeid } from '../helpers';
+import { makeid, modifyProcessModelPath } from '../helpers';
-import { modifyProcessModelPath } from '../helpers';
 import { ProcessFile, ProcessModel } from '../interfaces';
 
 export default function ProcessModelEditDiagram() {

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -120,7 +120,7 @@ export default function ProcessModelShow() {
       path: `/process-models/${modifiedProcessModelId}`,
       successCallback: processResult,
     });
-  }, [params, reloadModel]);
+  }, [params, reloadModel, modifiedProcessModelId]);
 
   const processModelRun = (processInstance: any) => {
     setErrorMessage(null);
@@ -516,8 +516,13 @@ export default function ProcessModelShow() {
       <>
         {fileUploadModal()}
         <ProcessBreadcrumb
-          processGroupId={processModel.process_group_id}
+          hotCrumbs={[
-          processModelId={processModel.id}
+            ['Process Groups', '/admin'],
+            [
+              `Process Model: ${processModel.id}`,
+              `process_model:${processModel.id}`,
+            ],
+          ]}
         />
         <h1>{processModel.display_name}</h1>
         <p>{processModel.description}</p>

spiffworkflow-frontend/src/routes/ReactFormEditor.tsx

@@ -51,7 +51,7 @@ export default function ReactFormEditor() {
         successCallback: processResult,
       });
     }
-  }, [params]);
+  }, [params, modifiedProcessModelId]);
 
   const navigateToProcessModelFile = (_result: any) => {
     if (!params.file_name) {