From 6dad4cce07471a1547e2e5a4fdee55e36f617ea5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 29 Jan 2019 08:14:07 +0100
Subject: [PATCH] Updated Explore query styles to align them to other query
 editor to make them fit in better

---
 public/app/features/explore/QueryRow.tsx      | 26 ++++++-----
 .../loki/components/LokiQueryField.tsx        | 44 ++++++++++---------
 .../prometheus/components/PromQueryField.tsx  | 44 ++++++++++---------
 public/sass/components/_gf-form.scss          |  6 +++
 public/sass/components/_slate_editor.scss     |  3 +-
 public/sass/pages/_explore.scss               | 15 ++-----
 6 files changed, 75 insertions(+), 63 deletions(-)

diff --git a/public/app/features/explore/QueryRow.tsx b/public/app/features/explore/QueryRow.tsx
index 3bc2b556a63..682bb22d348 100644
--- a/public/app/features/explore/QueryRow.tsx
+++ b/public/app/features/explore/QueryRow.tsx
@@ -131,16 +131,22 @@ export class QueryRow extends PureComponent<QueryRowProps> {
             />
           )}
         </div>
-        <div className="query-row-tools">
-          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickClearButton}>
-            <i className="fa fa-times" />
-          </button>
-          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickAddButton}>
-            <i className="fa fa-plus" />
-          </button>
-          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickRemoveButton}>
-            <i className="fa fa-minus" />
-          </button>
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <button className="gf-form-label gf-form-label--btn" onClick={this.onClickClearButton}>
+              <i className="fa fa-times" />
+            </button>
+          </div>
+          <div className="gf-form">
+            <button className="gf-form-label gf-form-label--btn" onClick={this.onClickAddButton}>
+              <i className="fa fa-plus" />
+            </button>
+          </div>
+          <div className="gf-form">
+            <button className="gf-form-label gf-form-label--btn" onClick={this.onClickRemoveButton}>
+              <i className="fa fa-minus" />
+            </button>
+          </div>
         </div>
       </div>
     );
diff --git a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
index febb322acca..1c4243375fe 100644
--- a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
@@ -212,26 +212,30 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
     const chooserText = getChooserText(syntaxLoaded, hasLogLabels);
 
     return (
-      <div className="prom-query-field">
-        <div className="prom-query-field-tools">
-          <Cascader options={logLabelOptions} onChange={this.onChangeLogLabels} loadData={this.loadOptions}>
-            <button className="btn navbar-button navbar-button--tight" disabled={!syntaxLoaded}>
-              {chooserText}
-            </button>
-          </Cascader>
+      <>
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <Cascader options={logLabelOptions} onChange={this.onChangeLogLabels} loadData={this.loadOptions}>
+              <button className="gf-form-label gf-form-label--btn" disabled={!syntaxLoaded}>
+                {chooserText} <i className="fa fa-caret-down" />
+              </button>
+            </Cascader>
+          </div>
+          <div className="gf-form gf-form--grow">
+            <QueryField
+              additionalPlugins={this.plugins}
+              cleanText={cleanText}
+              initialQuery={initialQuery.expr}
+              onTypeahead={this.onTypeahead}
+              onWillApplySuggestion={willApplySuggestion}
+              onValueChanged={this.onChangeQuery}
+              placeholder="Enter a Loki query"
+              portalOrigin="loki"
+              syntaxLoaded={syntaxLoaded}
+            />
+          </div>
         </div>
-        <div className="prom-query-field-wrapper">
-          <QueryField
-            additionalPlugins={this.plugins}
-            cleanText={cleanText}
-            initialQuery={initialQuery.expr}
-            onTypeahead={this.onTypeahead}
-            onWillApplySuggestion={willApplySuggestion}
-            onValueChanged={this.onChangeQuery}
-            placeholder="Enter a Loki query"
-            portalOrigin="loki"
-            syntaxLoaded={syntaxLoaded}
-          />
+        <div>
           {error ? <div className="prom-query-field-info text-error">{error}</div> : null}
           {hint ? (
             <div className="prom-query-field-info text-warning">
@@ -244,7 +248,7 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
             </div>
           ) : null}
         </div>
-      </div>
+      </>
     );
   }
 }
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
index f5b5b311b2a..1c07be0d3ac 100644
--- a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
@@ -235,26 +235,28 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
     const chooserText = syntaxLoaded ? 'Metrics' : 'Loading metrics...';
 
     return (
-      <div className="prom-query-field">
-        <div className="prom-query-field-tools">
-          <Cascader options={metricsOptions} onChange={this.onChangeMetrics}>
-            <button className="btn navbar-button navbar-button--tight" disabled={!syntaxLoaded}>
-              {chooserText}
-            </button>
-          </Cascader>
-        </div>
-        <div className="prom-query-field-wrapper">
-          <QueryField
-            additionalPlugins={this.plugins}
-            cleanText={cleanText}
-            initialQuery={initialQuery.expr}
-            onTypeahead={this.onTypeahead}
-            onWillApplySuggestion={willApplySuggestion}
-            onValueChanged={this.onChangeQuery}
-            placeholder="Enter a PromQL query"
-            portalOrigin="prometheus"
-            syntaxLoaded={syntaxLoaded}
-          />
+      <>
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <Cascader options={metricsOptions} onChange={this.onChangeMetrics}>
+              <button className="gf-form-label gf-form-label--btn" disabled={!syntaxLoaded}>
+                {chooserText} <i className="fa fa-caret-down" />
+              </button>
+            </Cascader>
+          </div>
+          <div className="gf-form gf-form--grow">
+            <QueryField
+              additionalPlugins={this.plugins}
+              cleanText={cleanText}
+              initialQuery={initialQuery.expr}
+              onTypeahead={this.onTypeahead}
+              onWillApplySuggestion={willApplySuggestion}
+              onValueChanged={this.onChangeQuery}
+              placeholder="Enter a PromQL query"
+              portalOrigin="prometheus"
+              syntaxLoaded={syntaxLoaded}
+            />
+          </div>
           {error ? <div className="prom-query-field-info text-error">{error}</div> : null}
           {hint ? (
             <div className="prom-query-field-info text-warning">
@@ -267,7 +269,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
             </div>
           ) : null}
         </div>
-      </div>
+      </>
     );
   }
 }
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index e86b901bb79..b81cccd7ab7 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -129,6 +129,11 @@ $input-border: 1px solid $input-border-color;
 
     &:hover {
       background: $list-item-hover-bg;
+      color: $link-color;
+    }
+
+    .fa-caret-down {
+      padding-left: 4px;
     }
   }
 
@@ -137,6 +142,7 @@ $input-border: 1px solid $input-border-color;
   }
 }
 
+
 .gf-form-label + .gf-form-label {
   margin-right: $gf-form-margin;
 }
diff --git a/public/sass/components/_slate_editor.scss b/public/sass/components/_slate_editor.scss
index 200f102d69a..f8796a8f260 100644
--- a/public/sass/components/_slate_editor.scss
+++ b/public/sass/components/_slate_editor.scss
@@ -8,7 +8,8 @@
 .slate-query-field__wrapper {
   position: relative;
   display: inline-block;
-  padding: 6px 7px 4px;
+  padding: $input-padding-y $input-padding-x;
+  height: $gf-form-input-height;
   width: 100%;
   cursor: text;
   line-height: $line-height-base;
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index dce944dc7b2..151130a69e2 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -322,6 +322,7 @@
 .query-row {
   display: flex;
   position: relative;
+  align-items: flex-start;
 
   & + & {
     margin-top: 0.5rem;
@@ -335,17 +336,17 @@
 .query-row-status {
   position: absolute;
   top: 0;
-  right: 90px;
+  right: 105px;
   z-index: 1015;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  height: 34px;
+  height: $input-height;
 }
 
 .query-row-field {
   margin-right: 3px;
-  width: 100%;
+  flex-grow: 1;
 }
 
 .query-transactions {
@@ -382,14 +383,6 @@
 // Prometheus-specifics, to be extracted to datasource soon
 
 .explore {
-  .prom-query-field {
-    display: flex;
-  }
-
-  .prom-query-field-wrapper {
-    width: 100%;
-  }
-
   .prom-query-field-info {
     margin: 0.25em 0.5em 0.5em;
     display: flex;