NewPanelEditor: fluent API for custom field config and panel options creation (#23070)

* Registry of standard option editors

* Move override processors  to grafana data

* API for declaratively creating field config/panel options

* Enable declarative API in PanelPlugin for options and field config

* Use new api in react table panel

* Add color and unit picker to option registries

* Add some docs and tests

* Fix tests

public/app/plugins/panel/table2/custom.tsx

@@ -1,54 +0,0 @@
-import { FieldPropertyEditorItem, Registry, FieldConfigEditorRegistry } from '@grafana/data';
-import {
-  NumberValueEditor,
-  NumberOverrideEditor,
-  numberOverrideProcessor,
-  NumberFieldConfigSettings,
-  selectOverrideProcessor,
-  SelectValueEditor,
-  SelectOverrideEditor,
-  SelectFieldConfigSettings,
-} from '@grafana/ui';
-
-export const tableFieldRegistry: FieldConfigEditorRegistry = new Registry<FieldPropertyEditorItem>(() => {
-  const columWidth: FieldPropertyEditorItem<number, NumberFieldConfigSettings> = {
-    id: 'width', // Match field properties
-    name: 'Column width',
-    description: 'column width (for table)',
-
-    editor: NumberValueEditor,
-    override: NumberOverrideEditor,
-    process: numberOverrideProcessor,
-
-    settings: {
-      placeholder: 'auto',
-      min: 20,
-      max: 300,
-    },
-
-    shouldApply: () => true,
-  };
-
-  const cellDisplayMode: FieldPropertyEditorItem<string, SelectFieldConfigSettings<string>> = {
-    id: 'displayMode', // Match field properties
-    name: 'Cell display mode',
-    description: 'Color value, background, show as gauge, etc',
-
-    editor: SelectValueEditor,
-    override: SelectOverrideEditor,
-    process: selectOverrideProcessor,
-
-    settings: {
-      options: [
-        { value: 'auto', label: 'Auto' },
-        { value: 'color-background', label: 'Color background' },
-        { value: 'gradient-gauge', label: 'Gradient gauge' },
-        { value: 'lcd-gauge', label: 'LCD gauge' },
-      ],
-    },
-
-    shouldApply: () => true,
-  };
-
-  return [columWidth, cellDisplayMode];
-});

public/app/plugins/panel/table2/module.tsx

@@ -1,11 +1,40 @@
 import { PanelPlugin } from '@grafana/data';
-
-import { TablePanelEditor } from './TablePanelEditor';
 import { TablePanel } from './TablePanel';
-import { tableFieldRegistry } from './custom';
 import { Options, defaults } from './types';
 
 export const plugin = new PanelPlugin<Options>(TablePanel)
   .setDefaults(defaults)
-  .setCustomFieldConfigs(tableFieldRegistry)
-  .setEditor(TablePanelEditor);
+  .setCustomFieldConfigEditor(builder => {
+    builder
+      .addNumberInput({
+        id: 'width',
+        name: 'Column width',
+        description: 'column width (for table)',
+        settings: {
+          placeholder: 'auto',
+          min: 20,
+          max: 300,
+        },
+      })
+      .addSelect({
+        id: 'displayMode',
+        name: 'Cell display mode',
+        description: 'Color value, background, show as gauge, etc',
+
+        settings: {
+          options: [
+            { value: 'auto', label: 'Auto' },
+            { value: 'color-background', label: 'Color background' },
+            { value: 'gradient-gauge', label: 'Gradient gauge' },
+            { value: 'lcd-gauge', label: 'LCD gauge' },
+          ],
+        },
+      });
+  })
+  .setOptionsEditor(builder => {
+    builder.addBooleanSwitch({
+      id: 'showHeader',
+      name: 'Show header',
+      description: "To display table's header or not to display",
+    });
+  });