From 7c0158cdff48b739d1ccd7f2cdcf1db387772cc9 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Wed, 2 Jun 2021 13:35:12 +0100
Subject: [PATCH] Library Panels: Fix refresh when changing to angular library
 panel (#35048)

Closes #34874
---
 .../PanelLibraryOptionsGroup.tsx                       | 10 +++++++---
 public/app/features/panel/panel_directive.ts           |  4 +++-
 public/app/types/events.ts                             |  4 ++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx b/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
index 77e1d0aa2a9..15f3f6af965 100644
--- a/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
+++ b/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 = () => {
diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts
index 22ae19e6ec1..fde0dd15155 100644
--- a/public/app/features/panel/panel_directive.ts
+++ b/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);
     },
   };
 });
diff --git a/public/app/types/events.ts b/public/app/types/events.ts
index f91813fb027..875634d4028 100644
--- a/public/app/types/events.ts
+++ b/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';
 }