From c79ea234db530622c89e1ee5f6904bbc05c115a4 Mon Sep 17 00:00:00 2001 From: Victor Marin <36818606+mdvictor@users.noreply.github.com> Date: Thu, 6 Jun 2024 11:37:44 +0300 Subject: [PATCH] Simplify lib panel creation in dashboard (#88681) simplify lib panel creation in dashboard --- .../scene/DashboardScene.test.tsx | 28 ++++++++------- .../dashboard-scene/scene/DashboardScene.tsx | 34 ++++--------------- .../sharing/ShareLibraryPanelTab.tsx | 5 +-- 3 files changed, 25 insertions(+), 42 deletions(-) diff --git a/public/app/features/dashboard-scene/scene/DashboardScene.test.tsx b/public/app/features/dashboard-scene/scene/DashboardScene.test.tsx index 2667327ca69..d2138cc8b57 100644 --- a/public/app/features/dashboard-scene/scene/DashboardScene.test.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardScene.test.tsx @@ -890,13 +890,15 @@ describe('DashboardScene', () => { }); it('Should create a library panel', () => { + const vizPanel = new VizPanel({ + title: 'Panel A', + key: 'panel-1', + pluginId: 'table', + }); + const gridItem = new DashboardGridItem({ key: 'griditem-1', - body: new VizPanel({ - title: 'Panel A', - key: 'panel-1', - pluginId: 'table', - }), + body: vizPanel, }); const scene = buildTestScene({ @@ -910,7 +912,7 @@ describe('DashboardScene', () => { name: 'name', }; - scene.createLibraryPanel(gridItem, libPanel as LibraryPanel); + scene.createLibraryPanel(vizPanel, libPanel as LibraryPanel); const layout = scene.state.body as SceneGridLayout; const newGridItem = layout.state.children[0] as DashboardGridItem; @@ -922,13 +924,15 @@ describe('DashboardScene', () => { }); it('Should create a library panel under a row', () => { + const vizPanel = new VizPanel({ + title: 'Panel A', + key: 'panel-1', + pluginId: 'table', + }); + const gridItem = new DashboardGridItem({ key: 'griditem-1', - body: new VizPanel({ - title: 'Panel A', - key: 'panel-1', - pluginId: 'table', - }), + body: vizPanel, }); const scene = buildTestScene({ @@ -947,7 +951,7 @@ describe('DashboardScene', () => { name: 'name', }; - scene.createLibraryPanel(gridItem, libPanel as LibraryPanel); + scene.createLibraryPanel(vizPanel, libPanel as LibraryPanel); const layout = scene.state.body as SceneGridLayout; const newGridItem = (layout.state.children[0] as SceneGridRow).state.children[0] as DashboardGridItem; diff --git a/public/app/features/dashboard-scene/scene/DashboardScene.tsx b/public/app/features/dashboard-scene/scene/DashboardScene.tsx index fed30b8987e..611db13dbac 100644 --- a/public/app/features/dashboard-scene/scene/DashboardScene.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardScene.tsx @@ -511,14 +511,14 @@ export class DashboardScene extends SceneObjectBase { }); } - public createLibraryPanel(gridItemToReplace: DashboardGridItem, libPanel: LibraryPanel) { + public createLibraryPanel(panelToReplace: VizPanel, libPanel: LibraryPanel) { const layout = this.state.body; if (!(layout instanceof SceneGridLayout)) { throw new Error('Trying to add a panel in a layout that is not SceneGridLayout'); } - const panelKey = gridItemToReplace?.state.body.state.key; + const panelKey = panelToReplace.state.key; const body = new LibraryVizPanel({ title: libPanel.model?.title ?? 'Panel', @@ -527,35 +527,13 @@ export class DashboardScene extends SceneObjectBase { panelKey: panelKey ?? getVizPanelKeyForPanelId(dashboardSceneGraph.getNextPanelId(this)), }); - const newGridItem = gridItemToReplace.clone({ body }); + const gridItem = panelToReplace.parent; - if (!(newGridItem instanceof DashboardGridItem)) { - throw new Error('Could not build library viz panel griditem'); + if (!(gridItem instanceof DashboardGridItem)) { + throw new Error("Trying to replace a panel that doesn't have a parent grid item"); } - const key = gridItemToReplace?.state.key; - - if (gridItemToReplace.parent instanceof SceneGridRow) { - const children = gridItemToReplace.parent.state.children.map((rowChild) => { - if (rowChild.state.key === key) { - return newGridItem; - } - return rowChild; - }); - - gridItemToReplace.parent.setState({ children }); - layout.forceRender(); - } else { - // Find the grid item in the layout and replace it - const children = layout.state.children.map((child) => { - if (child.state.key === key) { - return newGridItem; - } - return child; - }); - - layout.setState({ children }); - } + gridItem.setState({ body }); } public duplicatePanel(vizPanel: VizPanel) { diff --git a/public/app/features/dashboard-scene/sharing/ShareLibraryPanelTab.tsx b/public/app/features/dashboard-scene/sharing/ShareLibraryPanelTab.tsx index e78f2501e3e..61c16ddda28 100644 --- a/public/app/features/dashboard-scene/sharing/ShareLibraryPanelTab.tsx +++ b/public/app/features/dashboard-scene/sharing/ShareLibraryPanelTab.tsx @@ -32,7 +32,8 @@ function ShareLibraryPanelTabRenderer({ model }: SceneComponentProps { modalRef?.resolve().onDismiss(); }} - onCreateLibraryPanel={(libPanel: LibraryPanel) => dashboardScene.createLibraryPanel(parent, libPanel)} + onCreateLibraryPanel={(libPanel: LibraryPanel) => dashboardScene.createLibraryPanel(panel, libPanel)} /> ); }