From 2f9c2f3886a6a0e73436c2589caa52faab9766e8 Mon Sep 17 00:00:00 2001
From: David <david.kaltschmidt@gmail.com>
Date: Thu, 12 Sep 2019 15:33:16 +0200
Subject: [PATCH] Loki: Fix vertical alignment issue in label selector (#18943)

- upgraded rc-cascader (did not fix the alignment issue)
- Safari seems to default to middle alignment, added override to explore
styles
- added empty expand icon property to satisfy API after upgrade
---
 package.json                                    |  2 +-
 .../components/InfluxLogsQueryField.tsx         |  7 ++++++-
 .../loki/components/LokiQueryFieldForm.tsx      |  1 +
 .../prometheus/components/PromQueryField.tsx    |  2 +-
 public/sass/pages/_explore.scss                 |  8 ++++++--
 yarn.lock                                       | 17 ++++++++++-------
 6 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index a16e5a32732..a6ad0364d5c 100644
--- a/package.json
+++ b/package.json
@@ -221,7 +221,7 @@
     "papaparse": "4.6.3",
     "prismjs": "1.16.0",
     "prop-types": "15.7.2",
-    "rc-cascader": "0.14.0",
+    "rc-cascader": "0.17.5",
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "react-grid-layout": "0.16.6",
diff --git a/public/app/plugins/datasource/influxdb/components/InfluxLogsQueryField.tsx b/public/app/plugins/datasource/influxdb/components/InfluxLogsQueryField.tsx
index 483a5382b37..18df8a43069 100644
--- a/public/app/plugins/datasource/influxdb/components/InfluxLogsQueryField.tsx
+++ b/public/app/plugins/datasource/influxdb/components/InfluxLogsQueryField.tsx
@@ -113,7 +113,12 @@ 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 options={measurements} value={[measurement, field]} onChange={this.onMeasurementsChange}>
+          <Cascader
+            options={measurements}
+            value={[measurement, field]}
+            onChange={this.onMeasurementsChange}
+            expandIcon={null}
+          >
             <button className="gf-form-label gf-form-label--btn">
               {cascadeText} <i className="fa fa-caret-down" />
             </button>
diff --git a/public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx b/public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx
index 070332e249b..57b0b6987f0 100644
--- a/public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx
@@ -165,6 +165,7 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
               options={logLabelOptions}
               onChange={this.onChangeLogLabels}
               loadData={onLoadOptions}
+              expandIcon={null}
               onPopupVisibleChange={(isVisible: boolean) => {
                 if (isVisible && onLabelsRefresh) {
                   onLabelsRefresh();
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
index 8f317799ffb..99eef38bde3 100644
--- a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
@@ -308,7 +308,7 @@ 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}>
+            <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>
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 636871e7897..0018eaa7db3 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -320,8 +320,7 @@
   z-index: inherit;
 }
 
-// React-component cascade fix: show "loading" even though item can expand
-
+// React-component cascade fix: show "loading" when loading children
 .rc-cascader-menu-item-loading:after {
   position: absolute;
   right: 12px;
@@ -330,6 +329,11 @@
   font-style: italic;
 }
 
+// React-component cascade fix: vertical alignment issue with Safari
+.rc-cascader-menu {
+  vertical-align: top;
+}
+
 // TODO Experimental
 
 .cheat-sheet-item {
diff --git a/yarn.lock b/yarn.lock
index 1a4fa4be653..435e9de871f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4081,9 +4081,10 @@ array-reduce@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
 
-array-tree-filter@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/array-tree-filter/-/array-tree-filter-1.0.1.tgz#0a8ad1eefd38ce88858632f9cc0423d7634e4d5d"
+array-tree-filter@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz#873ac00fec83749f255ac8dd083814b4f6329190"
+  integrity sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==
 
 array-union@^1.0.1:
   version "1.0.2"
@@ -14711,14 +14712,16 @@ rc-animate@2.x:
     raf "^3.4.0"
     react-lifecycles-compat "^3.0.4"
 
-rc-cascader@0.14.0:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/rc-cascader/-/rc-cascader-0.14.0.tgz#a956c99896f10883bf63d46fb894d0cb326842a4"
+rc-cascader@0.17.5:
+  version "0.17.5"
+  resolved "https://registry.yarnpkg.com/rc-cascader/-/rc-cascader-0.17.5.tgz#4fde91d23b7608c420263c38eee9c0687f80f7dc"
+  integrity sha512-WYMVcxU0+Lj+xLr4YYH0+yXODumvNXDcVEs5i7L1mtpWwYkubPV/zbQpn+jGKFCIW/hOhjkU4J1db8/P/UKE7A==
   dependencies:
-    array-tree-filter "^1.0.0"
+    array-tree-filter "^2.1.0"
     prop-types "^15.5.8"
     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"