diff --git a/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts b/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts index 291239469c37..6d2db5b19508 100644 --- a/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts +++ b/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts @@ -6,64 +6,25 @@ import { SelectFieldConfigSettings, StringFieldConfigSettings, } from '../field'; +import { OptionEditorConfig } from './options'; /** * Option editor registry item */ -export interface OptionsEditorItem 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 + extends RegistryItem, + OptionEditorConfig { /** * React component used to edit the options property */ editor: ComponentType; - /** - * 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 */ getItemsCount?: (value?: TValue) => number; } -/** - * Configuration of option editor registry item - */ -interface OptionEditorConfig { - id: keyof TOptions & string; - name: string; - description?: string; - settings?: TSettings; - defaultValue?: TValue; -} - /** * Describes an API for option editors UI builder */ diff --git a/packages/grafana-data/src/types/fieldOverrides.ts b/packages/grafana-data/src/types/fieldOverrides.ts index 3c8038e81e2f..deb0e6e673a2 100644 --- a/packages/grafana-data/src/types/fieldOverrides.ts +++ b/packages/grafana-data/src/types/fieldOverrides.ts @@ -3,6 +3,7 @@ import { MatcherConfig, FieldConfig, Field, DataFrame, GrafanaTheme, TimeZone } import { InterpolateFunction } from './panel'; import { StandardEditorProps, FieldConfigOptionsRegistry, StandardEditorContext } from '../field'; import { OptionsEditorItem } from './OptionsUIRegistryBuilder'; +import { OptionEditorConfig } from './options'; export interface DynamicConfigValue { id: string; @@ -40,51 +41,13 @@ export interface FieldOverrideEditorProps extends Omit { - /** - * 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 + extends OptionEditorConfig { /** * Function that allows specifying whether or not this field config should apply to a given field. * @param field */ 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 diff --git a/packages/grafana-data/src/types/options.ts b/packages/grafana-data/src/types/options.ts new file mode 100644 index 000000000000..d44879afefa5 --- /dev/null +++ b/packages/grafana-data/src/types/options.ts @@ -0,0 +1,53 @@ +/** + * Base class for editor builders + * + * @beta + */ +export interface OptionEditorConfig { + /** + * 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; +} diff --git a/packages/grafana-data/src/types/panel.ts b/packages/grafana-data/src/types/panel.ts index a666b8416417..5a6d33364b60 100644 --- a/packages/grafana-data/src/types/panel.ts +++ b/packages/grafana-data/src/types/panel.ts @@ -9,6 +9,7 @@ import { FieldConfigSource } from './fieldOverrides'; import { Registry } from '../utils'; import { StandardEditorProps } from '../field'; import { OptionsEditorItem } from './OptionsUIRegistryBuilder'; +import { OptionEditorConfig } from './options'; export type InterpolateFunction = (value: string, scopedVars?: ScopedVars, format?: string | Function) => string; @@ -140,47 +141,8 @@ export interface PanelOptionsEditorProps extends StandardEditorProps extends OptionsEditorItem, TValue> {} -export interface PanelOptionsEditorConfig { - /** - * 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 + extends OptionEditorConfig {} /** * @internal