Chore: Deprecate FieldConfigEditorProps in favor of StandardEditorProps (#78319)

* Deprecate FieldConfigEditorProps in favor of StandardEditorProps

* update editors to no longer use FieldOverrideEditorProps

packages/grafana-data/src/field/standardFieldConfigEditorRegistry.ts

@@ -19,10 +19,14 @@ export interface StandardEditorContext<TOptions, TState = any> {
 export interface StandardEditorProps<TValue = any, TSettings = any, TOptions = any, TState = any> {
   value: TValue;
   onChange: (value?: TValue) => void;
-  item: StandardEditorsRegistryItem<TValue, TSettings>;
   context: StandardEditorContext<TOptions, TState>;
   id?: string;
+
+  item: RegistryItem & {
+    settings?: TSettings;
+  };
 }
+
 export interface StandardEditorsRegistryItem<TValue = any, TSettings = any> extends RegistryItem {
   editor: ComponentType<StandardEditorProps<TValue, TSettings>>;
   settings?: TSettings;

packages/grafana-data/src/types/fieldOverrides.ts

@@ -73,18 +73,12 @@ export interface FieldOverrideContext extends StandardEditorContext<any, any> {
   field?: Field;
   dataFrameIndex?: number; // The index for the selected field frame
 }
-export interface FieldConfigEditorProps<TValue, TSettings extends {}>
-  extends Omit<StandardEditorProps<TValue, TSettings>, 'item'> {
-  item: FieldConfigPropertyItem<any, TValue, TSettings>; // The property info
-  value: TValue;
-  context: FieldOverrideContext;
-  onChange: (value?: TValue) => void;
-}
 
-export interface FieldOverrideEditorProps<TValue, TSettings> extends Omit<StandardEditorProps<TValue>, 'item'> {
-  item: FieldConfigPropertyItem<TValue, TSettings>;
-  context: FieldOverrideContext;
-}
+/** @deprecated Use StandardEditorProps instead */
+export type FieldConfigEditorProps<TValue, TSettings extends {}> = StandardEditorProps<TValue, TSettings>;
+
+/** @deprecated Use StandardEditorProps instead */
+export type FieldOverrideEditorProps<TValue, TSettings extends {}> = StandardEditorProps<TValue, TSettings>;
 
 export interface FieldConfigEditorConfig<TOptions, TSettings = any, TValue = any>
   extends OptionEditorConfig<TOptions, TSettings, TValue> {
@@ -102,9 +96,9 @@ export interface FieldConfigEditorConfig<TOptions, TSettings = any, TValue = any
 }
 
 export interface FieldConfigPropertyItem<TOptions = any, TValue = any, TSettings extends {} = any>
-  extends OptionsEditorItem<TOptions, TSettings, FieldConfigEditorProps<TValue, TSettings>, TValue> {
+  extends OptionsEditorItem<TOptions, TSettings, StandardEditorProps<TValue, TSettings>, TValue> {
   // An editor that can be filled in with context info (template variables etc)
-  override: ComponentType<FieldOverrideEditorProps<TValue, TSettings>>;
+  override: ComponentType<StandardEditorProps<TValue, TSettings>>;
 
   /** true for plugin field config properties */
   isCustom?: boolean;

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

@@ -18,7 +18,7 @@ import {
 import { PanelOptionsSupplier } from '../panel/PanelPlugin';
 import { isObject } from '../types';
 import { OptionsEditorItem, OptionsUIRegistryBuilder } from '../types/OptionsUIRegistryBuilder';
-import { FieldConfigEditorProps, FieldConfigPropertyItem, FieldConfigEditorConfig } from '../types/fieldOverrides';
+import { FieldConfigPropertyItem, FieldConfigEditorConfig } from '../types/fieldOverrides';
 import { PanelOptionsEditorConfig, PanelOptionsEditorItem } from '../types/panel';
 
 /**
@@ -26,15 +26,15 @@ import { PanelOptionsEditorConfig, PanelOptionsEditorItem } from '../types/panel
  */
 export class FieldConfigEditorBuilder<TOptions> extends OptionsUIRegistryBuilder<
   TOptions,
-  FieldConfigEditorProps<any, any>,
+  StandardEditorProps<any, any>,
   FieldConfigPropertyItem<TOptions>
 > {
   addNumberInput<TSettings>(config: FieldConfigEditorConfig<TOptions, TSettings & NumberFieldConfigSettings, number>) {
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      override: standardEditorsRegistry.get('number').editor as any,
-      editor: standardEditorsRegistry.get('number').editor as any,
+      override: standardEditorsRegistry.get('number').editor,
+      editor: standardEditorsRegistry.get('number').editor,
       process: numberOverrideProcessor,
       shouldApply: config.shouldApply ?? (() => true),
       settings: config.settings || {},
@@ -45,8 +45,8 @@ export class FieldConfigEditorBuilder<TOptions> extends OptionsUIRegistryBuilder
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      override: standardEditorsRegistry.get('slider').editor as any,
-      editor: standardEditorsRegistry.get('slider').editor as any,
+      override: standardEditorsRegistry.get('slider').editor,
+      editor: standardEditorsRegistry.get('slider').editor,
       process: numberOverrideProcessor,
       shouldApply: config.shouldApply ?? (() => true),
       settings: config.settings || {},
@@ -57,8 +57,8 @@ export class FieldConfigEditorBuilder<TOptions> extends OptionsUIRegistryBuilder
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      override: standardEditorsRegistry.get('text').editor as any,
-      editor: standardEditorsRegistry.get('text').editor as any,
+      override: standardEditorsRegistry.get('text').editor,
+      editor: standardEditorsRegistry.get('text').editor,
       process: stringOverrideProcessor,
       shouldApply: config.shouldApply ?? (() => true),
       settings: config.settings || {},
@@ -71,8 +71,8 @@ export class FieldConfigEditorBuilder<TOptions> extends OptionsUIRegistryBuilder
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      override: standardEditorsRegistry.get('select').editor as any,
-      editor: standardEditorsRegistry.get('select').editor as any,
+      override: standardEditorsRegistry.get('select').editor,
+      editor: standardEditorsRegistry.get('select').editor,
       process: selectOverrideProcessor,
       // ???
       shouldApply: config.shouldApply ? config.shouldApply : () => true,
@@ -84,8 +84,8 @@ export class FieldConfigEditorBuilder<TOptions> extends OptionsUIRegistryBuilder
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      override: standardEditorsRegistry.get('radio').editor as any,
-      editor: standardEditorsRegistry.get('radio').editor as any,
+      override: standardEditorsRegistry.get('radio').editor,
+      editor: standardEditorsRegistry.get('radio').editor,
       process: selectOverrideProcessor,
       // ???
       shouldApply: config.shouldApply ? config.shouldApply : () => true,
@@ -97,8 +97,8 @@ export class FieldConfigEditorBuilder<TOptions> extends OptionsUIRegistryBuilder
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('boolean').editor as any,
-      override: standardEditorsRegistry.get('boolean').editor as any,
+      editor: standardEditorsRegistry.get('boolean').editor,
+      override: standardEditorsRegistry.get('boolean').editor,
       process: booleanOverrideProcessor,
       shouldApply: config.shouldApply ? config.shouldApply : () => true,
       settings: config.settings || {},
@@ -109,8 +109,8 @@ export class FieldConfigEditorBuilder<TOptions> extends OptionsUIRegistryBuilder
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('color').editor as any,
-      override: standardEditorsRegistry.get('color').editor as any,
+      editor: standardEditorsRegistry.get('color').editor,
+      override: standardEditorsRegistry.get('color').editor,
       process: identityOverrideProcessor,
       shouldApply: config.shouldApply ? config.shouldApply : () => true,
       settings: config.settings || {},
@@ -123,8 +123,8 @@ export class FieldConfigEditorBuilder<TOptions> extends OptionsUIRegistryBuilder
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('unit').editor as any,
-      override: standardEditorsRegistry.get('unit').editor as any,
+      editor: standardEditorsRegistry.get('unit').editor,
+      override: standardEditorsRegistry.get('unit').editor,
       process: unitOverrideProcessor,
       shouldApply: config.shouldApply ? config.shouldApply : () => true,
       settings: config.settings || {},
@@ -137,8 +137,8 @@ export class FieldConfigEditorBuilder<TOptions> extends OptionsUIRegistryBuilder
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('field-name').editor as any,
-      override: standardEditorsRegistry.get('field-name').editor as any,
+      editor: standardEditorsRegistry.get('field-name').editor,
+      override: standardEditorsRegistry.get('field-name').editor,
       process: identityOverrideProcessor,
       shouldApply: config.shouldApply ? config.shouldApply : () => true,
       settings: config.settings || {},
@@ -152,8 +152,8 @@ export class FieldConfigEditorBuilder<TOptions> extends OptionsUIRegistryBuilder
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: editor as any,
-      override: editor as any,
+      editor: editor,
+      override: editor,
       process: identityOverrideProcessor,
       shouldApply: config.shouldApply ? config.shouldApply : () => true,
       settings: config.settings || {},
@@ -226,7 +226,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('number').editor as any,
+      editor: standardEditorsRegistry.get('number').editor,
     });
   }
 
@@ -234,7 +234,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('slider').editor as any,
+      editor: standardEditorsRegistry.get('slider').editor,
     });
   }
 
@@ -242,7 +242,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('text').editor as any,
+      editor: standardEditorsRegistry.get('text').editor,
     });
   }
 
@@ -252,7 +252,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('strings').editor as any,
+      editor: standardEditorsRegistry.get('strings').editor,
     });
   }
 
@@ -262,7 +262,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('select').editor as any,
+      editor: standardEditorsRegistry.get('select').editor,
     });
   }
 
@@ -272,7 +272,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('multi-select').editor as any,
+      editor: standardEditorsRegistry.get('multi-select').editor,
     });
   }
 
@@ -282,7 +282,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('radio').editor as any,
+      editor: standardEditorsRegistry.get('radio').editor,
     });
   }
 
@@ -290,7 +290,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('boolean').editor as any,
+      editor: standardEditorsRegistry.get('boolean').editor,
     });
   }
 
@@ -298,7 +298,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('color').editor as any,
+      editor: standardEditorsRegistry.get('color').editor,
       settings: config.settings || {},
     });
   }
@@ -307,7 +307,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('timezone').editor as any,
+      editor: standardEditorsRegistry.get('timezone').editor,
       settings: config.settings || {},
     });
   }
@@ -318,7 +318,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('unit').editor as any,
+      editor: standardEditorsRegistry.get('unit').editor,
     });
   }
 
@@ -328,7 +328,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('field-name').editor as any,
+      editor: standardEditorsRegistry.get('field-name').editor,
     });
   }
 
@@ -338,7 +338,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     return this.addCustomEditor({
       ...config,
       id: config.path,
-      editor: standardEditorsRegistry.get('dashboard-uid').editor as any, // added at runtime
+      editor: standardEditorsRegistry.get('dashboard-uid').editor, // added at runtime
     });
   }
 }

packages/grafana-ui/src/options/builder/hideSeries.tsx

@@ -1,13 +1,13 @@
 import { startCase } from 'lodash';
 import React, { useCallback } from 'react';
 
-import { FieldConfigEditorBuilder, FieldConfigEditorProps } from '@grafana/data';
+import { FieldConfigEditorBuilder, StandardEditorProps } from '@grafana/data';
 import { HideableFieldConfig, HideSeriesConfig } from '@grafana/schema';
 
 import { FilterPill } from '../../components/FilterPill/FilterPill';
 import { HorizontalGroup } from '../../components/Layout/Layout';
 
-const SeriesConfigEditor = ({ value, onChange }: FieldConfigEditorProps<HideSeriesConfig, {}>) => {
+const SeriesConfigEditor = ({ value, onChange }: StandardEditorProps<HideSeriesConfig, {}>) => {
   const onChangeToggle = useCallback(
     (prop: keyof HideSeriesConfig) => {
       onChange({ ...value, [prop]: !value[prop] });

packages/grafana-ui/src/options/builder/stacking.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 
 import {
   FieldConfigEditorBuilder,
-  FieldOverrideEditorProps,
+  StandardEditorProps,
   FieldType,
   identityOverrideProcessor,
+  SelectableValue,
 } from '@grafana/data';
 import { GraphFieldConfig, StackingConfig, StackingMode } from '@grafana/schema';
 
@@ -14,12 +15,17 @@ import { Input } from '../../components/Input/Input';
 import { HorizontalGroup } from '../../components/Layout/Layout';
 import { graphFieldOptions } from '../../components/uPlot/config';
 
-export const StackingEditor = ({ value, context, onChange, item }: FieldOverrideEditorProps<StackingConfig, any>) => {
+export const StackingEditor = ({
+  value,
+  context,
+  onChange,
+  item,
+}: StandardEditorProps<StackingConfig, { options: Array<SelectableValue<StackingMode>> }>) => {
   return (
     <HorizontalGroup>
       <RadioButtonGroup
         value={value?.mode || StackingMode.None}
-        options={item.settings.options}
+        options={item.settings?.options ?? []}
         onChange={(v) => {
           onChange({
             ...value,