@fleetbase/ember-ui 0.3.11 → 0.3.12

package/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();

package/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}}

package/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 ?? '';
+        }
     }
 
     /**

package/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">

package/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>

package/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;
     }
 
     /**

package/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.

package/addon/components/layout/sidebar/item.hbs

@@ -9,7 +9,7 @@
     >
         <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}}
@@ -17,7 +17,7 @@
         <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}}">

package/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}} />

package/addon/components/lazy-engine-component.js

@@ -0,0 +1,136 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { assert } from '@ember/debug';
+import { task } from 'ember-concurrency';
+import { ExtensionComponent } from '@fleetbase/ember-core/contracts';
+
+/**
+ * LazyEngineComponent
+ *
+ * A wrapper component that handles lazy loading of components from engines.
+ * This component takes an ExtensionComponent definition and:
+ * 1. Triggers lazy loading of the engine if not already loaded
+ * 2. Looks up the component from the loaded engine
+ * 3. Renders the component with all passed arguments
+ *
+ * This enables cross-engine component usage while preserving lazy loading.
+ *
+ * @class LazyEngineComponent
+ * @extends Component
+ *
+ * @example
+ * <LazyEngineComponent
+ *   @componentDef={{this.menuItem.component}}
+ *   @model={{@model}}
+ *   @onChange={{@onChange}}
+ * />
+ */
+export default class LazyEngineComponent extends Component {
+    @service('universe/extension-manager') extensionManager;
+    @tracked resolvedComponent = null;
+    @tracked component = this.args.component;
+    @tracked params = this.args.params ?? {};
+    @tracked error = null;
+
+    constructor() {
+        super(...arguments);
+        this.loadComponent.perform();
+    }
+
+    @action handleChange(el, [component, params = {}]) {
+        this.component = component;
+        this.params = params;
+        this.loadComponent.perform();
+    }
+
+    /**
+     * Load the component from the engine
+     *
+     * @method loadComponent
+     * @private
+     */
+    @task *loadComponent() {
+        let componentDef = this.component;
+
+        // Handle string form component definition
+        if (typeof componentDef === 'string' && componentDef.startsWith('#extension-component')) {
+            /* eslint-disable no-unused-vars */
+            const [_, engineName, componentPathOrName] = componentDef.split(':');
+            componentDef = new ExtensionComponent(engineName, componentPathOrName);
+        }
+
+        // Handle backward compatibility: if componentDef is already a class or string, use it directly
+        if (typeof componentDef === 'function' || typeof componentDef === 'string') {
+            this.resolvedComponent = componentDef;
+            return;
+        }
+
+        // Handle ExtensionComponent definitions
+        if (componentDef && componentDef.engine) {
+            try {
+                const { engine: engineName, path: componentPath, class: componentClass, isClass } = componentDef;
+
+                assert(`LazyEngineComponent requires an engine name in componentDef`, engineName);
+
+                // Ensure engine is loaded
+                const engineInstance = yield this.extensionManager.ensureEngineLoaded(engineName);
+                if (!engineInstance) {
+                    throw new Error(`Failed to load engine '${engineName}'`);
+                }
+
+                // Handle component class (immediate)
+                if (isClass && componentClass) {
+                    // Register component class to engine if not already registered
+                    const dasherized = componentClass.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+                    const componentKey = `component:${dasherized}`;
+
+                    if (!engineInstance.hasRegistration(componentKey)) {
+                        engineInstance.register(componentKey, componentClass);
+                        // Also register with original name
+                        engineInstance.register(`component:${componentClass.name}`, componentClass);
+                    }
+
+                    this.resolvedComponent = componentClass;
+                    return;
+                }
+
+                // Handle component path (lazy)
+                if (componentPath) {
+                    // Clean the path and lookup the component
+                    const cleanPath = componentPath.replace(/^components\//, '');
+
+                    // First, check if the component is registered in the engine
+                    const componentKey = `component:${cleanPath}`;
+                    if (!engineInstance.hasRegistration(componentKey)) {
+                        throw new Error(`Component '${cleanPath}' is not registered in engine '${engineName}'. ` + `Make sure the component exists and is properly exported.`);
+                    }
+
+                    // Lookup the component factory (not the instance)
+                    const componentFactory = engineInstance.factoryFor(componentKey);
+                    if (!componentFactory) {
+                        throw new Error(`Component factory for '${cleanPath}' not found in engine '${engineName}'. ` + `The component may be registered but not properly defined.`);
+                    }
+
+                    // Get the component class from the factory
+                    const resolvedClass = componentFactory.class;
+                    if (!resolvedClass) {
+                        throw new Error(`Component class for '${cleanPath}' is undefined in engine '${engineName}'.`);
+                    }
+
+                    this.resolvedComponent = resolvedClass;
+                    return;
+                }
+
+                throw new Error('ExtensionComponent requires either a path or class');
+            } catch (e) {
+                console.error('LazyEngineComponent: Error loading component:', e);
+                this.error = e.message;
+            }
+        } else {
+            // Invalid component definition
+            this.error = 'Invalid component definition. Expected an ExtensionComponent with engine and path/class properties.';
+        }
+    }
+}

package/addon/components/load-engine.hbs

@@ -0,0 +1 @@
+{{yield this.engineInstance this.isLoading this.error}}

package/addon/components/load-engine.js

@@ -0,0 +1,82 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { assert, debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
+
+/**
+ * LoadEngine Component
+ *
+ * A component that handles lazy loading of engines and yields the engine instance.
+ * This provides a flexible pattern for working with engine components.
+ *
+ * @class LoadEngineComponent
+ * @extends Component
+ *
+ * @example Basic usage
+ * <LoadEngine @engineName="@fleetbase/fleetops-engine" as |engine|>
+ *   {{#if engine}}
+ *     {{component "admin/navigator-app" engineInstance=engine}}
+ *   {{/if}}
+ * </LoadEngine>
+ *
+ * @example With loading and error states
+ * <LoadEngine @engineName="@fleetbase/fleetops-engine" as |engine isLoading error|>
+ *   {{#if isLoading}}
+ *     <LoadingSpinner />
+ *   {{else if error}}
+ *     <ErrorMessage @message={{error}} />
+ *   {{else if engine}}
+ *     {{component "admin/navigator-app" engineInstance=engine}}
+ *   {{/if}}
+ * </LoadEngine>
+ */
+export default class LoadEngineComponent extends Component {
+    @service('universe/extension-manager') extensionManager;
+    @tracked engineInstance = null;
+    @tracked error = null;
+
+    constructor() {
+        super(...arguments);
+        this.loadEngine.perform();
+    }
+
+    /**
+     * Load the engine
+     *
+     * @method loadEngine
+     * @private
+     */
+    @task *loadEngine() {
+        const { engineName } = this.args;
+
+        assert(`LoadEngine requires an @engineName argument`, engineName);
+
+        try {
+            debug(`[LoadEngine] Loading engine: ${engineName}`);
+
+            // Trigger lazy loading of the engine
+            const engine = yield this.extensionManager.ensureEngineLoaded(engineName);
+
+            if (!engine) {
+                throw new Error(`Failed to load engine '${engineName}'`);
+            }
+
+            debug(`[LoadEngine] Engine loaded successfully: ${engineName}`);
+            this.engineInstance = engine;
+        } catch (e) {
+            console.error('[LoadEngine] Error loading engine:', e);
+            this.error = e.message;
+        }
+    }
+
+    /**
+     * Whether the engine is currently loading
+     *
+     * @computed isLoading
+     * @returns {Boolean}
+     */
+    get isLoading() {
+        return this.loadEngine.isRunning;
+    }
+}

package/addon/components/modals/query-builder-computed-column-editor.js

@@ -46,22 +46,117 @@ export default class ModalsQueryBuilderComputedColumnEditorComponent extends Com
 
     get allowedFunctions() {
         return [
+            // Date/Time Functions
             'DATEDIFF',
             'DATE_ADD',
             'DATE_SUB',
+            'NOW',
+            'CURDATE',
+            'CURTIME',
+            'YEAR',
+            'MONTH',
+            'DAY',
+            'HOUR',
+            'MINUTE',
+            'SECOND',
+            'DATE_FORMAT',
+            'LAST_DAY',
+            'DAYOFWEEK',
+            'DAYOFMONTH',
+            'DAYOFYEAR',
+            'WEEK',
+            'WEEKDAY',
+            'QUARTER',
+            'TIMESTAMPDIFF',
+            'TIMESTAMPADD',
+            'FROM_UNIXTIME',
+            'UNIX_TIMESTAMP',
+            'STR_TO_DATE',
+            'MAKEDATE',
+            'ADDDATE',
+            'SUBDATE',
+
+            // String Functions
             'CONCAT',
-            'COALESCE',
-            'IFNULL',
-            'CASE/WHEN/THEN/ELSE/END',
-            'LEAST',
-            'GREATEST',
-            'ROUND',
-            'ABS',
+            'CONCAT_WS',
+            'SUBSTRING',
+            'SUBSTR',
+            'REPLACE',
             'UPPER',
             'LOWER',
             'TRIM',
+            'LTRIM',
+            'RTRIM',
             'LENGTH',
+            'CHAR_LENGTH',
+            'LEFT',
+            'RIGHT',
+            'LPAD',
+            'RPAD',
+            'REVERSE',
+            'LOCATE',
+            'POSITION',
+            'INSTR',
+            'STRCMP',
+
+            // Numeric Functions
+            'ROUND',
+            'ABS',
+            'CEIL',
+            'CEILING',
+            'FLOOR',
+            'TRUNCATE',
+            'MOD',
+            'POW',
+            'POWER',
+            'SQRT',
+            'SIGN',
+            'RAND',
+            'PI',
+            'EXP',
+            'LN',
+            'LOG',
+            'LOG10',
+            'LOG2',
+            'DEGREES',
+            'RADIANS',
+            'SIN',
+            'COS',
+            'TAN',
+            'ASIN',
+            'ACOS',
+            'ATAN',
+            'ATAN2',
+
+            // Conditional/Logic Functions
+            'CASE',
+            'WHEN',
+            'THEN',
+            'ELSE',
+            'END',
+            'IF',
+            'IFNULL',
             'NULLIF',
+            'COALESCE',
+
+            // Comparison Functions
+            'LEAST',
+            'GREATEST',
+
+            // Aggregate Functions
+            'COUNT',
+            'SUM',
+            'AVG',
+            'MIN',
+            'MAX',
+            'GROUP_CONCAT',
+
+            // Type Conversion
+            'CAST',
+            'CONVERT',
+
+            // Other Utility Functions
+            'INTERVAL',
         ];
     }
 

package/addon/components/pill.js

@@ -19,7 +19,6 @@ export default class PillComponent extends Component {
     }
 
     @action handleClick() {
-        console.log('handleClick called!', ...arguments);
         if (typeof this.args.onClick === 'function') {
             if (this.args.resource) {
                 this.args.onClick(this.args.resource, ...arguments);

package/addon/components/query-builder/computed-columns.js

@@ -53,10 +53,8 @@ export default class QueryBuilderComputedColumnsComponent extends Component {
                 modal.startLoading();
 
                 const editorComponent = modal.getOption('modalComponentInstance');
-                console.log('[editorComponent]', editorComponent);
                 if (editorComponent) {
                     const isValid = await editorComponent.validateExpression();
-                    console.log('[isValid]', isValid);
                     if (isValid) {
                         const computedColumn = editorComponent.save();
                         this.saveComputedColumn(computedColumn);

package/addon/components/registry-yield.hbs

@@ -1,3 +1,9 @@
 {{#each this.yieldables as |item|}}
-    {{yield item @context}}
+    {{#if this.isComponent}}
+        <LazyEngineComponent @component={{item}} as |resolvedComponent|>
+            {{yield resolvedComponent @context}}
+        </LazyEngineComponent>
+    {{else}}
+        {{yield item @context}}
+    {{/if}}
 {{/each}}