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>