Refactor: Move Value Mappings to Grafana public instead of Grafana UI (#44237)

packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx

@@ -1,47 +0,0 @@
-import React, { useState } from 'react';
-import { ValueMappingsEditor } from './ValueMappingsEditor';
-import { MappingType, ValueMapping } from '@grafana/data';
-
-export default {
-  title: 'Pickers and Editors/ValueMappingsEditor',
-  component: ValueMappingsEditor,
-};
-
-export function Example() {
-  const [mappings, setMappings] = useState<ValueMapping[]>([
-    {
-      type: MappingType.ValueToText,
-      options: {
-        LowLow: { color: 'red' },
-        Low: { text: 'not good', color: 'orange' },
-        Ok: { text: 'all good', color: 'green' },
-        NoColor: { text: 'Unknown' },
-      },
-    },
-    {
-      type: MappingType.RangeToText,
-      options: {
-        from: 10,
-        to: 15,
-        result: {
-          index: 5,
-          text: 'bad',
-          color: 'red',
-        },
-      },
-    },
-    {
-      type: MappingType.RegexToText,
-      options: {
-        pattern: '(.*).example.com',
-        result: {
-          index: 5,
-          text: '$1',
-          color: 'green',
-        },
-      },
-    },
-  ]);
-
-  return <ValueMappingsEditor value={mappings} onChange={setMappings} />;
-}

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

@@ -13,9 +13,6 @@ import {
   ThresholdsConfig,
   ThresholdsFieldConfigSettings,
   thresholdsOverrideProcessor,
-  ValueMapping,
-  ValueMappingFieldConfigSettings,
-  valueMappingsOverrideProcessor,
   ThresholdsMode,
   identityOverrideProcessor,
   TimeZone,
@@ -37,7 +34,6 @@ import {
   MultiSelectValueEditor,
   TimeZonePicker,
 } from '../components';
-import { ValueMappingsValueEditor } from '../components/OptionsUI/mappings';
 import { ThresholdsValueEditor } from '../components/OptionsUI/thresholds';
 import { UnitValueEditor } from '../components/OptionsUI/units';
 import { DataLinksValueEditor } from '../components/OptionsUI/links';
@@ -160,22 +156,6 @@ export const getStandardFieldConfigs = () => {
     getItemsCount: (value) => (value ? value.steps.length : 0),
   };
 
-  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 noValue: FieldConfigPropertyItem<any, string, StringFieldConfigSettings> = {
     id: 'noValue',
     path: 'noValue',
@@ -224,7 +204,7 @@ export const getStandardFieldConfigs = () => {
     category,
   };
 
-  return [unit, min, max, decimals, displayName, color, noValue, thresholds, mappings, links];
+  return [unit, min, max, decimals, displayName, color, noValue, thresholds, links];
 };
 
 /**
@@ -307,13 +287,6 @@ export const getStandardOptionEditors = () => {
     editor: ThresholdsValueEditor as any,
   };
 
-  const mappings: StandardEditorsRegistryItem<ValueMapping[]> = {
-    id: 'mappings',
-    name: 'Mappings',
-    description: 'Allows defining value mappings',
-    editor: ValueMappingsValueEditor as any,
-  };
-
   const color: StandardEditorsRegistryItem<string> = {
     id: 'color',
     name: 'Color',
@@ -366,7 +339,6 @@ export const getStandardOptionEditors = () => {
     radio,
     select,
     unit,
-    mappings,
     thresholds,
     links,
     statsPicker,

public/app/app.ts

@@ -38,7 +38,7 @@ import { Echo } from './core/services/echo/Echo';
 import { reportPerformance } from './core/services/echo/EchoSrv';
 import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend';
 import 'app/features/all';
-import { getScrollbarWidth, getStandardFieldConfigs } from '@grafana/ui';
+import { getScrollbarWidth } from '@grafana/ui';
 import { variableAdapters } from './features/variables/adapters';
 import { initDevFeatures } from './dev';
 import { getStandardTransformers } from 'app/core/utils/standardTransformers';
@@ -56,7 +56,7 @@ import { contextSrv } from './core/services/context_srv';
 import { GAEchoBackend } from './core/services/echo/backends/analytics/GABackend';
 import { ApplicationInsightsBackend } from './core/services/echo/backends/analytics/ApplicationInsightsBackend';
 import { RudderstackBackend } from './core/services/echo/backends/analytics/RudderstackBackend';
-import { getAllOptionEditors } from './core/components/editors/registry';
+import { getAllOptionEditors, getAllStandardFieldConfigs } from './core/components/editors/registry';
 import { backendSrv } from './core/services/backend_srv';
 import { setPanelRenderer } from '@grafana/runtime/src/components/PanelRenderer';
 import { PanelDataErrorView } from './features/panel/components/PanelDataErrorView';
@@ -112,7 +112,7 @@ export class GrafanaApp {
       initExtensions();
 
       standardEditorsRegistry.setInit(getAllOptionEditors);
-      standardFieldConfigEditorRegistry.setInit(getStandardFieldConfigs);
+      standardFieldConfigEditorRegistry.setInit(getAllStandardFieldConfigs);
       standardTransformersRegistry.setInit(getStandardTransformers);
       variableAdapters.setInit(() => [
         createQueryVariableAdapter(),

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

@@ -1,6 +1,15 @@
 import { DashboardPicker, DashboardPickerOptions } from './DashboardPicker';
-import { getStandardOptionEditors } from '@grafana/ui';
+import { getStandardFieldConfigs, getStandardOptionEditors } from '@grafana/ui';
-import { StandardEditorsRegistryItem } from '@grafana/data';
+import {
+  FieldConfigPropertyItem,
+  FieldType,
+  standardEditorsRegistry,
+  StandardEditorsRegistryItem,
+  ValueMapping,
+  ValueMappingFieldConfigSettings,
+  valueMappingsOverrideProcessor,
+} from '@grafana/data';
+import { ValueMappingsValueEditor } from 'app/features/dimensions/editors/ValueMappingsEditor/mappings';
 
 /**
  * Returns collection of standard option editors definitions
@@ -12,5 +21,36 @@ export const getAllOptionEditors = () => {
     description: 'Select dashboard',
     editor: DashboardPicker as any,
   };
-  return [...getStandardOptionEditors(), dashboardPicker];
+
+  const mappings: StandardEditorsRegistryItem<ValueMapping[]> = {
+    id: 'mappings',
+    name: 'Mappings',
+    description: 'Allows defining value mappings',
+    editor: ValueMappingsValueEditor as any,
+  };
+
+  return [...getStandardOptionEditors(), dashboardPicker, mappings];
+};
+
+/**
+ * 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),
+  };
+
+  return [...getStandardFieldConfigs(), mappings];
 };

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

@@ -44,7 +44,7 @@ import { VariableHide } from '../../variables/types';
 import { config } from 'app/core/config';
 import { plugin as statPanelPlugin } from 'app/plugins/panel/stat/module';
 import { plugin as gaugePanelPlugin } from 'app/plugins/panel/gauge/module';
-import { AxisPlacement, getStandardFieldConfigs, getStandardOptionEditors, GraphFieldConfig } from '@grafana/ui';
+import { AxisPlacement, GraphFieldConfig } from '@grafana/ui';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { labelsToFieldsTransformer } from '../../../../../packages/grafana-data/src/transformations/transformers/labelsToFields';
 import { mergeTransformer } from '../../../../../packages/grafana-data/src/transformations/transformers/merge';
@@ -54,9 +54,10 @@ import {
   migrateMultipleStatsMetricsQuery,
 } from 'app/plugins/datasource/cloudwatch/migrations';
 import { CloudWatchAnnotationQuery, CloudWatchMetricsQuery } from 'app/plugins/datasource/cloudwatch/types';
+import { getAllOptionEditors, getAllStandardFieldConfigs } from 'app/core/components/editors/registry';
 
-standardEditorsRegistry.setInit(getStandardOptionEditors);
+standardEditorsRegistry.setInit(getAllOptionEditors);
-standardFieldConfigEditorRegistry.setInit(getStandardFieldConfigs);
+standardFieldConfigEditorRegistry.setInit(getAllStandardFieldConfigs);
 
 type PanelSchemeUpgradeHandler = (panel: PanelModel) => PanelModel;
 export class DashboardMigrator {

public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx

@@ -1,15 +1,8 @@
 import React, { useCallback, useEffect, useRef } from 'react';
-import { Input } from '../Input/Input';
 import { GrafanaTheme2, MappingType, SpecialValueMatch, SelectableValue, ValueMappingResult } from '@grafana/data';
 import { Draggable } from 'react-beautiful-dnd';
-import { Icon } from '../Icon/Icon';
-import { ColorPicker } from '../ColorPicker/ColorPicker';
-import { LinkButton } from '../Button';
-import { HorizontalGroup } from '../Layout/Layout';
-import { IconButton } from '../IconButton/IconButton';
-import { useStyles2 } from '../../themes/ThemeContext';
 import { css } from '@emotion/css';
-import { Select } from '../Select/Select';
+import { useStyles2, Icon, Select, HorizontalGroup, ColorPicker, IconButton, LinkButton, Input } from '@grafana/ui';
 
 export interface ValueMappingEditRowModel {
   type: MappingType;
@@ -30,7 +23,7 @@ interface Props {
   onDuplicate: (index: number) => void;
 }
 
-export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDuplicate: onDupliate }: Props) {
+export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDuplicate: onDuplicate }: Props) {
   const { key, result } = mapping;
   const styles = useStyles2(getStyles);
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -192,7 +185,7 @@ export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDupl
           </td>
           <td className={styles.textAlignCenter}>
             <HorizontalGroup spacing="sm">
-              <IconButton name="copy" onClick={() => onDupliate(index)} data-testid="duplicate-value-mapping" />
+              <IconButton name="copy" onClick={() => onDuplicate(index)} data-testid="duplicate-value-mapping" />
               <IconButton name="trash-alt" onClick={() => onRemove(index)} data-testid="remove-value-mapping" />
             </HorizontalGroup>
           </td>

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

@@ -1,13 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { GrafanaTheme2, MappingType, ValueMapping } from '@grafana/data';
-import { Button } from '../Button/Button';
-import { Modal } from '../Modal/Modal';
-import { useStyles2 } from '../../themes';
 import { css } from '@emotion/css';
 import { buildEditRowModels, editModelToSaveModel, ValueMappingsEditorModal } from './ValueMappingsEditorModal';
-import { Icon } from '../Icon/Icon';
+import { useStyles2, VerticalGroup, Icon, ColorPicker, Button, Modal } from '@grafana/ui';
-import { VerticalGroup } from '../Layout/Layout';
-import { ColorPicker } from '../ColorPicker/ColorPicker';
 
 export interface Props {
   value: ValueMapping[];

public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx

@@ -3,7 +3,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { ValueMappingsEditorModal, Props } from './ValueMappingsEditorModal';
 import { MappingType } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { selectOptionInTest } from '../Select/test-utils';
+import { selectOptionInTest } from '@grafana/ui';
 
 const setup = (spy?: any, propOverrides?: object) => {
   const props: Props = {

public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx

@@ -1,12 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { GrafanaTheme2, MappingType, SelectableValue, SpecialValueMatch, ValueMapping } from '@grafana/data';
-import { Button } from '../Button/Button';
-import { Modal } from '../Modal/Modal';
-import { useStyles2 } from '../../themes';
 import { ValueMappingEditRow, ValueMappingEditRowModel } from './ValueMappingEditRow';
 import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 import { css } from '@emotion/css';
-import { ValuePicker } from '../ValuePicker/ValuePicker';
+import { useStyles2, Modal, ValuePicker, Button } from '@grafana/ui';
 
 export interface Props {
   value: ValueMapping[];