From 16d476d22898b8a599d570107f2d955506d1fb07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 18 Jan 2019 19:22:40 +0100
Subject: [PATCH] Query editor row style update & sass cleanup

---
 .../dashboard/panel_editor/QueryInspector.tsx | 16 +----
 public/sass/components/_query_editor.scss     | 68 +------------------
 2 files changed, 3 insertions(+), 81 deletions(-)

diff --git a/public/app/features/dashboard/panel_editor/QueryInspector.tsx b/public/app/features/dashboard/panel_editor/QueryInspector.tsx
index 8e490f6b622..25c3c68e21e 100644
--- a/public/app/features/dashboard/panel_editor/QueryInspector.tsx
+++ b/public/app/features/dashboard/panel_editor/QueryInspector.tsx
@@ -177,7 +177,6 @@ export class QueryInspector extends PureComponent<Props, State> {
 
   render() {
     const { response, isLoading } = this.state.dsQuery;
-    const { isMocking } = this.state;
     const openNodes = this.getNrOfOpenNodes();
 
     if (isLoading) {
@@ -199,20 +198,7 @@ export class QueryInspector extends PureComponent<Props, State> {
           </CopyToClipboard>
         </div>
 
-        {!isMocking && <JSONFormatter json={response} open={openNodes} onDidRender={this.setFormattedJson} />}
-        {isMocking && (
-          <div className="query-troubleshooter__body">
-            <div className="gf-form p-l-1 gf-form--v-stretch">
-              <textarea
-                className="gf-form-input"
-                style={{ width: '95%' }}
-                rows={10}
-                onInput={this.setMockedResponse}
-                placeholder="JSON"
-              />
-            </div>
-          </div>
-        )}
+        <JSONFormatter json={response} open={openNodes} onDidRender={this.setFormattedJson} />
       </>
     );
   }
diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss
index 8d72f901b6e..b57e575dc5b 100644
--- a/public/sass/components/_query_editor.scss
+++ b/public/sass/components/_query_editor.scss
@@ -31,48 +31,6 @@
   }
 }
 
-.gf-form-query-content {
-  flex-grow: 2;
-
-  &--collapsed {
-    overflow: hidden;
-
-    .gf-form-label {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 100%;
-      white-space: nowrap;
-    }
-  }
-}
-
-.gf-form-query-letter-cell {
-  flex-shrink: 0;
-
-  .gf-form-query-letter-cell-carret {
-    display: inline-block;
-    width: 0.7rem;
-    position: relative;
-    left: -2px;
-  }
-  .gf-form-query-letter-cell-letter {
-    font-weight: bold;
-    color: $blue;
-  }
-  .gf-form-query-letter-cell-ds {
-    color: $text-color-weak;
-  }
-}
-
-.gf-query-ds-label {
-  text-align: center;
-  width: 44px;
-}
-
-.grafana-metric-options {
-  margin-top: 25px;
-}
-
 .tight-form-func {
   background: $tight-form-func-bg;
 
@@ -124,28 +82,6 @@ input[type='text'].tight-form-func-param {
   }
 }
 
-.query-troubleshooter {
-  font-size: $font-size-sm;
-  margin: $gf-form-margin;
-  border: 1px solid $btn-secondary-bg;
-  min-height: 100px;
-  border-radius: 3px;
-}
-
-.query-troubleshooter__header {
-  float: right;
-  font-size: $font-size-sm;
-  text-align: right;
-  padding: $input-padding-y $input-padding-x;
-  a {
-    margin-left: $spacer;
-  }
-}
-
-.query-troubleshooter__body {
-  padding: $spacer 0;
-}
-
 .rst-text::before {
   content: ' ';
 }
@@ -202,8 +138,8 @@ input[type='text'].tight-form-func-param {
   background: $page-bg;
   flex-wrap: nowrap;
   align-items: center;
-}
 
+}
 .query-editor-row__ref-id {
   font-weight: $font-weight-semi-bold;
   color: $blue;
@@ -256,7 +192,7 @@ input[type='text'].tight-form-func-param {
 }
 
 .query-editor-row__body {
-  margin: 0 0 10px 40px;
+  margin: 2px 0 10px 40px;
   background: $page-bg;
 
   &--collapsed {