Add clear row button

- clears the content of a query row

public/app/containers/Explore/Explore.tsx

@@ -166,7 +166,7 @@ export class Explore extends React.Component<any, IExploreState> {
         supportsTable,
         datasourceLoading: false,
       },
-      () => datasourceError === null && this.handleSubmit()
+      () => datasourceError === null && this.onSubmit()
     );
   }
 
@@ -174,7 +174,7 @@ export class Explore extends React.Component<any, IExploreState> {
     this.el = el;
   };
 
-  handleAddQueryRow = index => {
+  onAddQueryRow = index => {
     const { queries } = this.state;
     const nextQueries = [
       ...queries.slice(0, index + 1),
@@ -184,7 +184,7 @@ export class Explore extends React.Component<any, IExploreState> {
     this.setState({ queries: nextQueries });
   };
 
-  handleChangeDatasource = async option => {
+  onChangeDatasource = async option => {
     this.setState({
       datasource: null,
       datasourceError: null,
@@ -197,10 +197,10 @@ export class Explore extends React.Component<any, IExploreState> {
     this.setDatasource(datasource);
   };
 
-  handleChangeQuery = (value, index) => {
+  onChangeQuery = (value: string, index: number, override?: boolean) => {
     const { queries } = this.state;
     const prevQuery = queries[index];
-    const edited = prevQuery.query !== value;
+    const edited = override ? false : prevQuery.query !== value;
     const nextQuery = {
       ...queries[index],
       edited,
@@ -211,60 +211,12 @@ export class Explore extends React.Component<any, IExploreState> {
     this.setState({ queries: nextQueries });
   };
 
-  handleChangeTime = nextRange => {
+  onChangeTime = nextRange => {
     const range = {
       from: nextRange.from,
       to: nextRange.to,
     };
-    this.setState({ range }, () => this.handleSubmit());
-  };
-
-  handleClickCloseSplit = () => {
-    const { onChangeSplit } = this.props;
-    if (onChangeSplit) {
-      onChangeSplit(false);
-    }
-  };
-
-  handleClickGraphButton = () => {
-    this.setState(state => ({ showingGraph: !state.showingGraph }));
-  };
-
-  handleClickLogsButton = () => {
-    this.setState(state => ({ showingLogs: !state.showingLogs }));
-  };
-
-  handleClickSplit = () => {
-    const { onChangeSplit } = this.props;
-    if (onChangeSplit) {
-      onChangeSplit(true, this.state);
-    }
-  };
-
-  handleClickTableButton = () => {
-    this.setState(state => ({ showingTable: !state.showingTable }));
-  };
-
-  handleRemoveQueryRow = index => {
-    const { queries } = this.state;
-    if (queries.length <= 1) {
-      return;
-    }
-    const nextQueries = [...queries.slice(0, index), ...queries.slice(index + 1)];
-    this.setState({ queries: nextQueries }, () => this.handleSubmit());
-  };
-
-  handleSubmit = () => {
-    const { showingLogs, showingGraph, showingTable, supportsGraph, supportsLogs, supportsTable } = this.state;
-    if (showingTable && supportsTable) {
-      this.runTableQuery();
-    }
-    if (showingGraph && supportsGraph) {
-      this.runGraphQuery();
-    }
-    if (showingLogs && supportsLogs) {
-      this.runLogsQuery();
-    }
+    this.setState({ range }, () => this.onSubmit());
   };
 
   onClickClear = () => {
@@ -276,6 +228,32 @@ export class Explore extends React.Component<any, IExploreState> {
     });
   };
 
+  onClickCloseSplit = () => {
+    const { onChangeSplit } = this.props;
+    if (onChangeSplit) {
+      onChangeSplit(false);
+    }
+  };
+
+  onClickGraphButton = () => {
+    this.setState(state => ({ showingGraph: !state.showingGraph }));
+  };
+
+  onClickLogsButton = () => {
+    this.setState(state => ({ showingLogs: !state.showingLogs }));
+  };
+
+  onClickSplit = () => {
+    const { onChangeSplit } = this.props;
+    if (onChangeSplit) {
+      onChangeSplit(true, this.state);
+    }
+  };
+
+  onClickTableButton = () => {
+    this.setState(state => ({ showingTable: !state.showingTable }));
+  };
+
   onClickTableCell = (columnKey: string, rowValue: string) => {
     const { datasource, queries } = this.state;
     if (datasource && datasource.modifyQuery) {
@@ -284,7 +262,29 @@ export class Explore extends React.Component<any, IExploreState> {
         edited: false,
         query: datasource.modifyQuery(q.query, { addFilter: { key: columnKey, value: rowValue } }),
       }));
-      this.setState({ queries: nextQueries }, () => this.handleSubmit());
+      this.setState({ queries: nextQueries }, () => this.onSubmit());
+    }
+  };
+
+  onRemoveQueryRow = index => {
+    const { queries } = this.state;
+    if (queries.length <= 1) {
+      return;
+    }
+    const nextQueries = [...queries.slice(0, index), ...queries.slice(index + 1)];
+    this.setState({ queries: nextQueries }, () => this.onSubmit());
+  };
+
+  onSubmit = () => {
+    const { showingLogs, showingGraph, showingTable, supportsGraph, supportsLogs, supportsTable } = this.state;
+    if (showingTable && supportsTable) {
+      this.runTableQuery();
+    }
+    if (showingGraph && supportsGraph) {
+      this.runGraphQuery();
+    }
+    if (showingLogs && supportsLogs) {
+      this.runLogsQuery();
     }
   };
 
@@ -450,7 +450,7 @@ export class Explore extends React.Component<any, IExploreState> {
             </div>
           ) : (
               <div className="navbar-buttons explore-first-button">
-                <button className="btn navbar-button" onClick={this.handleClickCloseSplit}>
+                <button className="btn navbar-button" onClick={this.onClickCloseSplit}>
                   Close Split
               </button>
               </div>
@@ -460,7 +460,7 @@ export class Explore extends React.Component<any, IExploreState> {
               <Select
                 className="datasource-picker"
                 clearable={false}
-                onChange={this.handleChangeDatasource}
+                onChange={this.onChangeDatasource}
                 options={datasources}
                 placeholder="Loading datasources..."
                 value={selectedDatasource}
@@ -470,19 +470,19 @@ export class Explore extends React.Component<any, IExploreState> {
           <div className="navbar__spacer" />
           {position === 'left' && !split ? (
             <div className="navbar-buttons">
-              <button className="btn navbar-button" onClick={this.handleClickSplit}>
+              <button className="btn navbar-button" onClick={this.onClickSplit}>
                 Split
               </button>
             </div>
           ) : null}
-          <TimePicker range={range} onChangeTime={this.handleChangeTime} />
+          <TimePicker range={range} onChangeTime={this.onChangeTime} />
           <div className="navbar-buttons">
             <button className="btn navbar-button navbar-button--no-icon" onClick={this.onClickClear}>
               Clear All
             </button>
           </div>
           <div className="navbar-buttons relative">
-            <button className="btn navbar-button--primary" onClick={this.handleSubmit}>
+            <button className="btn navbar-button--primary" onClick={this.onSubmit}>
               Run Query <i className="fa fa-level-down run-icon" />
             </button>
             {loading || latency ? <ElapsedTime time={latency} className="text-info" /> : null}
@@ -505,26 +505,26 @@ export class Explore extends React.Component<any, IExploreState> {
               history={history}
               queries={queries}
               request={this.request}
-              onAddQueryRow={this.handleAddQueryRow}
-              onChangeQuery={this.handleChangeQuery}
-              onExecuteQuery={this.handleSubmit}
-              onRemoveQueryRow={this.handleRemoveQueryRow}
+              onAddQueryRow={this.onAddQueryRow}
+              onChangeQuery={this.onChangeQuery}
+              onExecuteQuery={this.onSubmit}
+              onRemoveQueryRow={this.onRemoveQueryRow}
             />
             {queryError && !loading ? <div className="text-warning m-a-2">{queryError}</div> : null}
 
             <div className="result-options">
               {supportsGraph ? (
-                <button className={`btn navbar-button ${graphButtonActive}`} onClick={this.handleClickGraphButton}>
+                <button className={`btn navbar-button ${graphButtonActive}`} onClick={this.onClickGraphButton}>
                   Graph
                 </button>
               ) : null}
               {supportsTable ? (
-                <button className={`btn navbar-button ${tableButtonActive}`} onClick={this.handleClickTableButton}>
+                <button className={`btn navbar-button ${tableButtonActive}`} onClick={this.onClickTableButton}>
                   Table
                 </button>
               ) : null}
               {supportsLogs ? (
-                <button className={`btn navbar-button ${logsButtonActive}`} onClick={this.handleClickLogsButton}>
+                <button className={`btn navbar-button ${logsButtonActive}`} onClick={this.onClickLogsButton}>
                   Logs
                 </button>
               ) : null}

public/app/containers/Explore/QueryRows.tsx

@@ -3,28 +3,35 @@ import React, { PureComponent } from 'react';
 import QueryField from './PromQueryField';
 
 class QueryRow extends PureComponent<any, {}> {
-  handleChangeQuery = value => {
+  onChangeQuery = value => {
     const { index, onChangeQuery } = this.props;
     if (onChangeQuery) {
       onChangeQuery(value, index);
     }
   };
 
-  handleClickAddButton = () => {
+  onClickAddButton = () => {
     const { index, onAddQueryRow } = this.props;
     if (onAddQueryRow) {
       onAddQueryRow(index);
     }
   };
 
-  handleClickRemoveButton = () => {
+  onClickClearButton = () => {
+    const { index, onChangeQuery } = this.props;
+    if (onChangeQuery) {
+      onChangeQuery('', index, true);
+    }
+  };
+
+  onClickRemoveButton = () => {
     const { index, onRemoveQueryRow } = this.props;
     if (onRemoveQueryRow) {
       onRemoveQueryRow(index);
     }
   };
 
-  handlePressEnter = () => {
+  onPressEnter = () => {
     const { onExecuteQuery } = this.props;
     if (onExecuteQuery) {
       onExecuteQuery();
@@ -36,20 +43,23 @@ class QueryRow extends PureComponent<any, {}> {
     return (
       <div className="query-row">
         <div className="query-row-tools">
-          <button className="btn navbar-button navbar-button--tight" onClick={this.handleClickAddButton}>
+          <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.handleClickRemoveButton}>
+          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickRemoveButton}>
             <i className="fa fa-minus" />
           </button>
+          <button className="btn navbar-button navbar-button--tight" onClick={this.onClickClearButton}>
+            <i className="fa fa-times" />
+          </button>
         </div>
         <div className="slate-query-field-wrapper">
           <QueryField
             initialQuery={edited ? null : query}
             history={history}
             portalPrefix="explore"
-            onPressEnter={this.handlePressEnter}
-            onQueryChange={this.handleChangeQuery}
+            onPressEnter={this.onPressEnter}
+            onQueryChange={this.onChangeQuery}
             request={request}
           />
         </div>

public/sass/pages/_explore.scss

@@ -107,7 +107,7 @@
 }
 
 .query-row-tools {
-  width: 4rem;
+  width: 6rem;
 }
 
 .explore {