OptionsUI: Move internal options editors out of @grafana/ui (#50739)

packages/grafana-ui/src/components/index.ts

@@ -24,7 +24,6 @@ export { ButtonCascader } from './ButtonCascader/ButtonCascader';
 
 export { LoadingPlaceholder, LoadingPlaceholderProps } from './LoadingPlaceholder/LoadingPlaceholder';
 export { ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker';
-export { ColorValueEditor, ColorValueEditorProps } from './OptionsUI/color';
 export { SeriesColorPickerPopover, SeriesColorPickerPopoverWithTheme } from './ColorPicker/SeriesColorPickerPopover';
 export { EmptySearchResult } from './EmptySearchResult/EmptySearchResult';
 export { UnitPicker } from './UnitPicker/UnitPicker';
@@ -175,14 +174,6 @@ export { Drawer } from './Drawer/Drawer';
 export { Slider } from './Slider/Slider';
 export { RangeSlider } from './Slider/RangeSlider';
 
-// TODO: namespace!!
-export { StringValueEditor } from './OptionsUI/string';
-export { StringArrayEditor } from './OptionsUI/strings';
-export { NumberValueEditor } from './OptionsUI/number';
-export { SliderValueEditor } from './OptionsUI/slider';
-export { SelectValueEditor } from './OptionsUI/select';
-export { MultiSelectValueEditor } from './OptionsUI/multiSelect';
-
 // Next-gen forms
 export { Form } from './Forms/Form';
 export { sharedInputStyle } from './Forms/commonStyles';

packages/grafana-ui/src/index.ts

@@ -12,6 +12,3 @@ export * from './slate-plugins';
 
 // Moved to `@grafana/schema`, in Grafana 9, this will be removed
 export * from './schema';
-
-// Exposes standard editors for registries of optionsUi config and panel options UI
-export { getStandardFieldConfigs, getStandardOptionEditors } from './utils/standardEditors';

public/app/app.ts

@@ -42,7 +42,7 @@ import { getStandardTransformers } from 'app/features/transformers/standardTrans
 import getDefaultMonacoLanguages from '../lib/monaco-languages';
 
 import { AppWrapper } from './AppWrapper';
-import { getAllOptionEditors, getAllStandardFieldConfigs } from './core/components/editors/registry';
+import { getAllOptionEditors, getAllStandardFieldConfigs } from './core/components/OptionsUI/registry';
 import { interceptLinkClicks } from './core/navigation/patch/interceptLinkClicks';
 import { ModalManager } from './core/services/ModalManager';
 import { backendSrv } from './core/services/backend_srv';

public/app/core/components/OptionsUI/color.tsx

@@ -2,10 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-
-import { useTheme2, useStyles2 } from '../../themes';
-import { ColorPicker } from '../ColorPicker/ColorPicker';
-import { ColorSwatch } from '../ColorPicker/ColorSwatch';
+import { useTheme2, useStyles2, ColorPicker } from '@grafana/ui';
+import { ColorSwatch } from '@grafana/ui/src/components/ColorPicker/ColorSwatch';
 
 /**
  * @alpha

public/app/core/components/OptionsUI/fieldColor.tsx

@@ -13,11 +13,7 @@ import {
   FieldColorSeriesByMode,
   getFieldColorMode,
 } from '@grafana/data';
-
-import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
-import { Field } from '../Forms/Field';
-import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup';
-import { Select } from '../Select/Select';
+import { useStyles2, useTheme2, Field, RadioButtonGroup, Select } from '@grafana/ui';
 
 import { ColorValueEditor } from './color';
 

public/app/core/components/OptionsUI/links.tsx

@@ -6,8 +6,7 @@ import {
   FieldConfigEditorProps,
   VariableSuggestionsScope,
 } from '@grafana/data';
-
-import { DataLinksInlineEditor } from '../DataLinks/DataLinksInlineEditor/DataLinksInlineEditor';
+import { DataLinksInlineEditor } from '@grafana/ui';
 
 export const DataLinksValueEditor: React.FC<FieldConfigEditorProps<DataLink[], DataLinksFieldConfigSettings>> = ({
   value,

public/app/core/components/OptionsUI/multiSelect.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { FieldConfigEditorProps, SelectFieldConfigSettings, SelectableValue } from '@grafana/data';
-
-import { MultiSelect } from '../Select/Select';
+import { MultiSelect } from '@grafana/ui';
 
 interface State<T> {
   isLoading: boolean;

public/app/core/components/OptionsUI/number.tsx

@@ -6,8 +6,7 @@ import {
   toFloatOrUndefined,
   NumberFieldConfigSettings,
 } from '@grafana/data';
-
-import { Input } from '../Input/Input';
+import { Input } from '@grafana/ui';
 
 export const NumberValueEditor: React.FC<FieldConfigEditorProps<number, NumberFieldConfigSettings>> = ({
   value,

public/app/core/components/OptionsUI/registry.tsx

@@ -1,14 +1,21 @@
 import React from 'react';
 
 import {
-  DataLink,
-  dataLinksOverrideProcessor,
   FieldConfigPropertyItem,
   FieldType,
-  NumberFieldConfigSettings,
-  numberOverrideProcessor,
   standardEditorsRegistry,
   StandardEditorsRegistryItem,
+  ThresholdsConfig,
+  ThresholdsFieldConfigSettings,
+  ThresholdsMode,
+  thresholdsOverrideProcessor,
+  ValueMapping,
+  ValueMappingFieldConfigSettings,
+  valueMappingsOverrideProcessor,
+  DataLink,
+  dataLinksOverrideProcessor,
+  NumberFieldConfigSettings,
+  numberOverrideProcessor,
   StringFieldConfigSettings,
   stringOverrideProcessor,
   identityOverrideProcessor,
@@ -19,29 +26,186 @@ import {
   displayNameOverrideProcessor,
   FieldNamePickerConfigSettings,
 } from '@grafana/data';
+import { RadioButtonGroup, TimeZonePicker, Switch } from '@grafana/ui';
+import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker';
+import { ThresholdsValueEditor } from 'app/features/dimensions/editors/ThresholdsEditor/thresholds';
+import { ValueMappingsEditor } from 'app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor';
 
-import {
-  NumberValueEditor,
-  SliderValueEditor,
-  RadioButtonGroup,
-  StringValueEditor,
-  StringArrayEditor,
-  SelectValueEditor,
-  MultiSelectValueEditor,
-  TimeZonePicker,
-} from '../components';
-import { FieldNamePicker } from '../components/MatchersUI/FieldNamePicker';
-import { ColorValueEditor } from '../components/OptionsUI/color';
-import { FieldColorEditor } from '../components/OptionsUI/fieldColor';
-import { DataLinksValueEditor } from '../components/OptionsUI/links';
-import { StatsPickerEditor } from '../components/OptionsUI/stats';
-import { UnitValueEditor } from '../components/OptionsUI/units';
-import { Switch } from '../components/Switch/Switch';
+import { DashboardPicker, DashboardPickerOptions } from './DashboardPicker';
+import { ColorValueEditor } from './color';
+import { FieldColorEditor } from './fieldColor';
+import { DataLinksValueEditor } from './links';
+import { MultiSelectValueEditor } from './multiSelect';
+import { NumberValueEditor } from './number';
+import { SelectValueEditor } from './select';
+import { SliderValueEditor } from './slider';
+import { StatsPickerEditor } from './stats';
+import { StringValueEditor } from './string';
+import { StringArrayEditor } from './strings';
+import { UnitValueEditor } from './units';
+
+/**
+ * Returns collection of standard option editors definitions
+ */
+export const getAllOptionEditors = () => {
+  const number: StandardEditorsRegistryItem<number> = {
+    id: 'number',
+    name: 'Number',
+    description: 'Allows numeric values input',
+    editor: NumberValueEditor as any,
+  };
+
+  const slider: StandardEditorsRegistryItem<number> = {
+    id: 'slider',
+    name: 'Slider',
+    description: 'Allows numeric values input',
+    editor: SliderValueEditor as any,
+  };
+
+  const text: StandardEditorsRegistryItem<string> = {
+    id: 'text',
+    name: 'Text',
+    description: 'Allows string values input',
+    editor: StringValueEditor as any,
+  };
+
+  const strings: StandardEditorsRegistryItem<string[]> = {
+    id: 'strings',
+    name: 'String array',
+    description: 'An array of strings',
+    editor: StringArrayEditor as any,
+  };
+
+  const boolean: StandardEditorsRegistryItem<boolean> = {
+    id: 'boolean',
+    name: 'Boolean',
+    description: 'Allows boolean values input',
+    editor(props) {
+      return <Switch {...props} onChange={(e) => props.onChange(e.currentTarget.checked)} />;
+    },
+  };
+
+  const select: StandardEditorsRegistryItem<any> = {
+    id: 'select',
+    name: 'Select',
+    description: 'Allows option selection',
+    editor: SelectValueEditor as any,
+  };
+
+  const multiSelect: StandardEditorsRegistryItem<any> = {
+    id: 'multi-select',
+    name: 'Multi select',
+    description: 'Allows for multiple option selection',
+    editor: MultiSelectValueEditor as any,
+  };
+
+  const radio: StandardEditorsRegistryItem<any> = {
+    id: 'radio',
+    name: 'Radio',
+    description: 'Allows option selection',
+    editor(props) {
+      return <RadioButtonGroup {...props} options={props.item.settings?.options} />;
+    },
+  };
+
+  const unit: StandardEditorsRegistryItem<string> = {
+    id: 'unit',
+    name: 'Unit',
+    description: 'Allows unit input',
+    editor: UnitValueEditor as any,
+  };
+
+  const color: StandardEditorsRegistryItem<string> = {
+    id: 'color',
+    name: 'Color',
+    description: 'Allows color selection',
+    editor(props) {
+      return <ColorValueEditor value={props.value} onChange={props.onChange} />;
+    },
+  };
+
+  const fieldColor: StandardEditorsRegistryItem<FieldColor> = {
+    id: 'fieldColor',
+    name: 'Field Color',
+    description: 'Field color selection',
+    editor: FieldColorEditor as any,
+  };
+
+  const links: StandardEditorsRegistryItem<DataLink[]> = {
+    id: 'links',
+    name: 'Links',
+    description: 'Allows defining data links',
+    editor: DataLinksValueEditor as any,
+  };
+
+  const statsPicker: StandardEditorsRegistryItem<string[], StatsPickerConfigSettings> = {
+    id: 'stats-picker',
+    name: 'Stats Picker',
+    editor: StatsPickerEditor as any,
+    description: '',
+  };
+
+  const timeZone: StandardEditorsRegistryItem<TimeZone> = {
+    id: 'timezone',
+    name: 'Time Zone',
+    description: 'Time zone selection',
+    editor: TimeZonePicker as any,
+  };
+
+  const fieldName: StandardEditorsRegistryItem<string, FieldNamePickerConfigSettings> = {
+    id: 'field-name',
+    name: 'Field name',
+    description: 'Allows selecting a field name from a data frame',
+    editor: FieldNamePicker as any,
+  };
+
+  const dashboardPicker: StandardEditorsRegistryItem<string, DashboardPickerOptions> = {
+    id: 'dashboard-uid',
+    name: 'Dashboard',
+    description: 'Select dashboard',
+    editor: DashboardPicker as any,
+  };
+
+  const mappings: StandardEditorsRegistryItem<ValueMapping[]> = {
+    id: 'mappings',
+    name: 'Mappings',
+    description: 'Allows defining value mappings',
+    editor: ValueMappingsEditor as any,
+  };
+
+  const thresholds: StandardEditorsRegistryItem<ThresholdsConfig> = {
+    id: 'thresholds',
+    name: 'Thresholds',
+    description: 'Allows defining thresholds',
+    editor: ThresholdsValueEditor as any,
+  };
+
+  return [
+    text,
+    number,
+    slider,
+    boolean,
+    radio,
+    select,
+    unit,
+    links,
+    statsPicker,
+    strings,
+    timeZone,
+    fieldColor,
+    color,
+    multiSelect,
+    fieldName,
+    dashboardPicker,
+    mappings,
+    thresholds,
+  ];
+};
 
 /**
  * Returns collection of common field config properties definitions
  */
-export const getStandardFieldConfigs = () => {
+export const getAllStandardFieldConfigs = () => {
   const category = ['Standard options'];
   const displayName: FieldConfigPropertyItem<any, string, StringFieldConfigSettings> = {
     id: 'displayName',
@@ -180,141 +344,41 @@ export const getStandardFieldConfigs = () => {
     category,
   };
 
-  return [unit, min, max, decimals, displayName, color, noValue, links];
-};
-
-/**
- * Returns collection of standard option editors definitions
- *
- * @internal
- */
-export const getStandardOptionEditors = () => {
-  const number: StandardEditorsRegistryItem<number> = {
-    id: 'number',
-    name: 'Number',
-    description: 'Allows numeric values input',
-    editor: NumberValueEditor as any,
-  };
-
-  const slider: StandardEditorsRegistryItem<number> = {
-    id: 'slider',
-    name: 'Slider',
-    description: 'Allows numeric values input',
-    editor: SliderValueEditor as any,
-  };
-
-  const text: StandardEditorsRegistryItem<string> = {
-    id: 'text',
-    name: 'Text',
-    description: 'Allows string values input',
-    editor: StringValueEditor as any,
-  };
-
-  const strings: StandardEditorsRegistryItem<string[]> = {
-    id: 'strings',
-    name: 'String array',
-    description: 'An array of strings',
-    editor: StringArrayEditor as any,
-  };
-
-  const boolean: StandardEditorsRegistryItem<boolean> = {
-    id: 'boolean',
-    name: 'Boolean',
-    description: 'Allows boolean values input',
-    editor(props) {
-      return <Switch {...props} onChange={(e) => props.onChange(e.currentTarget.checked)} />;
-    },
-  };
-
-  const select: StandardEditorsRegistryItem<any> = {
-    id: 'select',
-    name: 'Select',
-    description: 'Allows option selection',
-    editor: SelectValueEditor as any,
-  };
-
-  const multiSelect: StandardEditorsRegistryItem<any> = {
-    id: 'multi-select',
-    name: 'Multi select',
-    description: 'Allows for multiple option selection',
-    editor: MultiSelectValueEditor as any,
-  };
-
-  const radio: StandardEditorsRegistryItem<any> = {
-    id: 'radio',
-    name: 'Radio',
-    description: 'Allows option selection',
-    editor(props) {
-      return <RadioButtonGroup {...props} options={props.item.settings?.options} />;
-    },
-  };
-
-  const unit: StandardEditorsRegistryItem<string> = {
-    id: 'unit',
-    name: 'Unit',
-    description: 'Allows unit input',
-    editor: UnitValueEditor as any,
-  };
-
-  const color: StandardEditorsRegistryItem<string> = {
-    id: 'color',
-    name: 'Color',
-    description: 'Allows color selection',
-    editor(props) {
-      return <ColorValueEditor value={props.value} onChange={props.onChange} />;
-    },
-  };
-
-  const fieldColor: StandardEditorsRegistryItem<FieldColor> = {
-    id: 'fieldColor',
-    name: 'Field Color',
-    description: 'Field color selection',
-    editor: FieldColorEditor as any,
-  };
-
-  const links: StandardEditorsRegistryItem<DataLink[]> = {
-    id: 'links',
-    name: 'Links',
-    description: 'Allows defining data links',
-    editor: DataLinksValueEditor as any,
-  };
-
-  const statsPicker: StandardEditorsRegistryItem<string[], StatsPickerConfigSettings> = {
-    id: 'stats-picker',
-    name: 'Stats Picker',
-    editor: StatsPickerEditor as any,
-    description: '',
-  };
-
-  const timeZone: StandardEditorsRegistryItem<TimeZone> = {
-    id: 'timezone',
-    name: 'Time Zone',
-    description: 'Time zone selection',
-    editor: TimeZonePicker as any,
-  };
-
-  const fieldName: StandardEditorsRegistryItem<string, FieldNamePickerConfigSettings> = {
-    id: 'field-name',
-    name: 'Field name',
-    description: 'Allows selecting a field name from a data frame',
-    editor: FieldNamePicker as any,
-  };
-
-  return [
-    text,
-    number,
-    slider,
-    boolean,
-    radio,
-    select,
-    unit,
-    links,
-    statsPicker,
-    strings,
-    timeZone,
-    fieldColor,
-    color,
-    multiSelect,
-    fieldName,
-  ];
+  const mappings: FieldConfigPropertyItem<any, ValueMapping[], ValueMappingFieldConfigSettings> = {
+    id: 'mappings',
+    path: 'mappings',
+    name: 'Value mappings',
+    description: 'Modify the display text based on input value',
+
+    editor: standardEditorsRegistry.get('mappings').editor as any,
+    override: standardEditorsRegistry.get('mappings').editor as any,
+    process: valueMappingsOverrideProcessor,
+    settings: {},
+    defaultValue: [],
+    shouldApply: (x) => x.type !== FieldType.time,
+    category: ['Value mappings'],
+    getItemsCount: (value?) => (value ? value.length : 0),
+  };
+
+  const thresholds: FieldConfigPropertyItem<any, ThresholdsConfig, ThresholdsFieldConfigSettings> = {
+    id: 'thresholds',
+    path: 'thresholds',
+    name: 'Thresholds',
+    editor: standardEditorsRegistry.get('thresholds').editor as any,
+    override: standardEditorsRegistry.get('thresholds').editor as any,
+    process: thresholdsOverrideProcessor,
+    settings: {},
+    defaultValue: {
+      mode: ThresholdsMode.Absolute,
+      steps: [
+        { value: -Infinity, color: 'green' },
+        { value: 80, color: 'red' },
+      ],
+    },
+    shouldApply: () => true,
+    category: ['Thresholds'],
+    getItemsCount: (value) => (value ? value.steps.length : 0),
+  };
+
+  return [unit, min, max, decimals, displayName, color, noValue, links, mappings, thresholds];
 };

public/app/core/components/OptionsUI/select.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { FieldConfigEditorProps, SelectFieldConfigSettings, SelectableValue } from '@grafana/data';
-
-import { Select } from '../Select/Select';
+import { Select } from '@grafana/ui';
 
 interface State<T> {
   isLoading: boolean;

public/app/core/components/OptionsUI/slider.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { FieldConfigEditorProps, SliderFieldConfigSettings } from '@grafana/data';
-
-import { Slider } from '../Slider/Slider';
+import { Slider } from '@grafana/ui';
 
 export const SliderValueEditor: React.FC<FieldConfigEditorProps<number, SliderFieldConfigSettings>> = ({
   value,

public/app/core/components/OptionsUI/stats.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { FieldConfigEditorProps, StatsPickerConfigSettings } from '@grafana/data';
-
-import { StatsPicker } from '../StatsPicker/StatsPicker';
+import { StatsPicker } from '@grafana/ui';
 
 export const StatsPickerEditor: React.FC<FieldConfigEditorProps<string[], StatsPickerConfigSettings>> = ({
   value,

public/app/core/components/OptionsUI/string.tsx

@@ -1,9 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { StandardEditorProps, StringFieldConfigSettings } from '@grafana/data';
-
-import { Input } from '../Input/Input';
-import { TextArea } from '../TextArea/TextArea';
+import { Input, TextArea } from '@grafana/ui';
 
 export const StringValueEditor: React.FC<StandardEditorProps<string, StringFieldConfigSettings>> = ({
   value,

public/app/core/components/OptionsUI/strings.tsx

@@ -2,11 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { FieldConfigEditorProps, StringFieldConfigSettings, GrafanaTheme } from '@grafana/data';
-
-import { stylesFactory, getTheme } from '../../themes';
-import { Button } from '../Button';
-import { Icon } from '../Icon/Icon';
-import { Input } from '../Input/Input';
+import { stylesFactory, getTheme, Button, Icon, Input } from '@grafana/ui';
 
 type Props = FieldConfigEditorProps<string[], StringFieldConfigSettings>;
 interface State {

public/app/core/components/OptionsUI/units.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { FieldConfigEditorProps, UnitFieldConfigSettings } from '@grafana/data';
-
-import { UnitPicker } from '../UnitPicker/UnitPicker';
+import { UnitPicker } from '@grafana/ui';
 
 export const UnitValueEditor: React.FC<FieldConfigEditorProps<string, UnitFieldConfigSettings>> = ({
   value,

public/app/core/components/editors/registry.tsx

@@ -1,89 +0,0 @@
-import {
-  FieldConfigPropertyItem,
-  FieldType,
-  standardEditorsRegistry,
-  StandardEditorsRegistryItem,
-  ThresholdsConfig,
-  ThresholdsFieldConfigSettings,
-  ThresholdsMode,
-  thresholdsOverrideProcessor,
-  ValueMapping,
-  ValueMappingFieldConfigSettings,
-  valueMappingsOverrideProcessor,
-} from '@grafana/data';
-import { getStandardFieldConfigs, getStandardOptionEditors } from '@grafana/ui';
-import { ThresholdsValueEditor } from 'app/features/dimensions/editors/ThresholdsEditor/thresholds';
-import { ValueMappingsEditor } from 'app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor';
-
-import { DashboardPicker, DashboardPickerOptions } from './DashboardPicker';
-
-/**
- * Returns collection of standard option editors definitions
- */
-export const getAllOptionEditors = () => {
-  const dashboardPicker: StandardEditorsRegistryItem<string, DashboardPickerOptions> = {
-    id: 'dashboard-uid',
-    name: 'Dashboard',
-    description: 'Select dashboard',
-    editor: DashboardPicker as any,
-  };
-
-  const mappings: StandardEditorsRegistryItem<ValueMapping[]> = {
-    id: 'mappings',
-    name: 'Mappings',
-    description: 'Allows defining value mappings',
-    editor: ValueMappingsEditor as any,
-  };
-
-  const thresholds: StandardEditorsRegistryItem<ThresholdsConfig> = {
-    id: 'thresholds',
-    name: 'Thresholds',
-    description: 'Allows defining thresholds',
-    editor: ThresholdsValueEditor as any,
-  };
-
-  return [...getStandardOptionEditors(), dashboardPicker, mappings, thresholds];
-};
-
-/**
- * Returns collection of common field config properties definitions
- */
-export const getAllStandardFieldConfigs = () => {
-  const mappings: FieldConfigPropertyItem<any, ValueMapping[], ValueMappingFieldConfigSettings> = {
-    id: 'mappings',
-    path: 'mappings',
-    name: 'Value mappings',
-    description: 'Modify the display text based on input value',
-
-    editor: standardEditorsRegistry.get('mappings').editor as any,
-    override: standardEditorsRegistry.get('mappings').editor as any,
-    process: valueMappingsOverrideProcessor,
-    settings: {},
-    defaultValue: [],
-    shouldApply: (x) => x.type !== FieldType.time,
-    category: ['Value mappings'],
-    getItemsCount: (value?) => (value ? value.length : 0),
-  };
-
-  const thresholds: FieldConfigPropertyItem<any, ThresholdsConfig, ThresholdsFieldConfigSettings> = {
-    id: 'thresholds',
-    path: 'thresholds',
-    name: 'Thresholds',
-    editor: standardEditorsRegistry.get('thresholds').editor as any,
-    override: standardEditorsRegistry.get('thresholds').editor as any,
-    process: thresholdsOverrideProcessor,
-    settings: {},
-    defaultValue: {
-      mode: ThresholdsMode.Absolute,
-      steps: [
-        { value: -Infinity, color: 'green' },
-        { value: 80, color: 'red' },
-      ],
-    },
-    shouldApply: () => true,
-    category: ['Thresholds'],
-    getItemsCount: (value) => (value ? value.steps.length : 0),
-  };
-
-  return [...getStandardFieldConfigs(), mappings, thresholds];
-};

public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx

@@ -4,7 +4,8 @@ import { useAsync } from 'react-use';
 import { AnnotationQuery, DataSourceInstanceSettings, getDataSourceRef } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { DataSourcePicker, getDataSourceSrv } from '@grafana/runtime';
-import { Checkbox, CollapsableSection, ColorValueEditor, Field, HorizontalGroup, Input } from '@grafana/ui';
+import { Checkbox, CollapsableSection, Field, HorizontalGroup, Input } from '@grafana/ui';
+import { ColorValueEditor } from 'app/core/components/OptionsUI/color';
 import StandardAnnotationQueryEditor from 'app/features/annotations/components/StandardAnnotationQueryEditor';
 
 import { DashboardModel } from '../../state/DashboardModel';

public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx

@@ -13,7 +13,7 @@ import {
   toDataFrame,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { getAllOptionEditors, getAllStandardFieldConfigs } from 'app/core/components/editors/registry';
+import { getAllOptionEditors, getAllStandardFieldConfigs } from 'app/core/components/OptionsUI/registry';
 import { getPanelPlugin } from 'app/features/plugins/__mocks__/pluginMocks';
 
 import { DashboardModel, PanelModel } from '../../state';

public/app/features/dashboard/state/DashboardMigrator.ts

@@ -25,7 +25,7 @@ import {
 } from '@grafana/data';
 import { getDataSourceSrv, setDataSourceSrv } from '@grafana/runtime';
 import { AxisPlacement, GraphFieldConfig } from '@grafana/ui';
-import { getAllOptionEditors, getAllStandardFieldConfigs } from 'app/core/components/editors/registry';
+import { getAllOptionEditors, getAllStandardFieldConfigs } from 'app/core/components/OptionsUI/registry';
 import { config } from 'app/core/config';
 import {
   DEFAULT_PANEL_SPAN,

public/app/features/dimensions/editors/TextDimensionEditor.tsx

@@ -6,9 +6,10 @@ import {
   StandardEditorsRegistryItem,
   StringFieldConfigSettings,
 } from '@grafana/data';
-import { Button, InlineField, InlineFieldRow, RadioButtonGroup, StringValueEditor } from '@grafana/ui';
+import { Button, InlineField, InlineFieldRow, RadioButtonGroup } from '@grafana/ui';
+import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker';
+import { StringValueEditor } from 'app/core/components/OptionsUI/string';
 
-import { FieldNamePicker } from '../../../../../packages/grafana-ui/src/components/MatchersUI/FieldNamePicker';
 import { TextDimensionConfig, TextDimensionMode, TextDimensionOptions } from '../types';
 
 const textOptions = [

public/app/features/playlist/PlaylistForm.tsx

@@ -3,7 +3,7 @@ import React, { FC } from 'react';
 import { selectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';
 import { Button, Field, Form, HorizontalGroup, Input, LinkButton } from '@grafana/ui';
-import { DashboardPickerByID } from 'app/core/components/editors/DashboardPickerByID';
+import { DashboardPickerByID } from 'app/core/components/OptionsUI/DashboardPickerByID';
 
 import { TagFilter } from '../../core/components/TagFilter/TagFilter';
 import { SearchSrv } from '../../core/services/search_srv';

public/app/features/playlist/usePlaylistItems.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 
-import { DashboardPickerItem } from 'app/core/components/editors/DashboardPickerByID';
+import { DashboardPickerItem } from 'app/core/components/OptionsUI/DashboardPickerByID';
 
 import { PlaylistItem } from './types';
 

public/app/plugins/panel/canvas/editor/APIEditor.tsx

@@ -2,7 +2,8 @@ import React, { FC, useCallback } from 'react';
 
 import { AppEvents, StandardEditorProps, StandardEditorsRegistryItem, StringFieldConfigSettings } from '@grafana/data';
 import { config, getBackendSrv } from '@grafana/runtime';
-import { Button, InlineField, InlineFieldRow, JSONFormatter, StringValueEditor } from '@grafana/ui';
+import { Button, InlineField, InlineFieldRow, JSONFormatter } from '@grafana/ui';
+import { StringValueEditor } from 'app/core/components/OptionsUI/string';
 import { appEvents } from 'app/core/core';
 
 export interface APIEditorConfig {

public/app/plugins/panel/geomap/layers/data/StyleEditor.tsx

@@ -7,9 +7,7 @@ import {
   InlineField,
   InlineFieldRow,
   InlineLabel,
-  NumberValueEditor,
   RadioButtonGroup,
-  SliderValueEditor,
 } from '@grafana/ui';
 import { Observable } from 'rxjs';
 import { useObservable } from 'react-use';
@@ -34,6 +32,8 @@ import {
 import { defaultStyleConfig, GeometryTypeId, StyleConfig, TextAlignment, TextBaseline } from '../../style/types';
 import { styleUsesText } from '../../style/utils';
 import { LayerContentInfo } from '../../utils/getFeatures';
+import { NumberValueEditor } from 'app/core/components/OptionsUI/number';
+import { SliderValueEditor } from 'app/core/components/OptionsUI/slider';
 
 export interface StyleEditorOptions {
   layerInfo?: Observable<LayerContentInfo>;