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

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