Timeseries: Use standard editor for fillBelowTo field picker (#58283)

.betterer.results

@@ -711,9 +711,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "36"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "37"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "38"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "39"],
+      [0, 0, 0, "Do not use any type assertions.", "39"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "40"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "41"],
+      [0, 0, 0, "Do not use any type assertions.", "41"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "42"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "43"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "44"],
@@ -723,38 +723,43 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "48"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "49"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "50"],
-      [0, 0, 0, "Do not use any type assertions.", "51"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "51"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "52"],
-      [0, 0, 0, "Do not use any type assertions.", "53"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "53"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "54"],
-      [0, 0, 0, "Do not use any type assertions.", "55"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "55"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "56"],
+      [0, 0, 0, "Do not use any type assertions.", "56"],
-      [0, 0, 0, "Do not use any type assertions.", "57"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "57"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "58"],
+      [0, 0, 0, "Do not use any type assertions.", "58"],
-      [0, 0, 0, "Do not use any type assertions.", "59"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "59"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "60"],
+      [0, 0, 0, "Do not use any type assertions.", "60"],
-      [0, 0, 0, "Do not use any type assertions.", "61"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "61"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "62"],
+      [0, 0, 0, "Do not use any type assertions.", "62"],
-      [0, 0, 0, "Do not use any type assertions.", "63"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "63"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "64"],
+      [0, 0, 0, "Do not use any type assertions.", "64"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "65"],
       [0, 0, 0, "Do not use any type assertions.", "66"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "67"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "68"],
+      [0, 0, 0, "Do not use any type assertions.", "68"],
-      [0, 0, 0, "Do not use any type assertions.", "69"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "69"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "70"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "71"],
+      [0, 0, 0, "Do not use any type assertions.", "71"],
-      [0, 0, 0, "Do not use any type assertions.", "72"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "72"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "73"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "74"],
+      [0, 0, 0, "Do not use any type assertions.", "74"],
-      [0, 0, 0, "Do not use any type assertions.", "75"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "75"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "76"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "77"],
+      [0, 0, 0, "Do not use any type assertions.", "77"],
-      [0, 0, 0, "Do not use any type assertions.", "78"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "78"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "79"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "80"],
+      [0, 0, 0, "Do not use any type assertions.", "80"],
-      [0, 0, 0, "Do not use any type assertions.", "81"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "81"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "82"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "82"],
+      [0, 0, 0, "Do not use any type assertions.", "83"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "84"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "85"],
+      [0, 0, 0, "Do not use any type assertions.", "86"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "87"]
     ],
     "packages/grafana-data/src/utils/Registry.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -8184,9 +8189,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
       [0, 0, 0, "Do not use any type assertions.", "3"]
     ],
-    "public/app/plugins/panel/timeseries/FillBelowToEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/plugins/panel/timeseries/LineStyleEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],

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

@@ -129,6 +129,20 @@ export class FieldConfigEditorBuilder<TOptions> extends OptionsUIRegistryBuilder
       settings: config.settings || {},
     });
   }
+
+  addFieldNamePicker<TSettings = any>(
+    config: FieldConfigEditorConfig<TOptions, TSettings & FieldNamePickerConfigSettings, string>
+  ): this {
+    return this.addCustomEditor({
+      ...config,
+      id: config.path,
+      editor: standardEditorsRegistry.get('field-name').editor as any,
+      override: standardEditorsRegistry.get('field-name').editor as any,
+      process: identityOverrideProcessor,
+      shouldApply: config.shouldApply ? config.shouldApply : () => true,
+      settings: config.settings || {},
+    });
+  }
 }
 
 export interface NestedValueAccess {

public/app/plugins/panel/timeseries/FillBelowToEditor.tsx

@@ -1,48 +0,0 @@
-import React, { useMemo } from 'react';
-
-import { FieldOverrideEditorProps, FieldType, getFieldDisplayName, SelectableValue } from '@grafana/data';
-import { Select } from '@grafana/ui';
-
-export const FillBellowToEditor: React.FC<FieldOverrideEditorProps<string, any>> = ({ value, context, onChange }) => {
-  const names = useMemo(() => {
-    const names: Array<SelectableValue<string>> = [];
-    if (context.data.length) {
-      for (const frame of context.data) {
-        for (const field of frame.fields) {
-          if (field.type === FieldType.number) {
-            const label = getFieldDisplayName(field, frame, context.data);
-            names.push({
-              label,
-              value: label,
-            });
-          }
-        }
-      }
-    }
-    return names;
-  }, [context]);
-
-  const current = useMemo(() => {
-    const found = names.find((v) => v.value === value);
-    if (found) {
-      return found;
-    }
-    if (value) {
-      return {
-        label: value,
-        value,
-      };
-    }
-    return undefined;
-  }, [names, value]);
-
-  return (
-    <Select
-      options={names}
-      value={current}
-      onChange={(v) => {
-        onChange(v.value);
-      }}
-    />
-  );
-};

public/app/plugins/panel/timeseries/config.ts

@@ -4,7 +4,7 @@ import {
   FieldType,
   identityOverrideProcessor,
   SetFieldConfigOptionsArgs,
-  stringOverrideProcessor,
+  Field,
 } from '@grafana/data';
 import {
   BarAlignment,
@@ -20,7 +20,6 @@ import {
 } from '@grafana/schema';
 import { graphFieldOptions, commonOptionsBuilder } from '@grafana/ui';
 
-import { FillBellowToEditor } from './FillBelowToEditor';
 import { LineStyleEditor } from './LineStyleEditor';
 import { SpanNullsEditor } from './SpanNullsEditor';
 import { ThresholdsStyleEditor } from './ThresholdsStyleEditor';
@@ -123,16 +122,14 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
           },
           showIf: (c) => c.drawStyle !== GraphDrawStyle.Points,
         })
-        .addCustomEditor({
+        .addFieldNamePicker({
-          id: 'fillBelowTo',
           path: 'fillBelowTo',
           name: 'Fill below to',
           category: categoryStyles,
-          editor: FillBellowToEditor,
-          override: FillBellowToEditor,
-          process: stringOverrideProcessor,
           hideFromDefaults: true,
-          shouldApply: (f) => true,
+          settings: {
+            filter: (field: Field) => field.type === FieldType.number,
+          },
         })
         .addCustomEditor<void, LineStyle>({
           id: 'lineStyle',