Dashboard Scenes: Add model to library panel inspect json (#83536)

* Add model to library panel inspect json

* Add missing information from library panel when inspecting its JSON

* minor refactor

* refactor inspect library panel model to show the model that was fetched from the api

* nit: improve comment

* fix library panel import path

---------

Co-authored-by: Alexandra Vargas <alexa1866@gmail.com>

public/app/features/dashboard-scene/inspect/InspectJsonTab.tsx

@@ -17,6 +17,7 @@ import {
   sceneUtils,
   VizPanel,
 } from '@grafana/scenes';
+import { LibraryPanel } from '@grafana/schema/';
 import { Button, CodeEditor, Field, Select, useStyles2 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 import { getPanelDataFrames } from 'app/features/dashboard/components/HelpWizard/utils';
@@ -257,17 +258,26 @@ function libraryPanelChildToLegacyRepresentation(panel: VizPanel<{}, {}>) {
   }
 
   const gridItem = panel.parent.parent;
-  const libraryPanelObj = gridItemToPanel(gridItem);
-  const panelObj = vizPanelToPanel(panel);
-
-  panelObj.gridPos = {
+  const gridPos = {
     x: gridItem.state.x || 0,
     y: gridItem.state.y || 0,
     h: gridItem.state.height || 0,
     w: gridItem.state.width || 0,
   };
+  const libraryPanelObj = vizPanelToLibraryPanel(panel);
+  const panelObj = vizPanelToPanel(panel, gridPos, false, gridItem);
 
-  return { ...libraryPanelObj, ...panelObj };
+  return { libraryPanel: { ...libraryPanelObj }, ...panelObj };
+}
+
+function vizPanelToLibraryPanel(panel: VizPanel): LibraryPanel {
+  if (!(panel.parent instanceof LibraryVizPanel)) {
+    throw new Error('Panel not a child of LibraryVizPanel');
+  }
+  if (!panel.parent.state._loadedPanel) {
+    throw new Error('Library panel not loaded');
+  }
+  return panel.parent.state._loadedPanel;
 }
 
 function hasGridPosChanged(a: SceneGridItemStateLike, b: SceneGridItemStateLike) {

public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts

@@ -66,6 +66,20 @@ export class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler {
         return;
       }
 
+      if (isLibraryPanelChild(panel)) {
+        this._handleLibraryPanel(panel, (p) => {
+          if (p.state.key === undefined) {
+            // Inspect drawer require a panel key to be set
+            throw new Error('library panel key is undefined');
+          }
+          const drawer = new PanelInspectDrawer({
+            $behaviors: [new ResolveInspectPanelByKey({ panelKey: p.state.key })],
+          });
+          this._scene.setState({ overlay: drawer, inspectPanelKey: p.state.key });
+        });
+        return;
+      }
+
       update.inspectPanelKey = values.inspect;
       update.overlay = new PanelInspectDrawer({
         $behaviors: [new ResolveInspectPanelByKey({ panelKey: values.inspect })],

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

@@ -10,6 +10,7 @@ import {
   VizPanelMenu,
   VizPanelState,
 } from '@grafana/scenes';
+import { LibraryPanel } from '@grafana/schema';
 import { PanelModel } from 'app/features/dashboard/state';
 import { getLibraryPanel } from 'app/features/library-panels/state/api';
 
@@ -28,7 +29,7 @@ interface LibraryVizPanelState extends SceneObjectState {
   panel?: VizPanel;
   isLoaded?: boolean;
   panelKey: string;
-  _loadedVersion?: number;
+  _loadedPanel?: LibraryPanel;
 }
 
 export class LibraryVizPanel extends SceneObjectBase<LibraryVizPanelState> {
@@ -56,7 +57,7 @@ export class LibraryVizPanel extends SceneObjectBase<LibraryVizPanelState> {
     try {
       const libPanel = await getLibraryPanel(this.state.uid, true);
 
-      if (this.state._loadedVersion === libPanel.version) {
+      if (this.state._loadedPanel?.version === libPanel.version) {
         return;
       }
 
@@ -107,7 +108,7 @@ export class LibraryVizPanel extends SceneObjectBase<LibraryVizPanelState> {
         });
       }
 
-      this.setState({ panel, _loadedVersion: libPanel.version, isLoaded: true });
+      this.setState({ panel, _loadedPanel: libPanel, isLoaded: true });
     } catch (err) {
       vizPanel.setState({
         _pluginLoadError: `Unable to load library panel: ${this.state.uid}`,

public/app/features/library-panels/state/api.ts

@@ -65,6 +65,12 @@ export async function getLibraryPanel(uid: string, isHandled = false): Promise<L
     panels: [result.model],
   });
   const { scopedVars, ...model } = dash.panels[0].getSaveModel(); // migrated panel
+
+  //These properties should not exist on LibraryPanel.model which is of type Omit<Panel, 'gridPos' | 'id' | 'libraryPanel'>
+  delete model.gridPos;
+  delete model.id;
+  delete model.libraryPanel;
+
   dash.destroy(); // kill event listeners
   return {
     ...result,