Migrate dashboard widgets to Web Components #1760

Author: alansemenov

gradle.properties

@@ -6,7 +6,7 @@ projectName=app.main
 
 version=8.0.0-SNAPSHOT
 # xpVersion=version - same as app version
-libAdminUiVersion=6.0.0-SNAPSHOT
+libAdminUiVersion=0.0.0-webcomponents-SNAPSHOT
 
 # Optimizations
 org.gradle.parallel=true

src/main/resources/admin/extensions/shortcuts/shortcuts.html

@@ -1,4 +1,4 @@
-<widget id="widget-shortcuts">
+<div id="widget-shortcuts">
     <script type="module" src="{{jsUrl}}" data-config-script-id="{{configScriptId}}"></script>
     <link rel="stylesheet" href="{{stylesUrl}}" type="text/css" media="all"/>
     <div class="widget-shortcuts-container">
@@ -15,4 +15,4 @@
         </div>
         {{/dashboardIcons}}
     </div>
-</widget>
+</div>

src/main/resources/assets/js/home/DashboardExtension.ts

@@ -0,0 +1,7 @@
+import {CustomElement} from '@enonic/lib-admin-ui/dom/CustomElement';
+
+export class DashboardExtension extends CustomElement {
+    static create(): DashboardExtension {
+        return CustomElement.create('dashboard-extension') as DashboardExtension;
+    }
+}

src/main/resources/assets/js/home/WidgetPanel.ts

@@ -7,7 +7,7 @@ import {LoadMask} from '@enonic/lib-admin-ui/ui/mask/LoadMask';
 import * as Q from 'q';
 import {DashboardWidget} from './resource/widget/DashboardWidget';
 import {GetDashboardWidgetsRequest} from './resource/widget/GetDashboardWidgetsRequest';
-import {WidgetElement, WidgetHelper} from '@enonic/lib-admin-ui/widget/WidgetHelper';
+import {DashboardExtension} from './DashboardExtension';
 
 export class WidgetPanel
     extends DivEl {
@@ -184,17 +184,18 @@ export class WidgetPanel
             });
     }
 
-    private renderWidget(widget: DashboardWidget, widgetContainer: LibAdminElement, html: string): Q.Promise<void> {
-         return WidgetHelper.createFromHtmlAndAppend(html, widgetContainer)
-            .then(({el}: WidgetElement) => {
-                if (widget.hasHeader()) {
-                    el.insertChild(new H5El('widget-header').setHtml(widget.getDisplayName()), 0);
-                }
+    private renderWidget(widget: DashboardWidget, widgetContainer: LibAdminElement, html: string): Promise<void> {
+        const widgetContents = new DivEl('widget-contents');
+
+        if (widget.hasHeader()) {
+            widgetContents.appendChild(new H5El('widget-header').setHtml(widget.getDisplayName()));
+        }
 
-                el.addClass('widget-contents');
-                widgetContainer.addClass('loaded');
+        const extension = DashboardExtension.create();
+        widgetContents.getHTMLElement().appendChild(extension);
+        widgetContainer.appendChild(widgetContents);
+        widgetContainer.addClass('loaded');
 
-                return Q.resolve();
-            });
+        return extension.setHtml(html);
     }
 }

src/main/resources/assets/styles/home/widgets.less

@@ -29,21 +29,26 @@
       .widget-contents {
         width: 100%;
         height: 100%;
-        overflow: auto;
+        overflow: visible;
         box-sizing: border-box;
 
         .widget-header {
           margin: 0 0 0.75em 0;
           font-size: 14px;
           font-weight: normal;
           letter-spacing: 1px;
+          color: @admin-white;
+        }
+
+        dashboard-extension {
+          display: block;
         }
       }
 
       &.loaded {
         margin: 0;
         opacity: 1;
-        transition: opacity 2s;
+        transition: opacity 1s;
 
         &.width-auto {
           width: fit-content;