From 165a0471ad0fe026098300d0c889aa5f96c70a66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 18 Apr 2020 15:48:04 +0200 Subject: [PATCH] NewPanelEdit: Minor edit mode fixes (#23666) * Minor edit mode fixes * Updated --- .../DataLinksInlineEditor.tsx | 50 +++++++------------ .../grafana-ui/src/utils/standardEditors.tsx | 39 +++++++-------- .../PanelEditor/DynamicConfigValueEditor.tsx | 2 +- .../PanelEditor/FieldConfigEditor.tsx | 25 ++++++---- .../PanelEditor/OptionsPaneContent.tsx | 8 +-- .../components/PanelEditor/OverrideEditor.tsx | 2 +- 6 files changed, 57 insertions(+), 69 deletions(-) diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx index 7256f307afb..9069b51430f 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx @@ -17,52 +17,40 @@ interface DataLinksInlineEditorProps { export const DataLinksInlineEditor: React.FC = ({ links, onChange, suggestions, data }) => { const theme = useTheme(); - const [editIndex, setEditIndex] = useState(); - const isEditing = editIndex !== null && editIndex !== undefined; + const [editIndex, setEditIndex] = useState(null); const styles = getDataLinksInlineEditorStyles(theme); + const linksSafe: DataLink[] = links ?? []; + const isEditing = editIndex !== null && linksSafe[editIndex] !== undefined; const onDataLinkChange = (index: number, link: DataLink) => { - if (!links) { - return; - } - const update = cloneDeep(links); + const update = cloneDeep(linksSafe); update[index] = link; onChange(update); }; const onDataLinkAdd = () => { - let update = cloneDeep(links); - if (update) { - update.push({ - title: '', - url: '', - }); - } else { - update = [ - { - title: '', - url: '', - }, - ]; - } + let update = cloneDeep(linksSafe); + + update.push({ + title: '', + url: '', + }); + setEditIndex(update.length - 1); onChange(update); }; const onDataLinkRemove = (index: number) => { - if (!links) { - return; - } - const update = cloneDeep(links); + const update = cloneDeep(linksSafe); update.splice(index, 1); onChange(update); }; return ( <> - {links && links.length > 0 && ( + {linksSafe.length > 0 && (
- {links.map((l, i) => { + {linksSafe.map((l, i) => { return ( = ({ li
)} - {isEditing && ( + {isEditing && editIndex !== null && ( { setEditIndex(null); }} > setEditIndex(null)} @@ -99,7 +87,7 @@ export const DataLinksInlineEditor: React.FC = ({ li )} ); diff --git a/packages/grafana-ui/src/utils/standardEditors.tsx b/packages/grafana-ui/src/utils/standardEditors.tsx index e65ba51653b..46fb2c2df8c 100644 --- a/packages/grafana-ui/src/utils/standardEditors.tsx +++ b/packages/grafana-ui/src/utils/standardEditors.tsx @@ -4,7 +4,6 @@ import { dataLinksOverrideProcessor, FieldConfigPropertyItem, FieldType, - identityOverrideProcessor, NumberFieldConfigSettings, numberOverrideProcessor, standardEditorsRegistry, @@ -107,7 +106,6 @@ export const getStandardFieldConfigs = () => { id: 'decimals', path: 'decimals', name: 'Decimals', - description: '', editor: standardEditorsRegistry.get('number').editor as any, override: standardEditorsRegistry.get('number').editor as any, @@ -128,7 +126,6 @@ export const getStandardFieldConfigs = () => { id: 'thresholds', path: 'thresholds', name: 'Thresholds', - description: '', editor: standardEditorsRegistry.get('thresholds').editor as any, override: standardEditorsRegistry.get('thresholds').editor as any, @@ -142,7 +139,7 @@ export const getStandardFieldConfigs = () => { ], }, shouldApply: field => field.type === FieldType.number, - category: ['Color & thresholds'], + category: ['Thresholds'], getItemsCount: value => (value ? value.steps.length : 0), }; @@ -150,7 +147,6 @@ export const getStandardFieldConfigs = () => { id: 'mappings', path: 'mappings', name: 'Value mappings', - description: '', editor: standardEditorsRegistry.get('mappings').editor as any, override: standardEditorsRegistry.get('mappings').editor as any, @@ -183,8 +179,7 @@ export const getStandardFieldConfigs = () => { const links: FieldConfigPropertyItem = { id: 'links', path: 'links', - name: 'DataLinks', - description: 'Manage date links', + name: 'Data links', editor: standardEditorsRegistry.get('links').editor as any, override: standardEditorsRegistry.get('links').editor as any, process: dataLinksOverrideProcessor, @@ -196,22 +191,22 @@ export const getStandardFieldConfigs = () => { getItemsCount: value => (value ? value.length : 0), }; - const color: FieldConfigPropertyItem = { - id: 'color', - path: 'color', - name: 'Color', - description: 'Customise color', - editor: standardEditorsRegistry.get('color').editor as any, - override: standardEditorsRegistry.get('color').editor as any, - process: identityOverrideProcessor, - settings: { - placeholder: '-', - }, - shouldApply: () => true, - category: ['Color & thresholds'], - }; + // const color: FieldConfigPropertyItem = { + // id: 'color', + // path: 'color', + // name: 'Color', + // description: 'Customise color', + // editor: standardEditorsRegistry.get('color').editor as any, + // override: standardEditorsRegistry.get('color').editor as any, + // process: identityOverrideProcessor, + // settings: { + // placeholder: '-', + // }, + // shouldApply: () => true, + // category: ['Color & thresholds'], + // }; - return [unit, min, max, decimals, title, noValue, color, thresholds, mappings, links]; + return [unit, min, max, decimals, title, noValue, thresholds, mappings, links]; }; /** diff --git a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx index 3046cbf4e80..2862bef22d0 100644 --- a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx @@ -66,7 +66,7 @@ export const DynamicConfigValueEditor: React.FC = } else { editor = (
- + { diff --git a/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx b/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx index ade7f808477..dd458ec85e8 100644 --- a/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx @@ -92,6 +92,7 @@ export const OverrideFieldConfigEditor: React.FC = props => { icon="plus" label="Add override" size="md" + variant="secondary" options={fieldMatchersUI .list() .map>(i => ({ label: i.name, value: i.id, description: i.description }))} @@ -142,10 +143,11 @@ export const DefaultFieldConfigEditor: React.FC = ({ data, onChange, conf ); const renderEditor = useCallback( - (item: FieldConfigPropertyItem) => { + (item: FieldConfigPropertyItem, categoryItemCount: number) => { if (item.isCustom && item.showIf && !item.showIf(config.defaults.custom)) { return null; } + const defaults = config.defaults; const value = item.isCustom ? defaults.custom @@ -153,11 +155,14 @@ export const DefaultFieldConfigEditor: React.FC = ({ data, onChange, conf : undefined : (defaults as any)[item.path]; - const label = ( - - ); + const label = + categoryItemCount > 1 ? ( + + ) : ( + undefined + ); return ( @@ -194,11 +199,9 @@ export const DefaultFieldConfigEditor: React.FC = ({ data, onChange, conf }} key={`${k}/${i}`} > - <> - {groupedConfigs[k].map(c => { - return renderEditor(c); - })} - + {groupedConfigs[k].map(c => { + return renderEditor(c, groupedConfigs[k].length); + })} ); })} diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx index cff46e45e6e..6d7af993f26 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx @@ -8,7 +8,7 @@ import { css } from 'emotion'; import { PanelOptionsTab } from './PanelOptionsTab'; import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton'; -export const OptionsPaneContent: React.FC<{ +interface Props { plugin: PanelPlugin; panel: PanelModel; data: PanelData; @@ -18,7 +18,9 @@ export const OptionsPaneContent: React.FC<{ onFieldConfigsChange: (config: FieldConfigSource) => void; onPanelOptionsChanged: (options: any) => void; onPanelConfigChange: (configKey: string, value: any) => void; -}> = ({ +} + +export const OptionsPaneContent: React.FC = ({ plugin, panel, data, @@ -28,7 +30,7 @@ export const OptionsPaneContent: React.FC<{ onPanelConfigChange, onClose, dashboard, -}) => { +}: Props) => { const theme = useTheme(); const styles = getStyles(theme); const [activeTab, setActiveTab] = useState('options'); diff --git a/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx b/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx index 7a7d8c6f71d..c75d5edee2f 100644 --- a/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx @@ -161,7 +161,7 @@ export const OverrideEditor: React.FC = ({ {