MM-61382 Date/Time Picker Input Fix and Refactor (#31330)

e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_3_spec.ts

@@ -118,17 +118,19 @@ describe('MM-T4065 Setting manual status clear time less than 7 days away', () =
 
     it('MM-T4065_7 should show selected time in the time input field', () => {
         // * Check that the timepicker menu is not present and click to open it
-        cy.get('#custom_status_modal .dateTime__time-menu #expiryTimeMenu').should('not.exist');
-        cy.get('#custom_status_modal .dateTime__time-menu').click();
+        cy.get('#expiryTimeMenu').should('not.exist');
+
+        // # Click the time button
+        cy.get('#custom_status_modal #time_button').click();
 
         // * Check that the time picker menu is present
-        cy.get('#custom_status_modal .dateTime__time-menu #expiryTimeMenu').should('exist');
+        cy.get('#expiryTimeMenu').should('exist');
 
         // # Choose the last item in the time picker menu
-        cy.get('#custom_status_modal .dateTime__time-menu #expiryTimeMenu li').last().click();
+        cy.get('#expiryTimeMenu li').last().click();
 
         // * Check that the time input contains the correct time
-        cy.get('.dateTime__time-menu .dateTime__input time').should('have.text', '11:30 PM');
+        cy.get('#custom_status_modal #time_button time').should('have.text', '11:30 PM');
     });
 
     it('MM-T4065_8 should set custom status when click on Set Status', () => {

e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_4_spec.ts

@@ -112,7 +112,7 @@ describe('MM-T4066 Setting manual status clear time more than 7 days away', () =
         cy.get('.date-picker__popper').find(`.rdp-month button[aria-label="${dateToBeSelected.format('Do MMMM (dddd)')}"]`).click();
 
         // * Check that the date input should have the correct value
-        cy.get('input#customStatus__calendar-input').should('have.value', dateToBeSelected.format('YYYY-MM-DD'));
+        cy.get('#custom_status_modal [role="button"][aria-label*="Date"]').should('contain.text', dateToBeSelected.format('MMM DD'));
     });
 
     it('MM-T4066_7 should set custom status when click on Set Status', () => {

e2e-tests/cypress/tests/integration/channels/status/status_dnd_1_spec.js

@@ -20,8 +20,6 @@ describe('DND Status - Setting Your Own DND Status', () => {
     ];
 
     before(() => {
-        cy.shouldHaveFeatureFlag('TimedDND', true);
-
         // # Login as test user and visit channel
         cy.apiInitSetup({loginAfter: true}).then(({team, channel}) => {
             cy.visit(`/${team.name}/channels/${channel.name}`);
@@ -77,13 +75,13 @@ describe('DND Status - Setting Your Own DND Status', () => {
         cy.get(`.SubMenuItemContainer li#${dndTimes[4]}`).click();
 
         // # Click on DayPicker input field
-        cy.get('.DayPickerInput input').click();
+        cy.get('.dateTime__date .date-time-input').click();
 
         // * Verify that DayPicker overlay is visible
-        cy.get('.DayPickerInput-Overlay').should('be.visible');
+        cy.get('.date-picker__popper').should('be.visible');
 
         // # Click on tomorrow's day
-        cy.get('.DayPickerInput-Overlay').find('.DayPicker-Day--today').next('.DayPicker-Day').click();
+        cy.get('.date-picker__popper').find('.rdp-day_today').next('.rdp-day').click();
 
         // # Click 'Disable Notification' button
         cy.get('.DndModal__footer span').should('have.text', 'Disable Notifications').click();
@@ -105,13 +103,13 @@ describe('DND Status - Setting Your Own DND Status', () => {
         cy.get(`.SubMenuItemContainer li#${dndTimes[4]}`).click();
 
         // # Click on time picker input field
-        cy.get('.MenuWrapper .DndModal__input').click();
+        cy.get('.dateTime__time .date-time-input').click();
 
         // * Verify that time picker menu is visible
-        cy.get('ul.Menu__content.dropdown-menu').should('be.visible');
+        cy.get('#expiryTimeMenu').should('be.visible');
 
         // # Click on last time available in list
-        cy.get('ul.Menu__content.dropdown-menu').last('.MenuItem').click();
+        cy.get('#expiryTimeMenu li').last().click();
 
         // # Click 'Disable Notification' button
         cy.get('.DndModal__footer span').should('have.text', 'Disable Notifications').click();
@@ -133,22 +131,22 @@ describe('DND Status - Setting Your Own DND Status', () => {
         cy.get(`.SubMenuItemContainer li#${dndTimes[4]}`).click();
 
         // # Click on DayPicker input field
-        cy.get('.DayPickerInput input').click();
+        cy.get('.dateTime__date .date-time-input').click();
 
         // * Verify that DayPicker overlay is visible
-        cy.get('.DayPickerInput-Overlay').should('be.visible');
+        cy.get('.date-picker__popper').should('be.visible');
 
         // # Click on tomorrow's day
-        cy.get('.DayPickerInput-Overlay').find('.DayPicker-Day--today').next('.DayPicker-Day').click();
+        cy.get('.date-picker__popper').find('.rdp-day_today').next('.rdp-day').click();
 
         // # Click on time picker input field
-        cy.get('.MenuWrapper .DndModal__input').click();
+        cy.get('.dateTime__time .date-time-input').click();
 
         // * Verify that time picker menu is visible
-        cy.get('ul.Menu__content.dropdown-menu').should('be.visible');
+        cy.get('#expiryTimeMenu').should('be.visible');
 
         // # Click on last time available in list
-        cy.get('ul.Menu__content.dropdown-menu').last('.MenuItem').click();
+        cy.get('#expiryTimeMenu li').last().click();
 
         // # Click 'Disable Notification' button
         cy.get('.DndModal__footer span').should('have.text', 'Disable Notifications').click();