NewPanelEdit: Minor edit mode fixes (#23666)

* Minor edit mode fixes

* Updated

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

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'],
-  };
-
-  return [unit, min, max, decimals, title, noValue, color, thresholds, mappings, links];
+  // 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, thresholds, mappings, links];
 };
 
 /**

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 => {

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

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

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 => {