Panel Edit: Clicking twice on a visualization closes the VizPicker (#25739)

* initial things

* recreate old behaviour

* adding guide to tooltip

* update text

* fix typings on render prop

* use conditional children

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

-import React, { FC, memo, useCallback, useEffect, useState } from 'react';
+import React, { FC, memo, ReactNode, useCallback, useEffect, useState } from 'react';
 import { css, cx } from 'emotion';
 import { css, cx } from 'emotion';
+import _ from 'lodash';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
 import { Icon, stylesFactory, useTheme } from '@grafana/ui';
 import { Icon, stylesFactory, useTheme } from '@grafana/ui';
 import { PANEL_EDITOR_UI_STATE_STORAGE_KEY } from './state/reducers';
 import { PANEL_EDITOR_UI_STATE_STORAGE_KEY } from './state/reducers';
@@ -15,6 +16,7 @@ export interface OptionsGroupProps {
   nested?: boolean;
   nested?: boolean;
   persistMe?: boolean;
   persistMe?: boolean;
   onToggle?: (isExpanded: boolean) => void;
   onToggle?: (isExpanded: boolean) => void;
+  children: ((toggleExpand: (expanded: boolean) => void) => ReactNode) | ReactNode;
 }
 }
 
 
 export const OptionsGroup: FC<OptionsGroupProps> = ({
 export const OptionsGroup: FC<OptionsGroupProps> = ({
@@ -87,7 +89,7 @@ const CollapsibleSection: FC<Omit<OptionsGroupProps, 'persistMe'>> = ({
   nested = false,
   nested = false,
   onToggle,
   onToggle,
 }) => {
 }) => {
-  const [isExpanded, toggleExpand] = useState(defaultToClosed ? false : true);
+  const [isExpanded, toggleExpand] = useState(!defaultToClosed);
   const theme = useTheme();
   const theme = useTheme();
   const styles = getStyles(theme, isExpanded, nested);
   const styles = getStyles(theme, isExpanded, nested);
   useEffect(() => {
   useEffect(() => {
@@ -108,7 +110,7 @@ const CollapsibleSection: FC<Omit<OptionsGroupProps, 'persistMe'>> = ({
         </div>
         </div>
         <div style={{ width: '100%' }}>{renderTitle ? renderTitle(isExpanded) : title}</div>
         <div style={{ width: '100%' }}>{renderTitle ? renderTitle(isExpanded) : title}</div>
       </div>
       </div>
-      {isExpanded && <div className={styles.body}>{children}</div>}
+      {isExpanded && <div className={styles.body}>{_.isFunction(children) ? children(toggleExpand) : children}</div>}
     </div>
     </div>
   );
   );
 };
 };

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

@@ -66,7 +66,7 @@ export const PanelOptionsTab: FC<Props> = ({
 
 
   elements.push(
   elements.push(
     <OptionsGroup title="Visualization" id="Panel type" key="Panel type" defaultToClosed onToggle={focusVisPickerInput}>
     <OptionsGroup title="Visualization" id="Panel type" key="Panel type" defaultToClosed onToggle={focusVisPickerInput}>
-      <VisualizationTab panel={panel} ref={visTabInputRef} />
+      {toggleExpand => <VisualizationTab panel={panel} ref={visTabInputRef} onToggleOptionGroup={toggleExpand} />}
     </OptionsGroup>
     </OptionsGroup>
   );
   );
 
 

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

@@ -11,6 +11,7 @@ import { Field } from '@grafana/ui/src/components/Forms/Field';
 
 
 interface OwnProps {
 interface OwnProps {
   panel: PanelModel;
   panel: PanelModel;
+  onToggleOptionGroup: (expand: boolean) => void;
 }
 }
 
 
 interface ConnectedProps {
 interface ConnectedProps {
@@ -24,7 +25,7 @@ interface DispatchProps {
 type Props = OwnProps & ConnectedProps & DispatchProps;
 type Props = OwnProps & ConnectedProps & DispatchProps;
 
 
 export const VisualizationTabUnconnected = React.forwardRef<HTMLInputElement, Props>(
 export const VisualizationTabUnconnected = React.forwardRef<HTMLInputElement, Props>(
-  ({ panel, plugin, changePanelPlugin }, ref) => {
+  ({ panel, plugin, changePanelPlugin, onToggleOptionGroup }, ref) => {
     const [searchQuery, setSearchQuery] = useState('');
     const [searchQuery, setSearchQuery] = useState('');
     const theme = useTheme();
     const theme = useTheme();
     const styles = getStyles(theme);
     const styles = getStyles(theme);
@@ -32,9 +33,12 @@ export const VisualizationTabUnconnected = React.forwardRef<HTMLInputElement, Pr
     if (!plugin) {
     if (!plugin) {
       return null;
       return null;
     }
     }
-
     const onPluginTypeChange = (meta: PanelPluginMeta) => {
     const onPluginTypeChange = (meta: PanelPluginMeta) => {
-      changePanelPlugin(panel, meta.id);
+      if (meta.id === plugin.meta.id) {
+        onToggleOptionGroup(false);
+      } else {
+        changePanelPlugin(panel, meta.id);
+      }
     };
     };
 
 
     const onKeyPress = useCallback(
     const onKeyPress = useCallback(

public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx

@@ -22,7 +22,11 @@ const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClick, disa
 
 
   return (
   return (
     <div className={styles.wrapper} aria-label={selectors.components.PluginVisualization.item(plugin.name)}>
     <div className={styles.wrapper} aria-label={selectors.components.PluginVisualization.item(plugin.name)}>
-      <div className={cssClass} onClick={disabled ? () => {} : onClick} title={plugin.name}>
+      <div
+        className={cssClass}
+        onClick={disabled ? () => {} : onClick}
+        title={isCurrent ? 'Click again to close this section' : plugin.name}
+      >
         <div className={styles.bg} />
         <div className={styles.bg} />
         <div className={styles.itemContent}>
         <div className={styles.itemContent}>
           <div className={styles.name} title={plugin.name}>
           <div className={styles.name} title={plugin.name}>
@@ -87,7 +91,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     `,
     current: css`
     current: css`
       label: currentVisualizationItem;
       label: currentVisualizationItem;
-      pointer-events: none;
       > div:first-child {
       > div:first-child {
         ${styleMixins.focusCss(theme)};
         ${styleMixins.focusCss(theme)};
       }
       }