Merge pull request #14956 from grafana/query-editor-row-style-update

Query editor row style update & sass cleanup

public/app/features/dashboard/panel_editor/QueryEditorRow.tsx

@@ -205,7 +205,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
             {inMixedMode && <em className="query-editor-row__context-info"> ({datasourceName})</em>}
             {inMixedMode && <em className="query-editor-row__context-info"> ({datasourceName})</em>}
             {isDisabled && <em className="query-editor-row__context-info"> Disabled</em>}
             {isDisabled && <em className="query-editor-row__context-info"> Disabled</em>}
           </div>
           </div>
-          <div className="query-editor-row__collapsed-text">
+          <div className="query-editor-row__collapsed-text" onClick={this.onToggleEditMode}>
             {isCollapsed && <div>{this.renderCollapsedText()}</div>}
             {isCollapsed && <div>{this.renderCollapsedText()}</div>}
           </div>
           </div>
           <div className="query-editor-row__actions">
           <div className="query-editor-row__actions">

public/app/features/dashboard/panel_editor/QueryInspector.tsx

@@ -177,7 +177,6 @@ export class QueryInspector extends PureComponent<Props, State> {
 
 
   render() {
   render() {
     const { response, isLoading } = this.state.dsQuery;
     const { response, isLoading } = this.state.dsQuery;
-    const { isMocking } = this.state;
     const openNodes = this.getNrOfOpenNodes();
     const openNodes = this.getNrOfOpenNodes();
 
 
     if (isLoading) {
     if (isLoading) {
@@ -199,20 +198,7 @@ export class QueryInspector extends PureComponent<Props, State> {
           </CopyToClipboard>
           </CopyToClipboard>
         </div>
         </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} />
       </>
       </>
     );
     );
   }
   }

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 {
 .tight-form-func {
   background: $tight-form-func-bg;
   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 {
 .rst-text::before {
   content: ' ';
   content: ' ';
 }
 }
@@ -202,8 +138,8 @@ input[type='text'].tight-form-func-param {
   background: $page-bg;
   background: $page-bg;
   flex-wrap: nowrap;
   flex-wrap: nowrap;
   align-items: center;
   align-items: center;
-}
 
 
+}
 .query-editor-row__ref-id {
 .query-editor-row__ref-id {
   font-weight: $font-weight-semi-bold;
   font-weight: $font-weight-semi-bold;
   color: $blue;
   color: $blue;
@@ -256,7 +192,7 @@ input[type='text'].tight-form-func-param {
 }
 }
 
 
 .query-editor-row__body {
 .query-editor-row__body {
-  margin: 0 0 10px 40px;
+  margin: 2px 0 10px 40px;
   background: $page-bg;
   background: $page-bg;
 
 
   &--collapsed {
   &--collapsed {