Merge pull request #24 from fleetbase/dev-v0.2.2

v0.2.2
fleetbase · Oct 30, 2023 · fedb64e · fedb64e
2 parents 76b784e + cdadb59
commit fedb64e
Show file tree

Hide file tree

Showing 15 changed files with 52,829 additions and 57 deletions.
diff --git a/addon/components/layout/header.hbs b/addon/components/layout/header.hbs
@@ -3,10 +3,10 @@
         <LinkToExternal @route="console" class="logo navbar-logo mr-4">
             <LogoIcon @brand={{@brand}} @size="8" />
         </LinkToExternal>
-        {{#unless (media 'isMobile')}}
+        {{#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 {{menuItem.class}}" role="menuitem">
+                    <LinkToExternal @route={{menuItem.route}} 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" role="menuitem">
+                <LinkToExternal @route="console.extensions" class="next-view-header-item truncate" role="menuitem">
                     <div class="w-6">
                         <FaIcon @icon="shapes" @size="sm" />
                     </div>
@@ -33,6 +33,9 @@
         <Layout::Header::LoadingIndicator />
         <div id="view-header-actions"></div>
         <div class="flex items-center justify-between">
+            <div class="flex-1 flex items-center pr-1">
+                <NotificationTray @registerAPI={{@registerNotificationTrayApi}} @onClickNotification={{@onClickNotification}} />
+            </div>
             <div class="flex-1 flex items-center pr-1">
                 <Layout::Header::Dropdown @items={{this.organizationNavigationItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
                     <div class="next-org-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
@@ -46,7 +49,14 @@
             <div class="flex-1 flex items-center justify-end">
                 <Layout::Header::Dropdown @items={{this.userNavigationItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
                     <div class="next-user-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
-                        <Image class="rounded-full h-5 w-5 shadow-sm flex-shrink-0" height="20" width="20" src={{@user.avatar_url}} @fallbackSrc="https://s3.ap-southeast-1.amazonaws.com/flb-assets/static/no-avatar.png" alt={{@user.name}} />
+                        <Image
+                            class="rounded-full h-5 w-5 shadow-sm flex-shrink-0"
+                            height="20"
+                            width="20"
+                            src={{@user.avatar_url}}
+                            @fallbackSrc="https://s3.ap-southeast-1.amazonaws.com/flb-assets/static/no-avatar.png"
+                            alt={{@user.name}}
+                        />
                     </div>
                 </Layout::Header::Dropdown>
             </div>

diff --git a/addon/components/layout/section/header.hbs b/addon/components/layout/section/header.hbs
@@ -1,5 +1,5 @@
-<div class="next-view-section-subheader {{if @hideActions 'actions-hidden'}}" ...attributes>
-    <div class="next-view-section-subheader-left {{@leftSubheaderClass}}">
+<div id="next-view-section-subheader" class="next-view-section-subheader {{if @hideActions 'actions-hidden'}}" ...attributes>
+    <div id="next-view-section-subheader-left" class="next-view-section-subheader-left {{@leftSubheaderClass}}">
         <div class="flex flex-row items-center">
             {{#if @badge}}
                 <span class="mr-2 {{@badgeContainerClass}}">
@@ -9,7 +9,7 @@
             {{#if @icon}}
                 <FaIcon @icon={{@icon}} @size={{@iconSize}} @prefix={{@iconPrefix}} class="{{@iconClass}} mr-2" />
             {{/if}}
-            <h2 class="next-view-section-subheader-title">{{@title}}</h2>
+            <h2 id="next-view-section-subheader-title" class="next-view-section-subheader-title">{{@title}}</h2>
             {{#if @subtitle}}
                 <div>
                     {{@subtitle}}
@@ -21,7 +21,7 @@
         {{/if}}
     </div>
     {{#unless @hideActions}}
-        <div class="next-view-section-subheader-actions {{@actionsWrapperClass}}">
+        <div id="next-view-section-subheader-actions" class="next-view-section-subheader-actions {{@actionsWrapperClass}}">
             {{yield}}
         </div>
     {{/unless}}

diff --git a/addon/components/model-select.hbs b/addon/components/model-select.hbs
@@ -1,9 +1,62 @@
-<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.change}} @onClose={{this.onClose}} @onFocus={{@onFocus}} @onInput={{this.onInput}} @onKeydown={{@onKeydown}} @onOpen={{this.onOpen}} @options={{this._options}} @optionsComponent={{component
-      this.optionsComponent
-      infiniteScroll=this.infiniteScroll
-      infiniteModel=this.model
-      withCreate=this.withCreate}} @placeholder={{@placeholder}} @placeholderComponent={{@placeholderComponent}} @preventScroll={{@preventScroll}} @renderInPlace={{@renderInPlace}} @scrollTo={{@scrollTo}} @search={{perform this.searchModels}} @searchEnabled={{get-default-value @searchEnabled true}} @searchField={{@searchField}} @searchMessage={{@searchMessage}} @searchPlaceholder={{@searchPlaceholder}} @selected={{this.selectedModel}} @selectedItemComponent={{@selectedItemComponent}} @tabindex={{@tabindex}} @triggerClass="form-select form-input {{@triggerClass}}" @triggerComponent={{@triggerComponent}} @triggerId={{@triggerId}} @triggerRole={{@triggerRole}} @typeAheadMatcher={{@typeAheadMatcher}} @verticalPosition={{@verticalPosition}} @withCreate={{@withCreate}} ...attributes as |model|>
+<div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+    <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.change}}
+        @onClose={{this.onClose}}
+        @onFocus={{@onFocus}}
+        @onInput={{this.onInput}}
+        @onKeydown={{@onKeydown}}
+        @onOpen={{this.onOpen}}
+        @options={{this._options}}
+        @optionsComponent={{component this.optionsComponent infiniteScroll=this.infiniteScroll infiniteModel=this.model withCreate=this.withCreate}}
+        @placeholder={{@placeholder}}
+        @placeholderComponent={{@placeholderComponent}}
+        @preventScroll={{@preventScroll}}
+        @renderInPlace={{@renderInPlace}}
+        @scrollTo={{@scrollTo}}
+        @search={{perform this.searchModels}}
+        @searchEnabled={{get-default-value @searchEnabled true}}
+        @searchField={{@searchField}}
+        @searchMessage={{@searchMessage}}
+        @searchPlaceholder={{@searchPlaceholder}}
+        @selected={{this.selectedModel}}
+        @selectedItemComponent={{@selectedItemComponent}}
+        @tabindex={{@tabindex}}
+        @triggerClass={{@triggerClass}}
+        @triggerComponent={{@triggerComponent}}
+        @triggerId={{@triggerId}}
+        @triggerRole={{@triggerRole}}
+        @typeAheadMatcher={{@typeAheadMatcher}}
+        @verticalPosition={{@verticalPosition}}
+        @withCreate={{@withCreate}}
+        ...attributes
+        as |model|
+    >
         {{#if (has-block)}}
             {{yield model}}
         {{else}}

diff --git a/addon/components/notification-tray.hbs b/addon/components/notification-tray.hbs
@@ -0,0 +1,35 @@
+<BasicDropdown @renderInPlace={{true}} @registerAPI={{this.registerAPI}} class="notification-tray next-user-button" ...attributes as |dd|>
+    <dd.Trigger class="next-org-button-trigger flex-shrink-0">
+        <FaIcon @icon="inbox" />
+        {{#if this.notifications.length}}
+            <div class="notification-tray-unread-notifications-badge">{{this.notifications.length}}</div>
+        {{/if}}
+    </dd.Trigger>
+    <dd.Content class="notification-tray-panel-container">
+        <div class="notification-tray-panel">
+            <div>
+                <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex flex-row space-x-4">
+                    <h1 class="text-black dark:text-gray-100 text-sm font-bold">{{pluralize this.notifications.length "Unread Notification"}}</h1>
+                </div>
+                <div class="h-48 overflow-y-scroll p-2">
+                    {{#each this.notifications as |notification|}}
+                        <a href="javascript:;" class="notification-item {{if notification._isRemoving 'opacity-50'}}" {{on "click" (fn this.onClickNotification notification)}}>
+                            <h3 class="font-semibold text-small truncate">{{notification.data.subject}}</h3>
+                            <p class="text-xs mb-1.5 truncate">{{notification.data.message}}</p>
+                            <span class="text-xs">Received: {{notification.createdAgo}}</span>
+                        </a>
+                    {{else}}
+                        <div class="flex flex-1 items-center justify-center w-full h-full">
+                            <span class="text-base text-gray-800 dark:text-gray-300 italic">No unread notifications</span>
+                        </div>
+                    {{/each}}
+                </div>
+            </div>
+            <div class="px-2 py-1.5 border-t border-gray-200 dark:border-gray-700 flex flex-row space-x-4">
+                <LinkTo @route="console.notifications" class="notification-tray-view-all-link">
+                    View all notifications
+                </LinkTo>
+            </div>
+        </div>
+    </dd.Content>
+</BasicDropdown>