Library Panels: Fix refresh when changing to angular library panel (#35048)

Closes #34874

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

@@ -7,7 +7,7 @@ import { Button, useStyles2, VerticalGroup } from '@grafana/ui';
 import { PanelModel } from 'app/features/dashboard/state';
 import { AddLibraryPanelModal } from '../AddLibraryPanelModal/AddLibraryPanelModal';
 import { LibraryPanelsView } from '../LibraryPanelsView/LibraryPanelsView';
-import { PanelOptionsChangedEvent, PanelQueriesChangedEvent } from 'app/types/events';
+import { PanelDirectiveReadyEvent, PanelOptionsChangedEvent, PanelQueriesChangedEvent } from 'app/types/events';
 import { LibraryElementDTO } from '../../types';
 import { toPanelModelLibraryPanel } from '../../utils';
 import { changePanelPlugin } from 'app/features/dashboard/state/actions';
@@ -55,8 +55,12 @@ export const PanelLibraryOptionsGroup: FC<Props> = ({ panel, searchQuery }) => {
 
     panel.configRev = 0;
     panel.refresh();
-    panel.events.publish(new PanelQueriesChangedEvent());
-    panel.events.publish(new PanelOptionsChangedEvent());
+    const unsubscribeEvent = panel.events.subscribe(PanelDirectiveReadyEvent, () => {
+      panel.refresh();
+      unsubscribeEvent.unsubscribe();
+    });
+    panel.events.publish(PanelQueriesChangedEvent);
+    panel.events.publish(PanelOptionsChangedEvent);
   };
 
   const onAddToPanelLibrary = () => {

public/app/features/panel/panel_directive.ts

@@ -4,7 +4,7 @@ import { PanelEvents } from '@grafana/data';
 import { PanelModel } from '../dashboard/state';
 import { PanelCtrl } from './panel_ctrl';
 import { Subscription } from 'rxjs';
-import { RefreshEvent, RenderEvent } from 'app/types/events';
+import { PanelDirectiveReadyEvent, RefreshEvent, RenderEvent } from 'app/types/events';
 import { coreModule } from 'app/core/core_module';
 
 const panelTemplate = `
@@ -113,6 +113,8 @@ coreModule.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
           panelScrollbar.dispose();
         }
       });
+
+      panel.events.publish(PanelDirectiveReadyEvent);
     },
   };
 });

public/app/types/events.ts

@@ -148,6 +148,10 @@ export class RefreshEvent extends BusEventBase {
   static type = 'refresh';
 }
 
+export class PanelDirectiveReadyEvent extends BusEventBase {
+  static type = 'panel-directive-ready';
+}
+
 export class RenderEvent extends BusEventBase {
   static type = 'render';
 }