Improvement in the look and feel of the whole application

Changed the SCSS/CSS for the below third party libraries to adopt the
new look 'n' feel:
- wcDocker
- Alertify dialogs, and notifications
- AciTree
- Bootstrap Navbar
- Bootstrap Tabs
- Bootstrap Drop-Down menu
- Backgrid
- Select2

Adopated the new the look 'n' feel for the dialogs, wizard, properties,
tab panels, tabs, fieldset, subnode control, spinner control, HTML
table, and other form controls.

- Font is changed to Roboto
- Using SCSS variables to define the look 'n' feel
- Designer background images for the Login, and Forget password pages in
  'web' mode
- Improved the look 'n' feel for the key selection in the preferences
  dialog
- Table classes consistency changes across the application
- File Open and Save dialog list view changes

Author(s): Aditya Toshniwal & Khushboo Vashi

web/pgadmin/feature_tests/browser_tool_bar_test.py

@@ -69,15 +69,14 @@ class BrowserToolBarFeatureTest(BaseFeatureTest):
         retry_count = 0
         while retry_count < 5:
             try:
-                self.page.find_by_xpath(
-                    "//*[contains(@class,'pg-toolbar-btn') and "
-                    "contains(@title, 'Query Tool')]").click()
+                self.page.find_by_css_selector(
+                    ".wcFrameButton[title='Query Tool']").click()
                 break
             except StaleElementReferenceException:
                 retry_count += 1
 
         time.sleep(0.5)
-        self.page.find_by_xpath("//*[contains(@class,'wcTabIcon fa fa-bolt')]")
+        self.page.find_by_css_selector(".wcPanelTab .wcTabIcon.fa.fa-bolt")
 
     def test_view_data_tool_button(self):
         self.page.select_tree_item(self.test_db)
@@ -89,28 +88,26 @@ class BrowserToolBarFeatureTest(BaseFeatureTest):
         retry_count = 0
         while retry_count < 5:
             try:
-                self.page.find_by_xpath(
-                    "//*[contains(@class,'pg-toolbar-btn') and "
-                    "contains(@title, 'View Data')]").click()
+                self.page.find_by_css_selector(
+                    ".wcFrameButton[title='View Data']").click()
                 break
             except StaleElementReferenceException:
                 retry_count += 1
 
         time.sleep(0.5)
-        self.page.find_by_xpath("//*[contains(@class,'wcTabIcon fa fa-bolt')]")
+        self.page.find_by_css_selector(".wcPanelTab .wcTabIcon.fa.fa-bolt")
 
     def test_filtered_rows_tool_button(self):
         retry_count = 0
         while retry_count < 5:
             try:
-                self.page.find_by_xpath(
-                    "//*[contains(@class,'pg-toolbar-btn') and "
-                    "contains(@title, 'Filtered Rows')]").click()
+                self.page.find_by_css_selector(
+                    ".wcFrameButton[title='Filtered Rows']").click()
                 break
             except StaleElementReferenceException:
                 retry_count += 1
 
         time.sleep(0.5)
-        self.page.find_by_xpath("//*[contains(@class, 'ajs-header') and "
-                                "contains(., 'Data Filter')]")
+        self.page.find_by_css_selector(
+            ".alertify .ajs-header[data-title='Data Filter']")
         self.page.click_modal('Cancel')

web/pgadmin/feature_tests/file_manager_test.py

@@ -66,29 +66,19 @@ class CheckFileManagerFeatureTest(BaseFeatureTest):
     def _create_new_file(self):
         self.page.find_by_id("btn-save").click()
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
-        self.wait.until(EC.presence_of_element_located(
-            (
-                By.XPATH,
-                "//*[contains(string(), 'Show hidden files and folders? ')]"
-            )
-        ))
+        self.page.find_by_css_selector('.change_file_types')
         # Set the XSS value in input
         self.page.find_by_id("file-input-path").clear()
         self.page.find_by_id("file-input-path").send_keys(
             self.XSS_FILE
         )
         # Save the file
-        self.page.click_modal('Save')
+        self.page.click_modal('Create')
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
 
     def _open_file_manager_and_check_xss_file(self):
         self.page.find_by_id("btn-load-file").click()
-        self.wait.until(EC.presence_of_element_located(
-            (
-                By.XPATH,
-                "//*[contains(string(), 'Show hidden files and folders? ')]"
-            )
-        ))
+        self.page.find_by_css_selector('.change_file_types')
         self.page.find_by_id("file-input-path").clear()
         self.page.find_by_id("file-input-path").send_keys(
             '/tmp/'
@@ -124,12 +114,7 @@ class CheckFileManagerFeatureTest(BaseFeatureTest):
 
     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']")
-            )
-        )
+        self.page.find_by_css_selector("#contents th[data-column='0']")
 
         # Added time.sleep so that the element to be clicked.
         time.sleep(0.05)

web/pgadmin/feature_tests/keyboard_shortcut_test.py

@@ -116,10 +116,7 @@ class KeyboardShortcutFeatureTest(BaseFeatureTest):
             field.send_keys(key)
 
         # save and close the preference dialog.
-        self.page.find_by_xpath(
-            "//*[contains(@class,'pg-alertify-button') and "
-            "contains(.,'OK')]"
-        ).click()
+        self.page.click_modal('Save')
 
         self.page.wait_for_element_to_disappear(
             lambda driver: driver.find_element_by_css_selector(".ajs-modal")

web/pgadmin/feature_tests/pg_datatype_validation_test.py

@@ -109,10 +109,7 @@ class PGDataypeFeatureTest(BaseFeatureTest):
             switch_btn.click()
 
         # save and close the preference dialog.
-        self.page.find_by_xpath(
-            "//*[contains(@class,'pg-alertify-button') and "
-            "contains(.,'OK')]"
-        ).click()
+        self.page.click_modal('Save')
 
         self.page.wait_for_element_to_disappear(
             lambda driver: driver.find_element_by_css_selector(".ajs-modal")

web/pgadmin/feature_tests/pg_utilities_backup_restore_test.py

@@ -50,6 +50,8 @@ class PGUtilitiesBackupFeatureTest(BaseFeatureTest):
         self.page.toggle_open_server(self.server['name'])
         self.page.toggle_open_tree_item('Databases')
         self.page.toggle_open_tree_item('pg_utility_test_db')
+
+        # Backup
         self.driver.find_element_by_link_text("Tools").click()
 
         self.page.find_by_partial_link_text("Backup...").click()
@@ -65,18 +67,16 @@ class PGUtilitiesBackupFeatureTest(BaseFeatureTest):
         self.page.find_by_xpath("//button[contains(@class,'fa-save') "
                                 "and contains(.,'Backup')]").click()
 
-        self.page.wait_for_element_to_disappear(
-            lambda driver: driver.find_element_by_css_selector(".ajs-modal")
-        )
+        self.page.find_by_css_selector('.ajs-bg-bgprocess')
 
         status = self.page.find_by_css_selector(
-            ".pg-bg-bgprocess .bg-success").text
-
+            ".pg-bg-status .bg-success-light .pg-bg-status-text").text
         self.assertEquals(status, "Successfully completed.")
 
         self.page.find_by_css_selector(
-            ".pg-bg-bgprocess .pg-bg-click > span").click()
-        command = self.page.find_by_css_selector("p.bg-detailed-desc").text
+            ".pg-bg-more-details").click()
+        command = self.page.find_by_css_selector(
+            ".bg-process-details .bg-detailed-desc").text
 
         self.assertIn(self.server['name'], str(command))
         self.assertIn("from database 'pg_utility_test_db'", str(command))
@@ -94,6 +94,7 @@ class PGUtilitiesBackupFeatureTest(BaseFeatureTest):
         self.page.find_by_xpath("//div[contains(@class,'wcFloatingFocus')"
                                 "]//div[contains(@class,'fa-close')]").click()
 
+        # Restore
         self.driver.find_element_by_link_text("Tools").click()
         self.page.find_by_partial_link_text("Restore...").click()
 
@@ -108,17 +109,16 @@ class PGUtilitiesBackupFeatureTest(BaseFeatureTest):
         self.page.find_by_xpath("//button[contains(@class,'fa-upload')"
                                 " and contains(.,'Restore')]").click()
 
-        self.page.wait_for_element_to_disappear(
-            lambda driver: driver.find_element_by_css_selector(".ajs-modal")
-        )
+        self.page.find_by_css_selector('.ajs-bg-bgprocess')
 
         status = self.page.find_by_css_selector(
-            ".pg-bg-bgprocess .bg-success").text
-
+            ".pg-bg-status .bg-success-light .pg-bg-status-text").text
         self.assertEquals(status, "Successfully completed.")
+
         self.page.find_by_css_selector(
-            ".pg-bg-bgprocess .pg-bg-click > span").click()
-        command = self.page.find_by_css_selector("p.bg-detailed-desc").text
+            ".pg-bg-more-details").click()
+        command = self.page.find_by_css_selector(
+            ".bg-process-details .bg-detailed-desc").text
 
         self.assertIn(self.server['name'], str(command))
         if os.name is not 'nt':

web/pgadmin/feature_tests/pg_utilities_maintenance_test.py

@@ -56,12 +56,8 @@ class PGUtilitiesMaintenanceFeatureTest(BaseFeatureTest):
 
     def runTest(self):
         self._open_maintenance_dialogue()
-        self.page.find_by_css_selector(
-            "button.fa-save.btn-primary.pg-alertify-button"). \
-            click()
-        self.page.wait_for_element_to_disappear(
-            lambda driver: driver.find_element_by_css_selector(".ajs-modal")
-        )
+        self.page.click_modal('OK')
+        self.page.find_by_css_selector('.ajs-bg-bgprocess')
         self._verify_command()
 
     def _open_maintenance_dialogue(self):
@@ -80,11 +76,11 @@ class PGUtilitiesMaintenanceFeatureTest(BaseFeatureTest):
 
     def _verify_command(self):
         status = self.page.find_by_css_selector(
-            ".pg-bg-bgprocess .bg-success").text
+            ".pg-bg-status .bg-success-light .pg-bg-status-text").text
         self.assertEquals(status, "Successfully completed.")
-        self.page.find_by_css_selector(
-            ".pg-bg-bgprocess .pg-bg-click > span").click()
-        command = self.page.find_by_css_selector("p.bg-detailed-desc").text
+        self.page.find_by_css_selector(".pg-bg-more-details").click()
+        command = self.page.find_by_css_selector(
+            ".bg-process-details .bg-detailed-desc").text
         if self.test_level == 'database':
             self.assertEquals(command, "VACUUM "
                                        "(VERBOSE)\nRunning Query:"

web/pgadmin/feature_tests/query_tool_journey_test.py

@@ -110,10 +110,10 @@ class QueryToolJourneyTest(BaseFeatureTest):
         self.page.click_element(newly_selected_history_entry)
         selected_history_detail_pane = self.page.find_by_id("query_detail")
         self.assertIn("SELECT * FROM table_that_doesnt_exist",
-                      selected_history_detail_pane.text)
+                      selected_history_detail_pane.get_attribute('innerHTML'))
 
+        self.page.click_tab("Query Editor")
         self.__clear_query_tool()
-
         self.page.click_element(editor_input)
 
         self.page.fill_codemirror_area_with("SELECT * FROM hats")
@@ -135,6 +135,7 @@ class QueryToolJourneyTest(BaseFeatureTest):
 
         self._assert_clickable(query_we_need_to_scroll_to)
 
+        self.page.click_tab("Query Editor")
         self.__clear_query_tool()
         self.page.click_element(editor_input)
         self.page.fill_codemirror_area_with("SELECT * FROM hats")

web/pgadmin/feature_tests/query_tool_tests.py

@@ -110,24 +110,26 @@ class QueryToolFeatureTest(BaseFeatureTest):
         # this will set focus to correct iframe.
         self.page.fill_codemirror_area_with('')
 
-        query_op = self.page.find_by_id("btn-query-dropdown")
-        query_op.click()
-        ActionChains(self.driver).move_to_element(
-            query_op.find_element_by_xpath(
-                "//li[contains(.,'Explain Options')]")).perform()
-        self.page.driver.execute_script(
-            "arguments[0].scrollIntoView()",
-            self.page.find_by_xpath(
-                "//span[normalize-space(text())='Verbose']"))
+        explain_op = self.page.find_by_id("btn-explain-options-dropdown")
+        explain_op.click()
 
         # disable Explain options and auto rollback only if they are enabled.
         for op in ('explain-verbose', 'explain-costs',
-                   'explain-buffers', 'explain-timing', 'auto-rollback'):
+                   'explain-buffers', 'explain-timing'):
             btn = self.page.find_by_id("btn-{}".format(op))
             check = btn.find_element_by_tag_name('i')
             if 'visibility-hidden' not in check.get_attribute('class'):
                 btn.click()
 
+        query_op = self.page.find_by_id("btn-query-dropdown")
+        query_op.click()
+
+        # disable auto rollback only if they are enabled
+        btn = self.page.find_by_id("btn-auto-rollback")
+        check = btn.find_element_by_tag_name('i')
+        if 'visibility-hidden' not in check.get_attribute('class'):
+            btn.click()
+
         # enable autocommit only if it's disabled
         btn = self.page.find_by_id("btn-auto-commit")
         check = btn.find_element_by_tag_name('i')
@@ -135,7 +137,7 @@ class QueryToolFeatureTest(BaseFeatureTest):
             btn.click()
 
         # close menu
-        self.page.find_by_xpath("//li[contains(.,'Explain Options')]").click()
+        query_op.click()
 
     def _locate_database_tree_node(self):
         self.page.toggle_open_tree_item(self.server['name'])
@@ -249,20 +251,15 @@ SELECT generate_series(1, 1000) as id order by id desc"""
         wait = WebDriverWait(self.page.driver, 10)
 
         self.page.fill_codemirror_area_with(query)
-        query_op = self.page.find_by_id("btn-query-dropdown")
-        query_op.click()
-        ActionChains(self.driver).move_to_element(
-            query_op.find_element_by_xpath(
-                "//li[contains(.,'Explain Options')]")).perform()
 
-        self.page.driver.execute_script(
-            "arguments[0].scrollIntoView()",
-            self.page.find_by_xpath(
-                "//span[normalize-space(text())='Verbose']"))
+        explain_op = self.page.find_by_id("btn-explain-options-dropdown")
+        explain_op.click()
 
-        self.page.find_by_id("btn-explain-verbose").click()
+        # disable Explain options and auto rollback only if they are enabled.
+        for op in ('explain-verbose', 'explain-costs'):
+            self.page.find_by_id("btn-{}".format(op)).click()
 
-        self.page.find_by_id("btn-explain-costs").click()
+        explain_op.click()
 
         self.page.find_by_id("btn-explain").click()
 
@@ -288,21 +285,14 @@ SELECT generate_series(1, 1000) as id order by id desc"""
 
         self.page.fill_codemirror_area_with(query)
 
-        query_op = self.page.find_by_id("btn-query-dropdown")
-        query_op.click()
+        explain_op = self.page.find_by_id("btn-explain-options-dropdown")
+        explain_op.click()
 
-        ActionChains(self.driver).move_to_element(
-            query_op.find_element_by_xpath(
-                "//li[contains(.,'Explain Options')]")).perform()
+        # disable Explain options and auto rollback only if they are enabled.
+        for op in ('explain-buffers', 'explain-timing'):
+            self.page.find_by_id("btn-{}".format(op)).click()
 
-        self.page.driver.execute_script(
-            "arguments[0].scrollIntoView()",
-            self.page.find_by_xpath(
-                "//span[normalize-space(text())='Verbose']"))
-
-        self.page.find_by_id("btn-explain-buffers").click()
-
-        self.page.find_by_id("btn-explain-timing").click()
+        explain_op.click()
 
         self.page.find_by_id("btn-explain-analyze").click()
 
@@ -334,15 +324,12 @@ CREATE TABLE public.{}();""".format(table_name)
 
         self.page.fill_codemirror_area_with(query)
 
-        self.page.find_by_id("btn-query-dropdown").click()
+        query_op = self.page.find_by_id("btn-query-dropdown")
+        query_op.click()
 
         self.page.find_by_id("btn-auto-commit").click()
 
-        # Close the Explain Options drop down, getting error while clicking
-        # flash button on jenkins windows platform
-        self.page.find_by_xpath("//li[contains(.,'Explain Options')]").click()
-        wait.until(EC.invisibility_of_element_located(
-            (By.XPATH, "//li[contains(.,'Explain Options')]")))
+        query_op.click()
 
         self.page.find_by_id("btn-flash").click()
 
@@ -406,18 +393,12 @@ END;"""
 
         wait = WebDriverWait(self.page.driver, 10)
 
-        btn_query_dropdown = wait.until(EC.presence_of_element_located(
-            (By.ID, "btn-query-dropdown")))
-
-        btn_query_dropdown.click()
+        query_op = self.page.find_by_id("btn-query-dropdown")
+        query_op.click()
 
         self.page.find_by_id("btn-auto-commit").click()
 
-        # Close the Explain Options drop down, getting error while clicking
-        # flash button on jenkins windows platform
-        self.page.find_by_xpath("//li[contains(.,'Explain Options')]").click()
-        wait.until(EC.invisibility_of_element_located(
-            (By.XPATH, "//li[contains(.,'Explain Options')]")))
+        query_op.click()
 
         self.page.find_by_id("btn-flash").click()
 
@@ -498,17 +479,15 @@ END;"""
 
         self.page.fill_codemirror_area_with(query)
 
-        self.page.find_by_id("btn-query-dropdown").click()
+        query_op = self.page.find_by_id("btn-query-dropdown")
+        query_op.click()
 
         self.page.find_by_id("btn-auto-rollback").click()
 
         self.page.find_by_id("btn-auto-commit").click()
 
-        # Close the Explain Options drop down, getting error while clicking
-        # flash button on jenkins windows platform
-        self.page.find_by_xpath("//li[contains(.,'Explain Options')]").click()
-        wait.until(EC.invisibility_of_element_located(
-            (By.XPATH, "//li[contains(.,'Explain Options')]")))
+        query_op.click()
+
         self.page.find_by_id("btn-flash").click()
 
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
@@ -605,7 +584,8 @@ SELECT 1, pg_sleep(300)"""
 
         self.page.fill_codemirror_area_with(query)
 
-        self.page.find_by_id("btn-query-dropdown").click()
+        query_op = self.page.find_by_id("btn-query-dropdown")
+        query_op.click()
 
         auto_rollback_btn = self.page.find_by_id("btn-auto-rollback")
 
@@ -633,12 +613,7 @@ SELECT 1, pg_sleep(300)"""
            auto_commit_check.get_attribute('class')):
             auto_commit_btn.click()
 
-        # Close the Explain Options drop down, getting error while clicking
-        # flash button on jenkins windows platform
-        wait = WebDriverWait(self.page.driver, 10)
-        self.page.find_by_xpath("//li[contains(.,'Explain Options')]").click()
-        wait.until(EC.invisibility_of_element_located(
-            (By.XPATH, "//li[contains(.,'Explain Options')]")))
+        query_op.click()
 
         self.page.find_by_id("btn-flash").click()
 
@@ -737,14 +712,16 @@ SELECT 1, pg_sleep(300)"""
         self._clear_query_tool()
 
         self.page.fill_codemirror_area_with("SELECT count(*) FROM pg_class;")
-        query_op = self.page.find_by_id("btn-query-dropdown")
-        query_op.click()
-        ActionChains(self.driver).move_to_element(
-            query_op.find_element_by_xpath(
-                "//li[contains(.,'Explain Options')]")).perform()
 
-        self.page.find_by_id("btn-explain-verbose").click()
-        self.page.find_by_id("btn-explain-costs").click()
+        explain_op = self.page.find_by_id("btn-explain-options-dropdown")
+        explain_op.click()
+
+        # disable Explain options and auto rollback only if they are enabled.
+        for op in ('explain-verbose', 'explain-costs', 'explain-analyze'):
+            self.page.find_by_id("btn-{}".format(op)).click()
+
+        explain_op.click()
+
         self.page.find_by_id("btn-explain-analyze").click()
 
         self.page.wait_for_query_tool_loading_indicator_to_disappear()

web/pgadmin/feature_tests/view_data_dml_queries.py

@@ -169,7 +169,7 @@ CREATE TABLE public.defaults_{0}
             (By.XPATH, xpath)), CheckForViewDataTest.TIMEOUT_STRING
         )
         cell_el = self.page.find_by_xpath(xpath)
-        self.page.driver.execute_script("arguments[0].scrollIntoView()",
+        self.page.driver.execute_script("arguments[0].scrollIntoView(false)",
                                         cell_el)
         ActionChains(self.driver).move_to_element(cell_el).double_click(
             cell_el
@@ -189,10 +189,8 @@ CREATE TABLE public.defaults_{0}
             ActionChains(self.driver).send_keys(value).perform()
 
             # Click on editor's Save button
-            self.page.find_by_xpath(
-                "//*[contains(@class, 'pg_text_editor')]"
-                "//button[contains(@class, 'fa-save')]"
-            ).click()
+            self.page.find_by_css_selector(
+                '.pg_text_editor button[data-label="Save"]').click()
         else:
             # Boolean editor test for to True click
             if data[1] == 'true':
@@ -306,8 +304,8 @@ CREATE TABLE public.defaults_{0}
             # row 2(being primary keys) won't match
             # see if cell values matched to actual value
             element = result_row.find_element_by_class_name("r" + str(idx))
-            self.page.driver.execute_script("arguments[0].scrollIntoView()",
-                                            element)
+            self.page.driver.execute_script(
+                "arguments[0].scrollIntoView(false)", element)
 
             if (idx != 1 and not is_new_row) or is_new_row:
                 self.assertEquals(element.text, config_data[str(idx)][1])
@@ -316,5 +314,5 @@ CREATE TABLE public.defaults_{0}
         # to reset position so other assertions can succeed
         for idx in range(len(config_data.keys()), 1, -1):
             element = result_row.find_element_by_class_name("r" + str(idx))
-            self.page.driver.execute_script("arguments[0].scrollIntoView()",
-                                            element)
+            self.page.driver.execute_script(
+                "arguments[0].scrollIntoView(false)", element)