Grafana/UI: Unit picker should not set a category as unit (#30638)

* Grafana/UI: Unit picker should not set a category as a unit

When clicking categories for units the category is set as the unit until a leaf node is selected.
This change exposes the changeOnSelect property from rc-cascader and sets it to false for the unit picker.

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

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

@@ -13,6 +13,8 @@ interface CascaderProps {
   separator?: string;
   separator?: string;
   placeholder?: string;
   placeholder?: string;
   options: CascaderOption[];
   options: CascaderOption[];
+  /** Changes the value for every selection, including branch nodes. Defaults to true. */
+  changeOnSelect?: boolean;
   onSelect(val: string): void;
   onSelect(val: string): void;
   /** Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.*/
   /** Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.*/
   width?: number;
   width?: number;
@@ -69,6 +71,8 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
     };
     };
   }
   }
 
 
+  static defaultProps = { changeOnSelect: true };
+
   flattenOptions = (options: CascaderOption[], optionPath: CascaderOption[] = []) => {
   flattenOptions = (options: CascaderOption[], optionPath: CascaderOption[] = []) => {
     let selectOptions: Array<SelectableValue<string[]>> = [];
     let selectOptions: Array<SelectableValue<string[]>> = [];
     for (const option of options) {
     for (const option of options) {
@@ -174,7 +178,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
   };
   };
 
 
   render() {
   render() {
-    const { allowCustomValue, placeholder, width } = this.props;
+    const { allowCustomValue, placeholder, width, changeOnSelect } = this.props;
     const { focusCascade, isSearching, searchableOptions, rcValue, activeLabel } = this.state;
     const { focusCascade, isSearching, searchableOptions, rcValue, activeLabel } = this.state;
 
 
     return (
     return (
@@ -195,7 +199,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
           <RCCascader
           <RCCascader
             onChange={onChangeCascader(this.onChange)}
             onChange={onChangeCascader(this.onChange)}
             options={this.props.options}
             options={this.props.options}
-            changeOnSelect
+            changeOnSelect={changeOnSelect}
             value={rcValue.value}
             value={rcValue.value}
             fieldNames={{ label: 'label', value: 'value', children: 'items' }}
             fieldNames={{ label: 'label', value: 'value', children: 'items' }}
             expandIcon={null}
             expandIcon={null}

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

@@ -56,6 +56,7 @@ export class UnitPicker extends PureComponent<Props> {
         width={width}
         width={width}
         initialValue={current && current.label}
         initialValue={current && current.label}
         allowCustomValue
         allowCustomValue
+        changeOnSelect={false}
         formatCreateLabel={formatCreateLabel}
         formatCreateLabel={formatCreateLabel}
         options={groupOptions as CascaderOption[]}
         options={groupOptions as CascaderOption[]}
         placeholder="Choose"
         placeholder="Choose"