v0.3.4 ~ UI patches and enhancements

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]  # Build on Node.js 18
+        node-version: [20.x]  # Build on Node.js 20
 
     steps:
     - uses: actions/checkout@v2
@@ -25,9 +25,9 @@ jobs:
         node-version: ${{ matrix.node-version }}
 
     - name: Setup pnpm
-      uses: pnpm/action-setup@v2.0.1
+      uses: pnpm/action-setup@v4
       with:
-        version: latest
+        version: 9.5
 
     - name: Install Dependencies
       run: pnpm install
@@ -44,15 +44,15 @@ jobs:
     steps:
     - uses: actions/checkout@v2
 
-    - name: Setup Node.js 18.x
+    - name: Setup Node.js 20.x
       uses: actions/setup-node@v2
       with:
-        node-version: 18.x
+        node-version: 20.x
 
     - name: Setup pnpm
-      uses: pnpm/action-setup@v2.0.1
+      uses: pnpm/action-setup@v4
       with:
-        version: latest
+        version: 9.5
 
     - name: Install Dependencies
       run: pnpm install
@@ -70,15 +70,15 @@ jobs:
     steps:
     - uses: actions/checkout@v2
 
-    - name: Setup Node.js 18.x
+    - name: Setup Node.js 20.x
       uses: actions/setup-node@v2
       with:
-        node-version: 18.x
+        node-version: 20.x
 
     - name: Setup pnpm
-      uses: pnpm/action-setup@v2.0.1
+      uses: pnpm/action-setup@v4
       with:
-        version: latest
+        version: 9.5
 
     - name: Install Dependencies
       run: pnpm install
@@ -99,15 +99,15 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v2
         with:
-          node-version: 18.x
+          node-version: 20.x
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2.0.1
+        uses: pnpm/action-setup@v4
         with:
-          version: latest
+          version: 9.5
 
       - name: Install Dependencies
         run: pnpm install

.github/workflows/create-release.yml

@@ -0,0 +1,21 @@
+name: Create Release
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  create:
+    runs-on: ubuntu-latest
+    steps:
+        - uses: actions/checkout@v4
+        - name: Publish GitHub Release
+          uses: softprops/action-gh-release@v2
+          with:
+            tag_name: ${{ github.ref_name }}
+            name: ${{ github.ref_name }}
+            generate_release_notes: true 
+            draft: false
+            prerelease: false
+          env:
+            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

addon/components/layout/sidebar/item.hbs

@@ -7,7 +7,9 @@
         ...attributes
     >
         <div class="next-nav-item-icon-container {{@iconWrapperClass}}">
-            {{#if @icon}}
+            {{#if @iconComponent}}
+                {{component @iconComponent options=@iconComponentOptions}}
+            {{else if @icon}}
                 <FaIcon @prefix={{@iconPrefix}} @icon={{@icon}} @size={{or @iconSize "xs"}} class={{@iconClass}} />
             {{/if}}
         </div>

addon/helpers/format-date.js

@@ -1,21 +1,17 @@
-import formatDateUtil from '../utils/format-date';
 import { helper } from '@ember/component/helper';
-import { isBlank } from '@ember/utils';
-import { parse } from 'date-fns';
+import { parse, format } from 'date-fns';
+import isObject from '@fleetbase/ember-core/utils/is-object';
+import isEmptyObject from '@fleetbase/ember-core/utils/is-empty-object';
 
-export default helper(function formatDate([dateInstance, formatString = 'PPP p', parseOptions = null]) {
-    if (typeof formatString === 'object' && !isBlank(formatString)) {
+export default helper(function formatDate([dateInstance, formatString = 'PPP p', parseOptions = {}]) {
+    if (isObject(formatString)) {
         parseOptions = formatString;
         formatString = 'PPP p';
     }
 
     if (typeof dateInstance === 'string') {
-        if (!isBlank(parseOptions) && typeof parseOptions.formatString === 'string') {
-            dateInstance = parse(dateInstance, parseOptions.formatString, new Date(), parseOptions.options ?? {});
-        } else {
-            dateInstance = new Date(dateInstance);
-        }
+        dateInstance = isEmptyObject(parseOptions) ? new Date(dateInstance) : parse(dateInstance, parseOptions?.formatString ?? formatString, new Date(), parseOptions ?? {});
     }
 
-    return formatDateUtil(dateInstance, formatString);
+    return format(dateInstance, formatString);
 });

addon/styles/components/chat.css

@@ -1,4 +1,5 @@
-.chat-tray-panel-container {
+body.fleetbase-console .chat-tray-panel-container,
+body.fleetbase-console .chat-tray-panel-container.ember-basic-dropdown-content {
     box-shadow:
         0 4px 6px -1px rgb(0 0 0 / 0.1),
         0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -13,7 +14,8 @@
     @apply space-y-2;
 }
 
-body[data-theme='dark'] .chat-tray-panel-container {
+body[data-theme='dark'] .chat-tray-panel-container,
+body[data-theme='dark'] .chat-tray-panel-container.ember-basic-dropdown-content {
     background-color: #111827;
     border-color: #374151;
 }

addon/styles/layout/next.css

@@ -881,6 +881,14 @@ body[data-theme='light'] .next-map-container-toolbar > .next-map-container-view-
     right: 0;
 }
 
+body[data-theme="dark"] .next-map-container-view-switch > button > .status-badge.info-status-badge > span {
+    @apply bg-gray-800 border border-gray-700;
+}
+
+body[data-theme="light"] .next-map-container-view-switch > button > .status-badge.info-status-badge > span {
+    @apply bg-white border border-gray-200 text-black;
+}
+
 .next-map-container-table-container {
     @apply bg-white opacity-100 relative;
     width: 100%;
@@ -999,6 +1007,10 @@ body[data-theme='dark'] .next-view-header-item.is-open {
     @apply flex flex-1 items-center justify-end;
 }
 
+body[data-theme="light"] .next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header .next-content-panel-header-right .status-badge.info-status-badge > span {
+    @apply bg-blue-500 border border-blue-600;
+}
+
 .next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header .next-content-panel-header-right > .btn-wrapper > .btn {
     @apply py-1.5 text-xs;
 }
@@ -1234,39 +1246,66 @@ body[data-theme='dark'] .next-view-header .next-view-header-right .next-user-but
 }
 
 .next-sidebar .next-nav-item.active {
-    @apply bg-gray-200 bg-opacity-25;
+    @apply bg-blue-500 text-white;
+}
+
+body[data-theme='light'] .next-view-container > nav.next-sidebar a.next-nav-item.active .next-nav-item-icon-container svg {
+    @apply text-white;
 }
 
 body[data-theme='dark'] .next-sidebar .next-nav-item.active {
     @apply bg-gray-700;
 }
 
 .next-sidebar .next-nav-item .next-nav-item-icon-container {
-    margin-top: -2px;
     @apply w-5;
 }
 
-.next-sidebar .next-nav-item .next-nav-item-icon-container svg {
+body[data-theme='dark'] .next-sidebar .next-nav-item .next-nav-item-icon-container svg {
     @apply text-gray-100;
 }
 
+.next-sidebar .next-content-panel-wrapper .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle,
+.next-sidebar .next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header,
+body[data-theme='dark'] .next-sidebar .next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header,
+body[data-theme='dark'] .next-sidebar .next-content-panel-wrapper .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle {
+    border-color: transparent;
+}
+
 .next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle {
     min-height: auto;
-    @apply flex flex-row items-center justify-between px-3 py-0.5 rounded-md text-sm mb-1 border-0;
+    border-color: transparent;
+    @apply flex flex-row items-center justify-between px-3 py-0.5 rounded-md text-sm mb-1 border border-transparent;
+}
+
+body[data-theme="light"] .next-sidebar .next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header.next-sidebar-panel-toggle {
+    background-color: #ffffff;
 }
 
 .next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle > .next-content-panel-header-left > .next-content-panel-title-container {
     @apply py-0;
 }
 
 .next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle:hover {
-    @apply bg-gray-300;
+    border-color: transparent;
+    @apply bg-gray-100;
 }
 
 body[data-theme='dark'] .next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle:hover {
+    border-color: transparent;
     @apply bg-gray-700;
 }
 
+body[data-theme='light'] .next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle:hover {
+    border-color: transparent;
+    @apply bg-blue-500;
+}
+
+body[data-theme='light'] .next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle:hover a.next-content-panel-header-left,
+body[data-theme='light'] .next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle:hover a.next-content-panel-header-left .icon-container > svg {
+    color: #ffffff;
+}
+
 .next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle > .left {
     @apply flex-1 flex flex-row items-center;
 }

addon/utils/smart-humanize.js

@@ -35,6 +35,8 @@ export default function smartHumanize(string) {
         'etd',
         'eta',
         'ect',
+        'aws',
+        'gcp',
     ];
 
     return humanize([decamelize(string)])

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.3.3",
+    "version": "0.3.4",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",
@@ -187,7 +187,7 @@
     "pnpm": {
         "patchedDependencies": {
             "ember-gridstack@4.0.0": "patches/ember-gridstack@4.0.0.patch",
-            "ember-leaflet": "patches/ember-leaflet.patch"
+            "ember-leaflet@5.1.3": "patches/ember-leaflet@5.1.3.patch"
         }
     }
 }

patches/ember-leaflet.patch → patches/ember-leaflet@5.1.3.patch

@@ -1,5 +1,5 @@
 diff --git a/addon/components/marker-layer.js b/addon/components/marker-layer.js
-index 132bc4876f0c2847e732fd66e79b06dedf0ea470..ae87f033f1b12301a9a892ced7e408659d76d672 100644
+index 132bc4876f0c2847e732fd66e79b06dedf0ea470..93a4a446e0ebecc4eebe6e9d3b7831f2b986d036 100644
 --- a/addon/components/marker-layer.js
 +++ b/addon/components/marker-layer.js
 @@ -264,13 +264,15 @@ export default class MarkerLayer extends InteractiveLayer {
@@ -8,12 +8,11 @@ index 132bc4876f0c2847e732fd66e79b06dedf0ea470..ae87f033f1b12301a9a892ced7e40865
        updateFn(layer, value) {
 -        let enabled = layer.dragging.enabled();
          layer.setIcon(value);
--
+ 
 -        if (enabled) {
 -          layer.dragging.enable();
 -        } else {
 -          layer.dragging.disable();
-+        
 +        if (layer.dragging) {
 +          let enabled = layer.dragging.enabled();
 +          if (enabled) {