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} />