Release v0.4.24

RELEASE.md

@@ -1,11 +1,19 @@
-> v0.4.23 ~ "A busy store can no longer rate-limit every other store"
+> v0.4.24 ~ "Extensions can add columns, actions and buttons to storefront tables and panels"
 
 ---
 ## Highlights
 
-The Storefront API rate limiter is isolated per store and per device. It ran before the storefront session was set up, so it keyed every bucket on the client IP. Behind a load balancer that is the balancer's address, so every store shared one bucket, and the key was identical to core-api's API limiter. One busy store, or one busy integration on the core API, could return `429 Too many requests` to every Storefront app on the platform. The limiter now keys on the store key plus the client IP, so each device of each store has its own limit. (#108)
+- **Resource view registries.** Extensions can add the following through `storefront:<resource>:table:<slot>` and `storefront:<resource>:details:<slot>`:
+  - columns, row actions, bulk actions and toolbar buttons on the orders, customers, promotions, campaigns, segments and network tables;
+  - buttons and menu items on the order and customer panels.
+- **Orders use the standard table layout.**
 
 ---
-## Upgrade Steps
+## Upgrading
+Needs fleetbase/ember-core v0.3.25 and fleetbase/ember-ui v0.4.5.
 
-No migrations. Deploy alongside Fleetbase `0.7.66` (Core API `1.6.66`), which also moves the core API limiter to per-consumer buckets and resolves the real client IP behind proxies (`TRUSTED_PROXIES`).
+---
+## Need help?
+- [GitHub Discussions](https://github.com/fleetbase/fleetbase/discussions)
+- [Discord](https://discord.gg/HnTqQ6zAVn)
+---

addon/components/customer-panel.hbs

@@ -1,4 +1,5 @@
 <Layout::Resource::Panel
+    @registry="storefront:customer:details"
     @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:<resource>:table`.
+     *
+     * @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:<resource>:table` 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:${resource}:table`;
+        const context = { controller: this };
+        return resourceView.mergeRowActions(registry, resourceView.mergeSlot(registry, 'columns', columns, context), context);
+    }
+
+    /**
+     * The toolbar buttons extensions registered under `storefront:<resource>:table:actions`,
+     * for views that lay out their own header.
+     *
+     * @param {String} resource
+     * @returns {Array}
+     */
+    registeredTableActions(resource) {
+        return mergeHeaderButtons(lookupResourceView(getOwner(this)), `storefront:${resource}:table`, [], { 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:network-customer:table` merged in.
+     *
+     * @var {Array}
+     */
+    @cached get registeredColumns() {
+        return this.mergeRegisteredColumns('network-customer', this.columns);
+    }
+
+    /**
+     * Toolbar buttons extensions registered under `storefront:network-customer:table:actions`.
+     *
+     * @var {Array}
+     */
+    get registeredActionButtons() {
+        return this.registeredTableActions('network-customer');
+    }
 }