use navigate and Link in tiles on the frontend (#1249)

* use navigate and Link in tiles on the frontend w/ burnettk

* use mui breadcrumb w/ burnettk

---------

Co-authored-by: jasquat <jasquat@users.noreply.github.com>

spiffworkflow-frontend/src/components/ProcessBreadcrumb.tsx

@@ -1,6 +1,8 @@
-// @ts-ignore
+import { Typography } from '@mui/material';
-import { Breadcrumb, BreadcrumbItem } from '@carbon/react';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+
 import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 import { modifyProcessIdentifierForPathParam } from '../helpers';
 import {
   HotCrumbItem,
@@ -86,9 +88,9 @@ export default function ProcessBreadcrumb({ hotCrumbs }: OwnProps) {
                   parentGroup.id
                 )}`;
                 return (
-                  <BreadcrumbItem key={parentGroup.id} href={fullUrl}>
+                  <Link key={parentGroup.id} to={fullUrl}>
                     {parentGroup.display_name}
-                  </BreadcrumbItem>
+                  </Link>
                 );
               }
             );
@@ -104,19 +106,15 @@ export default function ProcessBreadcrumb({ hotCrumbs }: OwnProps) {
                 processEntity.id
               )}`;
               breadcrumbs.push(
-                <BreadcrumbItem
+                <Link key={processEntity.id} to={fullUrl} data-qa={dataQaTag}>
-                  key={processEntity.id}
-                  href={fullUrl}
-                  data-qa={dataQaTag}
-                >
                   {processEntity.display_name}
-                </BreadcrumbItem>
+                </Link>
               );
             } else {
               breadcrumbs.push(
-                <BreadcrumbItem key={processEntity.id} isCurrentPage>
+                <Typography key={processEntity.id} color="text.primary">
                   {processEntity.display_name}
-                </BreadcrumbItem>
+                </Typography>
               );
             }
             return breadcrumbs;
@@ -126,26 +124,30 @@ export default function ProcessBreadcrumb({ hotCrumbs }: OwnProps) {
             const url = crumb[1];
             if (!url && valueLabel) {
               return (
-                <BreadcrumbItem isCurrentPage key={valueLabel}>
+                <Typography key={valueLabel} color="text.primary">
                   {valueLabel}
-                </BreadcrumbItem>
+                </Typography>
               );
             }
             if (url && valueLabel) {
               return (
-                <BreadcrumbItem key={valueLabel} href={url}>
+                <Link key={valueLabel} to={url}>
                   {valueLabel}
-                </BreadcrumbItem>
+                </Link>
               );
             }
           }
           return null;
         }
       );
-      return <Breadcrumb noTrailingSlash>{leadingCrumbLinks}</Breadcrumb>;
+      return (
+        <Breadcrumbs className="spiff-breadcrumb">
+          {leadingCrumbLinks}
+        </Breadcrumbs>
+      );
     }
     return null;
   };
 
-  return <Breadcrumb noTrailingSlash>{hotCrumbElement()}</Breadcrumb>;
+  return <>{hotCrumbElement()}</>;
 }

spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx

@@ -1,5 +1,5 @@
 import { ReactElement, useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { ArrowRight } from '@carbon/icons-react';
 import { ClickableTile } from '@carbon/react';
 import HttpService from '../services/HttpService';
@@ -25,6 +25,7 @@ export default function ProcessGroupListTiles({
   userCanCreateProcessModels,
 }: OwnProps) {
   const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
 
   const [processGroups, setProcessGroups] = useState<ProcessGroup[] | null>(
     null
@@ -53,6 +54,10 @@ export default function ProcessGroupListTiles({
     return (pg.process_models || []).length + (pg.process_groups || []).length;
   };
 
+  const navigateToProcessGroup = (url: string) => {
+    navigate(url);
+  };
+
   const processGroupsDisplayArea = () => {
     let displayText = null;
     if (processGroups && processGroups.length > 0) {
@@ -61,9 +66,11 @@ export default function ProcessGroupListTiles({
           <ClickableTile
             id={`process-group-tile-${row.id}`}
             className="tile-process-group"
-            href={`/process-groups/${modifyProcessIdentifierForPathParam(
+            onClick={() =>
-              row.id
+              navigateToProcessGroup(
-            )}`}
+                `/process-groups/${modifyProcessIdentifierForPathParam(row.id)}`
+              )
+            }
           >
             <div className="tile-process-group-content-container">
               <ArrowRight />

spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx

@@ -1,5 +1,5 @@
 import { ReactElement, useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import {
   Tile,
   // @ts-ignore
@@ -72,15 +72,15 @@ export default function ProcessModelListTiles({
           >
             <div className="tile-process-group-content-container">
               <div className="tile-title-top">
-                <a
+                <Link
                   title={row.id}
                   data-qa="process-model-show-link"
-                  href={`/process-models/${modifyProcessIdentifierForPathParam(
+                  to={`/process-models/${modifyProcessIdentifierForPathParam(
                     row.id
                   )}`}
                 >
                   {row.display_name}
-                </a>
+                </Link>
               </div>
               <p className="tile-description">
                 {truncateString(row.description || '', 100)}

spiffworkflow-frontend/src/index.css

@@ -85,16 +85,16 @@ h3 {
   background: lightgrey;
 }
 
-.cds--breadcrumb-item a.cds--link:hover {
+.spiff-breadcrumb .MuiBreadcrumbs-li a:hover {
   color: #525252;
 }
-.cds--breadcrumb-item a.cds--link:visited {
+.spiff-breadcrumb .MuiBreadcrumbs-li a:visited {
   color: #525252;
 }
-.cds--breadcrumb-item a.cds--link:visited:hover {
+.spiff-breadcrumb .MuiBreadcrumbs-li a:visited:hover {
   color: #525252;
 }
-.cds--breadcrumb-item a.cds--link {
+.spiff-breadcrumb .MuiBreadcrumbs-li a {
   color: #525252;
 }
 
@@ -212,7 +212,7 @@ code {
   vertical-align: middle;
 }
 
-.cds--breadcrumb {
+.MuiBreadcrumbs-root.spiff-breadcrumb {
   margin-bottom: 2rem;
 }
 
@@ -356,14 +356,6 @@ dl dd {
   margin: auto;
 }
 
-.breadcrumb {
-  font-size: 1.5rem;
-}
-
-.breadcrumb-item.active {
-  color: black;
-}
-
 .container .nav-tabs {
   margin-top: 1rem;
 }