Simplify lib panel creation in dashboard (#88681)

simplify lib panel creation in dashboard

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({
+          body: vizPanel,
-            title: 'Panel A',
-            key: 'panel-1',
-            pluginId: 'table',
-          }),
         });
 
         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({
+          body: vizPanel,
-            title: 'Panel A',
-            key: 'panel-1',
-            pluginId: 'table',
-          }),
         });
 
         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;

public/app/features/dashboard-scene/scene/DashboardScene.tsx

@@ -511,14 +511,14 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
     });
   }
 
-  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<DashboardSceneState> {
       panelKey: panelKey ?? getVizPanelKeyForPanelId(dashboardSceneGraph.getNextPanelId(this)),
     });
 
-    const newGridItem = gridItemToReplace.clone({ body });
+    const gridItem = panelToReplace.parent;
 
-    if (!(newGridItem instanceof DashboardGridItem)) {
+    if (!(gridItem instanceof DashboardGridItem)) {
-      throw new Error('Could not build library viz panel griditem');
+      throw new Error("Trying to replace a panel that doesn't have a parent grid item");
     }
 
-    const key = gridItemToReplace?.state.key;
+    gridItem.setState({ body });
-
-    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 });
-    }
   }
 
   public duplicatePanel(vizPanel: VizPanel) {

public/app/features/dashboard-scene/sharing/ShareLibraryPanelTab.tsx

@@ -32,7 +32,8 @@ function ShareLibraryPanelTabRenderer({ model }: SceneComponentProps<ShareLibrar
     return null;
   }
 
-  const parent = panelRef.resolve().parent;
+  const panel = panelRef.resolve();
+  const parent = panel.parent;
 
   if (parent instanceof DashboardGridItem) {
     const dashboardScene = dashboardRef.resolve();
@@ -50,7 +51,7 @@ function ShareLibraryPanelTabRenderer({ model }: SceneComponentProps<ShareLibrar
         onDismiss={() => {
           modalRef?.resolve().onDismiss();
         }}
-        onCreateLibraryPanel={(libPanel: LibraryPanel) => dashboardScene.createLibraryPanel(parent, libPanel)}
+        onCreateLibraryPanel={(libPanel: LibraryPanel) => dashboardScene.createLibraryPanel(panel, libPanel)}
       />
     );
   }