Dev UI: Replaced internal components with Qomponent

Signed-off-by: Phillip Kruger <[email protected]>

bom/dev-ui/pom.xml

@@ -13,7 +13,7 @@
     <description>Dependency management for dev-ui. Importable by third party extension developers.</description>
 
     <properties>
-        <vaadin.version>24.3.11</vaadin.version>
+        <vaadin.version>24.3.13</vaadin.version>
         <lit.version>3.1.3</lit.version>
         <lit-element.version>4.0.5</lit-element.version>
         <lit-html.version>3.1.3</lit-html.version>
@@ -28,10 +28,11 @@
         <vaadin-router.version>1.7.5</vaadin-router.version>
         <lit-state.version>1.7.0</lit-state.version>
         <echarts.version>5.5.0</echarts.version>
-        <codeblock.version>1.0.13</codeblock.version>
         <es-module-shims.version>1.9.0</es-module-shims.version>
         <path-to-regexp.version>2.4.0</path-to-regexp.version>
-
+        <codeblock.version>1.0.16</codeblock.version>
+        <qomponent.version>1.0.0</qomponent.version>
+
         <hpcc-js-wasm.version>2.15.3</hpcc-js-wasm.version>
         <yargs.version>17.7.2</yargs.version>
         <cliui.version>8.0.1</cliui.version>
@@ -268,6 +269,14 @@
                 <scope>runtime</scope>
             </dependency>
 
+            <!-- Qomponent -->
+            <dependency>
+                <groupId>org.mvnpm.at.mvnpm</groupId>
+                <artifactId>qomponent</artifactId>
+                <version>${qomponent.version}</version>
+                <scope>runtime</scope>
+            </dependency>
+
             <!-- Polyfill for importmaps -->
             <dependency>
                 <groupId>org.mvnpm</groupId>

extensions/info/deployment/src/main/resources/dev-ui/qwc-info.js

@@ -3,7 +3,7 @@ import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import { columnBodyRenderer } from '@vaadin/grid/lit.js';
 import { infoUrl } from 'build-time-data';
 import '@vaadin/progress-bar';
-import 'qui-card';
+import '@qomponent/qui-card';
 import '@vaadin/icon';
 
 /**
@@ -83,7 +83,7 @@ export class QwcInfo extends LitElement {
     _renderOsInfo(info){
         if(info.os){
             let os = info.os;
-            return html`<qui-card title="Operating System">
+            return html`<qui-card header="Operating System">
                     <div class="cardContent" slot="content">
                         ${this._renderOsIcon(os.name)}    
                         <table class="table">
@@ -99,7 +99,7 @@ export class QwcInfo extends LitElement {
     _renderJavaInfo(info){
         if(info.java){
             let java = info.java;
-            return html`<qui-card title="Java">
+            return html`<qui-card header="Java">
                     <div class="cardContent" slot="content">
                         <vaadin-icon icon="font-awesome-brands:java"></vaadin-icon>
                         <table class="table">
@@ -126,7 +126,7 @@ export class QwcInfo extends LitElement {
     _renderGitInfo(info){
         if(info.git){
             let git = info.git;
-            return html`<qui-card title="Git">
+            return html`<qui-card header="Git">
                     <div class="cardContent" slot="content">
                         <vaadin-icon icon="font-awesome-brands:git"></vaadin-icon>
                         <table class="table">
@@ -162,7 +162,7 @@ export class QwcInfo extends LitElement {
     _renderBuildInfo(info){
         if(info.build){
             let build = info.build;
-            return html`<qui-card title="Build">
+            return html`<qui-card header="Build">
                     <div class="cardContent" slot="content">
                         <table class="table">
                             <tr><td class="row-header">Group</td><td>${build.group}</td></tr>
@@ -189,7 +189,7 @@ export class QwcInfo extends LitElement {
                     for (const property of Object.keys(extInfo)){
                         rows.push(html`<tr><td class="row-header">${property}</td><td>${extInfo[property]}</td></tr>`);
                     }
-                    cards.push(html`<qui-card title=${key}>
+                    cards.push(html`<qui-card header=${key}>
                         <div class="cardContent" slot="content">
                             <vaadin-icon icon="font-awesome-solid:circle-info"></vaadin-icon>
                             <table class="table">
@@ -202,4 +202,4 @@ export class QwcInfo extends LitElement {
         }
     }
 }
-customElements.define('qwc-info', QwcInfo);
+customElements.define('qwc-info', QwcInfo);

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

@@ -108,11 +108,6 @@ InternalImportMapBuildItem createKnownInternalImportMap(NonApplicationRootPathBu
         internalImportMapBuildItem.add("qwc-server-log", contextRoot + "qwc/qwc-server-log.js");
         internalImportMapBuildItem.add("qwc-extension-link", contextRoot + "qwc/qwc-extension-link.js");
         // Quarkus UI
-        internalImportMapBuildItem.add("qui/", contextRoot + "qui/");
-        internalImportMapBuildItem.add("qui-card", contextRoot + "qui/qui-card.js");
-
-        internalImportMapBuildItem.add("qui-badge", contextRoot + "qui/qui-badge.js");
-        internalImportMapBuildItem.add("qui-alert", contextRoot + "qui/qui-alert.js");
         internalImportMapBuildItem.add("qui-ide-link", contextRoot + "qui/qui-ide-link.js");
 
         // Echarts
@@ -144,6 +139,28 @@ InternalImportMapBuildItem createKnownInternalImportMap(NonApplicationRootPathBu
         return internalImportMapBuildItem;
     }
 
+    @BuildStep(onlyIf = IsDevelopment.class)
+    RelocationImportMapBuildItem createRelocationMap() {
+
+        RelocationImportMapBuildItem relocationImportMapBuildItem = new RelocationImportMapBuildItem();
+
+        // Backward compatibility mappings
+        relocationImportMapBuildItem.add("@quarkus-webcomponents/codeblock/", "@qomponent/qui-code-block/");
+        relocationImportMapBuildItem.add("@quarkus-webcomponents/codeblock", "@qomponent/qui-code-block");
+
+        relocationImportMapBuildItem.add("qui-badge", "@qomponent/qui-badge");
+        relocationImportMapBuildItem.add("qui/qui-badge.js", "@qomponent/qui-badge");
+
+        relocationImportMapBuildItem.add("qui-alert", "@qomponent/qui-alert");
+        relocationImportMapBuildItem.add("qui/qui-alert.js", "@qomponent/qui-alert");
+
+        relocationImportMapBuildItem.add("qui-card", "@qomponent/qui-card");
+        relocationImportMapBuildItem.add("qui/qui-card.js", "@qomponent/qui-card");
+
+        return relocationImportMapBuildItem;
+
+    }
+
     /**
      * Here we map all the pages (as defined by the extensions) build time data
      *
@@ -312,7 +329,8 @@ QuteTemplateBuildItem createIndexHtmlTemplate(
             MvnpmBuildItem mvnpmBuildItem,
             ThemeVarsBuildItem themeVarsBuildItem,
             NonApplicationRootPathBuildItem nonApplicationRootPathBuildItem,
-            List<InternalImportMapBuildItem> internalImportMapBuildItems) {
+            List<InternalImportMapBuildItem> internalImportMapBuildItems,
+            RelocationImportMapBuildItem relocationImportMapBuildItem) {
         QuteTemplateBuildItem quteTemplateBuildItem = new QuteTemplateBuildItem(
                 QuteTemplateBuildItem.DEV_UI);
 
@@ -321,6 +339,22 @@ QuteTemplateBuildItem createIndexHtmlTemplate(
             Map<String, String> importMap = importMapBuildItem.getImportMap();
             aggregator.addMappings(importMap);
         }
+
+        Map<String, String> currentImportMap = aggregator.aggregate(nonApplicationRootPathBuildItem.getNonApplicationRootPath())
+                .getImports();
+        Map<String, String> relocationMap = relocationImportMapBuildItem.getRelocationMap();
+        for (Map.Entry<String, String> relocation : relocationMap.entrySet()) {
+            String from = relocation.getKey();
+            String to = relocation.getValue();
+
+            if (currentImportMap.containsKey(to)) {
+                String newTo = currentImportMap.get(to);
+                aggregator.addMapping(from, newTo);
+            } else {
+                log.warn("Could not relocate " + from + " as " + to + " does not exist in the importmap");
+            }
+        }
+
         String esModuleShimsVersion = extractEsModuleShimsVersion(mvnpmBuildItem.getMvnpmJars());
         String importmap = aggregator.aggregateAsJson(nonApplicationRootPathBuildItem.getNonApplicationRootPath());
         aggregator.reset();

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

@@ -0,0 +1,26 @@
+package io.quarkus.devui.deployment;
+
+import java.util.HashMap;
+import java.util.Map;
+
+import io.quarkus.builder.item.SimpleBuildItem;
+
+/**
+ * Used internally to relocate namespaces for backward compatibility
+ */
+public final class RelocationImportMapBuildItem extends SimpleBuildItem {
+
+    private final Map<String, String> relocations = new HashMap<>();
+
+    public RelocationImportMapBuildItem() {
+
+    }
+
+    public void add(String from, String to) {
+        this.relocations.put(from, to);
+    }
+
+    public Map<String, String> getRelocationMap() {
+        return relocations;
+    }
+}

extensions/vertx-http/dev-ui-resources/pom.xml

@@ -105,6 +105,13 @@
             <scope>runtime</scope>
         </dependency>
 
+        <!-- Qomponent -->
+        <dependency>
+            <groupId>org.mvnpm.at.mvnpm</groupId>
+            <artifactId>qomponent</artifactId>
+            <scope>runtime</scope>
+        </dependency>
+
         <!-- Polyfill for importmaps -->
         <dependency>
             <groupId>org.mvnpm</groupId>