feat: Update for Universe Service Refactor

addon/components/chart.js

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { debug } from '@ember/debug';
 import Chart, { _adapters } from 'chart.js/auto';
 import {
     parse,
@@ -46,13 +47,7 @@ import {
 
 export default class ChartComponent extends Component {
     @tracked chart;
-    @tracked isLoading;
-
-    constructor() {
-        super(...arguments);
-
-        this.isLoading = this.args.isLoading === true;
-    }
+    @tracked isLoading = this.args.isLoading;
 
     @action async renderChart(ctx) {
         const options = {
@@ -65,9 +60,14 @@ export default class ChartComponent extends Component {
         };
 
         if (typeof options.data.datasets === 'function') {
-            this.isLoading = true;
-            options.data.datasets = await options.data.datasets();
-            this.isLoading = false;
+            try {
+                this.isLoading = true;
+                options.data.datasets = await options.data.datasets();
+            } catch (err) {
+                debug('Error loading Chart dataset: ' + err.message);
+            } finally {
+                this.isLoading = false;
+            }
         }
 
         this.useDateFns();

addon/components/click-to-reveal.hbs

@@ -1,4 +1,4 @@
-<div class="relative click-to-reveal {{if this.isVisible 'is-visible' 'is-blurred'}}" {{on "click" (fn this.copy @value)}} ...attributes>
+<div class="relative click-to-reveal {{this.wrapperClass}} {{if this.isVisible 'is-visible' 'is-blurred'}}" {{on "click" (fn this.copy @value)}} ...attributes>
     <span class="click-to-reveal--hidden-value">
         {{#if (has-block)}}
             {{yield}}

addon/components/click-to-reveal.js

@@ -4,33 +4,11 @@ import { action, computed } from '@ember/object';
 import { later } from '@ember/runloop';
 
 export default class ClickToRevealComponent extends ClickToCopyComponent {
-    /**
-     * The visiblity state of the value
-     *
-     * @var {Boolean}
-     */
     @tracked isVisible = false;
-
-    /**
-     * The loading state of the reveal process
-     *
-     * @var {Boolean}
-     */
     @tracked isLoading = false;
-
-    /**
-     * The loading timing
-     *
-     * @var {Integer}
-     */
     @tracked timeout = 600;
-
-    /**
-     * If click to copy should be enabled.
-     *
-     * @var {Boolean}
-     */
     @tracked clickToCopy = false;
+    @tracked wrapperClass = this.args.wrapperClass ?? '';
 
     /**
      * Setup the component
@@ -47,6 +25,10 @@ export default class ClickToRevealComponent extends ClickToCopyComponent {
         if (column && column.cellComponentArgs) {
             this.clickToCopy = column.cellComponentArgs.clickToCopy ?? false;
         }
+
+        if (column && column.cellComponentArgs) {
+            this.wrapperClass = column.cellComponentArgs.wrapperClass ?? '';
+        }
     }
 
     /**

addon/components/dashboard.js

@@ -17,7 +17,6 @@ export default class DashboardComponent extends Component {
     @service modalsManager;
     @service fetch;
     @service dashboard;
-    @service universe;
 
     /**
      * Creates an instance of DashboardComponent.

addon/components/dashboard/create.hbs

@@ -1,10 +1,12 @@
 <div class="fleetbase-dashboard-grid" ...attributes>
     <GridStack @options={{this.gridOptions}} @onChange={{this.onChangeGrid}}>
         {{#each @dashboard.widgets as |widget|}}
-            {{#let (resolve-component widget.component) as |ResolvedComponent|}}
-                {{#if ResolvedComponent}}
+            {{#let (resolve-component widget.component) as |componentDefinition|}}
+                {{#if componentDefinition}}
                     <GridStackItem id={{widget.id}} @options={{spread-widget-options (hash id=widget.id options=widget.grid_options)}} class="relative">
-                        {{component ResolvedComponent widget=widget options=widget.options}}
+                        <LazyEngineComponent @component={{componentDefinition}} as |resolvedComponent|>
+                            {{component resolvedComponent widget=widget options=widget.options}}
+                        </LazyEngineComponent>
 
                         {{#if @isEdit}}
                             <div class="absolute top-2 right-2">

addon/components/dashboard/widget-panel.hbs

@@ -1,25 +1,35 @@
 <Overlay @isOpen={{@isOpen}} @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width={{or this.width @width "400px"}}>
-    <Overlay::Header @title={{t "component.dashboard-widget-panel.select-widgets"}} @hideStatusDot={{true}} @titleWrapperClass="leading-5">
+    <Overlay::Header @title={{t "dashboard-widget-panel.select-widgets"}} @hideStatusDot={{true}} @titleWrapperClass="leading-5 text-gray-800 dark:text-white">
         <:actions>
             <div class="flex flex-1 justify-end">
-                <Button @type="default" @icon="times" @helpText={{t "component.dashboard-widget-panel.close-and-save"}} @onClick={{this.onPressClose}} />
+                <Button @type="default" @icon="times" @helpText={{t "dashboard-widget-panel.close-and-save"}} @onClick={{this.onPressClose}} />
             </div>
         </:actions>
     </Overlay::Header>
 
-    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4">
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-1 space-y-4 pt-2">
+        <div>
+            <Input
+                @type="text"
+                @value={{this.searchQuery}}
+                placeholder={{or (t "dashboard-widget-panel.filter-widgets") "Filter widgets by keyword"}}
+                class="w-full form-input form-input-sm"
+                {{on "input" this.updateSearchQuery}}
+            />
+        </div>
+
         <div class="grid grid-cols-1 gap-4 text-xs dark:text-gray-100">
             {{#each this.availableWidgets as |widget|}}
                 <div
                     class="rounded-lg border border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300 ease-in-out shadow-md px-4 py-2 cursor-pointer"
-                    {{on "click" (fn this.addWidgetToDashboard widget)}}
+                    {{on "click" (perform this.addWidgetToDashboard widget)}}
                 >
-                    <div class="flex flex-row items-center leading-6 mb-2.5">
-                        <div class="w-8 flex items-center justify-start">
+                    <div class="flex flex-row items-center leading-7 mb-2">
+                        <div class="w-7 flex items-center justify-start">
                             <FaIcon @icon={{widget.icon}} class="text-lg text-gray-600 dark:text-gray-300" />
                         </div>
                         <p class="text-sm truncate font-semibold dark:text-gray-100 text-gray-800">
-                            {{t "component.dashboard-widget-panel.widget-name" widgetName=widget.name}}
+                            {{t "dashboard-widget-panel.widget-name" widgetName=widget.name}}
                         </p>
                     </div>
                     <div>

addon/components/dashboard/widget-panel.js

@@ -2,23 +2,72 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import { ExtensionComponent } from '@fleetbase/ember-core/contracts';
 
 export default class DashboardWidgetPanelComponent extends Component {
-    @service universe;
-    @tracked availableWidgets = [];
+    @service('universe/widget-service') widgetService;
+    @service notifications;
+    @tracked defaultDashboardId = this.args.defaultDashboardId ?? 'dashboard';
     @tracked dashboard;
     @tracked isOpen = true;
-    @service notifications;
+    @tracked searchQuery = '';
 
     /**
      * Constructs the component and applies initial state.
      */
     constructor(owner, { dashboard, defaultDashboardId = 'dashboard' }) {
         super(...arguments);
-        this.availableWidgets = this.universe.getWidgets(defaultDashboardId);
+        this.defaultDashboardId = defaultDashboardId;
         this.dashboard = dashboard;
     }
 
+    /**
+     * Gets available widgets for the dashboard.
+     * Computed as a getter to ensure reactivity when widgets are registered.
+     * @returns {Array} Available widgets
+     */
+    get availableWidgets() {
+        const dashboardId = this.args.defaultDashboardId || this.defaultDashboardId || 'dashboard';
+        const widgets = this.widgetService.getWidgets(dashboardId);
+
+        // Filter widgets by search query
+        if (this.searchQuery && this.searchQuery.trim()) {
+            const query = this.searchQuery.toLowerCase().trim();
+            return widgets.filter((widget) => {
+                const name = (widget.name || '').toLowerCase();
+                const description = (widget.description || '').toLowerCase();
+                return name.includes(query) || description.includes(query);
+            });
+        }
+
+        return widgets;
+    }
+
+    /**
+     * Adds a new available widget to the current dashboard.
+     *
+     * @param {Component|Widget|string} widget
+     * @memberof DashboardWidgetPanelComponent
+     */
+    @task *addWidgetToDashboard(widget) {
+        // If widget is a component definition/class
+        if (typeof widget.component === 'function') {
+            widget.component = widget.component.name;
+        }
+
+        // If using extension component definition
+        if (widget.component instanceof ExtensionComponent) {
+            widget.component = widget.component.toString();
+        }
+
+        try {
+            yield this.dashboard.addWidget(widget);
+        } catch (err) {
+            this.notifications.serverError(err);
+        }
+    }
+
     /**
      * Sets the overlay context.
      *
@@ -33,15 +82,14 @@ export default class DashboardWidgetPanelComponent extends Component {
         }
     }
 
-    @action addWidgetToDashboard(widget) {
-        // If widget is a component definition/class
-        if (typeof widget.component === 'function') {
-            widget.component = widget.component.name;
-        }
-
-        this.args.dashboard.addWidget(widget).catch((error) => {
-            this.notifications.serverError(error);
-        });
+    /**
+     * Updates the search query
+     *
+     * @action
+     * @param {Event} event
+     */
+    @action updateSearchQuery(event) {
+        this.searchQuery = event.target.value;
     }
 
     /**

addon/components/layout/sidebar/item.hbs

@@ -9,15 +9,15 @@
     >
         <div class="next-nav-item-icon-container {{@iconWrapperClass}}">
             {{#if @iconComponent}}
-                {{component @iconComponent options=@iconComponentOptions}}
+                {{component (lazy-engine-component @iconComponent) options=@iconComponentOptions}}
             {{else if @icon}}
                 <FaIcon @prefix={{@iconPrefix}} @icon={{@icon}} @size={{or @iconSize "xs"}} class={{@iconClass}} />
             {{/if}}
         </div>
         <div class="truncate w-10/12 {{@itemWrapperClass}}">{{yield}}</div>
         <div class="next-nav-item-right-side {{@itemRightSideContainerClass}}">
             {{#if @rightSideComponent}}
-                {{component @rightSideComponent context=@rightSideComponentContext}}
+                {{component (lazy-engine-component @rightSideComponent) context=@rightSideComponentContext}}
             {{else}}
                 {{#if @rightSideStatus}}
                     <span class="ml-2 {{@rightSideStatusContainerClass}}">

addon/components/lazy-engine-component.hbs

@@ -0,0 +1,8 @@
+{{#if this.resolvedComponent}}
+    {{#if (has-block)}}
+        {{yield this.resolvedComponent this.params}}
+    {{else}}
+        {{component this.resolvedComponent params=this.params}}
+    {{/if}}
+{{/if}}
+<div {{did-update this.handleChange @component @params}} />