Resolve the action helper/modifier deprecation

More info: https://deprecations.emberjs.com/v5.x#toc_template-action

addon/components/data-table-content-body.js

@@ -1,5 +1,5 @@
 import { set } from '@ember/object';
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
 import Component from '@ember/component';
 import layout from '../templates/components/data-table-content-body';
 
@@ -32,16 +32,14 @@ export default Component.extend({
       });
     }
   ),
-  actions: {
-    updateSelection(selectedWrapper, event) {
-      set(selectedWrapper, 'isSelected', event.target.checked);
-      this.wrappedItems.forEach((wrapper) => {
-        if (wrapper.isSelected) {
-          this.get('data-table').addItemToSelection(wrapper.item);
-        } else {
-          this.get('data-table').removeItemFromSelection(wrapper.item);
-        }
-      });
-    },
-  },
+  updateSelection: action(function (selectedWrapper, event) {
+    set(selectedWrapper, 'isSelected', event.target.checked);
+    this.wrappedItems.forEach((wrapper) => {
+      if (wrapper.isSelected) {
+        this.get('data-table').addItemToSelection(wrapper.item);
+      } else {
+        this.get('data-table').removeItemFromSelection(wrapper.item);
+      }
+    });
+  }),
 });

addon/components/data-table-menu-selected.js

@@ -1,3 +1,4 @@
+import { action } from '@ember/object';
 import { reads } from '@ember/object/computed';
 import Component from '@ember/component';
 import layout from '../templates/components/data-table-menu-selected';
@@ -9,9 +10,7 @@ export default Component.extend({
     this.set('data-table.enableSelection', true);
   },
   selectionCount: reads('data-table.selection.length'),
-  actions: {
-    clearSelection() {
-      this.get('data-table').clearSelection();
-    },
-  },
+  clearSelection: action(function () {
+    this.get('data-table').clearSelection();
+  }),
 });

addon/components/number-pagination.js

@@ -1,4 +1,4 @@
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
 import { gt } from '@ember/object/computed';
 import Component from '@ember/component';
 import layout from '../templates/components/number-pagination';
@@ -42,9 +42,13 @@ export default Component.extend({
       (val, index) => this.firstPage + index
     );
   }),
-  actions: {
-    changePage(link) {
-      this.set('page', link['number'] || 0);
-    },
-  },
+  changePage: action(function (link) {
+    this.set('page', link['number'] || 0);
+  }),
+  setCurrentPage: action(function (event) {
+    this.set('currentPage', event.target.value);
+  }),
+  setSize: action(function (event) {
+    this.set('size', event.target.value);
+  }),
 });

addon/components/text-search.js

@@ -1,6 +1,6 @@
 import { isEqual } from '@ember/utils';
 import { cancel, debounce } from '@ember/runloop';
-import { observer } from '@ember/object';
+import { action, observer } from '@ember/object';
 import { oneWay } from '@ember/object/computed';
 import Component from '@ember/component';
 import layout from '../templates/components/text-search';
@@ -38,4 +38,10 @@ export default Component.extend({
     this._super(...arguments);
     cancel(this._valuePid);
   },
+  handleValueChange: action(function (event) {
+    this.set('internalValue', event.target.value);
+  }),
+  handleManualFilterChange: action(function () {
+    this.set('filter', this.internalValue);
+  }),
 });

addon/components/th-sortable.js

@@ -1,4 +1,4 @@
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
 import Component from '@ember/component';
 import layout from '../templates/components/th-sortable';
 
@@ -38,23 +38,21 @@ export default Component.extend({
     }
   }),
 
-  actions: {
-    /**
-       Sets the current sorting parameter.
-       Note: the current sorting parameter may contain another field than the given field.
-       In case the given field is currently sorted ascending, change to descending.
-       In case the given field is currently sorted descending, clean the sorting.
-       Else, set the sorting to ascending on the given field.
-     */
-    inverseSorting() {
-      if (this.order === 'asc') {
-        this.set('currentSorting', this._inverseSorting(this.currentSorting));
-      } else if (this.order === 'desc') {
-        this.set('currentSorting', '');
-      } else {
-        // if currentSorting is not set to this field
-        this.set('currentSorting', this.dasherizedField);
-      }
-    },
-  },
+  /**
+     Sets the current sorting parameter.
+     Note: the current sorting parameter may contain another field than the given field.
+     In case the given field is currently sorted ascending, change to descending.
+     In case the given field is currently sorted descending, clean the sorting.
+     Else, set the sorting to ascending on the given field.
+   */
+  inverseSorting: action(function () {
+    if (this.order === 'asc') {
+      this.set('currentSorting', this._inverseSorting(this.currentSorting));
+    } else if (this.order === 'desc') {
+      this.set('currentSorting', '');
+    } else {
+      // if currentSorting is not set to this field
+      this.set('currentSorting', this.dasherizedField);
+    }
+  }),
 });

addon/templates/components/data-table-content-body.hbs

@@ -6,7 +6,7 @@
       <tr role="button" class="{{if (includes wrapper.item this.data-table.selection) "selected"}} {{if this.onClickRow "clickable"}}" {{on "click" (fn (optional this.onClickRow) wrapper.item)}}>
         {{#if this.enableSelection}}
           <td class="center">
-            <Input @type="checkbox" @checked={{wrapper.isSelected}} {{on "click" (action "updateSelection" wrapper)}} />
+            <Input @type="checkbox" @checked={{wrapper.isSelected}} {{on "click" (fn this.updateSelection wrapper)}} />
           </td>
         {{/if}}
         {{#if this.enableLineNumbers}}

addon/templates/components/data-table-menu-selected.hbs

@@ -1,5 +1,5 @@
 {{#unless this.data-table.selectionIsEmpty}}
   <span class="item-count">{{this.selectionCount}} item(s) selected</span>
-  <button type="button" {{action "clearSelection"}}>Cancel</button>
+  <button type="button" {{on "click" this.clearSelection}}>Cancel</button>
   {{yield (slice 0 this.selectionCount this.data-table.selection) this.data-table}}
 {{/unless}}

addon/templates/components/number-pagination.hbs

@@ -4,7 +4,7 @@
     {{#if this.total}} of {{this.total}}{{/if}}
     {{#if this.sizeOptions}}
       |
-      <select onchange={{action (mut this.size) value="target.value"}}>
+      <select {{on "change" this.setSize}}>
         {{#each this.sizeOptions as |sizeOption|}}
           <option value={{sizeOption}} selected={{eq this.size sizeOption}}>{{sizeOption}}</option>
         {{/each}}
@@ -13,15 +13,15 @@
   </div>
   {{#if this.hasMultiplePages}}
     <div class="data-table-pagination-right">
-      <button disabled={{this.isFirstPage}} type="button" {{action "changePage" this.links.first}}>First</button>
-      <button disabled={{this.isFirstPage}} type="button" {{action "changePage" this.links.prev}}>Previous</button>
-      <select onchange={{action (mut this.currentPage) value="target.value"}}>
+      <button disabled={{this.isFirstPage}} type="button" {{on "click" (fn this.changePage this.links.first)}}>First</button>
+      <button disabled={{this.isFirstPage}} type="button" {{on "click" (fn this.changePage this.links.prev)}}>Previous</button>
+      <select {{on "change" this.setCurrentPage}}>
         {{#each this.pageOptions as |sizeOption|}}
           <option value={{sizeOption}} selected={{eq this.currentPage sizeOption}}>{{sizeOption}}</option>
         {{/each}}
       </select>
-      <button disabled={{this.isLastPage}} type="button" {{action "changePage" this.links.next}}>Next</button>
-      <button disabled={{this.isLastPage}} type="button" {{action "changePage" this.links.last}}>Last</button>
+      <button disabled={{this.isLastPage}} type="button" {{on "click" (fn this.changePage this.links.next)}}>Next</button>
+      <button disabled={{this.isLastPage}} type="button" {{on "click" (fn this.changePage this.links.last)}}>Last</button>
     </div>
   {{/if}}
 </div>

addon/templates/components/text-search.hbs

@@ -1,6 +1,10 @@
 {{#if this.auto}}
   <Input @value={{this.value}} placeholder={{this.placeholder}} />
 {{else}}
-  <input value={{this.internalValue}} placeholder={{this.placeholder}} oninput={{action (mut this.internalValue) value="target.value"}}>
-  <button type="button" {{action (mut this.filter) this.internalValue}}>Search</button>
+  <input
+    value={{this.internalValue}}
+    placeholder={{this.placeholder}}
+    {{on "input" this.handleValueChange}}
+  >
+  <button type="button" {{on "click" this.handleManualFilterChange}}>Search</button>
 {{/if}}

addon/templates/components/th-sortable.hbs

@@ -1,4 +1,4 @@
-<span role="button" {{action "inverseSorting"}}>
+<span role="button" {{on "click" this.inverseSorting}}>
   {{#if this.order}}[{{this.order}}]{{/if}}
   {{this.label}}
 </span>

tests/dummy/app/controllers/application.js

@@ -1,10 +1,10 @@
-import EmberObject from '@ember/object';
+import EmberObject, { action } from '@ember/object';
 import ArrayProxy from '@ember/array/proxy';
 import Controller from '@ember/controller';
 import DefaultQueryParams from 'ember-data-table/mixins/default-query-params';
 
-var ApplicationController = Controller.extend(DefaultQueryParams, {
-  model: ArrayProxy.create({
+export default class ApplicationController extends Controller.extend(DefaultQueryParams) {
+  model = ArrayProxy.create({
     content: [
       EmberObject.create({
         firstName: 'John',
@@ -46,33 +46,37 @@ var ApplicationController = Controller.extend(DefaultQueryParams, {
         },
       },
     },
-  }),
-  page: 2,
-  size: 5,
-  sort: 'first-name',
-  actions: {
-    test(row) {
-      console.info(
-        'Hi, you reached the test action for row: ' + JSON.stringify(row)
-      );
-    },
-    menuTest() {
-      console.info('Hi, you reached the general menu test action');
-    },
-    selectionTest(selection, datatable) {
-      datatable.clearSelection();
-      console.info(
-        'Hi, you reached the selection test action for selection: ' +
-          JSON.stringify(selection)
-      );
-      selection.forEach(function (item) {
-        item.set('age', item.get('age') + 1);
-      });
-    },
-    clickRow(row) {
-      console.info('Custom row click action on item ' + JSON.stringify(row));
-    },
-  },
-});
+  });
+  page = 2;
+  size = 5;
+  sort = 'first-name';
+
+  @action
+  test(row) {
+    console.info(
+      'Hi, you reached the test action for row: ' + JSON.stringify(row)
+    );
+  }
+
+  @action
+  menuTest() {
+    console.info('Hi, you reached the general menu test action');
+  }
+
+  @action
+  selectionTest(selection, datatable) {
+    datatable.clearSelection();
+    console.info(
+      'Hi, you reached the selection test action for selection: ' +
+      JSON.stringify(selection)
+    );
+    selection.forEach(function (item) {
+      item.set('age', item.get('age') + 1);
+    });
+  }
 
-export default ApplicationController;
+  @action
+  clickRow(row) {
+    console.info('Custom row click action on item ' + JSON.stringify(row));
+  }
+}

tests/dummy/app/templates/application.hbs

@@ -30,14 +30,14 @@
 
     <h2>Complex table</h2>
     <blockquote>Customized table including an action menu on top</blockquote>
-    <DataTable @content={{this.model}} @sort={{this.sort}} @page={{this.page}} @size={{this.size}} @filter={{this.filter}} @autoSearch={{false}} @onClickRow={{action "clickRow"}} as |t|>
+    <DataTable @content={{this.model}} @sort={{this.sort}} @page={{this.page}} @size={{this.size}} @filter={{this.filter}} @autoSearch={{false}} @onClickRow={{this.clickRow}} as |t|>
       <t.menu as |menu|>
         <menu.general>
-          <button type="button" {{action "menuTest"}}>Export</button>
+          <button type="button" {{on "click" this.menuTest}}>Export</button>
           <button type="button">Print</button>
         </menu.general>
         <menu.selected as |selection table|>
-          <button type="button" {{action "selectionTest" selection table}}>Export</button>
+          <button type="button" {{on "click" (fn this.selectionTest selection table)}}>Export</button>
         </menu.selected>
       </t.menu>
       <t.content as |c|>
@@ -56,7 +56,7 @@
           <td>{{row.age}}</td>
           <td>{{row.created}}</td>
           <td>{{row.modified}}</td>
-          <td><button type="button" {{action "test" row}}>Info</button></td>
+          <td><button type="button" {{on "click" (fn this.test row)}}>Info</button></td>
         </c.body>
       </t.content>
     </DataTable>