Replace the action helper and modifier with bound methods and on

.github/workflows/ci.yml

@@ -48,8 +48,6 @@ jobs:
         include:
           - name: current
             command: pnpm test:ember
-          - name: next
-            command: pnpm ember try:one ember-4.12
     steps:
       - uses: webfactory/ssh-agent@v0.5.0
         with:

addon/components/hyper-table-v2/manage-columns.ts

@@ -1,7 +1,6 @@
-import { A } from '@ember/array';
 import { set, action } from '@ember/object';
 import { later, next } from '@ember/runloop';
-import { isEmpty } from '@ember/utils';
+import { compare, isEmpty } from '@ember/utils';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
@@ -37,15 +36,15 @@ export default class HyperTableV2ManageColumns extends Component<HyperTableV2Man
   }
 
   get orderedFilteredClusters(): Map<string, ManagedColumn[]> {
-    const fields = A(
-      (this.args.handler.columnDefinitions || []).filter((columnDefinition) => {
+    const fields = (this.args.handler.columnDefinitions || [])
+      .filter((columnDefinition) => {
         const search = (this.searchColumnDefinitionKeyword || '').toLowerCase();
         const hasSearched =
           !this.searchColumnDefinitionKeyword || columnDefinition.name.toLowerCase().indexOf(search) >= 0;
         const hasActiveGroup = !this.activeColumnCategory || columnDefinition.category === this.activeColumnCategory;
         return hasActiveGroup && hasSearched;
       })
-    ).sortBy('name');
+      .sort((a, b) => compare(a.name, b.name));
 
     return this.groupByClusteringKey(fields);
   }

addon/components/hyper-table/cell-renderers/link.hbs

@@ -16,6 +16,6 @@
     @square={{true}}
     class={{if this.isCopied "success-tooltip"}}
     {{enable-tooltip title=(if this.isCopied "Copied" "Copy") placement="top"}}
-    {{action "copy" bubbles=false}}
+    {{on "click" this.copy}}
   />
 {{/if}}

addon/components/hyper-table/cell-renderers/link.js

@@ -1,4 +1,5 @@
 import Component from '@ember/component';
+import { action } from '@ember/object';
 import { debounce } from '@ember/runloop';
 
 import CellRendererMixin from '@upfluence/hypertable/mixins/cell-renderer';
@@ -10,13 +11,13 @@ export default Component.extend(CellRendererMixin, {
     this.set('isCopied', false);
   },
 
-  actions: {
-    copy() {
-      this.set('isCopied', true);
+  copy: action(function (event) {
+    event.stopPropagation();
 
-      navigator.clipboard.writeText(this.value);
+    this.set('isCopied', true);
 
-      debounce(this, this.endCopy, 2500);
-    }
-  }
+    navigator.clipboard.writeText(this.value);
+
+    debounce(this, this.endCopy, 2500);
+  })
 });

addon/components/hyper-table/cell-renderers/list.hbs

@@ -1,18 +1,18 @@
 {{#if this.emptyValue}}
   —
 {{else}}
-  <div class="list-container" {{action "toggleList" bubbles=false}}>
-    {{#if this.value.firstObject.name}}
+  <div class="list-container" {{on "click" this.toggleList}}>
+    {{#if this.firstItem.name}}
       <div>
-        {{this.value.firstObject.name}}
+        {{this.firstItem.name}}
       </div>
       {{#if (eq this.manager.tetherOn this.elementId)}}
         <div class="expandable-list">
           {{#each this.value as |item|}}
             <div
               class="expandable-list__item
                 {{if item.locked 'expandable-list__item-disabled '}}fx-row fx-xalign-center fx-gap-px-6"
-              {{on "click" (action "goToUrl" (concat this.url item.id) item.locked bubbles=false)}}
+              {{on "click" (fn this.goToUrl (concat this.url item.id) item.locked)}}
             >
               {{item.name}}
               {{#if item.locked}}

addon/components/hyper-table/cell-renderers/list.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
 
 import CellRendererMixin from '@upfluence/hypertable/mixins/cell-renderer';
 
@@ -10,46 +10,50 @@ export default Component.extend(CellRendererMixin, {
 
   isEditing: false,
 
-  formattedList: computed('value', 'value.firstObject.name', function () {
-    if (this.value.firstObject.name) {
-      return this.value.mapBy('name').join('<br>');
+  firstItem: computed('value.[]', function () {
+    return this.value.slice()[0];
+  }),
+
+  formattedList: computed('value.[]', 'firstItem.name', function () {
+    if (this.firstItem.name) {
+      return this.value.map((item) => item.name).join('<br>');
     }
     return this.value.slice().join('<br>');
   }),
 
-  actions: {
-    goToUrl(url, locked, event) {
-      if (!this.url || locked) {
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-
-      window.open(url, '_blank');
-    },
-
-    toggleList() {
-      if (this.manager.tetherOn !== this.elementId) {
-        this.manager.destroyTetherInstance();
-      }
-
-      this.manager.triggerTetherContainer(
-        this.elementId,
-        'expandable-list',
-        {
-          element: `#${this.elementId} .expandable-list`,
-          target: `#${this.elementId} .list-container`,
-          attachment: 'top center',
-          targetAttachment: 'bottom center',
-          constraints: [
-            {
-              to: 'scrollParent'
-            }
-          ]
-        },
-        false,
-        document.querySelector(`#${this.elementId} .list-container`).offsetWidth
-      );
+  goToUrl: action(function (url, locked, event) {
+    if (!this.url || locked) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    window.open(url, '_blank');
+  }),
+
+  toggleList: action(function (event) {
+    event.stopPropagation();
+
+    if (this.manager.tetherOn !== this.elementId) {
+      this.manager.destroyTetherInstance();
     }
-  }
+
+    this.manager.triggerTetherContainer(
+      this.elementId,
+      'expandable-list',
+      {
+        element: `#${this.elementId} .expandable-list`,
+        target: `#${this.elementId} .list-container`,
+        attachment: 'top center',
+        targetAttachment: 'bottom center',
+        constraints: [
+          {
+            to: 'scrollParent'
+          }
+        ]
+      },
+      false,
+      document.querySelector(`#${this.elementId} .list-container`).offsetWidth
+    );
+  })
 });

addon/components/hyper-table/cell-renderers/numeric.hbs

@@ -1,6 +1,6 @@
 {{#if (and this.emptyValue (or (not this.editStatus.status) this.isSuccess))}}
   {{#if this.isUpsertable}}
-    <span {{action "toggleEditing"}}>
+    <span {{on "click" this.startEditing}}>
       {{or this.column.field.emptyPlaceholder "Add value"}}
     </span>
   {{else}}
@@ -12,11 +12,11 @@
       <div class={{if this.isError "is-invalid"}}>
         <Input
           @type="number"
-          @insert-newline={{action "toggleEditing" this.editableValue}}
+          @insert-newline={{fn this.toggleEditing this.editableValue}}
           @value={{this.value}}
           aria-label={{or this.column.field.name "Value"}}
           class="editing-input__field form-control"
-          {{on "focusout" (action "toggleEditing" this.editableValue)}}
+          {{on "focusout" (fn this.toggleEditing this.editableValue)}}
         />
       </div>
     {{else}}
@@ -33,10 +33,10 @@
     {{#if this.isSaving}}
       <LoadingState />
     {{else if this.isSuccess}}
-      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{action "toggleEditing"}} />
+      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{on "click" this.startEditing}} />
       <OSS::Icon @icon="fa-check" class="font-size-lg font-color-success-500" />
     {{else if (not this.editStatus.status)}}
-      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{action "toggleEditing"}} />
+      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{on "click" this.startEditing}} />
     {{/if}}
   </div>
 {{/if}}

addon/components/hyper-table/cell-renderers/text.hbs

@@ -1,5 +1,5 @@
 {{#if this.isUpsertable}}
-  <span {{action "toggleEditing"}}>
+  <span {{on "click" this.startEditing}}>
     {{or this.column.field.emptyPlaceholder "Add value"}}
   </span>
 {{else}}
@@ -14,10 +14,10 @@
       <Input
         @type="text"
         @value={{this.editableValue}}
-        @insert-newline={{action "toggleEditing" this.editableValue}}
+        @insert-newline={{fn this.toggleEditing this.editableValue}}
         aria-label={{or this.column.field.name "Value"}}
         class="editing-input__field form-control upf-input"
-        {{on "focusout" (action "toggleEditing" this.editableValue)}}
+        {{on "focusout" (fn this.toggleEditing this.editableValue)}}
       />
     </div>
     <div class="text-value" {{enable-tooltip title=this.editableValue placement="bottom"}}>
@@ -31,10 +31,10 @@
     {{#if this.isSaving}}
       <LoadingState />
     {{else if this.isSuccess}}
-      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{action "toggleEditing"}} />
+      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{on "click" this.startEditing}} />
       <OSS::Icon @icon="fa-check" class="font-size-lg font-color-success-500" />
     {{else if (not this.editStatus.status)}}
-      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{action "toggleEditing"}} />
+      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{on "click" this.startEditing}} />
     {{/if}}
   </div>
 {{/if}}

addon/components/hyper-table/column.hbs

@@ -1,5 +1,5 @@
 <header {{sortable-handle}}>
-  <div class="cell-header" {{action "orderColumn" bubbles=false}}>
+  <div class="cell-header" {{on "click" this.orderColumn}}>
     <div class="header-title-container">
       <span class="field-title" {{enable-tooltip title=this.column.field.name}}>
         {{#if this.column.field.title}}
@@ -37,14 +37,14 @@
 
   <div class="icon-commands" data-control-name={{concat "table_column_filter_sort_toggle_" this.column.key}}>
     {{#if this._supportsOrderingOrFiltering}}
-      <OSS::Icon @icon="fa-filter" {{enable-tooltip title="Filters"}} {{action "toggleFiltersPanel" bubbles=false}} />
+      <OSS::Icon @icon="fa-filter" {{enable-tooltip title="Filters"}} {{on "click" this.openFiltersPanel}} />
     {{/if}}
 
     <OSS::Icon @icon="fa-bars fa-rotate-90" />
   </div>
 
   {{#if (and this._supportsOrderingOrFiltering (eq this.manager.tetherOn this.column.key))}}
-    <div class="available-filters" {{on-click-outside (action "toggleFiltersPanel" bubbles=false)}}>
+    <div class="available-filters" {{on-click-outside this.toggleFiltersPanel}}>
       {{component this._filtersRenderingComponent column=this.column manager=this.manager}}
     </div>
   {{/if}}

addon/components/hyper-table/column.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { computed, defineProperty } from '@ember/object';
+import { action, computed, defineProperty } from '@ember/object';
 import { and, notEmpty, or } from '@ember/object/computed';
 import { capitalize } from '@ember/string';
 
@@ -71,32 +71,38 @@ export default Component.extend({
     }
   },
 
-  actions: {
-    toggleFiltersPanel() {
-      if (this.manager.tetherOn !== this.column.key) {
-        this.manager.destroyTetherInstance();
-      }
-
-      this.manager.triggerTetherContainer(
-        this.column.key,
-        'available-filters',
-        {
-          element: `#${this.elementId} .available-filters`,
-          target: `#${this.elementId} header`,
-          attachment: 'top right',
-          targetAttachment: 'bottom right',
-          offset: '0 0'
-        },
-        true
-      );
-    },
-
-    orderColumn() {
-      if (this.manager.options.features.ordering && this.column.orderable) {
-        let nextDirection = this.column.orderDirection === 'desc' ? 'asc' : 'desc';
-
-        this.manager.updateOrdering(this.column, `${this.column.orderKey}:${nextDirection}`);
-      }
+  toggleFiltersPanel: action(function () {
+    if (this.manager.tetherOn !== this.column.key) {
+      this.manager.destroyTetherInstance();
+    }
+
+    this.manager.triggerTetherContainer(
+      this.column.key,
+      'available-filters',
+      {
+        element: `#${this.elementId} .available-filters`,
+        target: `#${this.elementId} header`,
+        attachment: 'top right',
+        targetAttachment: 'bottom right',
+        offset: '0 0'
+      },
+      true
+    );
+  }),
+
+  openFiltersPanel: action(function (event) {
+    event.stopPropagation();
+
+    this.toggleFiltersPanel();
+  }),
+
+  orderColumn: action(function (event) {
+    event.stopPropagation();
+
+    if (this.manager.options.features.ordering && this.column.orderable) {
+      let nextDirection = this.column.orderDirection === 'desc' ? 'asc' : 'desc';
+
+      this.manager.updateOrdering(this.column, `${this.column.orderKey}:${nextDirection}`);
     }
-  }
+  })
 });

addon/components/hyper-table/facetting.hbs

@@ -15,7 +15,7 @@
         <OSS::Checkbox
           @checked={{facet.applied}}
           @size="sm"
-          @onChange={{action "toggleAppliedFacet" facet}}
+          @onChange={{fn this.toggleAppliedFacet facet}}
           class="margin-right-px-12"
         />