OptionsEditor: simplify the options editor interfaces (#29518)

* simplify options UI inheritance

* simplify options UI inheritance

* OptionsEditor to OptionEditor

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

@@ -6,65 +6,26 @@ import {
   SelectFieldConfigSettings,
   SelectFieldConfigSettings,
   StringFieldConfigSettings,
   StringFieldConfigSettings,
 } from '../field';
 } from '../field';
+import { OptionEditorConfig } from './options';
 
 
 /**
 /**
  * Option editor registry item
  * Option editor registry item
  */
  */
-export interface OptionsEditorItem<TOptions, TSettings, TEditorProps, TValue> extends RegistryItem {
-  /**
-   * Path of the options property to control.
-   *
-   * @example
-   * Given options object of a type:
-   * ```ts
-   * interface CustomOptions {
-   *   a: {
-   *     b: string;
-   *   }
-   * }
-   * ```
-   *
-   * path can be either 'a' or 'a.b'.
-   */
-  path: (keyof TOptions & string) | string;
+export interface OptionsEditorItem<TOptions, TSettings, TEditorProps, TValue>
+  extends RegistryItem,
+    OptionEditorConfig<TOptions, TSettings, TValue> {
   /**
   /**
    * React component used to edit the options property
    * React component used to edit the options property
    */
    */
   editor: ComponentType<TEditorProps>;
   editor: ComponentType<TEditorProps>;
-  /**
-   * Custom settings of the editor.
-   */
-  settings?: TSettings;
-  /**
-   * Array of strings representing category of the options property.
-   */
-  category?: string[];
-  defaultValue?: TValue;
-  /**
-   * Function that enables configuration of when option editor should be shown based on current options properties.
-   *
-   * @param currentConfig Current options values
-   */
-  showIf?: (currentConfig: TOptions) => boolean | undefined;
-  /**
-   * Function that returns number of items if given option represents a collection, i.e. array of items.
+
+  /*
    * @param value
    * @param value
    */
    */
   getItemsCount?: (value?: TValue) => number;
   getItemsCount?: (value?: TValue) => number;
 }
 }
 
 
 /**
 /**
- * Configuration of option editor registry item
- */
-interface OptionEditorConfig<TOptions, TSettings, TValue = any> {
-  id: keyof TOptions & string;
-  name: string;
-  description?: string;
-  settings?: TSettings;
-  defaultValue?: TValue;
-}
-
-/**
  * Describes an API for option editors UI builder
  * Describes an API for option editors UI builder
  */
  */
 export interface OptionsUIRegistryBuilderAPI<
 export interface OptionsUIRegistryBuilderAPI<

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

@@ -3,6 +3,7 @@ import { MatcherConfig, FieldConfig, Field, DataFrame, GrafanaTheme, TimeZone }
 import { InterpolateFunction } from './panel';
 import { InterpolateFunction } from './panel';
 import { StandardEditorProps, FieldConfigOptionsRegistry, StandardEditorContext } from '../field';
 import { StandardEditorProps, FieldConfigOptionsRegistry, StandardEditorContext } from '../field';
 import { OptionsEditorItem } from './OptionsUIRegistryBuilder';
 import { OptionsEditorItem } from './OptionsUIRegistryBuilder';
+import { OptionEditorConfig } from './options';
 
 
 export interface DynamicConfigValue {
 export interface DynamicConfigValue {
   id: string;
   id: string;
@@ -40,51 +41,13 @@ export interface FieldOverrideEditorProps<TValue, TSettings> extends Omit<Standa
   context: FieldOverrideContext;
   context: FieldOverrideContext;
 }
 }
 
 
-export interface FieldConfigEditorConfig<TOptions, TSettings = any, TValue = any> {
-  /**
-   * Path of the field config property to control.
-   *
-   * @example
-   * Given field config object of a type:
-   * ```ts
-   * interface CustomFieldConfig {
-   *   a: {
-   *     b: string;
-   *   }
-   * }
-   * ```
-   *
-   * path can be either 'a' or 'a.b'.
-   */
-  path: (keyof TOptions & string) | string;
-  /**
-   * Name of the field config property. Will be displayed in the UI as form element label.
-   */
-  name: string;
-  /**
-   * Description of the field config property. Will be displayed in the UI as form element description.
-   */
-  description?: string;
-  /**
-   * Array of strings representing category of the field config property. First element in the array will make option render as collapsible section.
-   */
-  category?: string[];
-  /**
-   * Custom settings of the editor.
-   */
-  settings?: TSettings;
+export interface FieldConfigEditorConfig<TOptions, TSettings = any, TValue = any>
+  extends OptionEditorConfig<TOptions, TSettings, TValue> {
   /**
   /**
    * Function that allows specifying whether or not this field config should apply to a given field.
    * Function that allows specifying whether or not this field config should apply to a given field.
    * @param field
    * @param field
    */
    */
   shouldApply?: (field: Field) => boolean;
   shouldApply?: (field: Field) => boolean;
-  defaultValue?: TValue;
-  /**
-   * Function that enables configuration of when field config property editor should be shown based on current panel field config.
-   *
-   * @param currentConfig Current field config values
-   */
-  showIf?: (currentConfig: TOptions) => boolean;
 }
 }
 
 
 export interface FieldConfigPropertyItem<TOptions = any, TValue = any, TSettings extends {} = any>
 export interface FieldConfigPropertyItem<TOptions = any, TValue = any, TSettings extends {} = any>

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

+/**
+ * Base class for editor builders
+ *
+ * @beta
+ */
+export interface OptionEditorConfig<TOptions, TSettings = any, TValue = any> {
+  /**
+   * Path of the option property to control.
+   *
+   * @example
+   * Given options object of a type:
+   * ```ts
+   * interface Options {
+   *   a: {
+   *     b: string;
+   *   }
+   * }
+   * ```
+   *
+   * path can be either 'a' or 'a.b'.
+   */
+  path: (keyof TOptions & string) | string;
+
+  /**
+   * Name of the option. Will be displayed in the UI as form element label.
+   */
+  name: string;
+
+  /**
+   * Description of the option. Will be displayed in the UI as form element description.
+   */
+  description?: string;
+
+  /**
+   * Custom settings of the editor.
+   */
+  settings?: TSettings;
+
+  /**
+   * Array of strings representing category of the option. First element in the array will make option render as collapsible section.
+   */
+  category?: string[];
+
+  /**
+   * Set this value if undefined
+   */
+  defaultValue?: TValue;
+
+  /**
+   * Function that enables configuration of when option editor should be shown based on current panel option properties.
+   */
+  showIf?: (currentOptions: TOptions) => boolean | undefined;
+}

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

@@ -9,6 +9,7 @@ import { FieldConfigSource } from './fieldOverrides';
 import { Registry } from '../utils';
 import { Registry } from '../utils';
 import { StandardEditorProps } from '../field';
 import { StandardEditorProps } from '../field';
 import { OptionsEditorItem } from './OptionsUIRegistryBuilder';
 import { OptionsEditorItem } from './OptionsUIRegistryBuilder';
+import { OptionEditorConfig } from './options';
 
 
 export type InterpolateFunction = (value: string, scopedVars?: ScopedVars, format?: string | Function) => string;
 export type InterpolateFunction = (value: string, scopedVars?: ScopedVars, format?: string | Function) => string;
 
 
@@ -140,47 +141,8 @@ export interface PanelOptionsEditorProps<TValue> extends StandardEditorProps<TVa
 export interface PanelOptionsEditorItem<TOptions = any, TValue = any, TSettings = any>
 export interface PanelOptionsEditorItem<TOptions = any, TValue = any, TSettings = any>
   extends OptionsEditorItem<TOptions, TSettings, PanelOptionsEditorProps<TValue>, TValue> {}
   extends OptionsEditorItem<TOptions, TSettings, PanelOptionsEditorProps<TValue>, TValue> {}
 
 
-export interface PanelOptionsEditorConfig<TOptions, TSettings = any, TValue = any> {
-  /**
-   * Path of the option property to control.
-   *
-   * @example
-   * Given options object of a type:
-   * ```ts
-   * interface Options {
-   *   a: {
-   *     b: string;
-   *   }
-   * }
-   * ```
-   *
-   * path can be either 'a' or 'a.b'.
-   */
-  path: (keyof TOptions & string) | string;
-  /**
-   * Name of the option. Will be displayed in the UI as form element label.
-   */
-  name: string;
-  /**
-   * Description of the option. Will be displayed in the UI as form element description.
-   */
-  description?: string;
-  /**al
-   * Custom settings of the editor.
-   */
-  settings?: TSettings;
-  /**
-   * Array of strings representing category of the option. First element in the array will make option render as collapsible section.
-   */
-  category?: string[];
-  defaultValue?: TValue;
-  /**
-   * Function that enables configuration of when option editor should be shown based on current panel option properties.
-   *
-   * @param currentConfig Current panel options
-   */
-  showIf?: (currentConfig: TOptions) => boolean | undefined;
-}
+export interface PanelOptionsEditorConfig<TOptions, TSettings = any, TValue = any>
+  extends OptionEditorConfig<TOptions, TSettings, TValue> {}
 
 
 /**
 /**
  * @internal
  * @internal