NewPanelEdit: Minor changes (#22239)

packages/grafana-ui/src/components/FieldConfigs/number.tsx

@@ -42,6 +42,7 @@ export const NumberValueEditor: React.FC<FieldConfigEditorProps<number, NumberFi
       max={settings.max}
       max={settings.max}
       type="number"
       type="number"
       step={settings.step}
       step={settings.step}
+      placeholder={settings.placeholder}
       onChange={e => {
       onChange={e => {
         onChange(
         onChange(
           settings.integer ? toIntegerOrUndefined(e.currentTarget.value) : toFloatOrUndefined(e.currentTarget.value)
           settings.integer ? toIntegerOrUndefined(e.currentTarget.value) : toFloatOrUndefined(e.currentTarget.value)
@@ -64,6 +65,7 @@ export const NumberOverrideEditor: React.FC<FieldOverrideEditorProps<number, Num
       max={settings.max}
       max={settings.max}
       type="number"
       type="number"
       step={settings.step}
       step={settings.step}
+      placeholder={settings.placeholder}
       onChange={e => {
       onChange={e => {
         onChange(
         onChange(
           settings.integer ? toIntegerOrUndefined(e.currentTarget.value) : toFloatOrUndefined(e.currentTarget.value)
           settings.integer ? toIntegerOrUndefined(e.currentTarget.value) : toFloatOrUndefined(e.currentTarget.value)

public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx

 import React from 'react';
 import React from 'react';
 import cloneDeep from 'lodash/cloneDeep';
 import cloneDeep from 'lodash/cloneDeep';
 import {
 import {
-  FieldConfigEditorRegistry,
   FieldConfigSource,
   FieldConfigSource,
   DataFrame,
   DataFrame,
   FieldPropertyEditorItem,
   FieldPropertyEditorItem,
   VariableSuggestionsScope,
   VariableSuggestionsScope,
   standardFieldConfigEditorRegistry,
   standardFieldConfigEditorRegistry,
+  PanelPlugin,
   SelectableValue,
   SelectableValue,
 } from '@grafana/data';
 } from '@grafana/data';
 import { Forms, fieldMatchersUI, ValuePicker } from '@grafana/ui';
 import { Forms, fieldMatchersUI, ValuePicker } from '@grafana/ui';
@@ -15,8 +15,8 @@ import { OptionsGroup } from './OptionsGroup';
 import { OverrideEditor } from './OverrideEditor';
 import { OverrideEditor } from './OverrideEditor';
 
 
 interface Props {
 interface Props {
+  plugin: PanelPlugin;
   config: FieldConfigSource;
   config: FieldConfigSource;
-  custom?: FieldConfigEditorRegistry; // custom fields
   include?: string[]; // Ordered list of which fields should be shown/included
   include?: string[]; // Ordered list of which fields should be shown/included
   onChange: (config: FieldConfigSource) => void;
   onChange: (config: FieldConfigSource) => void;
   /* Helpful for IntelliSense */
   /* Helpful for IntelliSense */
@@ -113,15 +113,19 @@ export class FieldConfigEditor extends React.PureComponent<Props> {
   }
   }
 
 
   renderCustomConfigs() {
   renderCustomConfigs() {
-    const { custom } = this.props;
-    if (!custom) {
+    const { plugin } = this.props;
+
+    if (!plugin.customFieldConfigs) {
       return null;
       return null;
     }
     }
-    return custom.list().map(f => this.renderEditor(f, true));
+
+    return plugin.customFieldConfigs.list().map(f => this.renderEditor(f, true));
   }
   }
 
 
   renderOverrides() {
   renderOverrides() {
-    const { config, data, custom } = this.props;
+    const { config, data, plugin } = this.props;
+    const { customFieldConfigs } = plugin;
+
     if (config.overrides.length === 0) {
     if (config.overrides.length === 0) {
       return null;
       return null;
     }
     }
@@ -133,9 +137,9 @@ export class FieldConfigEditor extends React.PureComponent<Props> {
       custom: false,
       custom: false,
     }));
     }));
 
 
-    if (custom) {
+    if (customFieldConfigs) {
       configPropertiesOptions = configPropertiesOptions.concat(
       configPropertiesOptions = configPropertiesOptions.concat(
-        custom.list().map(i => ({
+        customFieldConfigs.list().map(i => ({
           label: i.name,
           label: i.name,
           value: i.id,
           value: i.id,
           description: i.description,
           description: i.description,
@@ -156,7 +160,7 @@ export class FieldConfigEditor extends React.PureComponent<Props> {
               onChange={value => this.onOverrideChange(i, value)}
               onChange={value => this.onOverrideChange(i, value)}
               onRemove={() => this.onOverrideRemove(i)}
               onRemove={() => this.onOverrideRemove(i)}
               configPropertiesOptions={configPropertiesOptions}
               configPropertiesOptions={configPropertiesOptions}
-              customPropertiesRegistry={custom}
+              customPropertiesRegistry={customFieldConfigs}
             />
             />
           );
           );
         })}
         })}
@@ -178,13 +182,17 @@ export class FieldConfigEditor extends React.PureComponent<Props> {
   };
   };
 
 
   render() {
   render() {
+    const { plugin } = this.props;
+
     return (
     return (
       <div>
       <div>
-        <OptionsGroup title="Field configuration">{this.renderStandardConfigs()}</OptionsGroup>
+        {plugin.customFieldConfigs && (
+          <OptionsGroup title={`${plugin.meta.name} options`}>{this.renderCustomConfigs()}</OptionsGroup>
+        )}
 
 
-        {this.props.custom && <OptionsGroup title="Visualization options">{this.renderCustomConfigs()}</OptionsGroup>}
+        <OptionsGroup title="Field defaults">{this.renderStandardConfigs()}</OptionsGroup>
 
 
-        <OptionsGroup title="Field Overrides">
+        <OptionsGroup title="Field overrides">
           {this.renderOverrides()}
           {this.renderOverrides()}
           {this.renderAddOverride()}
           {this.renderAddOverride()}
         </OptionsGroup>
         </OptionsGroup>

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -110,7 +110,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
     return (
     return (
       <FieldConfigEditor
       <FieldConfigEditor
         config={fieldOptions}
         config={fieldOptions}
-        custom={plugin.customFieldConfigs}
+        plugin={plugin}
         onChange={this.onFieldConfigsChange}
         onChange={this.onFieldConfigsChange}
         data={data.series}
         data={data.series}
       />
       />