Library Panels: Choosing library panel now updates plugin type (#31643)

* Library Panels: Choosing library panel now updates plugin type

public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx

@@ -31,6 +31,7 @@ export const PanelOptionsTab: FC<Props> = ({
   onPanelOptionsChanged,
 }) => {
   const visTabInputRef = useRef<HTMLInputElement>(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<Props> = ({
   );
 
   if (config.featureToggles.panelLibrary) {
-    elements.push(<PanelLibraryOptionsGroup panel={panel} dashboard={dashboard} key="Panel Library" />);
+    elements.push(
+      <PanelLibraryOptionsGroup panel={panel} dashboard={dashboard} onChange={makeDummyEdit} key="Panel Library" />
+    );
   }
 
   return <>{elements}</>;

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<HTMLInputElement, Pr
     const theme = useTheme();
     const styles = getStyles(theme);
 
-    if (!plugin) {
-      return null;
-    }
     const onPluginTypeChange = (meta: PanelPluginMeta) => {
       if (meta.id === plugin.meta.id) {
         onToggleOptionGroup(false);
@@ -63,6 +60,10 @@ export const VisualizationTabUnconnected = React.forwardRef<HTMLInputElement, Pr
         </span>
       ) : null;
 
+    if (!plugin) {
+      return null;
+    }
+
     return (
       <div className={styles.wrapper}>
         <Field>

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<Props> = ({ panel, dashboard }) => {
+export const PanelLibraryOptionsGroup: React.FC<Props> = ({ 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) => {