Refactor: move threshold editor out of grafana-ui (#44300)

packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.story.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { ThresholdsEditor } from './ThresholdsEditor';
-import { ThresholdsMode, ThresholdsConfig } from '@grafana/data';
-
-const thresholds: ThresholdsConfig = {
-  mode: ThresholdsMode.Absolute,
-  steps: [
-    { value: -Infinity, color: 'green' },
-    { value: 50, color: 'red' },
-    { value: 60, color: 'blue' },
-  ],
-};
-
-export default {
-  title: 'Pickers and Editors/ThresholdsEditorNew',
-  component: ThresholdsEditor,
-  decorators: [withCenteredStory],
-  parameters: {
-    docs: {},
-  },
-};
-
-export const Default = () => {
-  return <ThresholdsEditor thresholds={{} as ThresholdsConfig} onChange={action('Thresholds changed')} />;
-};
-
-export const WithThreshold = () => {
-  return <ThresholdsEditor thresholds={thresholds} onChange={action('Thresholds changed')} />;
-};

packages/grafana-ui/src/utils/standardEditors.tsx

@@ -10,10 +10,6 @@ import {
   StandardEditorsRegistryItem,
   StringFieldConfigSettings,
   stringOverrideProcessor,
-  ThresholdsConfig,
-  ThresholdsFieldConfigSettings,
-  thresholdsOverrideProcessor,
-  ThresholdsMode,
   identityOverrideProcessor,
   TimeZone,
   FieldColor,
@@ -34,7 +30,6 @@ import {
   MultiSelectValueEditor,
   TimeZonePicker,
 } from '../components';
-import { ThresholdsValueEditor } from '../components/OptionsUI/thresholds';
 import { UnitValueEditor } from '../components/OptionsUI/units';
 import { DataLinksValueEditor } from '../components/OptionsUI/links';
 import { ColorValueEditor } from '../components/OptionsUI/color';
@@ -136,26 +131,6 @@ export const getStandardFieldConfigs = () => {
     category,
   };
 
-  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),
-  };
-
   const noValue: FieldConfigPropertyItem<any, string, StringFieldConfigSettings> = {
     id: 'noValue',
     path: 'noValue',
@@ -204,7 +179,7 @@ export const getStandardFieldConfigs = () => {
     category,
   };
 
-  return [unit, min, max, decimals, displayName, color, noValue, thresholds, links];
+  return [unit, min, max, decimals, displayName, color, noValue, links];
 };
 
 /**
@@ -280,13 +255,6 @@ export const getStandardOptionEditors = () => {
     editor: UnitValueEditor as any,
   };
 
-  const thresholds: StandardEditorsRegistryItem<ThresholdsConfig> = {
-    id: 'thresholds',
-    name: 'Thresholds',
-    description: 'Allows defining thresholds',
-    editor: ThresholdsValueEditor as any,
-  };
-
   const color: StandardEditorsRegistryItem<string> = {
     id: 'color',
     name: 'Color',
@@ -339,7 +307,6 @@ export const getStandardOptionEditors = () => {
     radio,
     select,
     unit,
-    thresholds,
     links,
     statsPicker,
     strings,

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

@@ -5,11 +5,16 @@ import {
   FieldType,
   standardEditorsRegistry,
   StandardEditorsRegistryItem,
+  ThresholdsConfig,
+  ThresholdsFieldConfigSettings,
+  ThresholdsMode,
+  thresholdsOverrideProcessor,
   ValueMapping,
   ValueMappingFieldConfigSettings,
   valueMappingsOverrideProcessor,
 } from '@grafana/data';
 import { ValueMappingsValueEditor } from 'app/features/dimensions/editors/ValueMappingsEditor/mappings';
+import { ThresholdsValueEditor } from 'app/features/dimensions/editors/ThresholdsEditor/thresholds';
 
 /**
  * Returns collection of standard option editors definitions
@@ -29,7 +34,14 @@ export const getAllOptionEditors = () => {
     editor: ValueMappingsValueEditor as any,
   };
 
-  return [...getStandardOptionEditors(), dashboardPicker, mappings];
+  const thresholds: StandardEditorsRegistryItem<ThresholdsConfig> = {
+    id: 'thresholds',
+    name: 'Thresholds',
+    description: 'Allows defining thresholds',
+    editor: ThresholdsValueEditor as any,
+  };
+
+  return [...getStandardOptionEditors(), dashboardPicker, mappings, thresholds];
 };
 
 /**
@@ -52,5 +64,25 @@ export const getAllStandardFieldConfigs = () => {
     getItemsCount: (value?) => (value ? value.length : 0),
   };
 
-  return [...getStandardFieldConfigs(), mappings];
+  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/PanelEditor/OptionsPaneOptions.test.tsx

@@ -16,11 +16,11 @@ import { DashboardModel, PanelModel } from '../../state';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 import { getPanelPlugin } from 'app/features/plugins/__mocks__/pluginMocks';
-import { getStandardFieldConfigs, getStandardOptionEditors } from '@grafana/ui';
 import { dataOverrideTooltipDescription, overrideRuleTooltipDescription } from './state/getOptionOverrides';
+import { getAllOptionEditors, getAllStandardFieldConfigs } from 'app/core/components/editors/registry';
 
-standardEditorsRegistry.setInit(getStandardOptionEditors);
-standardFieldConfigEditorRegistry.setInit(getStandardFieldConfigs);
+standardEditorsRegistry.setInit(getAllOptionEditors);
+standardFieldConfigEditorRegistry.setInit(getAllStandardFieldConfigs);
 
 const mockStore = configureMockStore<any, any>();
 const OptionsPaneSelector = selectors.components.PanelEditor.OptionsPane;
@@ -126,6 +126,7 @@ describe('OptionsPaneOptions', () => {
 
     expect(screen.getByRole('heading', { name: /Panel options/ })).toBeInTheDocument();
     expect(screen.getByRole('heading', { name: /Standard options/ })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /Value mappings/ })).toBeInTheDocument();
     expect(screen.getByRole('heading', { name: /Thresholds/ })).toBeInTheDocument();
     expect(screen.getByRole('heading', { name: /TestPanel/ })).toBeInTheDocument();
   });

public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx

@@ -2,8 +2,7 @@ import React, { ChangeEvent } from 'react';
 import { mount } from 'enzyme';
 import { createTheme, ThresholdsMode } from '@grafana/data';
 import { ThresholdsEditor, Props, thresholdsWithoutKey } from './ThresholdsEditor';
-import { colors } from '../../utils';
-import { mockThemeContext } from '../../themes/ThemeContext';
+import { mockThemeContext, colors } from '@grafana/ui';
 
 const setup = (propOverrides?: Partial<Props>) => {
   const props: Props = {

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

@@ -8,16 +8,18 @@ import {
   SelectableValue,
   GrafanaTheme,
 } from '@grafana/data';
-import { colors } from '../../utils';
-import { ThemeContext } from '../../themes/ThemeContext';
-import { Input } from '../Input/Input';
-import { ColorPicker } from '../ColorPicker/ColorPicker';
-import { stylesFactory } from '../../themes';
-import { Icon } from '../Icon/Icon';
-import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup';
-import { Button } from '../Button';
-import { Label } from '../Forms/Label';
 import { isNumber } from 'lodash';
+import {
+  Input,
+  colors,
+  ColorPicker,
+  Icon,
+  ThemeContext,
+  Button,
+  Label,
+  RadioButtonGroup,
+  stylesFactory,
+} from '@grafana/ui';
 
 const modes: Array<SelectableValue<ThresholdsMode>> = [
   { value: ThresholdsMode.Absolute, label: 'Absolute', description: 'Pick thresholds based on the absolute values' },

public/app/features/dimensions/editors/ThresholdsEditor/thresholds.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FieldConfigEditorProps, ThresholdsConfig, ThresholdsMode, ThresholdsFieldConfigSettings } from '@grafana/data';
-import { ThresholdsEditor } from '../ThresholdsEditorNew/ThresholdsEditor';
+import { ThresholdsEditor } from './ThresholdsEditor';
 
 export class ThresholdsValueEditor extends React.PureComponent<
   FieldConfigEditorProps<ThresholdsConfig, ThresholdsFieldConfigSettings>