IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* initial things

* recreate old behaviour

* adding guide to tooltip

* update text

* fix typings on render prop

* use conditional children
This commit is contained in:
Peter Holmberg 2020-06-23 18:20:08 +02:00 committed by GitHub
parent e998f6e855
commit 4463b18ff5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx
View File

@ -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 { 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>
); );
}; };

2
public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx
View File

@ -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>
); );

8
public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx
View File

@ -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) => {
if (meta.id === plugin.meta.id) {
onToggleOptionGroup(false);
} else {
changePanelPlugin(panel, meta.id); changePanelPlugin(panel, meta.id);
}
}; };
const onKeyPress = useCallback( const onKeyPress = useCallback(

7
public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx
View File

@ -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)};
} }