MHV-63291 MR: Datadog tags (#33456)

* MHV-63291 add dd action helper function * MHV-63291 handle ExternalLink tags * MHV-63291 landing page * MHV-63291 allergies tags * MHV-63291 printDownload list or page * MHV-63291 vaccines tags * MHV-63291 vitals tags * MHV-63291 care summaries tags * MHV-63291 labs and tests tags * MHV-63291 labs and tests details tags * MHV-63291 conditions tags * MHV-63291 settings tags * MHV-63291 handle accordion expand btn * MHV-63291 breadcrumbs tags
department-of-veterans-affairs · Dec 12, 2024 · aab02d5 · aab02d5
1 parent 92b22c2
commit aab02d5
Show file tree

Hide file tree

Showing 29 changed files with 386 additions and 67 deletions.
diff --git a/...pplications/mhv-medical-records/components/CareSummaries/AdmissionAndDischargeDetails.jsx b/...pplications/mhv-medical-records/components/CareSummaries/AdmissionAndDischargeDetails.jsx
@@ -132,11 +132,15 @@ ${record.summary}`;
 
       {downloadStarted && <DownloadSuccessAlert />}
       <PrintDownload
+        description="CS&N Detail"
         downloadPdf={generateCareNotesPDF}
         downloadTxt={generateCareNotesTxt}
         allowTxtDownloads={allowTxtDownloads}
       />
-      <DownloadingRecordsInfo allowTxtDownloads={allowTxtDownloads} />
+      <DownloadingRecordsInfo
+        description="CS&N Detail"
+        allowTxtDownloads={allowTxtDownloads}
+      />
 
       <div className="test-details-container max-80">
         <h2>Details</h2>

diff --git a/src/applications/mhv-medical-records/components/CareSummaries/ProgressNoteDetails.jsx b/src/applications/mhv-medical-records/components/CareSummaries/ProgressNoteDetails.jsx
@@ -110,11 +110,15 @@ ${record.note}`;
 
       {downloadStarted && <DownloadSuccessAlert />}
       <PrintDownload
+        description="CS&N Detail"
         downloadPdf={generateCareNotesPDF}
         downloadTxt={generateCareNotesTxt}
         allowTxtDownloads={allowTxtDownloads}
       />
-      <DownloadingRecordsInfo allowTxtDownloads={allowTxtDownloads} />
+      <DownloadingRecordsInfo
+        description="CS&N Detail"
+        allowTxtDownloads={allowTxtDownloads}
+      />
 
       <div className="test-details-container max-80">
         <h2>Details</h2>

diff --git a/src/applications/mhv-medical-records/components/LabsAndTests/ChemHemDetails.jsx b/src/applications/mhv-medical-records/components/LabsAndTests/ChemHemDetails.jsx
@@ -127,11 +127,15 @@ Lab comments: ${entry.labComments}\n`,
 
       {downloadStarted && <DownloadSuccessAlert />}
       <PrintDownload
+        description="L&TR Detail"
         downloadPdf={generateChemHemPdf}
         downloadTxt={generateChemHemTxt}
         allowTxtDownloads={allowTxtDownloads}
       />
-      <DownloadingRecordsInfo allowTxtDownloads={allowTxtDownloads} />
+      <DownloadingRecordsInfo
+        description="L&TR Detail"
+        allowTxtDownloads={allowTxtDownloads}
+      />
 
       {/*                   TEST DETAILS                          */}
       <div className="test-details-container max-80">

diff --git a/src/applications/mhv-medical-records/components/LabsAndTests/EkgDetails.jsx b/src/applications/mhv-medical-records/components/LabsAndTests/EkgDetails.jsx
@@ -99,11 +99,15 @@ const EkgDetails = props => {
 
       {downloadStarted && <DownloadSuccessAlert />}
       <PrintDownload
+        description="L&TR Detail"
         downloadPdf={generateEkgDetailsPdf}
         allowTxtDownloads={allowTxtDownloads}
         downloadTxt={generateEkgTxt}
       />
-      <DownloadingRecordsInfo allowTxtDownloads={allowTxtDownloads} />
+      <DownloadingRecordsInfo
+        description="L&TR Detail"
+        allowTxtDownloads={allowTxtDownloads}
+      />
 
       <div className="test-details-container max-80">
         <h2 className="vads-u-font-size--md vads-u-font-family--sans">

diff --git a/src/applications/mhv-medical-records/components/LabsAndTests/MicroDetails.jsx b/src/applications/mhv-medical-records/components/LabsAndTests/MicroDetails.jsx
@@ -121,11 +121,15 @@ ${record.results}`;
 
       {downloadStarted && <DownloadSuccessAlert />}
       <PrintDownload
+        description="L&TR Detail"
         downloadPdf={generateMicrobiologyPdf}
         allowTxtDownloads={allowTxtDownloads}
         downloadTxt={generateMicroTxt}
       />
-      <DownloadingRecordsInfo allowTxtDownloads={allowTxtDownloads} />
+      <DownloadingRecordsInfo
+        description="L&TR Detail"
+        allowTxtDownloads={allowTxtDownloads}
+      />
 
       <div className="test-details-container max-80">
         <h2>Details about this test</h2>

diff --git a/src/applications/mhv-medical-records/components/LabsAndTests/PathologyDetails.jsx b/src/applications/mhv-medical-records/components/LabsAndTests/PathologyDetails.jsx
@@ -113,11 +113,15 @@ ${record.results} \n`;
 
       {downloadStarted && <DownloadSuccessAlert />}
       <PrintDownload
+        description="L&TR Detail"
         downloadPdf={generatePathologyPdf}
         allowTxtDownloads={allowTxtDownloads}
         downloadTxt={generatePathologyTxt}
       />
-      <DownloadingRecordsInfo allowTxtDownloads={allowTxtDownloads} />
+      <DownloadingRecordsInfo
+        description="L&TR Detail"
+        allowTxtDownloads={allowTxtDownloads}
+      />
 
       <div className="test-details-container max-80">
         <h2>Details about this test</h2>

diff --git a/src/applications/mhv-medical-records/components/LabsAndTests/RadiologyDetails.jsx b/src/applications/mhv-medical-records/components/LabsAndTests/RadiologyDetails.jsx
@@ -28,6 +28,7 @@ import {
   formatNameFirstLast,
   generateTextFile,
   getNameDateAndTime,
+  sendDataDogAction,
   formatDateAndTime,
 } from '../../util/helpers';
 import DateSubheading from '../shared/DateSubheading';
@@ -332,11 +333,15 @@ ${record.results}`;
       />
       {downloadStarted && <DownloadSuccessAlert />}
       <PrintDownload
+        description="L&TR Detail"
         downloadPdf={downloadPdf}
         downloadTxt={generateRadioloyTxt}
         allowTxtDownloads={allowTxtDownloads}
       />
-      <DownloadingRecordsInfo allowTxtDownloads={allowTxtDownloads} />
+      <DownloadingRecordsInfo
+        description="L&TR Detail"
+        allowTxtDownloads={allowTxtDownloads}
+      />
 
       <div className="test-details-container max-80">
         <h2>Details about this test</h2>
@@ -387,6 +392,9 @@ ${record.results}`;
               )}
               text="Request images on the My HealtheVet website"
               data-testid="radiology-images-link"
+              onClick={() => {
+                sendDataDogAction('Request images on MHV');
+              }}
             />
           </>
         )}

diff --git a/src/applications/mhv-medical-records/components/MrBreadcrumbs.jsx b/src/applications/mhv-medical-records/components/MrBreadcrumbs.jsx
@@ -5,6 +5,7 @@ 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';
+import { sendDataDogAction } from '../util/helpers';
 
 const MrBreadcrumbs = () => {
   const dispatch = useDispatch();
@@ -71,9 +72,22 @@ const MrBreadcrumbs = () => {
     [dispatch, locationBasePath, locationChildPath, textContent, pageNumber],
   );
 
-  const handleRoutechange = ({ detail }) => {
+  const handleRouteChange = ({ detail }) => {
     const { href } = detail;
     history.push(href);
+
+    const isVitalsDetail =
+      Paths.VITALS.includes(locationBasePath) && locationChildPath;
+    const path = locationBasePath
+      ? `/${locationBasePath}/${isVitalsDetail ? locationChildPath : ''}`
+      : '/';
+    const feature = Object.keys(Paths).find(_path => path === Paths[_path]);
+    const ddTag = isVitalsDetail
+      ? `Back - Vitals - ${Breadcrumbs[feature].label}`
+      : `Back - ${Breadcrumbs[feature].label} - ${
+          locationChildPath ? 'Detail' : 'List'
+        }`;
+    sendDataDogAction(ddTag);
   };
 
   const backToImagesBreadcrumb = location.pathname.includes('/images')
@@ -118,17 +132,15 @@ const MrBreadcrumbs = () => {
   }
 
   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
+    />
   );
 };
 

diff --git a/src/applications/mhv-medical-records/components/RecordList/AllergyListItem.jsx b/src/applications/mhv-medical-records/components/RecordList/AllergyListItem.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import ItemList from '../shared/ItemList';
+import { sendDataDogAction } from '../../util/helpers';
 
 const AllergyListItem = props => {
   const { record } = props;
@@ -17,6 +18,9 @@ const AllergyListItem = props => {
         data-dd-privacy="mask"
         data-testid={`allergy-link-${record.id}`}
         className="no-print"
+        onClick={() => {
+          sendDataDogAction('Allergies Detail Link');
+        }}
       >
         <div className="vads-u-font-weight--bold vads-u-margin-bottom--0p5">
           {record.name} <span className="sr-only">{`on ${record.date}`}</span>

diff --git a/src/applications/mhv-medical-records/components/RecordList/CareSummariesAndNotesListItem.jsx b/src/applications/mhv-medical-records/components/RecordList/CareSummariesAndNotesListItem.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { loincCodes, dischargeSummarySortFields } from '../../util/constants';
+import { sendDataDogAction } from '../../util/helpers';
 
 const CareSummariesAndNotesListItem = props => {
   const { record } = props;
@@ -47,6 +48,9 @@ const CareSummariesAndNotesListItem = props => {
         to={`/summaries-and-notes/${record.id}`}
         data-dd-privacy="mask"
         className="no-print"
+        onClick={() => {
+          sendDataDogAction('Care Summaries & Notes Detail Link');
+        }}
       >
         <div className="vads-u-font-weight--bold vads-u-margin-bottom--0p5">
           {record.name}

diff --git a/src/applications/mhv-medical-records/components/RecordList/ConditionListItem.jsx b/src/applications/mhv-medical-records/components/RecordList/ConditionListItem.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import { sendDataDogAction } from '../../util/helpers';
 
 const ConditionListItem = props => {
   const { record } = props;
@@ -15,6 +16,9 @@ const ConditionListItem = props => {
         to={`/conditions/${record.id}`}
         data-dd-privacy="mask"
         className="no-print"
+        onClick={() => {
+          sendDataDogAction('Health Conditions Detail Link');
+        }}
       >
         <div className="vads-u-font-weight--bold vads-u-margin-bottom--0p5">
           {record.name} <span className="sr-only">{`on ${record.date}`}</span>

diff --git a/src/applications/mhv-medical-records/components/RecordList/LabsAndTestsListItem.jsx b/src/applications/mhv-medical-records/components/RecordList/LabsAndTestsListItem.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { labTypes } from '../../util/constants';
+import { sendDataDogAction } from '../../util/helpers';
 
 const LabsAndTestsListItem = props => {
   const { record } = props;
@@ -12,7 +13,13 @@ const LabsAndTestsListItem = props => {
       class="record-list-item vads-u-padding-y--2p5 vads-u-margin-bottom--2p5 vads-u-padding-x--3"
       data-testid="record-list-item"
     >
-      <Link to={`/labs-and-tests/${record.id}`} data-dd-privacy="mask">
+      <Link
+        to={`/labs-and-tests/${record.id}`}
+        data-dd-privacy="mask"
+        onClick={() => {
+          sendDataDogAction('Lab and Test Results Detail Link');
+        }}
+      >
         <div className="vads-u-font-weight--bold vads-u-margin-bottom--0p5">
           {record.name} <span className="sr-only">{`on ${record.date}`}</span>
         </div>

diff --git a/src/applications/mhv-medical-records/components/RecordList/VaccinesListItem.jsx b/src/applications/mhv-medical-records/components/RecordList/VaccinesListItem.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import { sendDataDogAction } from '../../util/helpers';
 
 const VaccinesListItem = props => {
   const { record } = props;
@@ -16,6 +17,9 @@ const VaccinesListItem = props => {
         to={`/vaccines/${record.id}`}
         data-dd-privacy="mask"
         className="no-print"
+        onClick={() => {
+          sendDataDogAction('Vaccines Detail Link');
+        }}
       >
         <div className="vads-u-font-weight--bold vads-u-margin-bottom--0p5">
           {record.name} <span className="sr-only">{`on ${record.date}`}</span>

diff --git a/src/applications/mhv-medical-records/components/RecordList/VitalListItem.jsx b/src/applications/mhv-medical-records/components/RecordList/VitalListItem.jsx
@@ -4,13 +4,25 @@ import { Link } from 'react-router-dom';
 import { kebabCase } from 'lodash';
 
 import { vitalTypeDisplayNames } from '../../util/constants';
-import { formatDateInLocalTimezone } from '../../util/helpers';
+import {
+  formatDateInLocalTimezone,
+  sendDataDogAction,
+} from '../../util/helpers';
 
 const VitalListItem = props => {
   const { record, options = {} } = props;
   const { isAccelerating } = options;
   const displayName = vitalTypeDisplayNames[record.type];
 
+  const ddLabelName = useMemo(
+    () => {
+      return displayName.includes('Blood oxygen level')
+        ? 'Blood Oxygen over time Link'
+        : `${displayName} over time Link`;
+    },
+    [displayName],
+  );
+
   const updatedRecordType = useMemo(
     () => {
       const typeMap = {
@@ -105,6 +117,9 @@ const VitalListItem = props => {
             to={`/vitals/${kebabCase(updatedRecordType)}-history`}
             className="vads-u-line-height--4"
             data-testid={dataTestIds.reviewLink}
+            onClick={() => {
+              sendDataDogAction(ddLabelName);
+            }}
           >
             <strong>
               Review your{' '}

diff --git a/src/applications/mhv-medical-records/components/shared/DownloadingRecordsInfo.jsx b/src/applications/mhv-medical-records/components/shared/DownloadingRecordsInfo.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const DownloadingRecordsInfo = props => {
-  const { allowTxtDownloads } = props;
+  const { allowTxtDownloads, description } = props;
 
   const publicSharedContent = () => {
     return (
@@ -20,6 +20,7 @@ const DownloadingRecordsInfo = props => {
     <va-additional-info
       trigger="What to know before you download"
       class="no-print vads-u-margin-bottom--3"
+      data-dd-action-name={`What to know before you print or download - ${description}`}
     >
       {/* Use the "!== false" syntax because checking the inverse causes the component to be resized incorrectly
             when the value changes from undefined to true. */}
@@ -42,6 +43,7 @@ const DownloadingRecordsInfo = props => {
 
 DownloadingRecordsInfo.propTypes = {
   allowTxtDownloads: PropTypes.bool,
+  description: PropTypes.string,
 };
 
 export default DownloadingRecordsInfo;
diff --git a/src/applications/mhv-medical-records/components/shared/ExternalLink.jsx b/src/applications/mhv-medical-records/components/shared/ExternalLink.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
+import { sendDataDogAction } from '../../util/helpers';
 
-export default function ExternalLink({ href, text }) {
+export default function ExternalLink({ href, text, ddTag }) {
   const killExternalLinks = useSelector(
     state => state.featureToggles.mhv_medical_records_kill_external_links,
   );
@@ -14,12 +15,20 @@ export default function ExternalLink({ href, text }) {
           href="/"
           onClick={e => {
             e.preventDefault();
+            if (ddTag) sendDataDogAction(ddTag);
           }}
         >
           {text}
         </a>
       ) : (
-        <a href={href} rel="noreferrer">
+        <a
+          onClick={() => {
+            if (ddTag) sendDataDogAction(ddTag);
+          }}
+          href={href}
+          rel="noreferrer"
+          data-dd-action-name={ddTag}
+        >
           {text}
         </a>
       )}
@@ -28,6 +37,7 @@ export default function ExternalLink({ href, text }) {
 }
 
 ExternalLink.propTypes = {
+  ddTag: PropTypes.string,
   href: PropTypes.string,
   text: PropTypes.string,
 };