From b2f022fb5e2bab8a18f51a2bf219a4d8c394a0c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ida=20=C5=A0tambuk?= Date: Thu, 20 Nov 2025 12:37:12 +0100 Subject: [PATCH] Dynamic Dashboards: Make outline open by default (#114146) --- e2e-playwright/dashboard-new-layouts/dashboard-outline.spec.ts | 2 -- .../dashboards-edit-custom-variables.spec.ts | 1 - e2e-playwright/dashboard-new-layouts/utils.ts | 1 - .../dashboard-scene/edit-pane/DashboardEditPaneRenderer.tsx | 2 +- .../features/dashboard-scene/scene/NavToolbarActions.test.tsx | 2 +- .../scene/new-toolbar/actions/EditDashboardSwitch.test.tsx | 2 +- .../new-toolbar/actions/MakeDashboardEditableButton.test.tsx | 2 +- public/app/features/dashboard-scene/utils/tracking.ts | 2 +- 8 files changed, 5 insertions(+), 9 deletions(-) diff --git a/e2e-playwright/dashboard-new-layouts/dashboard-outline.spec.ts b/e2e-playwright/dashboard-new-layouts/dashboard-outline.spec.ts index 49d55f8ca04..ef38379f006 100644 --- a/e2e-playwright/dashboard-new-layouts/dashboard-outline.spec.ts +++ b/e2e-playwright/dashboard-new-layouts/dashboard-outline.spec.ts @@ -22,8 +22,6 @@ test.describe( await dashboardPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.editButton).click(); - await dashboardPage.getByGrafanaSelector(selectors.components.PanelEditor.Outline.section).click(); - // Should be able to click Variables item in outline to see add variable button await dashboardPage.getByGrafanaSelector(selectors.components.PanelEditor.Outline.item('Variables')).click(); await expect( diff --git a/e2e-playwright/dashboard-new-layouts/dashboards-edit-custom-variables.spec.ts b/e2e-playwright/dashboard-new-layouts/dashboards-edit-custom-variables.spec.ts index ce5465c1e33..24c61e5e960 100644 --- a/e2e-playwright/dashboard-new-layouts/dashboards-edit-custom-variables.spec.ts +++ b/e2e-playwright/dashboard-new-layouts/dashboards-edit-custom-variables.spec.ts @@ -199,7 +199,6 @@ test.describe( .click(); // Open the modal editor in the side pane - await dashboardPage.getByGrafanaSelector(selectors.components.PanelEditor.Outline.section).click(); await dashboardPage.getByGrafanaSelector(selectors.components.PanelEditor.Outline.node('Variables')).click(); await dashboardPage.getByGrafanaSelector(selectors.components.PanelEditor.Outline.item('foo')).click(); await openModal(dashboardPage, selectors); diff --git a/e2e-playwright/dashboard-new-layouts/utils.ts b/e2e-playwright/dashboard-new-layouts/utils.ts index c59f782b37a..da629ac8141 100644 --- a/e2e-playwright/dashboard-new-layouts/utils.ts +++ b/e2e-playwright/dashboard-new-layouts/utils.ts @@ -48,7 +48,6 @@ export const flows = { }, async newEditPaneVariableClick(dashboardPage: DashboardPage, selectors: E2ESelectorGroups) { await dashboardPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.editButton).click(); - await dashboardPage.getByGrafanaSelector(selectors.components.PanelEditor.Outline.section).click(); await dashboardPage.getByGrafanaSelector(selectors.components.PanelEditor.Outline.item('Variables')).click(); await dashboardPage .getByGrafanaSelector(selectors.components.PanelEditor.ElementEditPane.addVariableButton) diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneRenderer.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneRenderer.tsx index c2e896fce83..9ca7fbab86e 100644 --- a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneRenderer.tsx +++ b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneRenderer.tsx @@ -35,7 +35,7 @@ export function DashboardEditPaneRenderer({ editPane, isEditPaneCollapsed, onTog const isNewElement = selection?.isNewElement() ?? false; const [outlineCollapsed, setOutlineCollapsed] = useLocalStorage( 'grafana.dashboard.edit-pane.outline.collapsed', - true + false ); const [outlinePaneSize = 0.4, setOutlinePaneSize] = useLocalStorage('grafana.dashboard.edit-pane.outline.size', 0.4); diff --git a/public/app/features/dashboard-scene/scene/NavToolbarActions.test.tsx b/public/app/features/dashboard-scene/scene/NavToolbarActions.test.tsx index e42df99d74a..e276bf80e46 100644 --- a/public/app/features/dashboard-scene/scene/NavToolbarActions.test.tsx +++ b/public/app/features/dashboard-scene/scene/NavToolbarActions.test.tsx @@ -162,7 +162,7 @@ describe('NavToolbarActions', () => { await userEvent.click(await screen.findByTestId(selectors.components.NavToolbar.editDashboard.editButton)); expect(DashboardInteractions.editButtonClicked).toHaveBeenCalledWith({ dashboardUid: 'dash-1', - outlineExpanded: false, + outlineExpanded: true, }); }); diff --git a/public/app/features/dashboard-scene/scene/new-toolbar/actions/EditDashboardSwitch.test.tsx b/public/app/features/dashboard-scene/scene/new-toolbar/actions/EditDashboardSwitch.test.tsx index 583a3da8818..e941c98cadb 100644 --- a/public/app/features/dashboard-scene/scene/new-toolbar/actions/EditDashboardSwitch.test.tsx +++ b/public/app/features/dashboard-scene/scene/new-toolbar/actions/EditDashboardSwitch.test.tsx @@ -58,7 +58,7 @@ describe('EditDashboardSwitch', () => { it('should call DashboardInteractions.editButtonClicked with outlineExpanded:true if grafana.dashboard.edit-pane.outline.collapsed is undefined', async () => { render(); await userEvent.click(await screen.findByTestId(selectors.components.NavToolbar.editDashboard.editButton)); - expect(DashboardInteractions.editButtonClicked).toHaveBeenCalledWith({ outlineExpanded: false }); + expect(DashboardInteractions.editButtonClicked).toHaveBeenCalledWith({ outlineExpanded: true }); }); it('should call DashboardInteractions.editButtonClicked with outlineExpanded:true if grafana.dashboard.edit-pane.outline.collapsed is false', async () => { diff --git a/public/app/features/dashboard-scene/scene/new-toolbar/actions/MakeDashboardEditableButton.test.tsx b/public/app/features/dashboard-scene/scene/new-toolbar/actions/MakeDashboardEditableButton.test.tsx index 05ce93adde1..87788a2b187 100644 --- a/public/app/features/dashboard-scene/scene/new-toolbar/actions/MakeDashboardEditableButton.test.tsx +++ b/public/app/features/dashboard-scene/scene/new-toolbar/actions/MakeDashboardEditableButton.test.tsx @@ -59,7 +59,7 @@ describe('MakeDashboardEditableButton', () => { it('should call DashboardInteractions.editButtonClicked with outlineExpanded:true if grafana.dashboard.edit-pane.outline.collapsed is undefined', async () => { render(); await userEvent.click(await screen.findByTestId(selectors.components.NavToolbar.editDashboard.editButton)); - expect(DashboardInteractions.editButtonClicked).toHaveBeenCalledWith({ outlineExpanded: false }); + expect(DashboardInteractions.editButtonClicked).toHaveBeenCalledWith({ outlineExpanded: true }); }); it('should call DashboardInteractions.editButtonClicked with outlineExpanded:true if grafana.dashboard.edit-pane.outline.collapsed is false', async () => { diff --git a/public/app/features/dashboard-scene/utils/tracking.ts b/public/app/features/dashboard-scene/utils/tracking.ts index fde95ce2ead..638f5bd781b 100644 --- a/public/app/features/dashboard-scene/utils/tracking.ts +++ b/public/app/features/dashboard-scene/utils/tracking.ts @@ -46,7 +46,7 @@ export const trackDeleteDashboardElement = (element: EditableDashboardElementInf export const trackDashboardSceneEditButtonClicked = (dashboardUid?: string) => { DashboardInteractions.editButtonClicked({ - outlineExpanded: !store.getBool('grafana.dashboard.edit-pane.outline.collapsed', true), + outlineExpanded: !store.getBool('grafana.dashboard.edit-pane.outline.collapsed', false), dashboardUid, }); };