LibraryPanels: Respect model title when adding a library panel (#99687)

* Revert "Revert "LibraryPanel: Fallback to panel title if library panel title …"

This reverts commit 6e705ee67c.

* LibraryPanels: Respect model title when adding a library panel to a dashboard

* remove debugger

---------

Co-authored-by: Haris Rozajac <haris.rozajac12@gmail.com>

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

@@ -32,6 +32,7 @@ describe('AddLibraryPanelWidget', () => {
     const panelInfo: LibraryPanel = {
       uid: 'uid',
       model: {
+        title: 'model title',
         type: 'timeseries',
       },
       name: 'name',
@@ -47,6 +48,8 @@ describe('AddLibraryPanelWidget', () => {
     expect(panels.length).toBe(1);
     expect(panel.state.$behaviors![0]).toBeInstanceOf(LibraryPanelBehavior);
     expect(panel.state.key).toBe('panel-1');
+    expect(panel.state.title).toBe('model title');
+    expect(panel.state.hoverHeader).toBe(false);
   });
 
   it('should add library panel from menu and enter edit mode in a dashboard that is not already in edit mode', async () => {
@@ -69,6 +72,7 @@ describe('AddLibraryPanelWidget', () => {
     const panelInfo: LibraryPanel = {
       uid: 'uid',
       model: {
+        title: 'model title',
         type: 'timeseries',
       },
       name: 'name',
@@ -88,12 +92,13 @@ describe('AddLibraryPanelWidget', () => {
     expect(panels.length).toBe(1);
     expect(panel.state.$behaviors![0]).toBeInstanceOf(LibraryPanelBehavior);
     expect(panel.state.key).toBe('panel-1');
+    expect(panel.state.title).toBe('model title');
     expect(dashboard.state.isEditing).toBe(true);
   });
 
   it('should replace grid item when grid item state is passed', async () => {
     const libPanel = new VizPanel({
-      title: 'Panel Title',
+      title: 'Some panel title',
       pluginId: 'table',
       key: 'panel-1',
       $behaviors: [new LibraryPanelBehavior({ name: 'LibraryPanel A', uid: 'uid' })],
@@ -115,6 +120,7 @@ describe('AddLibraryPanelWidget', () => {
     const panelInfo: LibraryPanel = {
       uid: 'new_uid',
       model: {
+        title: 'model title',
         type: 'timeseries',
       },
       name: 'new_name',
@@ -132,6 +138,27 @@ describe('AddLibraryPanelWidget', () => {
     expect(behavior).toBeInstanceOf(LibraryPanelBehavior);
     expect(behavior.state.uid).toBe('new_uid');
     expect(behavior.state.name).toBe('new_name');
+    expect(panels[0].state.title).toBe('model title');
+  });
+
+  it('should set hoverHeader to true if the library panel title is empty', () => {
+    const panelInfo: LibraryPanel = {
+      uid: 'uid',
+      model: {
+        title: '',
+        type: 'timeseries',
+      },
+      name: 'name',
+      version: 1,
+      type: 'timeseries',
+    };
+
+    addLibPanelDrawer.onAddLibraryPanel(panelInfo);
+
+    const panels = dashboard.state.body.getVizPanels();
+    const panel = panels[0];
+    expect(panel.state.title).toBe('');
+    expect(panel.state.hoverHeader).toBe(true);
   });
 });
 

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

@@ -26,6 +26,9 @@ export class AddLibraryPanelDrawer extends SceneObjectBase<AddLibraryPanelDrawer
     const newPanel = getDefaultVizPanel();
 
     newPanel.setState({
+      // Panel title takes precedence over library panel title when resolving the library panel
+      title: panelInfo.model.title,
+      hoverHeader: !panelInfo.model.title,
       $behaviors: [new LibraryPanelBehavior({ uid: panelInfo.uid, name: panelInfo.name })],
     });