@fleetbase/ember-core 0.3.12 → 0.3.14

package/addon/contracts/menu-item.js

@@ -1,6 +1,7 @@
 import BaseContract from './base-contract';
 import ExtensionComponent from './extension-component';
 import { dasherize } from '@ember/string';
+import { isArray } from '@ember/array';
 import isObject from '../utils/is-object';
 
 /**
@@ -35,6 +36,16 @@ import isObject from '../utils/is-object';
  *   .onClick((menuItem, router) => {
  *     router.transitionTo('virtual', menuItem.slug);
  *   })
+ *
+ * @example
+ * // Menu item with description and shortcuts (Phase 2)
+ * new MenuItem('Fleet-Ops', 'console.fleet-ops')
+ *   .withIcon('route')
+ *   .withDescription('Manage fleets, drivers, and live orders')
+ *   .withShortcuts([
+ *     { title: 'Scheduler', route: 'console.fleet-ops.scheduler', icon: 'calendar' },
+ *     { title: 'Order Config', route: 'console.fleet-ops.order-configs', icon: 'gear' },
+ *   ])
  */
 export default class MenuItem extends BaseContract {
     /**
@@ -102,6 +113,22 @@ export default class MenuItem extends BaseContract {
 
             // Nested items
             this.items = definition.items || null;
+
+            // ── Phase 2 additions ──────────────────────────────────────────
+            // A short human-readable description of the extension shown in the
+            // overflow dropdown.  Optional – defaults to null.
+            this.description = definition.description || null;
+
+            // An array of shortcut items (sub-menu links) displayed beneath the
+            // extension name in the multi-column dropdown.  Each shortcut is a
+            // plain object with at minimum { title, route } and optionally
+            // { icon, iconPrefix, id }.  Optional – defaults to null.
+            this.shortcuts = definition.shortcuts || null;
+
+            // An array of string tags used to improve search discoverability in
+            // the overflow dropdown.  e.g. ['logistics', 'tracking', 'fleet'].
+            // Optional – defaults to null.
+            this.tags = isArray(definition.tags) ? definition.tags : definition.tags ? [definition.tags] : null;
         } else {
             // Handle string title with optional route (chaining pattern)
             this.title = titleOrDefinition;
@@ -153,6 +180,11 @@ export default class MenuItem extends BaseContract {
 
             // Nested items
             this.items = null;
+
+            // ── Phase 2 additions ──────────────────────────────────────────
+            this.description = null;
+            this.shortcuts = null;
+            this.tags = null;
         }
 
         // Call setup() to trigger validation after properties are set
@@ -342,6 +374,132 @@ export default class MenuItem extends BaseContract {
         return this;
     }
 
+    // ── Phase 2 builder methods ────────────────────────────────────────────
+
+    /**
+     * Set a short human-readable description for the extension.
+     * Displayed beneath the extension title in the overflow dropdown.
+     *
+     * @method withDescription
+     * @param {String} description Short description text
+     * @returns {MenuItem} This instance for chaining
+     *
+     * @example
+     * new MenuItem('Fleet-Ops', 'console.fleet-ops')
+     *   .withDescription('Manage fleets, drivers, and live orders')
+     */
+    withDescription(description) {
+        this.description = description;
+        this._options.description = description;
+        return this;
+    }
+
+    /**
+     * Set an array of shortcut items displayed as independent sibling cards in
+     * the multi-column overflow dropdown (AWS Console style).  Each shortcut
+     * supports the full MenuItem property surface:
+     *
+     *   Required:
+     *     title    {String}   Display label
+     *
+     *   Routing:
+     *     route    {String}   Ember route name
+     *     queryParams {Object}
+     *     routeParams {Array}
+     *
+     *   Identity:
+     *     id       {String}   Explicit id (auto-dasherized from title if omitted)
+     *     slug     {String}   URL slug (falls back to id)
+     *
+     *   Icons:
+     *     icon            {String}   FontAwesome icon name
+     *     iconPrefix      {String}   FA prefix (e.g. 'far', 'fab')
+     *     iconSize        {String}   FA size string
+     *     iconClass       {String}   Extra CSS class on the icon element
+     *     iconComponent   {String}   Lazy-loaded engine component path
+     *     iconComponentOptions {Object}
+     *
+     *   Metadata:
+     *     description {String}   Short description shown in the card
+     *     tags        {String[]} Search tags
+     *
+     *   Behaviour:
+     *     onClick  {Function}  Click handler (receives the shortcut item)
+     *     disabled {Boolean}
+     *
+     * Shortcuts are registered as first-class header menu items at boot time
+     * and can be individually pinned to the navigation bar.
+     *
+     * @method withShortcuts
+     * @param {Array<Object>} shortcuts Array of shortcut definition objects
+     * @returns {MenuItem} This instance for chaining
+     *
+     * @example
+     * new MenuItem('Fleet-Ops', 'console.fleet-ops')
+     *   .withShortcuts([
+     *     {
+     *       title: 'Scheduler',
+     *       route: 'console.fleet-ops.scheduler',
+     *       icon: 'calendar',
+     *       description: 'Plan and visualise driver schedules',
+     *       tags: ['schedule', 'calendar'],
+     *     },
+     *     {
+     *       title: 'Live Map',
+     *       route: 'console.fleet-ops',
+     *       iconComponent: 'fleet-ops@components/live-map-icon',
+     *       description: 'Real-time vehicle tracking',
+     *     },
+     *   ])
+     */
+    withShortcuts(shortcuts) {
+        this.shortcuts = isArray(shortcuts) ? shortcuts : null;
+        this._options.shortcuts = this.shortcuts;
+        return this;
+    }
+
+    /**
+     * Set an array of string tags for this menu item.
+     * Tags are matched against the search query in the overflow dropdown,
+     * making items discoverable even when the query doesn't match the title
+     * or description.
+     *
+     * @method withTags
+     * @param {String|String[]} tags One tag string or an array of tag strings
+     * @returns {MenuItem} This instance for chaining
+     *
+     * @example
+     * new MenuItem('Fleet-Ops', 'console.fleet-ops')
+     *   .withTags(['logistics', 'tracking', 'fleet', 'drivers'])
+     */
+    withTags(tags) {
+        this.tags = isArray(tags) ? tags : tags ? [tags] : null;
+        this._options.tags = this.tags;
+        return this;
+    }
+
+    /**
+     * Add a single shortcut to the existing shortcuts array.
+     * Creates the array if it does not yet exist.
+     *
+     * @method addShortcut
+     * @param {Object} shortcut Shortcut definition object { title, route, icon?, iconPrefix?, id? }
+     * @returns {MenuItem} This instance for chaining
+     *
+     * @example
+     * new MenuItem('Fleet-Ops', 'console.fleet-ops')
+     *   .addShortcut({ title: 'Scheduler', route: 'console.fleet-ops.scheduler' })
+     *   .addShortcut({ title: 'Order Config', route: 'console.fleet-ops.order-configs' })
+     */
+    addShortcut(shortcut) {
+        if (!isArray(this.shortcuts)) {
+            this.shortcuts = [];
+        }
+        this.shortcuts = [...this.shortcuts, shortcut];
+        this._options.shortcuts = this.shortcuts;
+        return this;
+    }
+
     /**
      * Get the plain object representation
      *
@@ -401,6 +559,16 @@ export default class MenuItem extends BaseContract {
             // Nested items
             items: this.items,
 
+            // ── Phase 2 additions ──────────────────────────────────────────
+            // Optional short description shown in the overflow dropdown card
+            description: this.description,
+
+            // Optional array of shortcut sub-links shown inside the extension card
+            shortcuts: this.shortcuts,
+
+            // Optional array of string tags for search discoverability
+            tags: this.tags,
+
             // Indicator flag
             _isMenuItem: true,
 

package/addon/services/universe/menu-service.js

@@ -3,7 +3,7 @@ import Evented from '@ember/object/evented';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { dasherize } from '@ember/string';
-import { A } from '@ember/array';
+import { A, isArray } from '@ember/array';
 import MenuItem from '../../contracts/menu-item';
 import MenuPanel from '../../contracts/menu-panel';
 
@@ -153,6 +153,70 @@ export default class MenuService extends Service.extend(Evented) {
         const menuItem = this.#normalizeMenuItem(itemOrTitle, route, options);
         this.registry.register('header', 'menu-item', menuItem.slug, menuItem);
 
+        // Auto-register each shortcut as a first-class header menu item so that
+        // they appear in the customiser's "All Extensions" list and can be found
+        // by id in allItems when pinned to the bar.
+        if (isArray(menuItem.shortcuts)) {
+            for (const sc of menuItem.shortcuts) {
+                const scId = sc.id ?? dasherize(menuItem.id + '-sc-' + sc.title);
+                const scSlug = sc.slug ?? scId;
+
+                // Build a first-class item that supports the full MenuItem
+                // property surface.  Each property falls back to the parent's
+                // value so shortcuts inherit sensible defaults without the
+                // consumer having to repeat them.
+                const scItem = {
+                    // ── Identity ──────────────────────────────────────────────
+                    id: scId,
+                    slug: scSlug,
+                    title: sc.title,
+                    text: sc.text ?? sc.title,
+                    label: sc.label ?? sc.title,
+                    view: sc.view ?? scId,
+
+                    // ── Routing ───────────────────────────────────────────────
+                    route: sc.route ?? menuItem.route,
+                    section: sc.section ?? null,
+                    queryParams: sc.queryParams ?? {},
+                    routeParams: sc.routeParams ?? [],
+
+                    // ── Icons (full surface) ──────────────────────────────────
+                    icon: sc.icon ?? menuItem.icon,
+                    iconPrefix: sc.iconPrefix ?? menuItem.iconPrefix,
+                    iconSize: sc.iconSize ?? menuItem.iconSize ?? null,
+                    iconClass: sc.iconClass ?? menuItem.iconClass ?? null,
+                    iconComponent: sc.iconComponent ?? null,
+                    iconComponentOptions: sc.iconComponentOptions ?? {},
+
+                    // ── Metadata ──────────────────────────────────────────────
+                    description: sc.description ?? null,
+                    // Shortcuts inherit parent tags so they surface under the
+                    // same search terms; shortcut-specific tags take precedence.
+                    tags: isArray(sc.tags) ? sc.tags : isArray(menuItem.tags) ? menuItem.tags : null,
+
+                    // ── Behaviour ─────────────────────────────────────────────
+                    onClick: sc.onClick ?? null,
+                    disabled: sc.disabled ?? false,
+                    type: sc.type ?? 'default',
+                    buttonType: sc.buttonType ?? null,
+
+                    // ── Styling ───────────────────────────────────────────────
+                    class: sc.class ?? null,
+                    inlineClass: sc.inlineClass ?? null,
+                    wrapperClass: sc.wrapperClass ?? null,
+
+                    // ── Internal flags ────────────────────────────────────────
+                    _isShortcut: true,
+                    _parentTitle: menuItem.title,
+                    _parentId: menuItem.id,
+                    priority: (menuItem.priority ?? 0) + 1,
+                    _isMenuItem: true,
+                };
+                this.registry.register('header', 'menu-item', scSlug, scItem);
+                this.trigger('menuItem.registered', scItem, 'header');
+            }
+        }
+
         // Trigger event for backward compatibility
         this.trigger('menuItem.registered', menuItem, 'header');
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-core",
-    "version": "0.3.12",
+    "version": "0.3.14",
     "description": "Provides all the core services, decorators and utilities for building a Fleetbase extension for the Console.",
     "keywords": [
         "fleetbase-core",