add plugin combobox

* add combobox for plugin select with no conflict with filters (combobox using "hidden" class and filters "!hidden" class)
* add autofocus on open
* add reset on close and reopen
* update services settings logic to avoid break combobox on settings rendering

src/ui/static/js/services.js

@@ -249,7 +249,8 @@ class ServiceModal {
         inpName === "OLD_SERVER_NAME" ||
         inpName === "is_draft" ||
         inpName === "operation" ||
-        inpName === "settings-filter"
+        inpName === "settings-filter" ||
+        inp.hasAttribute("data-combobox")
       )
         return;
 

src/ui/static/js/utils/settings.js

@@ -218,8 +218,17 @@ class TabsSelect {
     const dropdown = this.tabContainer.querySelector(
       "[data-tab-select-dropdown]",
     );
+    const combobox = dropdown.querySelector("[data-combobox]");
+    if (combobox) {
+      // simulate clear combobox wit keyboard
+      combobox.value = "";
+    }
     dropdown.classList.toggle("hidden");
     dropdown.classList.toggle("flex");
+    // Case open, try to focus on combobox input
+    if (!dropdown.classList.contains("hidden") && combobox) {
+      combobox.focus();
+    }
 
     this.updateTabArrow();
   }
@@ -270,6 +279,10 @@ class FilterSettings {
     this.typeTxtEl = document.querySelector(
       `span[data-${this.prefix}-setting-select-text="type"]`,
     );
+    this.comboboxEl = document.querySelector(
+      `[data-${this.prefix}-tabs-select] [data-combobox]`,
+    );
+    this.isComboCheck = false;
     this.tabContainer = tabContainer;
     this.contentContainer = contentContainer;
     this.tabsEls = this.tabContainer.querySelectorAll(
@@ -287,6 +300,16 @@ class FilterSettings {
         });
       }
 
+      if (this.comboboxEl) {
+        this.comboboxEl.addEventListener("input", () => {
+          this.runComboFilter();
+        });
+
+        this.comboboxEl.addEventListener("focusin", () => {
+          this.runComboFilter();
+        });
+      }
+
       window.addEventListener("click", (e) => {
         try {
           if (
@@ -310,6 +333,24 @@ class FilterSettings {
     });
   }
 
+  runComboFilter() {
+    // Case combobox, we want to filter tabs only and not settings
+    this.tabsEls.forEach((tab) => {
+      tab.classList.remove("hidden");
+
+      const tabName = tab.getAttribute(`data-tab-select-handler`);
+      // check tab name matching combobox value
+      if (this.comboboxEl) {
+        const comboboxValue = this.comboboxEl.value;
+        if (!tabName.toLowerCase().includes(comboboxValue.toLowerCase())) {
+          tab.classList.add("hidden");
+          return;
+        }
+      }
+    });
+    return;
+  }
+
   runFilter() {
     this.resetFilter();
     //get inp format
@@ -318,6 +359,7 @@ class FilterSettings {
     //loop all tabs
     this.tabsEls.forEach((tab) => {
       const tabName = tab.getAttribute(`data-tab-select-handler`);
+
       //get settings of tabs except multiples
       const settings = this.getSettingsFromTab(tab);
 

src/ui/templates/global_config.html

@@ -92,6 +92,7 @@
                              role="listbox"
                              data-global-config-setting-select-dropdown="{{ filter['id'] }}"
                              class="mt-1 hidden z-100 absolute flex-col w-full translate-y-16 max-h-[350px] overflow-hidden overflow-y-auto">
+
                             {% for value in filter['values'] %}
                                 <button role="option"
                                         data-global-config-setting-select-dropdown-btn="{{ filter['id'] }}"

src/ui/templates/settings_tabs_select.html

@@ -22,6 +22,7 @@
              role="listbox"
              data-tab-select-dropdown
              class="hidden z-100 absolute flex-col w-full overflow-hidden overflow-y-auto max-h-[350px]">
+             <input data-combobox type="text" placeholder="Search plugin" class="cursor-text first border rounded-t border-gray-100  text-left focus:outline outline-none text-sm leading-5.6 ease block w-full appearance-none border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-800 transition-all placeholder:text-gray-500">
             {% set first_el = "True" %}
             {% for plugin in plugins %}
                 {% if current_endpoint == "services" and plugin["settings"]
@@ -31,7 +32,7 @@
                             data-tab-plugin-type="{{ plugin['type'] }}"
                             data-select="false"
                             id="edit-{{ current_endpoint }}-{{ plugin['id'] }}-tab"
-                            class="{% if loop.first %}active first{% endif %} {% if loop.last %}last{% endif %}  settings-tabs-select-dropdown-btn">
+                            class="{% if loop.first %}active{% endif %} {% if loop.last %}last{% endif %}  settings-tabs-select-dropdown-btn">
                         {{ plugin['name'] }}
                     </button>
                 {% endif %}