@fleetbase/ember-ui 0.3.7 → 0.3.9

package/addon/components/custom-fields-manager.js

@@ -33,7 +33,8 @@ export default class CustomFieldsManagerComponent extends Component {
         super(...arguments);
         this.subjects = subjects ?? [];
         next(() => {
-            if (!this.subjects) return;
+            if (!this.subjects || this.subjects.length === 0) return;
+            // Load the first subject immediately
             this.loadCustomFields.perform(this.subjects[0]);
         });
     }
@@ -51,7 +52,44 @@ export default class CustomFieldsManagerComponent extends Component {
         }
     }
 
+    /**
+     * Restore custom fields from cache for subjects that haven't been loaded yet
+     * This method checks the CustomFieldsRegistry service cache and restores
+     * previously loaded data to avoid losing it during navigation
+     */
+    async restoreFromCache() {
+        if (!this.subjects || this.subjects.length <= 1) return;
+
+        // Skip the first subject as it's loaded in constructor
+        const subjectsToRestore = this.subjects.slice(1);
+
+        for (const subject of subjectsToRestore) {
+            try {
+                const company = await this.currentUser.loadCompany();
+                const loadOptions = {
+                    groupedFor: `${underscore(subject.model)}_custom_field_group`,
+                    fieldFor: subject.type,
+                };
+
+                // Check if we have a cached manager for this subject
+                const cachedManager = this.customFieldsRegistry.forSubject(company, { loadOptions });
+
+                // Only restore if we have cached groups data
+                if (cachedManager && cachedManager.groups && cachedManager.groups.length > 0) {
+                    this.#updateSubject(subject, (s) => {
+                        return { ...s, groups: cachedManager.groups };
+                    });
+                }
+            } catch (err) {
+                // Silently continue if cache restore fails for a subject
+                console.warn(`Failed to restore cache for subject ${subject.model}:`, err);
+            }
+        }
+    }
+
     @task *loadCustomFields(subject) {
+        if (!subject) return;
+
         try {
             const company = yield this.currentUser.loadCompany();
             const customFieldsManager = yield this.customFieldsRegistry.loadSubjectCustomFields.perform(company, {
@@ -60,12 +98,14 @@ export default class CustomFieldsManagerComponent extends Component {
                     fieldFor: subject.type,
                 },
             });
+
             this.#updateSubject(subject, (s) => {
                 return { ...s, groups: customFieldsManager.customFieldGroups };
             });
 
             return customFieldsManager;
         } catch (err) {
+            console.error(`❌ Failed to load custom fields for ${subject.model}:`, err);
             this.notifications.serverError(err);
         }
     }
@@ -127,7 +167,7 @@ export default class CustomFieldsManagerComponent extends Component {
 
                 try {
                     await group.destroyRecord();
-                    await this.loadCustomFields.perform(subject);
+                    await this.loadCustomFields.perform(subject, true); // Force reload after deletion
                     modal.done();
                 } catch (error) {
                     this.notifications.serverError(error);
@@ -151,7 +191,7 @@ export default class CustomFieldsManagerComponent extends Component {
 
                 try {
                     await customField.destroyRecord();
-                    await this.loadCustomFields.perform(subject);
+                    await this.loadCustomFields.perform(subject, true); // Force reload after deletion
                     modal.done();
                 } catch (error) {
                     this.notifications.serverError(error);
@@ -161,6 +201,13 @@ export default class CustomFieldsManagerComponent extends Component {
         });
     }
 
+    @action onTabChange(subject) {
+        // Ensure custom fields are loaded when switching tabs
+        if (subject && (!subject.groups || subject.groups.length === 0)) {
+            this.loadCustomFields.perform(subject);
+        }
+    }
+
     #addCustomFieldToGroup(subject, customField, group) {
         this.#updateGroupOnSubject(subject, group.id, (g) => {
             const current = isArray(g.customFields) ? g.customFields : [];
@@ -207,12 +254,8 @@ export default class CustomFieldsManagerComponent extends Component {
     #updateSubject(subject, updater) {
         if (!subject) return;
 
-        // Try to locate by object identity first; fallback to stable keys
-        const idKey = 'id' in subject ? 'id' : 'model' in subject ? 'model' : null;
-        const idx = this.subjects.findIndex((s) => {
-            if (s === subject) return true;
-            return idKey ? s?.[idKey] === subject?.[idKey] : false;
-        });
+        // Find by model property since tab objects have extra properties
+        const idx = this.subjects.findIndex((s) => s?.model === subject?.model);
 
         if (idx === -1) return;
 

package/addon/components/dashboard.js

@@ -23,7 +23,7 @@ export default class DashboardComponent extends Component {
      * Creates an instance of DashboardComponent.
      * @memberof DashboardComponent
      */
-    constructor(owner, { defaultDashboardId = 'dashboard', defaultDashboardName = 'Default Dashboard', showPanelWhenZeroWidgets = false, extension = 'core' }) {
+    constructor(owner, { defaultDashboardId = 'dashboard', defaultDashboardName = 'Default Dashboard', showPanelWhenZeroWidgets = false, extension = 'core' } = {}) {
         super(...arguments);
         this.dashboard.reset(); // ensure service is reset when re-rendering
         next(() => {

package/addon/components/modals/resend-verification-email.hbs

@@ -1,24 +1,9 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
-        <div class="bg-blue-50 rounded shadow-sm border-l-4 border-blue-400 p-4 mb-5">
-            <div class="flex">
-                <div class="flex-shrink-0">
-                    <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                        <path
-                            fill-rule="evenodd"
-                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                            clip-rule="evenodd"
-                        ></path>
-                    </svg>
-                </div>
-                <div class="ml-3 flex items-center">
-                    <span class="font-extrabold text-blue-800">Verify your email address</span>
-                </div>
-            </div>
-            <div class="py-3">
-                <p class="text-blue-700">Re-verify your email address and click Send to continue.</p>
-            </div>
-        </div>
+        <InfoBlock @type="info" @icon="lightbulb" @iconSize="lg" class="mb-5">
+            <div class="font-extrabold">Verify your email address.</div>
+            <div>Re-verify your email address and click Send to continue.</div>
+        </InfoBlock>
 
         <InputGroup
             @type="email"

package/addon/components/model-coordinates-input.hbs

@@ -1,6 +1,6 @@
 <CoordinatesInput
     @value={{if @locationProperty (get @model @locationProperty) @model.location}}
-    @onChange={{this.updatePlaceCoordinates}}
+    @onChange={{this.updateCoordinates}}
     @onGeocode={{this.onAutocomplete}}
     @onUpdatedFromMap={{perform this.reverseGeocode}}
     @onInit={{this.setCoordinatesInput}}

package/addon/components/pill.hbs

@@ -0,0 +1,48 @@
+<div class="fleetbase-pill" ...attributes>
+    <a href="javascript:;" class="flex flex-row space-x-2 {{@anchorClass}}" {{on "click" this.handleClick}}>
+        <div class="relative shrink-0 {{@imageWrapperClass}}">
+            {{#if (has-block "image")}}
+                {{yield @resource to="image"}}
+            {{else}}
+                <Image
+                    src={{@imageSrc}}
+                    @fallbackSrc={{or @imageFallback (config (concat "defaultValues." @fallbackImageType)) (config "defaultValues.placeholderImage")}}
+                    width={{or @imageSize @imageWidth "28"}}
+                    height={{or @imageSize @imageHeight "28"}}
+                    class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md {{@imageClass}}"
+                    alt={{or @imageAlt this.resourceName}}
+                />
+                {{#if @showOnlineIndicator}}
+                    <FaIcon
+                        @icon="circle"
+                        @size="2xs"
+                        class="absolute left-0 top-0 h-2 w-2 {{if (get @resource (or @onlinePath 'online')) 'text-green-500' 'text-yellow-200'}} {{@onlineIndicatorClass}}"
+                    />
+                {{/if}}
+                {{yield @resource to="image"}}
+            {{/if}}
+        </div>
+        <div class={{@contentWrapperClass}}>
+            {{#if (has-block)}}
+                {{yield @resource}}
+            {{else}}
+                <div class="text-sm {{@titleClass}}">{{n-a @title this.resourceName}}</div>
+                {{#if @subtitle}}
+                    <div class="text-xs text-gray-400 dark:text-gray-500 {{@subtitleClass}}">{{n-a @subtitle}}</div>
+                {{/if}}
+                {{yield @resource}}
+            {{/if}}
+        </div>
+        {{#if (has-block "tooltip")}}
+            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPosition "top"}}>
+                <InputInfo>
+                    {{yield @resource to="tooltip"}}
+                </InputInfo>
+            </Attach::Tooltip>
+        {{else if @tooltipComponent}}
+            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPosition "top"}}>
+                {{component @tooltipComponent}}
+            </Attach::Tooltip>
+        {{/if}}
+    </a>
+</div>

package/addon/components/pill.js

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+import { action, get } from '@ember/object';
+import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+
+export default class PillComponent extends Component {
+    /* eslint-disable ember/no-get */
+    get resourceName() {
+        const record = this.args.resource;
+        if (!record) return 'resource';
+
+        return (
+            get(record, this.args.namePath ?? 'name') ??
+            get(record, 'display_name') ??
+            get(record, 'displayName') ??
+            get(record, 'tracking') ??
+            get(record, 'public_id') ??
+            getModelName(record)
+        );
+    }
+
+    @action handleClick() {
+        console.log('handleClick called!', ...arguments);
+        if (typeof this.args.onClick === 'function') {
+            if (this.args.resource) {
+                this.args.onClick(this.args.resource, ...arguments);
+            } else {
+                this.args.onClick(...arguments);
+            }
+        }
+    }
+}

package/addon/components/tab-navigation.hbs

@@ -2,11 +2,15 @@
 <div class="tab-navigation {{@containerClass}}" data-style={{or @style "github"}} data-size={{or @size "md"}}>
     <div class="tab-list justify-between {{@tablistClass}}" role="tablist">
         <div class="flex flex-row items-center" role="tablist">
+            {{#if (has-block "title")}}
+                <div id="tab-navigation-title" class="tab-navigation-title {{@tabTitleWrapperClass}}">
+                    {{yield to="title"}}
+                </div>
+            {{/if}}
             {{#if (has-block "tabs")}}
                 {{yield this to="tabs"}}
             {{else if @tabs}}
                 {{#each this.enhancedTabs as |tab|}}
-
                     {{#if tab.route}}
                         <LinkTo
                             @route={{tab.route}}

package/addon/helpers/is-object-empty.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+import isEmptyObject from '@fleetbase/ember-core/utils/is-empty-object';
+
+export default helper(function isObjectEmpty([subject]) {
+    return isEmptyObject(subject);
+});

package/addon/styles/layout/next.css

@@ -2053,7 +2053,7 @@ body[data-theme='light'] .next-table-wrapper table tfoot tr td {
 }
 
 .field-info-container > .field-name {
-    @apply font-semibold text-gray-700;
+    @apply text-[11px] tracking-wide uppercase font-semibold text-gray-700;
 }
 
 .field-info-container > .field-value {
@@ -2061,7 +2061,7 @@ body[data-theme='light'] .next-table-wrapper table tfoot tr td {
 }
 
 body[data-theme='dark'] .field-info-container > .field-name {
-    @apply text-gray-400;
+    @apply text-gray-500;
 }
 
 body[data-theme='dark'] .field-info-container > .field-value {

package/app/components/pill.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/pill';

package/app/helpers/is-object-empty.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/helpers/is-object-empty';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.3.7",
+    "version": "0.3.9",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",