From fe95b7670b539b1957a41ee77b9c304fef31825f Mon Sep 17 00:00:00 2001
From: Joao Pedro De Almeida Pereira <jdealmeidapereira@pivotal.io>
Date: Mon, 24 Jul 2017 11:46:06 +0100
Subject: [PATCH] Ensure the appropriate entry is focussed when entering the
 history tab.

---
 .../static/jsx/history/query_history.jsx      | 19 ++++----
 .../javascript/history/query_history_spec.jsx | 47 ++++++++++++++++---
 2 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/web/pgadmin/static/jsx/history/query_history.jsx b/web/pgadmin/static/jsx/history/query_history.jsx
index 8efe08bd9..3345b6bd1 100644
--- a/web/pgadmin/static/jsx/history/query_history.jsx
+++ b/web/pgadmin/static/jsx/history/query_history.jsx
@@ -57,13 +57,13 @@ export default class QueryHistory extends React.Component {
 
   refocus() {
     if (this.state.history.length > 0) {
-      this.retrieveQueryListPane().focus();
+      this.retrieveSelectedQuery().parentElement.focus();
     }
   }
 
-  retrieveQueryListPane() {
+  retrieveSelectedQuery() {
     return ReactDOM.findDOMNode(this)
-      .getElementsByClassName('query-history')[0];
+      .getElementsByClassName('selected')[0];
   }
 
   getCurrentHistoryDetail() {
@@ -115,8 +115,8 @@ export default class QueryHistory extends React.Component {
   }
 
   navigateUpAndDown(event) {
-    let arrowKeys = [ARROWUP, ARROWDOWN];
-    let key = event.keyCode || event.which;
+    const arrowKeys = [ARROWUP, ARROWDOWN];
+    const key = event.keyCode || event.which;
     if (arrowKeys.indexOf(key) > -1) {
       event.preventDefault();
       this.onKeyDownHandler(event);
@@ -169,17 +169,18 @@ export default class QueryHistory extends React.Component {
 
   render() {
     return (
-      <SplitPane defaultSize="50%" split="vertical" pane1Style={queryEntryListDivStyle}
+      <SplitPane defaultSize='50%' split='vertical' pane1Style={queryEntryListDivStyle}
                  pane2Style={queryDetailDivStyle}>
         <div id='query_list'
-             className="query-history"
+             className='query-history'
              onKeyDown={this.navigateUpAndDown}
-             tabIndex='0'>
+             tabIndex={-1}>
           <ul>
             {this.retrieveOrderedHistory()
               .map((entry, index) =>
                 <li key={index} className='list-item'
-                    onClick={this.onClickHandler.bind(this, index)}>
+                    onClick={this.onClickHandler.bind(this, index)}
+                    tabIndex={-1}>
                   <QueryHistoryEntry
                     historyEntry={entry}
                     isSelected={index == this.state.selectedEntry}/>
diff --git a/web/regression/javascript/history/query_history_spec.jsx b/web/regression/javascript/history/query_history_spec.jsx
index c3b09ba22..e107e9660 100644
--- a/web/regression/javascript/history/query_history_spec.jsx
+++ b/web/regression/javascript/history/query_history_spec.jsx
@@ -36,11 +36,11 @@ describe('QueryHistory', () => {
     describe('when we switch to the query history tab', () => {
       beforeEach(() => {
         historyWrapper.node.refocus();
-        spyOn(historyWrapper.node, 'retrieveQueryListPane');
+        spyOn(historyWrapper.node, 'retrieveSelectedQuery');
       });
 
       it('does not try to focus on any element', () => {
-        expect(historyWrapper.node.retrieveQueryListPane).not.toHaveBeenCalled();
+        expect(historyWrapper.node.retrieveSelectedQuery).not.toHaveBeenCalled();
       });
     });
 
@@ -55,8 +55,6 @@ describe('QueryHistory', () => {
       expect(foundChildren.length).toBe(1);
       done();
     });
-
-    it('does not error', () => { });
   });
 
   describe('when there is history', () => {
@@ -221,12 +219,47 @@ describe('QueryHistory', () => {
 
           it('deselects the first history entry', () => {
             expect(firstEntry.nodes.length).toBe(1);
-            expect(firstEntry.hasClass('selected')).toBeFalsy();
+            expect(firstEntry.hasClass('selected')).toBe(false);
           });
 
           it('selects the second history entry', () => {
             expect(secondEntry.nodes.length).toBe(1);
-            expect(secondEntry.hasClass('selected')).toBeTruthy();
+            expect(secondEntry.hasClass('selected')).toBe(true);
+          });
+        });
+
+        describe('when the user clicks inside the main pane but not in any history entry', () => {
+          let queryList;
+          let firstEntry, secondEntry;
+
+          beforeEach(() => {
+            firstEntry = foundChildren.at(0);
+            secondEntry = foundChildren.at(1);
+            queryList = historyWrapper.find('#query_list');
+
+            secondEntry.simulate('click');
+            queryList.simulate('click');
+          });
+
+          it('should not change the selected entry', () => {
+            expect(firstEntry.hasClass('selected')).toBe(false);
+            expect(secondEntry.hasClass('selected')).toBe(true);
+          });
+
+          describe('when up arrow is keyed', () => {
+            beforeEach(() => {
+              pressArrowUpKey(queryList);
+            });
+
+            it('selects the first history entry', () => {
+              expect(firstEntry.nodes.length).toBe(1);
+              expect(firstEntry.hasClass('selected')).toBe(true);
+            });
+
+            it('deselects the second history entry', () => {
+              expect(secondEntry.nodes.length).toBe(1);
+              expect(secondEntry.hasClass('selected')).toBe(false);
+            });
           });
         });
 
@@ -264,7 +297,7 @@ describe('QueryHistory', () => {
 
           beforeEach(() => {
             selectedListItem = ReactDOM.findDOMNode(historyWrapper.node)
-              .getElementsByClassName('query-history')[0];
+              .getElementsByClassName('list-item')[0];
 
             spyOn(selectedListItem, 'focus');
             historyWrapper.node.refocus();