From 612cb7b319c84baff3e321ee99b0ead5c354e8ec Mon Sep 17 00:00:00 2001
From: Anemy <rhysh@live.com>
Date: Thu, 18 Mar 2021 13:10:36 +0000
Subject: [PATCH] add button for toggle query history

---
 src/components/query-bar/query-bar.jsx     | 25 ++++++++++++++++++++--
 src/components/query-bar/query-bar.less    |  6 ++++++
 src/components/query-bar/query-bar.spec.js | 13 +++++++++++
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/query-bar/query-bar.jsx b/src/components/query-bar/query-bar.jsx
index d1aea12..c40923b 100644
--- a/src/components/query-bar/query-bar.jsx
+++ b/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,6 +363,20 @@ 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>
@@ -362,7 +384,6 @@ class QueryBar extends Component {
           </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>
diff --git a/src/components/query-bar/query-bar.less b/src/components/query-bar/query-bar.less
index 2def451..952a11f 100644
--- a/src/components/query-bar/query-bar.less
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/query-bar/query-bar.spec.js b/src/components/query-bar/query-bar.spec.js
index daddcd1..2b13a6e 100644
--- a/src/components/query-bar/query-bar.spec.js
+++ b/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() {