@fleetbase/fleetops-engine 0.6.54 → 0.6.56

package/addon/components/layout/fleet-ops-sidebar.js

@@ -63,6 +63,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 icon: 'truck',
                 route: 'management',
                 defaultRoute: 'management.index',
+                requiresVisibleChildren: true,
                 keywords: ['drivers', 'vehicles', 'fleets', 'contacts', 'places'],
                 children: this.resourcesItems,
             }),
@@ -72,6 +73,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 icon: 'cog',
                 route: 'maintenance',
                 defaultRoute: 'maintenance.index',
+                requiresVisibleChildren: true,
                 keywords: ['work orders', 'equipment', 'parts'],
                 children: this.maintenanceItems,
             }),
@@ -81,6 +83,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 icon: 'satellite-dish',
                 route: 'connectivity',
                 defaultRoute: 'connectivity.telematics',
+                requiresVisibleChildren: true,
                 keywords: ['telematics', 'fuel integrations', 'devices', 'sensors'],
                 children: this.connectivityItems,
             }),
@@ -90,6 +93,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 icon: 'chart-line',
                 route: 'analytics',
                 defaultRoute: 'analytics.index',
+                requiresVisibleChildren: true,
                 keywords: ['reports', 'metrics'],
                 children: this.analyticsItems,
             }),
@@ -99,6 +103,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 icon: 'gear',
                 route: 'settings',
                 defaultRoute: 'settings.index',
+                requiresVisibleChildren: true,
                 keywords: ['configuration', 'navigator', 'map', 'routing', 'notifications'],
                 children: this.settingsItems,
             }),
@@ -164,7 +169,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
 
     get connectivityItems() {
         return this.withRegistryItems('connectivity', [
-            this.createItem('menu.telematics', 'satellite-dish', 'connectivity.telematics', 'fleet-ops list telematic', 'fleet-ops see telematic', ['connectivity hub']),
+            this.createHubItem(this.intl.t('menu.telematics'), 'satellite-dish', 'connectivity.telematics', 'fleet-ops list telematic', 'fleet-ops see telematic', ['connectivity hub']),
             this.createItem('menu.fuel-providers', 'gas-pump', 'connectivity.fuel-providers', 'fleet-ops list fuel-report', 'fleet-ops see fuel-report', ['fuel integrations']),
             this.createItem('menu.devices', 'hard-drive', 'connectivity.devices', 'fleet-ops list device', 'fleet-ops see device'),
             this.createItem('menu.sensors', 'temperature-full', 'connectivity.sensors', 'fleet-ops list sensor', 'fleet-ops see sensor'),
@@ -247,13 +252,14 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
         this.universeSettingsMenuItems = registeredMenuItems.filter((menuItem) => menuItem.section === 'settings');
     }
 
-    createBranch({ id, label, icon, route, defaultRoute, children, keywords = [] }) {
+    createBranch({ id, label, icon, route, defaultRoute, requiresVisibleChildren = false, children, keywords = [] }) {
         return {
             id,
             label,
             icon,
             route: this.fullRoute(route),
             defaultRoute: this.fullRoute(defaultRoute),
+            requiresVisibleChildren,
             children: children.filter((item) => item.visible !== false),
             keywords,
         };
@@ -267,12 +273,12 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             icon,
             route: this.fullRoute(route),
             permission,
-            visible: this.abilities.can(ability),
+            visiblePermission: ability,
             keywords: [intl, route, ...keywords].filter(Boolean),
         };
     }
 
-    createHubItem(label, icon, route, permission, ability, keywords = []) {
+    createHubItem(label, icon, route, _permission, _ability, keywords = []) {
         return {
             pinnedFirst: true,
             priority: this.defaultPriorityForRoute(route),
@@ -280,8 +286,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             description: label,
             icon,
             route: this.fullRoute(route),
-            permission,
-            visible: this.abilities.can(ability),
+            isNavigationHub: true,
             keywords: [label, route, ...keywords].filter(Boolean),
         };
     }
@@ -390,6 +395,15 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
         }
     }
 
+    @action shouldSyncInitialActiveParent({ activePath = [], currentURL }) {
+        const [parent, child] = activePath;
+        const normalizedURL = (currentURL ?? '').split('?')[0].replace(/\/+$/, '') || '/';
+        const isFleetOpsRootURL = normalizedURL === '/fleet-ops';
+        const isDefaultOrdersLanding = parent?.id === 'operations' && child?.route === this.fullRoute('operations.orders') && isFleetOpsRootURL;
+
+        return !isDefaultOrdersLanding;
+    }
+
     @action
     async searchNavigation({ query, limit = 12 }) {
         const trimmedQuery = query?.trim();

package/addon/components/map/drawer/device-event-listing.js

@@ -5,6 +5,7 @@ import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
 import { isArray } from '@ember/array';
 import { startOfWeek, endOfWeek, format } from 'date-fns';
+import calculateMapDrawerDropdownPosition from '../../../utils/map-drawer-dropdown-position';
 
 export default class MapDrawerDeviceEventListingComponent extends Component {
     @service store;
@@ -115,6 +116,7 @@ export default class MapDrawerDeviceEventListingComponent extends Component {
                 ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.device-event') }),
                 cellClassNames: 'overflow-visible',
                 wrapperClass: 'flex items-center justify-end mx-2',
+                calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '10%',
                 actions: [
                     {

package/addon/components/map/drawer/driver-listing.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import calculateMapDrawerDropdownPosition from '../../../utils/map-drawer-dropdown-position';
 
 export default class MapDrawerDriverListingComponent extends Component {
     @service driverActions;
@@ -71,6 +72,7 @@ export default class MapDrawerDriverListingComponent extends Component {
                 ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.driver') }),
                 cellClassNames: 'overflow-visible',
                 wrapperClass: 'flex items-center justify-end mx-2',
+                calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '90px',
                 actions: [
                     {

package/addon/components/map/drawer/place-listing.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import calculateMapDrawerDropdownPosition from '../../../utils/map-drawer-dropdown-position';
 
 export default class MapDrawerPlaceListingComponent extends Component {
     @service placeActions;
@@ -53,6 +54,7 @@ export default class MapDrawerPlaceListingComponent extends Component {
                 ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.place') }),
                 cellClassNames: 'overflow-visible',
                 wrapperClass: 'flex items-center justify-end mx-2',
+                calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '90px',
                 actions: [
                     {

package/addon/components/map/drawer/position-listing.hbs

@@ -4,23 +4,28 @@
             <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                 <PowerSelect
                     @options={{this.trackables}}
-                    @selected={{this.resource}}
+                    @selected={{this.selectedTrackable}}
                     @onChange={{this.onResourceSelected}}
+                    @searchEnabled={{true}}
+                    @searchField="trackableSearchText"
                     @placeholder={{t "common.select-field" field="trackable"}}
                     @triggerClass="form-select form-input form-input-sm w-48"
                     as |option|
                 >
                     <div class="flex flex-row items-start space-x-2">
                         <div class="inline-block">
-                            {{#if (eq (get-model-name option) "driver")}}
-                                <Image src={{option.photo_url}} @fallbackSrc={{config "defaultValues.driverAvatar"}} class="w-4 h-4" />
+                            {{#if (eq option.modelName "driver")}}
+                                <Image src={{option.resource.photo_url}} @fallbackSrc={{config "defaultValues.driverAvatar"}} class="w-4 h-4" />
                             {{else}}
-                                <Image src={{option.avatar_url}} @fallbackSrc={{config "defaultValues.vehicleAvatar"}} class="w-4 h-4" />
+                                <Image src={{option.resource.avatar_url}} @fallbackSrc={{config "defaultValues.vehicleAvatar"}} class="w-4 h-4" />
                             {{/if}}
                         </div>
                         <div class="inline-block text-sm truncate">
-                            <div class="font-semibold text-sm normalize-in-trigger">{{or option.name option.displayName option.public_id}}</div>
-                            <div class="hide-from-trigger text-xs">{{or option.email option.serial_number option.plate_number option.internal_id}}</div>
+                            <div class="font-semibold text-sm normalize-in-trigger">{{option.primaryLabel}}</div>
+                            <div class="hide-from-trigger text-xs">{{option.secondaryLabel}}</div>
+                            {{#if option.deviceLabel}}
+                                <div class="hide-from-trigger text-xs text-gray-500 dark:text-gray-400 truncate">{{option.deviceLabel}}</div>
+                            {{/if}}
                         </div>
                     </div>
                 </PowerSelect>

package/addon/components/map/drawer/position-listing.js

@@ -8,6 +8,7 @@ import { htmlSafe } from '@ember/template';
 import { startOfWeek, endOfWeek, format } from 'date-fns';
 import getModelName from '@fleetbase/ember-core/utils/get-model-name';
 import ensureLeafletDrawEditNamespace from '../../../utils/leaflet-draw-namespace-guard';
+import { buildTrackableOption } from '../../../utils/trackable-option';
 
 const L = window.leaflet || window.L;
 
@@ -29,6 +30,7 @@ export default class MapDrawerPositionListingComponent extends Component {
     @tracked replaySpeed = '1';
     @tracked positionsLayer = null;
     @tracked positionOverlayIds = [];
+    @tracked selectedTrackableModelName = null;
 
     /** Computed properties - read state from service */
     get isReplaying() {
@@ -47,7 +49,17 @@ export default class MapDrawerPositionListingComponent extends Component {
         const vehicles = this.mapManager.livemap?.vehicles ?? [];
         const drivers = this.mapManager.livemap?.drivers ?? [];
 
-        return [...vehicles, ...drivers];
+        return [...vehicles.map((vehicle) => buildTrackableOption(vehicle, 'vehicle')), ...drivers.map((driver) => buildTrackableOption(driver, 'driver'))];
+    }
+
+    get selectedTrackable() {
+        if (!this.resource) {
+            return null;
+        }
+
+        const resourceType = this.resourceType;
+
+        return this.trackables.find((trackable) => trackable.resource?.id === this.resource?.id && trackable.modelName === resourceType) ?? null;
     }
 
     get replayProgressWidth() {
@@ -72,7 +84,7 @@ export default class MapDrawerPositionListingComponent extends Component {
         if (!this.resource) {
             return 'resource';
         }
-        return getModelName(this.resource) || 'resource';
+        return this.selectedTrackableModelName || getModelName(this.resource) || 'resource';
     }
 
     get hasPositions() {
@@ -179,8 +191,9 @@ export default class MapDrawerPositionListingComponent extends Component {
         this.positionOverlayIds = [];
     }
 
-    @action onResourceSelected(resource) {
-        this.resource = resource;
+    @action onResourceSelected(trackable) {
+        this.resource = trackable?.resource ?? null;
+        this.selectedTrackableModelName = trackable?.modelName ?? null;
         this.loadPositions.perform();
     }
 

package/addon/components/map/drawer/vehicle-listing.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import calculateMapDrawerDropdownPosition from '../../../utils/map-drawer-dropdown-position';
 
 export default class MapDrawerVehicleListingComponent extends Component {
     @service vehicleActions;
@@ -65,6 +66,7 @@ export default class MapDrawerVehicleListingComponent extends Component {
                 ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.vehicle') }),
                 cellClassNames: 'overflow-visible',
                 wrapperClass: 'flex items-center justify-end mx-2',
+                calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '90px',
                 actions: [
                     {

package/addon/components/sensor/panel-header.hbs

@@ -1,29 +1,61 @@
-<div class="px-4 py-2">
-    <div class="flex flex-1 flex-row items-start justify-between">
-        <div class="flex flex-row space-x-3">
-            <div class="flex items-start justify-start rounded-full">
+<div class="px-4 py-3" ...attributes>
+    <div class="flex flex-1 flex-row items-start justify-between gap-4">
+        <div class="flex min-w-0 flex-row items-start gap-3">
+            <div class="relative flex flex-shrink-0 items-start justify-start">
                 <Image
                     src={{@resource.photo_url}}
                     @fallbackSrc={{config "defaultValues.placeholderImage"}}
-                    alt={{@resource.displayName}}
+                    alt={{this.name}}
                     height="48"
                     width="48"
-                    class="h-14 w-14 rounded-full shadow-sm"
+                    class="h-14 w-14 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700"
                 />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                    <InputInfo @text={{@resource.displayName}} />
+                    <InputInfo @text={{this.name}} />
                 </Attach::Tooltip>
             </div>
-            <div class="flex flex-col">
-                <h1 class="text-gray-900 dark:text-white font-semibold text-lg">{{@resource.displayName}}</h1>
-                <div>
-                    <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a (get-fleet-ops-option-label "sensorTypes" @resource.type)}}</div>
-                    <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.serial_number}}</div>
+            <div class="flex min-w-0 flex-col">
+                <div class="flex min-w-0 flex-wrap items-center gap-2">
+                    <h1 class="truncate text-base font-semibold leading-5 text-gray-900 dark:text-gray-100">{{this.name}}</h1>
+                    <Badge @status={{this.status}} @size="xs">{{smart-humanize this.status}}</Badge>
+                    {{#if this.thresholdStatus}}
+                        <Badge @status={{if (eq this.thresholdStatus "normal") "success" "warning"}} @size="xs">{{smart-humanize this.thresholdStatus}}</Badge>
+                    {{/if}}
+                </div>
+
+                <div class="mt-1 flex max-w-2xl flex-wrap items-center gap-1.5">
+                    {{#if this.type}}
+                        <span class="inline-flex max-w-[10rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="gauge-high" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{n-a (get-fleet-ops-option-label "sensorTypes" this.type)}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.identifier}}
+                        <span class="inline-flex max-w-[12rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="id-card" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.identifier}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.reading}}
+                        <span class="inline-flex max-w-[10rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="chart-line" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.reading}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.deviceName}}
+                        <span class="inline-flex max-w-[12rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="microchip" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.deviceName}}</span>
+                        </span>
+                    {{/if}}
+                    <span class="inline-flex max-w-[13rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                        <FaIcon @icon="clock" class="text-gray-400 dark:text-gray-300" />
+                        <span class="truncate">{{#if this.lastReadingAt}}{{format-date-fns this.lastReadingAt "dd MMM yyyy, HH:mm"}}{{else}}No reading yet{{/if}}</span>
+                    </span>
                 </div>
-                <Badge @status={{if @resource.online "online" "offline"}}>{{if @resource.online (t "common.online") (t "common.offline")}}</Badge>
             </div>
         </div>
-        <div class="next-view-header-right">
+        <div class="next-view-header-right flex-shrink-0">
             <Layout::Resource::Panel::HeaderActions
                 @resource={{@resource}}
                 @saveTask={{@saveTask}}
@@ -36,4 +68,4 @@
             />
         </div>
     </div>
-</div>
+</div>

package/addon/components/sensor/panel-header.js

@@ -1,3 +1,61 @@
 import Component from '@glimmer/component';
+import { get } from '@ember/object';
 
-export default class SensorPanelHeaderComponent extends Component {}
+export default class SensorPanelHeaderComponent extends Component {
+    get resource() {
+        return this.args.resource;
+    }
+
+    get name() {
+        return (
+            get(this.resource, 'displayName') ??
+            get(this.resource, 'display_name') ??
+            get(this.resource, 'name') ??
+            get(this.resource, 'serial_number') ??
+            get(this.resource, 'imei') ??
+            get(this.resource, 'public_id') ??
+            '-'
+        );
+    }
+
+    get status() {
+        return get(this.resource, 'status') ?? (get(this.resource, 'is_active') ? 'active' : 'inactive');
+    }
+
+    get thresholdStatus() {
+        return get(this.resource, 'threshold_status');
+    }
+
+    get type() {
+        return get(this.resource, 'type');
+    }
+
+    get identifier() {
+        return get(this.resource, 'serial_number') ?? get(this.resource, 'imei') ?? get(this.resource, 'internal_id') ?? get(this.resource, 'public_id');
+    }
+
+    get reading() {
+        const value = get(this.resource, 'last_value');
+        const unit = get(this.resource, 'unit');
+
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+
+        return unit ? `${value} ${unit}` : String(value);
+    }
+
+    get deviceName() {
+        return (
+            get(this.resource, 'device.displayName') ??
+            get(this.resource, 'device.display_name') ??
+            get(this.resource, 'device.name') ??
+            get(this.resource, 'device_name') ??
+            get(this.resource, 'device_uuid')
+        );
+    }
+
+    get lastReadingAt() {
+        return get(this.resource, 'last_reading_at') ?? get(this.resource, 'lastReadingAt');
+    }
+}

package/addon/components/table/cell/dropdown/action-item.hbs

@@ -0,0 +1,31 @@
+{{#if this.visible}}
+    {{#if @columnAction.separator}}
+        <div class="next-dd-menu-seperator"></div>
+    {{else}}
+        <div role="group" class="px-1">
+            <a
+                href="javascript:;"
+                role="menuitem"
+                class="next-dd-item {{@columnAction.class}} {{if this.disabled 'disabled'}}"
+                disabled={{this.disabled}}
+                {{on "click" (fn this.onClick @columnAction @row @dd)}}
+            >
+                {{#if @columnAction.icon}}
+                    <div class="w-6">
+                        <FaIcon class={{@columnAction.iconClass}} @icon={{@columnAction.icon}} @prefix={{@columnAction.iconPrefix}} />
+                    </div>
+                {{/if}}
+                {{@columnAction.label}}
+                {{#if this.doesntHavePermissions}}
+                    <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @columnAction.tooltipPlacement "right"}}>
+                        <InputInfo @text={{t "common.unauthorized"}} />
+                    </Attach::Tooltip>
+                {{else if @columnAction.helpText}}
+                    <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @columnAction.tooltipPlacement "right"}}>
+                        <InputInfo @text={{@columnAction.helpText}} @exampleText={{@columnAction.exampleText}} />
+                    </Attach::Tooltip>
+                {{/if}}
+            </a>
+        </div>
+    {{/if}}
+{{/if}}

package/addon/components/table/cell/dropdown/action-item.js

@@ -0,0 +1,62 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isNone } from '@ember/utils';
+
+export default class TableCellDropdownActionItemComponent extends Component {
+    @service abilities;
+    @tracked permissionRequired;
+    @tracked doesntHavePermissions = false;
+    @tracked disabled = false;
+    @tracked visible = true;
+
+    constructor(owner, { columnAction = {}, row = {}, disabled = false, permission = null }) {
+        super(...arguments);
+        this.permissionRequired = columnAction.permission ?? permission;
+        this.disabled = this.disabledCheck(columnAction, this.permissionRequired, disabled);
+        this.visible = (columnAction.visible ?? true) && this.visibilityCheck(columnAction, row);
+    }
+
+    @action onClick(columnAction, row, dd) {
+        if (this.disabled) {
+            return;
+        }
+
+        if (typeof dd?.actions?.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof columnAction?.fn === 'function') {
+            columnAction.fn(row);
+        }
+    }
+
+    disabledCheck(columnAction, permission, defaultValue = false) {
+        let disabled = columnAction.disabled ?? defaultValue;
+        if (!disabled) {
+            disabled = permission && this.abilities.cannot(permission);
+            this.doesntHavePermissions = disabled;
+        }
+
+        return disabled;
+    }
+
+    visibilityCheck(columnAction, context) {
+        const isVisible = columnAction.isVisible;
+
+        if (isNone(context) || !isVisible) {
+            return true;
+        }
+
+        if (typeof isVisible === 'boolean') {
+            return isVisible;
+        }
+
+        if (typeof isVisible === 'function') {
+            return isVisible(context);
+        }
+
+        return true;
+    }
+}

package/addon/components/table/cell/dropdown.hbs

@@ -0,0 +1,28 @@
+<div class="cell-dropdown-button overflow-visible {{@column.wrapperClass}}" {{did-insert this.setupComponent}} ...attributes>
+    <DropdownButton
+        @icon={{@column.ddButtonIcon}}
+        @iconPrefix={{@column.ddButtonIconPrefix}}
+        @text={{this.buttonText}}
+        @size="xs"
+        @horizontalPosition="left"
+        @calculatePosition={{this.calculatePosition}}
+        @renderInPlace={{true}}
+        @onOpen={{this.onOpen}}
+        @onClose={{this.onClose}}
+        as |dd|
+    >
+        <div class="next-dd-menu next-dd-menu-table-dd mt-0i {{@column.ddMenuWrapperClass}}" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+            {{#if @column.ddMenuLabel}}
+                <div class="next-dd-menu-label-container px-1">
+                    <div class="next-dd-menu-label {{@column.ddMenuLabelClass}}">
+                        {{@column.ddMenuLabel}}
+                    </div>
+                </div>
+                <div class="next-dd-menu-seperator"></div>
+            {{/if}}
+            {{#each @column.actions as |columnAction|}}
+                <Table::Cell::Dropdown::ActionItem @columnAction={{columnAction}} @row={{@row}} @column={{@column}} @dd={{dd}} />
+            {{/each}}
+        </div>
+    </DropdownButton>
+</div>

package/addon/components/table/cell/dropdown.js

@@ -0,0 +1,91 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action, computed } from '@ember/object';
+
+export default class TableCellDropdownComponent extends Component {
+    @tracked tableCellNode;
+    defaultButtonText = 'Actions';
+
+    @computed('args.column.ddButtonText', 'defaultButtonText') get buttonText() {
+        const { ddButtonText } = this.args.column;
+
+        if (ddButtonText === undefined) {
+            return this.defaultButtonText;
+        }
+
+        if (ddButtonText === false) {
+            return null;
+        }
+
+        return ddButtonText;
+    }
+
+    @action setupComponent(dropdownWrapperNode) {
+        const tableCellNode = this.getOwnerTableCell(dropdownWrapperNode);
+
+        if (tableCellNode) {
+            tableCellNode.style.overflow = 'visible';
+        }
+
+        this.tableCellNode = tableCellNode;
+    }
+
+    @action onOpen() {
+        if (!this.tableCellNode) {
+            return;
+        }
+
+        const currentZIndex = Number.parseInt(this.tableCellNode.style.zIndex, 10) || 0;
+        this.tableCellNode.style.zIndex = currentZIndex + 1;
+    }
+
+    @action onClose() {
+        if (!this.tableCellNode) {
+            return;
+        }
+
+        const currentZIndex = Number.parseInt(this.tableCellNode.style.zIndex, 10) || 1;
+        this.tableCellNode.style.zIndex = currentZIndex - 1;
+    }
+
+    @action getOwnerTableCell(dropdownWrapperNode) {
+        while (dropdownWrapperNode) {
+            dropdownWrapperNode = dropdownWrapperNode.parentNode;
+
+            if (dropdownWrapperNode?.tagName?.toLowerCase() === 'td') {
+                return dropdownWrapperNode;
+            }
+        }
+
+        return undefined;
+    }
+
+    @action onDropdownItemClick(columnAction, row, dd) {
+        if (typeof dd?.actions?.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof columnAction?.fn === 'function') {
+            columnAction.fn(row);
+        }
+    }
+
+    @action calculatePosition(trigger, content) {
+        if (typeof this.args.column?.calculatePosition === 'function') {
+            return this.args.column.calculatePosition(trigger, content);
+        }
+
+        const triggerRect = trigger.getBoundingClientRect();
+        const contentRect = content?.getBoundingClientRect?.();
+        const contentWidth = contentRect?.width || 224;
+
+        const style = {
+            position: 'fixed',
+            marginTop: '0px',
+            left: `${triggerRect.left - contentWidth - 3}px`,
+            top: `${triggerRect.top}px`,
+        };
+
+        return { style };
+    }
+}

package/addon/components/telematic/details.hbs

@@ -92,7 +92,7 @@
                     <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700 md:col-span-2">
                         <div class="text-gray-400 dark:text-gray-500">Update Mode</div>
                         <div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">Provider polling</div>
-                        <div class="mt-1 text-gray-500 dark:text-gray-400">FleetOps polls this provider for device snapshots and telemetry updates.</div>
+                        <div class="mt-1 text-gray-500 dark:text-gray-400">Fleet-Ops polls this provider for device snapshots and telemetry updates.</div>
                     </div>
                 {{/if}}
             </div>

package/addon/components/telematic/form.hbs

@@ -70,7 +70,7 @@
                 <div class="mb-3">
                     <div>
                         <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Credentials</h2>
-                        <p class="text-xs text-gray-500 dark:text-gray-300">FleetOps uses these credentials to test the connection and sync devices.</p>
+                        <p class="text-xs text-gray-500 dark:text-gray-300">Fleet-Ops uses these credentials to test the connection and sync devices.</p>
                     </div>
                 </div>
 
@@ -266,7 +266,7 @@
                     </InputGroup>
                 {{else}}
                     <div class="rounded-md border border-dashed border-gray-300 p-3 text-xs text-gray-500 dark:border-gray-700 dark:text-gray-300 lg:col-span-2">
-                        This provider does not require FleetOps webhook configuration.
+                        This provider does not require Fleet-Ops webhook configuration.
                     </div>
                 {{/if}}
             </div>