diff --git a/e2e/dashboard-new-layouts/dashboard-group-panels.spec.ts b/e2e/dashboard-new-layouts/dashboard-group-panels.spec.ts
index c74d43fbd8d..f3d74c171b5 100644
--- a/e2e/dashboard-new-layouts/dashboard-group-panels.spec.ts
+++ b/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
*/
diff --git a/e2e/dashboard-new-layouts/dashboards-panel-layouts.spec.ts b/e2e/dashboard-new-layouts/dashboards-panel-layouts.spec.ts
new file mode 100644
index 00000000000..49f4e1bcc3e
--- /dev/null
+++ b/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();
+ });
+});
diff --git a/e2e/utils/flows/scenes/editPaneActions.ts b/e2e/utils/flows/scenes/editPaneActions.ts
index bba3f40578e..04bb7e8fa05 100644
--- a/e2e/utils/flows/scenes/editPaneActions.ts
+++ b/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(() => {
diff --git a/e2e/utils/flows/scenes/index.ts b/e2e/utils/flows/scenes/index.ts
index 9a5562237dc..3a8d6fa55a7 100644
--- a/e2e/utils/flows/scenes/index.ts
+++ b/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';
diff --git a/e2e/utils/flows/scenes/panelPosition.ts b/e2e/utils/flows/scenes/panelPosition.ts
new file mode 100644
index 00000000000..63579422346
--- /dev/null
+++ b/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;
+ }
+ });
+};
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index 343dc58efcb..f0e51f64da6 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/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: {
diff --git a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx
index f861aa45d46..a34fc45f0d6 100644
--- a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx
+++ b/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}
/>
) : (
{t('dashboard.auto-grid.options.custom-min-width.clear', 'Clear')}
@@ -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}
/>
@@ -217,7 +222,13 @@ function GridLayoutRows({ layoutManager }: { layoutManager: AutoGridLayoutManage
className={styles.wideSelector}
>
{isStandardHeight ? (
-
+
) : (
{t('dashboard.auto-grid.options.custom-min-height.clear', 'Clear')}
@@ -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}
/>