feat: Add analytics-agnostic events to UI components

[roncodes]

Overview

Adds analytics-agnostic event tracking to key ember-ui components through the universe service. Events follow dot notation naming convention (ui.{component}.{action}) and can be consumed by any analytics system.

Components Updated

1. Button Component

• Opt-in tracking via @eventName and @eventArgs arguments
• Event triggered before @onClick callback
• Not triggered if button is disabled

Usage:

<Button
  @text="Save Order"
  @eventName="ui.button.clicked"
  @eventArgs={{array "save_order" @order.id}}
  @onClick={{this.saveOrder}}
/>

2. Modal Manager Service

• Automatic tracking for all modals
• ui.modal.opened - When modal is shown
• ui.modal.closed - When modal is closed (with action: onConfirm/onDecline)

3. Dropdown Button Component

• Opt-in tracking via @eventName argument
• Event triggered when dropdown opens

4. Filters Picker Component

• Automatic tracking for filter interactions
• ui.filter.applied - When filters are applied (with activeFilters payload)
• ui.filter.cleared - When filters are cleared

Event Naming Convention

All events follow: ui.{component}.{action}

Examples:

• ui.button.clicked
• ui.modal.opened
• ui.modal.closed
• ui.filter.applied
• ui.filter.cleared

Architecture Benefits

✅ Analytics-Agnostic - Works with any analytics system (PostHog, GA, Mixpanel)
✅ OSS-Friendly - No proprietary code in ember-ui
✅ Extensible - Easy to add events to new components
✅ Flexible - Consumers choose which events to track
✅ Non-Breaking - All tracking is opt-in or automatic

Documentation

See ANALYTICS_EVENTS.md for:

• Complete event catalog
• Usage examples
• How to consume events in analytics systems
• Best practices
• Future component candidates

Consuming Events

Events are emitted through universe service and can be subscribed to using universe.on():

// In internals or other engines
this.universe.on('ui.button.clicked', (buttonName, ...args) => {
  this.posthog.trackEvent('button_clicked', {
    button_name: buttonName,
    additional_args: args
  });
});

this.universe.on('ui.modal.opened', (componentName, options) => {
  this.posthog.trackEvent('modal_opened', {
    modal_name: componentName,
    modal_title: options.title
  });
});

Testing

• All components check for universe service availability
• Events are non-blocking and don't break functionality if universe is unavailable
• Existing applications continue to work without changes

Related PRs

• fleetbase/ember-core: Universe events for data operations (CRUD, session)
• fleetbase/internals: PostHog analytics listener for cloud version