update ui and tests

* remove plugins card and show no match on filterting inside globla config page (update html + js)
* add missing css
* tests now can use javascript selector
* start adding some testing

src/ui/static/js/global_config.js

@@ -33,3 +33,35 @@ const setFilterGlobal = new FilterSettings(
   "settings-filter",
   "[data-service-content='settings']",
 );
+
+// Hide completely configs card in all plugins hidden
+document
+  .querySelector("input#settings-filter")
+  .addEventListener("input", () => {
+    console.log("input");
+    const tabs = document
+      .querySelector("[data-global-config-tabs-desktop]")
+      .querySelectorAll("[data-tab-handler]");
+    let isAllHidden = true;
+    for (let i = 0; i < tabs.length; i++) {
+      const plugin = tabs[i];
+      if (!plugin.classList.contains("hidden")) {
+        console.log(plugin);
+        isAllHidden = false;
+        break;
+      }
+    }
+
+    const formEl = document.querySelector("[data-global-config-form]");
+    const noMatchEl = document.querySelector("[data-global-config-nomatch]");
+
+    if (isAllHidden) {
+      noMatchEl.classList.remove("hidden");
+      formEl.classList.add("hidden");
+    }
+
+    if (!isAllHidden) {
+      formEl.classList.remove("hidden");
+      noMatchEl.classList.add("hidden");
+    }
+  });

src/ui/tailwind.config.js

@@ -10,15 +10,61 @@ module.exports = {
     "../common/core/***/**/*.{html,js}",
   ],
   safelist: [
-    "bg-gray-500",
-    "bg-gray-600",
-    "bg-green-500",
-    "bg-yellow-500",
-    "bg-yellow-400",
     "text-yellow-400",
+    "bg-gray-600",
+    "hover:bg-gray-600",
+    "focus:bg-gray-600",
+    "bg-gray-600/80",
+    "hover:bg-gray-600/80",
+    "focus:bg-gray-600/80",
+    "bg-gray-500",
+    "hover:bg-gray-500",
+    "focus:bg-gray-500",
+    "bg-gray-500/80",
+    "hover:bg-gray-500/80",
+    "focus:bg-gray-500/80",
+    "bg-green-500",
+    "hover:bg-green-500",
+    "focus:bg-green-500",
+    "bg-green-500/80",
+    "hover:bg-green-500/80",
+    "focus:bg-green-500/80",
+    "bg-yellow-400",
+    "hover:bg-yellow-400",
+    "focus:bg-yellow-400",
+    "bg-yellow-400/80",
+    "hover:bg-yellow-400/80",
+    "focus:bg-yellow-400/80",
+    "bg-yellow-500",
+    "hover:bg-yellow-500",
+    "focus:bg-yellow-500",
+    "bg-yellow-500/80",
+    "hover:bg-yellow-500/80",
+    "focus:bg-yellow-500/80",
     "bg-red-500",
+    "hover:bg-red-500",
+    "focus:bg-red-500",
+    "bg-red-500/80",
+    "hover:bg-red-500/80",
+    "focus:bg-red-500/80",
     "bg-sky-500",
+    "hover:bg-sky-500",
+    "focus:bg-sky-500",
+    "bg-sky-500/80",
+    "hover:bg-sky-500/80",
+    "focus:bg-sky-500/80",
     "bg-orange-500",
+    "hover:bg-orange-500",
+    "focus:bg-orange-500",
+    "bg-orange-500/80",
+    "hover:bg-orange-500/80",
+    "focus:bg-orange-500/80",
+    "bg-emerald-500",
+    "hover:bg-emerald-500",
+    "focus:bg-emerald-500",
+    "bg-emerald-500/80",
+    "hover:bg-emerald-500/80",
+    "focus:bg-emerald-500/80",
   ],
 
   presets: [],

src/ui/templates/global_config.html

@@ -38,6 +38,20 @@
       <!-- end submit -->
     </form>
     <!--end form global conf -->
+    <div data-global-config-nomatch
+         class="hidden w-full overflow-hidden grid grid-cols-12 max-h-100 sm:max-h-125  col-span-12 p-4 relative break-words">
+      <div class="col-span-12 flex flex-col justify-center items-center h-fit">
+        <svg xmlns="http://www.w3.org/2000/svg"
+             fill="none"
+             viewBox="0 0 24 24"
+             stroke-width="1.5"
+             stroke="currentColor"
+             class="mb-2 w-8 h-8 stroke-white">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM10.5 7.5v6m3-3h-6" />
+        </svg>
+        <h5 class="font-bold dark:text-white/90 mx-2 text-white">No settings match</h5>
+      </div>
+    </div>
   </div>
 </div>
 {% endblock content %}

tests/ui/account_page.py

@@ -17,6 +17,22 @@ try:
     log_info("Navigating to the logs page ...")
     access_page(DRIVER, "/html/body/aside[1]/div[1]/div[2]/a", "account")
 
+    log_info("Looking that all desktop tabs are working ...")
+
+    assert_button_click(DRIVER, "//button[@data-tab-handler='global']")
+    assert_button_click(DRIVER, "//button[@data-tab-handler='username']")
+    assert_button_click(DRIVER, "//button[@data-tab-handler='password']")
+    assert_button_click(DRIVER, "//button[@data-tab-handler='totp']")
+
+    log_info("Looking that all mobile tabs are working ...")
+
+    assert_button_click(DRIVER, "//button[@data-tab-handler-mobile='global']")
+    assert_button_click(DRIVER, "//button[@data-tab-handler-mobile='username']")
+    assert_button_click(DRIVER, "//button[@data-tab-handler-mobile='password']")
+    assert_button_click(DRIVER, "//button[@data-tab-handler-mobile='totp']")
+
+    log_info("Start username tab ...")
+
     assert_button_click(DRIVER, "//button[@data-tab-handler='username']")
 
     username_input = safe_get_element(DRIVER, By.ID, "admin_username")

tests/ui/global_config_page.py

@@ -1,5 +1,6 @@
 from logging import info as log_info, exception as log_exception, error as log_error, warning as log_warning
 from random import shuffle
+from time import sleep
 
 from selenium.webdriver.common.by import By
 from selenium.webdriver.remote.webelement import WebElement
@@ -14,6 +15,23 @@ try:
     log_info("Navigating to the global config page ...")
     access_page(DRIVER, "/html/body/aside[1]/div[1]/div[3]/ul/li[3]/a", "global config")
 
+    log_info("Trying filters ...")
+
+    # Set keyword with no matching settings
+    keyword_no_match = "dqz48 é84 dzq 584dz5qd4"
+    btn_keyword = safe_get_element(DRIVER, "js", 'document.querySelector("button#settings-filter")')
+    btn_keyword.send_keys(keyword_no_match)
+    sleep(0.1)
+
+    # Check that the no matching element is shown and other card hide
+    is_no_match = DRIVER.execute_script('return document.querySelector("[data-global-config-nomatch]").classList.contains("hidden") ? false : true')
+    if not is_no_match:
+        log_error(f"Filter keyword with value {keyword_no_match} shouldn't match something.")
+        exit(1)
+
+    # Reset
+    btn_keyword.send_keys("")
+
     no_errors = True
     retries = 0
     while no_errors:

tests/ui/utils.py

@@ -10,23 +10,48 @@ from selenium.webdriver.support import expected_conditions as EC
 from selenium.common.exceptions import ElementClickInterceptedException, TimeoutException, WebDriverException
 
 
-def safe_get_element(driver, by: str, _id: str, *, driver_wait: Optional[WebDriverWait] = None, multiple: bool = False, error: bool = False) -> Union[WebElement, List[WebElement]]:
+def safe_get_element(driver, by: str, selector: str, *, driver_wait: Optional[WebDriverWait] = None, multiple: bool = False, error: bool = False) -> Union[WebElement, List[WebElement]]:
     try:
-        return (driver_wait or WebDriverWait(driver, 4)).until(EC.presence_of_element_located((by, _id)) if not multiple else EC.presence_of_all_elements_located((by, _id)))
+        # Retrieve by js script
+        if by == "js":
+            # Run every wait seconds trying to get elements
+            wait = driver_wait or 4
+            el = None
+            for x in range(wait):
+                try:
+                    el = driver.execute_script(f"return {selector} ? {selector} : false")
+                    if el:
+                        break
+                    sleep(1)
+                except:
+                    el = None
+            # Case no el found
+            if not el:
+                raise TimeoutException
+
+            return el
+
+        # Retrieve with XPATH
+        return (driver_wait or WebDriverWait(driver, 4)).until(EC.presence_of_element_located((by, selector)) if not multiple else EC.presence_of_all_elements_located((by, selector)))
     except TimeoutException as e:
         if error:
             raise e
 
-        log_exception(f'Element searched by {by}: "{_id}" not found, exiting ...')
+        log_exception(f'Element searched by {by}: "{selector}" not found, exiting ...')
         exit(1)
 
 
-def assert_button_click(driver, button: Union[str, WebElement]):  # type: ignore
+def assert_button_click(driver, button: Union[str, WebElement], by: str = "xpath"):  # type: ignore
     clicked = False
     while not clicked:
         with suppress(ElementClickInterceptedException):
             if isinstance(button, str):
-                button: Union[WebElement, List[WebElement]] = safe_get_element(driver, By.XPATH, button)
+                # Retrieve with js script
+                if by == "js":
+                    button: Union[WebElement, List[WebElement]] = safe_get_element(driver, by, button)
+                # Retrieve by XPATH
+                else:
+                    button: Union[WebElement, List[WebElement]] = safe_get_element(driver, By.XPATH, button)
                 assert isinstance(button, WebElement), "Button is not a WebElement"
 
             sleep(0.5)