Hot fix that marks uswds components as false, fixes for these compone… (

#28643) * Hot fix that marks uswds components as false, fixes for these components are pending * upd: selectors * upd: assertions * cy tests fixes * cy tests fixes 2 * search box background color * cleanup linting err * search error color handling --------- Co-authored-by: fazilqa <fazil.mammadov@bylight.com> Co-authored-by: fazilqa <127263470+fazilqa@users.noreply.github.com> Co-authored-by: Alex Morgun <87077843+oleksii-morgun-va@users.noreply.github.com>
department-of-veterans-affairs · Mar 20, 2024 · 0f3d50b · 0f3d50b
1 parent 51c9da4
commit 0f3d50b
Show file tree

Hide file tree

Showing 13 changed files with 31 additions and 14 deletions.
diff --git a/src/applications/mhv/secure-messaging/components/ComposeForm/ComposeForm.jsx b/src/applications/mhv/secure-messaging/components/ComposeForm/ComposeForm.jsx
@@ -560,6 +560,7 @@ const ComposeForm = props => {
       <form className="compose-form" id="sm-compose-form">
         {saveError && (
           <VaModal
+            uswds={false}
             modalTitle={saveError.title}
             onCloseEvent={() => {
               setSaveError(null);
@@ -573,6 +574,7 @@ const ComposeForm = props => {
             <p>{saveError.p1}</p>
             {saveError.p2 && <p>{saveError.p2}</p>}
             <va-button
+              uswds={false}
               text="Continue editing"
               onClick={() => setSaveError(null)}
             />
@@ -620,6 +622,7 @@ const ComposeForm = props => {
             !allTriageGroupsBlocked && (
               <>
                 <VaSelect
+                  uswds={false}
                   enable-analytics
                   id="recipient-dropdown"
                   label="To"

diff --git a/src/applications/mhv/secure-messaging/components/ManageFolderButtons.jsx b/src/applications/mhv/secure-messaging/components/ManageFolderButtons.jsx
@@ -144,6 +144,7 @@ const ManageFolderButtons = props => {
       )}
       {isEmptyWarning && (
         <VaModal
+          uswds={false}
           className="modal"
           data-testid="error-folder-not-empty"
           visible={isEmptyWarning}
@@ -156,6 +157,7 @@ const ManageFolderButtons = props => {
         >
           <p>{Alerts.Folder.DELETE_FOLDER_ERROR_NOT_EMPTY_BODY}</p>
           <va-button
+            uswds={false}
             ref={emptyFolderConfirmBtn}
             text="Ok"
             onClick={() => {
@@ -190,6 +192,7 @@ const ManageFolderButtons = props => {
         </VaModal>
       )}
       <VaModal
+        uswds={false}
         className="modal"
         data-testid="rename-folder-modal"
         visible={renameModal}
@@ -215,11 +218,13 @@ const ManageFolderButtons = props => {
           charcount
         />
         <va-button
+          uswds={false}
           text="Save"
           onClick={confirmRenameFolder}
           data-dd-action-name="Save Rename Folder Button"
         />
         <va-button
+          uswds={false}
           secondary="true"
           text="Cancel"
           onClick={closeRenameModal}

diff --git a/...lications/mhv/secure-messaging/components/MessageActionButtons/MoveMessageToFolderBtn.jsx b/...lications/mhv/secure-messaging/components/MessageActionButtons/MoveMessageToFolderBtn.jsx
@@ -110,6 +110,7 @@ const MoveMessageToFolderBtn = props => {
         data-testid="message-actions-buttons-modal"
       >
         <VaModal
+          uswds={false}
           id="move-to-modal"
           data-testid="move-to-modal"
           large
@@ -165,11 +166,13 @@ const MoveMessageToFolderBtn = props => {
           <p /> {/* to create extra margin between radio and action buttons */}
           {/* For creating a new folder and moving the thread */}
           <va-button
+            uswds={false}
             text="Confirm"
             onClick={handleConfirmMoveFolderTo}
             data-dd-action-name="Confirm Move to Button"
           />
           <va-button
+            uswds={false}
             secondary
             text="Cancel"
             onClick={closeModal}

diff --git a/src/applications/mhv/secure-messaging/components/Modals/CreateFolderModal.jsx b/src/applications/mhv/secure-messaging/components/Modals/CreateFolderModal.jsx
@@ -56,6 +56,7 @@ const CreateFolderModal = props => {
 
   return (
     <VaModal
+      uswds={false}
       className="modal"
       visible={isCreateNewModalVisible}
       large="true"
@@ -82,12 +83,14 @@ const CreateFolderModal = props => {
         charcount
       />
       <va-button
+        uswds={false}
         text="Create"
         onClick={confirmNewFolder}
         data-testid="create-folder-button"
         data-dd-action-name="Confirm Create New Folder Button"
       />
       <va-button
+        uswds={false}
         secondary="true"
         text="Cancel"
         onClick={closeNewModal}

diff --git a/src/applications/mhv/secure-messaging/components/Search/FilterBox.jsx b/src/applications/mhv/secure-messaging/components/Search/FilterBox.jsx
@@ -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"
@@ -114,6 +115,7 @@ const FilterBox = forwardRef((props, ref) => {
             </VaSelect>
 
             <VaSelect
+              uswds={false}
               id="date-range-dropdown"
               label="Date range"
               name="dateRange"

diff --git a/src/applications/mhv/secure-messaging/components/ThreadList/ThreadListSort.jsx b/src/applications/mhv/secure-messaging/components/ThreadList/ThreadListSort.jsx
@@ -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"

diff --git a/src/applications/mhv/secure-messaging/components/shared/RouteLeavingGuard.jsx b/src/applications/mhv/secure-messaging/components/shared/RouteLeavingGuard.jsx
@@ -65,6 +65,7 @@ export const RouteLeavingGuard = ({
     <>
       <Prompt when={when} message={handleBlockedNavigation} />
       <VaModal
+        uswds={false}
         modalTitle={title}
         onCloseEvent={closeModal}
         status="warning"
@@ -78,11 +79,13 @@ export const RouteLeavingGuard = ({
         </p>
         {p2 && <p>{p2}</p>}
         <va-button
+          uswds={false}
           text={confirmButtonText}
           onClick={closeModal}
           data-dd-action-name="Cancel Navigation Continue Editing Button"
         />
         <va-button
+          uswds={false}
           secondary
           text={cancelButtonText}
           onClick={handleConfirmNavigationClick}

diff --git a/src/applications/mhv/secure-messaging/sass/search.scss b/src/applications/mhv/secure-messaging/sass/search.scss
@@ -1,7 +1,7 @@
 @import "~@department-of-veterans-affairs/formation/sass/shared-variables";
 
 .search-form {
-  background-color: var(--color-gray-lightest);
+  background-color: var(--uswds-system-color-gray-5);
   padding: 10px 16px;
   margin-top: 24px;
 
@@ -102,7 +102,7 @@
     margin: 6px 0 6px;
   }
   .error-message {
-    color: var(--color-secondary-dark);
+    color: $color-secondary-dark;
     padding-top: 0.8rem;
     font-weight: 700;
     margin-bottom: 1.2rem;

diff --git a/src/applications/mhv/secure-messaging/tests/e2e/pages/FolderManagementPage.js b/src/applications/mhv/secure-messaging/tests/e2e/pages/FolderManagementPage.js
@@ -193,7 +193,7 @@ class FolderManagementPage {
       .find('[class = "form-radio-buttons hydrated"]', {
         includeShadowDom: true,
       })
-      .find('[id = "radiobutton-Deleted"]', { includeShadowDom: true })
+      .find('[for = "radiobutton-Deletedinput"]', { includeShadowDom: true })
       .click();
   };
 
@@ -229,7 +229,7 @@ class FolderManagementPage {
       {},
     );
     cy.get(Locators.BUTTONS.MOVE_BUTTON_TEXT).click({ force: true });
-    cy.get(`[data-testid="radiobutton-${folderName}"]`)
+    cy.get(`[for="radiobutton-${folderName}input"]`)
       .should('exist')
       .click();
     cy.get(Locators.BUTTONS.TEXT_CONFIRM).click();

diff --git a/src/applications/mhv/secure-messaging/tests/e2e/pages/PatientComposePage.js b/src/applications/mhv/secure-messaging/tests/e2e/pages/PatientComposePage.js
@@ -298,10 +298,7 @@ class PatientComposePage {
   };
 
   verifyAlertModal = () => {
-    cy.get(`[modaltitle="We can't save this message yet"]`)
-      .shadow()
-      .find('[class="usa-modal va-modal-alert"]')
-      .should('contain', Data.MESSAGE_CANNOT_SAVE_YET);
+    cy.get(`h1`).should('contain', "We can't save this message yet");
   };
 
   clickOnContinueEditingButton = () => {

diff --git a/src/applications/mhv/secure-messaging/tests/e2e/pages/PatientReplyPage.js b/src/applications/mhv/secure-messaging/tests/e2e/pages/PatientReplyPage.js
@@ -147,7 +147,7 @@ class PatientReplyPage {
 
   verifyModalMessageDisplayAndBuddontsCantSaveDraft = () => {
     cy.get(Locators.REPLY_FORM)
-      .find('h2')
+      .find('h1')
       .should('have.text', "We can't save this message yet");
 
     cy.contains('Continue editing').should('be.visible');

diff --git a/...v/secure-messaging/tests/e2e/secure-messaging-compose-recipients-dropdown.cypress.spec.js b/...v/secure-messaging/tests/e2e/secure-messaging-compose-recipients-dropdown.cypress.spec.js
@@ -23,7 +23,7 @@ describe('recipients dropdown box', () => {
       .find('select')
       .find('option')
       .its('length')
-      .should('equal', mockRecipients.data.length + 2);
+      .should('equal', mockRecipients.data.length + 1);
     cy.get(Locators.ALERTS.MESS_CATAGO)
       .first()
       .click({ force: true });
@@ -51,7 +51,7 @@ describe('recipients dropdown box', () => {
         .find('select')
         .find('option')
         .its('length')
-        .should('equal', mockBlockedRecipientsresponse.data.length + 1);
+        .should('equal', mockBlockedRecipientsresponse.data.length);
       cy.get(Locators.ALERTS.REPT_SELECT)
         .first()
         .click();

diff --git a/.../secure-messaging/tests/e2e/secure-messaging-move-message-with-attachment.cypress.spec.js b/.../secure-messaging/tests/e2e/secure-messaging-move-message-with-attachment.cypress.spec.js
@@ -42,7 +42,7 @@ describe('Secure Messaging - Move Message with Attachment', () => {
       .find('[class = "form-radio-buttons hydrated"]', {
         includeShadowDom: true,
       })
-      .find('[id = "radiobutton-Deleted"]', { includeShadowDom: true })
+      .find('[for = "radiobutton-Deletedinput"]', { includeShadowDom: true })
       .click();
     cy.get(Locators.ALERTS.MOVE_MODAL)
       .find('va-button[text="Confirm"]')