updated the breadcrumb component and added a test for buttons in file dropdown

spiffworkflow-frontend/src/components/ProcessBreadcrumb.tsx

@@ -1,12 +1,12 @@
-import { Link } from 'react-router-dom';
-import Breadcrumb from 'react-bootstrap/Breadcrumb';
-import { BreadcrumbItem } from '../interfaces';
+// @ts-ignore
+import { Breadcrumb, BreadcrumbItem } from '@carbon/react';
+import { HotCrumbItem } from '../interfaces';
 
 type OwnProps = {
   processModelId?: string;
   processGroupId?: string;
   linkProcessModel?: boolean;
-  hotCrumbs?: BreadcrumbItem[];
+  hotCrumbs?: HotCrumbItem[];
 };
 
 export default function ProcessBreadcrumb({
@@ -22,18 +22,20 @@ export default function ProcessBreadcrumb({
     if (lastItem === undefined) {
       return null;
     }
-    const lastCrumb = <Breadcrumb.Item active>{lastItem[0]}</Breadcrumb.Item>;
-    const leadingCrumbLinks = hotCrumbs.map((crumb) => {
+    const lastCrumb = (
+      <BreadcrumbItem isCurrentPage>{lastItem[0]}</BreadcrumbItem>
+    );
+    const leadingCrumbLinks = hotCrumbs.map((crumb: any) => {
       const valueLabel = crumb[0];
       const url = crumb[1];
       return (
-        <Breadcrumb.Item key={valueLabel} linkAs={Link} linkProps={{ to: url }}>
+        <BreadcrumbItem key={valueLabel} href={url}>
           {valueLabel}
-        </Breadcrumb.Item>
+        </BreadcrumbItem>
       );
     });
     return (
-      <Breadcrumb>
+      <Breadcrumb noTrailingSlash>
         {leadingCrumbLinks}
         {lastCrumb}
       </Breadcrumb>
@@ -42,42 +44,38 @@ export default function ProcessBreadcrumb({
   if (processModelId) {
     if (linkProcessModel) {
       processModelBreadcrumb = (
-        <Breadcrumb.Item
-          linkAs={Link}
-          linkProps={{
-            to: `/admin/process-models/${processGroupId}/${processModelId}`,
-          }}
+        <BreadcrumbItem
+          href={`/admin/process-models/${processGroupId}/${processModelId}`}
         >
-          Process Model: {processModelId}
-        </Breadcrumb.Item>
+          {`Process Model: ${processModelId}`}
+        </BreadcrumbItem>
       );
     } else {
       processModelBreadcrumb = (
-        <Breadcrumb.Item active>
-          Process Model: {processModelId}
-        </Breadcrumb.Item>
+        <BreadcrumbItem isCurrentPage>
+          {`Process Model: ${processModelId}`}
+        </BreadcrumbItem>
       );
     }
     processGroupBreadcrumb = (
-      <Breadcrumb.Item
-        linkAs={Link}
+      <BreadcrumbItem
         data-qa="process-group-breadcrumb-link"
-        linkProps={{ to: `/admin/process-groups/${processGroupId}` }}
+        href={`/admin/process-groups/${processGroupId}`}
       >
-        Process Group: {processGroupId}
-      </Breadcrumb.Item>
+        {`Process Group: ${processGroupId}`}
+      </BreadcrumbItem>
     );
   } else if (processGroupId) {
     processGroupBreadcrumb = (
-      <Breadcrumb.Item active>Process Group: {processGroupId}</Breadcrumb.Item>
+      <BreadcrumbItem isCurrentPage>
+        {`Process Group: ${processGroupId}`}
+      </BreadcrumbItem>
     );
   }
 
   return (
-    <Breadcrumb>
-      <Breadcrumb.Item linkAs={Link} linkProps={{ to: '/admin' }}>
-        Process Groups
-      </Breadcrumb.Item>
+    <Breadcrumb noTrailingSlash>
+      <BreadcrumbItem href="/admin">Process Groups</BreadcrumbItem>
       {processGroupBreadcrumb}
       {processModelBreadcrumb}
     </Breadcrumb>

spiffworkflow-frontend/src/index.scss

@@ -1,10 +1,22 @@
 // @use '@carbon/react/scss/themes';
 // @use '@carbon/react/scss/theme' with ($theme: themes.$g100);
+
+@use '@carbon/react/scss/theme' with
+  (
+    $theme: (
+      cds-link-text-color: #525252
+    )
+  );
+
 @use '@carbon/react';
 @use '@carbon/styles';
 // @include grid.flex-grid();
 
+@use '@carbon/colors';
 // @use '@carbon/react/scss/colors';
+@use '@carbon/react/scss/themes';
+
+// var(--cds-link-text-color, var(--cds-link-primary, #0f62fe))
 
 // site is mainly using white theme.
 // header is mainly using g100
@@ -13,3 +25,17 @@
   // background-color: colors.$gray-100;
   color: white;
 }
+
+.cds--breadcrumb-item a.cds--link:hover {
+  color: #525252;
+}
+.cds--breadcrumb-item a.cds--link:visited {
+  color: #525252;
+}
+.cds--breadcrumb-item a.cds--link:visited:hover {
+  color: #525252;
+}
+.cds--breadcrumb-item a.cds--link {
+  color: #525252;
+}
+

spiffworkflow-frontend/src/interfaces.ts

@@ -25,7 +25,7 @@ export interface ProcessModel {
 }
 
 // tuple of display value and URL
-export type BreadcrumbItem = [displayValue: string, url?: string];
+export type HotCrumbItem = [displayValue: string, url?: string];
 
 export interface ErrorForDisplay {
   message: string;

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 // @ts-ignore
-import { Button, Stack } from '@carbon/react';
+import { Grid, Column, Dropdown, Button, Stack } from '@carbon/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import FileInput from '../components/FileInput';
 import HttpService from '../services/HttpService';
@@ -210,6 +210,54 @@ export default function ProcessModelShow() {
   };
 
   const processModelButtons = () => {
+    // <Button
+    //   href={`/admin/process-models/${
+    //     (processModel as any).process_group_id
+    //   }/${(processModel as any).id}/files?file_type=dmn`}
+    //   variant="success"
+    // >
+    //   Add New DMN File
+    // </Button>
+    // <Button
+    //   href={`/admin/process-models/${
+    //     (processModel as any).process_group_id
+    //   }/${(processModel as any).id}/form?file_ext=json`}
+    //   variant="info"
+    // >
+    //   Add New JSON File
+    // </Button>
+    // <Button
+    //   href={`/admin/process-models/${
+    //     (processModel as any).process_group_id
+    //   }/${(processModel as any).id}/form?file_ext=md`}
+    //   variant="info"
+    // >
+    //   Add New Markdown File
+    // </Button>
+    const items = [
+      {
+        key1: (
+          <Grid>
+            <Column md={1}>
+              <Button
+                onClick={(e2: any) => console.log('e2', e2)}
+                variant="primary"
+              >
+                b1
+              </Button>
+            </Column>
+            <Column md={1}>
+              <Button
+                onClick={(e3: any) => console.log('e3', e3)}
+                variant="primary"
+              >
+                b2
+              </Button>
+            </Column>
+          </Grid>
+        ),
+      },
+    ];
     return (
       <Stack orientation="horizontal" gap={3}>
         <Button onClick={processInstanceCreateAndRun} variant="primary">
@@ -231,30 +279,15 @@ export default function ProcessModelShow() {
         >
           Add New BPMN File
         </Button>
-        <Button
-          href={`/admin/process-models/${
-            (processModel as any).process_group_id
-          }/${(processModel as any).id}/files?file_type=dmn`}
-          variant="success"
-        >
-          Add New DMN File
-        </Button>
-        <Button
-          href={`/admin/process-models/${
-            (processModel as any).process_group_id
-          }/${(processModel as any).id}/form?file_ext=json`}
-          variant="info"
-        >
-          Add New JSON File
-        </Button>
-        <Button
-          href={`/admin/process-models/${
-            (processModel as any).process_group_id
-          }/${(processModel as any).id}/form?file_ext=md`}
-          variant="info"
-        >
-          Add New Markdown File
-        </Button>
+        <Dropdown
+          id="default"
+          titleText="Dropdown label"
+          helperText="This is some helper text"
+          label="Dropdown menu options"
+          items={items}
+          itemToString={(item: any) => (item ? item.key1 : '')}
+          onChange={(e: any) => console.log('e', e)}
+        />
       </Stack>
     );
   };