[MHV-55186] Update all V1 components to V3 web components on SM MHV

src/applications/mhv/secure-messaging/components/Alerts/CernerTransitioningFacilityAlert.jsx

@@ -16,8 +16,8 @@
 import FEATURE_FLAG_NAMES from '@department-of-veterans-affairs/platform-utilities/featureFlagNames';
 import { useSelector } from 'react-redux';
 import { selectUser } from '@department-of-veterans-affairs/platform-user/selectors';
 import { selectEhrDataByVhaId } from 'platform/site-wide/drupal-static-data/source-files/vamc-ehr/selectors';
 import { getVamcSystemNameFromVhaId } from 'platform/site-wide/drupal-static-data/source-files/vamc-ehr/utils';
 import { CernerTransitioningFacilities } from '../../util/constants';
 
 const CernerTransitioningFacilityAlert = () => {
@@ -26,108 +26,93 @@
   const transitioningFacilityId =
     CernerTransitioningFacilities.NORTH_CHICAGO.facilityId;
 
-  const cernerTransition556T30 = useMemo(
-    () => {
-      return featureToggles[FEATURE_FLAG_NAMES.cernerTransition556T30]
-        ? featureToggles[FEATURE_FLAG_NAMES.cernerTransition556T30]
-        : false;
-    },
-    [featureToggles],
-  );
-  const cernerTransition556T5 = useMemo(
-    () => {
-      return featureToggles[FEATURE_FLAG_NAMES.cernerTransition556T5]
-        ? featureToggles[FEATURE_FLAG_NAMES.cernerTransition556T5]
-        : false;
-    },
-    [featureToggles],
-  );
+  const cernerTransition556T30 = useMemo(() => {
+    return featureToggles[FEATURE_FLAG_NAMES.cernerTransition556T30]
+      ? featureToggles[FEATURE_FLAG_NAMES.cernerTransition556T30]
+      : false;
+  }, [featureToggles]);
+  const cernerTransition556T5 = useMemo(() => {
+    return featureToggles[FEATURE_FLAG_NAMES.cernerTransition556T5]
+      ? featureToggles[FEATURE_FLAG_NAMES.cernerTransition556T5]
+      : false;
+  }, [featureToggles]);
 
   const userFacilities = user.profile.facilities;
   const ehrFacilities = useSelector(selectEhrDataByVhaId);
 
-  const isTranstioningFacility = useMemo(
-    () => {
-      const transitioningFacility = ehrFacilities[transitioningFacilityId];
-      if (
-        userFacilities &&
-        transitioningFacility &&
-        transitioningFacility.ehr !== 'cerner' &&
-        userFacilities.some(
-          facility =>
-            parseInt(facility.facilityId, 10) ===
-            parseInt(transitioningFacility.vhaId, 10),
-        )
-      ) {
-        return getVamcSystemNameFromVhaId(
-          ehrFacilities,
-          transitioningFacility.vhaId,
-        );
-      }
-      return null;
-    },
-    [userFacilities, ehrFacilities],
-  );
-
-  const contentT30 = useMemo(
-    () => {
-      return (
-        isTranstioningFacility && (
-          <va-alert status="warning" class="vads-u-margin-y--2">
-            <h1 slot="headline">
-              Your health facility is moving to My VA Health
-            </h1>
-            <div>
-              <p>
-                <strong>{isTranstioningFacility}</strong> is moving to our My VA
-                Health portal.
-              </p>
-              <ul>
-                <li>
-                  Starting on <strong>March 4,</strong> you won’t be able to use
-                  this My HealtheVet tool to send messages to care teams at this
-                  facility.
-                </li>
-                <li>
-                  Starting on <strong>March 9,</strong> you can use the new My
-                  VA Health portal to send messages to these care teams.
-                </li>
-              </ul>
-            </div>
-          </va-alert>
-        )
+  const isTranstioningFacility = useMemo(() => {
+    const transitioningFacility = ehrFacilities[transitioningFacilityId];
+    if (
+      userFacilities &&
+      transitioningFacility &&
+      transitioningFacility.ehr !== 'cerner' &&
+      userFacilities.some(
+        facility =>
+          parseInt(facility.facilityId, 10) ===
+          parseInt(transitioningFacility.vhaId, 10),
+      )
+    ) {
+      return getVamcSystemNameFromVhaId(
+        ehrFacilities,
+        transitioningFacility.vhaId,
       );
-    },
-    [isTranstioningFacility],
-  );
+    }
+    return null;
+  }, [userFacilities, ehrFacilities]);
 
-  const contentT5 = useMemo(
-    () => {
-      return (
-        isTranstioningFacility && (
-          <va-alert status="warning" class="vads-u-margin-y--2">
-            <h1 slot="headline">
-              You can’t send messages to some of your care teams right now
-            </h1>
-            <div>
-              <p>
-                We’re moving data for <strong>{isTranstioningFacility}</strong>{' '}
-                to our My VA Health portal. On March 9, you can start using My
-                VA Health to send messages to care teams at this facility.
-              </p>
-              <p>To contact your care team now, call your facility.</p>
-              <p>
-                <a href="/find-locations" target="_blank">
-                  Find your VA health facility
-                </a>
-              </p>
-            </div>
-          </va-alert>
-        )
-      );
-    },
-    [isTranstioningFacility],
-  );
+  const contentT30 = useMemo(() => {
+    return (
+      isTranstioningFacility && (
+        <va-alert status="warning" class="vads-u-margin-y--2">
+          <h1 slot="headline">
+            Your health facility is moving to My VA Health
+          </h1>
+          <div>
+            <p>
+              <strong>{isTranstioningFacility}</strong> is moving to our My VA
+              Health portal.
+            </p>
+            <ul>
+              <li>
+                Starting on <strong>March 4,</strong> you won’t be able to use
+                this My HealtheVet tool to send messages to care teams at this
+                facility.
+              </li>
+              <li>
+                Starting on <strong>March 9,</strong> you can use the new My VA
+                Health portal to send messages to these care teams.
+              </li>
+            </ul>
+          </div>
+        </va-alert>
+      )
+    );
+  }, [isTranstioningFacility]);
+
+  const contentT5 = useMemo(() => {
+    return (
+      isTranstioningFacility && (
+        <va-alert status="warning" class="vads-u-margin-y--2">
+          <h1 slot="headline">
+            You can’t send messages to some of your care teams right now
+          </h1>
+          <div>
+            <p>
+              We’re moving data for <strong>{isTranstioningFacility}</strong> to
+              our My VA Health portal. On March 9, you can start using My VA
+              Health to send messages to care teams at this facility.
+            </p>
+            <p>To contact your care team now, call your facility.</p>
+            <p>
+              <a href="/find-locations" target="_blank">
+                Find your VA health facility
+              </a>
+            </p>
+          </div>
+        </va-alert>
+      )
+    );
+  }, [isTranstioningFacility]);
 
   const content = () => {
     if (cernerTransition556T5) {

src/applications/mhv/secure-messaging/components/AttachmentsList.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import recordEvent from 'platform/monitoring/record-event';
 import { focusElement } from '@department-of-veterans-affairs/platform-utilities/ui';
 import { VaAlert } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import RemoveAttachmentModal from './Modals/RemoveAttachmentModal';
@@ -40,34 +40,25 @@
   const attachmentNameId = id =>
     forPrint ? `has-attachment-for-print-${id}` : `has-attachment-${id}`;
 
-  useEffect(
-    () => {
-      focusElement(focusedElement);
-    },
-    [focusedElement],
-  );
+  useEffect(() => {
+    focusElement(focusedElement);
+  }, [focusedElement]);
 
-  useEffect(
-    () => {
-      if (attachFileSuccess && attachFileAlertRef.current.shadowRoot) {
-        setTimeout(() => {
-          setFocusedElement(
-            document.querySelector('#close-success-alert-button'),
-          );
-        }, 300);
-      }
-    },
-    [attachFileSuccess, attachments, attachFileAlertRef],
-  );
+  useEffect(() => {
+    if (attachFileSuccess && attachFileAlertRef.current.shadowRoot) {
+      setTimeout(() => {
+        setFocusedElement(
+          document.querySelector('#close-success-alert-button'),
+        );
+      }, 300);
+    }
+  }, [attachFileSuccess, attachments, attachFileAlertRef]);
 
-  useEffect(
-    () => {
-      if (attachments.length === 0) {
-        setAttachFileSuccess(false);
-      }
-    },
-    [attachments],
-  );
+  useEffect(() => {
+    if (attachments.length === 0) {
+      setAttachFileSuccess(false);
+    }
+  }, [attachments]);
 
   const removeAttachment = file => {
     const newAttArr = attachments?.filter(item => {
@@ -120,43 +111,28 @@
       </div>
       {editingEnabled && <HowToAttachFiles />}
 
-      {attachFileSuccess &&
-        attachments.length > 0 && (
-          <VaAlert
-            aria-live="polite"
-            aria-label="file successfully attached"
-            ref={attachFileAlertRef}
-            background-only
-            className="file-attached-success vads-u-margin-top--2"
-            data-testid="file-attached-success-alert"
-            disable-analytics
-            full-width="false"
-            show-icon
-            status="success"
-            onCloseEvent={handleSuccessAlertClose}
-          >
-            <p className="vads-u-margin-bottom--0">File attached</p>
-            <button
-              className="close-success-alert-button vads-u-padding--0p5"
-              id="close-success-alert-button"
-              data-testid="close-success-alert-button"
-              aria-label="Close notification"
-              type="button"
-              onClick={() => {
-                setAttachFileSuccess(false);
-                handleSuccessAlertClose();
-              }}
-            >
-              <i
-                className="fas fa-times-circle vads-u-color--black"
-                style={{ fontSize: '2.4rem' }}
-                alt="Close notification icon"
-                aria-hidden="true"
-                role="presentation"
-              />
-            </button>
-          </VaAlert>
-        )}
+      {attachFileSuccess && attachments.length > 0 && (
+        <VaAlert
+          closeable
+          closeBtnAriaLabel="Close notification"
+          aria-live="polite"
+          aria-label="file successfully attached"
+          ref={attachFileAlertRef}
+          background-only
+          className="file-attached-success vads-u-margin-top--2"
+          data-testid="file-attached-success-alert"
+          disable-analytics
+          full-width="false"
+          show-icon
+          status="success"
+          onCloseEvent={() => {
+            setAttachFileSuccess(false);
+            handleSuccessAlertClose();
+          }}
+        >
+          <p className="vads-u-margin-y--0">File attached</p>
+        </VaAlert>
+      )}
 
       <ul className="attachments-list">
         {!!attachments.length &&
@@ -186,7 +162,7 @@
                     <span>{file.name} </span>(
                     {getSize(file.size || file.attachmentSize)})
                   </span>
                   <button
                     type="button"
                     onClick={() => {
                       setIsModalVisible(true);

src/applications/mhv/secure-messaging/components/ComposeForm/CategoryInput.jsx

@@ -41,13 +41,10 @@ const CategoryInput = props => {
               data-dd-privacy="mask"
               data-testid="compose-category-radio-button"
               data-dd-action-name="Compose Category Radio Button"
-              style={{ display: 'flex' }}
               key={i}
               label={
                 RadioCategories[item]
-                  ? `${RadioCategories[item].label}: ${
-                      RadioCategories[item].description
-                    }`
+                  ? `${RadioCategories[item].label}: ${RadioCategories[item].description}`
                   : item
               }
               name="compose-message-categories"