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 { aria-label={selectors.components.PanelEditor.DataPane.content} key="panel-editor-tabs" > - + , ]; } 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;