DatePicker: Fix calendar not showing correct selected range when changing time zones (#73273)

* user essentials mob! 🔱 * user essentials mob! 🔱 lastFile:packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx * user essentials mob! 🔱 lastFile:packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx * user essentials mob! 🔱 * user essentials mob! 🔱 lastFile:e2e/dashboards-suite/dashboard-timepicker.spec.ts * user essentials mob! 🔱 lastFile:e2e/dashboards-suite/dashboard-timepicker.spec.ts * user essentials mob! 🔱 * user essentials mob! 🔱 * restore custom.ini * run betterer + prettier --------- Co-authored-by: joshhunt <josh@trtr.co> Co-authored-by: Roxana Turc <anamaria-roxana.turc@grafana.com> Co-authored-by: Tobias Skarhed <tobias.skarhed@gmail.com> Co-authored-by: eledobleefe <laura.fernandez@grafana.com>
2023-08-23 12:57:32 +00:00
parent fc9b8f6be1
commit 45ff0b5cf6
15 changed files with 159 additions and 23 deletions
@@ -0,0 +1,54 @@
+import { e2e } from '@grafana/e2e';
+
+e2e.scenario({
+  describeName: 'Dashboard timepicker',
+  itName: 'Shows the correct calendar days with custom timezone set via preferences',
+  addScenarioDataSource: false,
+  addScenarioDashBoard: false,
+  skipScenario: false,
+  scenario: () => {
+    e2e.flows.setUserPreferences({
+      timezone: 'Asia/Tokyo',
+    });
+
+    // Open dashboard with time range from 8th to end of 10th.
+    // Will be Tokyo time because of above preference
+    e2e.flows.openDashboard({
+      uid: '5SdHCasdf',
+      timeRange: {
+        zone: 'Default',
+        from: '2022-06-08 00:00:00',
+        to: '2022-06-10 23:59:59',
+      },
+    });
+
+    // Assert that the calendar shows 08 and 09 and 10 as selected days
+    e2e.components.TimePicker.openButton().click();
+    e2e.components.TimePicker.calendar.openButton().first().click();
+    e2e().get('.react-calendar__tile--active, .react-calendar__tile--hasActive').should('have.length', 3);
+  },
+});
+
+e2e.scenario({
+  describeName: 'Dashboard timepicker',
+  itName: 'Shows the correct calendar days with custom timezone set via time picker',
+  addScenarioDataSource: false,
+  addScenarioDashBoard: false,
+  skipScenario: false,
+  scenario: () => {
+    // Open dashboard with time range from 2022-06-08 00:00:00 to 2022-06-10 23:59:59 in Tokyo time
+    e2e.flows.openDashboard({
+      uid: '5SdHCasdf',
+      timeRange: {
+        zone: 'Asia/Tokyo',
+        from: '2022-06-08 00:00:00',
+        to: '2022-06-10 23:59:59',
+      },
+    });
+
+    // Assert that the calendar shows 08 and 09 and 10 as selected days
+    e2e.components.TimePicker.openButton().click();
+    e2e.components.TimePicker.calendar.openButton().first().click();
+    e2e().get('.react-calendar__tile--active, .react-calendar__tile--hasActive').should('have.length', 3);
+  },
+});
@@ -115,6 +115,7 @@ function join () {
  echo "$res"
 }

+export TZ="Pacific/Honolulu"

 yarn $CMD --env "$(join env)" \
  --config "$(join cypressConfig)" \