diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 3329738f79c..b2edbc703ee 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -407,6 +407,7 @@ /e2e/ @grafana/grafana-frontend-platform /e2e/cloud-plugins-suite/ @grafana/partner-datasources /e2e-playwright/ @grafana/grafana-frontend-platform +/e2e-playwright/dashboard-new-layouts @grafana/dashboards-squad /e2e-playwright/plugin-e2e/ @grafana/oss-big-tent @grafana/partner-datasources /e2e-playwright/plugin-e2e/plugin-e2e-api-tests/ @grafana/plugins-platform-frontend /e2e-playwright/test-plugins/grafana-extensionstest-app/ @grafana/plugins-platform-frontend @@ -1013,7 +1014,6 @@ embed.go @grafana/grafana-as-code /.github/workflows/verify-kinds.yml @grafana/platform-monitoring /.github/workflows/dashboards-issue-add-label.yml @grafana/dashboards-squad /.github/workflows/run-schema-v2-e2e.yml @grafana/dashboards-squad -/.github/workflows/e2e-dashboard-new-layouts.yml @grafana/dashboards-squad /.github/workflows/run-dashboard-search-e2e.yml @grafana/grafana-search-and-storage /.github/workflows/trigger-dashboard-search-e2e.yml @grafana/grafana-search-and-storage /.github/workflows/ephemeral-instances-pr-comment.yml @grafana/grafana-operator-experience-squad diff --git a/.github/workflows/e2e-dashboard-new-layouts.yml b/.github/workflows/e2e-dashboard-new-layouts.yml deleted file mode 100644 index b2b5d1f8215..00000000000 --- a/.github/workflows/e2e-dashboard-new-layouts.yml +++ /dev/null @@ -1,42 +0,0 @@ -name: Run e2e for dashboardNewLayouts - -on: - pull_request: - branches: - - '**' - paths: - - 'e2e/dashboard-new-layouts/**' - - 'public/app/features/dashboard-scene/**' - -env: - ARCH: linux-amd64 - -jobs: - dashboard-new-layouts-e2e: - runs-on: ubuntu-latest - continue-on-error: true - if: github.event.pull_request.draft == false - steps: - - name: Checkout - uses: actions/checkout@v4 - with: - persist-credentials: false - - name: Pin Go version to mod file - uses: actions/setup-go@v5 - with: - go-version-file: 'go.mod' - - run: go version - - uses: actions/setup-node@v4 - with: - node-version-file: '.nvmrc' - cache: 'yarn' - - name: Install dependencies - run: yarn install --immutable - - name: Build grafana - run: make build - - name: Install Cypress dependencies - uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f - with: - runTests: false - - name: Run dashboardNewLayouts e2e - run: yarn e2e:dashboard-new-layouts diff --git a/e2e/dashboard-new-layouts/dashboard-duplicate-panel.spec.ts b/e2e/dashboard-new-layouts/dashboard-duplicate-panel.spec.ts deleted file mode 100644 index 43ac0576f47..00000000000 --- a/e2e/dashboard-new-layouts/dashboard-duplicate-panel.spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { e2e } from '../utils'; - -import { flows } from './dashboard-edit-flows'; - -describe('Dashboard panels', () => { - beforeEach(() => { - e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); - }); - - it('can duplicate a panel', () => { - e2e.flows.scenes.importV2Dashboard({ title: 'Paste tab' }); - - e2e.flows.scenes.toggleEditMode(); - const panelTitle = 'Unique'; - flows.changePanelTitle('New panel', panelTitle); - - e2e.components.Panels.Panel.title(panelTitle).should('have.length', 1); - - e2e.components.Panels.Panel.menu(panelTitle).click({ force: true }); - e2e.components.Panels.Panel.menuItems('More...').trigger('mouseover'); - e2e.components.Panels.Panel.menuItems('Duplicate').click(); - - e2e.components.Panels.Panel.title(panelTitle).should('have.length', 2); - - // Save, reload, and ensure duplicate has persisted - e2e.flows.scenes.saveDashboard(); - cy.reload(); - e2e.components.Panels.Panel.title(panelTitle).should('have.length', 2); - }); -}); diff --git a/e2e/dashboard-new-layouts/dashboard-edit-flows.ts b/e2e/dashboard-new-layouts/dashboard-edit-flows.ts deleted file mode 100644 index c823d97fd0f..00000000000 --- a/e2e/dashboard-new-layouts/dashboard-edit-flows.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { e2e } from '../utils'; - -const deselectPanels = () => { - e2e.pages.Dashboard.Controls().click(); -}; - -// Common flows for adding/editing variables on the new edit pane -export const flows = { - newEditPaneVariableClick() { - e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click(); - e2e.components.PanelEditor.Outline.section().should('be.visible').click(); - e2e.components.PanelEditor.Outline.item('Variables').should('be.visible').click(); - e2e.components.PanelEditor.ElementEditPane.addVariableButton().should('be.visible').click(); - }, - newEditPanelCommonVariableInputs(variable: Variable) { - 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(); - }, - firstPanelTitleShouldBe(panelTitle: string) { - return e2e.components.Panels.Panel.headerContainer() - .first() - .within(() => cy.get('h2').first().should('have.text', panelTitle)); - }, - deselectPanels, - changePanelTitle(oldPanelTitle: string, newPanelTitle: string) { - deselectPanels(); - const oldPanelRegex = new RegExp(`^${oldPanelTitle}$`); - e2e.flows.scenes.selectPanel(oldPanelRegex); - - e2e.components.PanelEditor.OptionsPane.fieldInput('Title') - .should('have.value', oldPanelTitle) - .clear() - .type(newPanelTitle); - e2e.components.PanelEditor.OptionsPane.fieldInput('Title').should('have.value', newPanelTitle); - }, - changePanelDescription(panelTitle: string, newDescription: string) { - deselectPanels(); - const panelTitleRegex = new RegExp(`^${panelTitle}$`); - e2e.flows.scenes.selectPanel(panelTitleRegex); - - e2e.components.PanelEditor.OptionsPane.fieldLabel('panel-options Description').within(() => { - cy.get('textarea').type(newDescription); - cy.get('textarea').should('have.value', newDescription); - }); - }, -}; - -export type Variable = { - type: string; - name: string; - label?: string; - description?: string; - value: string; -}; diff --git a/e2e/dashboard-new-layouts/dashboard-group-panels.spec.ts b/e2e/dashboard-new-layouts/dashboard-group-panels.spec.ts deleted file mode 100644 index f3d74c171b5..00000000000 --- a/e2e/dashboard-new-layouts/dashboard-group-panels.spec.ts +++ /dev/null @@ -1,506 +0,0 @@ -import { e2e } from '../utils'; - -describe('Grouping panels', () => { - beforeEach(() => { - e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); - }); - - /* - * Rows - */ - - it('can group and ungroup new panels into row', () => { - e2e.flows.scenes.importV2Dashboard({ title: 'Group new panels into row' }); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - // Group into row - e2e.flows.scenes.groupIntoRow(); - - // Verify row and panel titles - e2e.components.DashboardRow.title('New row').should('be.visible'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - // Save dashboards and reload - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - // Verify row and panel titles after reload - e2e.components.DashboardRow.title('New row').should('be.visible'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - // Ungroup - e2e.flows.scenes.ungroupPanels(); - - // Verify Row title is gone - e2e.components.DashboardRow.title('New row').should('not.exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - //Save dashboards and reload - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - // Verify Row title is gone - e2e.components.DashboardRow.title('New row').should('not.exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - }); - - it('can add and remove several rows', () => { - e2e.flows.scenes.importV2Dashboard({ title: 'Add and remove rows' }); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - e2e.flows.scenes.groupIntoRow(); - - e2e.components.CanvasGridAddActions.addRow().click({ scrollBehavior: 'bottom' }); - e2e.flows.scenes.addPanel(); - - e2e.components.CanvasGridAddActions.addRow().click({ scrollBehavior: 'bottom' }); - e2e.components.DashboardEditPaneSplitter.primaryBody().scrollTo('bottom', { ensureScrollable: false }); - e2e.components.CanvasGridAddActions.addPanel().should('have.length', 3).last().click(); - - e2e.components.DashboardRow.title('New row').should('exist'); - e2e.components.DashboardRow.title('New row 1').should('exist'); - e2e.components.DashboardRow.title('New row 2').should('exist'); - - e2e.components.Panels.Panel.title('New panel').should('have.length', 5); - - //Save dashboards and reload - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - e2e.components.DashboardRow.title('New row').should('exist'); - e2e.components.DashboardRow.title('New row 1').should('exist'); - e2e.components.DashboardRow.title('New row 2').should('exist'); - - e2e.components.Panels.Panel.title('New panel').should('have.length', 5); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - e2e.components.DashboardRow.title('New row 1').parent().click(); - e2e.components.EditPaneHeader.deleteButton().click(); - e2e.pages.ConfirmModal.delete().click(); - - e2e.components.DashboardRow.title('New row 2').parent().click(); - e2e.components.EditPaneHeader.deleteButton().click(); - e2e.pages.ConfirmModal.delete().click(); - - e2e.components.DashboardRow.title('New row').should('exist'); - e2e.components.DashboardRow.title('New row 1').should('not.exist'); - e2e.components.DashboardRow.title('New row 2').should('not.exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - e2e.components.DashboardRow.title('New row').should('exist'); - e2e.components.DashboardRow.title('New row 1').should('not.exist'); - e2e.components.DashboardRow.title('New row 2').should('not.exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - }); - - it('can paste a copied row', () => { - e2e.flows.scenes.importV2Dashboard({ title: 'Paste row' }); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - e2e.flows.scenes.groupIntoRow(); - - e2e.components.DashboardRow.title('New row').should('exist'); - - e2e.flows.scenes.editPaneCopy(); - - e2e.components.CanvasGridAddActions.pasteRow().click({ scrollBehavior: 'bottom' }); - - e2e.components.DashboardEditPaneSplitter.primaryBody().scrollTo('bottom', { ensureScrollable: false }); - - e2e.components.DashboardRow.title('New row').should('exist'); - e2e.components.DashboardRow.title('New row 1').should('exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 6); - - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - cy.scrollTo('bottom'); - - e2e.components.DashboardRow.title('New row').should('exist'); - e2e.components.DashboardRow.title('New row 1').should('exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 6); - }); - - it('can duplicate a row', () => { - e2e.flows.scenes.importV2Dashboard({ title: 'Duplicate row' }); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - e2e.flows.scenes.groupIntoRow(); - - e2e.components.DashboardRow.title('New row').should('exist'); - - e2e.flows.scenes.editPaneDuplicate(); - - e2e.components.DashboardEditPaneSplitter.primaryBody().scrollTo('bottom', { ensureScrollable: false }); - - e2e.components.DashboardRow.title('New row').should('exist'); - e2e.components.DashboardRow.title('New row 1').should('exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 6); - - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - cy.scrollTo('bottom'); - - e2e.components.DashboardRow.title('New row').should('exist'); - e2e.components.DashboardRow.title('New row 1').should('exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 6); - }); - - it('can collapse rows', () => { - e2e.flows.scenes.importV2Dashboard({ title: 'Collapse rows' }); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - e2e.flows.scenes.groupIntoRow(); - - e2e.components.DashboardRow.title('New row').should('exist'); - - e2e.flows.scenes.editPaneDuplicate(); - - e2e.components.DashboardEditPaneSplitter.primaryBody().scrollTo('bottom', { ensureScrollable: false }); - - e2e.components.DashboardRow.title('New row').should('exist'); - e2e.components.DashboardRow.title('New row 1').should('exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 6); - - e2e.components.DashboardRow.title('New row').click(); - e2e.components.DashboardRow.title('New row 1').click(); - - e2e.components.DashboardRow.title('New row').should('exist'); - e2e.components.DashboardRow.title('New row 1').should('exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 0); - - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - e2e.components.DashboardRow.title('New row').should('exist'); - e2e.components.DashboardRow.title('New row 1').should('exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 0); - }); - - it('can convert rows into tabs when changing layout', () => { - e2e.flows.scenes.importV2Dashboard({ title: 'Rows to tabs' }); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - e2e.flows.scenes.groupIntoRow(); - - e2e.components.DashboardRow.title('New row').should('exist'); - - e2e.flows.scenes.editPaneDuplicate(); - - e2e.components.DashboardRow.title('New row').should('exist'); - e2e.components.DashboardRow.title('New row 1').should('exist'); - - e2e.components.EditPaneHeader.backButton().click({ force: true }); - - // expand collapsed layouts section - e2e.components.OptionsGroup.toggle('group-layout-category').click(); - - e2e.flows.scenes.selectTabsLayout(); - - e2e.components.Tab.title('New row').should('be.visible'); - e2e.components.Tab.title('New row 1').should('be.visible'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - e2e.components.Tab.title('New row 1').click(); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - e2e.components.Tab.title('New row').should('be.visible'); - e2e.components.Tab.title('New row 1').should('be.visible'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - e2e.components.Tab.title('New row').click(); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - }); - - it('can group and ungroup new panels into row with tab', () => { - e2e.flows.scenes.importV2Dashboard({ title: 'Group new panels into tab with row' }); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - // Group into row with tab - e2e.flows.scenes.groupIntoRow(); - e2e.flows.scenes.groupIntoTab(); - - // Verify tab and panel titles - e2e.components.DashboardRow.title('New row').should('be.visible'); - e2e.components.Tab.title('New tab').should('be.visible'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - // Save dashboards and reload - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - // Verify tab, row and panel titles after reload - e2e.components.DashboardRow.title('New row').should('be.visible'); - e2e.components.Tab.title('New tab').should('be.visible'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - // Ungroup - e2e.flows.scenes.ungroupPanels(); // ungroup tabs - e2e.flows.scenes.ungroupPanels(); // ungroup rows - - // Verify tab and row titles is gone - e2e.components.DashboardRow.title('New row').should('not.exist'); - e2e.components.Tab.title('New tab').should('not.exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - // Save dashboards and reload - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - // Verify Row title is gone - e2e.components.DashboardRow.title('New row').should('not.exist'); - e2e.components.Tab.title('New tab').should('not.exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - }); - - /* - * Tabs - */ - - it('can group and ungroup new panels into tab', () => { - e2e.flows.scenes.importV2Dashboard({ title: 'Group new panels into tab' }); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - // Group into tab - e2e.flows.scenes.groupIntoTab(); - - // Verify tab and panel titles - e2e.components.Tab.title('New tab').should('be.visible'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - // Save dashboards and reload - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - // Verify row and panel titles after reload - e2e.components.Tab.title('New tab').should('be.visible'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - // Ungroup - e2e.flows.scenes.ungroupPanels(); - - // Verify Row title is gone - e2e.components.Tab.title('New tab').should('not.exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - // Save dashboards and reload - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - // Verify Row title is gone - e2e.components.Tab.title('New tab').should('not.exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - }); - - it('can add and remove several tabs', () => { - e2e.flows.scenes.importV2Dashboard({ title: 'Add and remove tabs' }); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - e2e.flows.scenes.groupIntoTab(); - - e2e.components.CanvasGridAddActions.addTab().click(); - e2e.flows.scenes.addPanel(); - - e2e.components.CanvasGridAddActions.addTab().click(); - e2e.flows.scenes.addPanel(); - - e2e.components.Tab.title('New tab').should('exist'); - e2e.components.Tab.title('New tab 1').should('exist'); - e2e.components.Tab.title('New tab 2').should('exist'); - e2e.components.Tab.title('New tab 2').should('have.attr', 'aria-selected', 'true'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 1); - - //Save dashboards and reload - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - e2e.components.Tab.title('New tab').should('exist'); - e2e.components.Tab.title('New tab 1').should('exist'); - e2e.components.Tab.title('New tab 2').should('exist'); - e2e.components.Tab.title('New tab 2').should('have.attr', 'aria-selected', 'true'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 1); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - e2e.components.Tab.title('New tab 2').click(); - e2e.components.EditPaneHeader.deleteButton().click(); - e2e.pages.ConfirmModal.delete().click(); - - e2e.components.Tab.title('New tab 1').click(); - e2e.components.EditPaneHeader.deleteButton().click(); - e2e.pages.ConfirmModal.delete().click(); - - e2e.components.Tab.title('New tab').should('exist'); - e2e.components.Tab.title('New tab 1').should('not.exist'); - e2e.components.Tab.title('New tab 2').should('not.exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - e2e.components.Tab.title('New tab').should('exist'); - e2e.components.Tab.title('New tab 1').should('not.exist'); - e2e.components.Tab.title('New tab 2').should('not.exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - }); - - it('can paste a copied tab', () => { - e2e.flows.scenes.importV2Dashboard({ title: 'Paste tab' }); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - e2e.flows.scenes.groupIntoTab(); - - e2e.components.Tab.title('New tab').should('exist'); - - e2e.flows.scenes.editPaneCopy(); - - e2e.components.CanvasGridAddActions.pasteTab().click(); - - e2e.components.Tab.title('New tab').should('exist'); - e2e.components.Tab.title('New tab 1').should('exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - e2e.components.Tab.title('New tab').should('exist'); - e2e.components.Tab.title('New tab 1').should('exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - }); - - it('can duplicate a tab', () => { - e2e.flows.scenes.importV2Dashboard({ title: 'Duplicate tab' }); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - e2e.flows.scenes.groupIntoTab(); - - e2e.components.Tab.title('New tab').should('exist'); - - e2e.flows.scenes.editPaneDuplicate(); - - e2e.components.Tab.title('New tab').should('exist'); - e2e.components.Tab.title('New tab 1').should('exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - e2e.components.Tab.title('New tab').should('exist'); - e2e.components.Tab.title('New tab 1').should('exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - }); - - it('can convert tabs into rows when changing layout', () => { - e2e.flows.scenes.importV2Dashboard({ title: 'Tabs to rows' }); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - e2e.flows.scenes.groupIntoTab(); - - e2e.components.Tab.title('New tab').should('exist'); - - e2e.flows.scenes.editPaneDuplicate(); - e2e.flows.scenes.editPaneDuplicate(); - - e2e.components.Tab.title('New tab').should('exist'); - e2e.components.Tab.title('New tab 1').should('exist'); - e2e.components.Tab.title('New tab 2').should('exist'); - - e2e.components.EditPaneHeader.backButton().click({ force: true }); - - // expand collapsed layouts section - e2e.components.OptionsGroup.toggle('group-layout-category').click(); - - e2e.flows.scenes.selectRowsLayout(); - - e2e.components.DashboardRow.title('New tab').should('exist'); - e2e.components.Panels.Panel.title('New panel').first().should('be.visible'); // wait for panels to load - e2e.components.DashboardRow.title('New tab 1').should('exist'); - e2e.components.DashboardRow.title('New tab 2').should('exist'); - - e2e.components.DashboardEditPaneSplitter.primaryBody().scrollTo('bottom', { ensureScrollable: false }); - - e2e.components.Panels.Panel.title('New panel').should('have.length', 9); - - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - e2e.components.DashboardRow.title('New tab').should('exist'); - e2e.components.Panels.Panel.title('New panel').first().should('be.visible'); // wait for panels to load - e2e.components.DashboardRow.title('New tab 1').should('exist'); - e2e.components.DashboardRow.title('New tab 2').should('exist'); - - cy.scrollTo('bottom'); - - e2e.components.Panels.Panel.title('New panel').should('have.length', 9); - }); - - it('can group and ungroup new panels into tab with row', () => { - e2e.flows.scenes.importV2Dashboard({ title: 'Group new panels into tab with row' }); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - // Group into tab - e2e.flows.scenes.groupIntoTab(); - e2e.flows.scenes.groupIntoRow(); - - // Verify tab and panel titles - e2e.components.Tab.title('New tab').should('be.visible'); - e2e.components.DashboardRow.title('New row').should('be.visible'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - // Save dashboards and reload - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - // Verify tab, row and panel titles after reload - e2e.components.Tab.title('New tab').should('be.visible'); - e2e.components.DashboardRow.title('New row').should('be.visible'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - e2e.components.NavToolbar.editDashboard.editButton().click(); - - // Ungroup - e2e.flows.scenes.ungroupPanels(); // ungroup rows - e2e.flows.scenes.ungroupPanels(); // ungroup tabs - - // Verify tab and row titles is gone - e2e.components.Tab.title('New tab').should('not.exist'); - e2e.components.DashboardRow.title('New row').should('not.exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - - // Save dashboards and reload - e2e.flows.scenes.saveDashboard(); - cy.reload(); - - // Verify Row title is gone - e2e.components.Tab.title('New tab').should('not.exist'); - e2e.components.DashboardRow.title('New row').should('not.exist'); - e2e.components.Panels.Panel.title('New panel').should('have.length', 3); - }); -}); diff --git a/e2e/dashboard-new-layouts/dashboard-outline.spec.ts b/e2e/dashboard-new-layouts/dashboard-outline.spec.ts deleted file mode 100644 index 6068152514c..00000000000 --- a/e2e/dashboard-new-layouts/dashboard-outline.spec.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { e2e } from '../utils'; - -const PAGE_UNDER_TEST = 'edediimbjhdz4b/a-tall-dashboard'; - -describe('Dashboard Outline', () => { - beforeEach(() => { - e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); - }); - - it('can use dashboard outline', () => { - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - - e2e.flows.scenes.toggleEditMode(); - - e2e.components.PanelEditor.Outline.section().click(); - - // Should be able to click Variables item in outline to see add variable button - e2e.components.PanelEditor.Outline.item('Variables').click(); - e2e.components.PanelEditor.ElementEditPane.addVariableButton().should('exist'); - - // Clicking a panel should scroll that panel in view - cy.contains('Dashboard panel 48').should('not.exist'); - e2e.components.PanelEditor.Outline.item('Panel #48').click(); - cy.contains('Dashboard panel 48').should('exist'); - }); -}); diff --git a/e2e/dashboard-new-layouts/dashboards-add-panel.spec.ts b/e2e/dashboard-new-layouts/dashboards-add-panel.spec.ts deleted file mode 100644 index 9997351cfdd..00000000000 --- a/e2e/dashboard-new-layouts/dashboards-add-panel.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { e2e } from '../utils'; - -const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output'; -const DASHBOARD_NAME = 'Test variable output'; - -describe('Dashboard panels', () => { - beforeEach(() => { - e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); - }); - - it('can add a new panel', () => { - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - cy.contains(DASHBOARD_NAME).should('be.visible'); - - // Toggle edit mode - e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click(); - - e2e.flows.scenes.addPanel(); - - // Check that new panel has been added - e2e.components.Panels.Panel.title('New panel').should('be.visible'); - - // Check that pressing the configure button shows the panel editor - e2e.flows.scenes.configurePanel(); - e2e.components.PanelEditor.General.content().should('be.visible'); - }); -}); diff --git a/e2e/dashboard-new-layouts/dashboards-edit-adhoc-variables.spec.ts b/e2e/dashboard-new-layouts/dashboards-edit-adhoc-variables.spec.ts deleted file mode 100644 index f7350331978..00000000000 --- a/e2e/dashboard-new-layouts/dashboards-edit-adhoc-variables.spec.ts +++ /dev/null @@ -1,70 +0,0 @@ -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 - Ad hoc variables', () => { - beforeEach(() => { - e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); - }); - - it('can add a new adhoc variable', () => { - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - cy.contains(DASHBOARD_NAME).should('be.visible'); - - const variable: Variable = { - type: 'adhoc', - name: 'VariableUnderTest', - value: 'label1', - label: 'VariableUnderTest', - }; - - // common steps to add a new variable - flows.newEditPaneVariableClick(); - flows.newEditPanelCommonVariableInputs(variable); - - e2e.pages.Dashboard.Settings.Variables.Edit.AdHocFiltersVariable.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.get('div[data-testid]').contains('=').click(); - cy.get('div[data-testid]').contains(labelValues[0]).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]}="${labelValues[0]}"`); - }); - }); -}); diff --git a/e2e/dashboard-new-layouts/dashboards-edit-datasource-variables.spec.ts b/e2e/dashboard-new-layouts/dashboards-edit-datasource-variables.spec.ts deleted file mode 100644 index 25b8b8608ac..00000000000 --- a/e2e/dashboard-new-layouts/dashboards-edit-datasource-variables.spec.ts +++ /dev/null @@ -1,49 +0,0 @@ -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 - datasource variables', () => { - beforeEach(() => { - e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); - }); - - it('can add a new datasource variable', () => { - e2e.pages.Dashboards.visit(); - - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - cy.contains(DASHBOARD_NAME).should('be.visible'); - - const dsType = 'cloudwatch'; - - const variable: Variable = { - type: 'datasource', - name: 'VariableUnderTest', - label: 'VariableUnderTest', - value: `gdev-${dsType}`, - }; - - // Common steps to add a new variable - flows.newEditPaneVariableClick(); - flows.newEditPanelCommonVariableInputs(variable); - - e2e.pages.Dashboard.Settings.Variables.Edit.DatasourceVariable.datasourceSelect().should('be.visible').click(); - cy.get(`#combobox-option-${dsType}`).click(); - - const regexFilter = 'cloud'; - e2e.pages.Dashboard.Settings.Variables.Edit.DatasourceVariable.nameFilter().should('be.visible').type(regexFilter); - - // Assert the variable dropdown is visible with correct label - e2e.pages.Dashboard.SubMenu.submenuItemLabels(variable.label).should('be.visible').contains(variable.label); - - // Assert the variable values are correctly displayed in the panel - e2e.components.Panels.Panel.content() - .should('be.visible') - .first() - .within(() => { - cy.get('.markdown-html').should('include.text', `${variable.name}: ${variable.value}`); - }); - }); -}); 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 deleted file mode 100644 index 9af0f6d9e8f..00000000000 --- a/e2e/dashboard-new-layouts/dashboards-edit-group-by-variables.spec.ts +++ /dev/null @@ -1,68 +0,0 @@ -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/dashboard-new-layouts/dashboards-edit-panel-title-description.spec.ts b/e2e/dashboard-new-layouts/dashboards-edit-panel-title-description.spec.ts deleted file mode 100644 index a7122c53902..00000000000 --- a/e2e/dashboard-new-layouts/dashboards-edit-panel-title-description.spec.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { e2e } from '../utils'; - -import { flows } from './dashboard-edit-flows'; - -const PAGE_UNDER_TEST = '5SdHCadmz/panel-tests-graph'; - -describe('Dashboard', () => { - beforeEach(() => { - e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); - }); - - it('can edit panel title and description', () => { - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - - e2e.flows.scenes.toggleEditMode(); - - const oldTitle = 'No Data Points Warning'; - flows.firstPanelTitleShouldBe(oldTitle); - - const newDescription = 'A description of this panel'; - flows.changePanelDescription(oldTitle, newDescription); - - const newTitle = 'New Panel Title'; - flows.changePanelTitle(oldTitle, newTitle); - - // Check that new title is reflected in panel header - flows.firstPanelTitleShouldBe(newTitle); - - // Reveal description tooltip and check that its value is as expected - const descriptionIcon = () => cy.get('[data-testid="title-items-container"] > span').first(); - descriptionIcon().click({ force: true }); - descriptionIcon().then((el) => { - const tooltipId = el.attr('aria-describedby'); - cy.get(`[id="${tooltipId}"]`).should('have.text', `${newDescription}\n`); - }); - }); -}); diff --git a/e2e/dashboard-new-layouts/dashboards-edit-panel-transparent-bg.spec.ts b/e2e/dashboard-new-layouts/dashboards-edit-panel-transparent-bg.spec.ts deleted file mode 100644 index ca6c5df485b..00000000000 --- a/e2e/dashboard-new-layouts/dashboards-edit-panel-transparent-bg.spec.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { e2e } from '../utils'; - -const PAGE_UNDER_TEST = '5SdHCadmz/panel-tests-graph'; - -describe('Dashboard', () => { - beforeEach(() => { - e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); - }); - - it('can toggle transparent background switch', () => { - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - - e2e.flows.scenes.toggleEditMode(); - - e2e.flows.scenes.selectPanel(/^No Data Points Warning$/); - - e2e.components.Panels.Panel.title('No Data Points Warning').then((el) => { - cy.wrap(el.css('background')).should('not.match', /rgba\(0, 0, 0, 0\)/); - }); - - cy.get('#transparent-background').click({ force: true }); - e2e.components.Panels.Panel.title('No Data Points Warning').then((el) => { - cy.wrap(el.css('background')).should('match', /rgba\(0, 0, 0, 0\)/); - }); - }); -}); diff --git a/e2e/dashboard-new-layouts/dashboards-edit-query-variables.spec.ts b/e2e/dashboard-new-layouts/dashboards-edit-query-variables.spec.ts deleted file mode 100644 index 47e445a3421..00000000000 --- a/e2e/dashboard-new-layouts/dashboards-edit-query-variables.spec.ts +++ /dev/null @@ -1,68 +0,0 @@ -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.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}`); - }); - }); - }); -}); diff --git a/e2e/dashboard-new-layouts/dashboards-edit-variables.spec.ts b/e2e/dashboard-new-layouts/dashboards-edit-variables.spec.ts deleted file mode 100644 index 37737b65c6a..00000000000 --- a/e2e/dashboard-new-layouts/dashboards-edit-variables.spec.ts +++ /dev/null @@ -1,147 +0,0 @@ -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 - variables', () => { - beforeEach(() => { - e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); - }); - - it('can add a new custom variable', () => { - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - cy.contains(DASHBOARD_NAME).should('be.visible'); - - const variable: Variable = { - type: 'custom', - name: 'foo', - label: 'Foo', - value: 'one,two,three', - }; - - // common steps to add a new variable - flows.newEditPaneVariableClick(); - flows.newEditPanelCommonVariableInputs(variable); - - // set the custom variable value - e2e.pages.Dashboard.Settings.Variables.Edit.CustomVariable.customValueInput().clear().type(variable.value).blur(); - - // assert the dropdown for the variable is visible and has the correct values - e2e.pages.Dashboard.SubMenu.submenuItemLabels(variable.label).should('be.visible').contains(variable.label); - const values = variable.value.split(','); - e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(values[0]).should('be.visible'); - - // check that variable deletion works - e2e.components.EditPaneHeader.deleteButton().click(); - e2e.pages.Dashboard.SubMenu.submenuItemLabels(variable.label).should('not.exist'); - }); - - it('can add a new constant variable', () => { - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - cy.contains(DASHBOARD_NAME).should('be.visible'); - - const variable: Variable = { - type: 'constant', - name: 'VariableUnderTest', - value: 'foo', - label: 'VariableUnderTest', // constant doesn't really need a label - }; - - // common steps to add a new variable - flows.newEditPaneVariableClick(); - flows.newEditPanelCommonVariableInputs(variable); - - // set the constant variable value - const type = 'variable-type Value'; - const field = e2e.components.PanelEditor.OptionsPane.fieldLabel(type); - field.should('be.visible'); - field.find('input').should('be.visible').clear().type(variable.value).blur(); - - // 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: ${variable.value}`); - }); - }); - - it('can add a new textbox variable', () => { - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - cy.contains(DASHBOARD_NAME).should('be.visible'); - - const variable: Variable = { - type: 'textbox', - name: 'VariableUnderTest', - value: 'foo', - label: 'VariableUnderTest', - }; - - // common steps to add a new variable - flows.newEditPaneVariableClick(); - flows.newEditPanelCommonVariableInputs(variable); - - // set the textbox variable value - const type = 'variable-type Value'; - const field = e2e.components.PanelEditor.OptionsPane.fieldLabel(type); - field.should('be.visible'); - field.find('input').should('be.visible').clear().type(variable.value).blur(); - - // 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); - - // 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: ${variable.value}`); - }); - }); - - it('can add a new interval variable', () => { - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - cy.contains(DASHBOARD_NAME).should('be.visible'); - - const variable: Variable = { - type: 'interval', - name: 'VariableUnderTest', - value: '1m', - label: 'VariableUnderTest', - }; - - // common steps to add a new variable - flows.newEditPaneVariableClick(); - flows.newEditPanelCommonVariableInputs(variable); - - // enable the auto option - e2e.pages.Dashboard.Settings.Variables.Edit.IntervalVariable.autoEnabledCheckbox().click({ force: true }); - - // 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); - - // 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: ${variable.value}`); - }); - - // select the variable in the dashboard and set the Auto option - e2e.pages.Dashboard.SubMenu.submenuItemLabels(variable.name).next().should('have.text', `1m`).click(); - e2e.components.Select.option().contains('Auto').click(); - - // assert the panel is visible and has the correct "Auto" value - e2e.components.Panels.Panel.content() - .should('be.visible') - .first() - .within(() => { - cy.get('.markdown-html').should('include.text', `VariableUnderTest: 10m`); - }); - }); -}); diff --git a/e2e/dashboard-new-layouts/dashboards-move-panel.spec.ts b/e2e/dashboard-new-layouts/dashboards-move-panel.spec.ts deleted file mode 100644 index 431a75dd54b..00000000000 --- a/e2e/dashboard-new-layouts/dashboards-move-panel.spec.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { e2e } from '../utils'; - -const PAGE_UNDER_TEST = 'ed155665/annotation-filtering'; - -describe('Dashboard', () => { - beforeEach(() => { - e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); - }); - - it('can drag and drop panels', () => { - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - - e2e.flows.scenes.toggleEditMode(); - - e2e.flows.scenes.movePanel(/^Panel three$/, /^Panel one$/); - e2e.components.Panels.Panel.headerContainer() - .contains(/^Panel three$/) - .then((panel3) => { - e2e.components.Panels.Panel.headerContainer() - .contains(/^Panel one$/) - .should('be.lowerThan', panel3); - }); - - e2e.flows.scenes.movePanel(/^Panel two$/, /^Panel three$/); - e2e.components.Panels.Panel.headerContainer() - .contains(/^Panel three$/) - .then((panel3) => { - e2e.components.Panels.Panel.headerContainer() - .contains(/^Panel two$/) - .should('be.higherThan', panel3); - }); - }); - - // Note, moving a panel from a nested row to a parent row currently just deletes the panel - // This test will need to be updated once the correct behavior is implemented. - it('can move panel from nested row to parent row', () => { - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - - e2e.flows.scenes.toggleEditMode(); - - e2e.flows.scenes.groupIntoRow(); - e2e.flows.scenes.groupIntoRow(); - - cy.get('[data-testid="data-testid dashboard-row-title-New row"]') - .first() - .then((el) => { - const rect = el.offset(); - e2e.components.Panels.Panel.headerContainer() - .contains(/^Panel one$/) - .trigger('pointerdown', { which: 1 }) - .trigger('pointermove', { clientX: rect.left, clientY: rect.top }) - .trigger('pointerup'); - }); - - e2e.components.Panels.Panel.headerContainer() - .contains(/^Panel one$/) - .should('not.exist'); - }); -}); diff --git a/e2e/dashboard-new-layouts/dashboards-panel-layouts.spec.ts b/e2e/dashboard-new-layouts/dashboards-panel-layouts.spec.ts deleted file mode 100644 index 49f4e1bcc3e..00000000000 --- a/e2e/dashboard-new-layouts/dashboards-panel-layouts.spec.ts +++ /dev/null @@ -1,309 +0,0 @@ -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/dashboard-new-layouts/dashboards-remove-panel.spec.ts b/e2e/dashboard-new-layouts/dashboards-remove-panel.spec.ts deleted file mode 100644 index 7256a4f4740..00000000000 --- a/e2e/dashboard-new-layouts/dashboards-remove-panel.spec.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { e2e } from '../utils'; - -const PAGE_UNDER_TEST = 'edediimbjhdz4b/a-tall-dashboard'; - -describe('Dashboard panels', () => { - beforeEach(() => { - e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); - }); - - it('can remove a panel', () => { - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - - e2e.flows.scenes.toggleEditMode(); - - e2e.flows.scenes.removePanels(/^Panel #1$/); - - // Check that panel has been deleted - e2e.components.Panels.Panel.headerContainer() - .contains(/^Panel #1$/) - .should('not.exist'); - }); - - it('can remove several panels at once', () => { - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - - e2e.flows.scenes.toggleEditMode(); - - e2e.flows.scenes.removePanels(/^Panel #1$/, /^Panel #2$/, /^Panel #3$/); - - // Check that panels have been deleted - e2e.components.Panels.Panel.headerContainer() - .contains(/^Panel #[123]$/) - .should('not.exist'); - }); -}); diff --git a/e2e/dashboard-new-layouts/dashboards-title-description.spec.ts b/e2e/dashboard-new-layouts/dashboards-title-description.spec.ts deleted file mode 100644 index 2ae8eb28f3e..00000000000 --- a/e2e/dashboard-new-layouts/dashboards-title-description.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { e2e } from '../utils'; - -const PAGE_UNDER_TEST = 'ed155665/annotation-filtering'; - -describe('Dashboard', () => { - beforeEach(() => { - e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); - }); - - it('can change dashboard description and title', () => { - e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); - - e2e.flows.scenes.toggleEditMode(); - - // Check that current dashboard title is visible in breadcrumb - cy.get('[aria-label="Breadcrumbs"]').contains('Annotation filtering').should('exist'); - - const titleInput = () => cy.get('[aria-label="dashboard-options Title field property editor"] input'); - titleInput().should('have.value', 'Annotation filtering').clear().type('New dashboard title'); - titleInput().should('have.value', 'New dashboard title'); - - // Check that new dashboard title is reflected in breadcrumb - cy.get('[aria-label="Breadcrumbs"]').contains('New dashboard title').should('exist'); - - // Check that we can successfully change the dashboard description - const descriptionTextArea = () => - cy.get('[aria-label="dashboard-options Description field property editor"] textarea'); - descriptionTextArea().clear().type('Dashboard description'); - descriptionTextArea().should('have.value', 'Dashboard description'); - }); -}); diff --git a/e2e/run-suite b/e2e/run-suite index 386fbae4f0e..3303918e1fd 100755 --- a/e2e/run-suite +++ b/e2e/run-suite @@ -30,7 +30,6 @@ rootForEnterpriseSuite="./e2e/extensions" rootForOldArch="./e2e/old-arch" rootForKubernetesDashboards="./e2e/dashboards-suite" rootForSearchDashboards="./e2e/dashboards-search-suite" -rootForDashboardNewLayouts="./e2e/dashboard-new-layouts" declare -A cypressConfig=( [screenshotsFolder]=./e2e/"${args[0]}"/screenshots @@ -148,28 +147,6 @@ case "$1" in ;; esac ;; - "dashboard-new-layouts") - env[kubernetesDashboards]=true - env[dashboardNewLayouts]=true - env[groupByVariable]=true - cypressConfig[specPattern]=$rootForDashboardNewLayouts/$testFilesForSingleSuite - cypressConfig[video]=false - case "$2" in - "debug") - echo -e "Debug mode" - env[SLOWMO]=1 - PARAMS="--no-exit" - enterpriseSuite=$(basename "${args[2]}") - ;; - "dev") - echo "Dev mode" - # remove comment to run in slomo ( demo mode ) - # env[SLOWMO]=1 - CMD="cypress open" - enterpriseSuite=$(basename "${args[2]}") - ;; - esac - ;; "enterprise-smtp") env[SMTP_PLUGIN_ENABLED]=true cypressConfig[specPattern]=./e2e/extensions/enterprise/smtp-suite/$testFilesForSingleSuite diff --git a/package.json b/package.json index f647fe32435..34741ebf2a2 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,6 @@ "e2e:old-arch": "./e2e/start-and-run-suite old-arch", "e2e:schema-v2": "./e2e/start-and-run-suite dashboards-schema-v2", "e2e:dashboards-search": "./e2e/start-and-run-suite dashboards-search", - "e2e:dashboard-new-layouts": "./e2e/start-and-run-suite dashboard-new-layouts", - "e2e:dashboard-new-layouts:dev": "./e2e/start-and-run-suite dashboard-new-layouts dev", "e2e:debug": "./e2e/start-and-run-suite debug", "e2e:dev": "./e2e/start-and-run-suite dev", "e2e:benchmark:live": "./e2e/start-and-run-suite benchmark live",