From 27d3e51ce3f3f766abda8109212446ea2364dbcf Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Thu, 22 Aug 2024 15:04:03 +0800
Subject: [PATCH 1/4] more permission based ux implementations

---
 addon/components/content-panel.hbs            |  26 ++++-
 addon/components/content-panel.js             |  15 ++-
 addon/components/coordinates-input.hbs        |  10 +-
 addon/components/coordinates-input.js         |   8 ++
 addon/components/full-calendar/draggable.hbs  |   2 +-
 addon/components/full-calendar/draggable.js   |  36 +++++-
 addon/components/layout/sidebar/item.hbs      |  10 +-
 addon/components/layout/sidebar/panel.hbs     | 103 ++++++++++--------
 addon/components/layout/sidebar/panel.js      |  15 ++-
 addon/components/model-select.hbs             |  12 +-
 addon/components/model-select.js              |  20 +++-
 addon/components/select.hbs                   |   8 +-
 addon/components/select.js                    |   4 +-
 addon/components/table/cell/dropdown.hbs      |   6 +-
 .../table/cell/dropdown/action-item.hbs       |   4 +-
 addon/components/unit-input.hbs               |   5 +-
 addon/components/unit-input.js                |  12 +-
 addon/styles/components/full-calendar.css     |   6 +
 addon/styles/components/input.css             |  20 +++-
 addon/styles/components/tabs.css              |  21 ++++
 addon/styles/layout/next.css                  |  70 ++++++++++--
 addon/styles/layout/reset.css                 |   6 +
 package.json                                  |   2 +-
 23 files changed, 330 insertions(+), 91 deletions(-)

diff --git a/addon/components/content-panel.hbs b/addon/components/content-panel.hbs
index 9f95b8f..82b3212 100644
--- a/addon/components/content-panel.hbs
+++ b/addon/components/content-panel.hbs
@@ -7,7 +7,7 @@
                     {{@panelHeaderClass}}
                     {{if @isLoading 'is-loading'}}"
             >
-                <a href="javascript:;" aria-expanded={{this.isOpen}} class="next-content-panel-header-left {{@panelHeaderLeftClass}}" {{on "click" this.toggle}}>
+                <a href="javascript:;" aria-expanded={{this.isOpen}} class="next-content-panel-header-left {{if this.disabled 'opacity-50'}} {{@panelHeaderLeftClass}}" disabled={{this.disabled}} {{on "click" this.toggle}}>
                     {{#unless @hideCaret}}
                         <span class="icon-container" {{did-insert this.trackIconContainer}}>
                             <FaIcon @icon={{if this.isOpen "caret-down" "caret-right"}} @prefix="fas" />
@@ -49,6 +49,15 @@
                             </div>
                         {{/if}}
                     </div>
+                    {{#if this.doesntHavePermissions}}
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "right"}}>
+                            <InputInfo @text={{t "common.unauthorized"}} />
+                        </Attach::Tooltip>
+                    {{else if @helpText}}
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "right"}}>
+                            <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
+                        </Attach::Tooltip>
+                    {{/if}}
                 </a>
                 <div class="next-content-panel-header-right {{@panelHeaderRightClass}}">
                     {{#if @titleRightSideComponent}}
@@ -89,24 +98,31 @@
                                 @iconPrefix={{button.iconPrefix}}
                                 @onClick={{button.onClick}}
                                 @wrapperClass={{button.wrapperClass}}
+                                @permission={{button.permission}}
+                                @disabled={{button.disabled}}
                                 class={{button.class}}
                             />
                         {{/each}}
                         {{#if @dropdownButton}}
                             <DropdownButton
+                                class={{@dropdownButtonWrapperClass}}
+                                @defaultClass={{@dropdownButtonDefaultClass}}
                                 @icon={{or @dropdownButtonIcon "ellipsis"}}
                                 @iconPrefix={{@dropdownButtonIconPrefix}}
                                 @text={{@dropdownButtonText}}
                                 @size="xs"
-                                @horizontalPosition="left"
+                                @horizontalPosition={{or @dropdownButtonHorizontalPosition "right"}}
+                                @verticalPosition={{@verticalPosition}}
                                 @calculatePosition={{@dropdownButtonCalculatePosition}}
                                 @renderInPlace={{this.dropdownButtonRenderInPlace}}
+                                @permission={{@dropdownButtonPermission}}
+                                @disabled={{@dropdownButtonDisabled}}
                                 as |dd|
                             >
-                                <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+                                <div class="next-dd-menu mt-0i {{@dropdownMenuWrapperClass}}" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                                     {{#if @dropdownButtonMenuLabel}}
-                                        <div class="px-1">
-                                            <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
+                                        <div class="next-dd-menu-label-container px-1">
+                                            <div class="next-dd-menu-label {{@dropdownButtonMenuLabelClass}}">
                                                 {{@dropdownButtonMenuLabel}}
                                             </div>
                                         </div>
diff --git a/addon/components/content-panel.js b/addon/components/content-panel.js
index 41172f5..f20856f 100644
--- a/addon/components/content-panel.js
+++ b/addon/components/content-panel.js
@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
@@ -9,6 +10,8 @@ import { action } from '@ember/object';
  * @extends Component
  */
 export default class ContentPanelComponent extends Component {
+    @service abilities;
+
     /**
      * Indicates whether the content panel is currently open.
      *
@@ -45,15 +48,25 @@ export default class ContentPanelComponent extends Component {
      */
     @tracked iconContainers = [];
 
+    @tracked permissionRequired = null;
+    @tracked disabled = false;
+    @tracked doesntHavePermissions = false;
+
     /**
      * Initializes the content panel component.
      *
      * @constructor
      * @public
      */
-    constructor(owner, { open = false, toggleOnCaretOnly = false, dropdownButtonRenderInPlace = true, onInsert }) {
+    constructor(owner, { open = false, toggleOnCaretOnly = false, dropdownButtonRenderInPlace = true, disabled = false, permission = null, onInsert }) {
         super(...arguments);
 
+        this.disabled = false;
+        this.permissionRequired = permission;
+        this.disabled = disabled;
+        if (!disabled) {
+            this.disabled = this.doesntHavePermissions = permission && this.abilities.cannot(permission);
+        }
         this.isOpen = open === true;
         this.toggleOnCaretOnly = toggleOnCaretOnly === true;
         this.dropdownButtonRenderInPlace = dropdownButtonRenderInPlace === true;
diff --git a/addon/components/coordinates-input.hbs b/addon/components/coordinates-input.hbs
index 8dda317..7e47036 100644
--- a/addon/components/coordinates-input.hbs
+++ b/addon/components/coordinates-input.hbs
@@ -1,10 +1,10 @@
 <div class="grid grid-cols-2 gap-2 coordinates-input" ...attributes>
-    <Input class="w-full form-input" @type="text" placeholder="Latitude" aria-label="Latitude" @value={{this.latitude}} />
-    <Input class="w-full form-input" @type="text" placeholder="Longitude" aria-label="Longitude" @value={{this.longitude}} />
+    <Input class="w-full form-input" @type="text" placeholder="Latitude" aria-label="Latitude" @value={{this.latitude}} disabled={{this.disabled}} />
+    <Input class="w-full form-input" @type="text" placeholder="Longitude" aria-label="Longitude" @value={{this.longitude}} disabled={{this.disabled}} />
 </div>
 <div class="my-1">
-    <BasicDropdown ...attributes @verticalPosition="top" @horizontalPosition="left" @onClose={{this.onClose}} @renderInPlace={{or @renderInPlace true}} as |dd|>
-        <dd.Trigger class={{@triggerClass}}>
+    <BasicDropdown ...attributes @verticalPosition="top" @horizontalPosition="left" @onClose={{this.onClose}} @renderInPlace={{or @renderInPlace true}} @disabled={{this.disabled}} as |dd|>
+        <dd.Trigger class="{{@triggerClass}} {{if this.disabled 'disabled'}}" disabled={{this.disabled}}>
             <span class="text-sky-500 hover:text-sky-600">Select from map</span>
         </dd.Trigger>
         <dd.Content class="bg-transparent min-w-500px">
@@ -42,7 +42,7 @@
             </div>
             <div class="flex flex-col">
                 <div class="flex flex-row items-center pb-4">
-                    <Input @type="text" class="form-input mr-2" @value={{this.lookupQuery}} aria-label="Address Search" disabled={{this.isLoading}} placeholder="Enter address" />
+                    <Input @type="text" class="form-input mr-2" @value={{this.lookupQuery}} aria-label="Address Search" disabled={{or this.disabled this.isLoading}} placeholder="Enter address" />
                     <Button @wrapperClass="mr-2" @icon="search-location" @type="primary" @size="sm" @text="Lookup" @onClick={{this.reverseLookup}} @isLoading={{this.isLoading}} />
                     <Button @type="default" @iconPrefix="fas" @icon="times" @size="sm" @text="Done" @onClick={{dd.actions.close}} />
                 </div>
diff --git a/addon/components/coordinates-input.js b/addon/components/coordinates-input.js
index 5cc74c4..c189cc9 100644
--- a/addon/components/coordinates-input.js
+++ b/addon/components/coordinates-input.js
@@ -109,6 +109,13 @@ export default class CoordinatesInputComponent extends Component {
      */
     @tracked tileSourceUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
 
+    /**
+     * Disable input.
+     *
+     * @memberof CoordinatesInputComponent
+     */
+    @tracked disabled = false;
+
     /**
      * Constructor for CoordinatesInputComponent. Sets initial map coordinates and values.
      * @memberof CoordinatesInputComponent
@@ -120,6 +127,7 @@ export default class CoordinatesInputComponent extends Component {
         this.setInitialValueFromPoint(this.args.value);
         this.zoom = getWithDefault(this.args, 'zoom', 9);
         this.zoomControl = getWithDefault(this.args, 'zoomControl', false);
+        this.disabled = getWithDefault(this.args, 'disabled', false);
 
         if (typeof this.args.onInit === 'function') {
             this.args.onInit(this);
diff --git a/addon/components/full-calendar/draggable.hbs b/addon/components/full-calendar/draggable.hbs
index 2f2af9f..18f9054 100644
--- a/addon/components/full-calendar/draggable.hbs
+++ b/addon/components/full-calendar/draggable.hbs
@@ -1,3 +1,3 @@
-<div class="fleetbase-full-calendar-draggable" data-event={{@eventData}} {{did-insert this.makeDraggable}} ...attributes>
+<div class="fleetbase-full-calendar-draggable {{if this.disabled 'draggable-disabled'}}" data-disabled={{this.disabled}} data-event={{@eventData}} {{did-update this.argsChanged @disabled}} {{did-insert this.makeDraggable}} ...attributes>
     {{yield}}
 </div>
\ No newline at end of file
diff --git a/addon/components/full-calendar/draggable.js b/addon/components/full-calendar/draggable.js
index d59eb5a..5fbe155 100644
--- a/addon/components/full-calendar/draggable.js
+++ b/addon/components/full-calendar/draggable.js
@@ -6,13 +6,45 @@ import { Draggable } from '@fullcalendar/interaction';
 export default class DraggableFullcalendarEventComponent extends Component {
     @tracked draggable;
     @tracked eventData = {};
+    @tracked disabled = false;
 
-    constructor() {
+    constructor(owner, { eventData = {}, disabled = false }) {
         super(...arguments);
-        this.eventData = this.args.eventData ?? {};
+        this.eventData = eventData;
+        this.disabled = disabled;
     }
 
     @action makeDraggable(element) {
+        this.destroyDraggable();
+        this.ready(element);
+        if (this.disabled) {
+            return;
+        }
+
         this.draggable = new Draggable(element);
+        this.dragReady(this.draggable);
+    }
+
+    @action argsChanged(element, [disabled = false]) {
+        this.disabled = disabled;
+        this.makeDraggable(element);
+    }
+
+    ready() {
+        if (typeof this.args.onReady === 'function') {
+            this.args.onReady(...arguments);
+        }
+    }
+
+    dragReady() {
+        if (typeof this.args.onDragReady === 'function') {
+            this.args.onDragReady(...arguments);
+        }
+    }
+
+    destroyDraggable() {
+        if (this.draggable && typeof this.draggable.destroy === 'function') {
+            this.draggable.destroy();
+        }
     }
 }
diff --git a/addon/components/layout/sidebar/item.hbs b/addon/components/layout/sidebar/item.hbs
index e7f5162..1cddda1 100644
--- a/addon/components/layout/sidebar/item.hbs
+++ b/addon/components/layout/sidebar/item.hbs
@@ -53,10 +53,10 @@
                         @disabled={{this.disabled}}
                         as |dd|
                     >
-                        <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+                        <div class="next-dd-menu mt-0i {{@dropdownMenuWrapperClass}}" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                             {{#if @dropdownButtonMenuLabel}}
-                                <div class="px-1">
-                                    <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
+                                <div class="next-dd-menu-label-container px-1">
+                                    <div class="next-dd-menu-label {{@dropdownMenuLabelClass}}">
                                         {{@dropdownButtonMenuLabel}}
                                     </div>
                                 </div>
@@ -71,9 +71,9 @@
                                             {{! template-lint-disable no-nested-interactive }}
                                             <a href="javascript:;" role="menuitem" class="next-dd-item {{action.class}}" {{on "click" (fn this.onDropdownItemClick action dd)}}>
                                                 {{#if action.icon}}
-                                                    <span class="mr-1">
+                                                    <div class="w-6">
                                                         <FaIcon class={{action.iconClass}} @icon={{action.icon}} @prefix={{action.iconPrefix}} />
-                                                    </span>
+                                                    </div>
                                                 {{/if}}
                                                 {{action.label}}
                                             </a>
diff --git a/addon/components/layout/sidebar/panel.hbs b/addon/components/layout/sidebar/panel.hbs
index 93e688d..8f4cc58 100644
--- a/addon/components/layout/sidebar/panel.hbs
+++ b/addon/components/layout/sidebar/panel.hbs
@@ -1,46 +1,57 @@
-<ContentPanel
-    @title={{@title}}
-    @titleIcon={{@titleIcon}}
-    @titleIconPrefix={{@titleIconPrefix}}
-    @titleIconClass={{@titleIconClass}}
-    @titleIconSize={{@titleIconSize}}
-    @open={{@open}}
-    @isLoading={{@isLoading}}
-    @hideCaret={{@hideCaret}}
-    @toggleOnCaretOnly={{@toggleOnCaretOnly}}
-    @wrapperClass="next-sidebar-panel-container {{@wrapperClass}}"
-    @containerClass="next-sidebar-panel {{@containerClass}}"
-    @panelHeaderClass="next-sidebar-panel-toggle {{@panelHeaderClass}}"
-    @prefixTitle={{@prefixTitle}}
-    @titleComponent={{@titleComponent}}
-    @titleComponentContext={{@titleComponentContext}}
-    @titleContainerClass={{@titleContainerClass}}
-    @panelTitleClass={{@panelTitleClass}}
-    @titleStatusRight={{@titleStatusRight}}
-    @titleStatusRightText={{@titleStatusRightText}}
-    @titleStatusRightContainerClass={{@titleStatusRightContainerClass}}
-    @hideRightTitleStatusDot={{@hideRightTitleStatusDot}}
-    @titleStatusRightClass={{concat "next-content-panel-status-badge" " " @titleStatusRightClass}}
-    @disableTitleStatusRightHumanize={{@disableTitleStatusRightHumanize}}
-    @prefixTitleRight={{@prefixTitleRight}}
-    @prefixTitleRightContainerClass={{@prefixTitleRightContainerClass}}
-    @prefixTitleRightClass={{@prefixTitleRightClass}}
-    @titleRightSideComponent={{@titleRightSideComponent}}
-    @titleRightSideComponentContext={{@titleRightSideComponentContext}}
-    @actionButtons={{@actionButtons}}
-    @dropdownButton={{@dropdownButton}}
-    @dropdownButtonActions={{@dropdownButtonActions}}
-    @dropdownButtonIcon={{@dropdownButtonIcon}}
-    @dropdownButtonIconPrefix={{@dropdownButtonIconPrefix}}
-    @dropdownButtonText={{@dropdownButtonText}}
-    @dropdownButtonCalculatePosition={{@dropdownButtonCalculatePosition}}
-    @dropdownButtonRenderInPlace={{@dropdownButtonRenderInPlace}}
-    @dropdownButtonMenuLabel={{@dropdownButtonMenuLabel}}
-    @onClickPanelTitle={{@onClickPanelTitle}}
-    @onClickCaret={{@onClickCaret}}
-    @onClick={{@onClick}}
-    @onToggle={{@onToggle}}
-    ...attributes
->
-    {{yield}}
-</ContentPanel>
\ No newline at end of file
+{{#if this.visible}}
+    <ContentPanel
+        @title={{@title}}
+        @titleIcon={{@titleIcon}}
+        @titleIconPrefix={{@titleIconPrefix}}
+        @titleIconClass={{@titleIconClass}}
+        @titleIconSize={{@titleIconSize}}
+        @open={{@open}}
+        @disabled={{@disabled}}
+        @permission={{this.permission}}
+        @doesntHavePermissions={{this.doesntHavePermissions}}
+        @isLoading={{@isLoading}}
+        @hideCaret={{@hideCaret}}
+        @toggleOnCaretOnly={{@toggleOnCaretOnly}}
+        @wrapperClass="next-sidebar-panel-container {{@wrapperClass}}"
+        @containerClass="next-sidebar-panel {{@containerClass}}"
+        @panelHeaderClass="next-sidebar-panel-toggle {{@panelHeaderClass}}"
+        @prefixTitle={{@prefixTitle}}
+        @titleComponent={{@titleComponent}}
+        @titleComponentContext={{@titleComponentContext}}
+        @titleContainerClass={{@titleContainerClass}}
+        @panelTitleClass={{@panelTitleClass}}
+        @titleStatusRight={{@titleStatusRight}}
+        @titleStatusRightText={{@titleStatusRightText}}
+        @titleStatusRightContainerClass={{@titleStatusRightContainerClass}}
+        @hideRightTitleStatusDot={{@hideRightTitleStatusDot}}
+        @titleStatusRightClass={{concat "next-content-panel-status-badge" " " @titleStatusRightClass}}
+        @disableTitleStatusRightHumanize={{@disableTitleStatusRightHumanize}}
+        @prefixTitleRight={{@prefixTitleRight}}
+        @prefixTitleRightContainerClass={{@prefixTitleRightContainerClass}}
+        @prefixTitleRightClass={{@prefixTitleRightClass}}
+        @titleRightSideComponent={{@titleRightSideComponent}}
+        @titleRightSideComponentContext={{@titleRightSideComponentContext}}
+        @actionButtons={{@actionButtons}}
+        @dropdownButton={{@dropdownButton}}
+        @dropdownButtonDefaultClass={{@dropdownButtonDefaultClass}}
+        @dropdownButtonWrapperClass="next-content-panel-dd {{@dropdownButtonWrapperClass}}"
+        @dropdownButtonActions={{@dropdownButtonActions}}
+        @dropdownButtonIcon={{@dropdownButtonIcon}}
+        @dropdownButtonIconPrefix={{@dropdownButtonIconPrefix}}
+        @dropdownButtonText={{@dropdownButtonText}}
+        @dropdownButtonCalculatePosition={{@dropdownButtonCalculatePosition}}
+        @dropdownButtonRenderInPlace={{@dropdownButtonRenderInPlace}}
+        @dropdownMenuWrapperClass={{@dropdownMenuWrapperClass}}
+        @dropdownButtonMenuLabel={{@dropdownButtonMenuLabel}}
+        @dropdownButtonMenuLabelClass={{@dropdownButtonMenuLabelClass}}
+        @dropdownButtonHorizontalPosition={{@dropdownButtonHorizontalPosition}}
+        @dropdownButtonVerticalPosition={{@dropdownButtonVerticalPosition}}
+        @onClickPanelTitle={{@onClickPanelTitle}}
+        @onClickCaret={{@onClickCaret}}
+        @onClick={{@onClick}}
+        @onToggle={{@onToggle}}
+        ...attributes
+    >
+        {{yield}}
+    </ContentPanel>
+{{/if}}
\ No newline at end of file
diff --git a/addon/components/layout/sidebar/panel.js b/addon/components/layout/sidebar/panel.js
index 1ad5610..d75f7ff 100644
--- a/addon/components/layout/sidebar/panel.js
+++ b/addon/components/layout/sidebar/panel.js
@@ -1,11 +1,24 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 
 export default class LayoutSidebarPanelComponent extends Component {
+    @service abilities;
     @tracked dropdownButtonRenderInPlace = true;
+    @tracked permissionRequired = null;
+    @tracked disabled = false;
+    @tracked doesntHavePermissions = false;
+    @tracked visible = true;
 
-    constructor(owner, { dropdownButtonRenderInPlace = true }) {
+    constructor(owner, { dropdownButtonRenderInPlace = true, permission = null, disabled = false, visible = true }) {
         super(...arguments);
         this.dropdownButtonRenderInPlace = dropdownButtonRenderInPlace;
+        this.permissionRequired = permission;
+        this.disabled = disabled;
+        this.visible = visible;
+        // If no permissions disable
+        if (!disabled) {
+            this.disabled = this.doesntHavePermissions = permission && this.abilities.cannot(permission);
+        }
     }
 }
diff --git a/addon/components/model-select.hbs b/addon/components/model-select.hbs
index 63ea797..89642eb 100644
--- a/addon/components/model-select.hbs
+++ b/addon/components/model-select.hbs
@@ -13,7 +13,7 @@
         @closeOnSelect={{@closeOnSelect}}
         @defaultHighlighted={{@defaultHighlighted}}
         @destination={{@destination}}
-        @disabled={{@disabled}}
+        @disabled={{this.disabled}}
         @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}}
         @extra={{@extra}}
         @groupComponent={{@groupComponent}}
@@ -64,6 +64,16 @@
         {{/if}}
     </PowerSelect>
 
+    {{#if this.doesntHavePermissions}}
+        <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
+            <InputInfo @text={{t "common.unauthorized"}} />
+        </Attach::Tooltip>
+    {{else if @helpText}}
+        <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
+            <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
+        </Attach::Tooltip>
+    {{/if}}
+
     {{#if this.loadModels.isRunning}}
         <div class="ember-model-select__loading">
             <ModelSelect::Spinner />
diff --git a/addon/components/model-select.js b/addon/components/model-select.js
index 61d477f..48d063d 100644
--- a/addon/components/model-select.js
+++ b/addon/components/model-select.js
@@ -34,6 +34,7 @@ const getConfigOption = (key, defaultValue) => {
 export default class ModelSelectComponent extends Component {
     @service store;
     @service fetch;
+    @service abilities;
 
     /**
      * Source to query, either an ember data model or the store
@@ -130,9 +131,18 @@ export default class ModelSelectComponent extends Component {
     @tracked _options;
     @tracked model;
     @tracked selectedModel;
+    @tracked permissionRequired = null;
+    @tracked disabled = false;
+    @tracked doesntHavePermissions = false;
 
-    constructor() {
+    constructor(owner, { permission = null, disabled = false }) {
         super(...arguments);
+        this.permissionRequired = permission;
+        this.disabled = disabled;
+        if (!disabled) {
+            this.disabled = this.doesntHavePermissions = permission && this.abilities.cannot(permission);
+        }
+
         this.loadSelectedModel();
     }
 
@@ -163,6 +173,10 @@ export default class ModelSelectComponent extends Component {
     };
 
     @restartableTask({ withTestWaiter: true }) searchModels = function* (term, options, initialLoad = false) {
+        if (this.doesntHavePermissions || this.disabled) {
+            return;
+        }
+
         let createOption;
 
         if (this.args.withCreate && term) {
@@ -182,6 +196,10 @@ export default class ModelSelectComponent extends Component {
     };
 
     @restartableTask({ withTestWaiter: true }) loadModels = function* (term, createOption) {
+        if (this.doesntHavePermissions || this.disabled) {
+            return;
+        }
+
         // query might be an EmptyObject/{{hash}}, make it a normal Object
         const query = Object.assign({}, this.args.query);
 
diff --git a/addon/components/select.hbs b/addon/components/select.hbs
index 3a5e1ce..a275a02 100644
--- a/addon/components/select.hbs
+++ b/addon/components/select.hbs
@@ -1,4 +1,10 @@
-<select ...attributes class="form-select {{if this.value 'has--selection' 'has--placeholder'}}" {{on "change" this.select}} {{did-update this.changed @value @placeholder}}>
+<select
+    ...attributes
+    class="form-select {{if this.value 'has--selection' 'has--placeholder'}} {{if this.disabled 'disabled'}}"
+    disabled={{this.disabled}}
+    {{on "change" this.select}}
+    {{did-update this.changed @value @placeholder}}
+>
     {{#if this.placeholder}}
         <option selected disabled>
             {{this.placeholder}}
diff --git a/addon/components/select.js b/addon/components/select.js
index c7c4d47..2c3cbb1 100644
--- a/addon/components/select.js
+++ b/addon/components/select.js
@@ -5,11 +5,13 @@ import { action } from '@ember/object';
 export default class SelectComponent extends Component {
     @tracked value;
     @tracked placeholder;
+    @tracked disabled = false;
 
-    constructor(owner, { value, placeholder }) {
+    constructor(owner, { value, placeholder, disabled = false }) {
         super(...arguments);
         this.value = value;
         this.placeholder = placeholder;
+        this.disabled = disabled;
     }
 
     @action changed(el, [value, placeholder]) {
diff --git a/addon/components/table/cell/dropdown.hbs b/addon/components/table/cell/dropdown.hbs
index 4daf562..2e49da8 100644
--- a/addon/components/table/cell/dropdown.hbs
+++ b/addon/components/table/cell/dropdown.hbs
@@ -9,10 +9,10 @@
         @renderInPlace={{true}}
         as |dd|
     >
-        <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+        <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="px-1">
-                    <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
+                <div class="next-dd-menu-label-container px-1">
+                    <div class="next-dd-menu-label {{@column.ddMenuLabelClass}}">
                         {{@column.ddMenuLabel}}
                     </div>
                 </div>
diff --git a/addon/components/table/cell/dropdown/action-item.hbs b/addon/components/table/cell/dropdown/action-item.hbs
index cad7df8..50c5890 100644
--- a/addon/components/table/cell/dropdown/action-item.hbs
+++ b/addon/components/table/cell/dropdown/action-item.hbs
@@ -12,9 +12,9 @@
                     {{on "click" (fn this.onClick @columnAction @row @dd)}}
                 >
                     {{#if @columnAction.icon}}
-                        <span class="mr-1">
+                        <div class="w-6">
                             <FaIcon class={{@columnAction.iconClass}} @icon={{@columnAction.icon}} @prefix={{@columnAction.iconPrefix}} />
-                        </span>
+                        </div>
                     {{/if}}
                     {{@columnAction.label}}
                     {{#if this.doesntHavePermissions}}
diff --git a/addon/components/unit-input.hbs b/addon/components/unit-input.hbs
index 8091232..27ac926 100644
--- a/addon/components/unit-input.hbs
+++ b/addon/components/unit-input.hbs
@@ -1,6 +1,6 @@
-<div class="ui-unit-input {{@wrapperClass}}">
+<div class="ui-unit-input {{@wrapperClass}} {{if this.disabled 'unit-input-disabled opacity-50'}}">
     <div class="flex rounded-md shadow-sm">
-        <Input @type="tel" @value={{@value}} class="form-input rounded-r-none" placeholder={{this.placeholder}} ...attributes />
+        <Input @type="tel" @value={{@value}} class="form-input rounded-r-none" placeholder={{this.placeholder}} disabled={{this.disabled}} ...attributes />
         <span
             class="shadow-sm inline-flex items-center px-3 border rounded-r-lg border-gray-300 bg-gray-50 text-gray-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-200 sm:text-sm"
         >
@@ -12,6 +12,7 @@
                     @selected={{this.selectedUnitObject}}
                     @onChange={{this.setUnit}}
                     @triggerComponent={{component "unit-input/unit-handle" unit=this.selectedUnitObject}}
+                    @disabled={{this.disabled}}
                     as |unit|
                 >
                     <div class="truncate flex items-center space-x-1">
diff --git a/addon/components/unit-input.js b/addon/components/unit-input.js
index b976985..273ec87 100644
--- a/addon/components/unit-input.js
+++ b/addon/components/unit-input.js
@@ -204,6 +204,13 @@ export default class UnitInputComponent extends Component {
      */
     @tracked unit;
 
+    /**
+     * If the input is disabled.
+     *
+     * @memberof UnitInputComponent
+     */
+    @tracked disabled = false;
+
     /**
      * Name of unit selection
      *
@@ -238,10 +245,11 @@ export default class UnitInputComponent extends Component {
         return null;
     }
 
-    constructor() {
+    constructor(owner, { unit, disabled = false }) {
         super(...arguments);
 
-        this.unit = this.args.unit;
+        this.unit = unit;
+        this.disabled = disabled;
     }
 
     /**
diff --git a/addon/styles/components/full-calendar.css b/addon/styles/components/full-calendar.css
index db8c27e..8120dc1 100644
--- a/addon/styles/components/full-calendar.css
+++ b/addon/styles/components/full-calendar.css
@@ -97,3 +97,9 @@ body[data-theme='dark'] .fleetbase-full-calendar.fc .fc-button-primary:not(:disa
 body[data-theme='dark'] .fleetbase-full-calendar.fc .fc-button-primary:not(:disabled):active:focus {
     box-shadow: none;
 }
+
+.draggable-disabled {
+    opacity: 0.9;
+    pointer-events: none;
+    cursor: not-allowed;
+}
diff --git a/addon/styles/components/input.css b/addon/styles/components/input.css
index b4ba0d0..8925e5a 100644
--- a/addon/styles/components/input.css
+++ b/addon/styles/components/input.css
@@ -452,6 +452,21 @@ body[data-theme='dark'] .money-input-currency-selector .ember-basic-dropdown-con
     line-height: 1rem;
 }
 
+body[data-theme='dark'] .emberTagInput.form-input:disabled,
+body[data-theme='dark'] .emberTagInput.form-input.disabled,
+body[data-theme='dark'] .emberTagInput:disabled,
+body[data-theme='dark'] .emberTagInput.disabled,
+.emberTagInput.form-input:disabled,
+.emberTagInput.form-input.disabled,
+.emberTagInput:disabled,
+.emberTagInput.disabled,
+body[data-theme='dark'] .emberTagInput.emberTagInput--readOnly,
+.emberTagInput.emberTagInput--readOnly {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+}
+
 .emberTagInput li.emberTagInput-new {
     margin: 0;
     padding: 0;
@@ -650,7 +665,6 @@ body[data-theme='light'] .coordinates-input-zoom-controls > .coordinates-input-z
     @apply bg-gray-200;
 }
 
-body[data-theme='dark'] .iti__selected-country[aria-disabled="true"]
-.iti__selected-country[aria-disabled="true"] {
+body[data-theme='dark'] .iti__selected-country[aria-disabled='true'] .iti__selected-country[aria-disabled='true'] {
     @apply opacity-50 cursor-not-allowed;
-}
\ No newline at end of file
+}
diff --git a/addon/styles/components/tabs.css b/addon/styles/components/tabs.css
index 6a4d94c..417d1ab 100644
--- a/addon/styles/components/tabs.css
+++ b/addon/styles/components/tabs.css
@@ -143,6 +143,27 @@ body[data-theme='dark'] .ui-tabs > nav .ui-tab.active {
     @apply text-gray-300;
 }
 
+.ui-tabs > ul .nav-item.disabled,
+.ui-tabs > ul .nav-item:disabled,
+.ui-tabs > nav .nav-item.disabled,
+.ui-tabs > nav .nav-item:disabled,
+.ui-tabs > ul .ui-tab.disabled,
+.ui-tabs > ul .ui-tab:disabled,
+.ui-tabs > nav .ui-tab.disabled,
+.ui-tabs > nav .ui-tab:disabled,
+body[data-theme='dark'] .ui-tabs > ul .nav-item.disabled,
+body[data-theme='dark'] .ui-tabs > ul .nav-item:disabled,
+body[data-theme='dark'] .ui-tabs > nav .nav-item.disabled,
+body[data-theme='dark'] .ui-tabs > nav .nav-item:disabled,
+body[data-theme='dark'] .ui-tabs > ul .ui-tab.disabled,
+body[data-theme='dark'] .ui-tabs > ul .ui-tab:disabled,
+body[data-theme='dark'] .ui-tabs > nav .ui-tab.disabled,
+body[data-theme='dark'] .ui-tabs > nav .ui-tab:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+}
+
 @media (max-width: 767px) {
     .ui-tabs .ui-tab.active {
         min-width: 6rem;
diff --git a/addon/styles/layout/next.css b/addon/styles/layout/next.css
index 1d40dfc..f716b9b 100644
--- a/addon/styles/layout/next.css
+++ b/addon/styles/layout/next.css
@@ -1384,6 +1384,40 @@ body[data-theme='dark']
     padding: 0;
 }
 
+.next-dd-menu.next-dd-menu-table-dd .next-dd-menu-label,
+.next-dd-menu.next-sidebar-panel-menu-dropdown .next-dd-menu-label {
+    font-size: 0.85rem;
+    line-height: 1rem;
+    margin: 0;
+    padding: 0;
+    height: 2rem;
+    padding-left: 0.75rem;
+}
+
+.next-dd-menu.next-dd-menu-table-dd .next-dd-menu-label {
+    font-size: 0.9rem;
+}
+
+.next-dd-menu.next-dd-menu-table-dd .next-dd-menu-label-container + .next-dd-menu-seperator,
+.next-dd-menu.next-sidebar-panel-menu-dropdown .next-dd-menu-label-container + .next-dd-menu-seperator {
+    margin-top: 0;
+}
+
+.next-dd-menu.next-dd-menu-table-dd .next-dd-item,
+.next-dd-menu.next-sidebar-panel-menu-dropdown .next-dd-item {
+    font-size: 0.8rem;
+    line-height: 1rem;
+    margin-top: 0.35rem;
+    margin-bottom: 0.35rem;
+    padding-top: 0.2rem;
+    padding-bottom: 0.2rem;
+}
+
+.next-dd-menu.next-dd-menu-table-dd .next-dd-item {
+    margin-top: 0.4rem;
+    margin-bottom: 0.4rem;
+}
+
 .next-dd-menu.overflow-visible {
     overflow: visible !important;
 }
@@ -1404,10 +1438,6 @@ body[data-theme='dark'] .next-dd-menu .next-dd-title {
     @apply text-gray-300;
 }
 
-.cell-dropdown-button .next-dd-menu .next-dd-item {
-    @apply py-1;
-}
-
 .next-dd-menu .next-dd-item.active.ember-basic-dropdown-trigger,
 .next-dd-menu .next-dd-item.ember-basic-dropdown-trigger:hover,
 .next-dd-menu .next-dd-item.active,
@@ -1417,17 +1447,21 @@ body[data-theme='dark'] .next-dd-menu .next-dd-title {
 
 body[data-theme='dark'] .next-dd-menu .next-dd-item.disabled,
 .next-dd-menu .next-dd-item.disabled,
-body[data-theme='dark'] .next-dd-menu .next-dd-item:disabled,
-.next-dd-menu .next-dd-item:disabled {
+body[data-theme='dark'] .ember-basic-dropdown-content > .next-dd-menu .next-dd-item[disabled],
+.ember-basic-dropdown-content > .next-dd-menu .next-dd-item[disabled],
+body[data-theme='dark'] .next-dd-menu .next-dd-item[disabled],
+.next-dd-menu .next-dd-item[disabled] {
     opacity: 0.5;
     background-color: transparent;
     box-shadow: none;
+    pointer-events: none;
+    cursor: not-allowed;
 }
 
 body[data-theme='dark'] .next-dd-menu .next-header-dd-menu-item.next-dd-item.disabled,
 .next-dd-menu .next-header-dd-menu-item.next-dd-item.disabled,
-body[data-theme='dark'] .next-dd-menu .next-header-dd-menu-item.next-dd-item:disabled,
-.next-dd-menu .next-header-dd-menu-item.next-dd-item:disabled {
+body[data-theme='dark'] .next-dd-menu .next-header-dd-menu-item.next-dd-item[disabled],
+.next-dd-menu .next-header-dd-menu-item.next-dd-item[disabled] {
     opacity: 1;
 }
 
@@ -1435,6 +1469,26 @@ body[data-theme='dark'] .next-dd-menu .next-header-dd-menu-item.next-dd-item:dis
     @apply flex h-px my-2 bg-gray-700;
 }
 
+.next-dd-menu-label {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+    border-radius: 0.375rem;
+    color: #1f2937;
+}
+
+body[data-theme='dark'] .next-dd-menu-label {
+    color: #d1d5db;
+}
+
 section.next-view-section {
     width: 100%;
 }
diff --git a/addon/styles/layout/reset.css b/addon/styles/layout/reset.css
index 1275605..39e02d8 100644
--- a/addon/styles/layout/reset.css
+++ b/addon/styles/layout/reset.css
@@ -40,3 +40,9 @@ body[data-theme="dark"] {
         scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
     }
 }
+
+
+a[disabled] {
+    pointer-events: none;
+    cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 205d248..b8717b4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.2.23",
+    "version": "0.2.24",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",

From 4ab7f340c0e90cd505e27cf0bc3773e3343e8339 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Mon, 26 Aug 2024 14:12:34 +0800
Subject: [PATCH 2/4] implemented more permission controls on components

---
 addon/components/array-input.hbs              |  22 +-
 addon/components/array-input.js               |   6 +-
 addon/components/button.js                    |   7 +
 addon/components/checkbox.hbs                 |  70 +++---
 addon/components/checkbox.js                  |  41 ++++
 addon/components/layout/header.hbs            |  14 +-
 addon/components/layout/header.js             | 213 ++++++++++++------
 addon/components/modals/changelog.hbs         |   9 +-
 addon/components/toggle.hbs                   |  66 +++---
 addon/components/toggle.js                    |  44 +++-
 addon/helpers/component-resolvable.js         |  10 +
 addon/helpers/has-registration.js             |  21 ++
 app/helpers/component-resolvable.js           |   1 +
 app/helpers/has-registration.js               |   1 +
 .../helpers/component-resolvable-test.js      |  17 ++
 .../helpers/has-registration-test.js          |  17 ++
 16 files changed, 407 insertions(+), 152 deletions(-)
 create mode 100644 addon/helpers/component-resolvable.js
 create mode 100644 addon/helpers/has-registration.js
 create mode 100644 app/helpers/component-resolvable.js
 create mode 100644 app/helpers/has-registration.js
 create mode 100644 tests/integration/helpers/component-resolvable-test.js
 create mode 100644 tests/integration/helpers/has-registration-test.js

diff --git a/addon/components/array-input.hbs b/addon/components/array-input.hbs
index ff9b0eb..de919ff 100644
--- a/addon/components/array-input.hbs
+++ b/addon/components/array-input.hbs
@@ -1,8 +1,16 @@
-<div class="array-input" ...attributes>
+<div class="array-input {{if this.disabled 'disabled'}}" ...attributes>
     <div class="flex items-center justify-between {{@headerClass}}">
         <div class={{@yieldWrapperClass}}>{{yield this.data}}</div>
         <div class="flex justify-end items-center mb-4">
-            <Button @type={{@addButtonType}} @text={{or @addButtonText "Add"}} @icon={{or @addIcon "plus"}} @iconPrefix={{or @addIconPrefix "fas"}} @onClick={{this.addData}} />
+            <Button
+                @type={{@addButtonType}}
+                @text={{or @addButtonText "Add"}}
+                @icon={{or @addIcon "plus"}}
+                @iconPrefix={{or @addIconPrefix "fas"}}
+                @onClick={{this.addData}}
+                @disabled={{this.disabled}}
+                @permission={{@permission}}
+            />
         </div>
     </div>
     <div class="bg-white border border-gray-200 rounded shadow-sm dark:bg-gray-800 dark:border-gray-900 text-xs">
@@ -14,13 +22,19 @@
                         @value={{datum}}
                         aria-label="Data Input"
                         placeholder={{@placeholder}}
+                        disabled={{this.disabled}}
+                        class="form-input w-full flex-1 border-none shadow-none rounded-none pr-24"
                         {{on "change" (fn this.onChange index)}}
                         {{on "paste" (fn this.onPaste index)}}
-                        class="form-input w-full flex-1 border-none shadow-none rounded-none pr-24"
                         {{on "keyup" (fn this.inputDatum index)}}
                     />
                     <div class="absolute right-0 py-2.5 px-4">
-                        <button type="button" class="rounded-none border-none bg-transparent shadow-none outline-none text-red-500" {{on "click" (fn this.removeData index)}}>Remove</button>
+                        <button
+                            type="button"
+                            class="rounded-none border-none bg-transparent shadow-none outline-none text-red-500"
+                            disabled={{this.disabled}}
+                            {{on "click" (fn this.removeData index)}}
+                        >Remove</button>
                     </div>
                 </div>
             {{/each}}
diff --git a/addon/components/array-input.js b/addon/components/array-input.js
index 78bf092..cc6ec8e 100644
--- a/addon/components/array-input.js
+++ b/addon/components/array-input.js
@@ -4,11 +4,13 @@ import { action } from '@ember/object';
 
 export default class ArrayInputComponent extends Component {
     @tracked data = [];
+    @tracked disabled = false;
 
-    constructor() {
+    constructor(owner, { data = [], disabled = false }) {
         super(...arguments);
 
-        this.data = this.args.data ?? [];
+        this.data = data;
+        this.disabled = disabled;
     }
 
     @action onChange(index, event) {
diff --git a/addon/components/button.js b/addon/components/button.js
index 9e04667..d3f2abe 100644
--- a/addon/components/button.js
+++ b/addon/components/button.js
@@ -48,6 +48,13 @@ export default class ButtonComponent extends Component {
         return icon && !isLoading;
     }
 
+    /**
+     * The permission required.
+     *
+     * @memberof ButtonComponent
+     */
+    @tracked permissionRequired;
+
     /**
      * If the button is disabled by permissions.
      *
diff --git a/addon/components/checkbox.hbs b/addon/components/checkbox.hbs
index d885386..92b180d 100644
--- a/addon/components/checkbox.hbs
+++ b/addon/components/checkbox.hbs
@@ -1,32 +1,40 @@
-<div class="relative flex items-{{or @alignItems 'start'}} {{if @disabled 'disabled opacity-75'}}" ...attributes>
-    <div class="flex items-center h-4">
-        <Input
-            @type="checkbox"
-            id={{this.id}}
-            data-value={{@value}}
-            @checked={{@value}}
-            data-checked={{@value}}
-            disabled={{@disabled}}
-            class="fleetbase-checkbox form-checkbox {{this.colorClass}} {{@inputClass}}"
-            {{on "change" this.toggle}}
-        />
-        {{#if @helpText}}
-            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
-                <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
-            </Attach::Tooltip>
-        {{/if}}
-    </div>
-    {{#if (has-block)}}
-        <div class="ml-2 text-sm leading-5">
-            <label for={{this.id}} aria-disabled={{@disabled}} class="font-medium text-gray-700 dark:text-gray-100 {{@labelClass}}">
-                {{yield}}
-            </label>
-        </div>
-    {{else if @label}}
-        <div class="ml-2 text-sm leading-5">
-            <label for={{this.id}} aria-disabled={{@disabled}} class="font-medium text-gray-700 dark:text-gray-100 {{@labelClass}}">
-                {{@label}}
-            </label>
+{{#if this.visible}}
+    <div class="relative flex items-{{or @alignItems 'start'}} {{if @disabled 'disabled opacity-75'}} {{@wrapperClass}}">
+        <div class="flex items-center h-4">
+            <Input
+                @type="checkbox"
+                @checked={{this.checked}}
+                id={{this.id}}
+                data-value={{this.checked}}
+                data-checked={{this.checked}}
+                disabled={{this.disabled}}
+                class="fleetbase-checkbox form-checkbox {{this.colorClass}} {{@inputClass}}"
+                {{on "change" this.toggle}}
+                ...attributes
+            />
+            {{#if (has-block)}}
+                <div class="ml-2 text-sm leading-5">
+                    <label for={{this.id}} aria-disabled={{@disabled}} class="mb-0i font-medium text-gray-700 dark:text-gray-100 {{@labelClass}}">
+                        {{yield}}
+                    </label>
+                </div>
+            {{else if @label}}
+                <div class="ml-2 text-sm leading-5">
+                    <label for={{this.id}} aria-disabled={{@disabled}} class="mb-0i font-medium text-gray-700 dark:text-gray-100 {{@labelClass}}">
+                        {{@label}}
+                    </label>
+                </div>
+            {{/if}}
+            {{#if this.disabledByPermission}}
+                <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
+                    <InputInfo @text={{t "common.unauthorized"}} />
+                </Attach::Tooltip>
+            {{else if @helpText}}
+                <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
+                    <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
+                </Attach::Tooltip>
+            {{/if}}
         </div>
-    {{/if}}
-</div>
\ No newline at end of file
+
+    </div>
+{{/if}}
\ No newline at end of file
diff --git a/addon/components/checkbox.js b/addon/components/checkbox.js
index a0f3b57..42de8b5 100644
--- a/addon/components/checkbox.js
+++ b/addon/components/checkbox.js
@@ -1,9 +1,12 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { computed, action } from '@ember/object';
+import { inject as service } from '@ember/service';
 import { guidFor } from '@ember/object/internals';
 
 export default class CheckboxComponent extends Component {
+    @service abilities;
+
     /**
      * Generates a unique ID for this checkbox instance
      *
@@ -33,6 +36,44 @@ export default class CheckboxComponent extends Component {
      */
     @tracked colorClass = 'text-sky-500';
 
+    /**
+     * The permission required.
+     *
+     * @memberof CheckboxComponent
+     */
+    @tracked permissionRequired;
+
+    /**
+     * If the button is disabled by permissions.
+     *
+     * @memberof CheckboxComponent
+     */
+    @tracked disabledByPermission = false;
+
+    /**
+     * Determines the visibility of the button
+     *
+     * @memberof CheckboxComponent
+     */
+    @tracked visible = true;
+
+    /**
+     * Creates an instance of ButtonComponent.
+     * @param {*} owner
+     * @param {*} { permission = null }
+     * @memberof ButtonComponent
+     */
+    constructor(owner, { value = false, permission = null, disabled = false, visible = true }) {
+        super(...arguments);
+        this.checked = value;
+        this.permissionRequired = permission;
+        this.visible = visible;
+        this.disabled = disabled;
+        if (!disabled) {
+            this.disabled = this.disabledByPermission = permission && this.abilities.cannot(permission);
+        }
+    }
+
     /**
      * Toggles the checkbox and sends up an action
      *
diff --git a/addon/components/layout/header.hbs b/addon/components/layout/header.hbs
index 214e8d0..7c41ba5 100644
--- a/addon/components/layout/header.hbs
+++ b/addon/components/layout/header.hbs
@@ -8,7 +8,7 @@
         {{/if}}
         {{#unless (media "isMobile")}}
             <div role="menu" class="next-catalog-menu-items flex mr-4">
-                {{#each @menuItems as |menuItem|}}
+                {{#each this.menuItems as |menuItem|}}
                     <LinkToExternal
                         @route={{menuItem.route}}
                         id={{concat (dasherize menuItem.route) "-header-button"}}
@@ -43,25 +43,25 @@
                 <ChatTray />
             </div>
             <div class="flex-1 flex items-center pr-1">
-                <Layout::Header::Dropdown @items={{this.organizationNavigationItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
+                <Layout::Header::Dropdown @items={{this.organizationMenuItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
                     <div class="next-org-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
                         <div class="org-badge">
-                            {{first-char @user.company_name}}
+                            {{first-char this.currentUser.companyName}}
                         </div>
-                        <div class="text-sm w-10 md:w-14 lg:w-10/12 truncate flex-shrink-0 text-gray-800 dark:text-white">{{@user.company_name}}</div>
+                        <div class="text-sm w-10 md:w-14 lg:w-10/12 truncate flex-shrink-0 text-gray-800 dark:text-white">{{this.currentUser.companyName}}</div>
                     </div>
                 </Layout::Header::Dropdown>
             </div>
             <div class="flex-1 flex items-center justify-end">
-                <Layout::Header::Dropdown @items={{this.userNavigationItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
+                <Layout::Header::Dropdown @items={{this.userMenuItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
                     <div class="next-user-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
                         <Image
                             class="rounded-full h-5 w-5 shadow-sm flex-shrink-0"
                             height="20"
                             width="20"
-                            src={{@user.avatar_url}}
+                            src={{this.currentUser.avatarUrl}}
                             @fallbackSrc="https://s3.ap-southeast-1.amazonaws.com/flb-assets/static/no-avatar.png"
-                            alt={{@user.name}}
+                            alt={{this.currentUser.name}}
                         />
                     </div>
                 </Layout::Header::Dropdown>
diff --git a/addon/components/layout/header.js b/addon/components/layout/header.js
index 852c14a..4e0dbaf 100644
--- a/addon/components/layout/header.js
+++ b/addon/components/layout/header.js
@@ -1,8 +1,9 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { computed, action } from '@ember/object';
-import { alias } from '@ember/object/computed';
-import { isArray } from '@ember/array';
+import { action } from '@ember/object';
+import { getOwner } from '@ember/application';
+import config from 'ember-get-config';
 
 /**
  * Layout header component.
@@ -16,78 +17,136 @@ export default class LayoutHeaderComponent extends Component {
     @service router;
     @service hostRouter;
     @service universe;
+    @service currentUser;
+    @service abilities;
+    @service fetch;
+    @tracked company;
+    @tracked menuItems = [];
+    @tracked organizationMenuItems = [];
+    @tracked userMenuItems = [];
+    @tracked extensions = [];
 
-    @alias('args.user') user;
-
-    @computed('store', 'user.company_uuid') get company() {
-        return this.store.peekRecord('company', this.user.company_uuid);
+    constructor(owner, { menuItems = [], organizationMenuItems = [], userMenuItems = [] }) {
+        super(...arguments);
+        this.extensions = getOwner(this).application.extensions ?? [];
+        this.company = this.currentUser.getCompany();
+        this.menuItems = this.mergeMenuItems(menuItems);
+        this.organizationMenuItems = this.mergeOrganizationMenuItems(organizationMenuItems);
+        this.userMenuItems = this.mergeUserMenuItems(userMenuItems);
     }
 
-    @computed('args.{organizationNavigationItems,organizations.length}', 'organizations.@each.id', 'universe.organizationMenuItems', 'user.{company_name,email}')
-    get organizationNavigationItems() {
-        const universeOrganizationItems = this.universe.organizationMenuItems;
+    mergeMenuItems(menuItems = []) {
+        const headerMenuItems = this.universe.headerMenuItems;
+        const visibleMenuItems = [];
+        for (let i = 0; i < headerMenuItems.length; i++) {
+            const menuItem = headerMenuItems[i];
+            if (this.abilities.can(`${menuItem.slug} see extension`)) {
+                visibleMenuItems.pushObject(menuItem);
+            }
+        }
 
-        if (isArray(this.args.organizationNavigationItems)) {
-            const items = this.args.organizationNavigationItems;
+        // Merge additionals
+        visibleMenuItems.pushObjects(menuItems);
 
-            if (universeOrganizationItems) {
-                for (let i = 0; i < universeOrganizationItems.length; i++) {
-                    const menuItem = universeOrganizationItems[i];
-                    menuItem.text = menuItem.title;
-                    items.insertAt(menuItem.index, menuItem);
-                }
-            }
+        // Callback to allow mutation of menu items
+        if (typeof this.args.mutateMenuItems === 'function') {
+            this.args.mutateMenuItems(menuItems);
         }
 
-        const items = [
+        return visibleMenuItems;
+    }
+
+    mergeOrganizationMenuItems(organizationMenuItems = []) {
+        // Prepare menuItems
+        const menuItems = [
             {
-                text: [this.user.email, this.user.company_name],
+                text: [this.currentUser.email, this.currentUser.companyName],
                 class: 'flex flex-row items-center px-3 rounded-md text-gray-800 text-sm dark:text-gray-300 leading-1',
                 wrapperClass: 'next-dd-session-user-wrapper',
             },
-            {
-                seperator: true,
-            },
         ];
 
-        this.args.organizations?.forEach((organization) => {
-            items.pushObject({
+        // List available organizations for session switching
+        const organizations = this.currentUser.organizations;
+        if (organizations.length) {
+            menuItems.pushObject({ seperator: true });
+        }
+        for (let i = 0; i < organizations.length; i++) {
+            const organization = organizations.objectAt(i);
+            const organizationMenuItem = {
                 href: 'javascript:;',
                 text: organization.name,
                 action: 'switchOrganization',
                 params: [organization],
-            });
-        });
+            };
+
+            // If current organization
+            if (this.currentUser.companyId === organization.id) {
+                organizationMenuItem.icon = 'check';
+                organizationMenuItem.disabled = true;
+                organizationMenuItem.action = undefined;
+            }
+
+            menuItems.pushObject(organizationMenuItem);
+        }
 
-        items.pushObjects([
+        // Push static menu items
+        const staticMenuItems = [
             {
                 seperator: true,
             },
             {
+                id: 'console-home',
                 route: 'console.home',
                 text: 'Home',
                 icon: 'house',
             },
             {
+                id: 'organization-settings',
                 route: 'console.settings.index',
                 text: 'Organization settings',
                 icon: 'gear',
             },
             {
+                id: 'create-or-join-organizations',
                 href: 'javascript:;',
                 text: 'Create or join organizations',
                 action: 'createOrJoinOrg',
                 icon: 'building',
             },
-            {
+        ];
+
+        // If registry bridge is booted add to static items
+        if (this.hasExtension('@fleetbase/registry-bridge')) {
+            staticMenuItems.pushObject({
+                id: 'explore-extensions',
                 route: 'console.extensions',
                 text: 'Explore extensions',
                 icon: 'puzzle-piece',
-            },
-        ]);
+            });
+        }
+
+        // Push static items
+        menuItems.pushObjects(staticMenuItems);
+
+        // Merge provided menu items
+        menuItems.pushObjects(organizationMenuItems);
+
+        // Push the version
+        menuItems.pushObject({
+            id: 'app-version',
+            route: null,
+            text: `v${config.version}`,
+            icon: 'code-branch',
+            iconSize: 'xs',
+            iconClass: 'mr-1.5',
+            wrapperClass: 'app-version-in-nav',
+            overwriteWrapperClass: true,
+        });
 
-        if (this.user.get('is_admin')) {
-            items.pushObjects([
+        // Merge admin link
+        if (this.currentUser.isAdmin) {
+            menuItems.pushObjects([
                 {
                     seperator: true,
                 },
@@ -99,7 +158,8 @@ export default class LayoutHeaderComponent extends Component {
             ]);
         }
 
-        items.pushObjects([
+        // Merge logout link
+        menuItems.pushObjects([
             {
                 seperator: true,
             },
@@ -111,41 +171,37 @@ export default class LayoutHeaderComponent extends Component {
             },
         ]);
 
+        // Get organization menu items from registry
+        const universeOrganizationItems = this.universe.organizationMenuItems;
         if (universeOrganizationItems) {
-            const preIndex = (this.args.organizations?.length ?? 0) + 3;
+            const preIndex = (organizations.length ?? 0) + (staticMenuItems.length ?? 0);
             for (let i = 0; i < universeOrganizationItems.length; i++) {
                 const menuItem = universeOrganizationItems[i];
                 menuItem.text = menuItem.title;
-                items.insertAt(preIndex + menuItem.index, menuItem);
+                menuItems.insertAt(preIndex + menuItem.index, menuItem);
             }
         }
 
-        return items;
-    }
-
-    @computed('args.{userNavigationItems,extensions}', 'universe.userMenuItems') get userNavigationItems() {
-        const universeUserMenuItems = this.universe.userMenuItems;
-
-        if (isArray(this.args.userNavigationItems)) {
-            const items = this.args.userNavigationItems;
-
-            if (universeUserMenuItems) {
-                for (let i = 0; i < universeUserMenuItems.length; i++) {
-                    const menuItem = universeUserMenuItems[i];
-                    menuItem.text = menuItem.title;
-                    items.insertAt(menuItem.index, menuItem);
-                }
-            }
-
-            return items;
+        // Callback to allow mutation of menu items
+        if (typeof this.args.mutateOrganizationMenuItems === 'function') {
+            this.args.mutateOrganizationMenuItems(menuItems);
         }
 
-        const items = [
+        return menuItems;
+    }
+
+    mergeUserMenuItems(userMenuItems = []) {
+        // Prepare menu items
+        const menuItems = [
             {
+                id: 'view-profile-user-nav-item',
+                wrapperClass: 'view-profile-user-nav-item',
                 route: 'console.account.index',
                 text: 'View Profile',
             },
             {
+                id: 'show-keyboard-shortcuts-user-nav-item',
+                wrapperClass: 'show-keyboard-shortcuts-user-nav-item',
                 href: 'javascript:;',
                 text: 'Show keyboard shortcuts',
                 disabled: true,
@@ -155,38 +211,59 @@ export default class LayoutHeaderComponent extends Component {
                 seperator: true,
             },
             {
+                id: 'changelog-user-nav-item',
+                wrapperClass: 'changelog-user-nav-item',
                 href: 'javascript:;',
                 text: 'Changelog',
                 action: 'viewChangelog',
             },
         ];
 
+        // Add developer menu item if booted
         if (this.hasExtension('@fleetbase/dev-engine')) {
-            items.pushObject({
+            menuItems.pushObject({
+                id: 'developers-user-nav-item',
+                wrapperClass: 'developers-user-nav-item',
                 route: 'console.developers',
                 text: 'Developers',
             });
         }
 
-        items.pushObjects([
+        // Add more static menu items
+        const supportMenuItems = [
             {
+                id: 'discord',
                 href: 'https://discord.gg/MJQgxHwN',
                 target: '_discord',
                 text: 'Join Discord Community',
                 icon: 'arrow-up-right-from-square',
             },
             {
+                id: 'support-user-nav-item',
+                wrapperClass: 'support-user-nav-item',
                 href: 'https://github.com/fleetbase/fleetbase/issues',
                 target: '_support',
                 text: 'Help & Support',
                 icon: 'arrow-up-right-from-square',
             },
             {
-                href: 'https://fleetbase.github.io/api-reference/',
-                target: '_api',
-                text: 'API Reference',
+                id: 'docs-user-nav-item',
+                wrapperClass: 'docs-user-nav-item',
+                href: 'https://docs.fleetbase.io',
+                target: '_docs',
+                text: 'Documentation',
                 icon: 'arrow-up-right-from-square',
             },
+        ];
+
+        // Push support menu items
+        menuItems.pushObjects(supportMenuItems);
+
+        // Push provided menu items
+        menuItems.pushObjects(userMenuItems);
+
+        // Create immutable static menu items
+        menuItems.pushObjects([
             {
                 component: 'layout/header/dark-mode-toggle',
             },
@@ -200,15 +277,12 @@ export default class LayoutHeaderComponent extends Component {
             },
         ]);
 
-        if (universeUserMenuItems) {
-            for (let i = 0; i < universeUserMenuItems.length; i++) {
-                const menuItem = universeUserMenuItems[i];
-                menuItem.text = menuItem.title;
-                items.insertAt(menuItem.index, menuItem);
-            }
+        // Callback to allow mutation of menu items
+        if (typeof this.args.mutateUserMenuItems === 'function') {
+            this.args.mutateUserMenuItems(menuItems);
         }
 
-        return items;
+        return menuItems;
     }
 
     @action routeTo(route) {
@@ -218,7 +292,6 @@ export default class LayoutHeaderComponent extends Component {
     }
 
     hasExtension(extensionName) {
-        const { extensions } = this.args;
-        return extensions.find(({ name }) => name === extensionName);
+        return this.extensions.find(({ name }) => name === extensionName);
     }
 }
diff --git a/addon/components/modals/changelog.hbs b/addon/components/modals/changelog.hbs
index 7c59443..d7b23c8 100644
--- a/addon/components/modals/changelog.hbs
+++ b/addon/components/modals/changelog.hbs
@@ -7,14 +7,17 @@
         {{else}}
             {{#each this.releases as |release|}}
                 <div class="mb-4">
-                    <div class="flex flex-row">
-                        <h2 class="font-mono text-black dark:text-gray-100 font-bold text-base mb-1">{{release.name}}</h2>
+                    <div class="flex flex-row items-center leading-4 mb-2 space-x-2">
+                        <h2 class="font-mono text-black dark:text-gray-100 font-bold text-sm">{{release.name}}</h2>
+                        <span class="text-black dark:text-gray-100">•</span>
                         <span class="text-xs font-mono text-black dark:text-gray-100">{{release.created_at}}</span>
                     </div>
                     <div class="pl-6">
                         <ul class="list-disc">
                             {{#each release.changes as |change|}}
-                                <li class="text-sm font-mono text-gray-800 dark:text-gray-300">{{change}}</li>
+                                {{#if change}}
+                                    <li class="text-xs font-mono text-gray-800 dark:text-gray-300">{{change}}</li>
+                                {{/if}}
                             {{/each}}
                         </ul>
                     </div>
diff --git a/addon/components/toggle.hbs b/addon/components/toggle.hbs
index 0953374..40ec90d 100644
--- a/addon/components/toggle.hbs
+++ b/addon/components/toggle.hbs
@@ -1,31 +1,41 @@
-<div class="flex items-center {{@wrapperClass}}" {{did-update this.onChange @isToggled}}>
-    <span
-        role="checkbox"
-        tabindex="0"
-        aria-checked="false"
-        class="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 cursor-pointer group focus:outline-none {{if @disabled 'opacity-50'}}"
-        ...attributes
-        {{on "click" (fn this.toggle this.isToggled)}}
-    >
-        <span aria-hidden="true" class="{{if this.isToggled this.activeColorClass ' bg-gray-200'}} absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200"></span>
+{{#if this.visible}}
+    <div class="flex items-center {{@wrapperClass}}" {{did-update this.onChange @isToggled}}>
         <span
-            aria-hidden="true"
-            class="{{if @isToggled ' translate-x-5' 'translate-x-0'}}
-                absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:shadow-outline group-focus:border-blue-300 transition-transform ease-in-out duration-200"
-        ></span>
-    </span>
-    <div class="flex items-center">
-        {{yield}}
-        {{#if @label}}
-            <span class="ml-2 text-sm dark:text-gray-100 {{@labelClass}}">{{@label}}</span>
-        {{/if}}
-        {{#if @helpText}}
-            <div class={{if @label "ml-2"}}>
-                <FaIcon @icon={{or @icon "info-circle"}} @size="xs" class="text-gray-300 dark:text-gray-100 text-xs {{@iconClass}}" />
-                <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "right"}}>
-                    <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
+            role="checkbox"
+            tabindex="0"
+            aria-checked="false"
+            class="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 cursor-pointer group focus:outline-none {{if this.disabled 'opacity-50'}}"
+            data-disabled={{this.disabled}}
+            ...attributes
+            {{on "click" (fn this.toggle this.isToggled)}}
+        >
+            <span
+                aria-hidden="true"
+                class="{{if this.isToggled this.activeColorClass ' bg-gray-200'}} absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200"
+            ></span>
+            <span
+                aria-hidden="true"
+                class="{{if @isToggled ' translate-x-5' 'translate-x-0'}}
+                    absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:shadow-outline group-focus:border-blue-300 transition-transform ease-in-out duration-200"
+            ></span>
+        </span>
+        <div class="flex items-center">
+            {{yield}}
+            {{#if @label}}
+                <span class="ml-2 text-sm dark:text-gray-100 {{@labelClass}}">{{@label}}</span>
+            {{/if}}
+            {{#if this.disabledByPermission}}
+                <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
+                    <InputInfo @text={{t "common.unauthorized"}} />
                 </Attach::Tooltip>
-            </div>
-        {{/if}}
+            {{else if @helpText}}
+                <div class={{if @label "ml-2"}}>
+                    <FaIcon @icon={{or @icon "info-circle"}} @size="xs" class="text-gray-300 dark:text-gray-100 text-xs {{@iconClass}}" />
+                    <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "right"}}>
+                        <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
+                    </Attach::Tooltip>
+                </div>
+            {{/if}}
+        </div>
     </div>
-</div>
\ No newline at end of file
+{{/if}}
\ No newline at end of file
diff --git a/addon/components/toggle.js b/addon/components/toggle.js
index 536603c..6f3b164 100644
--- a/addon/components/toggle.js
+++ b/addon/components/toggle.js
@@ -1,8 +1,11 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 import { action, computed } from '@ember/object';
 
 export default class ToggleComponent extends Component {
+    @service abilities;
+
     /**
      * The active color of the toggle
      *
@@ -17,6 +20,27 @@ export default class ToggleComponent extends Component {
      */
     @tracked activeColor = 'green';
 
+    /**
+     * The permission required.
+     *
+     * @memberof ToggleComponent
+     */
+    @tracked permissionRequired;
+
+    /**
+     * If the button is disabled by permissions.
+     *
+     * @memberof ToggleComponent
+     */
+    @tracked disabledByPermission = false;
+
+    /**
+     * Determines the visibility of the button
+     *
+     * @memberof ToggleComponent
+     */
+    @tracked visible = true;
+
     /**
      * The active color class.
      * Defaults to `bg-green-400` but could also be:
@@ -33,11 +57,18 @@ export default class ToggleComponent extends Component {
      *
      * @memberof ToggleComponent
      */
-    constructor(owner, { isToggled, activeColor }) {
+    constructor(owner, { value = false, isToggled = false, activeColor = 'green', permission = null, disabled = false, visible = true }) {
         super(...arguments);
 
-        this.isToggled = isToggled === true;
-        this.activeColor = typeof activeColor === 'string' ? activeColor : 'green';
+        this.isToggled = isToggled;
+        this.activeColor = activeColor;
+        this.checked = value;
+        this.permissionRequired = permission;
+        this.visible = visible;
+        this.disabled = disabled;
+        if (!disabled) {
+            this.disabled = this.disabledByPermission = permission && this.abilities.cannot(permission);
+        }
     }
 
     /**
@@ -46,15 +77,14 @@ export default class ToggleComponent extends Component {
      * @void
      */
     @action toggle(isToggled) {
-        const { disabled, onToggle } = this.args;
-        if (disabled) {
+        if (this.disabled) {
             return;
         }
 
         this.isToggled = !isToggled;
 
-        if (typeof onToggle === 'function') {
-            onToggle(this.isToggled);
+        if (typeof this.args.onToggle === 'function') {
+            this.args.onToggle(this.isToggled);
         }
     }
 
diff --git a/addon/helpers/component-resolvable.js b/addon/helpers/component-resolvable.js
new file mode 100644
index 0000000..cc9bc73
--- /dev/null
+++ b/addon/helpers/component-resolvable.js
@@ -0,0 +1,10 @@
+import Helper from '@ember/component/helper';
+import { getOwner } from '@ember/application';
+
+export default class ComponentResolvableHelper extends Helper {
+    compute(params) {
+        const [componentName] = params;
+        const owner = getOwner(this);
+        return owner && owner.hasRegistration(`component:${componentName}`);
+    }
+}
diff --git a/addon/helpers/has-registration.js b/addon/helpers/has-registration.js
new file mode 100644
index 0000000..3fff3d3
--- /dev/null
+++ b/addon/helpers/has-registration.js
@@ -0,0 +1,21 @@
+import Helper from '@ember/component/helper';
+import { getOwner } from '@ember/application';
+
+/**
+ * Checks if a registration exists in the ApplicationInstance container registry.
+ * Usage: `(has-registration 'component:my-component')` or `(has-registration 'my-component' 'component')`
+ *
+ * @export
+ * @class HasRegistrationHelper
+ * @extends {Helper}
+ */
+export default class HasRegistrationHelper extends Helper {
+    compute(params) {
+        let [name, type] = params;
+        if (type) {
+            name = `${type}:${name}`;
+        }
+        const owner = getOwner(this);
+        return owner && owner.hasRegistration(name);
+    }
+}
diff --git a/app/helpers/component-resolvable.js b/app/helpers/component-resolvable.js
new file mode 100644
index 0000000..46bd5d7
--- /dev/null
+++ b/app/helpers/component-resolvable.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/helpers/component-resolvable';
diff --git a/app/helpers/has-registration.js b/app/helpers/has-registration.js
new file mode 100644
index 0000000..2283e59
--- /dev/null
+++ b/app/helpers/has-registration.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/helpers/has-registration';
diff --git a/tests/integration/helpers/component-resolvable-test.js b/tests/integration/helpers/component-resolvable-test.js
new file mode 100644
index 0000000..ba3d59a
--- /dev/null
+++ b/tests/integration/helpers/component-resolvable-test.js
@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | component-resolvable', function (hooks) {
+    setupRenderingTest(hooks);
+
+    // TODO: Replace this with your real tests.
+    test('it renders', async function (assert) {
+        this.set('inputValue', '1234');
+
+        await render(hbs`{{component-resolvable this.inputValue}}`);
+
+        assert.dom().hasText('1234');
+    });
+});
diff --git a/tests/integration/helpers/has-registration-test.js b/tests/integration/helpers/has-registration-test.js
new file mode 100644
index 0000000..bf6a888
--- /dev/null
+++ b/tests/integration/helpers/has-registration-test.js
@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | has-registration', function (hooks) {
+    setupRenderingTest(hooks);
+
+    // TODO: Replace this with your real tests.
+    test('it renders', async function (assert) {
+        this.set('inputValue', '1234');
+
+        await render(hbs`{{has-registration this.inputValue}}`);
+
+        assert.dom().hasText('1234');
+    });
+});

From 9bc4a9b28b36819c0c6771e3b76c55a5f3abc45f Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Mon, 26 Aug 2024 16:26:17 +0800
Subject: [PATCH 3/4] fix and improvements to layout components

---
 addon/components/layout/header.js       |  4 +--
 addon/components/layout/sidebar/item.js | 42 +++++++++++++++++--------
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/addon/components/layout/header.js b/addon/components/layout/header.js
index 4e0dbaf..6d0156e 100644
--- a/addon/components/layout/header.js
+++ b/addon/components/layout/header.js
@@ -117,7 +117,7 @@ export default class LayoutHeaderComponent extends Component {
         ];
 
         // If registry bridge is booted add to static items
-        if (this.hasExtension('@fleetbase/registry-bridge')) {
+        if (this.hasExtension('@fleetbase/registry-bridge-engine')) {
             staticMenuItems.pushObject({
                 id: 'explore-extensions',
                 route: 'console.extensions',
@@ -292,6 +292,6 @@ export default class LayoutHeaderComponent extends Component {
     }
 
     hasExtension(extensionName) {
-        return this.extensions.find(({ name }) => name === extensionName);
+        return this.extensions.find(({ name }) => name === extensionName) !== undefined;
     }
 }
diff --git a/addon/components/layout/sidebar/item.js b/addon/components/layout/sidebar/item.js
index b61d734..3de37c6 100644
--- a/addon/components/layout/sidebar/item.js
+++ b/addon/components/layout/sidebar/item.js
@@ -17,7 +17,7 @@ export default class LayoutSidebarItemComponent extends Component {
     @tracked doesntHavePermissions = false;
     @tracked visible = true;
 
-    constructor(owner, { dropdownButtonRenderInPlace = true, permission = null, disabled = false, visible = true }) {
+    constructor (owner, { dropdownButtonRenderInPlace = true, permission = null, disabled = false, visible = true }) {
         super(...arguments);
 
         this.active = this.checkIfActive();
@@ -34,30 +34,46 @@ export default class LayoutSidebarItemComponent extends Component {
         router.on('routeDidChange', this.trackActiveFlag);
     }
 
-    willDestroy() {
+    willDestroy () {
         super.willDestroy(...arguments);
         const router = this.getRouter();
         router.off('routeDidChange', this.trackActiveFlag);
     }
 
-    @action trackActiveFlag() {
+    @action trackActiveFlag () {
         this.active = this.checkIfActive();
     }
 
-    @action checkIfActive() {
-        const { route, onClick, item } = this.args;
+    @action checkIfActive () {
+        const { route, onClick, item, model } = this.args;
         const router = this.getRouter();
         const currentRoute = router.currentRouteName;
+        const currentURL = router.currentURL;
         const isInteractive = isBlank(route) && typeof onClick === 'function';
+        const isCurrentRoute = typeof route === 'string' && currentRoute.startsWith(route);
+        const isCurrentURL = currentURL === window.location.pathname;
 
         if (isInteractive && !isBlank(item)) {
             return isMenuItemActive(item.section, item.slug, item.view);
         }
 
-        return typeof route === 'string' && currentRoute.startsWith(route);
+        // If model provided use the pathname to determine in addition
+        if (model) {
+            const routeHasModelParam = router.currentRoute.paramNames.length > 0;
+            if (routeHasModelParam) {
+                const routeModelParam = router.currentRoute.paramNames[0];
+                const routeModelParamValue = model[routeModelParam] ?? '';
+
+                return isCurrentRoute && isCurrentURL && currentURL.includes(routeModelParamValue);
+            }
+
+            return isCurrentRoute && isCurrentURL;
+        }
+
+        return isCurrentRoute;
     }
 
-    @action onClick(event) {
+    @action onClick (event) {
         if (this.isPointerWithinDropdownButton(event)) {
             event.preventDefault();
             return;
@@ -106,7 +122,7 @@ export default class LayoutSidebarItemComponent extends Component {
         }
     }
 
-    @action onDropdownItemClick(action, dd) {
+    @action onDropdownItemClick (action, dd) {
         const context = this.getDropdownContext(action);
 
         if (typeof dd.actions === 'object' && typeof dd.actions.close === 'function') {
@@ -122,7 +138,7 @@ export default class LayoutSidebarItemComponent extends Component {
         }
     }
 
-    getDropdownContext(action) {
+    getDropdownContext (action) {
         let context = null;
 
         if (action && action.context) {
@@ -136,13 +152,13 @@ export default class LayoutSidebarItemComponent extends Component {
         return context;
     }
 
-    @action onRegisterAPI() {
+    @action onRegisterAPI () {
         if (typeof this.args.registerAPI === 'function') {
             this.args.registerAPI(...arguments);
         }
     }
 
-    @action onDropdownButtonInsert(dropdownButtonNode) {
+    @action onDropdownButtonInsert (dropdownButtonNode) {
         if (dropdownButtonNode) {
             this.dropdownButtonNode = dropdownButtonNode;
 
@@ -152,7 +168,7 @@ export default class LayoutSidebarItemComponent extends Component {
         }
     }
 
-    isPointerWithinDropdownButton({ target }) {
+    isPointerWithinDropdownButton ({ target }) {
         const isTargetDropdownItem = target.classList.contains('next-dd-item');
 
         if (this.dropdownButtonNode) {
@@ -167,7 +183,7 @@ export default class LayoutSidebarItemComponent extends Component {
         return false;
     }
 
-    getRouter() {
+    getRouter () {
         return this.router ?? this.hostRouter;
     }
 }

From 161703570017b2ae1b8a08f0ba2ec516a6679152 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Mon, 26 Aug 2024 16:32:23 +0800
Subject: [PATCH 4/4] fix linter

---
 addon/components/layout/sidebar/item.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/addon/components/layout/sidebar/item.js b/addon/components/layout/sidebar/item.js
index 3de37c6..40d4bbf 100644
--- a/addon/components/layout/sidebar/item.js
+++ b/addon/components/layout/sidebar/item.js
@@ -17,7 +17,7 @@ export default class LayoutSidebarItemComponent extends Component {
     @tracked doesntHavePermissions = false;
     @tracked visible = true;
 
-    constructor (owner, { dropdownButtonRenderInPlace = true, permission = null, disabled = false, visible = true }) {
+    constructor(owner, { dropdownButtonRenderInPlace = true, permission = null, disabled = false, visible = true }) {
         super(...arguments);
 
         this.active = this.checkIfActive();
@@ -34,17 +34,17 @@ export default class LayoutSidebarItemComponent extends Component {
         router.on('routeDidChange', this.trackActiveFlag);
     }
 
-    willDestroy () {
+    willDestroy() {
         super.willDestroy(...arguments);
         const router = this.getRouter();
         router.off('routeDidChange', this.trackActiveFlag);
     }
 
-    @action trackActiveFlag () {
+    @action trackActiveFlag() {
         this.active = this.checkIfActive();
     }
 
-    @action checkIfActive () {
+    @action checkIfActive() {
         const { route, onClick, item, model } = this.args;
         const router = this.getRouter();
         const currentRoute = router.currentRouteName;
@@ -73,7 +73,7 @@ export default class LayoutSidebarItemComponent extends Component {
         return isCurrentRoute;
     }
 
-    @action onClick (event) {
+    @action onClick(event) {
         if (this.isPointerWithinDropdownButton(event)) {
             event.preventDefault();
             return;
@@ -122,7 +122,7 @@ export default class LayoutSidebarItemComponent extends Component {
         }
     }
 
-    @action onDropdownItemClick (action, dd) {
+    @action onDropdownItemClick(action, dd) {
         const context = this.getDropdownContext(action);
 
         if (typeof dd.actions === 'object' && typeof dd.actions.close === 'function') {
@@ -138,7 +138,7 @@ export default class LayoutSidebarItemComponent extends Component {
         }
     }
 
-    getDropdownContext (action) {
+    getDropdownContext(action) {
         let context = null;
 
         if (action && action.context) {
@@ -152,13 +152,13 @@ export default class LayoutSidebarItemComponent extends Component {
         return context;
     }
 
-    @action onRegisterAPI () {
+    @action onRegisterAPI() {
         if (typeof this.args.registerAPI === 'function') {
             this.args.registerAPI(...arguments);
         }
     }
 
-    @action onDropdownButtonInsert (dropdownButtonNode) {
+    @action onDropdownButtonInsert(dropdownButtonNode) {
         if (dropdownButtonNode) {
             this.dropdownButtonNode = dropdownButtonNode;
 
@@ -168,7 +168,7 @@ export default class LayoutSidebarItemComponent extends Component {
         }
     }
 
-    isPointerWithinDropdownButton ({ target }) {
+    isPointerWithinDropdownButton({ target }) {
         const isTargetDropdownItem = target.classList.contains('next-dd-item');
 
         if (this.dropdownButtonNode) {
@@ -183,7 +183,7 @@ export default class LayoutSidebarItemComponent extends Component {
         return false;
     }
 
-    getRouter () {
+    getRouter() {
         return this.router ?? this.hostRouter;
     }
 }