diff --git a/public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx b/public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx index 178162ea8c6..30907f56ecd 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx @@ -31,6 +31,7 @@ export const PanelOptionsTab: FC = ({ onPanelOptionsChanged, }) => { const visTabInputRef = useRef(null); + const makeDummyEdit = useCallback(() => onPanelConfigChange('isEditing', true), []); const linkVariablesSuggestions = useMemo(() => getPanelLinksVariableSuggestions(), []); const onRepeatRowSelectChange = useCallback((value: string | null) => onPanelConfigChange('repeat', value), [ onPanelConfigChange, @@ -168,7 +169,9 @@ export const PanelOptionsTab: FC = ({ ); if (config.featureToggles.panelLibrary) { - elements.push(); + elements.push( + + ); } return <>{elements}; diff --git a/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx b/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx index 26e9e476e03..35347e542f6 100644 --- a/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx +++ b/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx @@ -15,7 +15,7 @@ interface OwnProps { } interface ConnectedProps { - plugin?: PanelPlugin; + plugin: PanelPlugin; } interface DispatchProps { @@ -30,9 +30,6 @@ export const VisualizationTabUnconnected = React.forwardRef { if (meta.id === plugin.meta.id) { onToggleOptionGroup(false); @@ -63,6 +60,10 @@ export const VisualizationTabUnconnected = React.forwardRef ) : null; + if (!plugin) { + return null; + } + return (
diff --git a/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx b/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx index bc8489dd2d8..af1481e4ca0 100644 --- a/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx +++ b/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { css } from 'emotion'; import pick from 'lodash/pick'; +import omit from 'lodash/omit'; import { GrafanaTheme } from '@grafana/data'; import { Button, stylesFactory, useStyles } from '@grafana/ui'; @@ -11,29 +12,40 @@ import { LibraryPanelsView } from '../LibraryPanelsView/LibraryPanelsView'; import { PanelQueriesChangedEvent } from 'app/types/events'; import { LibraryPanelDTO } from '../../types'; import { toPanelModelLibraryPanel } from '../../utils'; +import { useDispatch } from 'react-redux'; +import { changePanelPlugin } from 'app/features/dashboard/state/actions'; interface Props { panel: PanelModel; dashboard: DashboardModel; + onChange: () => void; } -export const PanelLibraryOptionsGroup: React.FC = ({ panel, dashboard }) => { +export const PanelLibraryOptionsGroup: React.FC = ({ panel, dashboard, onChange }) => { const styles = useStyles(getStyles); const [showingAddPanelModal, setShowingAddPanelModal] = useState(false); + const dispatch = useDispatch(); const useLibraryPanel = (panelInfo: LibraryPanelDTO) => { + const panelTypeChanged = panel.type !== panelInfo.model.type; panel.restoreModel({ - ...panelInfo.model, + ...omit(panelInfo.model, 'type'), ...pick(panel, 'gridPos', 'id'), libraryPanel: toPanelModelLibraryPanel(panelInfo), }); + if (panelTypeChanged) { + dispatch(changePanelPlugin(panel, panelInfo.model.type)); + } + // Though the panel model has changed, since we're switching to an existing // library panel, we reset the "hasChanged" state. panel.hasChanged = false; - panel.refresh(); panel.events.publish(PanelQueriesChangedEvent); + + // onChange is called here to force the panel editor to re-render + onChange(); }; const onAddToPanelLibrary = (e: React.MouseEvent) => {