NewPanelEdit: Minor edit mode fixes (#23666)

* Minor edit mode fixes * Updated
2025-02-25 18:55:37 -06:00 · 2020-04-18 15:48:04 +02:00 · 2020-04-18 15:48:04 +02:00 · 165a0471ad
commit 165a0471ad
parent 539edba31b
6 changed files with 57 additions and 69 deletions
--- 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<DataLinksInlineEditorProps> = ({ links, onChange, suggestions, data }) => {
  const theme = useTheme();
-  const [editIndex, setEditIndex] = useState();
-  const isEditing = editIndex !== null && editIndex !== undefined;
+  const [editIndex, setEditIndex] = useState<number | null>(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 && (
        <div className={styles.wrapper}>
-          {links.map((l, i) => {
+          {linksSafe.map((l, i) => {
            return (
              <DataLinksListItem
                key={`${l.title}/${i}`}
@ -79,17 +67,17 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ li
        </div>
      )}

-      {isEditing && (
+      {isEditing && editIndex !== null && (
        <Modal
-          title="Edit data link"
-          isOpen={isEditing}
+          title="Edit link"
+          isOpen={true}
          onDismiss={() => {
            setEditIndex(null);
          }}
        >
          <DataLinkEditorModalContent
            index={editIndex}
-            link={links![editIndex]}
+            link={linksSafe[editIndex]}
            data={data}
            onChange={onDataLinkChange}
            onClose={() => setEditIndex(null)}
@ -99,7 +87,7 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ li
      )}

      <Button size="sm" icon="plus" onClick={onDataLinkAdd} variant="secondary">
-        Add data link
+        Add link
      </Button>
    </>
  );
--- 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<any, DataLink[], StringFieldConfigSettings> = {
    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<any, string, StringFieldConfigSettings> = {
-    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<any, string, StringFieldConfigSettings> = {
+  //   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];
 };

 /**
--- 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<DynamicConfigValueEditorProps> =
  } else {
    editor = (
      <div>
-        <Field label={renderLabel()()} description={item.description}>
+        <Field label={renderLabel()} description={item.description}>
          <item.override
            value={property.value}
            onChange={value => {
--- 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> = props => {
          icon="plus"
          label="Add override"
          size="md"
+          variant="secondary"
          options={fieldMatchersUI
            .list()
            .map<SelectableValue<string>>(i => ({ label: i.name, value: i.id, description: i.description }))}
@ -142,10 +143,11 @@ export const DefaultFieldConfigEditor: React.FC<Props> = ({ 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<Props> = ({ data, onChange, conf
          : undefined
        : (defaults as any)[item.path];

-      const label = (
-        <Label description={item.description} category={item.category?.slice(1)}>
-          {item.name}
-        </Label>
-      );
+      const label =
+        categoryItemCount > 1 ? (
+          <Label description={item.description} category={item.category?.slice(1)}>
+            {item.name}
+          </Label>
+        ) : (
+          undefined
+        );

      return (
        <Field label={label} key={`${item.id}/${item.isCustom}`}>
@ -194,11 +199,9 @@ export const DefaultFieldConfigEditor: React.FC<Props> = ({ data, onChange, conf
            }}
            key={`${k}/${i}`}
          >
-            <>
-              {groupedConfigs[k].map(c => {
-                return renderEditor(c);
-              })}
-            </>
+            {groupedConfigs[k].map(c => {
+              return renderEditor(c, groupedConfigs[k].length);
+            })}
          </OptionsGroup>
        );
      })}
--- 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<Props> = ({
  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');
--- 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<OverrideEditorProps> = ({
            <ValuePicker
              label="Add override property"
              variant="secondary"
-              size="md"
+              size="sm"
              icon="plus"
              options={configPropertiesOptions}
              onChange={o => {