[v11.5.x] LibraryPanel: Fallback to panel title if library panel title is not set (#99411)

LibraryPanel: Fallback to panel title if library panel title is not set (#99377)

(cherry picked from commit c862aa4d68)

Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>

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

@@ -223,7 +223,7 @@ async function buildTestSceneWithLibraryPanel() {
     title: 'Panel A',
     pluginId: 'table',
     key: 'panel-12',
-    $behaviors: [new LibraryPanelBehavior({ title: 'LibraryPanel A title', name: 'LibraryPanel A', uid: '111' })],
+    $behaviors: [new LibraryPanelBehavior({ name: 'LibraryPanel A', uid: '111' })],
     titleItems: [new VizPanelLinks({ menu: new VizPanelLinksMenu({}) })],
     $data: new SceneDataTransformer({
       transformations: [

public/app/features/dashboard-scene/panel-edit/PanelEditor.test.ts

@@ -200,7 +200,6 @@ describe('PanelEditor', () => {
 
       const libPanelBehavior = new LibraryPanelBehavior({
         isLoaded: true,
-        title: libraryPanelModel.title,
         uid: libraryPanelModel.uid,
         name: libraryPanelModel.name,
         _loadedPanel: libraryPanelModel,
@@ -239,7 +238,7 @@ describe('PanelEditor', () => {
       // Wait for mock api to return and update the library panel
       expect(libPanelBehavior.state._loadedPanel?.version).toBe(2);
       expect(libPanelBehavior.state.name).toBe('changed name');
-      expect(libPanelBehavior.state.title).toBe('changed title');
+      expect(panel.state.title).toBe('changed title');
       expect((gridItem.state.body as VizPanel).state.title).toBe('changed title');
     });
 
@@ -258,7 +257,6 @@ describe('PanelEditor', () => {
 
       const libPanelBehavior = new LibraryPanelBehavior({
         isLoaded: true,
-        title: libraryPanelModel.title,
         uid: libraryPanelModel.uid,
         name: libraryPanelModel.name,
         _loadedPanel: libraryPanelModel,

public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx

@@ -177,7 +177,6 @@ describe('PanelOptions', () => {
 
     const libraryPanel = new LibraryPanelBehavior({
       isLoaded: true,
-      title: libraryPanelModel.title,
       uid: libraryPanelModel.uid,
       name: libraryPanelModel.name,
       _loadedPanel: libraryPanelModel,

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

@@ -96,7 +96,7 @@ describe('AddLibraryPanelWidget', () => {
       title: 'Panel Title',
       pluginId: 'table',
       key: 'panel-1',
-      $behaviors: [new LibraryPanelBehavior({ title: 'LibraryPanel A title', name: 'LibraryPanel A', uid: 'uid' })],
+      $behaviors: [new LibraryPanelBehavior({ name: 'LibraryPanel A', uid: 'uid' })],
     });
 
     addLibPanelDrawer = new AddLibraryPanelDrawer({ panelToReplaceRef: libPanel.getRef() });

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

@@ -408,7 +408,6 @@ describe('DashboardDatasourceBehaviour', () => {
     it('should re-run queries when library panel re-runs query', async () => {
       const libPanelBehavior = new LibraryPanelBehavior({
         isLoaded: false,
-        title: 'Panel title',
         uid: 'fdcvggvfy2qdca',
         name: 'My Library Panel',
         _loadedPanel: undefined,
@@ -469,7 +468,6 @@ describe('DashboardDatasourceBehaviour', () => {
       jest.spyOn(console, 'error').mockImplementation();
       const libPanelBehavior = new LibraryPanelBehavior({
         isLoaded: false,
-        title: 'Panel title',
         uid: 'fdcvggvfy2qdca',
         name: 'My Library Panel',
         _loadedPanel: undefined,
@@ -519,7 +517,6 @@ describe('DashboardDatasourceBehaviour', () => {
       // Simulate library panel being loaded
       libPanelBehavior.setState({
         isLoaded: true,
-        title: 'Panel title',
         uid: 'fdcvggvfy2qdca',
         name: 'My Library Panel',
         _loadedPanel: undefined,

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

@@ -489,7 +489,7 @@ describe('DashboardScene', () => {
           title: 'Library Panel',
           pluginId: 'table',
           key: 'panel-4',
-          $behaviors: [new LibraryPanelBehavior({ title: 'Library Panel', name: 'libraryPanel', uid: 'uid' })],
+          $behaviors: [new LibraryPanelBehavior({ name: 'libraryPanel', uid: 'uid' })],
         });
 
         scene.copyPanel(libVizPanel);
@@ -544,7 +544,7 @@ describe('DashboardScene', () => {
               title: 'Library Panel',
               pluginId: 'table',
               key: 'panel-4',
-              $behaviors: [new LibraryPanelBehavior({ title: 'Library Panel', name: 'libraryPanel', uid: 'uid' })],
+              $behaviors: [new LibraryPanelBehavior({ name: 'libraryPanel', uid: 'uid' })],
             }),
           })
         );
@@ -563,7 +563,7 @@ describe('DashboardScene', () => {
         const libPanel = new VizPanel({
           title: 'Panel B',
           pluginId: 'table',
-          $behaviors: [new LibraryPanelBehavior({ title: 'title', name: 'lib panel', uid: 'abc', isLoaded: true })],
+          $behaviors: [new LibraryPanelBehavior({ name: 'lib panel', uid: 'abc', isLoaded: true })],
         });
 
         const scene = buildTestScene({
@@ -928,7 +928,7 @@ function buildTestScene(overrides?: Partial<DashboardSceneState>) {
                   title: 'Library Panel',
                   pluginId: 'table',
                   key: 'panel-5',
-                  $behaviors: [new LibraryPanelBehavior({ title: 'Library Panel', name: 'libraryPanel', uid: 'uid' })],
+                  $behaviors: [new LibraryPanelBehavior({ name: 'libraryPanel', uid: 'uid' })],
                 }),
               }),
             ],
@@ -946,7 +946,7 @@ function buildTestScene(overrides?: Partial<DashboardSceneState>) {
               title: 'Library Panel',
               pluginId: 'table',
               key: 'panel-6',
-              $behaviors: [new LibraryPanelBehavior({ title: 'Library Panel', name: 'libraryPanel', uid: 'uid' })],
+              $behaviors: [new LibraryPanelBehavior({ name: 'libraryPanel', uid: 'uid' })],
             }),
           }),
         ],

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

@@ -167,7 +167,7 @@ describe('LibraryPanelBehavior', () => {
 });
 
 async function buildTestSceneWithLibraryPanel() {
-  const behavior = new LibraryPanelBehavior({ title: 'LibraryPanel A title', name: 'LibraryPanel A', uid: '111' });
+  const behavior = new LibraryPanelBehavior({ name: 'LibraryPanel A', uid: '111' });
 
   const vizPanel = new VizPanel({
     title: 'Panel A',

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

@@ -17,8 +17,6 @@ import { AngularDeprecation } from './angular/AngularDeprecation';
 import { DashboardGridItem } from './layout-default/DashboardGridItem';
 
 export interface LibraryPanelBehaviorState extends SceneObjectState {
-  // Library panels use title from dashboard JSON's panel model, not from library panel definition, hence we pass it.
-  title?: string;
   uid: string;
   name: string;
   isLoaded?: boolean;
@@ -66,7 +64,7 @@ export class LibraryPanelBehavior extends SceneObjectBase<LibraryPanelBehaviorSt
     titleItems.push(new PanelNotices());
 
     const vizPanelState: VizPanelState = {
-      title: libPanelModel.title,
+      title: vizPanel.state.title ?? libPanelModel.title,
       options: libPanelModel.options ?? {},
       fieldConfig: libPanelModel.fieldConfig,
       pluginId: libPanelModel.type,
@@ -88,7 +86,7 @@ export class LibraryPanelBehavior extends SceneObjectBase<LibraryPanelBehaviorSt
     vizPanel.setState(vizPanelState);
     vizPanel.changePluginType(libPanelModel.type, vizPanelState.options, vizPanelState.fieldConfig);
 
-    this.setState({ _loadedPanel: libPanel, isLoaded: true, name: libPanel.name, title: libPanelModel.title });
+    this.setState({ _loadedPanel: libPanel, isLoaded: true, name: libPanel.name });
 
     const layoutElement = vizPanel.parent!;
 

public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.test.ts

@@ -355,7 +355,6 @@ describe('transformSceneToSaveModel', () => {
         $behaviors: [
           new LibraryPanelBehavior({
             name: 'Some lib panel panel',
-            title: 'A panel',
             uid: 'lib-panel-uid',
           }),
         ],
@@ -399,7 +398,7 @@ describe('transformSceneToSaveModel', () => {
         x: 0,
         y: 0,
       });
-      expect(result.title).toBe('A panel');
+      expect(result.title).toBe('Panel blahh blah');
       expect(result.transformations).toBeUndefined();
       expect(result.fieldConfig).toBeUndefined();
       expect(result.options).toBeUndefined();
@@ -851,7 +850,6 @@ describe('transformSceneToSaveModel', () => {
             $behaviors: [
               new LibraryPanelBehavior({
                 name: 'Some lib panel panel',
-                title: 'A panel',
                 uid: 'lib-panel-uid',
               }),
             ],
@@ -865,7 +863,7 @@ describe('transformSceneToSaveModel', () => {
 
         expect(result[0]).toMatchObject({
           id: 4,
-          title: 'A panel',
+          title: 'Panel blahh blah',
           libraryPanel: {
             name: 'Some lib panel panel',
             uid: 'lib-panel-uid',

public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.ts

@@ -186,7 +186,7 @@ export function vizPanelToPanel(
 
     panel = {
       id: getPanelIdForVizPanel(vizPanel),
-      title: libPanel!.state.title,
+      title: vizPanel.state.title,
       gridPos: gridPos,
       libraryPanel: {
         name: libPanel!.state.name,

public/app/features/dashboard-scene/utils/PanelModelCompatibilityWrapper.test.ts

@@ -17,7 +17,6 @@ describe('PanelModelCompatibilityWrapper', () => {
     const libPanel = new LibraryPanelBehavior({
       uid: 'a',
       name: 'aa',
-      title: 'a',
     });
 
     panel.setState({