New Editor: use unit picker (#22033)

* use unit picker

* export correct file name

* override is the same

packages/grafana-data/src/types/fieldOverrides.ts

@@ -25,7 +25,7 @@ export interface FieldConfigSource {
 export interface FieldConfigEditorProps<TValue, TSettings> {
   item: FieldPropertyEditorItem<TValue, TSettings>; // The property info
   value: TValue;
-  onChange: (value: TValue) => void;
+  onChange: (value?: TValue) => void;
 }
 
 export interface FieldOverrideContext {
@@ -38,7 +38,7 @@ export interface FieldOverrideEditorProps<TValue, TSettings> {
   item: FieldPropertyEditorItem<TValue, TSettings>;
   value: any;
   context: FieldOverrideContext;
-  onChange: (value: any) => void;
+  onChange: (value?: any) => void;
 }
 
 export interface FieldPropertyEditorItem<TValue = any, TSettings = any> extends RegistryItem {

packages/grafana-ui/src/components/FieldConfigs/standardFieldConfigEditorRegistry.tsx

@@ -1,6 +1,7 @@
 import { FieldConfigEditorRegistry, Registry, FieldPropertyEditorItem, ThresholdsConfig } from '@grafana/data';
 import { StringValueEditor, StringOverrideEditor, stringOverrideProcessor, StringFieldConfigSettings } from './string';
 import { NumberValueEditor, NumberOverrideEditor, numberOverrideProcessor, NumberFieldConfigSettings } from './number';
+import { UnitValueEditor, UnitOverrideEditor } from './units';
 import {
   ThresholdsValueEditor,
   ThresholdsOverrideEditor,
@@ -27,8 +28,8 @@ const unit: FieldPropertyEditorItem<string, StringFieldConfigSettings> = {
   name: 'Unit',
   description: 'value units',
 
-  editor: StringValueEditor,
-  override: StringOverrideEditor,
+  editor: UnitValueEditor,
+  override: UnitOverrideEditor,
   process: stringOverrideProcessor,
 
   settings: {

packages/grafana-ui/src/components/FieldConfigs/units.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { FieldOverrideEditorProps, FieldConfigEditorProps } from '@grafana/data';
+import { UnitPicker } from '../UnitPicker/UnitPicker';
+
+export interface UnitFieldConfigSettings {
+  // ??
+}
+
+export const UnitValueEditor: React.FC<FieldConfigEditorProps<string, UnitFieldConfigSettings>> = ({
+  value,
+  onChange,
+}) => {
+  return <UnitPicker value={value} onChange={onChange} />;
+};
+
+export const UnitOverrideEditor: React.FC<FieldOverrideEditorProps<string, UnitFieldConfigSettings>> = ({
+  value,
+  onChange,
+}) => {
+  return <UnitPicker value={value} onChange={onChange} />;
+};