feat: resource view registries for developer tables and pages

addon/controllers/api-keys/index.js

@@ -29,7 +29,7 @@ export default class ApiKeysIndexController extends Controller {
      *
      * @var {Array}
      */
-    queryParams = ['page', 'limit', 'sort', 'query', 'view_api_key'];
+    queryParams = this.apiKeyActions.queryParamsFor(['page', 'limit', 'sort', 'query', 'view_api_key']);
 
     /**
      * Expiration options for api keys
@@ -105,13 +105,58 @@ export default class ApiKeysIndexController extends Controller {
         return this.currentUser.getOption('testKey');
     }
 
+    /**
+     * Header buttons. Extensions add to them through `developers:table:api-key:actions`.
+     *
+     * @var {Array}
+     */
+    get actionButtons() {
+        return [
+            {
+                id: 'create',
+                type: 'primary',
+                icon: 'plus',
+                iconPrefix: 'fas',
+                text: this.intl.t('developers.common.new'),
+                onClick: this.createApiKey,
+                permission: 'developers create api-key',
+            },
+            {
+                id: 'export',
+                icon: 'long-arrow-up',
+                iconClass: 'rotate-icon-45',
+                text: this.intl.t('developers.common.export'),
+                onClick: this.exportApiKeys,
+                permission: 'developers export api-key',
+            },
+        ];
+    }
+
+    /**
+     * Bulk actions for the selected rows. Extensions add to them through `developers:table:api-key:bulk-actions`.
+     *
+     * @var {Array}
+     */
+    get bulkActions() {
+        return [
+            {
+                id: 'bulk-delete',
+                label: this.intl.t('developers.api-keys.index.delete-api'),
+                class: 'text-red-500',
+                fn: this.bulkDeleteApiCredentials,
+                permission: 'developers delete api-key',
+            },
+        ];
+    }
+
     /**
      * Columns for table component.
      *
      * @var {Array}
      */
     @tracked columns = [
         {
+            id: 'name',
             sticky: true,
             label: this.intl.t('developers.common.name'),
             valuePath: 'name',
@@ -122,13 +167,15 @@ export default class ApiKeysIndexController extends Controller {
             sortable: false,
         },
         {
+            id: 'key',
             label: this.intl.t('developers.api-keys.index.public-key'),
             valuePath: 'key',
             sortable: false,
             resizable: true,
             cellComponent: 'click-to-copy',
         },
         {
+            id: 'secret',
             label: this.intl.t('developers.api-keys.index.secret-key'),
             valuePath: 'secret',
             sortable: false,
@@ -141,13 +188,15 @@ export default class ApiKeysIndexController extends Controller {
             },
         },
         {
+            id: 'environment',
             label: this.intl.t('developers.api-keys.index.enviroment'),
             valuePath: 'environment',
             sortable: false,
             resizable: true,
             cellComponent: 'table/cell/status',
         },
         {
+            id: 'expires-at',
             label: this.intl.t('developers.api-keys.index.expiry'),
             valuePath: 'expiresAt',
             sortable: false,
@@ -156,6 +205,7 @@ export default class ApiKeysIndexController extends Controller {
             cellClassNames: 'overflow-visible',
         },
         {
+            id: 'last-used',
             label: this.intl.t('developers.api-keys.index.last-used'),
             valuePath: 'lastUsed',
             sortable: false,
@@ -164,6 +214,7 @@ export default class ApiKeysIndexController extends Controller {
             cellClassNames: 'overflow-visible',
         },
         {
+            id: 'created-at',
             label: this.intl.t('developers.common.created'),
             valuePath: 'createdAt',
             sortable: false,
@@ -172,6 +223,7 @@ export default class ApiKeysIndexController extends Controller {
             cellClassNames: 'overflow-visible',
         },
         {
+            id: 'row-actions',
             label: '',
             cellComponent: 'table/cell/dropdown',
             ddButtonText: false,
@@ -185,21 +237,25 @@ export default class ApiKeysIndexController extends Controller {
             width: 60,
             actions: [
                 {
+                    id: 'edit-api-key',
                     label: this.intl.t('developers.api-keys.index.edit-key'),
                     fn: this.editApiKey,
                     permission: 'developers view api-key',
                 },
                 {
+                    id: 'roll-api-key',
                     label: this.intl.t('developers.api-keys.index.roll-key'),
                     fn: this.rollApiKey,
                     permission: 'developers roll api-key',
                 },
                 {
+                    id: 'view-request-logs',
                     label: this.intl.t('developers.api-keys.index.view-logs'),
                     fn: this.viewRequestLogs,
                     permission: 'developers view log',
                 },
                 {
+                    id: 'delete-api-key',
                     label: this.intl.t('developers.api-keys.index.delete-key'),
                     fn: this.deleteApiKey,
                     className: 'text-red-700 hover:text-red-800',

addon/controllers/base-controller.js

@@ -1,6 +1,8 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { getOwner } from '@ember/application';
+import lookupResourceView, { mergeHeaderButtons } from '@fleetbase/ember-ui/utils/resource-view';
 
 export default class BaseController extends Controller {
     /**
@@ -28,4 +30,29 @@ export default class BaseController extends Controller {
     @action transitionToRoute(route, ...args) {
         return this.universe.transitionToEngineRoute('@fleetbase/dev-engine', route, ...args);
     }
+
+    /**
+     * The query params an index controller declares, plus the filter params of
+     * columns extensions registered under `developers:table:<resource>`.
+     *
+     * @param {String} resource e.g. 'event'
+     * @param {Array} baseQueryParams
+     * @returns {Array}
+     */
+    registeredQueryParams(resource, baseQueryParams = []) {
+        return lookupResourceView(getOwner(this))?.queryParamsFor('developers', resource, baseQueryParams) ?? baseQueryParams;
+    }
+
+    /**
+     * A details page's header buttons, with what extensions registered under
+     * `developers:details:<resource>` merged in.
+     *
+     * @param {String} resource e.g. 'webhook'
+     * @param {Object} record The record the page shows
+     * @param {Array} buttons The page's own buttons
+     * @returns {Array}
+     */
+    detailsActionButtons(resource, record, buttons = []) {
+        return mergeHeaderButtons(lookupResourceView(getOwner(this)), `developers:details:${resource}`, buttons, { resource: record, controller: this }, { withMenu: true });
+    }
 }

addon/controllers/events/index.js

@@ -26,7 +26,7 @@ export default class EventsIndexController extends BaseController {
      *
      * @var {Array}
      */
-    queryParams = ['query', 'page', 'limit', 'sort', 'event', 'created_at'];
+    queryParams = this.registeredQueryParams('event', ['query', 'page', 'limit', 'sort', 'event', 'created_at']);
 
     /**
      * The current page of data being viewed
@@ -77,12 +77,14 @@ export default class EventsIndexController extends BaseController {
      */
     @tracked columns = [
         {
+            id: 'description',
             sticky: true,
             label: this.intl.t('developers.common.event'),
             valuePath: 'description',
             sortable: false,
         },
         {
+            id: 'event',
             label: this.intl.t('developers.common.code'),
             valuePath: 'event',
             sortable: false,
@@ -91,13 +93,15 @@ export default class EventsIndexController extends BaseController {
             filterOptions: this.webhookEvents,
         },
         {
+            id: 'public-id',
             label: this.intl.t('developers.common.id'),
             valuePath: 'public_id',
             cellComponent: 'click-to-copy',
             align: 'right',
             sortable: false,
         },
         {
+            id: 'created-at',
             label: this.intl.t('developers.common.date'),
             valuePath: 'createdAt',
             filterParam: 'created_at',

addon/controllers/events/view.js

@@ -1,7 +1,21 @@
-import Controller from '@ember/controller';
+import BaseController from '../base-controller';
+import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 
-export default class EventsViewController extends Controller {
+export default class EventsViewController extends BaseController {
+    @service intl;
+
+    /**
+     * Header buttons. Extensions add to them through `developers:details:event`.
+     *
+     * @var {Array}
+     */
+    get actionButtons() {
+        return this.detailsActionButtons('event', this.model, [
+            { id: 'back', icon: 'long-arrow-left', iconPrefix: 'fas', text: this.intl.t('developers.common.back'), onClick: this.goBack },
+        ]);
+    }
+
     @action goBack() {
         return window.history.back();
     }

addon/controllers/logs/index.js

@@ -34,7 +34,7 @@ export default class LogsIndexController extends BaseController {
      *
      * @var {Array}
      */
-    queryParams = ['query', 'page', 'limit', 'sort', 'version', 'key', 'method', 'created_at'];
+    queryParams = this.registeredQueryParams('log', ['query', 'page', 'limit', 'sort', 'version', 'key', 'method', 'created_at']);
 
     /**
      * The current page of data being viewed
@@ -100,26 +100,30 @@ export default class LogsIndexController extends BaseController {
     @computed('apiCredentials.@each.id', 'apiVersions.[]') get columns() {
         return [
             {
+                id: 'description',
                 sticky: true,
                 label: this.intl.t('developers.common.description'),
                 valuePath: 'description',
                 sortable: false,
             },
             {
+                id: 'status',
                 label: this.intl.t('developers.common.status'),
                 valuePath: 'status',
                 sortable: false,
                 cellComponent: 'table/cell/status',
                 cellClassNames: 'uppercase',
             },
             {
+                id: 'public-id',
                 label: this.intl.t('developers.common.id'),
                 valuePath: 'public_id',
                 cellComponent: 'click-to-copy',
                 align: 'right',
                 sortable: false,
             },
             {
+                id: 'api-credential-name',
                 label: this.intl.t('developers.logs.index.api-credential'),
                 valuePath: 'api_credential_name',
                 cellComponent: 'click-to-copy',
@@ -132,20 +136,23 @@ export default class LogsIndexController extends BaseController {
                 filterOptions: this.apiCredentials,
             },
             {
+                id: 'method',
                 label: this.intl.t('developers.logs.index.http-method'),
                 valuePath: 'method',
                 filterable: true,
                 filterComponent: 'filter/multi-option',
                 filterOptions: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
             },
             {
+                id: 'version',
                 label: this.intl.t('developers.common.version'),
                 valuePath: 'version',
                 filterable: true,
                 filterComponent: 'filter/select',
                 filterOptions: this.apiVersions,
             },
             {
+                id: 'created-at',
                 label: this.intl.t('developers.common.date'),
                 valuePath: 'createdAt',
                 filterParam: 'created_at',

addon/controllers/logs/view.js

@@ -1,7 +1,19 @@
-import Controller from '@ember/controller';
+import BaseController from '../base-controller';
+import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 
-export default class LogsViewController extends Controller {
+export default class LogsViewController extends BaseController {
+    @service intl;
+
+    /**
+     * Header buttons. Extensions add to them through `developers:details:log`.
+     *
+     * @var {Array}
+     */
+    get actionButtons() {
+        return this.detailsActionButtons('log', this.model, [{ id: 'back', icon: 'long-arrow-left', iconPrefix: 'fas', text: this.intl.t('developers.common.back'), onClick: this.goBack }]);
+    }
+
     @action goBack() {
         return window.history.back();
     }

addon/controllers/sockets/index.js

@@ -13,6 +13,25 @@ export default class SocketsIndexController extends BaseController {
     @service hostRouter;
     @service abilities;
 
+    /**
+     * Header buttons. Extensions add to them through `developers:table:socket:actions`.
+     *
+     * @var {Array}
+     */
+    get actionButtons() {
+        return [
+            {
+                id: 'listen-on-custom-channel',
+                type: 'magic',
+                icon: 'headphones',
+                iconPrefix: 'fas',
+                text: this.intl.t('developers.sockets.index.button-text'),
+                onClick: this.listenOnCustomChannel,
+                permission: 'developers view socket',
+            },
+        ];
+    }
+
     /**
      * All columns applicable for orders
      *
@@ -32,6 +51,7 @@ export default class SocketsIndexController extends BaseController {
             cellClassNames: 'no-underline',
         },
         {
+            id: 'name',
             label: this.intl.t('developers.sockets.index.channel'),
             valuePath: 'name',
             width: '88%',