Explore: Adds support for toggling text edit mode in explore (#17870)

* Explore: Adds support for toggling text edit mode in explore
Also modifies query-row-status css to use relative position instead of absolute
Closes #16770

* Explore: Defines State interface for <QueryRow /> and removes unnecessary constructor

public/app/features/explore/QueryEditor.tsx

@@ -19,11 +19,13 @@ interface QueryEditorProps {
   initialQuery: DataQuery;
   exploreEvents: Emitter;
   range: TimeRange;
+  textEditModeEnabled?: boolean;
 }
 
 export default class QueryEditor extends PureComponent<QueryEditorProps, any> {
   element: any;
   component: AngularComponent;
+  angularScope: any;
 
   async componentDidMount() {
     if (!this.element) {
@@ -58,6 +60,7 @@ export default class QueryEditor extends PureComponent<QueryEditorProps, any> {
     };
 
     this.component = loader.load(this.element, scopeProps, template);
+    this.angularScope = scopeProps.ctrl;
     setTimeout(() => {
       this.props.onQueryChange(target);
       this.props.onExecuteQuery();
@@ -65,10 +68,19 @@ export default class QueryEditor extends PureComponent<QueryEditorProps, any> {
   }
 
   componentDidUpdate(prevProps: QueryEditorProps) {
-    if (prevProps.error !== this.props.error && this.component) {
-      // Some query controllers listen to data error events and need a digest
-      // for some reason this needs to be done in next tick
-      setTimeout(this.component.digest);
+    const hasToggledEditorMode = prevProps.textEditModeEnabled !== this.props.textEditModeEnabled;
+    const hasNewError = prevProps.error !== this.props.error;
+
+    if (this.component) {
+      if (hasToggledEditorMode) {
+        this.angularScope.toggleEditorMode();
+      }
+
+      if (hasNewError || hasToggledEditorMode) {
+        // Some query controllers listen to data error events and need a digest
+        // for some reason this needs to be done in next tick
+        setTimeout(this.component.digest);
+      }
     }
   }
 

public/app/features/explore/QueryRow.tsx

@@ -53,7 +53,15 @@ interface QueryRowProps extends PropsFromParent {
   mode: ExploreMode;
 }
 
-export class QueryRow extends PureComponent<QueryRowProps> {
+interface QueryRowState {
+  textEditModeEnabled: boolean;
+}
+
+export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
+  state: QueryRowState = {
+    textEditModeEnabled: false,
+  };
+
   onRunQuery = () => {
     const { exploreId } = this.props;
     this.props.runQueries(exploreId);
@@ -95,6 +103,10 @@ export class QueryRow extends PureComponent<QueryRowProps> {
     this.props.runQueries(exploreId);
   };
 
+  onClickToggleEditorMode = () => {
+    this.setState({ textEditModeEnabled: !this.state.textEditModeEnabled });
+  };
+
   updateLogsHighlights = _.debounce((value: DataQuery) => {
     const { datasourceInstance } = this.props;
     if (datasourceInstance.getHighlighterExpression) {
@@ -117,6 +129,7 @@ export class QueryRow extends PureComponent<QueryRowProps> {
       queryErrors,
       mode,
     } = this.props;
+    const canToggleEditorModes = _.has(datasourceInstance, 'components.QueryCtrl.prototype.toggleEditorMode');
     let QueryField;
 
     if (mode === ExploreMode.Metrics && datasourceInstance.components.ExploreMetricsQueryField) {
@@ -129,9 +142,6 @@ export class QueryRow extends PureComponent<QueryRowProps> {
 
     return (
       <div className="query-row">
-        <div className="query-row-status">
-          <QueryStatus queryResponse={queryResponse} latency={latency} />
-        </div>
         <div className="query-row-field flex-shrink-1">
           {QueryField ? (
             <QueryField
@@ -154,10 +164,21 @@ export class QueryRow extends PureComponent<QueryRowProps> {
               initialQuery={query}
               exploreEvents={exploreEvents}
               range={range}
+              textEditModeEnabled={this.state.textEditModeEnabled}
             />
           )}
         </div>
+        <div className="query-row-status">
+          <QueryStatus queryResponse={queryResponse} latency={latency} />
+        </div>
         <div className="gf-form-inline flex-shrink-0">
+          {canToggleEditorModes && (
+            <div className="gf-form">
+              <button className="gf-form-label gf-form-label--btn" onClick={this.onClickToggleEditorMode}>
+                <i className="fa fa-pencil" />
+              </button>
+            </div>
+          )}
           <div className="gf-form">
             <button className="gf-form-label gf-form-label--btn" onClick={this.onClickClearButton}>
               <i className="fa fa-times" />

public/sass/pages/_explore.scss

@@ -287,14 +287,15 @@
 }
 
 .query-row-status {
-  position: absolute;
+  position: relative;
   top: 0;
-  right: 105px;
+  right: 35px;
   z-index: 1015;
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: $input-height;
+  width: 0;
 }
 
 .query-row-field {