OptionsUI: add standard field name picker (#36732)

packages/grafana-data/src/field/overrides/processors.ts

@@ -1,4 +1,5 @@
-import { DataLink, FieldOverrideContext, SelectableValue, ThresholdsConfig, ValueMapping } from '../../types';
+import { ComponentType } from 'react';
+import { DataLink, Field, FieldOverrideContext, SelectableValue, ThresholdsConfig, ValueMapping } from '../../types';
 
 export const identityOverrideProcessor = <T>(value: T, _context: FieldOverrideContext, _settings: any) => {
   return value;
@@ -158,3 +159,27 @@ export interface StatsPickerConfigSettings {
    */
   defaultStat?: string;
 }
+
+interface FieldNamePickerInfoProps {
+  name?: string;
+  field?: Field;
+}
+
+export interface FieldNamePickerConfigSettings {
+  /**
+   * Function is a predicate, to test each element of the array.
+   * Return a value that coerces to true to keep the field, or to false otherwise.
+   */
+  filter?: (field: Field) => boolean;
+
+  /**
+   * Show this text when no values are found
+   */
+  noFieldsMessage?: string;
+
+  /**
+   * When a field is selected, this component can show aditional
+   * information, including validation etc
+   */
+  info?: ComponentType<FieldNamePickerInfoProps> | null;
+}

packages/grafana-data/src/utils/OptionsUIBuilders.ts

@@ -15,6 +15,7 @@ import {
   identityOverrideProcessor,
   UnitFieldConfigSettings,
   unitOverrideProcessor,
+  FieldNamePickerConfigSettings,
 } from '../field';
 
 /**
@@ -235,4 +236,14 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
       editor: standardEditorsRegistry.get('unit').editor as any,
     });
   }
+
+  addFieldNamePicker<TSettings = any>(
+    config: PanelOptionsEditorConfig<TOptions, TSettings & FieldNamePickerConfigSettings, string>
+  ): this {
+    return this.addCustomEditor({
+      ...config,
+      id: config.path,
+      editor: standardEditorsRegistry.get('field-name').editor as any,
+    });
+  }
 }