DevEnv: update frontend dependencies - rc (#22977)

* DevEnv: updates rc-cascader 0.17.5 -> 1.0.1

* DevEnv: updates rc-cascader 0.17.5 -> 1.0.1 in grafana-ui package

* DevEnv: updates rc-drawer 3.0.2 -> 3.1.3 in grafana-ui package

* DevEnv: updates rc-time-picker 3.7.2 -> 3.7.3 in grafana-ui package

* DevEnv: updates rc-slider 8.7.1 -> 9.2.3 in grafana-ui package

* Fix option mappings

* Some clean up of the code.

* removed unused function.

Co-authored-by: Tobias Skarhed <tobias.skarhed@gmail.com>
Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>

package.json

@@ -245,7 +245,7 @@
     "papaparse": "4.6.3",
     "prismjs": "1.19.0",
     "prop-types": "15.7.2",
-    "rc-cascader": "0.17.5",
+    "rc-cascader": "1.0.1",
     "re-resizable": "^6.2.0",
     "react": "16.12.0",
     "react-dom": "16.12.0",

packages/grafana-ui/package.json

@@ -46,10 +46,10 @@
     "lodash": "4.17.15",
     "moment": "2.24.0",
     "papaparse": "4.6.3",
-    "rc-cascader": "0.17.5",
+    "rc-cascader": "1.0.1",
-    "rc-drawer": "3.0.2",
+    "rc-drawer": "3.1.3",
-    "rc-slider": "8.7.1",
+    "rc-slider": "9.2.3",
-    "rc-time-picker": "^3.7.2",
+    "rc-time-picker": "^3.7.3",
     "react": "16.12.0",
     "react-calendar": "2.19.2",
     "react-color": "2.18.0",

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

@@ -4,6 +4,7 @@ import { Icon } from '../Icon/Icon';
 // @ts-ignore
 import RCCascader from 'rc-cascader';
 import { CascaderOption } from '../Cascader/Cascader';
+import { onChangeCascader, onLoadDataCascader } from '../Cascader/optionMappings';
 
 export interface ButtonCascaderProps {
   options: CascaderOption[];
@@ -17,10 +18,18 @@ export interface ButtonCascaderProps {
   onPopupVisibleChange?: (visible: boolean) => void;
 }
 
-export const ButtonCascader: React.FC<ButtonCascaderProps> = props => (
+export const ButtonCascader: React.FC<ButtonCascaderProps> = props => {
-  <RCCascader {...props} expandIcon={null}>
+  const { onChange, loadData, ...rest } = props;
-    <button className="gf-form-label gf-form-label--btn" disabled={props.disabled}>
+  return (
-      {props.children} <Icon name="caret-down" />
+    <RCCascader
-    </button>
+      onChange={onChangeCascader(onChange)}
-  </RCCascader>
+      loadData={onLoadDataCascader(loadData)}
-);
+      {...rest}
+      expandIcon={null}
+    >
+      <button className="gf-form-label gf-form-label--btn" disabled={props.disabled}>
+        {props.children} <Icon name="caret-down" />
+      </button>
+    </RCCascader>
+  );
+};

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

@@ -57,6 +57,7 @@ export const withCustomValue = () => {
       formatCreateLabel={val => onCreateLabel + val}
       initialValue="Custom Initial Value"
       onSelect={val => console.log(val)}
+      size="md"
     />
   );
 };

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Icon } from '../Icon/Icon';
-// @ts-ignore
 import RCCascader from 'rc-cascader';
 
 import { Select } from '../Forms/Select/Select';
@@ -8,6 +7,7 @@ import { FormInputSize } from '../Forms/types';
 import { Input } from '../Forms/Input/Input';
 import { SelectableValue } from '@grafana/data';
 import { css } from 'emotion';
+import { onChangeCascader } from './optionMappings';
 
 interface CascaderProps {
   /** The seperator between levels in the search */
@@ -32,11 +32,18 @@ interface CascaderState {
 }
 
 export interface CascaderOption {
+  /**
+   *  The value used under the hood
+   */
   value: any;
+  /**
+   *  The label to display in the UI
+   */
   label: string;
   /** Items will be just flattened into the main list of items recursively. */
   items?: CascaderOption[];
   disabled?: boolean;
+  /** Avoid using */
   title?: string;
   /**  Children will be shown in a submenu. Use 'items' instead, as 'children' exist to ensure backwards compatibility.*/
   children?: CascaderOption[];
@@ -104,6 +111,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
   onChange = (value: string[], selectedOptions: CascaderOption[]) => {
     this.setState({
       rcValue: value,
+      focusCascade: true,
       activeLabel: selectedOptions[selectedOptions.length - 1].label,
     });
 
@@ -130,12 +138,6 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
     this.props.onSelect(value);
   };
 
-  onClick = () => {
-    this.setState({
-      focusCascade: true,
-    });
-  };
-
   onBlur = () => {
     this.setState({
       isSearching: false,
@@ -191,12 +193,10 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
           />
         ) : (
           <RCCascader
-            onChange={this.onChange}
+            onChange={onChangeCascader(this.onChange)}
-            onClick={this.onClick}
             options={this.props.options}
-            isFocused={focusCascade}
+            changeOnSelect
-            onBlur={this.onBlurCascade}
+            value={rcValue.value}
-            value={rcValue}
             fieldNames={{ label: 'label', value: 'value', children: 'items' }}
             expandIcon={null}
             // Required, otherwise the portal that the popup is shown in will render under other components
@@ -208,6 +208,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
               <Input
                 size={size}
                 placeholder={placeholder}
+                onBlur={this.onBlurCascade}
                 value={activeLabel}
                 onKeyDown={this.onInputKeyDown}
                 onChange={() => {}}

packages/grafana-ui/src/components/Cascader/optionMappings.ts

@@ -0,0 +1,29 @@
+import { CascaderOption as RCCascaderOption } from 'rc-cascader/lib/Cascader';
+import { CascaderOption } from './Cascader';
+
+type onChangeType = ((values: string[], options: CascaderOption[]) => void) | undefined;
+
+export const onChangeCascader = (onChanged: onChangeType) => (values: string[], options: RCCascaderOption[]) => {
+  if (onChanged) {
+    onChanged(values, fromRCOptions(options));
+  }
+};
+
+type onLoadDataType = ((options: CascaderOption[]) => void) | undefined;
+
+export const onLoadDataCascader = (onLoadData: onLoadDataType) => (options: RCCascaderOption[]) => {
+  if (onLoadData) {
+    onLoadData(fromRCOptions(options));
+  }
+};
+
+const fromRCOptions = (options: RCCascaderOption[]): CascaderOption[] => {
+  return options.map(fromRCOption);
+};
+
+const fromRCOption = (option: RCCascaderOption): CascaderOption => {
+  return {
+    value: option.value ?? '',
+    label: (option.label as unknown) as string,
+  };
+};

yarn.lock

@@ -20092,6 +20092,16 @@ rc-align@^2.4.0:
     prop-types "^15.5.8"
     rc-util "^4.0.4"
 
+rc-align@^3.0.0-rc.0:
+  version "3.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-3.0.0-rc.1.tgz#32d1fac860d12bb85e9b8cafbbdef79f3f537674"
+  integrity sha512-GbofumhCUb7SxP410j/fbtR2M9Zml+eoZSdaliZh6R3NhfEj5zP4jcO3HG3S9C9KIcXQQtd/cwVHkb9Y0KU7Hg==
+  dependencies:
+    classnames "2.x"
+    dom-align "^1.7.0"
+    rc-util "^4.12.0"
+    resize-observer-polyfill "^1.5.1"
+
 rc-animate@2.x:
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/rc-animate/-/rc-animate-2.10.1.tgz#c0c4faab50e55535e903e66f207e49891ba86d94"
@@ -20105,47 +20115,54 @@ rc-animate@2.x:
     rc-util "^4.8.0"
     react-lifecycles-compat "^3.0.4"
 
-rc-cascader@0.17.5:
+rc-animate@^2.10.2:
-  version "0.17.5"
+  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/rc-cascader/-/rc-cascader-0.17.5.tgz#4fde91d23b7608c420263c38eee9c0687f80f7dc"
+  resolved "https://registry.yarnpkg.com/rc-animate/-/rc-animate-2.10.3.tgz#163d5e29281a4ff82d53ee7918eeeac856b756f9"
-  integrity sha512-WYMVcxU0+Lj+xLr4YYH0+yXODumvNXDcVEs5i7L1mtpWwYkubPV/zbQpn+jGKFCIW/hOhjkU4J1db8/P/UKE7A==
+  integrity sha512-A9qQ5Y8BLlM7EhuCO3fWb/dChndlbWtY/P5QvPqBU7h4r5Q2QsvsbpTGgdYZATRDZbTRnJXXfVk9UtlyS7MBLg==
+  dependencies:
+    babel-runtime "6.x"
+    classnames "^2.2.6"
+    css-animation "^1.3.2"
+    prop-types "15.x"
+    raf "^3.4.0"
+    rc-util "^4.15.3"
+    react-lifecycles-compat "^3.0.4"
+
+rc-cascader@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rc-cascader/-/rc-cascader-1.0.1.tgz#770de1e1fa7bd559aabd4d59e525819b8bc809b7"
+  integrity sha512-3mk33+YKJBP1XSrTYbdVLuCC73rUDq5STNALhvua5i8vyIgIxtb5fSl96JdWWq1Oj8tIBoHnCgoEoOYnIXkthQ==
   dependencies:
     array-tree-filter "^2.1.0"
-    prop-types "^15.5.8"
+    rc-trigger "^4.0.0"
-    rc-trigger "^2.2.0"
     rc-util "^4.0.4"
-    react-lifecycles-compat "^3.0.4"
-    shallow-equal "^1.0.0"
     warning "^4.0.1"
 
-rc-drawer@3.0.2:
+rc-drawer@3.1.3:
-  version "3.0.2"
+  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/rc-drawer/-/rc-drawer-3.0.2.tgz#1c42b2b7790040344f8f05f1d132b1ef0e97b783"
+  resolved "https://registry.yarnpkg.com/rc-drawer/-/rc-drawer-3.1.3.tgz#cbcb04d4c07f0b66f2ece11d847f4a1bd80ea0b7"
-  integrity sha512-oPScGXB/8/ov9gEFLxPH8RBv/9jLTZboZtyF/GgrrnCAvbFwUxXdELH6n6XIowmuDKKvTGIMgZdnao0T46Yv3A==
+  integrity sha512-2z+RdxmzXyZde/1OhVMfDR1e/GBswFeWSZ7FS3Fdd0qhgVdpV1wSzILzzxRaT481ItB5hOV+e8pZT07vdJE8kg==
   dependencies:
-    babel-runtime "^6.26.0"
     classnames "^2.2.6"
-    rc-util "^4.11.2"
+    rc-util "^4.16.1"
     react-lifecycles-compat "^3.0.4"
 
-rc-slider@8.7.1:
+rc-slider@9.2.3:
-  version "8.7.1"
+  version "9.2.3"
-  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-8.7.1.tgz#9ed07362dc93489a38e654b21b8122ad70fd3c42"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-9.2.3.tgz#b80f03ada71ef3ec35dfcb67d2e0f87d84ce2781"
-  integrity sha512-WMT5mRFUEcrLWwTxsyS8jYmlaMsTVCZIGENLikHsNv+tE8ThU2lCoPfi/xFNUfJFNFSBFP3MwPez9ZsJmNp13g==
+  integrity sha512-mlERrweLA4KNFvO0dkhQv3Du0Emq7DyAFV6N7jgrAwfUZsX4eB1T1iJWYMtsguHXbMyje+PACAqwsrfhZIN0bQ==
   dependencies:
     babel-runtime "6.x"
     classnames "^2.2.5"
-    prop-types "^15.5.4"
+    rc-tooltip "^4.0.0"
-    rc-tooltip "^3.7.0"
     rc-util "^4.0.4"
-    react-lifecycles-compat "^3.0.4"
     shallowequal "^1.1.0"
     warning "^4.0.3"
 
-rc-time-picker@^3.7.2:
+rc-time-picker@^3.7.3:
-  version "3.7.2"
+  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/rc-time-picker/-/rc-time-picker-3.7.2.tgz#fabe5501adf1374d31a2d3b47f1ba89fc2dc2467"
+  resolved "https://registry.yarnpkg.com/rc-time-picker/-/rc-time-picker-3.7.3.tgz#65a8de904093250ae9c82b02a4905e0f995e23e2"
-  integrity sha512-UVWO9HXGyZoM4I2THlJsEAFcZQz+tYwdcpoHXCEFZsRLz9L2+7vV4EMp9Wa3UrtzMFEt83qSAX/90dCJeKl9sg==
+  integrity sha512-Lv1Mvzp9fRXhXEnRLO4nW6GLNxUkfAZ3RsiIBsWjGjXXvMNjdr4BX/ayElHAFK0DoJqOhm7c5tjmIYpEOwcUXg==
   dependencies:
     classnames "2.x"
     moment "2.x"
@@ -20154,16 +20171,14 @@ rc-time-picker@^3.7.2:
     rc-trigger "^2.2.0"
     react-lifecycles-compat "^3.0.4"
 
-rc-tooltip@^3.7.0:
+rc-tooltip@^4.0.0:
-  version "3.7.3"
+  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-3.7.3.tgz#280aec6afcaa44e8dff0480fbaff9e87fc00aecc"
+  resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-4.0.3.tgz#728b760863643ec2e85827a2e7fb28d961b3b759"
-  integrity sha512-dE2ibukxxkrde7wH9W8ozHKUO4aQnPZ6qBHtrTH9LoO836PjDdiaWO73fgPB05VfJs9FbZdmGPVEbXCeOP99Ww==
+  integrity sha512-HNyBh9/fPdds0DXja8JQX0XTIHmZapB3lLzbdn74aNSxXG1KUkt+GK4X1aOTRY5X9mqm4uUKdeFrn7j273H8gw==
   dependencies:
-    babel-runtime "6.x"
+    rc-trigger "^4.0.0"
-    prop-types "^15.5.8"
-    rc-trigger "^2.2.2"
 
-rc-trigger@^2.2.0, rc-trigger@^2.2.2:
+rc-trigger@^2.2.0:
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-2.6.5.tgz#140a857cf28bd0fa01b9aecb1e26a50a700e9885"
   integrity sha512-m6Cts9hLeZWsTvWnuMm7oElhf+03GOjOLfTuU0QmdB9ZrW7jR2IpI5rpNM7i9MvAAlMAmTx5Zr7g3uu/aMvZAw==
@@ -20176,7 +20191,19 @@ rc-trigger@^2.2.0, rc-trigger@^2.2.2:
     rc-util "^4.4.0"
     react-lifecycles-compat "^3.0.4"
 
-rc-util@^4.0.4, rc-util@^4.11.2, rc-util@^4.4.0, rc-util@^4.8.0:
+rc-trigger@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-4.0.2.tgz#42fe7bdb6a5b34035e20fa9ebfad69ec948b56be"
+  integrity sha512-to5S1NhK10rWHIgQpoQdwIhuDc2Ok4R4/dh5NLrDt6C+gqkohsdBCYiPk97Z+NwGhRU8N+dbf251bivX8DkzQg==
+  dependencies:
+    classnames "^2.2.6"
+    prop-types "15.x"
+    raf "^3.4.1"
+    rc-align "^3.0.0-rc.0"
+    rc-animate "^2.10.2"
+    rc-util "^4.20.0"
+
+rc-util@^4.0.4, rc-util@^4.4.0, rc-util@^4.8.0:
   version "4.13.0"
   resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-4.13.0.tgz#75682e50a934e7d32ada7ee48fc9f5b20fc0143f"
   integrity sha512-rjfPy+afc2n40APHp6GYScXfgwHuUnYLz/4SCEWRaF8CHXKR8xw598LtPA36J3fEXENuMm6liO/CoKBoSrYCDw==
@@ -20187,6 +20214,18 @@ rc-util@^4.0.4, rc-util@^4.11.2, rc-util@^4.4.0, rc-util@^4.8.0:
     react-lifecycles-compat "^3.0.4"
     shallowequal "^0.2.2"
 
+rc-util@^4.12.0, rc-util@^4.15.3, rc-util@^4.16.1, rc-util@^4.20.0:
+  version "4.20.1"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-4.20.1.tgz#a5976eabfc3198ed9b8e79ffb8c53c231db36e77"
+  integrity sha512-EGlDg9KPN0POzmAR2hk9ZyFc3DmJIrXwlC8NoDxJguX2LTINnVqwadLIVauLfYgYISMiFYFrSHiFW+cqUhZ5dA==
+  dependencies:
+    add-dom-event-listener "^1.1.0"
+    babel-runtime "6.x"
+    prop-types "^15.5.10"
+    react-is "^16.12.0"
+    react-lifecycles-compat "^3.0.4"
+    shallowequal "^1.1.0"
+
 rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -22299,7 +22338,7 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallow-equal@^1.0.0, shallow-equal@^1.1.0:
+shallow-equal@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.0.tgz#fd828d2029ff4e19569db7e19e535e94e2d1f5cc"
   integrity sha512-Z21pVxR4cXsfwpMKMhCEIO1PCi5sp7KEp+CmOpBQ+E8GpHwKOw2sEzk7sgblM3d/j4z4gakoWEoPcjK0VJQogA==