MHV-66099 Images page (image download, image layout and format, download alerts)

src/applications/mhv-medical-records/components/LabsAndTests/RadiologyDetails.jsx

@@ -11,6 +11,7 @@
   txtLine,
   usePrintTitle,
 } from '@department-of-veterans-affairs/mhv/exports';
+import { VaAlert } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import { mhvUrl } from '~/platform/site-wide/mhv/utilities';
 import { isAuthenticatedWithSSOe } from '~/platform/user/authentication/selectors';
 import PrintHeader from '../shared/PrintHeader';
@@ -70,7 +71,6 @@
   const [pollInterval, setPollInterval] = useState(2000);
 
   const [processingRequest, setProcessingRequest] = useState(false);
-
   const radiologyDetails = useSelector(
     state => state.mr.labsAndTests.labsAndTestsDetails,
   );
@@ -101,7 +101,7 @@
         setImageProcessingAlertRendered(true);
       }
     },
     [processingAlertHeadingRef.current],
   );
 
   useEffect(
@@ -388,6 +388,20 @@
           label="Date and time performed"
           labelClass="vads-font-weight-regular"
         />
+        {studyJob?.status === studyJobStatus.COMPLETE && (
+          <VaAlert
+            status="success"
+            visible
+            class="vads-u-margin-top--4 no-print"
+            role="alert"
+            data-testid="alert-download-started"
+          >
+            <h3 className="vads-u-font-size--lg vads-u-font-family--sans no-print">
+              Images ready
+            </h3>
+            {imageAlertComplete()}
+          </VaAlert>
+        )}
         {downloadStarted && <DownloadSuccessAlert />}
         <PrintDownload
           description="L&TR Detail"

src/applications/mhv-medical-records/components/shared/ImageGallery.jsx

@@ -27,10 +27,20 @@ const ImageGallery = ({ imageList, imagesPerPage, studyId }) => {
     if (imageList.length && imagesPerPage && studyId) {
       return (
         <>
+          <div data-testid="showing-image-records">
+            <span>
+              {`Showing ${
+                paginatedImages[currentPage - 1][0].index
+              } to ${paginatedImages[currentPage - 1][0].index +
+                (paginatedImages[currentPage - 1].length - 1)} of ${
+                imageList.length
+              } images`}
+            </span>
+          </div>
           <div className="vads-u-padding--0 vads-u-border-top--1px vads-u-border-color--gray-lighter vads-l-grid-container vads-l-row vads-u-margin-bottom--2">
             {paginatedImages[currentPage - 1].map((image, idx) => (
               <div
-                className="image-div vads-l-col--4"
+                className="image-div vads-l-col--6"
                 data-testid="image-div"
                 key={idx}
               >

src/applications/mhv-medical-records/containers/RadiologyImagesList.jsx

@@ -41,7 +41,7 @@ const RadiologyImagesList = ({ isTesting }) => {
     isTesting || false,
   );
   const [isStudyJobsLoaded, setStudyJobsLoaded] = useState(isTesting || false);
-
+  const [dicomDownload, setDicomDownload] = useState(false);
   const returnToDetailsPage = useCallback(
     () => history.push(`/labs-and-tests/${labId}`),
     [history, labId],
@@ -112,6 +112,11 @@ const RadiologyImagesList = ({ isTesting }) => {
     [radiologyDetails, returnToDetailsPage],
   );
 
+  const updateDicomDownload = truth => {
+    setDicomDownload(truth);
+    document.querySelector('#download-banner');
+  };
+
   const renderImageContent = () => (
     <>
       <PrintHeader />
@@ -136,8 +141,8 @@ const RadiologyImagesList = ({ isTesting }) => {
         VA care team to share them directly.
       </p>
       <p>
-        If you want to try to sharing these images yourself, you can download
-        them as DICOM files in a ZIP folder.
+        If you want to try sharing these images yourself, you can download them
+        as DICOM files in a ZIP folder.
       </p>
       <p>Here’s what to know:</p>
       <ul>
@@ -158,16 +163,28 @@ const RadiologyImagesList = ({ isTesting }) => {
           saves a copy of your files to the computer you’re using.
         </li>
       </ul>
-      <p>
-        {radiologyDetails?.studyId && (
-          <va-link
-            download
-            filetype="ZIP folder"
-            href={`${apiImagingPath}/${radiologyDetails.studyId}/dicom`}
-            text="Download DICOM files"
-          />
-        )}
-      </p>
+      {radiologyDetails?.studyId && (
+        <>
+          <va-banner
+            id="download-banner"
+            show-close={false}
+            headline="Download started"
+            type="success"
+            visible={dicomDownload}
+          >
+            Check your device’s downloads location for your file.
+          </va-banner>
+          <p>
+            <va-link
+              download
+              filetype="ZIP folder"
+              href={`${apiImagingPath}/${radiologyDetails.studyId}/dicom`}
+              text="Download DICOM files"
+              onClick={() => updateDicomDownload(true)}
+            />
+          </p>
+        </>
+      )}
     </>
   );
 

src/applications/mhv-medical-records/tests/e2e/medical-records-view-labs-radiology-images.cypress.spec.js

@@ -31,6 +31,8 @@ describe('Medical Records - Radiology images are shown when requested', () => {
 
     RadiologyDetailsPage.verifyPaginationVisible();
 
+    RadiologyDetailsPage.verifyShowingImageRecords(1, 10, 11);
+
     cy.injectAxe();
     cy.axeCheck('main', {});
   });

src/applications/mhv-medical-records/tests/e2e/pages/RadiologyDetailsPage.js

@@ -113,6 +113,19 @@ class RadiologyDetailsPage extends BaseDetailsPage {
   verifyFocus = () => {
     cy.get('h1').should('have.focus');
   };
+
+  verifyShowingImageRecords = (
+    displayedStartNumber,
+    displayedEndNumber,
+    numRecords,
+  ) => {
+    cy.get('[data-testid="showing-image-records"]')
+      .find('span')
+      .should(
+        'contain',
+        `Showing ${displayedStartNumber} to ${displayedEndNumber} of ${numRecords} images`,
+      );
+  };
 }
 
 export default new RadiologyDetailsPage();