@fleetbase/fleetops-engine 0.6.17 → 0.6.19

package/addon/components/integrated-vendor/details.hbs

@@ -0,0 +1,34 @@
+<div class="details-wrapper" ...attributes>
+    <ContentPanel @title="Details" @open={{true}} @wrapperClass="bordered-top">
+        <div class="integrated-vendor-button border-0 mb-4">
+            <div>
+                <img src={{@vendor.provider_settings.logo}} alt={{@vendor.provider_settings.code}} class="w-20 h-20" width="80" height="80" />
+            </div>
+            <div>
+                <h3 class="text-sm font-semibold dark:text-white">{{@vendor.provider_settings.name}}</h3>
+            </div>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.sandbox"}}</div>
+                <div class="field-value">{{if @vendor.sandbox "Yes" "No"}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.host"}}</div>
+                <div class="field-value">{{n-a @vendor.host}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.namespace"}}</div>
+                <div class="field-value">{{n-a @vendor.namespace}}</div>
+            </div>
+            {{#if (is-object @vendor.options)}}
+                {{#each-in @vendor.options as |key value|}}
+                    <div class="field-info-container">
+                        <div class="field-name">{{smart-humanize key}}</div>
+                        <div class="field-value">{{n-a value}}</div>
+                    </div>
+                {{/each-in}}
+            {{/if}}
+        </div>
+    </ContentPanel>
+</div>

package/addon/components/integrated-vendor/form.hbs

@@ -0,0 +1,80 @@
+<div class="form-wrapper" ...attributes>
+    <ContentPanel @title={{t "integrated-vendor.fields.provider"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="flex flex-row items-center">
+            <img src={{@resource.provider_options.logo}} alt={{@resource.provider_options.code}} class="w-12 h-12" width="48" height="48" />
+            <h3 class="text-base text-black dark:text-white ml-4">{{@resource.provider_options.name}}</h3>
+        </div>
+    </ContentPanel>
+    <ContentPanel @title={{t "integrated-vendor.fields.credentials"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="space-y-2">
+            {{#each @resource.provider_options.credential_params as |param|}}
+                <InputGroup
+                    @name={{smart-humanize param.key}}
+                    @value={{mut (get @resource.credentials param.key)}}
+                    @helpText={{t "integrated-vendor.fields.credentials-configure-help-text" param=(smart-humanize param.key)}}
+                    @disabled={{cannot-write @resource}}
+                />
+            {{/each}}
+        </div>
+    </ContentPanel>
+    <ContentPanel @title={{t "integrated-vendor.fields.options"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="space-y-2">
+            {{#each @resource.provider_options.option_params as |param|}}
+                {{#if param.options}}
+                    <InputGroup @name={{smart-humanize param.key}}>
+                        <Select
+                            @value={{mut (get @resource.options param.key)}}
+                            @options={{param.options}}
+                            @optionValue={{param.optionValue}}
+                            @optionLabel={{param.optionLabel}}
+                            @humanize={{true}}
+                            @placeholder={{t "common.select-field" field=(smart-humanize param.key)}}
+                            @onSelect={{fn (mut (get @resource.options param.key))}}
+                            @disabled={{cannot-write @resource}}
+                            class="form-select w-full"
+                        />
+                    </InputGroup>
+                {{else}}
+                    <InputGroup
+                        @name={{smart-humanize param.key}}
+                        @value={{mut (get @resource.options param.key)}}
+                        @helpText={{t "integrated-vendor.fields.credentials-configure-help-text" param=(smart-humanize param.key)}}
+                        @disabled={{cannot-write @resource}}
+                    />
+                {{/if}}
+            {{/each}}
+            <InputGroup>
+                <Checkbox
+                    @value={{@resource.sandbox}}
+                    @label={{t "integrated-vendor.fields.sandbox"}}
+                    @onToggle={{fn (mut @resource.sandbox)}}
+                    @alignItems="center"
+                    @labelClass="mb-0i"
+                    @disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+        </div>
+    </ContentPanel>
+    <ContentPanel @title={{t "integrated-vendor.fields.advanced-options"}} @open={{false}} @wrapperClass="bordered-top">
+        <div class="space-y-2">
+            <InputGroup
+                @name={{t "integrated-vendor.fields.host"}}
+                @value={{@resource.host}}
+                @helpText={{t "integrated-vendor.fields.host-help-text"}}
+                @disabled={{cannot-write @resource}}
+            />
+            <InputGroup
+                @name={{t "integrated-vendor.fields.namespace"}}
+                @value={{@resource.namespace}}
+                @helpText={{t "integrated-vendor.fields.namespace-help-text"}}
+                @disabled={{cannot-write @resource}}
+            />
+            <InputGroup
+                @name={{t "integrated-vendor.fields.webhook"}}
+                @value={{@resource.webhook_url}}
+                @helpText={{t "integrated-vendor.fields.webhook-help-text"}}
+                @disabled={{cannot-write @resource}}
+            />
+        </div>
+    </ContentPanel>
+</div>

package/addon/components/integrated-vendor/form.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class IntegratedVendorFormComponent extends Component {
+    @tracked showAdvancedOptions = false;
+
+    @action toggleAdvancedOptions() {
+        this.showAdvancedOptions = !this.showAdvancedOptions;
+    }
+}

package/addon/components/issue/details.hbs

@@ -0,0 +1,68 @@
+<div class="details-wrapper" ...attributes>
+    <ContentPanel @title={{t "common.details"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">{{t "issue.fields.title"}}</div>
+                <div class="field-value">{{or @resource.title (concat "Issue reported on " (format-date-fns @model.created_at "dd MMM yy, HH:mm"))}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.status"}}</div>
+                <div class="field-value">
+                    <Badge @status={{@resource.status}} />
+                </div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "issue.fields.reported-by"}}</div>
+                <div class="field-value">{{n-a @resource.reporter_name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "issue.fields.assigned-to"}}</div>
+                <div class="field-value">{{n-a @resource.assignee_name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "resource.driver"}}</div>
+                <div class="field-value">{{n-a @resource.driver_name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "resource.vehicle"}}</div>
+                <div class="field-value">{{n-a @resource.vehicle_name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "issue.fields.type"}}</div>
+                <div class="field-value">{{n-a (titleize @resource.type)}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "issue.fields.category"}}</div>
+                <div class="field-value">{{n-a @resource.category}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "issue.fields.priority"}}</div>
+                <div class="field-value">
+                    <Badge @status={{@resource.priority}} />
+                </div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.date-created"}}</div>
+                <div class="field-value">{{@resource.createdAt}}</div>
+            </div>
+            <div class="field-info-container col-span-2">
+                <div class="field-name">{{t "issue.fields.tags"}}</div>
+                <div class="field-value flex flex-row items-center space-x-1">
+                    {{#each @resource.tags as |tag|}}
+                        <div class="rounded-xl border text-sm border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 py-0.5 flex items-center justify-center">{{tag}}</div>
+                    {{/each}}
+                </div>
+            </div>
+            <div class="field-info-container col-span-2">
+                <div class="field-name">{{t "common.coordinates"}}</div>
+                <div class="field-value">{{point-coordinates @resource.location}}</div>
+            </div>
+            <div class="field-info-container col-span-2">
+                <div class="field-name">{{t "issue.fields.report"}}</div>
+                <div class="field-value">{{n-a @resource.report}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+</div>

package/addon/components/issue/form.hbs

@@ -0,0 +1,183 @@
+<div class="form-wrapper" ...attributes>
+    <ContentPanel @title={{t "issue.fields.issue-report"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <InputGroup @name="Title" @value={{@resource.title}} @wrapperClass="col-span-2" />
+            <InputGroup @name={{t "issue.fields.reported-by"}}>
+                <ModelSelect
+                    @modelName="user"
+                    @selectedModel={{@resource.reporter}}
+                    @placeholder={{t "issue.fields.select-reporter"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @resource.reporter)}}
+                    @onChangeId={{fn (mut @resource.reported_by_uuid)}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name={{t "issue.fields.assigned-to"}}>
+                <ModelSelect
+                    @modelName="user"
+                    @selectedModel={{@resource.assignee}}
+                    @placeholder={{t "issue.fields.select-assign"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @resource.assignee)}}
+                    @onChangeId={{fn (mut @resource.assigned_to_uuid)}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name={{t "resource.driver"}}>
+                <ModelSelect
+                    @modelName="driver"
+                    @selectedModel={{@resource.driver}}
+                    @placeholder={{t "common.select-field" field=(t "resource.driver")}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @resource.driver)}}
+                    @onChangeId={{fn (mut @resource.driver_uuid)}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name={{t "resource.vehicle"}}>
+                <ModelSelect
+                    @modelName="vehicle"
+                    @selectedModel={{@resource.vehicle}}
+                    @placeholder={{t "common.select-field" field=(t "resource.vehicle")}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @resource.vehicle)}}
+                    @onChangeId={{fn (mut @resource.vehicle_uuid)}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.displayName}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name={{t "issue.fields.type"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "issueTypes"}}
+                        @selected={{find-by "value" @resource.type (get-fleet-ops-options "issueTypes")}}
+                        @onChange={{set-model-attr @resource "type"}}
+                        @placeholder={{t "issue.fields.select-type"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |type|
+                    >
+                        <div class="text-sm">
+                            <div class="font-semibold normalize-in-trigger">{{type.label}}</div>
+                            <div class="hide-from-trigger">{{type.description}}</div>
+                        </div>
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name={{t "issue.fields.category"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    {{#let (filter-by "group" @resource.type (get-fleet-ops-options "issueCategories")) as |categories|}}
+                        <PowerSelect
+                            @options={{categories}}
+                            @selected={{find-by "value" @resource.category categories}}
+                            @onChange={{set-model-attr @resource "category"}}
+                            @placeholder={{t "issue.fields.select-category"}}
+                            @triggerClass="form-select form-input"
+                            @disabled={{or (cannot-write @resource) (not categories)}}
+                            as |category|
+                        >
+                            <div class="text-sm">
+                                <div class="font-semibold normalize-in-trigger">{{category.label}}</div>
+                                <div class="hide-from-trigger">{{category.description}}</div>
+                            </div>
+                        </PowerSelect>
+                    {{/let}}
+                </div>
+            </InputGroup>
+
+            <InputGroup @name={{t "issue.fields.report"}} @wrapperClass="col-span-2">
+                <Textarea
+                    @value={{@resource.report}}
+                    aria-label="Issue Report"
+                    class="w-full form-input"
+                    disabled={{cannot-write @resource}}
+                    placeholder={{t "issue.fields.report"}}
+                    rows={{5}}
+                />
+            </InputGroup>
+
+            <InputGroup @name={{t "issue.fields.tags"}} @wrapperClass="col-span-2">
+                <ModelTagInput @model={{@resource}} @placeholder={{t "issue.fields.add-tags"}} @disabled={{cannot-write @resource}} as |tag|>
+                    {{tag}}
+                </ModelTagInput>
+            </InputGroup>
+
+            <InputGroup @name={{t "issue.fields.priority"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "issuePriorities"}}
+                        @selected={{find-by "value" @resource.priority (get-fleet-ops-options "issuePriorities")}}
+                        @onChange={{set-model-attr @resource "priority"}}
+                        @placeholder={{t "issue.fields.select-priority"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |priority|
+                    >
+                        <div class="text-sm">
+                            <div class="font-semibold normalize-in-trigger">{{priority.label}}</div>
+                            <div class="hide-from-trigger">{{priority.description}}</div>
+                        </div>
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name={{t "common.status"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "issueStatuses"}}
+                        @selected={{find-by "value" @resource.status (get-fleet-ops-options "issueStatuses")}}
+                        @onChange={{set-model-attr @resource "status"}}
+                        @placeholder={{t "issue.fields.select-status"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |status|
+                    >
+                        <div class="text-sm">
+                            <div class="font-semibold normalize-in-trigger">{{status.label}}</div>
+                            <div class="hide-from-trigger">{{status.description}}</div>
+                        </div>
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name={{t "common.coordinates"}} @wrapperClass="col-span-2">
+                <ModelCoordinatesInput @model={{@resource}} @disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <RegistryYield @registry="fleet-ops:component:issue:form:details" as |RegistryComponent|>
+                <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+            </RegistryYield>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
+
+    <RegistryYield @registry="fleet-ops:component:issue:form" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{this.controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
+</div>

package/addon/components/issue/form.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class IssueFormComponent extends Component {}

package/addon/components/layout/fleet-ops-sidebar/driver-listing.hbs

@@ -3,6 +3,8 @@
     @title={{@title}}
     @titleIcon={{@icon}}
     @hideCaret={{true}}
+    @caretLeft={{true}}
+    @caretIcon="caret"
     @toggleOnCaretOnly={{true}}
     @onClickPanelTitle={{this.transitionToRoute}}
     @wrapperClass="next-driver-listing"
@@ -10,7 +12,7 @@
     @dropdownButtonActions={{this.panelDropdownButtonActions}}
     @dropdownButtonRenderInPlace={{false}}
     @dropdownButtonCalculatePosition={{this.calculateDropdownPosition}}
-    @dropdownButtonMenuLabel={{t "fleet-ops.component.layout.fleet-ops-sidebar.drivers"}}
+    @dropdownButtonMenuLabel={{t "resource.drivers"}}
     @dropdownMenuWrapperClass="next-sidebar-panel-menu-dropdown"
 >
     {{#each this.drivers as |driver|}}

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

@@ -2,94 +2,97 @@ 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 { task } from 'ember-concurrency';
 
 export default class LayoutFleetOpsSidebarDriverListingComponent extends Component {
+    @service driverActions;
+    @service leafletMapManager;
     @service store;
     @service universe;
-    @service contextPanel;
-    @service driverActions;
     @service hostRouter;
     @service abilities;
     @service notifications;
+    @service intl;
     @tracked drivers = [];
-
-    constructor() {
-        super(...arguments);
-        this.fetchDrivers.perform();
-        this.universe.on('fleet-ops.driver.saved', () => {
-            this.fetchDrivers.perform();
-        });
+    @tracked displayPanelDropdown = true;
+
+    get panelDropdownButtonActions() {
+        return [
+            {
+                label: this.intl.t('common.create-a-new-resource', { resource: this.intl.t('resource.driver') }),
+                disabled: this.abilities.cannot('fleet-ops create driver'),
+                onClick: () => {
+                    this.driverActions.panel.create();
+                },
+            },
+        ];
     }
 
-    displayPanelDropdown = true;
-    panelDropdownButtonActions = [
-        {
-            label: 'Create new driver...',
-            disabled: this.abilities.cannot('fleet-ops create driver'),
-            onClick: () => {
-                const driver = this.store.createRecord('driver');
-                this.contextPanel.focus(driver, 'editing');
+    get dropdownButtonActions() {
+        return [
+            {
+                label: this.intl.t('common.view-resource-details', { resource: this.intl.t('resource.driver') }),
+                disabled: this.abilities.cannot('fleet-ops view driver'),
+                onClick: (driver) => {
+                    this.driverActions.panel.view(driver);
+                },
             },
-        },
-    ];
-
-    dropdownButtonActions = [
-        {
-            label: 'View driver details...',
-            disabled: this.abilities.cannot('fleet-ops view driver'),
-            onClick: (driver) => {
-                this.contextPanel.focus(driver);
+            {
+                label: this.intl.t('common.edit-resource-details', { resource: this.intl.t('resource.driver') }),
+                disabled: this.abilities.cannot('fleet-ops update driver'),
+                onClick: (driver) => {
+                    this.driverActions.panel.edit(driver, { useDefaultSaveTask: true });
+                },
             },
-        },
-        {
-            label: 'Edit driver details...',
-            disabled: this.abilities.cannot('fleet-ops update driver'),
-            onClick: (driver) => {
-                this.contextPanel.focus(driver, 'editing');
+            {
+                separator: true,
             },
-        },
-        {
-            separator: true,
-        },
-        {
-            label: 'Assign order to driver...',
-            disabled: this.abilities.cannot('fleet-ops assign-order-for driver'),
-            onClick: (driver) => {
-                this.driverActions.assignOrder(driver);
+            {
+                label: this.intl.t('driver.actions.assign-order'),
+                disabled: this.abilities.cannot('fleet-ops assign-order-for driver'),
+                onClick: (driver) => {
+                    this.driverActions.assignOrder(driver);
+                },
             },
-        },
-        {
-            label: 'Assign vehicle to driver...',
-            disabled: this.abilities.cannot('fleet-ops assign-vehicle-for driver'),
-            onClick: (driver) => {
-                this.driverActions.assignVehicle(driver);
+            {
+                label: this.intl.t('driver.actions.assign-vehicle'),
+                disabled: this.abilities.cannot('fleet-ops assign-vehicle-for driver'),
+                onClick: (driver) => {
+                    this.driverActions.assignVehicle(driver);
+                },
             },
-        },
-        {
-            label: 'Locate driver on map...',
-            disabled: this.abilities.cannot('fleet-ops view driver'),
-            onClick: (driver) => {
-                // If currently on the operations dashboard focus driver on the map
-                if (typeof this.hostRouter.currentRouteName === 'string' && this.hostRouter.currentRouteName.startsWith('console.fleet-ops.operations.orders')) {
-                    return this.onDriverClicked(driver);
-                }
-
-                this.driverActions.locate(driver);
+            {
+                label: this.intl.t('driver.actions.locate-driver'),
+                disabled: this.abilities.cannot('fleet-ops view driver'),
+                onClick: (driver) => {
+                    // If currently on the operations dashboard focus driver on the map
+                    if (typeof this.hostRouter.currentRouteName === 'string' && this.hostRouter.currentRouteName.startsWith('console.fleet-ops.operations.orders')) {
+                        return this.onDriverClicked(driver);
+                    }
+
+                    this.driverActions.locate(driver);
+                },
+            },
+            {
+                separator: true,
             },
-        },
-        {
-            separator: true,
-        },
-        {
-            label: 'Delete driver...',
-            disabled: this.abilities.cannot('fleet-ops delete driver'),
-            onClick: (driver) => {
-                this.driverActions.delete(driver);
+            {
+                label: this.intl.t('common.delete-resource', { resource: this.intl.t('resource.driver') }),
+                disabled: this.abilities.cannot('fleet-ops delete driver'),
+                onClick: (driver) => {
+                    this.driverActions.delete(driver);
+                },
             },
-        },
-    ];
+        ];
+    }
+
+    constructor() {
+        super(...arguments);
+        this.fetchDrivers.perform();
+        this.universe.on('fleet-ops.driver.saved', () => {
+            this.fetchDrivers.perform();
+        });
+    }
 
     @action calculateDropdownPosition(trigger, content) {
         let { top, left, width, height } = trigger.getBoundingClientRect();
@@ -124,40 +127,33 @@ export default class LayoutFleetOpsSidebarDriverListingComponent extends Compone
         }
     }
 
-    @action onDriverClicked(driver) {
-        // Transition to dashboard/map display
-        return this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index', { queryParams: { layout: 'map' } }).then(() => {
-            // Focus vehicle on live map
+    /* eslint-disable no-empty */
+    @action async onDriverClicked(driver) {
+        try {
+            await this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index', { queryParams: { layout: 'map' } });
+        } catch {}
+
+        if (this.leafletMapManager._livemap?.isReady()) {
             this.focusDriverOnMap(driver);
+        } else {
+            this.universe.one('fleet-ops.live-map.on-loaded', () => {
+                this.focusDriverOnMap(driver);
+            });
+        }
 
-            // Fire callback
-            if (typeof this.args.onFocusDriver === 'function') {
-                this.args.onFocusDriver(driver);
-            }
-        });
+        if (typeof this.args.onFocusDriver === 'function') {
+            this.args.onFocusDriver(driver);
+        }
     }
 
-    focusDriverOnMap(driver) {
-        const liveMap = this.universe.get('component:fleet-ops:live-map');
-
-        if (liveMap) {
-            if (liveMap.contextPanel) {
-                liveMap.contextPanel.clear();
-            }
-
-            liveMap.showAll();
-            liveMap.focusLayerByRecord(driver, 16, {
-                onAfterFocusWithRecord: function () {
-                    later(
-                        this,
-                        () => {
-                            liveMap.onDriverClicked(driver);
-                        },
-                        1200
-                    );
-                },
-            });
-        }
+    @action async focusDriverOnMap(driver) {
+        await this.leafletMapManager.ensureInteractive({ timeoutMs: 8000 });
+        this.leafletMapManager.flyToRecordLayer(driver, 16, {
+            paddingBottomRight: [300, 200],
+            moveend: () => {
+                this.driverActions.panel.view(driver, { closeOnTransition: true });
+            },
+        });
     }
 
     @task *fetchDrivers() {

package/addon/components/layout/fleet-ops-sidebar/fleet-listing.hbs

@@ -3,6 +3,8 @@
     @title={{@title}}
     @titleIcon={{@icon}}
     @hideCaret={{true}}
+    @caretLeft={{true}}
+    @caretIcon="caret"
     @toggleOnCaretOnly={{true}}
     @onClickPanelTitle={{this.transitionToRoute}}
     @permission={{@permission}}