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

Closes #47241
This commit is contained in:
kay delaney 2022-04-07 09:39:54 +01:00 committed by GitHub
parent ca286a238d
commit 0cff2d5980
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 4 deletions

View File

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

View File

@ -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;

View File

@ -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;