Create lib panel and replace it in scene (#88504)

* Create lib panel - also replace it in scene

* refactor

* refactor

* refactor

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

@@ -12,7 +12,7 @@ import {
   behaviors,
   SceneDataTransformer,
 } from '@grafana/scenes';
-import { Dashboard, DashboardCursorSync } from '@grafana/schema';
+import { Dashboard, DashboardCursorSync, LibraryPanel } from '@grafana/schema';
 import appEvents from 'app/core/app_events';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { VariablesChanged } from 'app/features/variables/types';
@@ -888,6 +888,76 @@ describe('DashboardScene', () => {
         expect(body.state.children.length).toBe(1);
         expect(gridItem.state.body).toBeInstanceOf(VizPanel);
       });
+
+      it('Should create a library panel', () => {
+        const gridItem = new DashboardGridItem({
+          key: 'griditem-1',
+          body: new VizPanel({
+            title: 'Panel A',
+            key: 'panel-1',
+            pluginId: 'table',
+          }),
+        });
+
+        const scene = buildTestScene({
+          body: new SceneGridLayout({
+            children: [gridItem],
+          }),
+        });
+
+        const libPanel = {
+          uid: 'uid',
+          name: 'name',
+        };
+
+        scene.createLibraryPanel(gridItem, libPanel as LibraryPanel);
+
+        const layout = scene.state.body as SceneGridLayout;
+        const newGridItem = layout.state.children[0] as DashboardGridItem;
+
+        expect(layout.state.children.length).toBe(1);
+        expect(newGridItem.state.body).toBeInstanceOf(LibraryVizPanel);
+        expect((newGridItem.state.body as LibraryVizPanel).state.uid).toBe('uid');
+        expect((newGridItem.state.body as LibraryVizPanel).state.name).toBe('name');
+      });
+
+      it('Should create a library panel under a row', () => {
+        const gridItem = new DashboardGridItem({
+          key: 'griditem-1',
+          body: new VizPanel({
+            title: 'Panel A',
+            key: 'panel-1',
+            pluginId: 'table',
+          }),
+        });
+
+        const scene = buildTestScene({
+          body: new SceneGridLayout({
+            children: [
+              new SceneGridRow({
+                key: 'row-1',
+                children: [gridItem],
+              }),
+            ],
+          }),
+        });
+
+        const libPanel = {
+          uid: 'uid',
+          name: 'name',
+        };
+
+        scene.createLibraryPanel(gridItem, libPanel as LibraryPanel);
+
+        const layout = scene.state.body as SceneGridLayout;
+        const newGridItem = (layout.state.children[0] as SceneGridRow).state.children[0] as DashboardGridItem;
+
+        expect(layout.state.children.length).toBe(1);
+        expect((layout.state.children[0] as SceneGridRow).state.children.length).toBe(1);
+        expect(newGridItem.state.body).toBeInstanceOf(LibraryVizPanel);
+        expect((newGridItem.state.body as LibraryVizPanel).state.uid).toBe('uid');
+        expect((newGridItem.state.body as LibraryVizPanel).state.name).toBe('name');
+      });
     });
   });
 

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

@@ -16,7 +16,7 @@ import {
   SceneVariableDependencyConfigLike,
   VizPanel,
 } from '@grafana/scenes';
-import { Dashboard, DashboardLink } from '@grafana/schema';
+import { Dashboard, DashboardLink, LibraryPanel } from '@grafana/schema';
 import appEvents from 'app/core/app_events';
 import { LS_PANEL_COPY_KEY } from 'app/core/constants';
 import { getNavModel } from 'app/core/selectors/navModel';
@@ -510,6 +510,53 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
     });
   }
 
+  public createLibraryPanel(gridItemToReplace: DashboardGridItem, 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 body = new LibraryVizPanel({
+      title: libPanel.model?.title ?? 'Panel',
+      uid: libPanel.uid,
+      name: libPanel.name,
+      panelKey: panelKey ?? getVizPanelKeyForPanelId(dashboardSceneGraph.getNextPanelId(this)),
+    });
+
+    const newGridItem = gridItemToReplace.clone({ body });
+
+    if (!(newGridItem instanceof DashboardGridItem)) {
+      throw new Error('Could not build library viz panel griditem');
+    }
+
+    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 });
+    }
+  }
+
   public duplicatePanel(vizPanel: VizPanel) {
     if (!vizPanel.parent) {
       return;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { SceneComponentProps, SceneObjectBase, SceneObjectRef, VizPanel } from '@grafana/scenes';
+import { LibraryPanel } from '@grafana/schema/dist/esm/index.gen';
 import { t } from 'app/core/internationalization';
 import { ShareLibraryPanel } from 'app/features/dashboard/components/ShareModal/ShareLibraryPanel';
 import { shareDashboardType } from 'app/features/dashboard/components/ShareModal/utils';
@@ -31,11 +32,11 @@ function ShareLibraryPanelTabRenderer({ model }: SceneComponentProps<ShareLibrar
     return null;
   }
 
-  const vizPanel = panelRef.resolve();
+  const parent = panelRef.resolve().parent;
 
-  if (vizPanel.parent instanceof DashboardGridItem) {
+  if (parent instanceof DashboardGridItem) {
     const dashboardScene = dashboardRef.resolve();
-    const panelJson = gridItemToPanel(vizPanel.parent);
+    const panelJson = gridItemToPanel(parent);
     const panelModel = new PanelModel(panelJson);
 
     const dashboardJson = transformSceneToSaveModel(dashboardScene);
@@ -49,6 +50,7 @@ function ShareLibraryPanelTabRenderer({ model }: SceneComponentProps<ShareLibrar
         onDismiss={() => {
           modalRef?.resolve().onDismiss();
         }}
+        onCreateLibraryPanel={(libPanel: LibraryPanel) => dashboardScene.createLibraryPanel(parent, libPanel)}
       />
     );
   }

public/app/features/dashboard/components/ShareModal/ShareLibraryPanel.tsx

@@ -11,7 +11,7 @@ interface Props extends ShareModalTabProps {
   initialFolderUid?: string;
 }
 
-export const ShareLibraryPanel = ({ panel, initialFolderUid, onDismiss }: Props) => {
+export const ShareLibraryPanel = ({ panel, initialFolderUid, onCreateLibraryPanel, onDismiss }: Props) => {
   useEffect(() => {
     reportInteraction('grafana_dashboards_library_panel_share_viewed', { shareResource: getTrackingSource(panel) });
   }, [panel]);
@@ -25,7 +25,12 @@ export const ShareLibraryPanel = ({ panel, initialFolderUid, onDismiss }: Props)
       <p className="share-modal-info-text">
         <Trans i18nKey="share-modal.library.info">Create library panel.</Trans>
       </p>
-      <AddLibraryPanelContents panel={panel} initialFolderUid={initialFolderUid} onDismiss={onDismiss} />
+      <AddLibraryPanelContents
+        panel={panel}
+        initialFolderUid={initialFolderUid}
+        onCreateLibraryPanel={onCreateLibraryPanel}
+        onDismiss={onDismiss}
+      />
     </>
   );
 };

public/app/features/dashboard/components/ShareModal/types.ts

@@ -1,12 +1,14 @@
 import React from 'react';
 
 import { NavModelItem } from '@grafana/data';
+import { LibraryPanel } from '@grafana/schema/dist/esm/index.gen';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 
 export interface ShareModalTabProps {
   dashboard: DashboardModel;
   panel?: PanelModel;
   onDismiss?(): void;
+  onCreateLibraryPanel?(libPanel: LibraryPanel): void;
 }
 
 export interface ShareModalTabModel {

public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx

@@ -2,22 +2,28 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useAsync, useDebounce } from 'react-use';
 
 import { FetchError, isFetchError } from '@grafana/runtime';
+import { LibraryPanel } from '@grafana/schema/dist/esm/index.gen';
 import { Button, Field, Input, Modal } from '@grafana/ui';
 import { OldFolderPicker } from 'app/core/components/Select/OldFolderPicker';
 import { t, Trans } from 'app/core/internationalization';
 
 import { PanelModel } from '../../../dashboard/state';
 import { getLibraryPanelByName } from '../../state/api';
-import { LibraryElementDTO } from '../../types';
 import { usePanelSave } from '../../utils/usePanelSave';
 
 interface AddLibraryPanelContentsProps {
   onDismiss?: () => void;
   panel: PanelModel;
   initialFolderUid?: string;
+  onCreateLibraryPanel?: (libPanel: LibraryPanel) => void;
 }
 
-export const AddLibraryPanelContents = ({ panel, initialFolderUid, onDismiss }: AddLibraryPanelContentsProps) => {
+export const AddLibraryPanelContents = ({
+  panel,
+  initialFolderUid,
+  onCreateLibraryPanel,
+  onDismiss,
+}: AddLibraryPanelContentsProps) => {
   const [folderUid, setFolderUid] = useState(initialFolderUid);
   const [panelName, setPanelName] = useState(panel.title);
   const [debouncedPanelName, setDebouncedPanelName] = useState(panel.title);
@@ -30,14 +36,15 @@ export const AddLibraryPanelContents = ({ panel, initialFolderUid, onDismiss }:
 
   const onCreate = useCallback(() => {
     panel.libraryPanel = { uid: '', name: panelName };
-    saveLibraryPanel(panel, folderUid!).then((res: LibraryElementDTO | FetchError) => {
+    saveLibraryPanel(panel, folderUid!).then((res: LibraryPanel | FetchError) => {
       if (!isFetchError(res)) {
         onDismiss?.();
+        onCreateLibraryPanel?.(res);
       } else {
         panel.libraryPanel = undefined;
       }
     });
-  }, [panel, panelName, folderUid, onDismiss, saveLibraryPanel]);
+  }, [panel, panelName, saveLibraryPanel, folderUid, onDismiss, onCreateLibraryPanel]);
 
   const isValidName = useAsync(async () => {
     try {