v0.3.19

addon/components/button.js

@@ -12,6 +12,13 @@ export default class ButtonComponent extends Component {
      */
     @service abilities;
 
+    /**
+     * Inject events service for event tracking.
+     *
+     * @memberof ButtonComponent
+     */
+    @service events;
+
     /**
      * Determines if the button should be disabled
      *
@@ -111,12 +118,18 @@ export default class ButtonComponent extends Component {
      * @void
      */
     @action onClick() {
-        const { onClick } = this.args;
+        const { onClick, eventName, eventArgs } = this.args;
 
         if (this.isDisabled) {
             return;
         }
 
+        // Trigger analytics event if eventName is provided
+        if (eventName && this.events) {
+            const args = eventArgs || [];
+            this.events.trackEvent(eventName, ...args);
+        }
+
         if (typeof onClick === 'function') {
             onClick(...arguments);
         }

addon/components/dropdown-button.js

@@ -5,6 +5,7 @@ import { action } from '@ember/object';
 
 export default class DropdownButtonComponent extends Component {
     @service abilities;
+    @service events;
     @tracked type = 'default';
     @tracked buttonSize = 'md';
     @tracked buttonComponentArgs = {};
@@ -37,9 +38,21 @@ export default class DropdownButtonComponent extends Component {
         }
     }
 
-    @action onRegisterAPI() {
+    @action onRegisterAPI(dropdown) {
+        // Trigger dropdown opened event when dropdown is opened
+        if (dropdown && this.events) {
+            const originalOpen = dropdown.actions.open;
+            dropdown.actions.open = (...args) => {
+                const { eventName, eventArgs } = this.args;
+                if (eventName) {
+                    this.events.trackEvent(eventName, ...(eventArgs || []));
+                }
+                return originalOpen.call(dropdown.actions, ...args);
+            };
+        }
+
         if (typeof this.args.registerAPI === 'function') {
-            this.args.registerAPI(...arguments);
+            this.args.registerAPI(dropdown);
         }
     }
 

addon/components/filters-picker.js

@@ -7,6 +7,7 @@ import getUrlParam from '../utils/get-url-param';
 
 export default class FiltersPickerComponent extends Component {
     @service hostRouter;
+    @service events;
     @tracked filters = [];
 
     get activeFilters() {
@@ -69,6 +70,11 @@ export default class FiltersPickerComponent extends Component {
     }
 
     @action applyFilters() {
+        // Trigger filter applied event
+        if (this.events) {
+            this.events.trackEvent('ui.filter.applied', this.activeFilters);
+        }
+
         if (typeof this.args.onApply === 'function') {
             this.args.onApply();
         }
@@ -87,6 +93,11 @@ export default class FiltersPickerComponent extends Component {
     }
 
     @action async clearFilters(...args) {
+        // Trigger filter cleared event
+        if (this.events) {
+            this.events.trackEvent('ui.filter.cleared');
+        }
+
         if (typeof this.args.onClear === 'function') {
             this.args.onClear(...args);
         }

addon/components/input-group.hbs

@@ -1,6 +1,6 @@
 <div class="input-group {{@wrapperClass}}">
     {{#if (and @name (not @hideLabel))}}
-        <InputLabel for={{this.id}} @labelText={{@name}} @helpText={{@helpText}} @required={{@required}} @wrapperClass={{@labelWrapperClass}} />
+        <InputLabel for={{this.id}} @labelText={{@name}} @helpText={{@helpText}} @required={{@required}} @wrapperClass={{@labelWrapperClass}} class={{@labelClass}} />
     {{/if}}
     {{#if (has-block)}}
         {{yield this.id @name}}

addon/services/modals-manager.js

@@ -1,4 +1,4 @@
-import Service from '@ember/service';
+import Service, { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action, set, get, getProperties, setProperties } from '@ember/object';
 import { assert } from '@ember/debug';
@@ -9,6 +9,8 @@ import { guidFor } from '@ember/object/internals';
 const { assign } = Object;
 
 export default class ModalsManagerService extends Service {
+    @service events;
+
     @tracked modals = [];
     @tracked defaultOptions = {
         title: null,
@@ -115,6 +117,11 @@ export default class ModalsManagerService extends Service {
         // Add modal to the stack
         this.modals = [...this.modals, modal];
 
+        // Trigger modal opened event
+        if (this.events) {
+            this.events.trackEvent('ui.modal.opened', component, opts);
+        }
+
         return modalDefer.promise;
     }
 
@@ -352,6 +359,11 @@ export default class ModalsManagerService extends Service {
             // Remove modal from the stack
             this.modals = this.modals.filter((m) => m.id !== modal.id);
 
+            // Trigger modal closed event
+            if (this.events) {
+                this.events.trackEvent('ui.modal.closed', modal.componentToRender, action, modal.options);
+            }
+
             // Resolve the modal's promise
             modal.defer?.resolve(this);
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.3.18",
+    "version": "0.3.19",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",

tests/unit/services/modals-manager-test.js

@@ -1,10 +1,21 @@
 import { module, test } from 'qunit';
-import { setupTest } from 'dummy/tests/helpers';
+import { setupTest } from 'ember-qunit';
+import Service from '@ember/service';
 
 module('Unit | Service | modals-manager', function (hooks) {
     setupTest(hooks);
 
-    // TODO: Replace this with your real tests.
+    hooks.beforeEach(function () {
+        class EventsStub extends Service {
+            on() {}
+            off() {}
+            trigger() {}
+            emit() {}
+        }
+
+        this.owner.register('service:events', EventsStub);
+    });
+
     test('it exists', function (assert) {
         let service = this.owner.lookup('service:modals-manager');
         assert.ok(service);