Dev UI: Implement the config filter by extension

extensions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/DevUIProcessor.java

@@ -421,7 +421,7 @@ void getAllExtensions(List<CardPageBuildItem> cardPageBuildItems,
 
                         if (metaData.containsKey(CAPABILITIES)) {
                             Map<String, Object> capabilities = (Map<String, Object>) metaData.get(CAPABILITIES);
-                            extension.setConfigFilter((List<String>) capabilities.getOrDefault(PROVIDES, null));
+                            extension.setProvidesCapabilities((List<String>) capabilities.getOrDefault(PROVIDES, null));
                         }
 
                         if (metaData.containsKey(CODESTART)) {

extensions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/extension/Extension.java

@@ -8,9 +8,6 @@
 import io.quarkus.devui.spi.page.Page;
 
 public class Extension {
-    private static final String SPACE = " ";
-    private static final String DASH = "-";
-
     private String namespace;
     private String artifact;
     private String name;
@@ -59,10 +56,6 @@ public void setName(String name) {
         this.name = name;
     }
 
-    //    public String getPathName() {
-    //        return name.toLowerCase().replaceAll(SPACE, DASH);
-    //    }
-
     public String getShortName() {
         return shortName;
     }

extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/router-controller.js

@@ -154,10 +154,11 @@ export class RouterController {
 
             RouterController.router.addRoutes(routes);
         }
-        // TODO: Pass the other parameters along ?
+
         var currentSelection = window.location.pathname;
+        var currentQueryString = window.location.search;
 
-        var relocationRequest = this.getFrom();
+        var relocationRequest = this.getQueryParameter("from");
         if (relocationRequest) {
             // We know and already loaded the requested location
             if (relocationRequest === path) {
@@ -188,10 +189,10 @@ export class RouterController {
         return params;
     }
 
-    getFrom(){
+    getQueryParameter(param){
         var params = this.getQueryParameters();
         if(params){
-            return params.from;
+            return params[param] || null;
         }else {
             return null;
         }

extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-configuration.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { JsonRpc } from 'jsonrpc';
+import { RouterController } from 'router-controller';
 import { until } from 'lit/directives/until.js';
 import '@vaadin/grid';
 import 'qui/qui-alert.js';
@@ -18,13 +19,15 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { gridRowDetailsRenderer } from '@vaadin/grid/lit.js';
 import { observeState } from 'lit-element-state';
 import { devuiState } from 'devui-state';
+import 'qui-badge';
 
 /**
  * This component allows users to change the configuration
  */
 export class QwcConfiguration extends observeState(LitElement) {
 
     jsonRpc = new JsonRpc(this);
+    routerController = new RouterController(this);
 
     static styles = css`
       .conf {
@@ -87,6 +90,13 @@ export class QwcConfiguration extends observeState(LitElement) {
 
     constructor() {
         super();
+
+        this._filteredValue = this.routerController.getQueryParameter("filter");
+
+        if(this._filteredValue){
+            this._filteredValue = this._filteredValue.replaceAll(",", " OR ");
+        }
+
         this._filtered = devuiState.allConfiguration;
         this.jsonRpc.getAllValues().then(e => {
             this._values = e.result;
@@ -103,10 +113,19 @@ export class QwcConfiguration extends observeState(LitElement) {
         if (! value) {
             return false;
         }
+        if(term.includes(" OR ")){
+            let terms = term.split(" OR ");
+            for (let t of terms) {
+                if(value.toLowerCase().includes(t.toLowerCase())){
+                    return true;
+                }
+            }
+            return false;
+        }
         return value.toLowerCase().includes(term.toLowerCase());
     }
 
-    _filter(e) {
+    _filterTextChanged(e) {
         const searchTerm = (e.detail.value || '').trim();
         if (searchTerm === '') {
             this._filtered = devuiState.allConfiguration
@@ -119,13 +138,15 @@ export class QwcConfiguration extends observeState(LitElement) {
     }
 
     _render() {
-        if (this._filtered  && this._values) {
+        if (this._filtered && this._values) {
             return html`<div class="conf">
                 <vaadin-text-field
                         placeholder="Filter"
+                        value="${this._filteredValue}"
                         style="width: 100%;"
-                        @value-changed="${(e) => this._filter(e)}">
+                        @value-changed="${(e) => this._filterTextChanged(e)}">
                     <vaadin-icon slot="prefix" icon="font-awesome-solid:filter"></vaadin-icon>
+                    <qui-badge slot="suffix"><span>${this._filtered.length}</span></qui-badge>
                 </vaadin-text-field>
                 ${this._renderGrid()}
                 </div>`;

extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extension.js

@@ -44,6 +44,10 @@ export class QwcExtension extends LitElement {
             visibility:hidden;
         }
 
+        .card-footer a {
+            color: var(--lumo-contrast-50pct);
+        }
+
         .active:hover {
             box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
         }
@@ -137,7 +141,9 @@ export class QwcExtension extends LitElement {
     _footerTemplate() {
         return html`
             <div class="card-footer">
-                <vaadin-icon class="icon" icon="font-awesome-solid:pen-to-square" @click="${this._configuration}" title="Configuration for the ${this.name} extension"></vaadin-icon>  
+                <a href="configuration-form-editor?filter=${this.configFilter}">
+                    <vaadin-icon class="icon" icon="font-awesome-solid:pen-to-square" title="Configuration for the ${this.name} extension"></vaadin-icon>
+                </a>  
                 <vaadin-icon class="icon" icon="font-awesome-solid:ellipsis-vertical" @click="${() => (this._dialogOpened = true)}" title="More about the ${this.name} extension"></vaadin-icon>
             </div>
         `;