Dev UI add label and icon to submenu

Signed-off-by: Phillip Kruger <[email protected]>
quarkusio · Apr 19, 2023 · 99135b8 · 99135b8
1 parent fed0ac7
commit 99135b8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/...ons/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/router-controller.js b/...ons/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/router-controller.js
@@ -84,7 +84,8 @@ export class RouterController {
 
                     subMenus.push({
                         "path" : pageRef,
-                        "name" : pageForNamespace.title
+                        "name" : pageForNamespace.title, // deprecate ?
+                        "page" : pageForNamespace
                     });
                 });
                 return {

diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-header.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-header.js
@@ -8,6 +8,7 @@ import { devuiState } from 'devui-state';
 import '@vaadin/menu-bar';
 import '@vaadin/tabs';
 import '@vaadin/button';
+import 'qwc/qwc-extension-link.js';
 
 /**
  * This component represent the Dev UI Header
@@ -236,7 +237,9 @@ export class QwcHeader extends observeState(LitElement) {
         if(subMenu){
             this._rightSideNav = html`<vaadin-tabs selected="${subMenu.index}">
                                     ${subMenu.links.map(link =>
-                                        html`<vaadin-tab><a title="${link.path}" href="${link.path}">${link.name}</a></vaadin-tab>`
+                                        html`<vaadin-tab>
+                                                ${this._renderSubMenuLink(link)}
+                                            </vaadin-tab>`
                                     )}
                                 </vaadin-tabs>`;
         }else{
@@ -248,6 +251,25 @@ export class QwcHeader extends observeState(LitElement) {
         }
     }
 
+    _renderSubMenuLink(link){
+
+        let relativePath = link.page.id.replace(link.page.namespace + "/", ""); 
+
+        return html`<qwc-extension-link
+            namespace="${link.page.namespace}"
+            extensionName="${link.page.extensionId}"
+            iconName="${link.page.icon}"
+            displayName="${link.page.title}"
+            staticLabel="${link.page.staticLabel}"
+            dynamicLabel="${link.page.dynamicLabel}"
+            streamingLabel="${link.page.streamingLabel}"
+            path="${relativePath}"
+            ?embed=${link.page.embed}
+            externalUrl="${link.page.metadata.externalUrl}"
+            webcomponent="${link.page.componentLink}" >
+        </qwc-extension-link>`;
+    }
+
     _reload(e) {
         fetch(devuiState.applicationInfo.contextRoot).then(response => {
             this.routerController.goHome();