Allow sorting in the file dialogue. Fixes #3273

docs/en_US/release_notes_3_1.rst

@@ -13,6 +13,7 @@ Features
 | `Feature #1447 <https://redmine.postgresql.org/issues/1447>`_ - Add support for SSH tunneled connections
 | `Feature #2686 <https://redmine.postgresql.org/issues/2686>`_ - Add an option to auto-complete keywords in upper case
 | `Feature #3204 <https://redmine.postgresql.org/issues/3204>`_ - Add support for LISTEN/NOTIFY in the query tool
+| `Feature #3273 <https://redmine.postgresql.org/issues/3273>`_ - Allow sorting in the file dialogue
 | `Feature #3362 <https://redmine.postgresql.org/issues/3362>`_ - Function and procedure support for PG11
 | `Feature #3388 <https://redmine.postgresql.org/issues/3388>`_ - Allow the connection timeout to be configured on a per-server basis
 

web/package.json

@@ -87,6 +87,7 @@
     "snapsvg": "^0.5.1",
     "spectrum-colorpicker": "^1.8.0",
     "sprintf-js": "^1.1.1",
+    "tablesorter": "^2.30.6",
     "underscore": "^1.8.3",
     "underscore.string": "^3.3.4",
     "watchify": "~3.9.0",

web/pgadmin/feature_tests/file_manager_test.py

@@ -7,8 +7,10 @@
 #
 ##########################################################################
 
+from __future__ import print_function
 import os
 import time
+import sys
 from selenium.webdriver.common.keys import Keys
 from selenium.webdriver.support.ui import WebDriverWait
 from selenium.webdriver.common.by import By
@@ -21,7 +23,7 @@ class CheckFileManagerFeatureTest(BaseFeatureTest):
     """Tests to check file manager for XSS."""
 
     scenarios = [
-        ("Tests to check if File manager is vulnerable to XSS",
+        ("File manager feature test",
          dict())
     ]
 
@@ -55,10 +57,17 @@ class CheckFileManagerFeatureTest(BaseFeatureTest):
         test_utils.drop_database(connection, "acceptance_test_db")
 
     def runTest(self):
+        print("Tests to check if File manager is vulnerable to XSS... ",
+              file=sys.stderr, end="")
         self._navigate_to_query_tool()
         self.page.fill_codemirror_area_with("SELECT 1;")
         self._create_new_file()
         self._open_file_manager_and_check_xss_file()
+        print("OK.", file=sys.stderr)
+
+        print("File manager sorting of data", file=sys.stderr)
+        self._check_file_sorting()
+        print("OK.", file=sys.stderr)
 
     def _navigate_to_query_tool(self):
         self.page.toggle_open_tree_item(self.server['name'])
@@ -124,3 +133,32 @@ class CheckFileManagerFeatureTest(BaseFeatureTest):
         assert source_code.find(
             string_to_find
         ) != -1, "{0} might be vulnerable to XSS ".format(source)
+
+    def _check_file_sorting(self):
+        self.page.find_by_id("btn-load-file").click()
+        self.wait.until(
+            EC.element_to_be_clickable((
+                By.CSS_SELECTOR,
+                "#contents th[data-column='0']")
+            )
+        )
+
+        # Added time.sleep so that the element to be clicked.
+        time.sleep(0.05)
+        self.page.find_by_css_selector("#contents th[data-column='0']").click()
+        # Check for sort Ascending
+        self.wait.until(
+            EC.presence_of_element_located((
+                By.CSS_SELECTOR,
+                "#contents th[data-column='0'].tablesorter-headerAsc")
+            )
+        )
+
+        # Click and Check for sort Descending
+        self.page.find_by_css_selector("#contents th[data-column='0']").click()
+        self.wait.until(
+            EC.presence_of_element_located((
+                By.CSS_SELECTOR,
+                "#contents th[data-column='0'].tablesorter-headerDesc")
+            )
+        )

web/pgadmin/misc/file_manager/static/css/file_manager.css

@@ -233,17 +233,6 @@ div.clip {
   color: #fff;
 }
 
-.file_listing #contents.list th.tablesorter-headerAsc,
-.file_listing #contents.list th.tablesorter-headerDesc {
-  background: rgb(214,212,209); /* Old browsers */
-  background: -moz-linear-gradient(top, rgba(214,212,209,1) 0%, rgba(244,241,237,1) 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,212,209,1)), color-stop(100%,rgba(244,241,237,1))); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, rgba(214,212,209,1) 0%,rgba(244,241,237,1) 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, rgba(214,212,209,1) 0%,rgba(244,241,237,1) 100%); /* Opera 11.10+ */
-  background: -ms-linear-gradient(top, rgba(214,212,209,1) 0%,rgba(244,241,237,1) 100%); /* IE10+ */
-  background: linear-gradient(to bottom, rgba(214,212,209,1) 0%,rgba(244,241,237,1) 100%); /* W3C */
-}
-
 .file_listing #contents.list td:first-child {
   display: table-cell;
   padding-left: 0;
@@ -729,3 +718,43 @@ a.dz-remove {
 div.change_file_types span {
   padding-left:10px;
 }
+
+/* overall */
+.tablesorter .header,
+.tablesorter .tablesorter-header {
+	/* black (unsorted) double arrow */
+	background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
+	background-repeat: no-repeat;
+	background-position: center right;
+	padding: 4px 18px 4px 4px;
+	white-space: normal;
+	cursor: pointer;
+}
+
+.tablesorter .headerSortUp,
+.tablesorter .tablesorter-headerSortUp,
+.tablesorter .tablesorter-headerAsc {
+	/* black asc arrow */
+	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
+}
+
+.tablesorter .headerSortDown,
+.tablesorter .tablesorter-headerSortDown,
+.tablesorter .tablesorter-headerDesc {
+	/* black desc arrow */
+	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
+}
+
+.tablesorter thead .sorter-false {
+	background-image: none;
+	cursor: default;
+	padding: 4px;
+}
+
+/* table processing indicator */
+.tablesorter .tablesorter-processing {
+	background-position: center center !important;
+	background-repeat: no-repeat !important;
+	background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=') !important;
+}
+

web/pgadmin/misc/file_manager/static/js/utility.js

@@ -13,6 +13,7 @@ import loading_icon from 'acitree/image/load-root.gif';
 define([
   'jquery', 'underscore', 'underscore.string', 'pgadmin.alertifyjs',
   'sources/gettext', 'sources/url_for', 'dropzone', 'sources/pgadmin',
+  'tablesorter',
 ], function($, _, S, Alertify, gettext, url_for, Dropzone, pgAdmin) {
 
   /*---------------------------------------------------------
@@ -574,8 +575,8 @@ define([
 
             result += '</ul>';
           } else {
-            result += '<table id="contents" class="list">';
+            result += '<table id="contents" class="list tablesorter">';
-            result += '<thead><tr><th class="headerSortDown">';
+            result += '<thead><tr><th>';
             result += '<span>' + lg.name + '</span></th>';
             result += '<th><span>' + lg.size + '</span></th><th>';
             result += '<span>' + lg.modified + '</span></th></tr></thead>';
@@ -649,8 +650,8 @@ define([
           if ($('.fileinfo').data('view') == 'grid') {
             result += '<ul id="contents" class="grid"></ul>';
           } else {
-            result += '<table id="contents" class="list">';
+            result += '<table id="contents" class="list tablesorter">';
-            result += '<thead><tr><th class="headerSortDown"><span>' +
+            result += '<thead><tr><th><span>' +
               lg.name + '</span></th><th><span>' + lg.size +
               '</span></th><th><span>' + lg.modified +
               '</span></th></tr></thead>';
@@ -667,6 +668,13 @@ define([
 
         // Add the new markup to the DOM.
         $('.fileinfo .file_listing').html(result);
+        $('.fileinfo .file_listing #contents').tablesorter({
+          headers: {
+            2: {
+              sorter: 'shortDate',
+            },
+          },
+        });
 
         // rename file/folder
         $('.file_manager button.rename').off().on('click', function(e) {

web/yarn.lock

@@ -5327,7 +5327,7 @@ jquery-ui@>=1.8.0, jquery-ui@^1.12.1:
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/jquery-ui/-/jquery-ui-1.12.1.tgz#bcb4045c8dd0539c134bc1488cdd3e768a7a9e51"
 
-jquery@3.3.1, "jquery@>=1.7.1 <4.0.0", jquery@>=1.8.0, "jquery@^1.8.3 || ^2.0 || ^3.0", jquery@^3.3.1:
+jquery@3.3.1, jquery@>=1.2.6, "jquery@>=1.7.1 <4.0.0", jquery@>=1.8.0, "jquery@^1.8.3 || ^2.0 || ^3.0", jquery@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
 
@@ -8852,6 +8852,12 @@ table@^3.7.8:
     slice-ansi "0.0.4"
     string-width "^2.0.0"
 
+tablesorter@^2.30.6:
+  version "2.30.6"
+  resolved "https://registry.yarnpkg.com/tablesorter/-/tablesorter-2.30.6.tgz#d24b0a5a9e44f9970d41f51a7d194d538fc6f953"
+  dependencies:
+    jquery ">=1.2.6"
+
 tapable@^0.2.7:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"