upcoming: [DI-28682] - UX enhancements of CloudPulseDateTimeRangePicker in metrics (#13216)

* upcoming: [DI-28682] - UX enhancements of Time Range Picker in CloudPulse metrics

* upcoming: [DI-28682] - Use small screens

* upcoming: [DI-28682] - Allow backdrop click

* upcoming: [DI-28682] - Remove and use existing timezone

* Added changeset: UX enhancements of `CloudPulseDateTimeRangePicker` and `DateTimeRangePicker` components in cloudpulse metrics

* upcoming: [DI-28682] - Background style update

* Integrate user profile for timezone handling

* upcoming: [DI-28682] - Contextual view changes

* upcoming: [DI-28682] - Fix for dependency

* Added: [DI-28776] - Fix one eslint issue

Author: venkymano-akamai

packages/manager/.changeset/pr-13216-upcoming-features-1766163912058.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+UX enhancements of `CloudPulseDateTimeRangePicker` and `DateTimeRangePicker` components in cloudpulse metrics ([#13216](https://github.com/linode/manager/pull/13216))

packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts

@@ -290,12 +290,11 @@ describe('Integration Tests for DBaaS Dashboard ', () => {
       .click();
 
     // Select a time duration from the autocomplete input.
-    // Updated selector for MUI x-date-pickers v8 - click on the wrapper div
-    cy.get('[aria-labelledby="start-date"]').parent().as('startDateInput');
+    ui.button.findByTitle('Last hour').as('timeRangeTrigger');
+    cy.get('@timeRangeTrigger').click();
 
-    cy.get('@startDateInput').click();
-
-    cy.get('[data-qa-preset="Last day"]').click();
+    // select a different preset but cancel
+    ui.button.findByTitle('Last day').click();
 
     // Click the "Apply" button to confirm the end date and time
     cy.get('[data-qa-buttons="apply"]')

packages/manager/cypress/e2e/core/cloudpulse/linode-widget-verification.spec.ts

@@ -179,12 +179,11 @@ describe('Integration Tests for Linode Dashboard ', () => {
       .should('be.visible')
       .click();
     // Select a time duration from the autocomplete input.
-    // Updated selector for MUI x-date-pickers v8 - click on the wrapper div
-    cy.get('[aria-labelledby="start-date"]').parent().as('startDateInput');
+    ui.button.findByTitle('Last hour').as('timeRangeTrigger');
+    cy.get('@timeRangeTrigger').click();
 
-    cy.get('@startDateInput').click();
-
-    cy.get('[data-qa-preset="Last day"]').click();
+    // select a different preset but cancel
+    ui.button.findByTitle('Last day').click();
 
     // Click the "Apply" button to confirm the end date and time
     cy.get('[data-qa-buttons="apply"]')

packages/manager/cypress/e2e/core/cloudpulse/nodebalancer-widget-verification.spec.ts

@@ -182,12 +182,11 @@ describe('Integration Tests for Nodebalancer Dashboard ', () => {
       .click();
 
     // Select a time duration from the autocomplete input.
-    // Updated selector for MUI x-date-pickers v8 - click on the wrapper div
-    cy.get('[aria-labelledby="start-date"]').parent().as('startDateInput');
+    ui.button.findByTitle('Last hour').as('timeRangeTrigger');
+    cy.get('@timeRangeTrigger').click();
 
-    cy.get('@startDateInput').click();
-
-    cy.get('[data-qa-preset="Last day"]').click();
+    // select a different preset but cancel
+    ui.button.findByTitle('Last day').click();
 
     cy.get('[data-qa-buttons="apply"]')
       .should('be.visible')