From 4463b18ff58abf09e13efc1f6f89918194b9feb5 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 23 Jun 2020 18:20:08 +0200 Subject: [PATCH] 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 --- .../dashboard/components/PanelEditor/OptionsGroup.tsx | 8 +++++--- .../components/PanelEditor/PanelOptionsTab.tsx | 2 +- .../components/PanelEditor/VisualizationTab.tsx | 10 +++++++--- .../dashboard/panel_editor/VizTypePickerPlugin.tsx | 7 +++++-- 4 files changed, 18 insertions(+), 9 deletions(-) diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx index eb126356187..16104ea2817 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx @@ -1,5 +1,6 @@ -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 _ from 'lodash'; import { GrafanaTheme } from '@grafana/data'; import { Icon, stylesFactory, useTheme } from '@grafana/ui'; import { PANEL_EDITOR_UI_STATE_STORAGE_KEY } from './state/reducers'; @@ -15,6 +16,7 @@ export interface OptionsGroupProps { nested?: boolean; persistMe?: boolean; onToggle?: (isExpanded: boolean) => void; + children: ((toggleExpand: (expanded: boolean) => void) => ReactNode) | ReactNode; } export const OptionsGroup: FC = ({ @@ -87,7 +89,7 @@ const CollapsibleSection: FC> = ({ nested = false, onToggle, }) => { - const [isExpanded, toggleExpand] = useState(defaultToClosed ? false : true); + const [isExpanded, toggleExpand] = useState(!defaultToClosed); const theme = useTheme(); const styles = getStyles(theme, isExpanded, nested); useEffect(() => { @@ -108,7 +110,7 @@ const CollapsibleSection: FC> = ({
{renderTitle ? renderTitle(isExpanded) : title}
- {isExpanded &&
{children}
} + {isExpanded &&
{_.isFunction(children) ? children(toggleExpand) : children}
} ); }; diff --git a/public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx b/public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx index 1979c4cdde6..a040461207b 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx @@ -66,7 +66,7 @@ export const PanelOptionsTab: FC = ({ elements.push( - + {toggleExpand => } ); diff --git a/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx b/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx index 63651bc95f9..1d40283cffa 100644 --- a/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx +++ b/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx @@ -11,6 +11,7 @@ import { Field } from '@grafana/ui/src/components/Forms/Field'; interface OwnProps { panel: PanelModel; + onToggleOptionGroup: (expand: boolean) => void; } interface ConnectedProps { @@ -24,7 +25,7 @@ interface DispatchProps { type Props = OwnProps & ConnectedProps & DispatchProps; export const VisualizationTabUnconnected = React.forwardRef( - ({ panel, plugin, changePanelPlugin }, ref) => { + ({ panel, plugin, changePanelPlugin, onToggleOptionGroup }, ref) => { const [searchQuery, setSearchQuery] = useState(''); const theme = useTheme(); const styles = getStyles(theme); @@ -32,9 +33,12 @@ export const VisualizationTabUnconnected = React.forwardRef { - changePanelPlugin(panel, meta.id); + if (meta.id === plugin.meta.id) { + onToggleOptionGroup(false); + } else { + changePanelPlugin(panel, meta.id); + } }; const onKeyPress = useCallback( diff --git a/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx b/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx index 646c692ded1..9adba8b36e4 100644 --- a/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx +++ b/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx @@ -22,7 +22,11 @@ const VizTypePickerPlugin: React.FC = ({ isCurrent, plugin, onClick, disa return (
-
{} : onClick} title={plugin.name}> +
{} : onClick} + title={isCurrent ? 'Click again to close this section' : plugin.name} + >
@@ -87,7 +91,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { `, current: css` label: currentVisualizationItem; - pointer-events: none; > div:first-child { ${styleMixins.focusCss(theme)}; }