@grafana/e2e: improvements (#25908)

* Set time range when creating a dashboard

* Optionally set time range when opening a dashboard

* Default time range to 6 hours instead of 1 hour

* Minor changes

packages/grafana-e2e/src/flows/addDashboard.ts

+import { DashboardTimeRangeConfig, setDashboardTimeRange } from './setDashboardTimeRange';
 import { DeleteDashboardConfig } from './deleteDashboard';
 import { e2e } from '../index';
 import { getDashboardUid } from '../support/url';
 import { selectOption } from './selectOption';
 
 export interface AddDashboardConfig {
+  timeRange: DashboardTimeRangeConfig;
   timezone: string;
   title: string;
 }
@@ -11,12 +13,16 @@ export interface AddDashboardConfig {
 // @todo this actually returns type `Cypress.Chainable`
 export const addDashboard = (config?: Partial<AddDashboardConfig>): any => {
   const fullConfig = {
+    timeRange: {
+      from: '2020-01-01 00:00:00',
+      to: '2020-01-01 06:00:00',
+    },
     timezone: 'Coordinated Universal Time',
     title: `e2e-${Date.now()}`,
     ...config,
   } as AddDashboardConfig;
 
-  const { timezone, title } = fullConfig;
+  const { timeRange, timezone, title } = fullConfig;
 
   e2e().logToConsole('Adding dashboard with title:', title);
 
@@ -24,9 +30,16 @@ export const addDashboard = (config?: Partial<AddDashboardConfig>): any => {
 
   e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click();
 
+  // @todo use the time range picker's time zone control
   selectOption(e2e.pages.Dashboard.Settings.General.timezone(), timezone);
 
-  e2e.pages.Dashboard.Settings.General.saveDashBoard().click();
+  e2e.components.BackButton.backArrow().click();
+
+  if (timeRange) {
+    setDashboardTimeRange(timeRange);
+  }
+
+  e2e.pages.Dashboard.Toolbar.toolbarItems('Save dashboard').click();
 
   e2e.pages.SaveDashboardAsModal.newName()
     .clear()

packages/grafana-e2e/src/flows/openDashboard.ts

+import { DashboardTimeRangeConfig, setDashboardTimeRange } from './setDashboardTimeRange';
 import { e2e } from '../index';
 import { getScenarioContext } from '../support/scenarioContext';
 
 export interface OpenDashboardConfig {
+  timeRange?: DashboardTimeRangeConfig;
   uid: string;
-  timeRange: {
-    from: string;
-    to: string;
-  };
 }
 
 export const openDashboard = (config?: Partial<OpenDashboardConfig>) =>
   getScenarioContext().then(({ lastAddedDashboardUid }: any) => {
     const fullConfig = {
-      timeRange: {
-        from: '2020-01-01 00:00:00',
-        to: '2020-01-01 01:00:00',
-      },
       uid: lastAddedDashboardUid,
       ...config,
     } as OpenDashboardConfig;
@@ -24,25 +18,9 @@ export const openDashboard = (config?: Partial<OpenDashboardConfig>) =>
 
     e2e.pages.Dashboard.visit(uid);
 
-    e2e.pages.Dashboard.Toolbar.navBar().within(() => {
-      e2e()
-        .get('[aria-label="TimePicker Open Button"]')
-        .click();
-      e2e()
-        .get('[aria-label="TimePicker absolute time range"]')
-        .click();
-      e2e()
-        .get('[aria-label="TimePicker from field"]')
-        .clear()
-        .type(timeRange.from);
-      e2e()
-        .get('[aria-label="TimePicker to field"]')
-        .clear()
-        .type(timeRange.to);
-      e2e()
-        .get('[aria-label="TimePicker submit button"]')
-        .click();
-    });
+    if (timeRange) {
+      setDashboardTimeRange(timeRange);
+    }
 
     // @todo remove `wrap` when possible
     return e2e().wrap({ config: fullConfig });

packages/grafana-e2e/src/flows/setDashboardTimeRange.ts

+import { e2e } from '../index';
+
+export interface DashboardTimeRangeConfig {
+  from: string;
+  to: string;
+}
+
+export const setDashboardTimeRange = ({ from, to }: DashboardTimeRangeConfig) =>
+  e2e.pages.Dashboard.Toolbar.navBar().within(() => {
+    e2e()
+      .get('[aria-label="TimePicker Open Button"]')
+      .click();
+    e2e()
+      .get('[aria-label="TimePicker absolute time range"]')
+      .click();
+    e2e()
+      .get('[aria-label="TimePicker from field"]')
+      .clear()
+      .type(from);
+    e2e()
+      .get('[aria-label="TimePicker to field"]')
+      .clear()
+      .type(to);
+    e2e()
+      .get('[aria-label="TimePicker submit button"]')
+      .click();
+  });