Mhv 64927 imaging breadcrumb update mr (#33484)

* first push for Radiology images

* swapped from hardcoding the studyId to Mike's useSelector method

* updated loading bar to work with redux

* MHV-44894 Fixed alert headers, refactored JSX

* MHV-44894 Replaced imageReqData state w/ memoized studyJob

* MHV-44894 Used va-button components and fixed some logic

* MHV-44894 Added notification status

* MHV-44894 Added image count and better match designs

* MHV-44894 Fixed polling logic and implemented dynamic backoff

* MHV-44894 Added dynamic end date for image request

* MHV-44894 Fixed link and other cleanup

* MHV-44894 Added DICOM zip download

* MHV-44894 Removed print functionality, moved DICOM block

* MHV-44894 Replaced mock record with live data, refactored some bits

* MHV-44894 Check status after request; account for NEW status

* MHV-44894 Tidied up pagination

* MHV-44894 Placeholder for error handling

* MHV-44894 Implemented API error handling

* MHV-44894 Fixed external link to MHV

* MHV-44894 Fixed unit tests

* MHV-44894 Modified hash to work on non-https connections

* MHV-44894 Fixed alerts and header levels

* MHV-44894 Skipped e2e test for deprecated functionality; added intercepts

* MHV-44894 Updated error handling

* MHV-44894 Updated error header

* [MHV-64927] Initial p1 breadcrumb update

* [MHV-64927] Cleanup, updates breadcrumb is display Back on imaging pages

---------

Co-authored-by: Justin Lattimore <[email protected]>
Co-authored-by: Mike Moyer <[email protected]>

src/applications/mhv-medical-records/components/MrBreadcrumbs.jsx

@@ -1,7 +1,7 @@
 import { VaBreadcrumbs } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import React, { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Link, useHistory, useLocation } from 'react-router-dom';
+import { Link, useHistory, useLocation, useParams } from 'react-router-dom';
 import { Breadcrumbs, Paths } from '../util/constants';
 import { setBreadcrumbs } from '../actions/breadcrumbs';
 import { clearPageNumber, setPageNumber } from '../actions/pageTracker';
@@ -28,6 +28,7 @@ const MrBreadcrumbs = () => {
   const textContent = document.querySelector('h1')?.textContent;
   const searchIndex = new URLSearchParams(window.location.search);
   const page = searchIndex.get('page');
+  const { labId } = useParams();
 
   useEffect(
     () => {
@@ -75,6 +76,10 @@ const MrBreadcrumbs = () => {
     history.push(href);
   };
 
+  const backToImagesBreadcrumb = location.pathname.includes('/images')
+    ? crumbsList[crumbsList.length - 1].href
+    : `/${locationBasePath}`;
+
   if (!phase0p5Flag) {
     if (location.pathname === '/' || !crumbsList) {
       return <div className="vads-u-padding-bottom--5" />;
@@ -94,17 +99,36 @@ const MrBreadcrumbs = () => {
       </div>
     );
   }
+  if (
+    phase0p5Flag &&
+    location.pathname.includes(`/${locationBasePath}/${labId}`)
+  ) {
+    return (
+      <div
+        className="vads-l-row vads-u-padding-y--3 breadcrumbs-container no-print"
+        label="Breadcrumb"
+        data-testid="breadcrumbs"
+      >
+        <span className="breadcrumb-angle vads-u-padding-right--0p5 vads-u-padding-top--0p5">
+          <va-icon icon="arrow_back" size={1} style={{ color: '#808080' }} />
+        </span>
+        <Link to={backToImagesBreadcrumb}>Back</Link>
+      </div>
+    );
+  }
 
   return (
-    <VaBreadcrumbs
-      breadcrumbList={crumbsList}
-      label="Breadcrumb"
-      home-veterans-affairs
-      onRouteChange={handleRoutechange}
-      className="mobile-lg:vads-u-margin-y--2 no-print"
-      dataTestid="breadcrumbs"
-      uswds
-    />
+    <>
+      <VaBreadcrumbs
+        breadcrumbList={crumbsList}
+        label="Breadcrumb"
+        home-veterans-affairs
+        onRouteChange={handleRoutechange}
+        className="mobile-lg:vads-u-margin-y--2 no-print"
+        dataTestid="breadcrumbs"
+        uswds
+      />
+    </>
   );
 };