Allow navigation of query history using the arrow keys. Fixes #2590

web/pgadmin/feature_tests/query_tool_journey_test.py

@@ -11,6 +11,7 @@ import pyperclip
 import time
 
 from selenium.webdriver import ActionChains
+from selenium.webdriver.common.keys import Keys
 
 from regression.python_test_utils import test_utils
 from regression.feature_utils.base_feature_test import BaseFeatureTest
@@ -75,17 +76,41 @@ class QueryToolJourneyTest(BaseFeatureTest):
         self._execute_query("SELECT * FROM shoes")
 
         self.page.click_tab("History")
-        history_element = self.page.find_by_id("query_list")
-        self.assertIn("SELECT * FROM test_table", history_element.text)
-        self.assertIn("SELECT * FROM shoes", history_element.text)
+        selected_history_entry = self.page.find_by_css_selector("#query_list .selected")
+        self.assertIn("SELECT * FROM shoes", selected_history_entry.text)
+        ActionChains(self.page.driver) \
+            .send_keys(Keys.ARROW_DOWN) \
+            .perform()
+        selected_history_entry = self.page.find_by_css_selector("#query_list .selected")
+        self.assertIn("SELECT * FROM test_table ORDER BY value", selected_history_entry.text)
 
-        history_detail = self.page.find_by_id("query_detail")
-        self.assertIn("SELECT * FROM shoes", history_detail.text)
+        selected_history_detail_pane = self.page.find_by_id("query_detail")
+        self.assertIn("SELECT * FROM test_table ORDER BY value", selected_history_detail_pane.text)
 
-        old_history_list_element = self.page.find_by_xpath("//*[@id='query_list']/ul/li[2]")
-        self.page.click_element(old_history_list_element)
-        history_detail = self.page.find_by_id("query_detail")
-        self.assertIn("SELECT * FROM test_table", history_detail.text)
+        newly_selected_history_entry = self.page.find_by_xpath("//*[@id='query_list']/ul/li[1]")
+        self.page.click_element(newly_selected_history_entry)
+        selected_history_detail_pane = self.page.find_by_id("query_detail")
+        self.assertIn("SELECT * FROM shoes", selected_history_detail_pane.text)
+
+        self.__clear_query_tool()
+
+        self.page.click_element(editor_input)
+        for _ in range(15):
+            self._execute_query("SELECT * FROM hats")
+
+        self.page.click_tab("History")
+
+        query_we_need_to_scroll_to = self.page.find_by_xpath("//*[@id='query_list']/ul/li[17]")
+
+        self.page.click_element(query_we_need_to_scroll_to)
+        self._assert_not_clickable_because_out_of_view(query_we_need_to_scroll_to)
+
+        for _ in range(17):
+            ActionChains(self.page.driver) \
+                .send_keys(Keys.ARROW_DOWN) \
+                .perform()
+
+        self._assert_clickable(query_we_need_to_scroll_to)
 
     def __clear_query_tool(self):
         self.page.click_element(self.page.find_by_xpath("//*[@id='btn-edit']"))
@@ -104,6 +129,12 @@ class QueryToolJourneyTest(BaseFeatureTest):
         self.page.driver.switch_to_frame(self.page.driver.find_element_by_tag_name("iframe"))
         self.page.find_by_id("btn-flash").click()
 
+    def _assert_clickable(self, element):
+        self.page.click_element(element)
+
+    def _assert_not_clickable_because_out_of_view(self, element):
+        self.assertRaises(self.page.click_element(element))
+
     def after(self):
         self.page.close_query_tool()
         self.page.remove_server(self.server)

web/pgadmin/static/jsx/history/query_history.jsx

@@ -7,7 +7,10 @@
 //
 //////////////////////////////////////////////////////////////
 
+/* eslint-disable react/no-find-dom-node */
+
 import React from 'react';
+import ReactDOM from 'react-dom';
 import SplitPane from 'react-split-pane';
 import QueryHistoryEntry from './query_history_entry';
 import QueryHistoryDetail from './query_history_detail';
@@ -20,6 +23,9 @@ const queryDetailDivStyle = {
   display: 'flex',
 };
 
+const ARROWUP = 38;
+const ARROWDOWN = 40;
+
 export default class QueryHistory extends React.Component {
 
   constructor(props) {
@@ -29,6 +35,9 @@ export default class QueryHistory extends React.Component {
       history: [],
       selectedEntry: 0,
     };
+
+    this.onKeyDownHandler = this.onKeyDownHandler.bind(this);
+    this.navigateUpAndDown = this.navigateUpAndDown.bind(this);
   }
 
   componentWillMount() {
@@ -46,6 +55,17 @@ export default class QueryHistory extends React.Component {
     this.resetCurrentHistoryDetail(this.state.history);
   }
 
+  refocus() {
+    if (this.state.history.length > 0) {
+      this.retrieveSelectedQuery().parentElement.focus();
+    }
+  }
+
+  retrieveSelectedQuery() {
+    return ReactDOM.findDOMNode(this)
+      .getElementsByClassName('selected')[0];
+  }
+
   getCurrentHistoryDetail() {
     return this.state.currentHistoryDetail;
   }
@@ -80,16 +100,88 @@ export default class QueryHistory extends React.Component {
     this.setCurrentHistoryDetail(index, this.state.history);
   }
 
+  isInvisible(element) {
+    return this.isAbovePaneTop(element) || this.isBelowPaneBottom(element);
+  }
+
+  isBelowPaneBottom(element) {
+    const paneElement = ReactDOM.findDOMNode(this).getElementsByClassName('Pane1')[0];
+    return element.getBoundingClientRect().bottom > paneElement.getBoundingClientRect().bottom;
+  }
+
+  isAbovePaneTop(element) {
+    const paneElement = ReactDOM.findDOMNode(this).getElementsByClassName('Pane1')[0];
+    return element.getBoundingClientRect().top < paneElement.getBoundingClientRect().top;
+  }
+
+  navigateUpAndDown(event) {
+    let arrowKeys = [ARROWUP, ARROWDOWN];
+    let key = event.keyCode || event.which;
+    if (arrowKeys.indexOf(key) > -1) {
+      event.preventDefault();
+      this.onKeyDownHandler(event);
+      return false;
+    }
+    return true;
+  }
+
+  onKeyDownHandler(event) {
+    if (this.isArrowDown(event)) {
+      if (!this.isLastEntry()) {
+        let nextEntry = this.state.selectedEntry + 1;
+        this.setCurrentHistoryDetail(nextEntry, this.state.history);
+
+        if (this.isInvisible(this.getEntryFromList(nextEntry))) {
+          this.getEntryFromList(nextEntry).scrollIntoView(false);
+        }
+      }
+    } else if (this.isArrowUp(event)) {
+      if (!this.isFirstEntry()) {
+        let previousEntry = this.state.selectedEntry - 1;
+        this.setCurrentHistoryDetail(previousEntry, this.state.history);
+
+        if (this.isInvisible(this.getEntryFromList(previousEntry))) {
+          this.getEntryFromList(previousEntry).scrollIntoView(true);
+        }
+      }
+    }
+  }
+
+  getEntryFromList(entryIndex) {
+    return ReactDOM.findDOMNode(this).getElementsByClassName('entry')[entryIndex];
+  }
+
+  isFirstEntry() {
+    return this.state.selectedEntry === 0;
+  }
+
+  isLastEntry() {
+    return this.state.selectedEntry === this.state.history.length - 1;
+  }
+
+  isArrowUp(event) {
+    return (event.keyCode || event.which) === ARROWUP;
+  }
+
+  isArrowDown(event) {
+    return (event.keyCode || event.which) === ARROWDOWN;
+  }
+
   render() {
     return (
       <SplitPane defaultSize="50%" split="vertical" pane1Style={queryEntryListDivStyle}
                  pane2Style={queryDetailDivStyle}>
-        <div id='query_list' className="query-history">
+        <div id='query_list'
+             className="query-history">
           <ul>
             {this.retrieveOrderedHistory()
               .map((entry, index) =>
-                <li key={index} className='list-item' onClick={this.onClickHandler.bind(this, index)}>
-                  <QueryHistoryEntry historyEntry={entry} isSelected={index == this.state.selectedEntry}/>
+                <li key={index} className='list-item' tabIndex='0'
+                    onClick={this.onClickHandler.bind(this, index)}
+                    onKeyDown={this.navigateUpAndDown}>
+                  <QueryHistoryEntry
+                    historyEntry={entry}
+                    isSelected={index == this.state.selectedEntry}/>
                 </li>)
               .value()
             }

web/pgadmin/static/scss/pgadmin.scss

@@ -16,5 +16,5 @@ $enable-flex: true;
 
 @import 'alert';
 @import 'alertify.overrides';
-@import 'sqleditor/history';
 @import 'backform.overrides';
+@import 'sqleditor/history';

web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js

@@ -1019,9 +1019,19 @@ define('tools.querytool', [
 
         self.history_collection = new HistoryBundle.HistoryCollection([]);
 
-        var queryHistoryElement = React.createElement(
-          queryHistory.QueryHistory, {historyCollection: self.history_collection});
-        ReactDOM.render(queryHistoryElement, $('#history_grid')[0]);
+        var historyComponent;
+        var historyCollectionReactElement = React.createElement(
+          queryHistory.QueryHistory, {
+            historyCollection: self.history_collection,
+            ref: function(component) {
+              historyComponent = component;
+            },
+          });
+        ReactDOM.render(historyCollectionReactElement, $('#history_grid')[0]);
+
+        self.history_panel.on(wcDocker.EVENT.VISIBILITY_CHANGED, function () {
+          historyComponent.refocus();
+        });
       },
 
       // Callback function for Add New Row button click.
@@ -1801,7 +1811,7 @@ define('tools.querytool', [
           });
         },
 
-        // This is a wrapper to call _render function
+        // This is a wrapper to call_render function
         // We need this because we have separated columns route & result route
         // We need to combine both result here in wrapper before rendering grid
         call_render_after_poll: function(res) {