Add component: Cascader (#21410)

* Rename old cascader

* Change name of old cascader

* Add basic cascader without search

* Add basic cascader without search

* Flatten options to make it searchable

* Add regex search and make backspace work

* Add barebone search without styles

* Add SearchResult list

* Add search navigation

* Rewrite of cascader and add some things to SelectBase

* Make SelectBase controlllable

* Cleanup

* Add initial value functionality

* Add onblur to hand caret direction

* New storyboom format for ButtonCascader

* Add knobs to story

* Add story and docs for UnitPicker

* Make UnitPicker use Cascader

* Fix backspace issue and empty value

* Fix backspace issue for real

* Remove unused code

* Fix focus issue

* Change children to items and remove ButtonCascaderProps

* Remove local CascaderOption

* Fix failed test

* Revert UnitPicker changes and change format for ButtonCascader

* Fix failing tests

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ExploreQueryFieldProps } from '@grafana/data';
-import { Cascader, CascaderOption } from '@grafana/ui';
+import { ButtonCascader, CascaderOption } from '@grafana/ui';
 
 import InfluxQueryModel from '../influx_query_model';
 import { AdHocFilterField, KeyValuePair } from 'app/features/explore/AdHocFilterField';
@@ -75,7 +75,7 @@ export class InfluxLogsQueryField extends React.PureComponent<Props, State> {
         measurements.push({
           label: measurementObj.text,
           value: measurementObj.text,
-          children: fields,
+          items: fields,
         });
       }
       this.setState({ measurements });
@@ -134,7 +134,7 @@ export class InfluxLogsQueryField extends React.PureComponent<Props, State> {
     return (
       <div className="gf-form-inline gf-form-inline--nowrap">
         <div className="gf-form flex-shrink-0">
-          <Cascader
+          <ButtonCascader
             buttonText={cascadeText}
             options={measurements}
             disabled={!hasMeasurement}

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

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import {
-  Cascader,
+  ButtonCascader,
   CascaderOption,
   SlatePrism,
   TypeaheadOutput,
@@ -148,7 +148,7 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
       <>
         <div className="gf-form-inline">
           <div className="gf-form">
-            <Cascader
+            <ButtonCascader
               options={logLabelOptions || []}
               disabled={buttonDisabled}
               buttonText={chooserText}

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

@@ -9,7 +9,7 @@ describe('groupMetricsByPrefix()', () => {
     expect(groupMetricsByPrefix(['foo_metric'])).toMatchObject([
       {
         value: 'foo',
-        children: [
+        items: [
           {
             value: 'foo_metric',
           },
@@ -22,7 +22,7 @@ describe('groupMetricsByPrefix()', () => {
     expect(groupMetricsByPrefix(['foo_metric'], { foo_metric: [{ type: 'TYPE', help: 'my help' }] })).toMatchObject([
       {
         value: 'foo',
-        children: [
+        items: [
           {
             value: 'foo_metric',
             title: 'foo_metric\nTYPE\nmy help',
@@ -44,7 +44,7 @@ describe('groupMetricsByPrefix()', () => {
     expect(groupMetricsByPrefix([':foo_metric:'])).toMatchObject([
       {
         value: RECORDING_RULES_GROUP,
-        children: [
+        items: [
           {
             value: ':foo_metric:',
           },

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

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Plugin } from 'slate';
 import {
-  Cascader,
+  ButtonCascader,
   CascaderOption,
   SlatePrism,
   TypeaheadInput,
@@ -52,7 +52,7 @@ export function groupMetricsByPrefix(metrics: string[], metadata?: PromMetricsMe
   const rulesOption = {
     label: 'Recording rules',
     value: RECORDING_RULES_GROUP,
-    children: ruleNames
+    items: ruleNames
       .slice()
       .sort()
       .map(name => ({ label: name, value: name })),
@@ -69,7 +69,7 @@ export function groupMetricsByPrefix(metrics: string[], metadata?: PromMetricsMe
         const prefixIsMetric = metricsForPrefix.length === 1 && metricsForPrefix[0] === prefix;
         const children = prefixIsMetric ? [] : metricsForPrefix.sort().map(m => addMetricsMetadata(m, metadata));
         return {
-          children,
+          items: children,
           label: prefix,
           value: prefix,
         };
@@ -198,7 +198,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
   onChangeMetrics = (values: string[], selectedOptions: CascaderOption[]) => {
     let query;
     if (selectedOptions.length === 1) {
-      if (selectedOptions[0].children.length === 0) {
+      if (selectedOptions[0].items.length === 0) {
         query = selectedOptions[0].value;
       } else {
         // Ignore click on group
@@ -254,10 +254,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
     const histogramOptions = histogramMetrics.map((hm: any) => ({ label: hm, value: hm }));
     const metricsOptions =
       histogramMetrics.length > 0
-        ? [
-            { label: 'Histograms', value: HISTOGRAM_GROUP, children: histogramOptions, isLeaf: false },
-            ...metricsByPrefix,
-          ]
+        ? [{ label: 'Histograms', value: HISTOGRAM_GROUP, items: histogramOptions, isLeaf: false }, ...metricsByPrefix]
         : metricsByPrefix;
 
     // Hint for big disabled lookups
@@ -302,7 +299,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
       <>
         <div className="gf-form-inline gf-form-inline--nowrap flex-grow-1">
           <div className="gf-form flex-shrink-0">
-            <Cascader
+            <ButtonCascader
               options={metricsOptions}
               buttonText={chooserText}
               disabled={buttonDisabled}