From 08168a33e9b9b9fe5f40115b7631af77087e7060 Mon Sep 17 00:00:00 2001
From: Scott Lepper <scott.lepper@gmail.com>
Date: Mon, 9 Jun 2025 12:28:30 -0400
Subject: [PATCH] Group by variable e2e (#106176)

 Dashboards - E2E - Group By Variable in Edit Pane
---
 e2e/cypress/support/e2e.js                    |  2 +-
 .../dashboard-edit-flows.ts                   |  5 +-
 ...dashboards-edit-group-by-variables.spec.ts | 68 +++++++++++++++++++
 e2e/run-suite                                 |  1 +
 .../editors/GroupByVariableEditor.test.tsx    |  1 +
 5 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 e2e/dashboard-new-layouts/dashboards-edit-group-by-variables.spec.ts

diff --git a/e2e/cypress/support/e2e.js b/e2e/cypress/support/e2e.js
index 374bdd84d93..fa252650925 100644
--- a/e2e/cypress/support/e2e.js
+++ b/e2e/cypress/support/e2e.js
@@ -61,7 +61,7 @@ Cypress.on('uncaught:exception', (err) => {
 //
 
 // TODO: read from toggles_gen.csv?
-const featureToggles = ['kubernetesDashboards', 'dashboardNewLayouts', 'dashboardScene'];
+const featureToggles = ['kubernetesDashboards', 'dashboardNewLayouts', 'dashboardScene', 'groupByVariable'];
 
 beforeEach(() => {
   let toggles = [];
diff --git a/e2e/dashboard-new-layouts/dashboard-edit-flows.ts b/e2e/dashboard-new-layouts/dashboard-edit-flows.ts
index e8af764a415..c823d97fd0f 100644
--- a/e2e/dashboard-new-layouts/dashboard-edit-flows.ts
+++ b/e2e/dashboard-new-layouts/dashboard-edit-flows.ts
@@ -13,7 +13,10 @@ export const flows = {
     e2e.components.PanelEditor.ElementEditPane.addVariableButton().should('be.visible').click();
   },
   newEditPanelCommonVariableInputs(variable: Variable) {
-    e2e.components.PanelEditor.ElementEditPane.variableType(variable.type).should('be.visible').click();
+    e2e.components.PanelEditor.ElementEditPane.variableType(variable.type)
+      .scrollIntoView()
+      .should('be.visible')
+      .click();
     e2e.components.PanelEditor.ElementEditPane.variableNameInput().clear().type(variable.name).blur();
     e2e.components.PanelEditor.ElementEditPane.variableLabelInput().clear().type(variable.label).blur();
   },
diff --git a/e2e/dashboard-new-layouts/dashboards-edit-group-by-variables.spec.ts b/e2e/dashboard-new-layouts/dashboards-edit-group-by-variables.spec.ts
new file mode 100644
index 00000000000..9af0f6d9e8f
--- /dev/null
+++ b/e2e/dashboard-new-layouts/dashboards-edit-group-by-variables.spec.ts
@@ -0,0 +1,68 @@
+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 - Group By variables', () => {
+  beforeEach(() => {
+    e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
+  });
+
+  it('can add a new group by variable', () => {
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` });
+    cy.contains(DASHBOARD_NAME).should('be.visible');
+
+    const variable: Variable = {
+      type: 'groupby',
+      name: 'VariableUnderTest',
+      value: 'label1',
+      label: 'VariableUnderTest',
+    };
+
+    // common steps to add a new variable
+    flows.newEditPaneVariableClick();
+    flows.newEditPanelCommonVariableInputs(variable);
+
+    e2e.pages.Dashboard.Settings.Variables.Edit.GroupByVariable.dataSourceSelect().should('be.visible').click();
+    const dataSource = 'gdev-loki';
+    cy.contains(dataSource).scrollIntoView().should('be.visible').click();
+
+    // mock the API call to get the labels
+    const labels = ['label1', 'label2'];
+    cy.intercept('GET', '**/resources/labels*', {
+      statusCode: 200,
+      body: {
+        status: 'success',
+        data: labels,
+      },
+    }).as('labels');
+
+    // select the variable in the dashboard and confirm the variable value is set
+    e2e.pages.Dashboard.SubMenu.submenuItem().should('be.visible').click();
+    e2e.pages.Dashboard.SubMenu.submenuItemLabels(variable.label).should('be.visible').contains(variable.label);
+
+    // mock the API call to get the label values
+    const labelValues = ['label2Value1'];
+    cy.intercept('GET', `**/resources/label/${labels[1]}/values*`, {
+      statusCode: 200,
+      body: {
+        status: 'success',
+        data: labelValues,
+      },
+    }).as('label-values');
+
+    // choose the label and value
+    cy.get('div[data-testid]').contains(labels[1]).click();
+    cy.focused().type('{esc}');
+
+    // 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: ${labels[1]}`);
+      });
+  });
+});
diff --git a/e2e/run-suite b/e2e/run-suite
index a3d8d15913a..f4be6852580 100755
--- a/e2e/run-suite
+++ b/e2e/run-suite
@@ -153,6 +153,7 @@ case "$1" in
       "dashboard-new-layouts")
       env[kubernetesDashboards]=true
       env[dashboardNewLayouts]=true
+      env[groupByVariable]=true
       cypressConfig[specPattern]=$rootForDashboardNewLayouts/$testFilesForSingleSuite
       cypressConfig[video]=false
           case "$2" in
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/GroupByVariableEditor.test.tsx b/public/app/features/dashboard-scene/settings/variables/editors/GroupByVariableEditor.test.tsx
index aa31e257e05..7d4dc4a6066 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/GroupByVariableEditor.test.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/GroupByVariableEditor.test.tsx
@@ -36,6 +36,7 @@ jest.mock('@grafana/runtime', () => ({
     }),
     getList: () => [defaultDatasource, promDatasource],
     getInstanceSettings: () => ({ ...defaultDatasource }),
+    getTagKeys: () => [],
   }),
 }));