From b0b9158a1ddc49fc6e757d0c7e5edf54b7013822 Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Tue, 26 Jan 2021 13:42:08 +0100
Subject: [PATCH] Grafana/UI: Unit picker should not set a category as unit
 (#30638)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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  | 8 ++++++--
 .../grafana-ui/src/components/UnitPicker/UnitPicker.tsx   | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
index a475bf66be4..15eefa07151 100644
--- a/packages/grafana-ui/src/components/Cascader/Cascader.tsx
+++ b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
@@ -13,6 +13,8 @@ interface CascaderProps {
   separator?: string;
   placeholder?: string;
   options: CascaderOption[];
+  /** Changes the value for every selection, including branch nodes. Defaults to true. */
+  changeOnSelect?: boolean;
   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.*/
   width?: number;
@@ -69,6 +71,8 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
     };
   }
 
+  static defaultProps = { changeOnSelect: true };
+
   flattenOptions = (options: CascaderOption[], optionPath: CascaderOption[] = []) => {
     let selectOptions: Array<SelectableValue<string[]>> = [];
     for (const option of options) {
@@ -174,7 +178,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
   };
 
   render() {
-    const { allowCustomValue, placeholder, width } = this.props;
+    const { allowCustomValue, placeholder, width, changeOnSelect } = this.props;
     const { focusCascade, isSearching, searchableOptions, rcValue, activeLabel } = this.state;
 
     return (
@@ -195,7 +199,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
           <RCCascader
             onChange={onChangeCascader(this.onChange)}
             options={this.props.options}
-            changeOnSelect
+            changeOnSelect={changeOnSelect}
             value={rcValue.value}
             fieldNames={{ label: 'label', value: 'value', children: 'items' }}
             expandIcon={null}
diff --git a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx b/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
index 66738b2b821..bbf1b48a9b8 100644
--- a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
+++ b/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
@@ -56,6 +56,7 @@ export class UnitPicker extends PureComponent<Props> {
         width={width}
         initialValue={current && current.label}
         allowCustomValue
+        changeOnSelect={false}
         formatCreateLabel={formatCreateLabel}
         options={groupOptions as CascaderOption[]}
         placeholder="Choose"