v0.2.3

addon/components/badge.hbs

@@ -1,4 +1,4 @@
-<div class="status-badge {{safe-dasherize (or @status @type)}}-status-badge" ...attributes>
+<div class="status-badge {{safe-dasherize (or @type @status)}}-status-badge" ...attributes>
     <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 whitespace-no-wrap {{@spanClass}}">
         <svg class="mr-1.5 h-2 w-2 {{if @hideStatusDot "hidden"}}" fill="currentColor" viewBox="0 0 8 8">
             <circle cx="4" cy="4" r="3"></circle>

addon/components/country-name.js

@@ -1,26 +1,72 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
+import { later } from '@ember/runloop';
+import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
 
+/**
+ * Represents the `CountryName` component which fetches and sets the name of a country.
+ *
+ * @class CountryNameComponent
+ * @extends {Component}
+ * @memberof @fleetbase/ember-ui
+ *
+ * @property {Service} fetch - Service for fetching data.
+ * @property {string} countryName - The name of the country.
+ *
+ * @example
+ * // Usage:
+ * <CountryName @country="US" />
+ */
 export default class CountryNameComponent extends Component {
+    /**
+     * Fetch service
+     *
+     * @type {Service}
+     * @memberof CountryNameComponent
+     */
     @service fetch;
+
+    /**
+     * The country name property.
+     *
+     * @type {String}
+     * @memberof CountryNameComponent
+     */
     @tracked countryName;
 
+    /**
+     * Creates an instance of CountryNameComponent.
+     * @param {ApplicationInstance} owner
+     * @param {Object|country=string} { country }
+     * @memberof CountryNameComponent
+     */
     constructor(owner, { country }) {
         super(...arguments);
-
         this.setCountryName(country);
     }
 
-    @action async setCountryName(country) {
-        if (typeof country === 'string' && country.length === 2) {
-            const lookupResponse = await this.fetch.cachedGet(`lookup/country/${country}`);
-            const countryName = lookupResponse?.name;
-
-            this.countryName = countryName ?? country;
-        } else {
-            this.countryName = country;
-        }
+    /**
+     * Asynchronously sets the country name. If the country code is a 2-letter string,
+     * it fetches the country name; otherwise, it uses the country argument as the country name.
+     *
+     * @private
+     * @param {string} country - The country code or country name.
+     * @returns {void}
+     */
+    async setCountryName(country) {
+        later(
+            this,
+            () => {
+                if (typeof country === 'string' && country.length === 2) {
+                    this.fetch.get(`lookup/country/${country}`).then((response) => {
+                        this.countryName = getWithDefault(response, 'name', country);
+                    });
+                } else {
+                    this.countryName = country;
+                }
+            },
+            300
+        );
     }
 }

addon/components/fetch-select.hbs

@@ -1,5 +1,5 @@
 <div class="fleetbase-model-select fleetbase-power-select ember-model-select {{@wrapperClass}}">
-    <PowerSelect @afterOptionsComponent={{@afterOptionsComponent}} @allowClear={{@allowClear}} @animationEnabled={{@animationEnabled}} @ariaDescribedBy={{@ariaDescribedBy}} @ariaInvalid={{@ariaInvalid}} @ariaLabel={{@ariaLabel}} @ariaLabelledBy={{@ariaLabelledBy}} @beforeOptionsComponent={{@beforeOptionsComponent}} @buildSelection={{@buildSelection}} @calculatePosition={{@calculatePosition}} @closeOnSelect={{@closeOnSelect}} @defaultHighlighted={{@defaultHighlighted}} @destination={{@destination}} @disabled={{@disabled}} @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}} @extra={{@extra}} @groupComponent={{@groupComponent}} @highlightOnHover={{@highlightOnHover}} @horizontalPosition={{@horizontalPosition}} @initiallyOpened={{@initiallyOpened}} @loadingMessage={{@loadingMessage}} @eventType={{@eventType}} @matcher={{@matcher}} @matchTriggerWidth={{@matchTriggerWidth}} @noMatchesMessage={{@noMatchesMessage}} @onBlur={{@onBlur}} @onChange={{this.onChange}} @onClose={{this.onClose}} @onFocus={{@onFocus}} @onInput={{this.onInput}} @onKeydown={{@onKeydown}} @onOpen={{this.onOpen}} @options={{this.options}} @optionsComponent={{component this.optionsComponent}} @placeholder={{@placeholder}} @placeholderComponent={{@placeholderComponent}} @preventScroll={{@preventScroll}} @renderInPlace={{@renderInPlace}} @scrollTo={{@scrollTo}} @search={{perform this.searchOptions}} @searchEnabled={{get-default-value @searchEnabled true}} @searchField={{@searchField}} @searchMessage={{@searchMessage}} @searchPlaceholder={{@searchPlaceholder}} @selected={{this.selected}} @selectedItemComponent={{@selectedItemComponent}} @tabindex={{@tabindex}} @triggerClass="form-select form-input {{@triggerClass}}" @triggerComponent={{@triggerComponent}} @triggerId={{@triggerId}} @triggerRole={{@triggerRole}} @typeAheadMatcher={{@typeAheadMatcher}} @verticalPosition={{@verticalPosition}} @withCreate={{@withCreate}} ...attributes as |option|>
+    <PowerSelect @registerAPI={{this.registerAPI}} @afterOptionsComponent={{@afterOptionsComponent}} @allowClear={{@allowClear}} @animationEnabled={{@animationEnabled}} @ariaDescribedBy={{@ariaDescribedBy}} @ariaInvalid={{@ariaInvalid}} @ariaLabel={{@ariaLabel}} @ariaLabelledBy={{@ariaLabelledBy}} @beforeOptionsComponent={{@beforeOptionsComponent}} @buildSelection={{@buildSelection}} @calculatePosition={{@calculatePosition}} @closeOnSelect={{@closeOnSelect}} @defaultHighlighted={{@defaultHighlighted}} @destination={{@destination}} @disabled={{@disabled}} @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}} @extra={{@extra}} @groupComponent={{@groupComponent}} @highlightOnHover={{@highlightOnHover}} @horizontalPosition={{@horizontalPosition}} @initiallyOpened={{@initiallyOpened}} @loadingMessage={{@loadingMessage}} @eventType={{@eventType}} @matcher={{@matcher}} @matchTriggerWidth={{@matchTriggerWidth}} @noMatchesMessage={{@noMatchesMessage}} @onBlur={{@onBlur}} @onChange={{this.onChange}} @onClose={{this.onClose}} @onFocus={{@onFocus}} @onInput={{this.onInput}} @onKeydown={{@onKeydown}} @onOpen={{this.onOpen}} @options={{this.options}} @optionsComponent={{component this.optionsComponent}} @placeholder={{@placeholder}} @placeholderComponent={{@placeholderComponent}} @preventScroll={{@preventScroll}} @renderInPlace={{@renderInPlace}} @scrollTo={{@scrollTo}} @search={{perform this.searchOptions}} @searchEnabled={{get-default-value @searchEnabled true}} @searchField={{@searchField}} @searchMessage={{@searchMessage}} @searchPlaceholder={{@searchPlaceholder}} @selected={{this.selected}} @selectedItemComponent={{@selectedItemComponent}} @tabindex={{@tabindex}} @triggerClass="form-select form-input {{@triggerClass}}" @triggerComponent={{@triggerComponent}} @triggerId={{@triggerId}} @triggerRole={{@triggerRole}} @typeAheadMatcher={{@typeAheadMatcher}} @verticalPosition={{@verticalPosition}} @withCreate={{@withCreate}} ...attributes as |option|>
         {{#if (has-block)}}
             {{yield option}}
         {{else}}

addon/components/fetch-select.js

@@ -41,6 +41,12 @@ export default class FetchSelectComponent extends Component {
      */
     @tracked selected;
 
+    /**
+     * The power select API.
+     * @type {Object}
+     */
+    @tracked api;
+
     /**
      * The duration to debounce the search input, in milliseconds.
      * @type {number}
@@ -141,13 +147,22 @@ export default class FetchSelectComponent extends Component {
                 }
 
                 if (foundSelected) {
-                    this.selected = foundSelected;
+                    this.select(foundSelected);
                 } else {
-                    this.selected = selected;
+                    this.select(selected);
                 }
             });
         } else {
-            this.selected = selected;
+            this.select(selected);
+        }
+    }
+
+    select(option) {
+        this.selected = option;
+
+        // set via api
+        if (this.api && this.api.actions && typeof this.api.actions.select === 'function') {
+            this.api.actions.select(option);
         }
     }
 
@@ -229,4 +244,17 @@ export default class FetchSelectComponent extends Component {
             onClose(...arguments);
         }
     }
+
+    /**
+     * Register the power select API
+     *
+     * @memberof FetchSelectComponent
+     */
+    @action registerAPI(api) {
+        this.api = api;
+
+        if (typeof this.args.registerAPI === 'function') {
+            this.args.registerAPI(...arguments);
+        }
+    }
 }

addon/components/layout/header.hbs

@@ -6,7 +6,7 @@
         {{#unless (media "isMobile")}}
             <div role="menu" class="next-catalog-menu-items flex mr-4">
                 {{#each @menuItems as |menuItem|}}
-                    <LinkToExternal @route={{menuItem.route}} class="next-view-header-item truncate {{menuItem.class}}" role="menuitem">
+                    <LinkToExternal @route={{menuItem.route}} id={{concat (dasherize menuItem.route) "-header-button"}} class="next-view-header-item truncate {{menuItem.class}}" role="menuitem">
                         <div class="w-6">
                             <FaIcon @icon={{menuItem.icon}} @size="sm" />
                         </div>
@@ -15,7 +15,7 @@
                         </div>
                     </LinkToExternal>
                 {{/each}}
-                <LinkToExternal @route="console.extensions" class="next-view-header-item truncate" role="menuitem">
+                <LinkToExternal @route="console.extensions" id="console-extensions-header-button" class="next-view-header-item truncate" role="menuitem">
                     <div class="w-6">
                         <FaIcon @icon="shapes" @size="sm" />
                     </div>

addon/components/layout/sidebar/item.hbs

@@ -1,8 +1,8 @@
 <a href="javascript:;" class="next-nav-item {{if this.active 'active'}}" {{on "click" this.onClick}} ...attributes>
-    <div class="next-nav-item-icon-container">
+    <div class="next-nav-item-icon-container {{@iconWrapperClass}}">
         {{#if @icon}}
             <FaIcon @prefix={{@iconPrefix}} @icon={{@icon}} @size={{or @iconSize "xs"}} class={{@iconClass}} />
         {{/if}}
     </div>
-    <div class="truncate w-10/12">{{yield}}</div>
+    <div class="truncate w-10/12 {{@itemWrapperClass}}">{{yield}}</div>
 </a>

addon/components/notification-tray.js

@@ -167,7 +167,9 @@ export default class NotificationTrayComponent extends Component {
         // get incoming data and console out
         (async () => {
             for await (let incomingNotification of channel) {
-                this.onReceivedNotification(incomingNotification);
+                if (typeof incomingNotification === 'object' && typeof incomingNotification.notification_id === 'string') {
+                    this.onReceivedNotification(incomingNotification);
+                }
             }
         })();
     }

addon/components/overlay/header.hbs

@@ -12,10 +12,10 @@
                     </h2>
                     <div class="flex flex-row space-x-2">
                         {{#if @status}}
-                            <Badge @hideStatusDot={{@hideStatusDot}} @status={{@status}} class="ml-2" />
+                            <Badge @hideStatusDot={{@hideStatusDot}} @disableHumanize={{@disableBadgeHumanize}} @status={{@status}} class="ml-2" />
                         {{/if}}
                         {{#if (and @dispatched (eq @status "created"))}}
-                            <Badge @hideStatusDot={{true}} @status="Dispatched" class="ml-2" />
+                            <Badge @hideStatusDot={{true}} @disableHumanize={{@disableBadgeHumanize}} @status="Dispatched" class="ml-2" />
                         {{/if}}
                     </div>
                 </div>

addon/components/upload-button.hbs

@@ -1,15 +1,19 @@
-<FileUpload @name={{@name}} @accept={{@accept}} @onFileAdded={{@onFileAdded}} as |queue|>
+<FileUpload @name={{@name}} @accept={{@accept}} @onFileAdded={{@onFileAdded}} @labelClass={{@labelClass}} as |queue|>
     <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate cursor-pointer btn {{if @outline 'btn-outline'}} btn-{{or @type 'default'}} btn-{{or @size 'sm'}}" ...attributes>
         {{#if queue.files.length}}
-            <Spinner class="mr-2" />
+            <Spinner class={{unless @hideButtonText "mr-2"}} />
+            {{#unless @hideButtonText}}
             <span>
                 Uploading...
             </span>
+            {{/unless}}
         {{else}}
-            <FaIcon @icon={{or @uploadIcon "image"}} class="mr-2" />
-            <span>
-                {{or @buttonText "Upload new"}}
-            </span>
+            <FaIcon @icon={{or @icon "image"}} class="{{@iconClass}} {{unless @hideButtonText "mr-2"}}" />
+            {{#unless @hideButtonText}}
+                <span>
+                    {{or @buttonText "Upload new"}}
+                </span>
+            {{/unless}}
         {{/if}}
     </a>
 </FileUpload>

addon/styles/addon.css

@@ -38,6 +38,7 @@
 @import 'components/dashboard.css';
 @import 'components/kanban.css';
 @import 'components/notification-tray.css';
+@import 'components/fleet-listing.css';
 
 /** Third party */
 @import 'air-datepicker/air-datepicker.css';

addon/styles/components/badge.css

@@ -44,6 +44,7 @@
 }
 
 .status-badge[class*='5'] > span,
+.status-badge.critical-status-badge > span,
 .status-badge.disabled-status-badge > span,
 .status-badge.inactive-status-badge > span,
 .status-badge.failed-status-badge > span,
@@ -52,13 +53,24 @@
 }
 
 .status-badge[class*='5'] > span svg,
+.status-badge.urgent-status-badge > span svg,
+.status-badge.high-status-badge > span svg,
 .status-badge.disabled-status-badge > span svg,
 .status-badge.failed-status-badge > span svg,
 .status-badge.canceled-status-badge > span svg {
     @apply text-red-400;
 }
 
+.status-badge.low-status-badge > span svg {
+    @apply text-blue-400;
+}
+
+.status-badge.medium-status-badge > span svg {
+    @apply text-orange-400;
+}
+
 .status-badge[class*='4'] > span,
+.status-badge.scheduled-maintenance-badge > span,
 .status-badge.test-status-badge > span,
 .status-badge.warning-status-badge > span,
 .status-badge.preparing-status-badge > span,
@@ -88,6 +100,7 @@
     @apply text-gray-700;
 }
 
+.status-badge.operational-suggestion-status-badge > span,
 .status-badge.dispatched-status-badge > span,
 .status-badge.assigned-status-badge > span {
     @apply text-indigo-800 bg-indigo-100;

addon/styles/components/button.css

@@ -524,3 +524,11 @@ button.btn.btn-is-loading > .btn-loading-icon-wrapper > .fleetbase-loader-wrappe
     width: 14px;
     height: 14px;
 }
+
+.btn.btn-reset {
+    border: 0 !important;
+    box-shadow: none !important;
+    background-color: transparent !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}

addon/styles/components/fleet-listing.css

@@ -0,0 +1,15 @@
+:root {
+    --fleet-summary-toggle-base-padding: 1rem;
+    --fleet-summary-nav-item-base-padding: 1.125rem;
+    --fleet-summary-depths: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
+}
+
+@each $i in var(--fleet-summary-depths) {
+    .next-fleet-summary .next-sidebar-panel-container.next-fleet-summary-fleet.fleet-depth-$(i) > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle {
+        padding-left: calc(1rem + $i * var(--fleet-summary-toggle-base-padding));
+    }
+
+    .next-fleet-summary .next-sidebar-panel-container.next-fleet-summary-fleet.fleet-depth-$(i) > .next-sidebar-panel > .next-content-panel > .next-content-panel-body .next-nav-item {
+        padding-left: calc(1rem + ($i + 1) * var(--fleet-summary-nav-item-base-padding));
+    }
+}

addon/styles/layout/utilities.css

@@ -703,3 +703,16 @@ body[data-theme='dark'] .contenteditable-placeholder:empty:before {
 .border-b-0i {
     border-bottom-width: 0px !important;
 }
+
+.upload-avatar-overlay {
+    @apply relative hover:bg-gray-100 transition-all overflow-hidden;
+}
+
+.upload-avatar-overlay .upload-avatar-button-wrapper {
+    @apply absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-gray-600 bg-opacity-50;
+}
+
+.upload-avatar-overlay label.upload-avatar-label-overlay,
+.upload-avatar-overlay .upload-avatar-label-overlay {
+    padding-left: 2rem;
+}

index.js

@@ -57,7 +57,7 @@ module.exports = {
         app.options.postcssOptions = postcssOptions;
 
         // Import the `intlTelInput.min.css` file and append it to the parent application's `vendor.css`
-        this.import(`node_modules/intl-tel-input/build/css/intlTelInput.min.css`);
+        this.import('node_modules/intl-tel-input/build/css/intlTelInput.min.css');
     },
 
     treeForPublic: function () {