DEV: Remove usage of {{action}} modifiers - Take 2 (#18476)

This PR enables the [`no-action-modifiers`](https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/no-action-modifiers.md) template lint rule and removes all usages of the `{{action}}` modifier in core.

In general, instances of `{{action "x"}}` have been replaced with `{{on "click" (action "x")}}`. 

In many cases, such as for `a` elements, we also need to prevent default event handling to avoid unwanted side effects. While the `{{action}}` modifier internally calls `event.preventDefault()`, we need to handle these cases more explicitly. For this purpose, this PR also adds the [ember-event-helpers](https://github.com/buschtoens/ember-event-helpers) dependency so we can use the `prevent-default` handler. For instance:

```
<a href {{on "click" (prevent-default (action "x"))}}>Do X</a>
```

Note that `action` has not in general been refactored away as a helper yet. In general, all event handlers should be methods on the corresponding component and referenced directly (e.g. `{{on "click" this.doSomething}}`). However, the `action` helper is used extensively throughout the codebase and often references methods in the `actions` hash on controllers or routes. Thus this refactor will also be extensive and probably deserves a separate PR.

Note: This work was done to complement #17767 by minimizing the potential impact of the `action` modifier override, which uses private API and arguably should be replaced with an AST transform.

This is a followup to #18333, which had to be reverted because it did not account for the default treatment of modifier keys by the {{action}} modifier.

Commits:
* Enable `no-action-modifiers` template lint rule
* Replace {{action "x"}} with {{on "click" (action "x")}}
* Remove unnecessary action helper usage
* Remove ctl+click tests for user-menu
   These tests now break in Chrome when used with addEventListener. As per the comment, they can probably be safely removed.
* Prevent default event handlers to avoid unwanted side effects
   Uses `event.preventDefault()` in event handlers to prevent default event handling. This had been done automatically by the `action` modifier, but is not always desirable or necessary.
* Restore UserCardContents#showUser action to avoid regression
   By keeping the `showUser` action, we can avoid a breaking change for plugins that rely upon it, while not interfering with the `showUser` argument that's been passed.
* Revert EditCategoryTab#selectTab -> EditCategoryTab#select
   Avoid potential breaking change in themes / plugins
* Restore GroupCardContents#showGroup action to avoid regression
   By keeping the `showGroup` action, we can avoid a breaking change for plugins that rely upon it, while not interfering with the `showGroup` argument that's been passed.
* Restore SecondFactorAddTotp#showSecondFactorKey action to avoid regression
   By keeping the `showSecondFactorKey` action, we can avoid a breaking change for plugins that rely upon it, while not interfering with the `showSecondFactorKey` property that's maintained on the controller.
* Refactor away from `actions` hash in ChooseMessage component
* Modernize EmojiPicker#onCategorySelection usage
* Modernize SearchResultEntry#logClick usage
* Modernize Discovery::Categories#showInserted usage
* Modernize Preferences::Account#resendConfirmationEmail usage
* Modernize MultiSelect::SelectedCategory#onSelectedNameClick usage
* Favor fn over action in SelectedChoice component
* Modernize WizardStep event handlers
* Favor fn over action usage in buttons
* Restore Login#forgotPassword action to avoid possible regression
* Introduce modKeysPressed utility
   Returns an array of modifier keys that are pressed during a given `MouseEvent` or `KeyboardEvent`.
* Don't interfere with click events on links with `href` values when modifier keys are pressed

app/assets/javascripts/admin/addon/components/admin-editable-field.js

@@ -1,4 +1,6 @@
 import Component from "@ember/component";
+import { action } from "@ember/object";
+
 export default Component.extend({
   tagName: "",
 
@@ -10,12 +12,14 @@ export default Component.extend({
     this.set("editing", false);
   },
 
-  actions: {
-    edit() {
-      this.set("buffer", this.value);
-      this.toggleProperty("editing");
-    },
+  @action
+  edit(event) {
+    event?.preventDefault();
+    this.set("buffer", this.value);
+    this.toggleProperty("editing");
+  },
 
+  actions: {
     save() {
       // Action has to toggle 'editing' property.
       this.action(this.buffer);

app/assets/javascripts/admin/addon/components/admin-theme-editor.js

@@ -3,6 +3,7 @@ import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { fmt } from "discourse/lib/computed";
 import { isDocumentRTL } from "discourse/lib/text-direction";
+import { action } from "@ember/object";
 import { next } from "@ember/runloop";
 
 export default Component.extend({
@@ -91,15 +92,26 @@ export default Component.extend({
     return this.theme.getError(target, fieldName);
   },
 
+  @action
+  toggleShowAdvanced(event) {
+    event?.preventDefault();
+    this.toggleProperty("showAdvanced");
+  },
+
+  @action
+  toggleAddField(event) {
+    event?.preventDefault();
+    this.toggleProperty("addingField");
+  },
+
+  @action
+  toggleMaximize(event) {
+    event?.preventDefault();
+    this.toggleProperty("maximized");
+    next(() => this.appEvents.trigger("ace:resize"));
+  },
+
   actions: {
-    toggleShowAdvanced() {
-      this.toggleProperty("showAdvanced");
-    },
-
-    toggleAddField() {
-      this.toggleProperty("addingField");
-    },
-
     cancelAddField() {
       this.set("addingField", false);
     },
@@ -114,11 +126,6 @@ export default Component.extend({
       this.fieldAdded(this.currentTargetName, name);
     },
 
-    toggleMaximize() {
-      this.toggleProperty("maximized");
-      next(() => this.appEvents.trigger("ace:resize"));
-    },
-
     onlyOverriddenChanged(value) {
       this.onlyOverriddenChanged(value);
     },

app/assets/javascripts/admin/addon/components/ip-lookup.js

@@ -1,6 +1,6 @@
 import AdminUser from "admin/models/admin-user";
 import Component from "@ember/component";
-import EmberObject from "@ember/object";
+import EmberObject, { action } from "@ember/object";
 import I18n from "I18n";
 import { ajax } from "discourse/lib/ajax";
 import copyText from "discourse/lib/copy-text";
@@ -21,6 +21,12 @@ export default Component.extend({
     return Math.max(visible, total);
   },
 
+  @action
+  hide(event) {
+    event?.preventDefault();
+    this.set("show", false);
+  },
+
   actions: {
     lookup() {
       this.set("show", true);
@@ -55,10 +61,6 @@ export default Component.extend({
       }
     },
 
-    hide() {
-      this.set("show", false);
-    },
-
     copy() {
       let text = `IP: ${this.ip}\n`;
       const location = this.location;

app/assets/javascripts/admin/addon/components/themes-list-item.js

@@ -3,6 +3,7 @@ import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import { escape } from "pretty-text/sanitizer";
 import { iconHTML } from "discourse-common/lib/icon-library";
+import { action } from "@ember/object";
 
 const MAX_COMPONENTS = 4;
 
@@ -59,9 +60,9 @@ export default Component.extend({
     return childrenCount - MAX_COMPONENTS;
   },
 
-  actions: {
-    toggleChildrenExpanded() {
-      this.toggleProperty("childrenExpanded");
-    },
+  @action
+  toggleChildrenExpanded(event) {
+    event?.preventDefault();
+    this.toggleProperty("childrenExpanded");
   },
 });

app/assets/javascripts/admin/addon/controllers/admin-badges/show.js

@@ -133,6 +133,12 @@ export default class AdminBadgesShowController extends Controller.extend(
     this.buffered.set("image_url", null);
   }
 
+  @action
+  showPreview(badge, explain, event) {
+    event?.preventDefault();
+    this.send("preview", badge, explain);
+  }
+
   @action
   save() {
     if (!this.saving) {

app/assets/javascripts/admin/addon/controllers/admin-email-bounced.js

@@ -2,8 +2,15 @@ import AdminEmailLogsController from "admin/controllers/admin-email-logs";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { observes } from "discourse-common/utils/decorators";
+import { action } from "@ember/object";
 
 export default AdminEmailLogsController.extend({
+  @action
+  handleShowIncomingEmail(id, event) {
+    event?.preventDefault();
+    this.send("showIncomingEmail", id);
+  },
+
   @observes("filter.{status,user,address,type}")
   filterEmailLogs() {
     discourseDebounce(this, this.loadLogs, INPUT_DELAY);

app/assets/javascripts/admin/addon/controllers/admin-email-preview-digest.js

@@ -1,7 +1,7 @@
 import { empty, notEmpty, or } from "@ember/object/computed";
 import Controller from "@ember/controller";
 import EmailPreview from "admin/models/email-preview";
-import { get } from "@ember/object";
+import { action, get } from "@ember/object";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { inject as service } from "@ember/service";
 
@@ -14,6 +14,12 @@ export default Controller.extend({
   showSendEmailForm: notEmpty("model.html_content"),
   htmlEmpty: empty("model.html_content"),
 
+  @action
+  toggleShowHtml(event) {
+    event?.preventDefault();
+    this.toggleProperty("showHtml");
+  },
+
   actions: {
     updateUsername(selected) {
       this.set("username", get(selected, "firstObject"));
@@ -39,10 +45,6 @@ export default Controller.extend({
       });
     },
 
-    toggleShowHtml() {
-      this.toggleProperty("showHtml");
-    },
-
     sendEmail() {
       this.set("sendingEmail", true);
       this.set("sentEmail", false);

app/assets/javascripts/admin/addon/controllers/admin-email-rejected.js

@@ -3,6 +3,7 @@ import { INPUT_DELAY } from "discourse-common/config/environment";
 import IncomingEmail from "admin/models/incoming-email";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { observes } from "discourse-common/utils/decorators";
+import { action } from "@ember/object";
 
 export default AdminEmailLogsController.extend({
   @observes("filter.{status,from,to,subject,error}")
@@ -10,6 +11,12 @@ export default AdminEmailLogsController.extend({
     discourseDebounce(this, this.loadLogs, IncomingEmail, INPUT_DELAY);
   },
 
+  @action
+  handleShowIncomingEmail(id, event) {
+    event?.preventDefault();
+    this.send("showIncomingEmail", id);
+  },
+
   actions: {
     loadMore() {
       this.loadLogs(IncomingEmail, true);

app/assets/javascripts/admin/addon/controllers/admin-logs-screened-ip-addresses.js

@@ -6,6 +6,7 @@ import discourseDebounce from "discourse-common/lib/debounce";
 import { exportEntity } from "discourse/lib/export-csv";
 import { observes } from "discourse-common/utils/decorators";
 import { outputExportResult } from "discourse/lib/export-result";
+import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 
 export default Controller.extend({
@@ -26,6 +27,15 @@ export default Controller.extend({
     discourseDebounce(this, this._debouncedShow, INPUT_DELAY);
   },
 
+  @action
+  edit(record, event) {
+    event?.preventDefault();
+    if (!record.get("editing")) {
+      this.set("savedIpAddress", record.get("ip_address"));
+    }
+    record.set("editing", true);
+  },
+
   actions: {
     allow(record) {
       record.set("action_name", "do_nothing");
@@ -37,13 +47,6 @@ export default Controller.extend({
       record.save();
     },
 
-    edit(record) {
-      if (!record.get("editing")) {
-        this.set("savedIpAddress", record.get("ip_address"));
-      }
-      record.set("editing", true);
-    },
-
     cancel(record) {
       const savedIpAddress = this.savedIpAddress;
       if (savedIpAddress && record.get("editing")) {

app/assets/javascripts/admin/addon/controllers/admin-logs-staff-action-logs.js

@@ -1,5 +1,5 @@
 import Controller from "@ember/controller";
-import EmberObject from "@ember/object";
+import EmberObject, { action } from "@ember/object";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { exportEntity } from "discourse/lib/export-csv";
@@ -31,11 +31,13 @@ export default Controller.extend({
         this.set(
           "userHistoryActions",
           result.extras.user_history_actions
-            .map((action) => ({
-              id: action.id,
-              action_id: action.action_id,
-              name: I18n.t("admin.logs.staff_actions.actions." + action.id),
-              name_raw: action.id,
+            .map((historyAction) => ({
+              id: historyAction.id,
+              action_id: historyAction.action_id,
+              name: I18n.t(
+                "admin.logs.staff_actions.actions." + historyAction.id
+              ),
+              name_raw: historyAction.id,
             }))
             .sort((a, b) => a.name.localeCompare(b.name))
         );
@@ -75,61 +77,74 @@ export default Controller.extend({
     this.scheduleRefresh();
   },
 
-  actions: {
-    filterActionIdChanged(filterActionId) {
-      if (filterActionId) {
-        this.changeFilters({
-          action_name: filterActionId,
-          action_id: this.userHistoryActions.findBy("id", filterActionId)
-            .action_id,
-        });
-      }
-    },
-
-    clearFilter(key) {
-      if (key === "actionFilter") {
-        this.set("filterActionId", null);
-        this.changeFilters({
-          action_name: null,
-          action_id: null,
-          custom_type: null,
-        });
-      } else {
-        this.changeFilters({ [key]: null });
-      }
-    },
-
-    clearAllFilters() {
-      this.set("filterActionId", null);
-      this.resetFilters();
-    },
-
-    filterByAction(logItem) {
+  @action
+  filterActionIdChanged(filterActionId) {
+    if (filterActionId) {
       this.changeFilters({
-        action_name: logItem.get("action_name"),
-        action_id: logItem.get("action"),
-        custom_type: logItem.get("custom_type"),
+        action_name: filterActionId,
+        action_id: this.userHistoryActions.findBy("id", filterActionId)
+          .action_id,
       });
-    },
+    }
+  },
 
-    filterByStaffUser(acting_user) {
-      this.changeFilters({ acting_user: acting_user.username });
-    },
+  @action
+  clearFilter(key, event) {
+    event?.preventDefault();
+    if (key === "actionFilter") {
+      this.set("filterActionId", null);
+      this.changeFilters({
+        action_name: null,
+        action_id: null,
+        custom_type: null,
+      });
+    } else {
+      this.changeFilters({ [key]: null });
+    }
+  },
 
-    filterByTargetUser(target_user) {
-      this.changeFilters({ target_user: target_user.username });
-    },
+  @action
+  clearAllFilters(event) {
+    event?.preventDefault();
+    this.set("filterActionId", null);
+    this.resetFilters();
+  },
 
-    filterBySubject(subject) {
-      this.changeFilters({ subject });
-    },
+  @action
+  filterByAction(logItem, event) {
+    event?.preventDefault();
+    this.changeFilters({
+      action_name: logItem.get("action_name"),
+      action_id: logItem.get("action"),
+      custom_type: logItem.get("custom_type"),
+    });
+  },
 
-    exportStaffActionLogs() {
-      exportEntity("staff_action").then(outputExportResult);
-    },
+  @action
+  filterByStaffUser(acting_user, event) {
+    event?.preventDefault();
+    this.changeFilters({ acting_user: acting_user.username });
+  },
 
-    loadMore() {
-      this.model.loadMore();
-    },
+  @action
+  filterByTargetUser(target_user, event) {
+    event?.preventDefault();
+    this.changeFilters({ target_user: target_user.username });
+  },
+
+  @action
+  filterBySubject(subject, event) {
+    event?.preventDefault();
+    this.changeFilters({ subject });
+  },
+
+  @action
+  exportStaffActionLogs() {
+    exportEntity("staff_action").then(outputExportResult);
+  },
+
+  @action
+  loadMore() {
+    this.model.loadMore();
   },
 });

app/assets/javascripts/admin/addon/controllers/admin-web-hooks-show-events.js

@@ -1,5 +1,6 @@
 import Controller from "@ember/controller";
 import { ajax } from "discourse/lib/ajax";
+import { action } from "@ember/object";
 import { alias } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 import { popupAjaxError } from "discourse/lib/ajax-error";
@@ -43,6 +44,23 @@ export default Controller.extend({
     }
   },
 
+  @action
+  showInserted(event) {
+    event?.preventDefault();
+    const webHookId = this.get("model.extras.web_hook_id");
+
+    ajax(`/admin/api/web_hooks/${webHookId}/events/bulk`, {
+      type: "GET",
+      data: { ids: this.incomingEventIds },
+    }).then((data) => {
+      const objects = data.map((webHookEvent) =>
+        this.store.createRecord("web-hook-event", webHookEvent)
+      );
+      this.model.unshiftObjects(objects);
+      this.set("incomingEventIds", []);
+    });
+  },
+
   actions: {
     loadMore() {
       this.model.loadMore();
@@ -61,20 +79,5 @@ export default Controller.extend({
         popupAjaxError(error);
       });
     },
-
-    showInserted() {
-      const webHookId = this.get("model.extras.web_hook_id");
-
-      ajax(`/admin/api/web_hooks/${webHookId}/events/bulk`, {
-        type: "GET",
-        data: { ids: this.incomingEventIds },
-      }).then((data) => {
-        const objects = data.map((event) =>
-          this.store.createRecord("web-hook-event", event)
-        );
-        this.model.unshiftObjects(objects);
-        this.set("incomingEventIds", []);
-      });
-    },
   },
 });

app/assets/javascripts/admin/addon/controllers/modals/admin-uploaded-image-list.js

@@ -1,5 +1,6 @@
 import { observes, on } from "discourse-common/utils/decorators";
 import Controller from "@ember/controller";
+import { action } from "@ember/object";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 
 export default Controller.extend(ModalFunctionality, {
@@ -10,15 +11,17 @@ export default Controller.extend(ModalFunctionality, {
     this.set("images", value && value.length ? value.split("|") : []);
   },
 
+  @action
+  remove(url, event) {
+    event?.preventDefault();
+    this.images.removeObject(url);
+  },
+
   actions: {
     uploadDone({ url }) {
       this.images.addObject(url);
     },
 
-    remove(url) {
-      this.images.removeObject(url);
-    },
-
     close() {
       this.save(this.images.join("|"));
       this.send("closeModal");

app/assets/javascripts/admin/addon/templates/admin-badges/show.hbs

@@ -88,9 +88,9 @@
       </div>
 
       {{#if this.hasQuery}}
-        <a href {{action "preview" this.buffered "false"}}>{{i18n "admin.badges.preview.link_text"}}</a>
+        <a href {{on "click" (fn this.showPreview this.buffered "false")}}>{{i18n "admin.badges.preview.link_text"}}</a>
         |
-        <a href {{action "preview" this.buffered "true"}}>{{i18n "admin.badges.preview.plan_text"}}</a>
+        <a href {{on "click" (fn this.showPreview this.buffered "true")}}>{{i18n "admin.badges.preview.plan_text"}}</a>
         {{#if this.preview_loading}}
           {{i18n "loading"}}
         {{/if}}

app/assets/javascripts/admin/addon/templates/components/admin-editable-field.hbs

@@ -3,7 +3,7 @@
   {{#if this.editing}}
     <TextField @value={{this.buffer}} @autofocus="autofocus" @autocomplete="off" />
   {{else}}
-    <a href {{action "edit"}} class="inline-editable-field">
+    <a href {{on "click" this.edit}} class="inline-editable-field">
       <span>{{this.value}}</span>
     </a>
   {{/if}}
@@ -11,7 +11,7 @@
 <div class="controls">
   {{#if this.editing}}
     <DButton @class="btn-default" @action={{action "save"}} @label="admin.user_fields.save" />
-    <a href {{action "edit"}}>{{i18n "cancel"}}</a>
+    <a href {{on "click" this.edit}}>{{i18n "cancel"}}</a>
   {{else}}
     <DButton @class="btn-default" @action={{action "edit"}} @icon="pencil-alt" />
   {{/if}}

app/assets/javascripts/admin/addon/templates/components/admin-theme-editor.hbs

@@ -13,7 +13,7 @@
 
       {{#if this.allowAdvanced}}
         <li>
-          <a {{action "toggleShowAdvanced"}}
+          <a {{on "click" this.toggleShowAdvanced}}
             href
             title={{i18n (concat "admin.customize.theme." (if this.showAdvanced "hide_advanced" "show_advanced"))}}
             class="no-text">
@@ -52,7 +52,7 @@
             <DButton @class="ok" @action={{action "addField" this.newFieldName}} @icon="check" />
             <DButton @class="cancel" @action={{action "cancelAddField"}} @icon="times" />
           {{else}}
-            <a href {{action "toggleAddField" this.currentTargetName}} class="no-text">
+            <a href {{on "click" this.toggleAddField}} class="no-text">
               {{d-icon "plus"}}
             </a>
           {{/if}}
@@ -61,7 +61,7 @@
 
       <li class="spacer"></li>
       <li>
-        <a href {{action "toggleMaximize"}} class="no-text">
+        <a href {{on "click" this.toggleMaximize}} class="no-text">
           {{d-icon this.maximizeIcon}}
         </a>
       </li>

app/assets/javascripts/admin/addon/templates/components/ip-lookup.hbs

@@ -3,7 +3,7 @@
 {{/if}}
 {{#if this.show}}
   <div class="location-box">
-    <a href class="close pull-right" {{action "hide"}}>{{d-icon "times"}}</a>
+    <a href class="close pull-right" {{on "click" this.hide}}>{{d-icon "times"}}</a>
     {{#if this.copied}}
       <DButton @class="btn-hover pull-right" @icon="copy" @label="ip_lookup.copied" />
     {{else}}

app/assets/javascripts/admin/addon/templates/components/themes-list-item.hbs

@@ -31,7 +31,7 @@
       <span class="components">{{html-safe this.childrenString}}</span>
 
       {{#if this.displayHasMore}}
-        <a href {{action "toggleChildrenExpanded"}} class="others-count">
+        <a href {{on "click" this.toggleChildrenExpanded}} class="others-count">
           {{#if this.childrenExpanded}}
             {{i18n "admin.customize.theme.collapse"}}
           {{else}}

app/assets/javascripts/admin/addon/templates/email-bounced.hbs

@@ -30,7 +30,7 @@
           <td class="email-address"><a href="mailto:{{l.to_address}}">{{l.to_address}}</a></td>
           <td>
             {{#if l.has_bounce_key}}
-              <a href {{action "showIncomingEmail" l.id}}>
+              <a href {{on "click" (fn this.handleShowIncomingEmail l.id)}}>
                 {{l.email_type}}
               </a>
             {{else}}
@@ -39,7 +39,7 @@
           </td>
           <td class="email-details">
             {{#if l.has_bounce_key}}
-              <a href {{action "showIncomingEmail" l.id}} title={{i18n "admin.email.details_title"}}>
+              <a href {{on "click" (fn this.handleShowIncomingEmail l.id)}} title={{i18n "admin.email.details_title"}}>
                 {{d-icon "info-circle"}}
               </a>
             {{/if}}

app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs

@@ -15,11 +15,11 @@
         {{#if this.showHtml}}
           <span>{{i18n "admin.email.html"}}</span>
           |
-          <a href {{action "toggleShowHtml"}}>
+          <a href {{on "click" this.toggleShowHtml}}>
             {{i18n "admin.email.text"}}
           </a>
         {{else}}
-          <a href {{action "toggleShowHtml"}}>{{i18n "admin.email.html"}}</a> |
+          <a href {{on "click" this.toggleShowHtml}}>{{i18n "admin.email.html"}}</a> |
           <span>{{i18n "admin.email.text"}}</span>
         {{/if}}
       </div>

app/assets/javascripts/admin/addon/templates/email-rejected.hbs

@@ -48,10 +48,10 @@
           </td>
           <td>{{email.subject}}</td>
           <td class="error">
-            <a href {{action "showIncomingEmail" email.id}}>{{email.error}}</a>
+            <a href {{on "click" (fn this.handleShowIncomingEmail email.id)}}>{{email.error}}</a>
           </td>
           <td class="email-details">
-            <a href {{action "showIncomingEmail" email.id}} title={{i18n "admin.email.details_title"}}>
+            <a href {{on "click" (fn this.handleShowIncomingEmail email.id)}} title={{i18n "admin.email.details_title"}}>
               {{d-icon "info-circle"}}
             </a>
           </td>

app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs

@@ -27,7 +27,7 @@
               {{#if item.editing}}
                 <TextField @value={{item.ip_address}} @autofocus="autofocus" />
               {{else}}
-                <a href {{action "edit" item}} class="inline-editable-field">
+                <a href {{on "click" (fn this.edit item)}} class="inline-editable-field">
                   {{#if item.isRange}}
                     <strong>{{item.ip_address}}</strong>
                   {{else}}

app/assets/javascripts/admin/addon/templates/logs/staff-action-logs.hbs

@@ -1,29 +1,29 @@
 <div class="staff-action-logs-controls">
   {{#if this.filtersExists}}
     <div class="staff-action-logs-filters">
-      <a href {{action "clearAllFilters"}} class="clear-filters filter btn">
+      <a href {{on "click" this.clearAllFilters}} class="clear-filters filter btn">
         <span class="label">{{i18n "admin.logs.staff_actions.clear_filters"}}</span>
       </a>
       {{#if this.actionFilter}}
-        <a href {{action "clearFilter" "actionFilter"}} class="filter btn">
+        <a href {{on "click" (fn this.clearFilter "actionFilter")}} class="filter btn">
           <span class="label">{{i18n "admin.logs.action"}}</span>: {{this.actionFilter}}
           {{d-icon "times-circle"}}
         </a>
       {{/if}}
       {{#if this.filters.acting_user}}
-        <a href {{action "clearFilter" "acting_user"}} class="filter btn">
+        <a href {{on "click" (fn this.clearFilter "acting_user")}} class="filter btn">
           <span class="label">{{i18n "admin.logs.staff_actions.staff_user"}}</span>: {{this.filters.acting_user}}
           {{d-icon "times-circle"}}
         </a>
       {{/if}}
       {{#if this.filters.target_user}}
-        <a href {{action "clearFilter" "target_user"}} class="filter btn">
+        <a href {{on "click" (fn this.clearFilter "target_user")}} class="filter btn">
           <span class="label">{{i18n "admin.logs.staff_actions.target_user"}}</span>: {{this.filters.target_user}}
           {{d-icon "times-circle"}}
         </a>
       {{/if}}
       {{#if this.filters.subject}}
-        <a href {{action "clearFilter" "subject"}} class="filter btn">
+        <a href {{on "click" (fn this.clearFilter "subject")}} class="filter btn">
           <span class="label">{{i18n "admin.logs.staff_actions.subject"}}</span>: {{this.filters.subject}}
           {{d-icon "times-circle"}}
         </a>
@@ -71,16 +71,16 @@
                 </div>
               </td>
               <td class="col value action">
-                <a href {{action "filterByAction" item}}>{{item.actionName}}</a>
+                <a href {{on "click" (fn this.filterByAction item)}}>{{item.actionName}}</a>
               </td>
               <td class="col value subject">
                 <div class="subject">
                   {{#if item.target_user}}
                     <LinkTo @route="adminUser" @model={{item.target_user}}>{{avatar item.target_user imageSize="tiny"}}</LinkTo>
-                    <a href {{action "filterByTargetUser" item.target_user}}>{{item.target_user.username}}</a>
+                    <a href {{on "click" (fn this.filterByTargetUser item.target_user)}}>{{item.target_user.username}}</a>
                   {{/if}}
                   {{#if item.subject}}
-                    <a href {{action "filterBySubject" item.subject}} title={{item.subject}}>{{item.subject}}</a>
+                    <a href {{on "click" (fn this.filterBySubject item.subject)}} title={{item.subject}}>{{item.subject}}</a>
                   {{/if}}
                 </div>
               </td>
@@ -89,10 +89,10 @@
                 <div>
                   {{html-safe item.formattedDetails}}
                   {{#if item.useCustomModalForDetails}}
-                    <a href {{action "showCustomDetailsModal" item}}>{{d-icon "info-circle"}} {{i18n "admin.logs.staff_actions.show"}}</a>
+                    <a href {{on "click" (fn this.showCustomDetailsModal item)}}>{{d-icon "info-circle"}} {{i18n "admin.logs.staff_actions.show"}}</a>
                   {{/if}}
                   {{#if item.useModalForDetails}}
-                    <a href {{action "showDetailsModal" item}}>{{d-icon "info-circle"}} {{i18n "admin.logs.staff_actions.show"}}</a>
+                    <a href {{on "click" (fn this.showDetailsModal item)}}>{{d-icon "info-circle"}} {{i18n "admin.logs.staff_actions.show"}}</a>
                   {{/if}}
                 </div>
               </td>

app/assets/javascripts/admin/addon/templates/modal/admin-uploaded-image-list.hbs

@@ -1,7 +1,7 @@
 <DModalBody @class="uploaded-image-list">
   <div class="selectable-avatars">
     {{#each this.images as |image|}}
-      <a href class="selectable-avatar" {{action "remove" image}}>
+      <a href class="selectable-avatar" {{on "click" (fn this.remove image)}}>
         {{bound-avatar-template image "huge"}}
       </a>
     {{else}}

app/assets/javascripts/admin/addon/templates/web-hooks-show-events.hbs

@@ -21,7 +21,7 @@
           <div class="clearfix"></div>
         </div>
         {{#if this.hasIncoming}}
-          <a href tabindex="0" {{action "showInserted"}} class="alert alert-info clickable">
+          <a href tabindex="0" {{on "click" this.showInserted}} class="alert alert-info clickable">
             <CountI18n @key="admin.web_hooks.events.incoming" @count={{this.incomingCount}} />
           </a>
         {{/if}}