Fix #627: Dev UI Card

Author: melloware

deployment/pom.xml

@@ -48,6 +48,15 @@
             <groupId>io.quarkus</groupId>
             <artifactId>quarkus-smallrye-jwt-build-deployment</artifactId>
         </dependency>
+        <dependency>
+            <groupId>io.quarkus</groupId>
+            <artifactId>quarkus-vertx-http-deployment</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>io.quarkus</groupId>
+            <artifactId>quarkus-vertx-http-dev-ui-spi</artifactId>
+            <optional>true</optional>
+        </dependency>
         <dependency>
             <groupId>io.quarkiverse.githubapp</groupId>
             <artifactId>quarkus-github-app</artifactId>

deployment/src/main/java/io/quarkiverse/githubapp/deployment/devui/GitHubAppDevUIProcessor.java

@@ -0,0 +1,33 @@
+package io.quarkiverse.githubapp.deployment.devui;
+
+import io.quarkus.deployment.IsDevelopment;
+import io.quarkus.deployment.annotations.BuildProducer;
+import io.quarkus.deployment.annotations.BuildStep;
+import io.quarkus.devui.spi.page.CardPageBuildItem;
+import io.quarkus.devui.spi.page.ExternalPageBuilder;
+import io.quarkus.devui.spi.page.Page;
+import io.quarkus.vertx.http.deployment.NonApplicationRootPathBuildItem;
+
+/**
+ * Dev UI card for displaying important details such as the GitHub App Replay UI.
+ */
+public class GitHubAppDevUIProcessor {
+
+    @BuildStep(onlyIf = IsDevelopment.class)
+    void createDevCard(BuildProducer<CardPageBuildItem> cardPageBuildItemBuildProducer,
+            NonApplicationRootPathBuildItem nonApplicationRootPathBuildItem) {
+        final CardPageBuildItem card = new CardPageBuildItem();
+
+        final String uiPath = nonApplicationRootPathBuildItem.resolvePath("/replay/");
+
+        final ExternalPageBuilder versionPage = Page.externalPageBuilder("Replay UI")
+                .icon("font-awesome-solid:play")
+                .url(uiPath, uiPath)
+                .doNotEmbed();
+        card.addPage(versionPage);
+
+        card.setCustomCard("qwc-github-app-card.js");
+
+        cardPageBuildItemBuildProducer.produce(card);
+    }
+}

deployment/src/main/resources/dev-ui/qwc-github-app-card.js

@@ -0,0 +1,90 @@
+import { LitElement, html, css} from 'lit';
+import { pages } from 'build-time-data';
+import 'qwc/qwc-extension-link.js';
+
+export class QwcGitHubAppCard extends LitElement {
+
+    static styles = css`
+      .identity {
+        display: flex;
+        justify-content: flex-start;
+      }
+
+      .description {
+        padding-bottom: 10px;
+      }
+
+      .logo {
+        padding-bottom: 10px;
+        margin-right: 5px;
+      }
+
+      .card-content {
+        color: var(--lumo-contrast-90pct);
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        padding: 2px 2px;
+        height: 100%;
+      }
+
+      .card-content slot {
+        display: flex;
+        flex-flow: column wrap;
+        padding-top: 5px;
+      }
+    `;
+
+    static properties = {
+        extensionName: {attribute: true},
+        description: {attribute: true},
+        guide: {attribute: true},
+        namespace: {attribute: true},
+    };
+
+
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+    }
+
+    render() {
+        return html`<div class="card-content" slot="content">
+            <div class="identity">
+                <div class="logo">
+                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iOTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00OC44NTQgMEMyMS44MzkgMCAwIDIyIDAgNDkuMjE3YzAgMjEuNzU2IDEzLjk5MyA0MC4xNzIgMzMuNDA1IDQ2LjY5IDIuNDI3LjQ5IDMuMzE2LTEuMDU5IDMuMzE2LTIuMzYyIDAtMS4xNDEtLjA4LTUuMDUyLS4wOC05LjEyNy0xMy41OSAyLjkzNC0xNi40Mi01Ljg2Ny0xNi40Mi01Ljg2Ny0yLjE4NC01LjcwNC01LjQyLTcuMTctNS40Mi03LjE3LTQuNDQ4LTMuMDE1LjMyNC0zLjAxNS4zMjQtMy4wMTUgNC45MzQuMzI2IDcuNTIzIDUuMDUyIDcuNTIzIDUuMDUyIDQuMzY3IDcuNDk2IDExLjQwNCA1LjM3OCAxNC4yMzUgNC4wNzQuNDA0LTMuMTc4IDEuNjk5LTUuMzc4IDMuMDc0LTYuNi0xMC44MzktMS4xNDEtMjIuMjQzLTUuMzc4LTIyLjI0My0yNC4yODMgMC01LjM3OCAxLjk0LTkuNzc4IDUuMDE0LTEzLjItLjQ4NS0xLjIyMi0yLjE4NC02LjI3NS40ODYtMTMuMDM4IDAgMCA0LjEyNS0xLjMwNCAxMy40MjYgNS4wNTJhNDYuOTcgNDYuOTcgMCAwIDEgMTIuMjE0LTEuNjNjNC4xMjUgMCA4LjMzLjU3MSAxMi4yMTMgMS42MyA5LjMwMi02LjM1NiAxMy40MjctNS4wNTIgMTMuNDI3LTUuMDUyIDIuNjcgNi43NjMuOTcgMTEuODE2LjQ4NSAxMy4wMzggMy4xNTUgMy40MjIgNS4wMTUgNy44MjIgNS4wMTUgMTMuMiAwIDE4LjkwNS0xMS40MDQgMjMuMDYtMjIuMzI0IDI0LjI4MyAxLjc4IDEuNTQ4IDMuMzE2IDQuNDgxIDMuMzE2IDkuMTI2IDAgNi42LS4wOCAxMS44OTctLjA4IDEzLjUyNiAwIDEuMzA0Ljg5IDIuODUzIDMuMzE2IDIuMzY0IDE5LjQxMi02LjUyIDMzLjQwNS0yNC45MzUgMzMuNDA1LTQ2LjY5MUM5Ny43MDcgMjIgNzUuNzg4IDAgNDguODU0IDB6IiBmaWxsPSIjZmZmIi8+PC9zdmc+"
+                                       alt="${this.extensionName}" 
+                                       title="${this.extensionName}"
+                                       width="32" 
+                                       height="32">
+                </div>
+                <div class="description">${this.description}</div>
+            </div>
+            ${this._renderCardLinks()}
+        </div>
+        `;
+    }
+
+    _renderCardLinks(){
+        return html`${pages.map(page => html`
+                            <qwc-extension-link slot="link"
+                                namespace="${this.namespace}"
+                                extensionName="${this.extensionName}"
+                                iconName="${page.icon}"
+                                displayName="${page.title}"
+                                staticLabel="${page.staticLabel}"
+                                dynamicLabel="${page.dynamicLabel}"
+                                streamingLabel="${page.streamingLabel}"
+                                path="${page.id}"
+                                ?embed=${page.embed}
+                                externalUrl="${page.metadata.externalUrl}"
+                                webcomponent="${page.componentLink}" >
+                            </qwc-extension-link>
+                        `)}`;
+    }
+
+}
+customElements.define('qwc-github-app-card', QwcGitHubAppCard);

runtime/pom.xml

@@ -54,6 +54,10 @@
             <groupId>io.quarkus</groupId>
             <artifactId>quarkus-smallrye-jwt-build</artifactId>
         </dependency>
+        <dependency>
+            <groupId>io.quarkus</groupId>
+            <artifactId>quarkus-vertx-http</artifactId>
+        </dependency>
         <dependency>
             <groupId>com.fasterxml.jackson.dataformat</groupId>
             <artifactId>jackson-dataformat-yaml</artifactId>