feat: add button for toggle query history COMPASS-4716

src/components/query-bar/query-bar.jsx

@@ -11,6 +11,7 @@ import {
   isArray,
   map
 } from 'lodash';
+import FontAwesome from 'react-fontawesome';
 
 import QueryOption from 'components/query-option';
 import OptionsToggle from 'components/options-toggle';
@@ -328,6 +329,13 @@ class QueryBar extends Component {
       { disabled: queryState !== 'apply'}
     );
 
+    const _queryHistoryClassName = classnames(
+      'btn',
+      'btn-default',
+      'btn-sm',
+      styles['query-history-button']
+    );
+
     return (
       <div className={_inputGroupClassName}>
         <div
@@ -337,7 +345,7 @@ class QueryBar extends Component {
           {this.renderOptionRows()}
           {this.renderToggle()}
         </div>
-        <div className={classnames(styles['button-group'])}>
+        <div className={styles['button-group']}>
           <button
             data-test-id="query-bar-apply-filter-button"
             key="apply-button"
@@ -355,14 +363,27 @@ class QueryBar extends Component {
             onClick={this.onResetButtonClicked}>
             Reset
           </button>
+          <button
+            id="query_history_button"
+            key="query-history-button"
+            className={_queryHistoryClassName}
+            data-test-id="query-history-button"
+            type="button"
+            onClick={this.props.actions.toggleQueryHistory}
+            title="Toggle Query History"
+          >
+            <FontAwesome
+              data-test-id="query-history-button-icon"
+              name="history"
+            />
+          </button>
         </div>
         <Dropdown pullRight id="query-bar-menu-actions">
           <Dropdown.Toggle noCaret>
             <i className="mms-icon-ellipsis" aria-hidden />
           </Dropdown.Toggle>
           <Dropdown.Menu>
             <MenuItem onClick={this.props.actions.exportToLanguage}>Export To Language</MenuItem>
-            <MenuItem onClick={this.props.actions.toggleQueryHistory}>Toggle Query History</MenuItem>
           </Dropdown.Menu>
         </Dropdown>
       </div>

src/components/query-bar/query-bar.less

@@ -89,3 +89,9 @@
 .reset-button {
   margin-left: 5px;
 }
+
+.query-history-button {
+  padding: 0;
+	margin-left: 5px;
+	width: 28px;
+}

src/components/query-bar/query-bar.spec.js

@@ -120,6 +120,19 @@ describe('QueryBar [Component]', function() {
           component.setState({ hasFocus: true });
           expect(component.find(`.${styles['option-container']}`)).to.have.className(styles['has-focus']);
         });
+
+        it('has a query history button', function() {
+          const component = shallow(
+            <QueryBar
+              store={store}
+              actions={actions}
+              layout={layout}
+              expanded={false}
+              serverVersion="3.4.0"
+            />
+          );
+          expect(component.find(`.${styles['query-history-button']}`)).to.be.present();
+        });
       });
 
       describe('when rendering in expanded state', function() {