Dashboards E2E - edit pane - query variable (#105635)

* Dashboards E2E - edit pane - query variable
* update test to use gdev cloudwatch; remove duplicate label and mocks
* wait for the api call to fetch the editor options

e2e/dashboard-new-layouts/dashboards-edit-query-variables.spec.ts

@@ -0,0 +1,70 @@
+import { e2e } from '../utils';
+
+import { flows, Variable } from './dashboard-edit-flows';
+
+const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
+const DASHBOARD_NAME = 'Test variable output';
+
+describe('Dashboard edit - Query variable', () => {
+  beforeEach(() => {
+    e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
+  });
+
+  it('can add a new query variable', () => {
+    e2e.pages.Dashboards.visit();
+
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` });
+    cy.contains(DASHBOARD_NAME).should('be.visible');
+
+    const queryVariableOptions = ['default'];
+
+    const variable: Variable = {
+      type: 'query',
+      name: 'VariableUnderTest',
+      value: queryVariableOptions[0],
+      label: 'VariableUnderTest', // constant doesn't really need a label
+    };
+
+    // common steps to add a new variable
+    flows.newEditPaneVariableClick();
+    flows.newEditPanelCommonVariableInputs(variable);
+
+    // open the modal query variable editor
+    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsOpenButton().should('be.visible').click();
+    // select a core data source that just runs a query during preview
+    e2e.components.DataSourcePicker.container().should('be.visible').click();
+
+    // spy on the API call to get the query options
+    cy.intercept('GET', '/api/datasources/**').as('getOptions');
+
+    const dataSource = 'gdev-cloudwatch';
+    // this will trigger an API call to get the query options
+    cy.contains(dataSource).scrollIntoView().should('be.visible').click();
+    // wait for the API call to finish
+    cy.wait('@getOptions');
+    // show the preview of the query results
+    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.previewButton().should('be.visible').click();
+    // assert the query results are shown
+    e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().should('be.visible');
+    e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption()
+      .first()
+      .then(($el) => {
+        const previewOption = $el.text().trim();
+        cy.wrap(previewOption).as('previewOption');
+      });
+
+    // close the modal
+    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.closeButton().should('be.visible').click();
+    // assert the query variable values are in the variable value select
+    cy.get('@previewOption').then((opt) => {
+      e2e.pages.Dashboard.SubMenu.submenuItemLabels(variable.name).next().should('have.text', opt);
+      // assert the panel is visible and has the correct value
+      e2e.components.Panels.Panel.content()
+        .should('be.visible')
+        .first()
+        .within(() => {
+          cy.get('.markdown-html').should('include.text', `VariableUnderTest: ${opt}`);
+        });
+    });
+  });
+});

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

@@ -451,11 +451,23 @@ export const versionedPages = {
             },
           },
           QueryVariable: {
+            closeButton: {
+              [MIN_GRAFANA_VERSION]: 'data-testid Query Variable editor close button',
+            },
+            editor: {
+              [MIN_GRAFANA_VERSION]: 'data-testid Query Variable editor',
+            },
+            previewButton: {
+              [MIN_GRAFANA_VERSION]: 'data-testid Query Variable editor preview button',
+            },
             queryOptionsDataSourceSelect: {
               '10.4.0': 'data-testid Select a data source',
               '10.0.0': 'data-testid Data source picker select container',
               [MIN_GRAFANA_VERSION]: 'Data source picker select container',
             },
+            queryOptionsOpenButton: {
+              [MIN_GRAFANA_VERSION]: 'data-testid Query Variable editor open button',
+            },
             queryOptionsRefreshSelect: {
               [MIN_GRAFANA_VERSION]: 'Variable editor Form Query Refresh select',
             },

public/app/features/dashboard-scene/settings/variables/components/QueryEditor.tsx

@@ -57,9 +57,6 @@ export function QueryEditor({
   if (VariableQueryEditor && isQueryEditor(VariableQueryEditor, datasource)) {
     return (
       <Box marginBottom={2}>
-        <Text variant="bodySmall" weight="medium">
-          <Trans i18nKey="dashboard-scene.query-editor.query">Query</Trans>
-        </Text>
         <Box marginTop={0.25}>
           <VariableQueryEditor
             key={datasource.uid}

public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx

@@ -124,6 +124,7 @@ export function ModalEditor({ variable }: { variable: QueryVariable }) {
           onClick={() => setIsOpen(true)}
           size="sm"
           fullWidth
+          data-testid={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsOpenButton}
         >
           <Trans i18nKey="dashboard.edit-pane.variable.open-editor">Open variable editor</Trans>
         </Button>
@@ -135,10 +136,20 @@ export function ModalEditor({ variable }: { variable: QueryVariable }) {
       >
         <Editor variable={variable} />
         <Modal.ButtonRow>
-          <Button variant="primary" fill="outline" onClick={onRunQuery}>
+          <Button
+            variant="primary"
+            fill="outline"
+            onClick={onRunQuery}
+            data-testid={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.previewButton}
+          >
             <Trans i18nKey="dashboard.edit-pane.variable.query-options.preview">Preview</Trans>
           </Button>
-          <Button variant="secondary" fill="outline" onClick={() => setIsOpen(false)}>
+          <Button
+            variant="secondary"
+            fill="outline"
+            onClick={() => setIsOpen(false)}
+            data-testid={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.closeButton}
+          >
             <Trans i18nKey="dashboard.edit-pane.variable.query-options.close">Close</Trans>
           </Button>
         </Modal.ButtonRow>
@@ -195,7 +206,7 @@ export function Editor({ variable }: { variable: QueryVariable }) {
   const isHasVariableOptions = hasVariableOptions(variable);
 
   return (
-    <>
+    <div data-testid={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.editor}>
       <Field
         label={t('dashboard-scene.query-variable-editor-form.label-target-data-source', 'Target data source')}
         htmlFor="data-source-picker"
@@ -255,7 +266,7 @@ export function Editor({ variable }: { variable: QueryVariable }) {
       />
 
       {isHasVariableOptions && <VariableValuesPreview options={variable.getOptionsForSelect(false)} />}
-    </>
+    </div>
   );
 }