feat: resource view registries for storefront tables and panels

addon/components/customer-panel.hbs

@@ -1,4 +1,5 @@
 <Layout::Resource::Panel
+    @registry="storefront:details:customer"
     @resource={{this.customer}}
     @controller={{this}}
     @headerComponent={{component "customer-panel/panel-header" resource=this.customer actionButtons=this.actionButtons}}

addon/controllers/base-controller.js

@@ -1,11 +1,55 @@
 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 {
     @service hostRouter;
 
     @action transitionToRoute(route, ...args) {
         return this.hostRouter.transitionTo(`console.storefront.${route}`, ...args);
     }
+
+    /**
+     * The query params an index controller declares, plus the filter params of
+     * columns extensions registered under `storefront:table:<resource>`.
+     *
+     * @param {String} resource e.g. 'order'
+     * @param {Array} baseQueryParams
+     * @returns {Array}
+     */
+    registeredQueryParams(resource, baseQueryParams = []) {
+        return lookupResourceView(getOwner(this))?.queryParamsFor('storefront', resource, baseQueryParams) ?? baseQueryParams;
+    }
+
+    /**
+     * `columns` with the columns and row actions extensions registered under
+     * `storefront:table:<resource>` merged in, for views that render their own `<Table>`.
+     *
+     * @param {String} resource e.g. 'promotion'
+     * @param {Array} columns
+     * @returns {Array}
+     */
+    mergeRegisteredColumns(resource, columns = []) {
+        const resourceView = lookupResourceView(getOwner(this));
+        if (!resourceView) {
+            return columns;
+        }
+
+        const registry = `storefront:table:${resource}`;
+        const context = { controller: this };
+        return resourceView.mergeRowActions(registry, resourceView.mergeSlot(registry, 'columns', columns, context), context);
+    }
+
+    /**
+     * The toolbar buttons extensions registered under `storefront:table:<resource>:actions`,
+     * for views that lay out their own header.
+     *
+     * @param {String} resource
+     * @returns {Array}
+     */
+    registeredTableActions(resource) {
+        return mergeHeaderButtons(lookupResourceView(getOwner(this)), `storefront:table:${resource}`, [], { controller: this });
+    }
 }

addon/controllers/customers/index.js

@@ -53,7 +53,7 @@ export default class CustomersIndexController extends BaseController {
      *
      * @var {Array}
      */
-    queryParams = ['page', 'limit', 'sort', 'query', 'public_id', 'internal_id', 'phone', 'email', 'address', 'created_by', 'updated_by', 'status'];
+    queryParams = this.registeredQueryParams('customer', ['page', 'limit', 'sort', 'query', 'public_id', 'internal_id', 'phone', 'email', 'address', 'created_by', 'updated_by', 'status']);
 
     /**
      * The current page of data being viewed
@@ -118,6 +118,7 @@ export default class CustomersIndexController extends BaseController {
      */
     @tracked columns = [
         {
+            id: 'name',
             sticky: true,
             label: this.intl.t('storefront.common.name'),
             valuePath: 'name',
@@ -130,6 +131,7 @@ export default class CustomersIndexController extends BaseController {
             filterComponent: 'filter/string',
         },
         {
+            id: 'public-id',
             label: this.intl.t('storefront.common.id'),
             valuePath: 'public_id',
             cellComponent: 'click-to-copy',
@@ -140,6 +142,7 @@ export default class CustomersIndexController extends BaseController {
             filterComponent: 'filter/string',
         },
         {
+            id: 'internal-id',
             label: this.intl.t('storefront.customers.index.internal-id'),
             valuePath: 'internal_id',
             cellComponent: 'click-to-copy',
@@ -150,6 +153,7 @@ export default class CustomersIndexController extends BaseController {
             filterComponent: 'filter/string',
         },
         {
+            id: 'email',
             label: this.intl.t('storefront.common.email'),
             valuePath: 'email',
             cellComponent: 'table/cell/base',
@@ -160,6 +164,7 @@ export default class CustomersIndexController extends BaseController {
             filterComponent: 'filter/string',
         },
         {
+            id: 'phone',
             label: this.intl.t('storefront.common.phone'),
             valuePath: 'phone',
             cellComponent: 'table/cell/base',
@@ -170,6 +175,7 @@ export default class CustomersIndexController extends BaseController {
             filterComponent: 'filter/string',
         },
         {
+            id: 'address',
             label: this.intl.t('storefront.common.address'),
             valuePath: 'address',
             cellComponent: 'table/cell/anchor',
@@ -182,6 +188,7 @@ export default class CustomersIndexController extends BaseController {
             filterComponent: 'filter/string',
         },
         {
+            id: 'country',
             label: this.intl.t('storefront.common.country'),
             valuePath: 'country',
             cellComponent: 'table/cell/base',
@@ -194,6 +201,7 @@ export default class CustomersIndexController extends BaseController {
             filterComponent: 'filter/string',
         },
         {
+            id: 'created-at',
             label: this.intl.t('storefront.customers.index.create-at'),
             valuePath: 'createdAt',
             sortParam: 'created_at',
@@ -204,6 +212,7 @@ export default class CustomersIndexController extends BaseController {
             filterComponent: 'filter/date',
         },
         {
+            id: 'updated-at',
             label: this.intl.t('storefront.customers.index.update-at'),
             valuePath: 'updatedAt',
             sortParam: 'updated_at',
@@ -215,6 +224,7 @@ export default class CustomersIndexController extends BaseController {
             filterComponent: 'filter/date',
         },
         {
+            id: 'row-actions',
             label: '',
             cellComponent: 'table/cell/dropdown',
             ddButtonText: false,
@@ -227,6 +237,7 @@ export default class CustomersIndexController extends BaseController {
             width: 60,
             actions: [
                 {
+                    id: 'view-customer',
                     label: this.intl.t('storefront.customers.index.view-customer-details'),
                     fn: this.viewCustomer,
                 },

addon/controllers/networks/index/network/customers.js

@@ -1,6 +1,6 @@
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
+import { tracked, cached } from '@glimmer/tracking';
 import CustomersIndexController from '../../../customers';
 
 /**
@@ -11,6 +11,7 @@ export default class NetworksIndexNetworkCustomersController extends CustomersIn
 
     @tracked columns = [
         {
+            id: 'name',
             label: this.intl.t('storefront.common.name'),
             valuePath: 'name',
             width: '25%',
@@ -22,6 +23,7 @@ export default class NetworksIndexNetworkCustomersController extends CustomersIn
             filterComponent: 'filter/string',
         },
         {
+            id: 'public-id',
             label: this.intl.t('storefront.common.id'),
             valuePath: 'public_id',
             cellComponent: 'click-to-copy',
@@ -32,6 +34,7 @@ export default class NetworksIndexNetworkCustomersController extends CustomersIn
             filterComponent: 'filter/string',
         },
         {
+            id: 'email',
             label: this.intl.t('storefront.common.email'),
             valuePath: 'email',
             cellComponent: 'table/cell/base',
@@ -42,6 +45,7 @@ export default class NetworksIndexNetworkCustomersController extends CustomersIn
             filterComponent: 'filter/string',
         },
         {
+            id: 'phone',
             label: this.intl.t('storefront.common.phone'),
             valuePath: 'phone',
             cellComponent: 'table/cell/base',
@@ -52,6 +56,7 @@ export default class NetworksIndexNetworkCustomersController extends CustomersIn
             filterComponent: 'filter/string',
         },
         {
+            id: 'created-at',
             label: this.intl.t('storefront.customers.index.create-at'),
             valuePath: 'createdAt',
             sortParam: 'created_at',
@@ -66,4 +71,22 @@ export default class NetworksIndexNetworkCustomersController extends CustomersIn
     @action viewCustomer(customer) {
         this.contextPanel.focus(customer, 'viewing');
     }
+
+    /**
+     * The columns with what extensions registered under `storefront:table:network-customer` merged in.
+     *
+     * @var {Array}
+     */
+    @cached get registeredColumns() {
+        return this.mergeRegisteredColumns('network-customer', this.columns);
+    }
+
+    /**
+     * Toolbar buttons extensions registered under `storefront:table:network-customer:actions`.
+     *
+     * @var {Array}
+     */
+    get registeredActionButtons() {
+        return this.registeredTableActions('network-customer');
+    }
 }