DashboardsE2E: Add E2E tests for Auto grid (#106171)

* add auto grid e2e tests

* remove unnecessary clean up in grouping tests

* refaactor repeated code

* Refactor some repeated blocks

---------

Co-authored-by: kay delaney <kay@grafana.com>

e2e/dashboard-new-layouts/dashboard-group-panels.spec.ts

@@ -5,10 +5,6 @@ describe('Grouping panels', () => {
     e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
   });
 
-  after(() => {
-    e2e.flows.revertAllChanges();
-  });
-
   /*
    * Rows
    */

e2e/dashboard-new-layouts/dashboards-panel-layouts.spec.ts

@@ -0,0 +1,309 @@
+import { e2e } from '../utils';
+
+describe('Dashboard', () => {
+  beforeEach(() => {
+    e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
+  });
+
+  it('can switch to auto grid layout', () => {
+    e2e.flows.scenes.importV2Dashboard({ title: 'Switch to auto grid' });
+
+    e2e.components.NavToolbar.editDashboard.editButton().click();
+
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    e2e.components.OptionsGroup.toggle('grid-layout-category').click();
+
+    e2e.flows.scenes.selectAutoGridLayout();
+
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    const checkInputs = () => {
+      e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.minColumnWidth().should('be.visible');
+      e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.maxColumns().should('be.visible');
+      e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight().should('be.visible');
+      e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.fillScreen().should('exist');
+    };
+
+    checkInputs();
+
+    e2e.flows.scenes.saveDashboard();
+    cy.reload();
+
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    e2e.components.NavToolbar.editDashboard.editButton().click();
+
+    checkInputs();
+  });
+
+  it('can change min column width in auto grid layout', () => {
+    e2e.flows.scenes.importV2Dashboard({ title: 'Set min column width' });
+
+    e2e.components.NavToolbar.editDashboard.editButton().click();
+
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    e2e.components.OptionsGroup.toggle('grid-layout-category').click();
+
+    e2e.flows.scenes.selectAutoGridLayout();
+
+    let firstStandardPanelTopOffset = 0;
+
+    // standard min column width will have 1 panel on a second row in edit mode
+    e2e.components.Panels.Panel.title('New panel')
+      .first()
+      .then((el) => {
+        firstStandardPanelTopOffset = el.offset().top;
+      });
+
+    e2e.components.Panels.Panel.title('New panel')
+      .last()
+      .then((el) => {
+        expect(el.offset().top).to.be.greaterThan(firstStandardPanelTopOffset);
+      });
+
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.minColumnWidth().should('be.visible').click();
+    cy.get('[id=combobox-option-narrow]').click();
+
+    const checkOffset = () => {
+      // narrow min column width will have all panels on the same row
+      let narrowPanelTopOffset = 0;
+
+      e2e.components.Panels.Panel.title('New panel')
+        .first()
+        .then((el) => {
+          narrowPanelTopOffset = el.offset().top;
+        });
+
+      e2e.components.Panels.Panel.title('New panel')
+        .last()
+        .then((el) => {
+          expect(el.offset().top).to.eq(narrowPanelTopOffset);
+        });
+    };
+
+    checkOffset();
+
+    e2e.flows.scenes.saveDashboard();
+    cy.reload();
+
+    e2e.components.NavToolbar.editDashboard.editButton().click();
+
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.minColumnWidth().should('have.value', 'Narrow');
+
+    checkOffset();
+  });
+
+  it('can change to custom min column width in auto grid layout', () => {
+    e2e.flows.scenes.importV2Dashboard({ title: 'Set custom min column width' });
+
+    e2e.components.NavToolbar.editDashboard.editButton().click();
+
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    e2e.components.OptionsGroup.toggle('grid-layout-category').click();
+
+    e2e.flows.scenes.selectAutoGridLayout();
+
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.minColumnWidth().should('be.visible').click();
+    cy.get('[id=combobox-option-custom]').click();
+
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.customMinColumnWidth()
+      .should('be.visible')
+      .clear()
+      .type('900')
+      .blur();
+
+    cy.wait(100); // cy too fast and executes next command before resizing is done
+
+    // // changing to 900 custom width to have each panel span the whole row to verify offset
+    e2e.flows.scenes.verifyPanelsStackedVertically();
+
+    e2e.flows.scenes.saveDashboard();
+    cy.reload();
+
+    e2e.flows.scenes.verifyPanelsStackedVertically();
+
+    e2e.components.NavToolbar.editDashboard.editButton().click();
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.customMinColumnWidth().should('have.value', '900');
+
+    e2e.flows.scenes.verifyPanelsStackedVertically();
+
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.clearCustomMinColumnWidth().should('be.visible').click();
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.minColumnWidth().should('have.value', 'Standard');
+  });
+
+  it('can change max columns in auto grid layout', () => {
+    e2e.flows.scenes.importV2Dashboard({ title: 'Set max columns' });
+
+    e2e.components.NavToolbar.editDashboard.editButton().click();
+
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    e2e.components.OptionsGroup.toggle('grid-layout-category').click();
+
+    e2e.flows.scenes.selectAutoGridLayout();
+
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.maxColumns().should('be.visible').click();
+    cy.get('[id=combobox-option-1]').click();
+
+    // changing to 1 max column to have each panel span the whole row to verify offset
+    e2e.flows.scenes.verifyPanelsStackedVertically();
+
+    e2e.flows.scenes.saveDashboard();
+    cy.reload();
+
+    e2e.flows.scenes.verifyPanelsStackedVertically();
+
+    e2e.components.NavToolbar.editDashboard.editButton().click();
+
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.maxColumns().should('have.value', '1');
+
+    e2e.flows.scenes.verifyPanelsStackedVertically();
+  });
+
+  it('can change row height in auto grid layout', () => {
+    e2e.flows.scenes.importV2Dashboard({ title: 'Set row height' });
+
+    e2e.components.NavToolbar.editDashboard.editButton().click();
+
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    e2e.components.OptionsGroup.toggle('grid-layout-category').click();
+
+    e2e.flows.scenes.selectAutoGridLayout();
+
+    let regularRowHeight = 0;
+
+    e2e.components.Panels.Panel.title('New panel')
+      .first()
+      .then((el) => {
+        regularRowHeight = el.height();
+      });
+
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight().should('be.visible').click();
+    cy.get('[id=combobox-option-short]').click();
+
+    e2e.components.Panels.Panel.title('New panel')
+      .first()
+      .then((el) => {
+        expect(el.height()).to.be.lessThan(regularRowHeight);
+      });
+
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight().should('be.visible').click();
+    cy.get('[id=combobox-option-tall]').click();
+
+    const checkHeight = () => {
+      e2e.components.Panels.Panel.title('New panel')
+        .first()
+        .then((el) => {
+          expect(el.height()).to.be.greaterThan(regularRowHeight);
+        });
+    };
+
+    checkHeight();
+
+    e2e.flows.scenes.saveDashboard();
+    cy.reload();
+
+    checkHeight();
+
+    e2e.components.NavToolbar.editDashboard.editButton().click();
+
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight().should('have.value', 'Tall');
+
+    checkHeight();
+  });
+
+  it('can change to custom row height in auto grid layout', () => {
+    e2e.flows.scenes.importV2Dashboard({ title: 'Set custom row height' });
+
+    e2e.components.NavToolbar.editDashboard.editButton().click();
+
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    e2e.components.OptionsGroup.toggle('grid-layout-category').click();
+
+    e2e.flows.scenes.selectAutoGridLayout();
+
+    let regularRowHeight = 0;
+
+    e2e.components.Panels.Panel.title('New panel')
+      .first()
+      .then((el) => {
+        regularRowHeight = el.height();
+      });
+
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight().should('be.visible').click();
+    cy.get('[id=combobox-option-custom]').click();
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.customRowHeight().clear().type('800').blur();
+    cy.wait(100); // cy too fast and executes next command before resizing is done
+
+    e2e.components.Panels.Panel.title('New panel')
+      .first()
+      .then((el) => {
+        const elHeight = el.height();
+        expect(elHeight).be.closeTo(800, 5); // some flakyness and get 798 sometimes
+        expect(elHeight).to.be.greaterThan(regularRowHeight);
+      });
+
+    e2e.flows.scenes.saveDashboard();
+    cy.reload();
+
+    e2e.components.Panels.Panel.title('New panel')
+      .first()
+      .then((el) => {
+        expect(el.height()).be.closeTo(800, 5); // some flakyness and get 798 sometimes
+      });
+
+    e2e.components.NavToolbar.editDashboard.editButton().click();
+
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.customRowHeight().should('have.value', '800');
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.clearCustomRowHeight().should('be.visible').click();
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight().should('have.value', 'Standard');
+  });
+
+  it('can change fill screen in auto grid layout', () => {
+    e2e.flows.scenes.importV2Dashboard({ title: 'Set fill screen' });
+
+    e2e.components.NavToolbar.editDashboard.editButton().click();
+
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    e2e.components.OptionsGroup.toggle('grid-layout-category').click();
+
+    e2e.flows.scenes.selectAutoGridLayout();
+
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.minColumnWidth().should('be.visible').click();
+    cy.get('[id=combobox-option-narrow]').click();
+
+    let initialHeight = 0;
+
+    e2e.components.Panels.Panel.title('New panel')
+      .first()
+      .then((el) => {
+        initialHeight = el.height();
+      });
+
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.fillScreen().click({ force: true });
+
+    const checkHeight = () => {
+      e2e.components.Panels.Panel.title('New panel')
+        .first()
+        .then((el) => {
+          expect(el.height()).to.be.greaterThan(initialHeight);
+        });
+    };
+
+    checkHeight();
+    e2e.flows.scenes.saveDashboard();
+    cy.reload();
+
+    checkHeight();
+    e2e.components.NavToolbar.editDashboard.editButton().click();
+    e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.fillScreen().should('be.checked');
+
+    checkHeight();
+  });
+});

e2e/utils/flows/scenes/editPaneActions.ts

@@ -12,6 +12,14 @@ export const selectRowsLayout = () => {
   clickGroupLayoutButton('Rows');
 };
 
+export const selectCustomGridLayout = () => {
+  clickGroupLayoutButton('Custom');
+};
+
+export const selectAutoGridLayout = () => {
+  clickGroupLayoutButton('Auto grid');
+};
+
 const editPaneCopyOrDuplicate = (buttonLabel: string) => {
   e2e.components.EditPaneHeader.copyDropdown().click();
   cy.get('[role="menu"]').within(() => {

e2e/utils/flows/scenes/index.ts

@@ -8,3 +8,4 @@ export * from './saveDashboard';
 export * from './importDashboard';
 export * from './editPaneActions';
 export * from './selectPanel';
+export * from './panelPosition';

e2e/utils/flows/scenes/panelPosition.ts

@@ -0,0 +1,14 @@
+import { e2e } from '../..';
+
+export const verifyPanelsStackedVertically = () => {
+  let initialOffset = 0;
+  e2e.components.Panels.Panel.title('New panel').each((el) => {
+    if (!initialOffset) {
+      initialOffset = el.offset().top;
+    } else {
+      const elOffset = el.offset().top;
+      expect(elOffset).to.be.greaterThan(initialOffset);
+      initialOffset = elOffset;
+    }
+  });
+};

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

@@ -606,6 +606,32 @@ export const versionedComponents = {
       variableLabelInput: {
         '12.0.0': 'data-testid variable label input',
       },
+      AutoGridLayout: {
+        minColumnWidth: {
+          '12.1.0': 'data-testid min column width selector',
+        },
+        customMinColumnWidth: {
+          '12.1.0': 'data-testid custom min column width input',
+        },
+        clearCustomMinColumnWidth: {
+          '12.1.0': 'data-testid clear custom min column width input',
+        },
+        maxColumns: {
+          '12.1.0': 'data-testid max columns selector',
+        },
+        rowHeight: {
+          '12.1.0': 'data-testid row height selector',
+        },
+        customRowHeight: {
+          '12.1.0': 'data-testid custom row height input',
+        },
+        clearCustomRowHeight: {
+          '12.1.0': 'data-testid clear custom row height input',
+        },
+        fillScreen: {
+          '12.1.0': 'data-testid fill screen switch',
+        },
+      },
     },
   },
   PanelInspector: {

public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx

@@ -3,6 +3,7 @@ import { capitalize } from 'lodash';
 import React, { useEffect } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { useTranslate } from '@grafana/i18n';
 import { t } from '@grafana/i18n/internal';
 import { Button, Combobox, ComboboxOption, Field, InlineSwitch, Input, Stack, useStyles2 } from '@grafana/ui';
@@ -109,6 +110,7 @@ function GridLayoutColumns({ layoutManager }: { layoutManager: AutoGridLayoutMan
             options={minWidthOptions}
             value={columnWidth}
             onChange={onNamedMinWidthChanged}
+            data-testid={selectors.components.PanelEditor.ElementEditPane.AutoGridLayout.minColumnWidth}
           />
         ) : (
           <Input
@@ -120,6 +122,7 @@ function GridLayoutColumns({ layoutManager }: { layoutManager: AutoGridLayoutMan
             min={50}
             max={2000}
             invalid={customMinWidthError}
+            data-testid={selectors.components.PanelEditor.ElementEditPane.AutoGridLayout.customMinColumnWidth}
             suffix={
               <Button
                 size="sm"
@@ -127,6 +130,7 @@ function GridLayoutColumns({ layoutManager }: { layoutManager: AutoGridLayoutMan
                 icon="times"
                 tooltip={t('dashboard.auto-grid.options.min-width-custom-clear', 'Back to standard min column width')}
                 onClick={onClearCustomMinWidth}
+                data-testid={selectors.components.PanelEditor.ElementEditPane.AutoGridLayout.clearCustomMinColumnWidth}
               >
                 {t('dashboard.auto-grid.options.custom-min-width.clear', 'Clear')}
               </Button>
@@ -141,6 +145,7 @@ function GridLayoutColumns({ layoutManager }: { layoutManager: AutoGridLayoutMan
           value={String(maxColumnCount)}
           onChange={({ value }) => layoutManager.onMaxColumnCountChanged(parseInt(value, 10))}
           width={6.5}
+          data-testid={selectors.components.PanelEditor.ElementEditPane.AutoGridLayout.maxColumns}
         />
       </Field>
     </Stack>
@@ -217,7 +222,13 @@ function GridLayoutRows({ layoutManager }: { layoutManager: AutoGridLayoutManage
         className={styles.wideSelector}
       >
         {isStandardHeight ? (
-          <Combobox id="min-height" options={minWidthOptions} value={rowHeight} onChange={onNamedMinHeightChanged} />
+          <Combobox
+            id="min-height"
+            options={minWidthOptions}
+            value={rowHeight}
+            onChange={onNamedMinHeightChanged}
+            data-testid={selectors.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight}
+          />
         ) : (
           <Input
             id="min-height"
@@ -228,6 +239,7 @@ function GridLayoutRows({ layoutManager }: { layoutManager: AutoGridLayoutManage
             min={50}
             max={2000}
             invalid={customMinWidthError}
+            data-testid={selectors.components.PanelEditor.ElementEditPane.AutoGridLayout.customRowHeight}
             suffix={
               <Button
                 size="sm"
@@ -235,6 +247,7 @@ function GridLayoutRows({ layoutManager }: { layoutManager: AutoGridLayoutManage
                 icon="times"
                 tooltip={t('dashboard.auto-grid.options.min-width-custom-clear', 'Back to standard min column width')}
                 onClick={onClearCustomRowHeight}
+                data-testid={selectors.components.PanelEditor.ElementEditPane.AutoGridLayout.clearCustomRowHeight}
               >
                 {t('dashboard.auto-grid.options.custom-min-height.clear', 'Clear')}
               </Button>
@@ -247,6 +260,7 @@ function GridLayoutRows({ layoutManager }: { layoutManager: AutoGridLayoutManage
           id="fill-screen-toggle"
           value={fillScreen}
           onChange={() => layoutManager.onFillScreenChanged(!fillScreen)}
+          data-testid={selectors.components.PanelEditor.ElementEditPane.AutoGridLayout.fillScreen}
         />
       </Field>
     </Stack>