From 5ee4d907c1ecbb5eec722e3179278bcc7d603f2d Mon Sep 17 00:00:00 2001
From: Kyle Cardwell <79024398+KyleCardwell@users.noreply.github.com>
Date: Tue, 5 Nov 2024 10:28:52 -0700
Subject: [PATCH] added datadog action names and privacy masks to hide PHI
 (#32854)

* added datadog action names and privacy masks to hide PHI

* adjusted case of text to align with other datadog naming convention
---
 .../components/ComposeForm/ReplyDraftItem.jsx |  1 +
 .../components/ComposeForm/ReplyDrafts.jsx    |  1 +
 .../components/ComposeForm/ReplyForm.jsx      |  7 ++++-
 .../components/FacilityCheckboxGroup.jsx      |  1 +
 .../components/FoldersList.jsx                | 23 ++++++++++++--
 .../components/MessageList/FolderHeader.jsx   | 14 +++++++--
 .../components/Search/SearchForm.jsx          | 11 +++++++
 .../components/ThreadList/ThreadListItem.jsx  | 16 ++++++++--
 .../shared/BlockedTriageGroupAlert.jsx        | 16 ++++++++--
 .../mhv-secure-messaging/sass/search.scss     |  7 +++--
 .../mhv-secure-messaging/util/helpers.js      | 31 ++++++++++++++++---
 11 files changed, 112 insertions(+), 16 deletions(-)

diff --git a/src/applications/mhv-secure-messaging/components/ComposeForm/ReplyDraftItem.jsx b/src/applications/mhv-secure-messaging/components/ComposeForm/ReplyDraftItem.jsx
index 94532b650726..e9dbbaf63777 100644
--- a/src/applications/mhv-secure-messaging/components/ComposeForm/ReplyDraftItem.jsx
+++ b/src/applications/mhv-secure-messaging/components/ComposeForm/ReplyDraftItem.jsx
@@ -484,6 +484,7 @@ const ReplyDraftItem = props => {
           data-testid="draft-reply-to"
           style={{ whiteSpace: 'break-spaces', overflowWrap: 'anywhere' }}
           data-dd-privacy="mask"
+          data-dd-action-name="Reply Draft Accordion Header"
         >
           <div className="vads-u-margin-right--0p5 vads-u-margin-top--0p25">
             <va-icon icon="undo" aria-hidden="true" />
diff --git a/src/applications/mhv-secure-messaging/components/ComposeForm/ReplyDrafts.jsx b/src/applications/mhv-secure-messaging/components/ComposeForm/ReplyDrafts.jsx
index 3d7d3baba2c7..56d100a6da7c 100644
--- a/src/applications/mhv-secure-messaging/components/ComposeForm/ReplyDrafts.jsx
+++ b/src/applications/mhv-secure-messaging/components/ComposeForm/ReplyDrafts.jsx
@@ -36,6 +36,7 @@ const ReplyDrafts = props => {
                 key={singleDraft.messageId}
                 open={isEditing}
                 subheader={subheader}
+                data-dd-privacy="mask"
               >
                 <ReplyDraftItem
                   cannotReply={cannotReply || showBlockedTriageGroupAlert}
diff --git a/src/applications/mhv-secure-messaging/components/ComposeForm/ReplyForm.jsx b/src/applications/mhv-secure-messaging/components/ComposeForm/ReplyForm.jsx
index d8b6e4b03b07..c378e3bae524 100644
--- a/src/applications/mhv-secure-messaging/components/ComposeForm/ReplyForm.jsx
+++ b/src/applications/mhv-secure-messaging/components/ComposeForm/ReplyForm.jsx
@@ -131,7 +131,12 @@ const ReplyForm = props => {
   return (
     replyMessage && (
       <>
-        <h1 ref={header} className="page-title">
+        <h1
+          ref={header}
+          className="page-title"
+          data-dd-privacy="mask"
+          data-dd-action-name="Reply Form Header"
+        >
           {messageTitle}
         </h1>
 
diff --git a/src/applications/mhv-secure-messaging/components/FacilityCheckboxGroup.jsx b/src/applications/mhv-secure-messaging/components/FacilityCheckboxGroup.jsx
index 82aaa347cbae..9d724e6fb9a4 100644
--- a/src/applications/mhv-secure-messaging/components/FacilityCheckboxGroup.jsx
+++ b/src/applications/mhv-secure-messaging/components/FacilityCheckboxGroup.jsx
@@ -63,6 +63,7 @@ const FacilityCheckboxGroup = props => {
                 onVaChange={() => {
                   updatePreferredTeam(team.triageTeamId, null);
                 }}
+                data-dd-action-name="Triage Group Name"
               />
             );
           })}
diff --git a/src/applications/mhv-secure-messaging/components/FoldersList.jsx b/src/applications/mhv-secure-messaging/components/FoldersList.jsx
index 33d5e4ec9254..2f10f1ab20ee 100644
--- a/src/applications/mhv-secure-messaging/components/FoldersList.jsx
+++ b/src/applications/mhv-secure-messaging/components/FoldersList.jsx
@@ -7,22 +7,41 @@ import { DefaultFolders as Folders } from '../util/constants';
 const FoldersList = props => {
   const { folders, showUnread } = props;
 
+  const folderNameDdAction = folderName => {
+    const isCustomFolder =
+      folderName !== Folders.INBOX.header &&
+      folderName !== Folders.SENT.header &&
+      folderName !== Folders.DRAFTS.header &&
+      folderName !== Folders.DELETED.header;
+
+    const ddTitle = `${
+      isCustomFolder ? 'Custom' : `${folderName}`
+    } Folder Link`;
+    const ddPrivacy = `${isCustomFolder ? 'mask' : 'allow'}`;
+
+    return { ddTitle, ddPrivacy };
+  };
+
   return (
     <div className="vads-u-margin-top--2">
-      <ul className="folders-list">
+      <ul className="folders-list" data-dd-action-name="Folders List Container">
         {!!folders.length &&
           folders.map(folder => (
             <li
               key={folder.name}
               className="folder-link"
               data-testid={folder.name}
+              data-dd-privacy="mask"
             >
               <Link to={folderPathByFolderId(folder.id)}>
                 <div className="icon-span-container">
                   <va-icon icon="folder" size={3} aria-hidden="true" />
                   <span
                     className="vads-u-margin-left--1"
-                    data-dd-privacy="mask"
+                    data-dd-privacy={folderNameDdAction(folder.name).ddPrivacy}
+                    data-dd-action-name={
+                      folderNameDdAction(folder.name).ddTitle
+                    }
                   >
                     {folder.id === Folders.DELETED.id
                       ? Folders.DELETED.header
diff --git a/src/applications/mhv-secure-messaging/components/MessageList/FolderHeader.jsx b/src/applications/mhv-secure-messaging/components/MessageList/FolderHeader.jsx
index 6ad108d0fe1d..1164213a0457 100644
--- a/src/applications/mhv-secure-messaging/components/MessageList/FolderHeader.jsx
+++ b/src/applications/mhv-secure-messaging/components/MessageList/FolderHeader.jsx
@@ -93,10 +93,20 @@ const FolderHeader = props => {
     [folder, location.pathname],
   );
 
+  const { folderName, ddTitle, ddPrivacy } = handleHeader(
+    folder.folderId,
+    folder,
+  );
+
   return (
     <>
-      <h1 className="vads-u-margin-bottom--1" data-testid="folder-header">
-        {handleHeader(folder.folderId, folder)}
+      <h1
+        className="vads-u-margin-bottom--1"
+        data-testid="folder-header"
+        data-dd-action-name={ddTitle}
+        data-dd-privacy={ddPrivacy}
+      >
+        {folderName}
       </h1>
 
       {folder.folderId === Folders.INBOX.id && (
diff --git a/src/applications/mhv-secure-messaging/components/Search/SearchForm.jsx b/src/applications/mhv-secure-messaging/components/Search/SearchForm.jsx
index 97ebb02a2fed..102bd423ca3a 100644
--- a/src/applications/mhv-secure-messaging/components/Search/SearchForm.jsx
+++ b/src/applications/mhv-secure-messaging/components/Search/SearchForm.jsx
@@ -214,6 +214,15 @@ const SearchForm = props => {
     );
   };
 
+  const isCustomFolder =
+    folder.name !== DefaultFolders.INBOX.header &&
+    folder.name !== DefaultFolders.SENT.header &&
+    folder.name !== DefaultFolders.DRAFTS.header &&
+    folder.name !== DefaultFolders.DELETED.header;
+
+  const ddTitle = `${isCustomFolder ? 'Custom Folder' : `${folder.name}`}`;
+  const ddPrivacy = `${isCustomFolder ? 'mask' : 'allow'}`;
+
   const filterLabelHeading = useMemo(
     () => {
       return `Filter messages in ${
@@ -249,6 +258,8 @@ const SearchForm = props => {
               setFiltersCleared(false);
             }
           }}
+          data-dd-privacy={ddPrivacy}
+          data-dd-action-name={`Filter Messages in ${ddTitle}`}
         >
           {filterLabelHeading}
         </h2>
diff --git a/src/applications/mhv-secure-messaging/components/ThreadList/ThreadListItem.jsx b/src/applications/mhv-secure-messaging/components/ThreadList/ThreadListItem.jsx
index 25b3d83943d6..90f3fa212a6c 100644
--- a/src/applications/mhv-secure-messaging/components/ThreadList/ThreadListItem.jsx
+++ b/src/applications/mhv-secure-messaging/components/ThreadList/ThreadListItem.jsx
@@ -73,6 +73,11 @@ const ThreadListItem = props => {
   const addressText =
     location.pathname === Paths.DRAFTS ? recipientName : senderName;
 
+  const ddTitle =
+    location.pathname === Paths.DRAFTS || location.pathname === Paths.SENT
+      ? 'Triage Group Name'
+      : 'Clinician Name';
+
   return (
     <div
       className="thread-list-item vads-l-row vads-u-padding-y--1p5 medium-screen:vads-u-padding-y--2 vads-u-border-bottom--1px vads-u-border-color--gray-light"
@@ -114,9 +119,16 @@ const ThreadListItem = props => {
         </Link>
         <div className={getClassNames()} data-dd-privacy="mask">
           {location.pathname !== Paths.SENT ? (
-            <span>{getHighlightedText(addressText)}</span>
+            <span data-dd-privacy="mask" data-dd-action-name={ddTitle}>
+              {getHighlightedText(addressText)}
+            </span>
           ) : (
-            <span>To: {recipientName}</span>
+            <span
+              data-dd-privacy="mask"
+              data-dd-action-name="Triage Group Name"
+            >
+              To: {recipientName}
+            </span>
           )}
         </div>
         <div
diff --git a/src/applications/mhv-secure-messaging/components/shared/BlockedTriageGroupAlert.jsx b/src/applications/mhv-secure-messaging/components/shared/BlockedTriageGroupAlert.jsx
index 89fd3b7bd1dc..38ceaa7e42ad 100644
--- a/src/applications/mhv-secure-messaging/components/shared/BlockedTriageGroupAlert.jsx
+++ b/src/applications/mhv-secure-messaging/components/shared/BlockedTriageGroupAlert.jsx
@@ -224,6 +224,8 @@ const BlockedTriageGroupAlert = props => {
       status="warning"
       trigger={alertTitleText}
       data-testid="blocked-triage-group-alert"
+      data-dd-privacy="mask"
+      data-dd-action-name="Blocked Triage Group Alert Expandable"
     >
       <div className="vads-u-padding-left--4 vads-u-padding-bottom--1">
         <p className="vads-u-margin-bottom--1p5">{alertInfoText}</p>
@@ -233,7 +235,12 @@ const BlockedTriageGroupAlert = props => {
           blockedTriageList?.length > 1 && (
             <ul>
               {blockedTriageList?.map((blockedTriageGroup, i) => (
-                <li data-testid="blocked-triage-group" key={i}>
+                <li
+                  data-testid="blocked-triage-group"
+                  key={i}
+                  data-dd-privacy="mask"
+                  data-dd-action-name="Blocked Triage Group Name"
+                >
                   {`${
                     blockedTriageGroup.type === Recipients.FACILITY
                       ? 'Care teams at '
@@ -253,7 +260,12 @@ const BlockedTriageGroupAlert = props => {
       visible
       data-testid="blocked-triage-group-alert"
     >
-      <h2 slot="headline">{alertTitleText}</h2>
+      <h2
+        slot="headline"
+        data-dd-action-name="Blocked Triage Group Alert Header"
+      >
+        {alertTitleText}
+      </h2>
       <div>
         <p className="vads-u-margin-bottom--1p5">{alertInfoText}</p>
         <a href="/find-locations/">Find your VA health facility</a>
diff --git a/src/applications/mhv-secure-messaging/sass/search.scss b/src/applications/mhv-secure-messaging/sass/search.scss
index 1bd26be0b9c8..0331f0733fdc 100644
--- a/src/applications/mhv-secure-messaging/sass/search.scss
+++ b/src/applications/mhv-secure-messaging/sass/search.scss
@@ -24,7 +24,6 @@
   }
 
   .filter-input-box-container {
-    margin-top: -30px;
     position: relative;
     display: flex;
     flex-wrap: nowrap;
@@ -42,7 +41,7 @@
   va-button::part(button) {
     width: 100%;
 
-  @media (min-width: $small-screen) {
+    @media (min-width: $small-screen) {
       width: auto;
     }
   }
@@ -51,6 +50,10 @@
     margin: 0px;
   }
 
+  #filter-input::part(label) {
+    margin-top: 0;
+  }
+
   .filter-input-box {
     margin: 0px;
   }
diff --git a/src/applications/mhv-secure-messaging/util/helpers.js b/src/applications/mhv-secure-messaging/util/helpers.js
index e27180034b6f..fb54c1581605 100644
--- a/src/applications/mhv-secure-messaging/util/helpers.js
+++ b/src/applications/mhv-secure-messaging/util/helpers.js
@@ -184,18 +184,39 @@ export const getLastSentMessage = messages => {
 };
 
 export const handleHeader = (folderId, folder) => {
+  let folderName;
+
   switch (folderId) {
     case Folders.INBOX.id: // Inbox
-      return Folders.INBOX.header;
+      folderName = Folders.INBOX.header;
+      break;
     case Folders.SENT.id: // Sent
-      return Folders.SENT.header;
+      folderName = Folders.SENT.header;
+      break;
     case Folders.DRAFTS.id: // Drafts
-      return Folders.DRAFTS.header;
+      folderName = Folders.DRAFTS.header;
+      break;
     case Folders.DELETED.id: // Trash
-      return Folders.DELETED.header;
+      folderName = Folders.DELETED.header;
+      break;
     default:
-      return folder.name;
+      folderName = folder.name;
   }
+
+  const isCustomFolder =
+    folderName !== Folders.INBOX.header &&
+    folderName !== Folders.SENT.header &&
+    folderName !== Folders.DRAFTS.header &&
+    folderName !== Folders.DELETED.header;
+
+  const ddTitle = `${isCustomFolder ? 'Custom Folder' : `${folderName}`} h1`;
+  const ddPrivacy = `${isCustomFolder ? 'mask' : 'allow'}`;
+
+  return {
+    folderName,
+    ddTitle,
+    ddPrivacy,
+  };
 };
 
 export const updateMessageInThread = (thread, response) => {