grafana/e2e: Update add dashboard flow (#58360)

* Update variable editor e2e flow

- Use correct selector for Variables
- Add variable query form
- Add label for variable apply button

* Use data-testid instead of aria-label

* Add jsdoc

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -124,6 +124,7 @@ export const Pages = {
             selectionOptionsCustomAllInputV2: 'data-testid Variable editor Form IncludeAll field',
             previewOfValuesOption: 'Variable editor Preview of Values option',
             submitButton: 'Variable editor Submit button',
+            applyButton: 'data-testid Variable editor Apply button',
           },
           QueryVariable: {
             queryOptionsDataSourceSelect: Components.DataSourcePicker.container,

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

@@ -31,6 +31,7 @@ interface AddVariableOptional {
   label?: string;
   query?: string;
   regex?: string;
+  variableQueryForm?: (config: AddVariableConfig) => void;
 }
 
 interface AddVariableRequired {
@@ -40,6 +41,74 @@ interface AddVariableRequired {
 export type PartialAddVariableConfig = Partial<AddVariableDefault> & AddVariableOptional & AddVariableRequired;
 export type AddVariableConfig = AddVariableDefault & AddVariableOptional & AddVariableRequired;
 
+/**
+ * This flow is used to add a dashboard with whatever configuration specified.
+ * @param config Configuration object. Currently supports configuring dashboard time range, annotations, and variables (support dependant on type).
+ * @see{@link AddDashboardConfig}
+ *
+ * @example
+ * ```
+ * // Configuring a simple dashboard
+ * addDashboard({
+ *    timeRange: {
+ *      from: '2022-10-03 00:00:00',
+ *      to: '2022-10-03 23:59:59',
+ *      zone: 'Coordinated Universal Time',
+ *    },
+ *    title: 'Test Dashboard',
+ * })
+ * ```
+ *
+ * @example
+ * ```
+ * // Configuring a dashboard with annotations
+ * addDashboard({
+ *    title: 'Test Dashboard',
+ *    annotations: [
+ *      {
+ *        // This should match the datasource name
+ *        dataSource: 'azure-monitor',
+ *        name: 'Test Annotation',
+ *        dataSourceForm: () => {
+ *          // Insert steps to create annotation using datasource form
+ *        }
+ *      }
+ *    ]
+ * })
+ * ```
+ *
+ * @see{@link AddAnnotationConfig}
+ *
+ * @example
+ * ```
+ * // Configuring a dashboard with variables
+ * addDashboard({
+ *    title: 'Test Dashboard',
+ *    variables: [
+ *      {
+ *        name: 'test-query-variable',
+ *        label: 'Testing Query',
+ *        hide: '',
+ *        type: e2e.flows.VARIABLE_TYPE_QUERY,
+ *        dataSource: 'azure-monitor',
+ *        variableQueryForm: () => {
+ *          // Insert steps to create variable using datasource form
+ *        },
+ *      },
+ *      {
+ *        name: 'test-constant-variable',
+ *        label: 'Testing Constant',
+ *        type: e2e.flows.VARIABLE_TYPE_CONSTANT,
+ *        constantValue: 'constant',
+ *      }
+ *    ]
+ * })
+ * ```
+ *
+ * @see{@link AddVariableConfig}
+ *
+ * @see{@link https://github.com/grafana/grafana/blob/main/e2e/cloud-plugins-suite/azure-monitor.spec.ts Azure Monitor Tests for full examples}
+ */
 export const addDashboard = (config?: Partial<AddDashboardConfig>) => {
   const fullConfig: AddDashboardConfig = {
     annotations: [],
@@ -160,7 +229,7 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar
     e2e.pages.Dashboard.Settings.Variables.List.newButton().click();
   }
 
-  const { constantValue, dataSource, label, name, query, regex, type } = fullConfig;
+  const { constantValue, dataSource, label, name, query, regex, type, variableQueryForm } = fullConfig;
 
   // This field is key to many reactive changes
   if (type !== VARIABLE_TYPE_QUERY) {
@@ -185,7 +254,7 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar
     e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect()
       .should('be.visible')
       .within(() => {
-        e2e.components.Select.input().should('be.visible').type(`${dataSource}{enter}`);
+        e2e.components.DataSourcePicker.inputV2().type(`${dataSource}{enter}`);
       });
   }
 
@@ -201,6 +270,10 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar
     if (regex) {
       e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2().type(regex);
     }
+
+    if (variableQueryForm) {
+      variableQueryForm(fullConfig);
+    }
   }
 
   // Avoid flakiness
@@ -215,13 +288,14 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar
     });
 
   e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
+  e2e.pages.Dashboard.Settings.Variables.Edit.General.applyButton().click();
 
   return fullConfig;
 };
 
 const addVariables = (configs: PartialAddVariableConfig[]): AddVariableConfig[] => {
   if (configs.length > 0) {
-    e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
+    e2e.components.Tab.title('Variables').click();
   }
 
   return configs.map((config, i) => addVariable(config, i === 0));

public/app/features/variables/editor/VariableEditorEditor.tsx

@@ -204,7 +204,11 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props, State>
                 Run query
                 {loading && <Icon className="spin-clockwise" name="sync" size="sm" style={{ marginLeft: '2px' }} />}
               </Button>
-              <Button variant="primary" onClick={this.onApply}>
+              <Button
+                variant="primary"
+                onClick={this.onApply}
+                data-testid={selectors.pages.Dashboard.Settings.Variables.Edit.General.applyButton}
+              >
                 Apply
               </Button>
             </HorizontalGroup>