department-of-veterans-affairs · vsaleem · Mar 4, 2024 · Mar 5, 2024 · Mar 5, 2024 · Mar 11, 2024
@@ -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';
@@ -66,7 +66,7 @@
        setAttachFileSuccess(false);
      }
    },
    [attachments],
  );

  const removeAttachment = file => {
@@ -123,6 +123,8 @@
       {attachFileSuccess &&
         attachments.length > 0 && (
           <VaAlert
+            closeable
+            closeBtnAriaLabel="Close notification"
             aria-live="polite"
             aria-label="file successfully attached"
             ref={attachFileAlertRef}
@@ -133,28 +135,12 @@
             full-width="false"
             show-icon
             status="success"
-            onCloseEvent={handleSuccessAlertClose}
+            onCloseEvent={() => {
+              setAttachFileSuccess(false);
+              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>
+            <p className="vads-u-margin-y--0">File attached</p>
           </VaAlert>
         )}
 
@@ -186,7 +172,7 @@
                    <span>{file.name} </span>(
                    {getSize(file.size || file.attachmentSize)})
                  </span>
                  <button
                    type="button"
                    onClick={() => {
                      setIsModalVisible(true);

@@ -41,7 +41,6 @@ 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]

@@ -148,7 +148,7 @@
 
   useEffect(
     () => {
-      if (recipients.allowedRecipients.length > 0) {
+      if (recipients?.allowedRecipients?.length > 0) {
         setRecipientsList([
           ...defaultRecipientsList,
           ...recipients.allowedRecipients,
@@ -162,7 +162,7 @@
        setMessageBody('');
      }
    },
    [recipients, draft],
  );

  useEffect(() => {
@@ -197,7 +197,7 @@
    }

    // The Blocked Triage Group alert should stay visible until the draft is sent or user navigates away
  }, []);

  useEffect(
    () => {
@@ -228,7 +228,7 @@
          .catch(setSendMessageFlag(false));
      }
    },
    [sendMessageFlag, isSaving],
  );

  useEffect(
@@ -246,7 +246,7 @@
        focusElement(lastFocusableElement);
      }
    },
    [alertStatus],
  );

  const recipientExists = recipientId => {
@@ -442,7 +442,7 @@
        }
      }
    },
    [
      attachments,
      category,
      checkMessageValidity,
@@ -521,7 +521,7 @@
        noTimeout();
      }
    },
    [
      draft,
      selectedRecipient,
      category,
@@ -541,7 +541,7 @@
        noTimeout();
      };
    },
    [beforeUnloadHandler],
  );

  return (
@@ -599,7 +599,8 @@
           <EditPreferences />
 
           {showBlockedTriageGroupAlert &&
-            (!noAssociations && !allTriageGroupsBlocked) && (
+            !noAssociations &&
+            !allTriageGroupsBlocked && (
               <div
                 className="
                   vads-u-border-top--1px
@@ -620,6 +621,7 @@
             !allTriageGroupsBlocked && (
               <>
                 <VaSelect
+                  uswds={false}
                   enable-analytics
                   id="recipient-dropdown"
                   label="To"
@@ -665,6 +667,7 @@
               <ViewOnlyDraftSection title={FormLabels.SUBJECT} body={subject} />
             ) : (
               <va-text-input
+                charcount
                 label={FormLabels.SUBJECT}
                 required
                 type="text"
@@ -678,8 +681,6 @@
                 data-dd-privacy="mask"
                 data-dd-action-name="Compose Message Subject Input Field"
                 maxlength="50"
-                uswds
-                charcount
               />
             )}
           </div>
@@ -712,26 +713,26 @@
             )}
           </div>
           {recipientsList &&
-            (!noAssociations &&
-              !allTriageGroupsBlocked && (
-                <section className="attachments-section">
-                  <AttachmentsList
-                    compose
-                    attachments={attachments}
-                    setAttachments={setAttachments}
-                    attachFileSuccess={attachFileSuccess}
-                    setAttachFileSuccess={setAttachFileSuccess}
-                    setNavigationError={setNavigationError}
-                    editingEnabled
-                  />
-
-                  <FileInput
-                    attachments={attachments}
-                    setAttachments={setAttachments}
-                    setAttachFileSuccess={setAttachFileSuccess}
-                  />
-                </section>
-              ))}
+            !noAssociations &&
+            !allTriageGroupsBlocked && (
+              <section className="attachments-section">
+                <AttachmentsList
+                  compose
+                  attachments={attachments}
+                  setAttachments={setAttachments}
+                  attachFileSuccess={attachFileSuccess}
+                  setAttachFileSuccess={setAttachFileSuccess}
+                  setNavigationError={setNavigationError}
+                  editingEnabled
+                />
+
+                <FileInput
+                  attachments={attachments}
+                  setAttachments={setAttachments}
+                  setAttachFileSuccess={setAttachFileSuccess}
+                />
+              </section>
+            )}
 
           <DraftSavedInfo />
           <ComposeFormActionButtons

@@ -36,6 +36,7 @@ const CrisisLineConnectButton = () => {
 
   return (
     <va-button
+      class="vads-u-margin-y--1"
       secondary="true"
       text="Connect with the Veterans Crisis Line"
       onClick={e => {

@@ -231,6 +231,7 @@ const FrequentlyAskedQuestions = ({ prefLink }) => {
               or night.
               <br />
               <va-button
+                class="vads-u-margin-y--1"
                 secondary="true"
                 text="Connect with the Veterans Crisis Line"
                 onClick={openCrisisModal}

@@ -218,6 +218,7 @@ const ManageFolderButtons = props => {
           text="Save"
           onClick={confirmRenameFolder}
           data-dd-action-name="Save Rename Folder Button"
+          class="xsmall-screen:vads-u-margin-y--1p5"
         />
         <va-button
           secondary="true"

@@ -173,6 +173,7 @@ const MoveMessageToFolderBtn = props => {
             secondary
             text="Cancel"
             onClick={closeModal}
+            class="vads-u-margin-left--1p5"
             data-dd-action-name="Cancel Move to Button"
           />
         </VaModal>

@@ -67,10 +67,7 @@ const CernerFacilityAlert = ({ cernerFacilities }) => {
               Go to My VA Health (opens in new tab)
             </a>
 
-            <va-additional-info
-              trigger="Having trouble opening My VA Health?"
-              uswds
-            >
+            <va-additional-info trigger="Having trouble opening My VA Health?">
               <div>Try these steps:</div>
               <ul>
                 <li>Disable your browser’s pop-up blocker</li>

@@ -30,7 +30,7 @@ import { threadSortingOptions } from '../../util/constants';
 
 // Arbitrarily set because the VaPagination component has a required prop for this.
 // This value dictates how many pages are displayed in a pagination component
-const MAX_PAGE_LIST_LENGTH = 5;
+const MAX_PAGE_LIST_LENGTH = 7;
 const {
   SENT_DATE_ASCENDING,
   SENT_DATE_DESCENDING,
@@ -178,7 +178,7 @@ const MessageList = props => {
       <div
         role="status"
         ref={displayingNumberOfMesssagesRef}
-        className="vads-u-padding-y--1 vads-l-row vads-u-margin-top--2 vads-u-border-top--1px vads-u-border-bottom--1px vads-u-border-color--gray-light"
+        className="vads-u-padding-y--1 vads-l-row vads-u-margin-top--2 vads-u-background-color--gray-light-alt vads-u-padding-left--1"
       >
         {`Showing ${displayNums.from} to ${
           displayNums.to
@@ -215,7 +215,7 @@ const MessageList = props => {
             onPageSelect={e => onPageChange(e.detail.page)}
             page={page}
             pages={paginatedMessages.current.length}
-            maxPageListLength={MAX_PAGE_LIST_LENGTH}
+            max-page-list-length={MAX_PAGE_LIST_LENGTH}
             showLastPage
           />
         )}

@@ -86,6 +86,7 @@ const CreateFolderModal = props => {
         onClick={confirmNewFolder}
         data-testid="create-folder-button"
         data-dd-action-name="Confirm Create New Folder Button"
+        class="xsmall-screen:vads-u-margin-y--1p5"
       />
       <va-button
         secondary="true"

@@ -26,14 +26,10 @@ const DeleteDraftModal = props => {
       <div className="vads-u-display--flex vads-u-flex-direction--column small-screen:vads-u-flex-direction--row">
         <va-button
           class="vads-u-padding-right--0 vads-u-padding-bottom--2 small-screen:vads-u-padding-right--2 small-screen:vads-u-padding-bottom--0"
-          text={unsavedNewDraft ? 'Yes, delete this draft' : 'Delete draft'}
+          text="Delete draft"
           onClick={props.onDelete}
         />
-        <va-button
-          secondary
-          text={unsavedNewDraft ? 'No, continue editing' : 'Cancel'}
-          onClick={props.onClose}
-        />
+        <va-button secondary text="Cancel" onClick={props.onClose} />
       </div>
     </VaModal>
   );

@@ -18,10 +18,7 @@ const DeleteMessageModal = props => {
       data-testid="delete-message-modal"
       data-dd-action-name="Delete Message Modal Closed"
     >
-      <div
-        className="modal-body vads-u-padding-bottom--1p5"
-        data-testid="delete-message-confirm-note"
-      >
+      <div className="modal-body" data-testid="delete-message-confirm-note">
         <p>{Prompts.Message.DELETE_MESSAGE_CONFIRM_NOTE}</p>
       </div>
     </VaModal>

@@ -87,13 +87,14 @@ const FilterBox = forwardRef((props, ref) => {
         </VaModal>
       )}
 
-      <va-accordion open-single>
-        <va-accordion-item id="additional-filter-accordion">
+      <va-accordion uswds={false} open-single>
+        <va-accordion-item uswds={false} id="additional-filter-accordion">
           <h3 slot="headline" className="headline-text">
             Add filters
           </h3>
           <div className="filter-content">
             <VaSelect
+              uswds={false}
               id="category-dropdown"
               label="Category"
               name="category"
@@ -110,6 +111,7 @@ const FilterBox = forwardRef((props, ref) => {
             </VaSelect>
 
             <VaSelect
+              uswds={false}
               id="date-range-dropdown"
               label="Date range"
               name="dateRange"

@@ -258,7 +258,7 @@ const SearchForm = props => {
         {!location.pathname.includes(Paths.DRAFTS) && (
           <va-additional-info
             trigger="What's a message ID?"
-            class="message-id-info"
+            class="message-id-info vads-u-margin-y--1p5"
           >
             A message ID is a number we assign to each message. If you sign up
             for email notifications, we’ll send you an email each time you get a

@@ -89,7 +89,7 @@ const ThreadListItem = props => {
     >
       <div className="unread-column vads-l-col">
         {activeFolder.folderId !== DefaultFolders.DRAFTS.id &&
-          (unreadMessages && (
+          unreadMessages && (
             <span>
               <i
                 role="img"
@@ -99,7 +99,7 @@ const ThreadListItem = props => {
                 alt="Unread message icon"
               />
             </span>
-          ))}
+          )}
       </div>
       <div className="vads-l-col vads-u-margin-left--1">
         <Link
@@ -184,7 +184,7 @@ const ThreadListItem = props => {
     >
       <div className="unread-column vads-l-col">
         {activeFolder.folderId !== DefaultFolders.DRAFTS.id &&
-          (unreadMessages && (
+          unreadMessages && (
             <span>
               <i
                 role="img"
@@ -195,7 +195,7 @@ const ThreadListItem = props => {
               />
               <span className="sr-only">Unread message</span>
             </span>
-          ))}
+          )}
       </div>
       <div className="vads-l-col vads-u-margin-left--1">
         <div className={getClassNames()} data-dd-privacy="mask">

@@ -28,6 +28,7 @@ const ThreadListSort = props => {
     >
       <h2 className="sr-only">Sort conversations</h2>
       <VaSelect
+        uswds={false}
         id="sort-order-dropdown"
         data-dd-action-name="Sort Order Dropdown"
         className="small-screen:vads-u-margin-right--1 vads-u-width--full small-screen:vads-u-flex--1"

@@ -94,7 +94,6 @@ const ThreadsList = props => {
             onPageSelect={e => paginationCallback(e.detail.page)}
             page={pageNum}
             pages={Math.ceil(threadList[0]?.threadPageSize / threadsPerPage)}
-            uswds
           />
         )}
       </div>

@@ -129,7 +129,6 @@ const AlertBackgroundBox = props => {
     <>
       {activeAlert && (
         <VaAlert
-          uswds
           ref={alertRef}
           background-only
           closeable={props.closeable}

@@ -133,6 +133,7 @@ const SmBreadcrumbs = () => {
         !crumbs?.label ? 'breadcrumbs--hidden' : ''
       }`}
     >
+      {/* We need to redo va-breadcrumbs functionality make it compatible with uswds */}
       <va-breadcrumbs
         uswds="false"
         label="Breadcrumb"

@@ -37,7 +37,6 @@ const InterstitialPage = props => {
         </p>
 
         <va-button
-          uswds
           data-testid="continue-button"
           onClick={acknowledge}
           text={continueButtonText}

@@ -63,7 +63,7 @@
   va-select {
 
     @media (min-width: $small-screen) {
-      max-width: 225px;
+      max-width: 250px;
     }
   }
 

@@ -133,9 +133,7 @@ describe('Delete Draft component', () => {
       'visible',
       'true',
     );
-    fireEvent.click(
-      document.querySelector('va-button[text="Yes, delete this draft"]'),
-    );
+    fireEvent.click(document.querySelector('va-button[text="Delete draft"]'));
     expect(screen.getByTestId('delete-draft-modal')).to.have.attribute(
       'visible',
       'false',

@@ -1,7 +1,7 @@
 import SecureMessagingSite from '../sm_site/SecureMessagingSite';
 import PatientInboxPage from '../pages/PatientInboxPage';
-import { AXE_CONTEXT, Locators } from '../utils/constants';
 import PatientMessageDraftsPage from '../pages/PatientMessageDraftsPage';
+import { AXE_CONTEXT, Locators } from '../utils/constants';
 import mockMultiDraftsResponse from '../fixtures/draftsResponse/multi-draft-response.json';
 
 describe('re-save multiple drafts in one thread', () => {