UnitPicker: Use the new Cascader implementation (#22029)

* Use Cascader for UnitPicker and add relevant props to Cascader

* Fix grammar

* Add placeholder for UnitPicker

* Update comments

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

@@ -48,6 +48,15 @@ export const withInitialValue = () => (
   <Cascader options={options} initialValue="3" onSelect={val => console.log(val)} />
 );
 
-export const withCustomValue = () => (
-  <Cascader options={options} allowCustomValue initialValue="Custom Initial Value" onSelect={val => console.log(val)} />
-);
+export const withCustomValue = () => {
+  const onCreateLabel = text('Custom value creation label', 'Create new value: ');
+  return (
+    <Cascader
+      options={options}
+      allowCustomValue
+      formatCreateLabel={val => onCreateLabel + val}
+      initialValue="Custom Initial Value"
+      onSelect={val => console.log(val)}
+    />
+  );
+};

packages/grafana-ui/src/components/Cascader/Cascader.tsx

@@ -8,14 +8,17 @@ import { FormInputSize } from '../Forms/types';
 import { Input } from '../Forms/Input/Input';
 import { SelectableValue } from '@grafana/data';
 import { css } from 'emotion';
-
 interface CascaderProps {
+  /** The seperator between levels in the search */
   separator?: string;
+  placeholder?: string;
   options: CascaderOption[];
   onSelect(val: string): void;
   size?: FormInputSize;
   initialValue?: string;
   allowCustomValue?: boolean;
+  /** A function for formatting the message for custom value creation. Only applies when allowCustomValue is set to true*/
+  formatCreateLabel?: (val: string) => string;
 }
 
 interface CascaderState {
@@ -30,11 +33,11 @@ interface CascaderState {
 export interface CascaderOption {
   value: any;
   label: string;
-  // Items will be just flattened into the main list of items recursively.
+  /** Items will be just flattened into the main list of items recursively. */
   items?: CascaderOption[];
   disabled?: boolean;
   title?: string;
-  // Children will be shown in a submenu.
+  /**  Children will be shown in a submenu. Use 'items' instead, as 'children' exist to ensure backwards compability.*/
   children?: CascaderOption[];
 }
 
@@ -168,7 +171,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
   };
 
   render() {
-    const { size, allowCustomValue } = this.props;
+    const { size, allowCustomValue, placeholder } = this.props;
     const { focusCascade, isSearching, searchableOptions, rcValue, activeLabel } = this.state;
 
     return (
@@ -176,13 +179,14 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
         {isSearching ? (
           <Select
             allowCustomValue={allowCustomValue}
-            placeholder="Search"
+            placeholder={placeholder}
             autoFocus={!focusCascade}
             onChange={this.onSelect}
             onBlur={this.onBlur}
             options={searchableOptions}
             size={size || 'md'}
             onCreateOption={this.onCreateOption}
+            formatCreateLabel={this.props.formatCreateLabel}
           />
         ) : (
           <RCCascader
@@ -197,6 +201,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
           >
             <div className={disableDivFocus}>
               <Input
+                placeholder={placeholder}
                 value={activeLabel}
                 onKeyDown={this.onInputKeyDown}
                 onChange={() => {}}

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

@@ -13,4 +13,5 @@ export default {
   },
 };
 
-export const simple = () => <UnitPicker onChange={val => console.log(val)} />;
+export const simple = () => <UnitPicker useNewForms onChange={val => console.log(val)} />;
+export const old = () => <UnitPicker onChange={val => console.log(val)} />;

packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx

 import React, { PureComponent } from 'react';
 
 import { Select } from '../Select/Select';
-
+import { Cascader, CascaderOption } from '../Cascader/Cascader';
 import { getValueFormats, SelectableValue } from '@grafana/data';
 
 interface Props {
   onChange: (item?: string) => void;
   value?: string;
   width?: number;
+  /** Temporary flag that uses the new form styles. */
+  useNewForms?: boolean;
 }
 
 function formatCreateLabel(input: string) {
@@ -24,7 +26,7 @@ export class UnitPicker extends PureComponent<Props> {
   };
 
   render() {
-    const { value, width } = this.props;
+    const { value, width, useNewForms } = this.props;
 
     // Set the current selection
     let current: SelectableValue<string> | undefined = undefined;
@@ -44,7 +46,13 @@ export class UnitPicker extends PureComponent<Props> {
         }
         return sel;
       });
-
+      if (useNewForms) {
+        return {
+          label: group.text,
+          value: group.text,
+          items: options,
+        };
+      }
       return {
         label: group.text,
         options,
@@ -56,7 +64,16 @@ export class UnitPicker extends PureComponent<Props> {
       current = { value, label: value };
     }
 
-    return (
+    return useNewForms ? (
+      <Cascader
+        initialValue={current && current.label}
+        allowCustomValue
+        formatCreateLabel={formatCreateLabel}
+        options={groupOptions as CascaderOption[]}
+        placeholder="Choose"
+        onSelect={this.props.onChange}
+      />
+    ) : (
       <Select
         width={width}
         defaultValue={current}