@fleetbase/ember-ui 0.3.8 → 0.3.10

package/addon/components/custom-field/input.hbs

@@ -74,7 +74,7 @@
                         @onFileAdded={{this.onFileAddedHandler}}
                     >
                         <a tabindex={{0}} class="btn btn-default btn-xs cursor-pointer">
-                            <FaIcon @icon="upload" @size="sm" class="mr-2" />{{t "common.select-file"}}
+                            <FaIcon @icon="upload" @size="sm" class="mr-2" />{{t "common.select-field" field=(t "common.file")}}
                         </a>
                     </FileUpload>
                     {{#if this.file}}

package/addon/components/custom-field/input.js

@@ -16,27 +16,53 @@ export default class CustomFieldInputComponent extends Component {
     @tracked value;
     @tracked file;
     @tracked uploadedFile;
-    acceptedFileTypes = [
-        'application/vnd.ms-excel',
-        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-        'application/msword',
-        'application/pdf',
-        'application/x-pdf',
-        'image/jpeg',
-        'image/png',
-        'image/gif',
-        'image/webp',
-        'video/mp4',
-        'video/quicktime',
-        'video/x-msvideo',
-        'video/x-flv',
-        'video/x-ms-wmv',
-        'audio/mpeg',
-        'video/x-msvideo',
-        'application/zip',
-        'application/x-tar',
-    ];
+
+    get acceptedFileTypes() {
+        return [
+            // Excel
+            'application/vnd.ms-excel',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            'application/vnd.ms-excel.sheet.macroenabled.12',
+            // Word / PowerPoint
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+            'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+            'application/msword',
+            // PDF
+            'application/pdf',
+            'application/x-pdf',
+            // Images
+            'image/jpeg',
+            'image/png',
+            'image/gif',
+            'image/webp',
+            // Video
+            'video/mp4',
+            'video/quicktime',
+            'video/x-msvideo',
+            'video/x-flv',
+            'video/x-ms-wmv',
+            // Audio
+            'audio/mpeg',
+            // Archives
+            'application/zip',
+            'application/x-tar',
+            // Json
+            'application/json',
+            'text/json',
+            'application/x-json',
+            // Text documents
+            'text/plain',
+            'text/markdown',
+            'application/rtf',
+            'text/csv',
+            'text/tab-separated-values',
+            'text/html',
+            'application/xml',
+            'text/xml',
+            'application/x-yaml',
+            'text/yaml',
+        ];
+    }
 
     /**
      * A map defining the available custom field types and their corresponding components.
@@ -65,7 +91,7 @@ export default class CustomFieldInputComponent extends Component {
         }
     }
 
-    @action onFileAddedHandler(file) {
+    @action async onFileAddedHandler(file) {
         // since we have dropzone and upload button within dropzone validate the file state first
         // as this method can be called twice from both functions
         if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) return;
@@ -73,12 +99,23 @@ export default class CustomFieldInputComponent extends Component {
         // set file for progress state
         this.file = file;
 
+        // resolve subject if necessary
+        const subject = await this.subject;
+
+        let path = `uploads/${this.extension ?? 'cf-files'}/${this.customField.id}`;
+        let type = `custom_field_file`;
+
+        if (subject) {
+            path = `uploads/${this.extension ?? 'cf-files'}/${getModelName(subject)}-cf-files`;
+            type = `${underscore(getModelName(subject))}_file`;
+        }
+
         // Queue and upload immediatley
         this.fetch.uploadFile.perform(
             file,
             {
-                path: `uploads/${this.extension}/${getModelName(this.subject)}-cf-files`,
-                type: `${underscore(getModelName(this.subject))}_file`,
+                path,
+                type,
             },
             (uploadedFile) => {
                 this.file = undefined;

package/addon/components/custom-field/options-input.hbs

@@ -1,6 +1,6 @@
 <div class="rounded-lg border border-gray-200 dark:border-gray-700" ...attributes>
     <div class="flex flex-row items-center justify-between px-4 py-2">
-        <div class="mr-2 text-sm">{{t "fleet-ops.component.custom-field-form-panel.field-options"}}</div>
+        <div class="mr-2 text-sm">Field Options</div>
         <Button @type="magic" @icon="plus" @text="Add new option" @size="xs" @onClick={{this.addOption}} />
     </div>
     {{#each-in this.options as |index option|}}

package/addon/components/file.hbs

@@ -1,56 +1,59 @@
-<div class="x-fleetbase-file" ...attributes>
-    <div class="x-fleetbase-file-wrapper">
-        <div class="x-fleetbase-file-actions">
-            <DropdownButton
-                @dropdownId="x-fleetbase-file-actions-dropdown"
-                @icon={{or @dropdownIcon "ellipsis"}}
-                @iconSize="xs"
-                @iconPrefix={{@dropdownButtonIconPrefix}}
-                @text={{@dropdownButtonText}}
-                @size="xs"
-                @horizontalPosition="left"
-                @calculatePosition={{@dropdownButtonCalculatePosition}}
-                @renderInPlace={{or @dropdownButtonRenderInPlace true}}
-                @wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}}
-                @triggerClass={{@dropdownButtonTriggerClass}}
-                @registerAPI={{@registerAPI}}
-                @onInsert={{this.onDropdownButtonInsert}}
-                as |dd|
-            >
-                <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
-                    <div class="px-1">
-                        <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
-                            {{t "component.file.dropdown-label"}}
-                        </div>
-                    </div>
-                    <div class="next-dd-menu-seperator"></div>
-                    <div role="group" class="px-1">
+<div
+    class="group relative w-32 h-40 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-400 hover:shadow-md transition-all"
+    ...attributes
+>
+    <div class="relative w-full h-32 bg-gray-50 dark:bg-gray-900 flex items-center justify-center overflow-hidden rounded-t-lg">
+        {{#if this.isImage}}
+            <Image src={{@file.url}} alt={{@file.original_filename}} class="w-full h-full object-cover" />
+        {{else}}
+            <div class="flex items-center justify-center w-full h-full">
+                <FileIcon @file={{@file}} @hideExtension={{true}} @iconSize="3x" />
+            </div>
+        {{/if}}
+    </div>
 
-                        <a href="javascript:;" role="menuitem" class="next-dd-item text-danger" {{on "click" (fn this.onDropdownItemClick "onDelete" dd)}}>
-                            <span class="mr-1">
-                                <FaIcon @icon="trash" @prefix={{@dropdownButtonIconPrefix}} />
-                            </span>
-                            {{t "common.delete"}}
-                        </a>
+    <div class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
+        <DropdownButton
+            @dropdownId="file-actions-{{@file.id}}"
+            @icon={{or @dropdownIcon "ellipsis-v"}}
+            @iconSize="sm"
+            @iconPrefix={{@dropdownButtonIconPrefix}}
+            @text={{@dropdownButtonText}}
+            @size="xs"
+            @horizontalPosition="left"
+            @calculatePosition={{@dropdownButtonCalculatePosition}}
+            @renderInPlace={{or @dropdownButtonRenderInPlace true}}
+            @wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}}
+            @triggerClass={{@dropdownButtonTriggerClass}}
+            @registerAPI={{@registerAPI}}
+            @onInsert={{this.onDropdownButtonInsert}}
+            as |dd|
+        >
+            <div class="next-dd-menu mt-0" role="menu">
+                <div class="px-1 pt-2">
+                    <div class="text-xs px-2 text-gray-500 dark:text-gray-400 font-medium">
+                        {{t "component.file.dropdown-label"}}
                     </div>
                 </div>
-            </DropdownButton>
-        </div>
-        <div class="flex flex-1 flex-col justify-between items-center">
-            <div class="flex-1">
-                {{#if this.isImage}}
-                    <Image src={{@file.url}} alt={{@file.original_filename}} class="x-fleetbase-file-preview rounded-md shadow-sm" />
-                {{else}}
-                    <div class="x-fleetbase-file-preview">
-                        <FileIcon @file={{@file}} @hideExtension={{true}} @iconSize="2xl" />
-                    </div>
-                {{/if}}
-            </div>
-            <div class="flex-1 overflow-hidden flex flex-col items-center justify-end">
-                <div class="x-fleetbase-file-name">
-                    {{truncate-filename @file.original_filename}}
+                <div class="next-dd-menu-seperator"></div>
+                <div role="group" class="px-1">
+                    <a
+                        href="javascript:;"
+                        role="menuitem"
+                        class="next-dd-item xs-text text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
+                        {{on "click" (dropdown-fn dd @onDelete this.file)}}
+                    >
+                        <FaIcon @icon="trash" @size="sm" class="mr-2" @prefix={{@dropdownButtonIconPrefix}} />
+                        {{t "common.delete"}}
+                    </a>
                 </div>
             </div>
-        </div>
+        </DropdownButton>
+    </div>
+
+    <div class="flex items-center justify-between px-2 py-1.5 border-t border-gray-100 dark:border-gray-700">
+        <span class="text-xs text-gray-700 dark:text-gray-300 truncate font-medium">
+            {{truncate-filename @file.original_filename}}
+        </span>
     </div>
 </div>

package/addon/components/file.js

@@ -1,43 +1,12 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
+import isImageFile from '../utils/is-image-file';
 
 export default class FileComponent extends Component {
-    @tracked file;
-    @tracked isImage = false;
-
-    constructor(owner, { file }) {
-        super(...arguments);
-
-        this.file = file;
-        this.isImage = this.isImageFile(file);
-    }
-
-    @action onDropdownItemClick(action, dd) {
-        if (typeof dd.actions === 'object' && typeof dd.actions.close === 'function') {
-            dd.actions.close();
-        }
-
-        if (typeof this.args[action] === 'function') {
-            this.args[action](this.file);
-        }
+    get file() {
+        return this.args.file;
     }
 
-    isImageFile(file) {
-        if (!file || (!file.original_filename && !file.url && !file.path)) {
-            return false;
-        }
-
-        const filename = file.original_filename || file.url || file.path;
-        const extensionMatch = filename.match(/\.(.+)$/);
-
-        if (!extensionMatch) {
-            return false;
-        }
-
-        const extension = extensionMatch[1].toLowerCase();
-        const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'webp'];
-
-        return imageExtensions.includes(extension);
+    get isImage() {
+        return isImageFile(this.file);
     }
 }

package/addon/components/layout/resource/panel.js

@@ -18,12 +18,27 @@ export default class LayoutResourcePanelComponent extends Component {
     @service hostRouter;
     @service contextPanel;
     @tracked overlayContext;
-    @tracked resource;
-    @tracked controller;
-    @tracked width = '600px';
-    @tracked isResizable = true;
-    // fleet-ops is default auth schema
-    @tracked authSchema = 'fleet-ops';
+
+    // Mirror args (reactive)
+    get resource() {
+        return this.args.resource;
+    }
+
+    get controller() {
+        return this.args.controller;
+    }
+
+    get width() {
+        return this.args.width ?? '600px';
+    }
+
+    get isResizable() {
+        return this.args.isResizable ?? true;
+    }
+
+    get authSchema() {
+        return this.args.authSchema ?? 'fleet-ops';
+    }
 
     get resourceName() {
         return this.resource?.name ?? this.resource?.displayName ?? this.resource?.display_name;
@@ -46,13 +61,8 @@ export default class LayoutResourcePanelComponent extends Component {
         return 'Save Changes';
     }
 
-    constructor(owner, { resource, controller, width = '600px', isResizable = true, authSchema = 'fleet-ops' }) {
+    constructor() {
         super(...arguments);
-        this.resource = resource;
-        this.controller = controller;
-        this.width = width;
-        this.isResizable = isResizable;
-        this.authSchema = authSchema;
         applyContextComponentArguments(this);
     }
 

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/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/styles/components/file.css

@@ -1,28 +1,42 @@
 .file-icon {
-    display: flex;
-    align-items: center;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
+    @apply flex flex-col items-center justify-center;
 }
 
-.file-icon.file-icon-xlsb,
-.file-icon.file-icon-xlsm,
-.file-icon.file-icon-xlsx,
-.file-icon.file-icon-xls {
-    color: #3b8530;
+/* Optional: Custom file type colors */
+.file-icon-pdf > svg {
+    @apply text-red-500;
 }
 
-.file-icon.file-icon-doc,
-.file-icon.file-icon-docx,
-.file-icon.file-icon-docm {
-    color: #2e5ea7;
+.file-icon-xlsx > svg,
+.file-icon-xls > svg,
+.file-icon-csv > svg {
+    @apply text-green-600;
 }
 
-.file-icon.file-icon-pdf {
-    color: #ad311a;
+.file-icon-docx > svg,
+.file-icon-doc > svg {
+    @apply text-blue-600;
 }
 
-.file-icon .file-extension {
-    @apply mx-1 capitalize font-semibold;
+.file-icon-pptx > svg,
+.file-icon-ppt > svg {
+    @apply text-orange-500;
+}
+
+.file-icon-zip > svg,
+.file-icon-rar > svg {
+    @apply text-yellow-600;
+}
+
+/* Smooth image loading */
+.file-preview-image {
+    @apply transition-opacity duration-200;
+}
+
+.file-preview-image[loading] {
+    @apply opacity-0;
+}
+
+.file-preview-image[loaded] {
+    @apply opacity-100;
 }

package/addon/styles/layout/next.css

@@ -1691,6 +1691,10 @@ body[data-theme='dark']
     @apply text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1;
 }
 
+.next-dd-menu .next-dd-item.xs-text {
+    @apply text-xs;
+}
+
 .next-dd-menu .next-dd-item > .next-nav-item-icon-container {
     width: 1rem;
 }
@@ -2053,7 +2057,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 +2065,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/addon/utils/is-image-file.js

@@ -0,0 +1,101 @@
+export default function isImageFile(file) {
+    if (!file) return false;
+
+    // MIME (most reliable if provided)
+    const mime = (file.content_type || file.type || '').toLowerCase();
+    if (mime.startsWith('image/')) return true; // e.g., "image/png"
+    // Some services mislabel images as octet-stream; fall through if so.
+
+    // data: URL (base64 inline)
+    const url = file.url || file.path || '';
+    if (typeof url === 'string' && url.startsWith('data:image/')) return true;
+
+    // Extension check (strip query/fragment, pick last segment)
+    const name = file.original_filename || file.path || file.url || '';
+    const ext = getFileExtension(name);
+    if (ext) {
+        const IMAGE_EXTS = new Set(['jpg', 'jpeg', 'jfif', 'png', 'gif', 'bmp', 'tif', 'tiff', 'webp', 'svg', 'heic', 'heif', 'avif', 'ico', 'cur']);
+        if (IMAGE_EXTS.has(ext)) return true;
+    }
+
+    // Signature sniffing if you have bytes/base64
+    // This helps when MIME & ext are missing/misleading.
+    const bytes = file.bytes || file.arrayBuffer || file.buffer;
+    const base64 = file.base64;
+    if (bytes || base64) {
+        /* eslint-disable no-empty */
+        try {
+            const u8 = toUint8(bytes, base64);
+            if (u8) return looksLikeImageBytes(u8);
+        } catch (_) {}
+    }
+
+    return false;
+}
+
+export function getFileExtension(str) {
+    if (!str || typeof str !== 'string') return '';
+    // Fast path for data URLs
+    if (str.startsWith('data:image/')) return 'dataurl';
+    // Strip query/fragment
+    const clean = str.split('?')[0].split('#')[0];
+    // Handle full URLs safely if possible
+    try {
+        const u = new URL(clean);
+        str = u.pathname;
+    } catch (_) {
+        str = clean;
+    }
+    const last = str.split('/').pop() || '';
+    const dot = last.lastIndexOf('.');
+    if (dot <= 0 || dot === last.length - 1) return '';
+    return last.slice(dot + 1).toLowerCase();
+}
+
+// convert provided bytes/base64 into Uint8Array
+export function toUint8(bytes, base64) {
+    if (bytes instanceof Uint8Array) return bytes;
+    if (bytes && bytes.byteLength != null) return new Uint8Array(bytes);
+    if (typeof base64 === 'string') {
+        if (base64.startsWith('data:')) base64 = base64.split(',')[1] || '';
+        const bin = atob(base64);
+        const u8 = new Uint8Array(bin.length);
+        for (let i = 0; i < bin.length; i++) u8[i] = bin.charCodeAt(i);
+        return u8;
+    }
+    return null;
+}
+
+// quick magic-number checks for common formats
+export function looksLikeImageBytes(u8) {
+    if (u8.length < 12) return false;
+
+    // JPEG: FF D8 FF
+    if (u8[0] === 0xff && u8[1] === 0xd8 && u8[2] === 0xff) return true;
+
+    // PNG: 89 50 4E 47 0D 0A 1A 0A
+    if (u8[0] === 0x89 && u8[1] === 0x50 && u8[2] === 0x4e && u8[3] === 0x47 && u8[4] === 0x0d && u8[5] === 0x0a && u8[6] === 0x1a && u8[7] === 0x0a) return true;
+
+    // GIF: "GIF87a"/"GIF89a"
+    if (u8[0] === 0x47 && u8[1] === 0x49 && u8[2] === 0x46 && u8[3] === 0x38 && (u8[4] === 0x37 || u8[4] === 0x39) && u8[5] === 0x61) return true;
+
+    // WEBP: "RIFF" .... "WEBP"
+    if (u8[0] === 0x52 && u8[1] === 0x49 && u8[2] === 0x46 && u8[3] === 0x46 && u8[8] === 0x57 && u8[9] === 0x45 && u8[10] === 0x42 && u8[11] === 0x50) return true;
+
+    // BMP: "BM"
+    if (u8[0] === 0x42 && u8[1] === 0x4d) return true;
+
+    // TIFF: "II*" or "MM*"
+    if ((u8[0] === 0x49 && u8[1] === 0x49 && u8[2] === 0x2a && u8[3] === 0x00) || (u8[0] === 0x4d && u8[1] === 0x4d && u8[2] === 0x00 && u8[3] === 0x2a)) return true;
+
+    // HEIC/AVIF (ISOBMFF): "ftyp" box with known brands
+    // bytes 4..7: 'ftyp'
+    const isFtyp = u8[4] === 0x66 && u8[5] === 0x74 && u8[6] === 0x79 && u8[7] === 0x70;
+    if (isFtyp) {
+        const brand = String.fromCharCode(u8[8], u8[9], u8[10], u8[11]).toLowerCase();
+        if (['heic', 'heix', 'mif1', 'hevc', 'avif', 'avis'].includes(brand)) return true;
+    }
+
+    // SVG can’t be reliably sniffed with bytes (it’s XML). Rely on MIME/extension.
+    return false;
+}

package/app/utils/is-image-file.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/utils/is-image-file';

package/package.json

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