From 58e776915843351f9eca249d4dacf6b5ef4a93aa Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Tue, 14 Jun 2022 08:05:11 -0700 Subject: [PATCH] OptionsUI: Move internal options editors out of @grafana/ui (#50739) --- packages/grafana-ui/src/components/index.ts | 9 - packages/grafana-ui/src/index.ts | 3 - public/app/app.ts | 2 +- .../DashboardPicker.tsx | 0 .../DashboardPickerByID.tsx | 0 .../app/core}/components/OptionsUI/color.tsx | 6 +- .../core}/components/OptionsUI/fieldColor.tsx | 6 +- .../app/core}/components/OptionsUI/links.tsx | 3 +- .../components/OptionsUI/multiSelect.tsx | 3 +- .../app/core}/components/OptionsUI/number.tsx | 3 +- .../core/components/OptionsUI/registry.tsx | 376 ++++++++++-------- .../app/core}/components/OptionsUI/select.tsx | 3 +- .../app/core}/components/OptionsUI/slider.tsx | 3 +- .../app/core}/components/OptionsUI/stats.tsx | 3 +- .../app/core}/components/OptionsUI/string.tsx | 4 +- .../core}/components/OptionsUI/strings.tsx | 6 +- .../app/core}/components/OptionsUI/units.tsx | 3 +- .../app/core/components/editors/registry.tsx | 89 ----- .../AnnotationSettingsEdit.tsx | 3 +- .../PanelEditor/OptionsPaneOptions.test.tsx | 2 +- .../dashboard/state/DashboardMigrator.ts | 2 +- .../editors/TextDimensionEditor.tsx | 5 +- public/app/features/playlist/PlaylistForm.tsx | 2 +- .../features/playlist/usePlaylistItems.tsx | 2 +- .../plugins/panel/canvas/editor/APIEditor.tsx | 3 +- .../panel/geomap/layers/data/StyleEditor.tsx | 4 +- 26 files changed, 246 insertions(+), 299 deletions(-) rename public/app/core/components/{editors => OptionsUI}/DashboardPicker.tsx (100%) rename public/app/core/components/{editors => OptionsUI}/DashboardPickerByID.tsx (100%) rename {packages/grafana-ui/src => public/app/core}/components/OptionsUI/color.tsx (91%) rename {packages/grafana-ui/src => public/app/core}/components/OptionsUI/fieldColor.tsx (94%) rename {packages/grafana-ui/src => public/app/core}/components/OptionsUI/links.tsx (84%) rename {packages/grafana-ui/src => public/app/core}/components/OptionsUI/multiSelect.tsx (97%) rename {packages/grafana-ui/src => public/app/core}/components/OptionsUI/number.tsx (97%) rename packages/grafana-ui/src/utils/standardEditors.tsx => public/app/core/components/OptionsUI/registry.tsx (71%) rename {packages/grafana-ui/src => public/app/core}/components/OptionsUI/select.tsx (97%) rename {packages/grafana-ui/src => public/app/core}/components/OptionsUI/slider.tsx (93%) rename {packages/grafana-ui/src => public/app/core}/components/OptionsUI/stats.tsx (88%) rename {packages/grafana-ui/src => public/app/core}/components/OptionsUI/string.tsx (93%) rename {packages/grafana-ui/src => public/app/core}/components/OptionsUI/strings.tsx (94%) rename {packages/grafana-ui/src => public/app/core}/components/OptionsUI/units.tsx (84%) delete mode 100644 public/app/core/components/editors/registry.tsx diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 947bce9964c..802e5e62267 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/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'; diff --git a/packages/grafana-ui/src/index.ts b/packages/grafana-ui/src/index.ts index afa83d5c8fc..0ccf2af9024 100644 --- a/packages/grafana-ui/src/index.ts +++ b/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'; diff --git a/public/app/app.ts b/public/app/app.ts index f0b7ee0337e..08d0541485f 100644 --- a/public/app/app.ts +++ b/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'; diff --git a/public/app/core/components/editors/DashboardPicker.tsx b/public/app/core/components/OptionsUI/DashboardPicker.tsx similarity index 100% rename from public/app/core/components/editors/DashboardPicker.tsx rename to public/app/core/components/OptionsUI/DashboardPicker.tsx diff --git a/public/app/core/components/editors/DashboardPickerByID.tsx b/public/app/core/components/OptionsUI/DashboardPickerByID.tsx similarity index 100% rename from public/app/core/components/editors/DashboardPickerByID.tsx rename to public/app/core/components/OptionsUI/DashboardPickerByID.tsx diff --git a/packages/grafana-ui/src/components/OptionsUI/color.tsx b/public/app/core/components/OptionsUI/color.tsx similarity index 91% rename from packages/grafana-ui/src/components/OptionsUI/color.tsx rename to public/app/core/components/OptionsUI/color.tsx index 216591410d5..dcbb9137d48 100644 --- a/packages/grafana-ui/src/components/OptionsUI/color.tsx +++ b/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 diff --git a/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx b/public/app/core/components/OptionsUI/fieldColor.tsx similarity index 94% rename from packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx rename to public/app/core/components/OptionsUI/fieldColor.tsx index fa665bc4987..3b6bbdd4cd3 100644 --- a/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/OptionsUI/links.tsx b/public/app/core/components/OptionsUI/links.tsx similarity index 84% rename from packages/grafana-ui/src/components/OptionsUI/links.tsx rename to public/app/core/components/OptionsUI/links.tsx index 9501e9a0b7a..d03b13c89e3 100644 --- a/packages/grafana-ui/src/components/OptionsUI/links.tsx +++ b/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> = ({ value, diff --git a/packages/grafana-ui/src/components/OptionsUI/multiSelect.tsx b/public/app/core/components/OptionsUI/multiSelect.tsx similarity index 97% rename from packages/grafana-ui/src/components/OptionsUI/multiSelect.tsx rename to public/app/core/components/OptionsUI/multiSelect.tsx index e158b28405d..80f30019e65 100644 --- a/packages/grafana-ui/src/components/OptionsUI/multiSelect.tsx +++ b/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 { isLoading: boolean; diff --git a/packages/grafana-ui/src/components/OptionsUI/number.tsx b/public/app/core/components/OptionsUI/number.tsx similarity index 97% rename from packages/grafana-ui/src/components/OptionsUI/number.tsx rename to public/app/core/components/OptionsUI/number.tsx index 8d14073c517..444ebd7461f 100644 --- a/packages/grafana-ui/src/components/OptionsUI/number.tsx +++ b/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> = ({ value, diff --git a/packages/grafana-ui/src/utils/standardEditors.tsx b/public/app/core/components/OptionsUI/registry.tsx similarity index 71% rename from packages/grafana-ui/src/utils/standardEditors.tsx rename to public/app/core/components/OptionsUI/registry.tsx index ca7007896ab..2e1213a7983 100644 --- a/packages/grafana-ui/src/utils/standardEditors.tsx +++ b/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 = { + id: 'number', + name: 'Number', + description: 'Allows numeric values input', + editor: NumberValueEditor as any, + }; + + const slider: StandardEditorsRegistryItem = { + id: 'slider', + name: 'Slider', + description: 'Allows numeric values input', + editor: SliderValueEditor as any, + }; + + const text: StandardEditorsRegistryItem = { + id: 'text', + name: 'Text', + description: 'Allows string values input', + editor: StringValueEditor as any, + }; + + const strings: StandardEditorsRegistryItem = { + id: 'strings', + name: 'String array', + description: 'An array of strings', + editor: StringArrayEditor as any, + }; + + const boolean: StandardEditorsRegistryItem = { + id: 'boolean', + name: 'Boolean', + description: 'Allows boolean values input', + editor(props) { + return props.onChange(e.currentTarget.checked)} />; + }, + }; + + const select: StandardEditorsRegistryItem = { + id: 'select', + name: 'Select', + description: 'Allows option selection', + editor: SelectValueEditor as any, + }; + + const multiSelect: StandardEditorsRegistryItem = { + id: 'multi-select', + name: 'Multi select', + description: 'Allows for multiple option selection', + editor: MultiSelectValueEditor as any, + }; + + const radio: StandardEditorsRegistryItem = { + id: 'radio', + name: 'Radio', + description: 'Allows option selection', + editor(props) { + return ; + }, + }; + + const unit: StandardEditorsRegistryItem = { + id: 'unit', + name: 'Unit', + description: 'Allows unit input', + editor: UnitValueEditor as any, + }; + + const color: StandardEditorsRegistryItem = { + id: 'color', + name: 'Color', + description: 'Allows color selection', + editor(props) { + return ; + }, + }; + + const fieldColor: StandardEditorsRegistryItem = { + id: 'fieldColor', + name: 'Field Color', + description: 'Field color selection', + editor: FieldColorEditor as any, + }; + + const links: StandardEditorsRegistryItem = { + id: 'links', + name: 'Links', + description: 'Allows defining data links', + editor: DataLinksValueEditor as any, + }; + + const statsPicker: StandardEditorsRegistryItem = { + id: 'stats-picker', + name: 'Stats Picker', + editor: StatsPickerEditor as any, + description: '', + }; + + const timeZone: StandardEditorsRegistryItem = { + id: 'timezone', + name: 'Time Zone', + description: 'Time zone selection', + editor: TimeZonePicker as any, + }; + + const fieldName: StandardEditorsRegistryItem = { + id: 'field-name', + name: 'Field name', + description: 'Allows selecting a field name from a data frame', + editor: FieldNamePicker as any, + }; + + const dashboardPicker: StandardEditorsRegistryItem = { + id: 'dashboard-uid', + name: 'Dashboard', + description: 'Select dashboard', + editor: DashboardPicker as any, + }; + + const mappings: StandardEditorsRegistryItem = { + id: 'mappings', + name: 'Mappings', + description: 'Allows defining value mappings', + editor: ValueMappingsEditor as any, + }; + + const thresholds: StandardEditorsRegistryItem = { + 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 = { 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 = { - id: 'number', - name: 'Number', - description: 'Allows numeric values input', - editor: NumberValueEditor as any, - }; - - const slider: StandardEditorsRegistryItem = { - id: 'slider', - name: 'Slider', - description: 'Allows numeric values input', - editor: SliderValueEditor as any, - }; - - const text: StandardEditorsRegistryItem = { - id: 'text', - name: 'Text', - description: 'Allows string values input', - editor: StringValueEditor as any, - }; - - const strings: StandardEditorsRegistryItem = { - id: 'strings', - name: 'String array', - description: 'An array of strings', - editor: StringArrayEditor as any, - }; - - const boolean: StandardEditorsRegistryItem = { - id: 'boolean', - name: 'Boolean', - description: 'Allows boolean values input', - editor(props) { - return props.onChange(e.currentTarget.checked)} />; - }, - }; - - const select: StandardEditorsRegistryItem = { - id: 'select', - name: 'Select', - description: 'Allows option selection', - editor: SelectValueEditor as any, - }; - - const multiSelect: StandardEditorsRegistryItem = { - id: 'multi-select', - name: 'Multi select', - description: 'Allows for multiple option selection', - editor: MultiSelectValueEditor as any, - }; - - const radio: StandardEditorsRegistryItem = { - id: 'radio', - name: 'Radio', - description: 'Allows option selection', - editor(props) { - return ; + const mappings: FieldConfigPropertyItem = { + 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 = { + 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' }, + ], }, - }; - - const unit: StandardEditorsRegistryItem = { - id: 'unit', - name: 'Unit', - description: 'Allows unit input', - editor: UnitValueEditor as any, - }; - - const color: StandardEditorsRegistryItem = { - id: 'color', - name: 'Color', - description: 'Allows color selection', - editor(props) { - return ; - }, - }; - - const fieldColor: StandardEditorsRegistryItem = { - id: 'fieldColor', - name: 'Field Color', - description: 'Field color selection', - editor: FieldColorEditor as any, - }; - - const links: StandardEditorsRegistryItem = { - id: 'links', - name: 'Links', - description: 'Allows defining data links', - editor: DataLinksValueEditor as any, - }; - - const statsPicker: StandardEditorsRegistryItem = { - id: 'stats-picker', - name: 'Stats Picker', - editor: StatsPickerEditor as any, - description: '', - }; - - const timeZone: StandardEditorsRegistryItem = { - id: 'timezone', - name: 'Time Zone', - description: 'Time zone selection', - editor: TimeZonePicker as any, - }; - - const fieldName: StandardEditorsRegistryItem = { - id: 'field-name', - name: 'Field name', - description: 'Allows selecting a field name from a data frame', - editor: FieldNamePicker as any, + shouldApply: () => true, + category: ['Thresholds'], + getItemsCount: (value) => (value ? value.steps.length : 0), }; - return [ - text, - number, - slider, - boolean, - radio, - select, - unit, - links, - statsPicker, - strings, - timeZone, - fieldColor, - color, - multiSelect, - fieldName, - ]; + return [unit, min, max, decimals, displayName, color, noValue, links, mappings, thresholds]; }; diff --git a/packages/grafana-ui/src/components/OptionsUI/select.tsx b/public/app/core/components/OptionsUI/select.tsx similarity index 97% rename from packages/grafana-ui/src/components/OptionsUI/select.tsx rename to public/app/core/components/OptionsUI/select.tsx index 43506e183e1..7a9bd5ce923 100644 --- a/packages/grafana-ui/src/components/OptionsUI/select.tsx +++ b/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 { isLoading: boolean; diff --git a/packages/grafana-ui/src/components/OptionsUI/slider.tsx b/public/app/core/components/OptionsUI/slider.tsx similarity index 93% rename from packages/grafana-ui/src/components/OptionsUI/slider.tsx rename to public/app/core/components/OptionsUI/slider.tsx index ea2af1014db..2d1c3f0bb2e 100644 --- a/packages/grafana-ui/src/components/OptionsUI/slider.tsx +++ b/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> = ({ value, diff --git a/packages/grafana-ui/src/components/OptionsUI/stats.tsx b/public/app/core/components/OptionsUI/stats.tsx similarity index 88% rename from packages/grafana-ui/src/components/OptionsUI/stats.tsx rename to public/app/core/components/OptionsUI/stats.tsx index 146a1371e4e..a4249a536ca 100644 --- a/packages/grafana-ui/src/components/OptionsUI/stats.tsx +++ b/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> = ({ value, diff --git a/packages/grafana-ui/src/components/OptionsUI/string.tsx b/public/app/core/components/OptionsUI/string.tsx similarity index 93% rename from packages/grafana-ui/src/components/OptionsUI/string.tsx rename to public/app/core/components/OptionsUI/string.tsx index 7e22b318db6..36073fcfbe4 100644 --- a/packages/grafana-ui/src/components/OptionsUI/string.tsx +++ b/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> = ({ value, diff --git a/packages/grafana-ui/src/components/OptionsUI/strings.tsx b/public/app/core/components/OptionsUI/strings.tsx similarity index 94% rename from packages/grafana-ui/src/components/OptionsUI/strings.tsx rename to public/app/core/components/OptionsUI/strings.tsx index 4b5c55e3c84..88812a3ca77 100644 --- a/packages/grafana-ui/src/components/OptionsUI/strings.tsx +++ b/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; interface State { diff --git a/packages/grafana-ui/src/components/OptionsUI/units.tsx b/public/app/core/components/OptionsUI/units.tsx similarity index 84% rename from packages/grafana-ui/src/components/OptionsUI/units.tsx rename to public/app/core/components/OptionsUI/units.tsx index 695681649fc..4b4abfb8fac 100644 --- a/packages/grafana-ui/src/components/OptionsUI/units.tsx +++ b/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> = ({ value, diff --git a/public/app/core/components/editors/registry.tsx b/public/app/core/components/editors/registry.tsx deleted file mode 100644 index 19220e2a35b..00000000000 --- a/public/app/core/components/editors/registry.tsx +++ /dev/null @@ -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 = { - id: 'dashboard-uid', - name: 'Dashboard', - description: 'Select dashboard', - editor: DashboardPicker as any, - }; - - const mappings: StandardEditorsRegistryItem = { - id: 'mappings', - name: 'Mappings', - description: 'Allows defining value mappings', - editor: ValueMappingsEditor as any, - }; - - const thresholds: StandardEditorsRegistryItem = { - 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 = { - 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 = { - 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]; -}; diff --git a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx index 9b78743f9d2..17ab1b1014e 100644 --- a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx +++ b/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'; diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx index c539c11acc3..9b2e9b08879 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx +++ b/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'; diff --git a/public/app/features/dashboard/state/DashboardMigrator.ts b/public/app/features/dashboard/state/DashboardMigrator.ts index 79b747773e9..589c814557b 100644 --- a/public/app/features/dashboard/state/DashboardMigrator.ts +++ b/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, diff --git a/public/app/features/dimensions/editors/TextDimensionEditor.tsx b/public/app/features/dimensions/editors/TextDimensionEditor.tsx index 6688bbf23ee..45f38608912 100644 --- a/public/app/features/dimensions/editors/TextDimensionEditor.tsx +++ b/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 = [ diff --git a/public/app/features/playlist/PlaylistForm.tsx b/public/app/features/playlist/PlaylistForm.tsx index 5b9293dc6e6..fd06e560c63 100644 --- a/public/app/features/playlist/PlaylistForm.tsx +++ b/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'; diff --git a/public/app/features/playlist/usePlaylistItems.tsx b/public/app/features/playlist/usePlaylistItems.tsx index 7f86df6ea89..b7ed5f22207 100644 --- a/public/app/features/playlist/usePlaylistItems.tsx +++ b/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'; diff --git a/public/app/plugins/panel/canvas/editor/APIEditor.tsx b/public/app/plugins/panel/canvas/editor/APIEditor.tsx index c08072d0e93..370b363b560 100644 --- a/public/app/plugins/panel/canvas/editor/APIEditor.tsx +++ b/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 { diff --git a/public/app/plugins/panel/geomap/layers/data/StyleEditor.tsx b/public/app/plugins/panel/geomap/layers/data/StyleEditor.tsx index 29ec63c004c..88df0e88054 100644 --- a/public/app/plugins/panel/geomap/layers/data/StyleEditor.tsx +++ b/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;