From ffab9f6587fdbd19bb6ac72a80039e8ffb3fd930 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 20 Apr 2022 06:19:04 -0400
Subject: [PATCH] Library panels: Fix issue where query editor options wouldn't
 be updated (#47242) (#47421)

Closes #47241

(cherry picked from commit 0cff2d5980c99a0a009c7215a48e57176510d8ae)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
---
 .../components/PanelEditor/PanelEditor.tsx          |  8 +++++++-
 public/app/features/panel/state/actions.ts          |  8 +++++++-
 public/app/features/panel/state/reducers.ts         | 13 +++++++++++--
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
index 7939e89f415..9f61c323bf6 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
@@ -285,7 +285,13 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
         aria-label={selectors.components.PanelEditor.DataPane.content}
         key="panel-editor-tabs"
       >
-        <PanelEditorTabs panel={panel} dashboard={dashboard} tabs={tabs} onChangeTab={this.onChangeTab} />
+        <PanelEditorTabs
+          key={panel.key}
+          panel={panel}
+          dashboard={dashboard}
+          tabs={tabs}
+          onChangeTab={this.onChangeTab}
+        />
       </div>,
     ];
   }
diff --git a/public/app/features/panel/state/actions.ts b/public/app/features/panel/state/actions.ts
index 84e12c00199..f3c9d51fa9e 100644
--- a/public/app/features/panel/state/actions.ts
+++ b/public/app/features/panel/state/actions.ts
@@ -2,7 +2,7 @@ import { getPanelPluginNotFound } from 'app/features/panel/components/PanelPlugi
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
 import { loadPanelPlugin } from 'app/features/plugins/admin/state/actions';
 import { ThunkResult } from 'app/types';
-import { panelModelAndPluginReady } from './reducers';
+import { changePanelKey, panelModelAndPluginReady } from './reducers';
 import { LibraryElementDTO } from 'app/features/library-panels/types';
 import { toPanelModelLibraryPanel } from 'app/features/library-panels/utils';
 import { PanelOptionsChangedEvent, PanelQueriesChangedEvent } from 'app/types/events';
@@ -114,6 +114,12 @@ export function changeToLibraryPanel(panel: PanelModel, libraryPanel: LibraryEle
       panel.generateNewKey();
 
       await dispatch(panelModelAndPluginReady({ key: panel.key, plugin, cleanUpKey: oldKey }));
+    } else {
+      // Even if the plugin is the same, we want to change the key
+      // to force a rerender
+      const oldKey = panel.key;
+      panel.generateNewKey();
+      dispatch(changePanelKey({ oldKey, newKey: panel.key }));
     }
 
     panel.configRev = 0;
diff --git a/public/app/features/panel/state/reducers.ts b/public/app/features/panel/state/reducers.ts
index 164f0e46610..4fe2f8dce70 100644
--- a/public/app/features/panel/state/reducers.ts
+++ b/public/app/features/panel/state/reducers.ts
@@ -26,6 +26,10 @@ const panelsSlice = createSlice({
         plugin: action.payload.plugin,
       };
     },
+    changePanelKey: (state, action: PayloadAction<{ oldKey: string; newKey: string }>) => {
+      state[action.payload.newKey] = state[action.payload.oldKey];
+      delete state[action.payload.oldKey];
+    },
     cleanUpPanelState: (state, action: PayloadAction<{ key: string }>) => {
       cleanUpAngularComponent(state[action.payload.key]);
       delete state[action.payload.key];
@@ -64,8 +68,13 @@ export interface SetPanelInstanceStatePayload {
   value: any;
 }
 
-export const { panelModelAndPluginReady, setPanelAngularComponent, setPanelInstanceState, cleanUpPanelState } =
-  panelsSlice.actions;
+export const {
+  panelModelAndPluginReady,
+  setPanelAngularComponent,
+  setPanelInstanceState,
+  cleanUpPanelState,
+  changePanelKey,
+} = panelsSlice.actions;
 
 export const panelsReducer = panelsSlice.reducer;