Explore: Add titles to query row action buttons (#20128)

public/app/features/explore/QueryRow.tsx

@@ -85,7 +85,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
     this.props.addQueryRow(exploreId, index);
   };
 
-  onClickToggleHiddenQuery = () => {
+  onClickToggleDisabled = () => {
     const { exploreId, index, query } = this.props;
     const newQuery = {
       ...query,
@@ -136,7 +136,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
 
     const canToggleEditorModes =
       mode === ExploreMode.Metrics && has(datasourceInstance, 'components.QueryCtrl.prototype.toggleEditorMode');
-    const canHide = queryResponse.state !== LoadingState.NotStarted;
+    const isNotStarted = queryResponse.state === LoadingState.NotStarted;
     const queryErrors = queryResponse.error && queryResponse.error.refId === query.refId ? [queryResponse.error] : [];
     let QueryField;
 
@@ -181,10 +181,10 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
         </div>
         <QueryRowActions
           canToggleEditorModes={canToggleEditorModes}
-          hideQuery={query.hide}
-          canHide={canHide}
+          isDisabled={query.hide}
+          isNotStarted={isNotStarted}
           onClickToggleEditorMode={this.onClickToggleEditorMode}
-          onClickToggleHiddenQuery={this.onClickToggleHiddenQuery}
+          onClickToggleDisabled={this.onClickToggleDisabled}
           onClickAddButton={this.onClickAddButton}
           onClickRemoveButton={this.onClickRemoveButton}
         />

public/app/features/explore/QueryRowActions.test.tsx

@@ -4,11 +4,11 @@ import { shallow } from 'enzyme';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
-    hideQuery: false,
-    canHide: true,
+    isDisabled: false,
+    isNotStarted: true,
     canToggleEditorModes: true,
     onClickToggleEditorMode: () => {},
-    onClickToggleHiddenQuery: () => {},
+    onClickToggleDisabled: () => {},
     onClickAddButton: () => {},
     onClickRemoveButton: () => {},
   };
@@ -29,11 +29,11 @@ describe('QueryRowActions', () => {
     expect(wrapper.find({ 'aria-label': 'Edit mode button' })).toHaveLength(0);
   });
   it('should change icon to fa-eye-slash when query row result is hidden', () => {
-    const wrapper = setup({ hideQuery: true });
+    const wrapper = setup({ isDisabled: true });
     expect(wrapper.find('i.fa-eye-slash')).toHaveLength(1);
   });
   it('should change icon to fa-eye when query row result is not hidden', () => {
-    const wrapper = setup({ hideQuery: false });
+    const wrapper = setup({ isDisabled: false });
     expect(wrapper.find('i.fa-eye')).toHaveLength(1);
   });
 });

public/app/features/explore/QueryRowActions.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 export type Props = {
   canToggleEditorModes: boolean;
-  hideQuery: boolean;
-  canHide: boolean;
+  isDisabled: boolean;
+  isNotStarted: boolean;
   onClickToggleEditorMode: () => void;
-  onClickToggleHiddenQuery: () => void;
+  onClickToggleDisabled: () => void;
   onClickAddButton: () => void;
   onClickRemoveButton: () => void;
 };
@@ -14,11 +14,11 @@ export function QueryRowActions(props: Props) {
   const {
     canToggleEditorModes,
     onClickToggleEditorMode,
-    onClickToggleHiddenQuery,
+    onClickToggleDisabled,
     onClickAddButton,
     onClickRemoveButton,
-    hideQuery,
-    canHide,
+    isDisabled,
+    isNotStarted,
   } = props;
 
   return (
@@ -35,17 +35,22 @@ export function QueryRowActions(props: Props) {
         </div>
       )}
       <div className="gf-form">
-        <button disabled={!canHide} className="gf-form-label gf-form-label--btn" onClick={onClickToggleHiddenQuery}>
-          <i className={hideQuery ? 'fa fa-eye-slash' : 'fa fa-eye'} />
+        <button
+          disabled={isNotStarted}
+          className="gf-form-label gf-form-label--btn"
+          onClick={onClickToggleDisabled}
+          title="Disable/enable query"
+        >
+          <i className={isDisabled ? 'fa fa-eye-slash' : 'fa fa-eye'} />
         </button>
       </div>
       <div className="gf-form">
-        <button className="gf-form-label gf-form-label--btn" onClick={onClickAddButton}>
+        <button className="gf-form-label gf-form-label--btn" onClick={onClickAddButton} title="Add query">
           <i className="fa fa-plus" />
         </button>
       </div>
       <div className="gf-form">
-        <button className="gf-form-label gf-form-label--btn" onClick={onClickRemoveButton}>
+        <button className="gf-form-label gf-form-label--btn" onClick={onClickRemoveButton} title="Remove query">
           <i className="fa fa-minus" />
         </button>
       </div>

public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap

@@ -22,8 +22,9 @@ exports[`QueryRowActions should render component 1`] = `
   >
     <button
       className="gf-form-label gf-form-label--btn"
-      disabled={false}
+      disabled={true}
       onClick={[Function]}
+      title="Disable/enable query"
     >
       <i
         className="fa fa-eye"
@@ -36,6 +37,7 @@ exports[`QueryRowActions should render component 1`] = `
     <button
       className="gf-form-label gf-form-label--btn"
       onClick={[Function]}
+      title="Add query"
     >
       <i
         className="fa fa-plus"
@@ -48,6 +50,7 @@ exports[`QueryRowActions should render component 1`] = `
     <button
       className="gf-form-label gf-form-label--btn"
       onClick={[Function]}
+      title="Remove query"
     >
       <i
         className="fa fa-minus"