ButtonCascader: Fix error in Explore (#21585)

* Add children and remove nullified icon

* Revert data format with children

* Update test

* Revert styles

* Update types

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

@@ -29,5 +29,9 @@ const getKnobs = () => {
 
 export const simple = () => {
   const { disabled, text, options } = getKnobs();
-  return <ButtonCascader disabled={disabled} options={options} value={['A']} expandIcon={null} buttonText={text} />;
+  return (
+    <ButtonCascader disabled={disabled} options={options} value={['A']}>
+      {text}
+    </ButtonCascader>
+  );
 };

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Button } from '../Forms/Button';
 import { Icon } from '../Icon/Icon';
 
 // @ts-ignore
@@ -8,10 +7,10 @@ import { CascaderOption } from '../Cascader/Cascader';
 
 export interface ButtonCascaderProps {
   options: CascaderOption[];
-  buttonText: string;
+  children: string;
   disabled?: boolean;
-  expandIcon?: React.ReactNode;
   value?: string[];
+  fieldNames?: { label: string; value: string; children: string };
 
   loadData?: (selectedOptions: CascaderOption[]) => void;
   onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;
@@ -19,9 +18,9 @@ export interface ButtonCascaderProps {
 }
 
 export const ButtonCascader: React.FC<ButtonCascaderProps> = props => (
-  <RCCascader {...props} fieldNames={{ label: 'label', value: 'value', children: 'items' }}>
+  <RCCascader {...props} expandIcon={null}>
-    <Button variant="secondary" disabled={props.disabled}>
+    <button className="gf-form-label gf-form-label--btn" disabled={props.disabled}>
-      {props.buttonText} <Icon name="caret-down" />
+      {props.children} <Icon name="caret-down" />
-    </Button>
+    </button>
   </RCCascader>
 );

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

@@ -32,6 +32,7 @@ export interface CascaderOption {
   items?: CascaderOption[];
   disabled?: boolean;
   title?: string;
+  children?: CascaderOption[];
 }
 
 const disableDivFocus = css(`
@@ -186,6 +187,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
             onBlur={this.onBlurCascade}
             value={rcValue}
             fieldNames={{ label: 'label', value: 'value', children: 'items' }}
+            expandIcon={null}
           >
             <div className={disableDivFocus}>
               <Input

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

@@ -135,13 +135,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">
           <ButtonCascader
-            buttonText={cascadeText}
             options={measurements}
             disabled={!hasMeasurement}
             value={[measurement, field]}
             onChange={this.onMeasurementsChange}
-            expandIcon={null}
+          >
-          />
+            {cascadeText}
+          </ButtonCascader>
         </div>
         <div className="flex-shrink-1 flex-flow-column-nowrap">
           {measurement && (

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

@@ -151,12 +151,12 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
             <ButtonCascader
               options={logLabelOptions || []}
               disabled={buttonDisabled}
-              buttonText={chooserText}
               onChange={this.onChangeLogLabels}
               loadData={onLoadOptions}
-              expandIcon={null}
               onPopupVisibleChange={isVisible => isVisible && onLabelsRefresh && onLabelsRefresh()}
-            />
+            >
+              {chooserText}
+            </ButtonCascader>
           </div>
           <div className="gf-form gf-form--grow">
             <QueryField

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

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

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

@@ -52,7 +52,7 @@ export function groupMetricsByPrefix(metrics: string[], metadata?: PromMetricsMe
   const rulesOption = {
     label: 'Recording rules',
     value: RECORDING_RULES_GROUP,
-    items: ruleNames
+    children: 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 {
-          items: children,
+          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].items.length === 0) {
+      if (selectedOptions[0].children.length === 0) {
         query = selectedOptions[0].value;
       } else {
         // Ignore click on group
@@ -254,7 +254,10 @@ 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, items: histogramOptions, isLeaf: false }, ...metricsByPrefix]
+        ? [
+            { label: 'Histograms', value: HISTOGRAM_GROUP, children: histogramOptions, isLeaf: false },
+            ...metricsByPrefix,
+          ]
         : metricsByPrefix;
 
     // Hint for big disabled lookups
@@ -299,13 +302,9 @@ 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">
-            <ButtonCascader
+            <ButtonCascader options={metricsOptions} disabled={buttonDisabled} onChange={this.onChangeMetrics}>
-              options={metricsOptions}
+              {chooserText}
-              buttonText={chooserText}
+            </ButtonCascader>
-              disabled={buttonDisabled}
-              onChange={this.onChangeMetrics}
-              expandIcon={null}
-            />
           </div>
           <div className="gf-form gf-form--grow flex-shrink-1">
             <QueryField