diff --git a/e2e/dashboards-suite/dashboard-browse.spec.ts b/e2e/dashboards-suite/dashboard-browse.spec.ts index 5be77033f02..2bfc26b59fa 100644 --- a/e2e/dashboards-suite/dashboard-browse.spec.ts +++ b/e2e/dashboards-suite/dashboard-browse.spec.ts @@ -20,4 +20,48 @@ describe('Dashboard browse', () => { e2e.components.Search.folderContent('General').should('be.visible'); e2e.components.Search.dashboardItem('E2E Test - Import Dashboard').should('be.visible'); }); + + it.skip('Manage Dashboards tests', () => { + e2e.flows.importDashboard(testDashboard, 1000, true); + + e2e.pages.Dashboards.visit(); + + // Folders and dashboards should be visible + e2e.pages.BrowseDashboards.table.row('gdev dashboards').should('be.visible'); + e2e.pages.BrowseDashboards.table.row('E2E Test - Import Dashboard').should('be.visible'); + + // gdev dashboards folder is collapsed - its content should not be visible + e2e.pages.BrowseDashboards.table.row('Alerting with TestData').should('not.exist'); + + // should click a folder and see it's children + e2e.pages.BrowseDashboards.table.row('gdev dashboards').find('[aria-label^="Expand folder"]').click(); + e2e.pages.BrowseDashboards.table.row('Alerting with TestData').should('be.visible'); + + // Open the new folder drawer + cy.contains('button', 'New').click(); + cy.contains('button', 'New folder').click(); + + // And create a new folder + e2e.pages.BrowseDashboards.NewFolderForm.nameInput().type('My new folder'); + e2e.pages.BrowseDashboards.NewFolderForm.form().contains('button', 'Create').click(); + e2e.components.Alert.alertV2('success').find('button[aria-label="Close alert"]').click(); + cy.contains('h1', 'My new folder').should('be.visible'); + + // Delete the folder and expect to go back to the root + cy.contains('button', 'Folder actions').click(); + cy.contains('button', 'Delete').click(); + e2e.flows.confirmDelete(); + cy.contains('h1', 'Dashboards').should('be.visible'); + + // Can collapse the gdev folder and delete the dashboard we imported + e2e.pages.BrowseDashboards.table.row('gdev dashboards').find('[aria-label^="Collapse folder"]').click(); + e2e.pages.BrowseDashboards.table + .row('E2E Test - Import Dashboard') + .find('[type="checkbox"]') + .click({ force: true }); + + cy.contains('button', 'Delete').click(); + e2e.flows.confirmDelete(); + e2e.pages.BrowseDashboards.table.row('E2E Test - Import Dashboard').should('not.exist'); + }); }); diff --git a/e2e/utils/flows/confirmModal.ts b/e2e/utils/flows/confirmModal.ts new file mode 100644 index 00000000000..1f2c63f4577 --- /dev/null +++ b/e2e/utils/flows/confirmModal.ts @@ -0,0 +1,6 @@ +import { e2e } from '..'; + +export function confirmDelete() { + cy.get(`input[placeholder='Type "Delete" to confirm']`).type('Delete'); + e2e.pages.ConfirmModal.delete().click(); +} diff --git a/e2e/utils/flows/index.ts b/e2e/utils/flows/index.ts index e7fbfb3ce82..ae07146d13e 100644 --- a/e2e/utils/flows/index.ts +++ b/e2e/utils/flows/index.ts @@ -15,6 +15,7 @@ export * from './setTimeRange'; export * from './importDashboard'; export * from './importDashboards'; export * from './userPreferences'; +export * from './confirmModal'; export { VISUALIZATION_ALERT_LIST, diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts index fae9f32db26..80c5a8c289a 100644 --- a/packages/grafana-e2e-selectors/src/selectors/pages.ts +++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts @@ -280,9 +280,14 @@ export const Pages = { BrowseDashboards: { table: { body: 'data-testid browse-dashboards-table', - row: (uid: string) => `data-testid ${uid} row`, + row: (name: string) => `data-testid browse dashboards row ${name}`, checkbox: (uid: string) => `data-testid ${uid} checkbox`, }, + NewFolderForm: { + form: 'data-testid new folder form', + nameInput: 'data-testid new-folder-name-input', + createButton: 'data-testid new-folder-create-button', + }, }, Search: { url: '/?search=openn', diff --git a/public/app/features/browse-dashboards/components/BrowseView.test.tsx b/public/app/features/browse-dashboards/components/BrowseView.test.tsx index 34271fdbc70..bdca23a807d 100644 --- a/public/app/features/browse-dashboards/components/BrowseView.test.tsx +++ b/public/app/features/browse-dashboards/components/BrowseView.test.tsx @@ -4,6 +4,7 @@ import React from 'react'; import { TestProvider } from 'test/helpers/TestProvider'; import { selectors } from '@grafana/e2e-selectors'; +import { DashboardViewItem } from 'app/features/search/types'; import { wellFormedTree } from '../fixtures/dashboardsTreeItem.fixture'; @@ -47,10 +48,10 @@ describe('browse-dashboards BrowseView', () => { render(); await screen.findByText(folderA.item.title); - await expandFolder(folderA.item.uid); + await expandFolder(folderA.item); expect(screen.queryByText(folderA_folderA.item.title)).toBeInTheDocument(); - await collapseFolder(folderA.item.uid); + await collapseFolder(folderA.item); expect(screen.queryByText(folderA_folderA.item.title)).not.toBeInTheDocument(); }); @@ -69,8 +70,8 @@ describe('browse-dashboards BrowseView', () => { await screen.findByText(folderA.item.title); // First expand then click folderA - await expandFolder(folderA.item.uid); - await clickCheckbox(folderA.item.uid); + await expandFolder(folderA.item); + await clickCheckbox(folderA.item); // All the visible items in it should be checked now const directChildren = mockTree.filter((v) => v.item.kind !== 'ui' && v.item.parentUID === folderA.item.uid); @@ -86,12 +87,12 @@ describe('browse-dashboards BrowseView', () => { await screen.findByText(folderA.item.title); // First expand then click folderA - await expandFolder(folderA.item.uid); - await clickCheckbox(folderA.item.uid); + await expandFolder(folderA.item); + await clickCheckbox(folderA.item); // When additional children are loaded (by expanding a folder), those items // should also be selected - await expandFolder(folderA_folderB.item.uid); + await expandFolder(folderA_folderB.item); const grandchildren = mockTree.filter((v) => v.item.kind !== 'ui' && v.item.parentUID === folderA_folderB.item.uid); @@ -105,11 +106,11 @@ describe('browse-dashboards BrowseView', () => { render(); await screen.findByText(folderA.item.title); - await expandFolder(folderA.item.uid); - await expandFolder(folderA_folderB.item.uid); + await expandFolder(folderA.item); + await expandFolder(folderA_folderB.item); - await clickCheckbox(folderA.item.uid); - await clickCheckbox(folderA_folderB_dashbdB.item.uid); + await clickCheckbox(folderA.item); + await clickCheckbox(folderA_folderB_dashbdB.item); const itemCheckbox = screen.queryByTestId( selectors.pages.BrowseDashboards.table.checkbox(folderA_folderB_dashbdB.item.uid) @@ -129,10 +130,10 @@ describe('browse-dashboards BrowseView', () => { render(); await screen.findByText(folderA.item.title); - await expandFolder(folderA.item.uid); - await expandFolder(folderA_folderB.item.uid); + await expandFolder(folderA.item); + await expandFolder(folderA_folderB.item); - await clickCheckbox(folderA_folderB_dashbdB.item.uid); + await clickCheckbox(folderA_folderB_dashbdB.item); const parentCheckbox = screen.queryByTestId( selectors.pages.BrowseDashboards.table.checkbox(folderA_folderB.item.uid) @@ -158,19 +159,19 @@ describe('browse-dashboards BrowseView', () => { }); }); -async function expandFolder(uid: string) { - const row = screen.getByTestId(selectors.pages.BrowseDashboards.table.row(uid)); +async function expandFolder(item: DashboardViewItem) { + const row = screen.getByTestId(selectors.pages.BrowseDashboards.table.row(item.title)); const expandButton = getByLabelText(row, /Expand folder/); await userEvent.click(expandButton); } -async function collapseFolder(uid: string) { - const row = screen.getByTestId(selectors.pages.BrowseDashboards.table.row(uid)); +async function collapseFolder(item: DashboardViewItem) { + const row = screen.getByTestId(selectors.pages.BrowseDashboards.table.row(item.title)); const expandButton = getByLabelText(row, /Collapse folder/); await userEvent.click(expandButton); } -async function clickCheckbox(uid: string) { - const checkbox = screen.getByTestId(selectors.pages.BrowseDashboards.table.checkbox(uid)); +async function clickCheckbox(item: DashboardViewItem) { + const checkbox = screen.getByTestId(selectors.pages.BrowseDashboards.table.checkbox(item.uid)); await userEvent.click(checkbox); } diff --git a/public/app/features/browse-dashboards/components/DashboardsTree.tsx b/public/app/features/browse-dashboards/components/DashboardsTree.tsx index 5111d3b9b71..ccf37dcd1f6 100644 --- a/public/app/features/browse-dashboards/components/DashboardsTree.tsx +++ b/public/app/features/browse-dashboards/components/DashboardsTree.tsx @@ -190,7 +190,9 @@ function VirtualListRow({ index, style, data }: VirtualListRowProps) {
{row.cells.map((cell) => { const { key, ...cellProps } = cell.getCellProps(); diff --git a/public/app/features/browse-dashboards/components/NewFolderForm.tsx b/public/app/features/browse-dashboards/components/NewFolderForm.tsx index a4eb5933640..d201f8a4e0b 100644 --- a/public/app/features/browse-dashboards/components/NewFolderForm.tsx +++ b/public/app/features/browse-dashboards/components/NewFolderForm.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import { selectors } from '@grafana/e2e-selectors'; import { Button, Input, Form, Field, HorizontalGroup } from '@grafana/ui'; import { Trans, t } from 'app/core/internationalization'; @@ -37,7 +38,11 @@ export function NewFolderForm({ onCancel, onConfirm }: Props) { const fieldNameLabel = t('browse-dashboards.new-folder-form.name-label', 'Folder name'); return ( -
onConfirm(form.folderName)}> + onConfirm(form.folderName)} + data-testid={selectors.pages.BrowseDashboards.NewFolderForm.form} + > {({ register, errors }) => ( <>