fix #33009

(cherry picked from commit c1cd739)
quarkusio · May 9, 2023 · de72415 · de72415
1 parent 7b415fe
commit de72415
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 35 deletions.
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui/qui-badge.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui/qui-badge.js
@@ -95,7 +95,6 @@ export class QuiBadge extends LitElement {
         this.background = null;
         this.color = null;
         this.small = false;
-        this.small = false;
         this.primary = false;
         this.pill = false;
         this.clickable = false;

diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extensions.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extensions.js
@@ -5,6 +5,8 @@ import { devuiState } from 'devui-state';
 import { observeState } from 'lit-element-state';
 import 'qwc/qwc-extension.js';
 import 'qwc/qwc-extension-link.js';
+import 'qui-badge';
+
 
 /**
  * This component create cards of all the extensions
@@ -40,23 +42,26 @@ export class QwcExtensions extends observeState(LitElement) {
             flex-flow: column wrap;
             padding-top: 5px;
         }
-    `;
+         .float-right {
+            align-self: flex-end;
+        }
+       `;
 
     render() {
         return html`<div class="grid">
             ${devuiState.cards.active.map(extension => this._renderActive(extension))}            
             ${devuiState.cards.inactive.map(extension => this._renderInactive(extension))}
           </div>`;
     }
-    
+
     _renderActive(extension){
-        extension.cardPages.forEach(page => {   
+        extension.cardPages.forEach(page => {
             if(page.embed){ // we need to register with the router
                 import(page.componentRef);
                 this.routerController.addRouteForExtension(page);
             }
         });
-        
+
         return html`
                 <qwc-extension 
                     clazz="active"
@@ -101,21 +106,24 @@ export class QwcExtensions extends observeState(LitElement) {
                                 namespace="${extension.namespace}">
 
                              </${extension.card.componentName}>`;
-        
+
         return html`${unsafeHTML(customCardCode)}`;
-        
+
     }
 
     _renderDefaultCardContent(extension){
-
-        return html`<div class="card-content" slot="content">
-                        <span class="description">${extension.description}</span>
-                            ${this._renderCardLinks(extension)}
-                    </div>`;
+        return html`
+            <div class="card-content" slot="content">
+                <span class="description">
+                    ${this._renderExperimentalBadge(extension)}
+                    ${extension.description}
+                </span>
+                ${this._renderCardLinks(extension)}
+            </div>`;
     }
 
     _renderCardLinks(extension){
-        
+
         return html`${extension.cardPages.map(page => html`
                             <qwc-extension-link slot="link"
                                 namespace="${extension.namespace}"
@@ -135,28 +143,33 @@ export class QwcExtensions extends observeState(LitElement) {
 
     _renderInactive(extension){
         if(extension.unlisted === "false"){
-            return html`
-                <qwc-extension
-                    clazz="inactive"
-                    name="${extension.name}" 
-                    description="${extension.description}" 
-                    guide="${extension.guide}"
-                    namespace="${extension.namespace}"
-                    artifact="${extension.artifact}"
-                    shortName="${extension.shortName}"
-                    keywords="${extension.keywords}"
-                    status="${extension.status}"
-                    configFilter="${extension.configFilter}"
-                    categories="${extension.categories}"
-                    unlisted="${extension.unlisted}"
-                    builtWith="${extension.builtWith}"
-                    providesCapabilities="${extension.providesCapabilities}"
-                    extensionDependencies="${extension.extensionDependencies}">
-                    <div class="card-content" slot="content">
-                        ${extension.description}
-                    </div>    
-                </qwc-extension>        
-            `;
+            return html`<qwc-extension
+                clazz="inactive"
+                name="${extension.name}" 
+                description="${extension.description}" 
+                guide="${extension.guide}"
+                namespace="${extension.namespace}"
+                artifact="${extension.artifact}"
+                shortName="${extension.shortName}"
+                keywords="${extension.keywords}"
+                status="${extension.status}"
+                configFilter="${extension.configFilter}"
+                categories="${extension.categories}"
+                unlisted="${extension.unlisted}"
+                builtWith="${extension.builtWith}"
+                providesCapabilities="${extension.providesCapabilities}"
+                extensionDependencies="${extension.extensionDependencies}">
+                <div class="card-content" slot="content">
+                    ${this._renderExperimentalBadge(extension)}
+                    ${extension.description}
+                </div>    
+            </qwc-extension>`;
+        }
+    }
+
+    _renderExperimentalBadge(extension){
+        if(extension.status === "experimental") {
+            return html`<qui-badge level="warning" class="float-right" small><span>EXPERIMENTAL</span></qui-badge>`;
         }
     }