@fleetbase/fleetops-engine 0.6.56 → 0.6.57

package/addon/components/fleet/hierarchy-tree.js

@@ -0,0 +1,528 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { debug } from '@ember/debug';
+
+const FILTER_ALL = 'all';
+const FILTER_DRIVERS = 'drivers';
+const FILTER_VEHICLES = 'vehicles';
+const FILTER_ONLINE = 'online';
+
+export default class FleetHierarchyTreeComponent extends Component {
+    @service store;
+
+    @tracked expandedFleetIds = new Set();
+    @tracked query = '';
+    @tracked activeFilter = FILTER_ALL;
+    @tracked loadedDriversByFleetKey = {};
+    @tracked loadedVehiclesByFleetKey = {};
+    loadingDriverFleetKeys = new Set();
+    loadingVehicleFleetKeys = new Set();
+
+    constructor() {
+        super(...arguments);
+        this.expandedFleetIds = new Set(this.initialExpandedFleetIds);
+    }
+
+    get filters() {
+        return [
+            { id: FILTER_ALL, label: 'All' },
+            { id: FILTER_DRIVERS, label: 'Drivers' },
+            { id: FILTER_VEHICLES, label: 'Vehicles' },
+            { id: FILTER_ONLINE, label: 'Online' },
+        ];
+    }
+
+    get rootFleet() {
+        return this.args.fleet;
+    }
+
+    get fleets() {
+        return this.rootFleet ? [this.rootFleet] : [];
+    }
+
+    get normalizedQuery() {
+        return String(this.query ?? '')
+            .trim()
+            .toLowerCase();
+    }
+
+    get hasQuery() {
+        return this.normalizedQuery.length > 0;
+    }
+
+    get hasActiveFilter() {
+        return this.activeFilter !== FILTER_ALL;
+    }
+
+    get hasControlsApplied() {
+        return this.hasQuery || this.hasActiveFilter;
+    }
+
+    get hasHierarchyResources() {
+        return this.fleets.some((fleet) => this.fleetHasChildren(fleet));
+    }
+
+    get allFleetNodesExpanded() {
+        const fleetKeys = this.collectFleetKeys(this.fleets);
+
+        return fleetKeys.length > 0 && fleetKeys.every((key) => this.expandedFleetIds.has(key));
+    }
+
+    get expandCollapseIcon() {
+        return this.allFleetNodesExpanded ? 'down-left-and-up-right-to-center' : 'up-right-and-down-left-from-center';
+    }
+
+    get expandCollapseHelpText() {
+        return this.allFleetNodesExpanded ? 'Collapse all' : 'Expand all';
+    }
+
+    get visibleRows() {
+        if (this.hasControlsApplied) {
+            return this.buildFilteredFleetRows(this.fleets);
+        }
+
+        return this.buildFleetRows(this.fleets);
+    }
+
+    get emptyTitle() {
+        if (this.hasControlsApplied) {
+            return 'No matching resources';
+        }
+
+        return 'No fleet resources assigned';
+    }
+
+    get emptyDescription() {
+        if (this.hasControlsApplied) {
+            return 'Clear the current search or filter to show the full fleet hierarchy.';
+        }
+
+        return 'Assign drivers or vehicles to make this fleet operationally useful.';
+    }
+
+    get initialExpandedFleetIds() {
+        return this.fleets.flatMap((fleet) => {
+            const key = this.fleetKey(fleet);
+            const childKeys = this.fleetSubfleets(fleet)
+                .map((subfleet) => this.fleetKey(subfleet))
+                .filter(Boolean);
+
+            return [key, ...childKeys].filter(Boolean);
+        });
+    }
+
+    resourceArray(resources) {
+        if (!resources) {
+            return [];
+        }
+
+        if (typeof resources.toArray === 'function') {
+            return resources.toArray();
+        }
+
+        return Array.isArray(resources) ? resources : [];
+    }
+
+    @action displayName(resource) {
+        return resource?.displayName ?? resource?.display_name ?? resource?.name ?? resource?.public_id ?? 'Unnamed resource';
+    }
+
+    fleetKey(fleet) {
+        return String(fleet?.id ?? fleet?.uuid ?? fleet?.public_id ?? fleet?.name ?? '');
+    }
+
+    fleetSubfleets(fleet) {
+        return this.sortByName(this.resourceArray(fleet?.subfleets));
+    }
+
+    @action fleetSubfleetCount(fleet) {
+        return this.fleetSubfleets(fleet).length;
+    }
+
+    fleetDrivers(fleet) {
+        const embeddedDrivers = this.resourceArray(fleet?.drivers);
+
+        if (embeddedDrivers.length) {
+            return this.sortOnlineFirst(embeddedDrivers);
+        }
+
+        return this.sortOnlineFirst(this.loadedDriversByFleetKey[this.fleetKey(fleet)] ?? []);
+    }
+
+    fleetVehicles(fleet) {
+        const embeddedVehicles = this.resourceArray(fleet?.vehicles);
+
+        if (embeddedVehicles.length) {
+            return this.sortOnlineFirst(embeddedVehicles);
+        }
+
+        return this.sortOnlineFirst(this.loadedVehiclesByFleetKey[this.fleetKey(fleet)] ?? []);
+    }
+
+    fleetDriverCount(fleet) {
+        return Number(fleet?.drivers_count ?? fleet?.driver_count ?? this.fleetDrivers(fleet).length ?? 0);
+    }
+
+    fleetVehicleCount(fleet) {
+        return Number(fleet?.vehicles_count ?? fleet?.vehicle_count ?? this.fleetVehicles(fleet).length ?? 0);
+    }
+
+    fleetOnlineDriverCount(fleet) {
+        return Number(fleet?.drivers_online_count ?? this.fleetDrivers(fleet).filter((driver) => driver?.online).length ?? 0);
+    }
+
+    fleetOnlineVehicleCount(fleet) {
+        return Number(fleet?.vehicles_online_count ?? this.fleetVehicles(fleet).filter((vehicle) => vehicle?.online).length ?? 0);
+    }
+
+    @action fleetSubtitle(fleet) {
+        return `${this.fleetOnlineDriverCount(fleet)}/${this.fleetDriverCount(fleet)} drivers online - ${this.fleetOnlineVehicleCount(fleet)}/${this.fleetVehicleCount(fleet)} vehicles online`;
+    }
+
+    @action driverSubtitle(driver) {
+        return [driver?.vehicle_name, driver?.status, driver?.public_id].filter(Boolean).join(' - ') || (driver?.online ? 'Online' : 'Offline');
+    }
+
+    @action vehicleSubtitle(vehicle) {
+        return [vehicle?.driver_name, vehicle?.plate_number, vehicle?.vin, vehicle?.status, vehicle?.public_id].filter(Boolean).join(' - ') || (vehicle?.online ? 'Online' : 'Offline');
+    }
+
+    @action fleetHasChildren(fleet) {
+        return this.fleetSubfleets(fleet).length > 0 || this.fleetDriverCount(fleet) > 0 || this.fleetVehicleCount(fleet) > 0;
+    }
+
+    @action isFleetExpanded(fleet) {
+        return this.expandedFleetIds.has(this.fleetKey(fleet));
+    }
+
+    buildFleetRows(fleets = [], depth = 0) {
+        return fleets.flatMap((fleet) => {
+            const rows = [this.fleetRow(fleet, depth)];
+
+            if (!this.isFleetExpanded(fleet)) {
+                return rows;
+            }
+
+            rows.push(...this.childRows(fleet, depth + 1));
+
+            return rows;
+        });
+    }
+
+    buildFilteredFleetRows(fleets = [], depth = 0) {
+        return fleets.flatMap((fleet) => {
+            const fleetMatches = this.fleetMatches(fleet);
+            const childDepth = depth + 1;
+            const subfleetRows = this.buildFilteredFleetRows(this.fleetSubfleets(fleet), childDepth);
+            const driverRows = this.fleetDrivers(fleet)
+                .filter((driver) => this.driverVisible(driver))
+                .map((driver) => this.driverRow(driver, childDepth));
+            const vehicleRows = this.fleetVehicles(fleet)
+                .filter((vehicle) => this.vehicleVisible(vehicle))
+                .map((vehicle) => this.vehicleRow(vehicle, childDepth));
+
+            if (fleetMatches) {
+                return [this.fleetRow(fleet, depth), ...this.childRows(fleet, childDepth, true)];
+            }
+
+            if (!subfleetRows.length && !driverRows.length && !vehicleRows.length) {
+                return [];
+            }
+
+            return [this.fleetRow(fleet, depth), ...subfleetRows, ...driverRows, ...vehicleRows];
+        });
+    }
+
+    childRows(fleet, depth, forceExpanded = false) {
+        const rows = [];
+
+        this.fleetSubfleets(fleet).forEach((subfleet) => {
+            if (forceExpanded) {
+                rows.push(this.fleetRow(subfleet, depth), ...this.childRows(subfleet, depth + 1, true));
+            } else {
+                rows.push(...this.buildFleetRows([subfleet], depth));
+            }
+        });
+
+        if (this.activeFilter !== FILTER_VEHICLES) {
+            this.fleetDrivers(fleet)
+                .filter((driver) => this.activeFilter !== FILTER_ONLINE || driver?.online)
+                .forEach((driver) => rows.push(this.driverRow(driver, depth)));
+        }
+
+        if (this.activeFilter !== FILTER_DRIVERS) {
+            this.fleetVehicles(fleet)
+                .filter((vehicle) => this.activeFilter !== FILTER_ONLINE || vehicle?.online)
+                .forEach((vehicle) => rows.push(this.vehicleRow(vehicle, depth)));
+        }
+
+        return rows;
+    }
+
+    fleetRow(fleet, depth) {
+        return {
+            type: 'fleet',
+            key: `fleet:${this.fleetKey(fleet)}`,
+            fleet,
+            depth,
+            depthClass: this.depthClass(depth),
+        };
+    }
+
+    driverRow(driver, depth) {
+        return {
+            type: 'driver',
+            key: `driver:${driver?.id ?? driver?.uuid ?? driver?.public_id ?? this.displayName(driver)}`,
+            driver,
+            depth,
+            depthClass: this.depthClass(depth),
+        };
+    }
+
+    vehicleRow(vehicle, depth) {
+        return {
+            type: 'vehicle',
+            key: `vehicle:${vehicle?.id ?? vehicle?.uuid ?? vehicle?.public_id ?? this.displayName(vehicle)}`,
+            vehicle,
+            depth,
+            depthClass: this.depthClass(depth),
+        };
+    }
+
+    depthClass(depth) {
+        return `fleet-hierarchy-tree-row-depth-${Math.min(Number(depth) || 0, 5)}`;
+    }
+
+    fleetMatches(fleet) {
+        return this.resourceMatches(fleet, ['name', 'public_id', 'status', 'slug'], [this.fleetSubtitle(fleet)]);
+    }
+
+    driverMatches(driver) {
+        return this.resourceMatches(driver, ['displayName', 'display_name', 'name', 'public_id', 'status', 'vehicle_name'], [this.driverSubtitle(driver)]);
+    }
+
+    vehicleMatches(vehicle) {
+        return this.resourceMatches(vehicle, ['displayName', 'display_name', 'name', 'public_id', 'status', 'driver_name', 'plate_number', 'vin'], [this.vehicleSubtitle(vehicle)]);
+    }
+
+    driverVisible(driver) {
+        if (this.activeFilter === FILTER_VEHICLES) {
+            return false;
+        }
+
+        if (this.activeFilter === FILTER_ONLINE && !driver?.online) {
+            return false;
+        }
+
+        return !this.hasQuery || this.driverMatches(driver);
+    }
+
+    vehicleVisible(vehicle) {
+        if (this.activeFilter === FILTER_DRIVERS) {
+            return false;
+        }
+
+        if (this.activeFilter === FILTER_ONLINE && !vehicle?.online) {
+            return false;
+        }
+
+        return !this.hasQuery || this.vehicleMatches(vehicle);
+    }
+
+    resourceMatches(resource, fields = [], extraValues = []) {
+        if (!this.hasQuery) {
+            return true;
+        }
+
+        const values = [...fields.map((field) => resource?.[field]), ...extraValues];
+
+        return values.filter(Boolean).some((value) => String(value).toLowerCase().includes(this.normalizedQuery));
+    }
+
+    sortOnlineFirst(resources = []) {
+        return [...resources].sort((a, b) => {
+            const onlineSort = Number(Boolean(b?.online)) - Number(Boolean(a?.online));
+
+            if (onlineSort !== 0) {
+                return onlineSort;
+            }
+
+            return String(this.displayName(a)).localeCompare(String(this.displayName(b)));
+        });
+    }
+
+    sortByName(resources = []) {
+        return [...resources].sort((a, b) => String(this.displayName(a)).localeCompare(String(this.displayName(b))));
+    }
+
+    @action toggleFleet(fleet) {
+        const key = this.fleetKey(fleet);
+        const expandedFleetIds = new Set(this.expandedFleetIds);
+        const willExpand = !expandedFleetIds.has(key);
+
+        if (!willExpand) {
+            expandedFleetIds.delete(key);
+        } else {
+            expandedFleetIds.add(key);
+        }
+
+        this.expandedFleetIds = expandedFleetIds;
+
+        if (willExpand) {
+            this.loadFleetResources(fleet);
+        }
+    }
+
+    @action expandAll() {
+        this.expandedFleetIds = new Set(this.collectFleetKeys(this.fleets));
+        this.loadVisibleFleetResources();
+    }
+
+    @action collapseAll() {
+        this.expandedFleetIds = new Set(this.fleets.map((fleet) => this.fleetKey(fleet)).filter(Boolean));
+    }
+
+    @action toggleExpandCollapseAll() {
+        if (this.allFleetNodesExpanded) {
+            this.collapseAll();
+        } else {
+            this.expandAll();
+        }
+    }
+
+    collectFleetKeys(fleets = []) {
+        return fleets.flatMap((fleet) => [this.fleetKey(fleet), ...this.collectFleetKeys(this.fleetSubfleets(fleet))].filter(Boolean));
+    }
+
+    visibleFleets(fleets = this.fleets) {
+        return fleets.flatMap((fleet) => {
+            if (!this.isFleetExpanded(fleet)) {
+                return [fleet];
+            }
+
+            return [fleet, ...this.visibleFleets(this.fleetSubfleets(fleet))];
+        });
+    }
+
+    @action loadVisibleFleetResources() {
+        this.visibleFleets().forEach((fleet) => this.loadFleetResources(fleet));
+    }
+
+    loadFleetResources(fleet) {
+        if (!fleet) {
+            return;
+        }
+
+        if (!this.fleetDrivers(fleet).length && this.fleetDriverCount(fleet) > 0) {
+            this.loadFleetDrivers(fleet);
+        }
+
+        if (!this.fleetVehicles(fleet).length && this.fleetVehicleCount(fleet) > 0) {
+            this.loadFleetVehicles(fleet);
+        }
+    }
+
+    async loadFleetDrivers(fleet) {
+        const key = this.fleetKey(fleet);
+
+        if (!key || this.loadingDriverFleetKeys.has(key) || this.loadedDriversByFleetKey[key]) {
+            return;
+        }
+
+        this.loadingDriverFleetKeys.add(key);
+
+        try {
+            const drivers = await this.store.query('driver', { fleet: fleet.id, limit: -1 });
+            this.loadedDriversByFleetKey = {
+                ...this.loadedDriversByFleetKey,
+                [key]: this.resourceArray(drivers),
+            };
+        } catch (error) {
+            debug(`Unable to load hierarchy drivers for fleet ${key}: ${error.message}`);
+        } finally {
+            this.loadingDriverFleetKeys.delete(key);
+        }
+    }
+
+    async loadFleetVehicles(fleet) {
+        const key = this.fleetKey(fleet);
+
+        if (!key || this.loadingVehicleFleetKeys.has(key) || this.loadedVehiclesByFleetKey[key]) {
+            return;
+        }
+
+        this.loadingVehicleFleetKeys.add(key);
+
+        try {
+            const vehicles = await this.store.query('vehicle', { fleet: fleet.id, limit: -1 });
+            this.loadedVehiclesByFleetKey = {
+                ...this.loadedVehiclesByFleetKey,
+                [key]: this.resourceArray(vehicles),
+            };
+        } catch (error) {
+            debug(`Unable to load hierarchy vehicles for fleet ${key}: ${error.message}`);
+        } finally {
+            this.loadingVehicleFleetKeys.delete(key);
+        }
+    }
+
+    @action updateQuery(event) {
+        this.query = event.target.value;
+    }
+
+    @action clearFilters() {
+        this.query = '';
+        this.activeFilter = FILTER_ALL;
+    }
+
+    @action setFilter(filter) {
+        this.activeFilter = filter;
+    }
+
+    @action viewFleet(fleet) {
+        if (typeof this.args.onViewFleet === 'function') {
+            return this.args.onViewFleet(fleet);
+        }
+    }
+
+    @action viewDriver(driver) {
+        if (typeof this.args.onViewDriver === 'function') {
+            return this.args.onViewDriver(driver);
+        }
+    }
+
+    @action viewVehicle(vehicle) {
+        if (typeof this.args.onViewVehicle === 'function') {
+            return this.args.onViewVehicle(vehicle);
+        }
+    }
+
+    @action assignDriver(fleet) {
+        if (typeof this.args.onAssignDriver === 'function') {
+            return this.args.onAssignDriver(fleet);
+        }
+    }
+
+    @action assignVehicle(fleet) {
+        if (typeof this.args.onAssignVehicle === 'function') {
+            return this.args.onAssignVehicle(fleet);
+        }
+    }
+
+    @action calculateDropdownLeftPosition(trigger, content) {
+        const triggerRect = trigger.getBoundingClientRect();
+        const contentRect = content?.getBoundingClientRect?.();
+        const contentWidth = contentRect?.width || 224;
+
+        return {
+            style: {
+                position: 'fixed',
+                marginTop: '0px',
+                left: triggerRect.left - triggerRect.width / 2 - contentWidth - 9,
+                top: triggerRect.top - triggerRect.height / 2 + 5,
+            },
+        };
+    }
+}

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

@@ -116,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',
+                renderInPlace: false,
                 calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '10%',
                 actions: [

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

@@ -72,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',
+                renderInPlace: false,
                 calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '90px',
                 actions: [

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

@@ -54,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',
+                renderInPlace: false,
                 calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '90px',
                 actions: [

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

@@ -66,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',
+                renderInPlace: false,
                 calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '90px',
                 actions: [

package/addon/components/order/details.hbs

@@ -2,8 +2,24 @@
     {{#if (has-block)}}
         {{yield
             (hash
+                RegistryYieldStart=(component
+                    "registry-yield"
+                    registry="fleet-ops:component:order:details:start"
+                    resource=@resource
+                    controller=@controller
+                    permission=(get-write-permission @resource)
+                    isLoading=@isLoading
+                )
                 Activity=(component "order/details/activity" resource=@resource onChange=this.handleActivityChanged isLoadingActivity=@isLoadingActivity isLoading=@isLoading)
                 Detail=(component "order/details/detail" resource=@resource onChange=@onDetailsChanged isLoading=@isLoading)
+                RegistryYieldAfterDetails=(component
+                    "registry-yield"
+                    registry="fleet-ops:component:order:details:after-details"
+                    resource=@resource
+                    controller=@controller
+                    permission=(get-write-permission @resource)
+                    isLoading=@isLoading
+                )
                 CustomFields=(component "order/details/custom-fields" resource=@resource onChange=@onCustomFieldsChanged isLoading=@isLoading)
                 PurchaseRate=(component "order/details/purchase-rate" resource=@resource isLoading=@isLoading)
                 Tracking=(component "order/details/tracking" resource=@resource isLoading=@isLoading)
@@ -18,11 +34,25 @@
                 Documents=(component "order/details/documents" resource=@resource onChange=@onDocumentsChanged isLoading=@isLoading)
                 Comments=(component "order/details/comments" resource=@resource onChange=@onCommentsChanged isLoading=@isLoading)
                 Metadata=(component "order/details/metadata" resource=@resource onChange=@onMetadataChanged isLoading=@isLoading)
+                RegistryYieldEnd=(component
+                    "registry-yield"
+                    registry="fleet-ops:component:order:details:end"
+                    resource=@resource
+                    controller=@controller
+                    permission=(get-write-permission @resource)
+                    isLoading=@isLoading
+                )
             )
         }}
     {{else}}
+        <RegistryYield @registry="fleet-ops:component:order:details:start" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} @isLoading={{@isLoading}} />
+        </RegistryYield>
         <Order::Details::Activity @resource={{@resource}} @onChange={{this.handleActivityChanged}} @isLoadingActivity={{@isLoadingActivity}} @isLoading={{@isLoading}} />
         <Order::Details::Detail @resource={{@resource}} @onChange={{@onDetailsChanged}} @isLoading={{@isLoading}} />
+        <RegistryYield @registry="fleet-ops:component:order:details:after-details" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} @isLoading={{@isLoading}} />
+        </RegistryYield>
         <Order::Details::CustomFields @resource={{@resource}} @onChange={{@onCustomFieldsChanged}} @isLoading={{@isLoading}} />
         <Order::Details::PurchaseRate @resource={{@resource}} @isLoading={{@isLoading}} />
         <Order::Details::Tracking @resource={{@resource}} @isLoading={{@isLoading}} />
@@ -37,5 +67,8 @@
         <Order::Details::Documents @resource={{@resource}} @onChange={{@onDocumentsChanged}} @isLoading={{@isLoading}} />
         <Order::Details::Comments @resource={{@resource}} @onChange={{@onCommentsChanged}} @isLoading={{@isLoading}} />
         <Order::Details::Metadata @resource={{@resource}} @onChange={{@onMetadataChanged}} @isLoading={{@isLoading}} />
+        <RegistryYield @registry="fleet-ops:component:order:details:end" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} @isLoading={{@isLoading}} />
+        </RegistryYield>
     {{/if}}
-</div>
+</div>

package/addon/components/order/form/details.hbs

@@ -234,6 +234,10 @@
                 />
             </InputGroup>
         </div>
+
+        <RegistryYield @registry="fleet-ops:component:order:form:details" as |RegistryComponent|>
+            <RegistryComponent @order={{@resource}} @resource={{@resource}} />
+        </RegistryYield>
     </div>
 </ContentPanel>
 

package/addon/components/order/form.hbs

@@ -2,6 +2,7 @@
     {{#if (has-block)}}
         {{yield
             (hash
+                RegistryYieldStart=(component "registry-yield" registry="fleet-ops:component:order:form:start" order=@resource)
                 Details=(component "order/form/details" resource=@resource)
                 CustomFields=(component "order/form/custom-fields" resource=@resource customFields=@customFields)
                 Route=(component "order/form/route" resource=@resource)
@@ -12,9 +13,13 @@
                 Documents=(component "order/form/documents" resource=@resource)
                 OrchestratorConstraints=(component "order/form/orchestrator-constraints" resource=@resource)
                 Metadata=(component "order/form/metadata" resource=@resource)
+                RegistryYieldEnd=(component "registry-yield" registry="fleet-ops:component:order:form:end" order=@resource)
             )
         }}
     {{else}}
+        <RegistryYield @registry="fleet-ops:component:order:form:start" as |RegistryComponent|>
+            <RegistryComponent @order={{@resource}} @resource={{@resource}} />
+        </RegistryYield>
         <Order::Form::Details @resource={{@resource}} />
         <Order::Form::Route @resource={{@resource}} />
         <RegistryYield @registry="fleet-ops:component:order:form" as |RegistryComponent|>
@@ -26,5 +31,8 @@
         <Order::Form::Documents @resource={{@resource}} />
         <Order::Form::OrchestratorConstraints @resource={{@resource}} />
         <Order::Form::Metadata @resource={{@resource}} />
+        <RegistryYield @registry="fleet-ops:component:order:form:end" as |RegistryComponent|>
+            <RegistryComponent @order={{@resource}} @resource={{@resource}} />
+        </RegistryYield>
     {{/if}}
-</div>
+</div>