Library panels: Fix issue where query editor options wouldn't be updated (#47242) (#47421)

Closes #47241

(cherry picked from commit 0cff2d5980)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

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>,
     ];
   }

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;

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;