fix cypress tests and support more generic hotCrumbs style in breadcrumb

cypress/e2e/process_groups.cy.js

@@ -17,12 +17,12 @@ describe('process-groups', () => {
     cy.contains('Process Groups').click();
     cy.contains(groupDisplayName).click();
     cy.url().should('include', `process-groups/${groupId}`);
-    cy.contains(`Process Group: ${groupId}`);
+    cy.contains(`Process Group: ${groupDisplayName}`);
 
     cy.contains('Edit process group').click();
     cy.get('input[name=display_name]').clear().type(newGroupDisplayName);
     cy.contains('Submit').click();
-    cy.contains(`Process Group: ${groupId}`);
+    cy.contains(`Process Group: ${newGroupDisplayName}`);
 
     cy.contains('Edit process group').click();
     cy.get('input[name=display_name]').should(

cypress/e2e/tasks.cy.js

@@ -22,12 +22,12 @@ describe('tasks', () => {
   });
 
   it('can complete and navigate a form', () => {
-    const groupId = 'acceptance-tests-group-one';
+    const groupDisplayName = 'Acceptance Tests Group One';
     const modelId = `acceptance-tests-model-2`;
     const completedTaskClassName = 'completed-task-highlight';
     const activeTaskClassName = 'active-task-highlight';
 
-    cy.navigateToProcessModel(groupId, modelId);
+    cy.navigateToProcessModel(groupDisplayName, modelId);
 
     // avoid reloading so we can click on the task link that appears on running the process instance
     cy.runPrimaryBpmnFile(false);
@@ -66,7 +66,7 @@ describe('tasks', () => {
     );
 
     cy.contains('Task: get_user_generated_number_four');
-    cy.navigateToProcessModel(groupId, modelId);
+    cy.navigateToProcessModel(groupDisplayName, modelId);
     cy.getBySel('process-instance-list-link').click();
     cy.assertAtLeastOneItemInPaginatedResults();
 
@@ -98,7 +98,7 @@ describe('tasks', () => {
     );
     cy.url().should('include', '/tasks');
 
-    cy.navigateToProcessModel(groupId, modelId);
+    cy.navigateToProcessModel(groupDisplayName, modelId);
     cy.getBySel('process-instance-list-link').click();
     cy.assertAtLeastOneItemInPaginatedResults();
 
@@ -110,7 +110,7 @@ describe('tasks', () => {
 
   it('can paginate items', () => {
     cy.navigateToProcessModel(
-      'acceptance-tests-group-one',
+      'Acceptance Tests Group One',
       'acceptance-tests-model-2'
     );
 

cypress/support/commands.js

@@ -58,7 +58,7 @@ Cypress.Commands.add('createGroup', (groupId, groupDisplayName) => {
   cy.contains('Submit').click();
 
   cy.url().should('include', `process-groups/${groupId}`);
-  cy.contains(`Process Group: ${groupId}`);
+  cy.contains(`Process Group: ${groupDisplayName}`);
 });
 
 Cypress.Commands.add('createModel', (groupId, modelId, modelDisplayName) => {

src/components/ProcessBreadcrumb.tsx

@@ -1,20 +1,44 @@
 import { Link } from 'react-router-dom';
 import Breadcrumb from 'react-bootstrap/Breadcrumb';
+import { BreadcrumbItem } from '../interfaces';
 
 type OwnProps = {
   processModelId?: string;
   processGroupId?: string;
   linkProcessModel?: boolean;
+  hotCrumbs?: BreadcrumbItem[];
 };
 
 export default function ProcessBreadcrumb({
   processModelId,
   processGroupId,
+  hotCrumbs,
   linkProcessModel = false,
 }: OwnProps) {
   let processGroupBreadcrumb = null;
   let processModelBreadcrumb = null;
-
+  if (hotCrumbs) {
+    const lastItem = hotCrumbs.pop();
+    if (lastItem === undefined) {
+      return null;
+    }
+    const lastCrumb = <Breadcrumb.Item active>{lastItem[0]}</Breadcrumb.Item>;
+    const leadingCrumbLinks = hotCrumbs.map((crumb) => {
+      const valueLabel = crumb[0];
+      const url = crumb[1];
+      return (
+        <Breadcrumb.Item linkAs={Link} linkProps={{ to: url }}>
+          {valueLabel}
+        </Breadcrumb.Item>
+      );
+    });
+    return (
+      <Breadcrumb>
+        {leadingCrumbLinks}
+        {lastCrumb}
+      </Breadcrumb>
+    );
+  }
   if (processModelId) {
     if (linkProcessModel) {
       processModelBreadcrumb = (

src/interfaces.ts

@@ -10,9 +10,17 @@ export interface RecentProcessModel {
   processModelDisplayName: string;
 }
 
+export interface ProcessGroup {
+  id: string;
+  display_name: string;
+}
+
 export interface ProcessModel {
   id: string;
   process_group_id: string;
   display_name: string;
   primary_file_name: string;
 }
+
+// tuple of display value and URL
+export type BreadcrumbItem = [displayValue: string, url?: string];

src/routes/ProcessGroupList.tsx

@@ -132,7 +132,7 @@ export default function ProcessGroupList() {
   if (pagination) {
     return (
       <>
-        <ProcessBreadcrumb />
+        <ProcessBreadcrumb hotCrumbs={[['Process Groups']]} />
         <Button href="/admin/process-groups/new">Add a process group</Button>
         <br />
         <br />

src/routes/ProcessGroupShow.tsx

@@ -5,12 +5,13 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import PaginationForTable from '../components/PaginationForTable';
 import HttpService from '../services/HttpService';
 import { getPageInfoFromSearchParams } from '../helpers';
+import { ProcessGroup } from '../interfaces';
 
 export default function ProcessGroupShow() {
   const params = useParams();
   const [searchParams] = useSearchParams();
 
-  const [processGroup, setProcessGroup] = useState(null);
+  const [processGroup, setProcessGroup] = useState<ProcessGroup | null>(null);
   const [processModels, setProcessModels] = useState([]);
   const [pagination, setPagination] = useState(null);
 
@@ -35,14 +36,15 @@ export default function ProcessGroupShow() {
   }, [params, searchParams]);
 
   const buildTable = () => {
+    if (processGroup === null) {
+      return null;
+    }
     const rows = processModels.map((row) => {
       return (
         <tr key={(row as any).id}>
           <td>
             <Link
-              to={`/admin/process-models/${(processGroup as any).id}/${
-                (row as any).id
-              }`}
+              to={`/admin/process-models/${processGroup.id}/${(row as any).id}`}
               data-qa="process-model-show-link"
             >
               {(row as any).id}
@@ -72,7 +74,12 @@ export default function ProcessGroupShow() {
     const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     return (
       <>
-        <ProcessBreadcrumb processGroupId={(processGroup as any).id} />
+        <ProcessBreadcrumb
+          hotCrumbs={[
+            ['Process Groups', '/admin'],
+            [`Process Group: ${processGroup.display_name}`],
+          ]}
+        />
         <ul>
           <Stack direction="horizontal" gap={3}>
             <Button