Chore: Move and wrap Cascader component to @grafana/ui (#20246)

* Chore: Move and wrap Cascader component to @grafana/ui
Closes #19042

* Removes unneeded props from interface and removes rc-trigger

* Removes more unneeded props

packages/grafana-ui/package.json

@@ -39,6 +39,7 @@
     "lodash": "4.17.15",
     "moment": "2.24.0",
     "papaparse": "4.6.3",
+    "rc-cascader": "0.17.5",
     "rc-drawer": "3.0.2",
     "rc-time-picker": "^3.7.2",
     "react": "16.8.6",

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { text, boolean, object } from '@storybook/addon-knobs';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { Cascader } from './Cascader';
+
+const getKnobs = () => {
+  return {
+    disabled: boolean('Disabled', false),
+    text: text('Button Text', 'Click me!'),
+    options: object('Options', [
+      { label: 'A', value: 'A', children: [{ label: 'B', value: 'B' }, { label: 'C', value: 'C' }] },
+      { label: 'D', value: 'D' },
+    ]),
+  };
+};
+
+const CascaderStories = storiesOf('UI/Cascader', module);
+
+CascaderStories.addDecorator(withCenteredStory);
+
+CascaderStories.add('default', () => {
+  const { disabled, text, options } = getKnobs();
+  return <Cascader disabled={disabled} options={options} value={['A']} expandIcon={null} buttonText={text} />;
+});

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

@@ -0,0 +1,32 @@
+import React from 'react';
+
+// @ts-ignore
+import RCCascader from 'rc-cascader';
+
+export interface CascaderOption {
+  label: string;
+  value: string;
+
+  children?: CascaderOption[];
+  disabled?: boolean;
+}
+
+export interface CascaderProps {
+  options: CascaderOption[];
+  buttonText: string;
+  disabled?: boolean;
+  expandIcon?: React.ReactNode;
+  value?: string[];
+
+  loadData?: (selectedOptions: CascaderOption[]) => void;
+  onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;
+  onPopupVisibleChange?: (visible: boolean) => void;
+}
+
+export const Cascader: React.FC<CascaderProps> = props => (
+  <RCCascader {...props}>
+    <button className="gf-form-label gf-form-label--btn" disabled={props.disabled}>
+      {props.buttonText} <i className="fa fa-caret-down" />
+    </button>
+  </RCCascader>
+);

packages/grafana-ui/src/components/Cascader/_Cascader.scss

@@ -0,0 +1,190 @@
+.rc-cascader {
+  font-size: 12px;
+
+  &-menus {
+    font-size: 12px;
+    overflow: hidden;
+    background: $panel-bg;
+    position: absolute;
+    border: $panel-border;
+    border-radius: $border-radius;
+    box-shadow: $typeahead-shadow;
+    white-space: nowrap;
+
+    &-hidden {
+      display: none;
+    }
+
+    &.slide-up-enter,
+    &.slide-up-appear {
+      animation-duration: 0.3s;
+      animation-fill-mode: both;
+      transform-origin: 0 0;
+      opacity: 0;
+      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+      animation-play-state: paused;
+    }
+
+    &.slide-up-enter.slide-up-enter-active.rc-cascader-menus-placement,
+    &.slide-up-appear.slide-up-appear-active.rc-cascader-menus-placement {
+      &-bottomLeft {
+        animation-name: SlideUpIn;
+        animation-play-state: running;
+      }
+
+      &-topLeft {
+        animation-name: SlideDownIn;
+        animation-play-state: running;
+      }
+    }
+
+    &.slide-up-leave {
+      animation-duration: 0.3s;
+      animation-fill-mode: both;
+      transform-origin: 0 0;
+      opacity: 1;
+      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+      animation-play-state: paused;
+
+      &.slide-up-leave-active.rc-cascader-menus-placement {
+        &-bottomLeft {
+          animation-name: SlideUpOut;
+          animation-play-state: running;
+        }
+
+        &-topLeft {
+          animation-name: SlideDownOut;
+          animation-play-state: running;
+        }
+      }
+    }
+  }
+
+  &-menu {
+    display: inline-block;
+    /* width: 100px; */
+    max-width: 50vw;
+    height: 192px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border-right: $panel-border;
+    overflow: auto;
+
+    &:last-child {
+      border-right: 0;
+    }
+
+    &-item {
+      height: 32px;
+      line-height: 32px;
+      padding: 0 2.5em 0 16px;
+      cursor: pointer;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: all 0.3s ease;
+      position: relative;
+
+      &:hover {
+        background: $typeahead-selected-bg;
+      }
+
+      &-disabled {
+        cursor: not-allowed;
+        color: $text-color-weak;
+
+        &:hover {
+          background: transparent;
+        }
+
+        &:after {
+          position: absolute;
+          right: 12px;
+          content: 'loading';
+          color: $text-color-weak;
+          font-style: italic;
+        }
+      }
+
+      &-active {
+        color: $typeahead-selected-color;
+        background: $typeahead-selected-bg;
+
+        &:hover {
+          color: $typeahead-selected-color;
+          background: $typeahead-selected-bg;
+        }
+      }
+
+      &-expand {
+        position: relative;
+
+        &:after {
+          content: '>';
+          font-size: 12px;
+          color: $text-color-weak;
+          position: absolute;
+          right: 16px;
+          line-height: 32px;
+        }
+      }
+    }
+  }
+}
+
+@keyframes SlideUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0.8);
+  }
+
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes SlideUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0.8);
+  }
+}
+
+@keyframes SlideDownIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 100%;
+    transform: scaleY(0.8);
+  }
+
+  100% {
+    opacity: 1;
+    transform-origin: 0% 100%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes SlideDownOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 100%;
+    transform: scaleY(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform-origin: 0% 100%;
+    transform: scaleY(0.8);
+  }
+}

packages/grafana-ui/src/components/index.scss

@@ -1,18 +1,19 @@
+@import 'BarGauge/BarGauge';
+@import 'Cascader/Cascader';
+@import 'ColorPicker/ColorPicker';
 @import 'CustomScrollbar/CustomScrollbar';
 @import 'DeleteButton/DeleteButton';
-@import 'ThresholdsEditor/ThresholdsEditor';
-@import 'Table/Table';
-@import 'Table/TableInputCSV';
-@import 'Tooltip/Tooltip';
-@import 'Select/Select';
-@import 'PanelOptionsGroup/PanelOptionsGroup';
-@import 'PanelOptionsGrid/PanelOptionsGrid';
-@import 'ColorPicker/ColorPicker';
-@import 'ValueMappingsEditor/ValueMappingsEditor';
+@import 'Drawer/Drawer';
 @import 'EmptySearchResult/EmptySearchResult';
 @import 'FormField/FormField';
-@import 'BarGauge/BarGauge';
+@import 'PanelOptionsGrid/PanelOptionsGrid';
+@import 'PanelOptionsGroup/PanelOptionsGroup';
 @import 'RefreshPicker/RefreshPicker';
-@import 'TimePicker/TimePicker';
+@import 'Select/Select';
+@import 'Table/Table';
+@import 'Table/TableInputCSV';
+@import 'ThresholdsEditor/ThresholdsEditor';
 @import 'TimePicker/TimeOfDayPicker';
-@import 'Drawer/Drawer';
+@import 'TimePicker/TimePicker';
+@import 'Tooltip/Tooltip';
+@import 'ValueMappingsEditor/ValueMappingsEditor';

packages/grafana-ui/src/components/index.ts

@@ -13,6 +13,7 @@ export { IndicatorsContainer } from './Select/IndicatorsContainer';
 export { NoOptionsMessage } from './Select/NoOptionsMessage';
 export { default as resetSelectStyles } from './Select/resetSelectStyles';
 export { ButtonSelect } from './Select/ButtonSelect';
+export { Cascader, CascaderOption } from './Cascader/Cascader';
 
 // Forms
 export { FormLabel } from './FormLabel/FormLabel';

public/app/plugins/datasource/influxdb/components/InfluxLogsQueryField.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ExploreQueryFieldProps } from '@grafana/data';
-// @ts-ignore
-import Cascader from 'rc-cascader';
+import { Cascader, CascaderOption } from '@grafana/ui';
 
 import InfluxQueryModel from '../influx_query_model';
 import { AdHocFilterField, KeyValuePair } from 'app/features/explore/AdHocFilterField';
@@ -9,7 +8,6 @@ import { TemplateSrv } from 'app/features/templating/template_srv';
 import InfluxDatasource from '../datasource';
 import { InfluxQueryBuilder } from '../query_builder';
 import { InfluxQuery, InfluxOptions } from '../types';
-import { CascaderOption } from '../../loki/components/LokiQueryFieldForm';
 
 export interface Props extends ExploreQueryFieldProps<InfluxDatasource, InfluxQuery, InfluxOptions> {}
 
@@ -139,15 +137,13 @@ export class InfluxLogsQueryField extends React.PureComponent<Props, State> {
       <div className="gf-form-inline gf-form-inline--nowrap">
         <div className="gf-form flex-shrink-0">
           <Cascader
+            buttonText={cascadeText}
             options={measurements}
+            disabled={!hasMeasurement}
             value={[measurement, field]}
             onChange={this.onMeasurementsChange}
             expandIcon={null}
-          >
-            <button className="gf-form-label gf-form-label--btn" disabled={!hasMeasurement}>
-              {cascadeText} <i className="fa fa-caret-down" />
-            </button>
-          </Cascader>
+          />
         </div>
         <div className="flex-shrink-1 flex-flow-column-nowrap">
           {measurement && (

public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx

@@ -1,9 +1,16 @@
 // Libraries
 import React from 'react';
-// @ts-ignore
-import Cascader from 'rc-cascader';
 
-import { SlatePrism, TypeaheadOutput, SuggestionsState, QueryField, TypeaheadInput, BracesPlugin } from '@grafana/ui';
+import {
+  Cascader,
+  CascaderOption,
+  SlatePrism,
+  TypeaheadOutput,
+  SuggestionsState,
+  QueryField,
+  TypeaheadInput,
+  BracesPlugin,
+} from '@grafana/ui';
 
 // Utils & Services
 // dom also includes Element polyfills
@@ -54,17 +61,10 @@ function willApplySuggestion(suggestion: string, { typeaheadContext, typeaheadTe
   return suggestion;
 }
 
-export interface CascaderOption {
-  label: string;
-  value: string;
-  children?: CascaderOption[];
-  disabled?: boolean;
-}
-
 export interface LokiQueryFieldFormProps extends ExploreQueryFieldProps<LokiDatasource, LokiQuery> {
   history: LokiHistoryItem[];
   syntax: Grammar;
-  logLabelOptions: any[];
+  logLabelOptions: CascaderOption[];
   syntaxLoaded: boolean;
   absoluteRange: AbsoluteTimeRange;
   onLoadOptions: (selectedOptions: CascaderOption[]) => void;
@@ -150,19 +150,13 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
           <div className="gf-form">
             <Cascader
               options={logLabelOptions || []}
+              disabled={buttonDisabled}
+              buttonText={chooserText}
               onChange={this.onChangeLogLabels}
               loadData={onLoadOptions}
               expandIcon={null}
-              onPopupVisibleChange={(isVisible: boolean) => {
-                if (isVisible && onLabelsRefresh) {
-                  onLabelsRefresh();
-                }
-              }}
-            >
-              <button className="gf-form-label gf-form-label--btn" disabled={buttonDisabled}>
-                {chooserText} <i className="fa fa-caret-down" />
-              </button>
-            </Cascader>
+              onPopupVisibleChange={isVisible => isVisible && onLabelsRefresh && onLabelsRefresh()}
+            />
           </div>
           <div className="gf-form gf-form--grow">
             <QueryField

public/app/plugins/datasource/loki/components/useLokiLabels.ts

@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 import { AbsoluteTimeRange } from '@grafana/data';
+import { CascaderOption } from '@grafana/ui';
 
 import LokiLanguageProvider from 'app/plugins/datasource/loki/language_provider';
-import { CascaderOption } from 'app/plugins/datasource/loki/components/LokiQueryFieldForm';
 import { useRefMounted } from 'app/core/hooks/useRefMounted';
 
 /**

public/app/plugins/datasource/loki/components/useLokiSyntax.test.ts

@@ -1,10 +1,10 @@
 import { renderHook, act } from 'react-hooks-testing-library';
 import { AbsoluteTimeRange } from '@grafana/data';
+import { CascaderOption } from '@grafana/ui';
 
 import LanguageProvider from 'app/plugins/datasource/loki/language_provider';
 
 import { useLokiSyntax } from './useLokiSyntax';
-import { CascaderOption } from 'app/plugins/datasource/loki/components/LokiQueryFieldForm';
 import { makeMockLokiDatasource } from '../mocks';
 
 describe('useLokiSyntax hook', () => {

public/app/plugins/datasource/loki/components/useLokiSyntax.ts

@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react';
 import Prism from 'prismjs';
 import { AbsoluteTimeRange } from '@grafana/data';
+import { CascaderOption } from '@grafana/ui';
 import LokiLanguageProvider from 'app/plugins/datasource/loki/language_provider';
 import { useLokiLabels } from 'app/plugins/datasource/loki/components/useLokiLabels';
-import { CascaderOption } from 'app/plugins/datasource/loki/components/LokiQueryFieldForm';
 import { useRefMounted } from 'app/core/hooks/useRefMounted';
 
 const PRISM_SYNTAX = 'promql';

public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

@@ -1,10 +1,16 @@
 import _ from 'lodash';
 import React from 'react';
-// @ts-ignore
-import Cascader from 'rc-cascader';
 
 import { Plugin } from 'slate';
-import { SlatePrism, TypeaheadInput, TypeaheadOutput, QueryField, BracesPlugin } from '@grafana/ui';
+import {
+  Cascader,
+  CascaderOption,
+  SlatePrism,
+  TypeaheadInput,
+  TypeaheadOutput,
+  QueryField,
+  BracesPlugin,
+} from '@grafana/ui';
 
 import Prism from 'prismjs';
 
@@ -93,13 +99,6 @@ export function willApplySuggestion(suggestion: string, { typeaheadContext, type
   return suggestion;
 }
 
-interface CascaderOption {
-  label: string;
-  value: string;
-  children?: CascaderOption[];
-  disabled?: boolean;
-}
-
 interface PromQueryFieldProps extends ExploreQueryFieldProps<PrometheusDatasource, PromQuery, PromOptions> {
   history: Array<HistoryItem<PromQuery>>;
 }
@@ -284,11 +283,13 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
       <>
         <div className="gf-form-inline gf-form-inline--nowrap">
           <div className="gf-form flex-shrink-0">
-            <Cascader options={metricsOptions} onChange={this.onChangeMetrics} expandIcon={null}>
-              <button className="gf-form-label gf-form-label--btn" disabled={buttonDisabled}>
-                {chooserText} <i className="fa fa-caret-down" />
-              </button>
-            </Cascader>
+            <Cascader
+              options={metricsOptions}
+              buttonText={chooserText}
+              disabled={buttonDisabled}
+              onChange={this.onChangeMetrics}
+              expandIcon={null}
+            />
           </div>
           <div className="gf-form gf-form--grow flex-shrink-1">
             <QueryField

public/sass/_grafana.scss

@@ -1,9 +1,6 @@
 // DEPENDENCIES
 @import '../../node_modules/react-table/react-table.css';
 
-// VENDOR
-@import '../vendor/css/rc-cascader.scss';
-
 // MIXINS
 @import 'mixins/mixins';
 @import 'mixins/animations';

public/vendor/css/rc-cascader.scss

@@ -1,160 +0,0 @@
-.rc-cascader {
-  font-size: 12px;
-}
-.rc-cascader-menus {
-  font-size: 12px;
-  overflow: hidden;
-  background: $panel-bg;
-  position: absolute;
-  border: $panel-border;
-  border-radius: $border-radius;
-  box-shadow: $typeahead-shadow;
-  white-space: nowrap;
-}
-.rc-cascader-menus-hidden {
-  display: none;
-}
-.rc-cascader-menus.slide-up-enter,
-.rc-cascader-menus.slide-up-appear {
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-  transform-origin: 0 0;
-  opacity: 0;
-  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
-  animation-play-state: paused;
-}
-.rc-cascader-menus.slide-up-leave {
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-  transform-origin: 0 0;
-  opacity: 1;
-  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
-  animation-play-state: paused;
-}
-.rc-cascader-menus.slide-up-enter.slide-up-enter-active.rc-cascader-menus-placement-bottomLeft,
-.rc-cascader-menus.slide-up-appear.slide-up-appear-active.rc-cascader-menus-placement-bottomLeft {
-  animation-name: SlideUpIn;
-  animation-play-state: running;
-}
-.rc-cascader-menus.slide-up-enter.slide-up-enter-active.rc-cascader-menus-placement-topLeft,
-.rc-cascader-menus.slide-up-appear.slide-up-appear-active.rc-cascader-menus-placement-topLeft {
-  animation-name: SlideDownIn;
-  animation-play-state: running;
-}
-.rc-cascader-menus.slide-up-leave.slide-up-leave-active.rc-cascader-menus-placement-bottomLeft {
-  animation-name: SlideUpOut;
-  animation-play-state: running;
-}
-.rc-cascader-menus.slide-up-leave.slide-up-leave-active.rc-cascader-menus-placement-topLeft {
-  animation-name: SlideDownOut;
-  animation-play-state: running;
-}
-.rc-cascader-menu {
-  display: inline-block;
-  /* width: 100px; */
-  max-width: 50vw;
-  height: 192px;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  border-right: $panel-border;
-  overflow: auto;
-}
-.rc-cascader-menu:last-child {
-  border-right: 0;
-}
-.rc-cascader-menu-item {
-  height: 32px;
-  line-height: 32px;
-  padding: 0 2.5em 0 16px;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  transition: all 0.3s ease;
-  position: relative;
-}
-.rc-cascader-menu-item:hover {
-  background: $typeahead-selected-bg;
-}
-.rc-cascader-menu-item-disabled {
-  cursor: not-allowed;
-  color: $text-color-weak;
-}
-.rc-cascader-menu-item-disabled:hover {
-  background: transparent;
-}
-.rc-cascader-menu-item-loading:after {
-  position: absolute;
-  right: 12px;
-  content: 'loading';
-  color: $text-color-weak;
-  font-style: italic;
-}
-.rc-cascader-menu-item-active {
-  color: $typeahead-selected-color;
-  background: $typeahead-selected-bg;
-}
-.rc-cascader-menu-item-active:hover {
-  color: $typeahead-selected-color;
-  background: $typeahead-selected-bg;
-}
-.rc-cascader-menu-item-expand {
-  position: relative;
-}
-.rc-cascader-menu-item-expand:after {
-  content: '>';
-  font-size: 12px;
-  color: $text-color-weak;
-  position: absolute;
-  right: 16px;
-  line-height: 32px;
-}
-@keyframes SlideUpIn {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0.8);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-  }
-}
-@keyframes SlideUpOut {
-  0% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0.8);
-  }
-}
-@keyframes SlideDownIn {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 100%;
-    transform: scaleY(0.8);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 0% 100%;
-    transform: scaleY(1);
-  }
-}
-@keyframes SlideDownOut {
-  0% {
-    opacity: 1;
-    transform-origin: 0% 100%;
-    transform: scaleY(1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 0% 100%;
-    transform: scaleY(0.8);
-  }
-}