DEV: Use `on` modifier (or `@action` param) (#28323)

instead of `onclick` prop

app/assets/javascripts/admin/addon/components/admin-watched-word.hbs

@@ -1,6 +1,6 @@
 <span
+  {{on "click" this.deleteWord}}
   role="button"
-  onclick={{this.deleteWord}}
   class="delete-word-record"
 >{{d-icon "times"}}</span>
 {{this.word.word}}

app/assets/javascripts/discourse/app/components/expand-post.hbs

@@ -1,9 +1,9 @@
 {{#if this.item.truncated}}
   <a
+    {{on "click" (action "toggleItem")}}
     href
-    class={{if this.expanded "collapse-item" "expand-item"}}
-    onclick={{action "toggleItem"}}
     title={{i18n "post.expand_collapse"}}
+    class={{if this.expanded "collapse-item" "expand-item"}}
   >
     {{#if this.expanded}}
       {{d-icon "chevron-up"}}

app/assets/javascripts/discourse/app/components/software-update-prompt.hbs

@@ -8,15 +8,15 @@
     <div class="wrap">
       <div class="update-prompt-main-content" aria-live="polite">
         <span
+          {{on "click" this.refreshPage}}
           role="button"
-          onclick={{action "refreshPage"}}
           class="update-prompt-message"
         >{{d-icon "redo"}}
           {{html-safe (i18n "software_update_prompt.message")}}</span>
         <span class="update-prompt-dismiss"><span
             aria-label={{i18n "software_update_prompt.dismiss"}}
             role="button"
-            onclick={{action "dismiss"}}
+            {{on "click" this.dismiss}}
           >{{d-icon "times"}}</span></span>
       </div>
     </div>

app/assets/javascripts/discourse/app/components/topic-timeline/container.hbs

@@ -2,9 +2,9 @@
   <div class="title">
     <h2>
       <a
-        class="fancy-title"
-        href
         {{on "click" @jumpTop}}
+        href
+        class="fancy-title"
       >{{this.topicTitle}}</a>
     </h2>
     {{#if (or this.siteSettings.topic_featured_link_enabled this.showTags)}}
@@ -72,9 +72,10 @@
   <div class="timeline-scrollarea-wrapper">
     <div class="timeline-date-wrapper">
       <a
-        class="start-date"
-        onClick={{this.updatePercentage}}
+        {{on "click" this.updatePercentage}}
+        href
         title={{i18n "topic_entrance.jump_top_button_title"}}
+        class="start-date"
       >
         <span>
           {{this.startDate}}
@@ -87,9 +88,10 @@
       {{did-insert this.registerScrollarea}}
     >
       <div
-        class="timeline-padding"
+        {{! template-lint-disable no-invalid-interactive }}
+        {{on "click" this.updatePercentage}}
         style={{this.beforePadding}}
-        onClick={{this.updatePercentage}}
+        class="timeline-padding"
       ></div>
       <TopicTimeline::Scroller
         @current={{this.current}}
@@ -104,9 +106,10 @@
         {{did-insert this.registerScroller}}
       />
       <div
-        class="timeline-padding"
+        {{! template-lint-disable no-invalid-interactive }}
+        {{on "click" this.updatePercentage}}
         style={{this.afterPadding}}
-        onClick={{this.updatePercentage}}
+        class="timeline-padding"
       ></div>
 
       {{#if (and this.hasBackPosition this.showButton)}}
@@ -118,7 +121,7 @@
     </div>
 
     <div class="timeline-date-wrapper">
-      <a class="now-date" onClick={{this.updatePercentage}}>
+      <a {{on "click" this.updatePercentage}} href class="now-date">
         <span>
           {{age-with-tooltip this.nowDate this.nowDateOptions}}
         </span>
@@ -129,10 +132,11 @@
   <div class="timeline-footer-controls">
     {{#if this.displaySummary}}
       <button
-        type="button"
-        class="show-summary btn btn-small"
-        title={{i18n "summary.short_title"}}
+        {{! template-lint-disable no-invalid-interactive }}
         {{on "click" @showTopReplies}}
+        type="button"
+        title={{i18n "summary.short_title"}}
+        class="show-summary btn btn-small"
       >
         {{d-icon "layer-group"}}
         {{i18n "summary.short_label"}}
@@ -142,10 +146,10 @@
     {{#if (and this.currentUser (not @fullscreen))}}
       {{#if this.canCreatePost}}
         <button
-          type="button"
-          class="btn btn-default create reply-to-post no-text btn-icon"
-          title={{i18n "topic.reply.help"}}
           {{on "click" (fn @replyToPost null)}}
+          type="button"
+          title={{i18n "topic.reply.help"}}
+          class="btn btn-default create reply-to-post no-text btn-icon"
         >
           {{d-icon "reply"}}
         </button>
@@ -154,10 +158,10 @@
 
     {{#if @fullscreen}}
       <button
-        type="button"
-        class="timeline-open-jump-to-post-prompt-btn btn btn-text jump-to-post"
-        title={{i18n "topic.progress.jump_prompt_long"}}
         {{on "click" @jumpToPostPrompt}}
+        type="button"
+        title={{i18n "topic.progress.jump_prompt_long"}}
+        class="timeline-open-jump-to-post-prompt-btn btn btn-text jump-to-post"
       >
         <span class="d-button-label">
           {{i18n "topic.progress.jump_prompt"}}

app/assets/javascripts/discourse/app/components/user-status-picker.hbs

@@ -4,11 +4,11 @@
       {{if this.isFocused 'focused'}}"
   >
     <button
-      type="button"
-      class="btn-emoji btn-transparent"
-      onclick={{this.toggleEmojiPicker}}
+      {{on "click" this.toggleEmojiPicker}}
       {{on "focus" this.focus}}
       {{on "blur" this.blur}}
+      type="button"
+      class="btn-emoji btn-transparent"
     >
       {{#if @status.emoji}}
         {{html-safe this.emojiHtml}}

plugins/poll/assets/javascripts/discourse/components/poll-option-ranked-choice.gjs

@@ -4,7 +4,6 @@ import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import DButton from "discourse/components/d-button";
 import routeAction from "discourse/helpers/route-action";
-import i18n from "discourse-common/helpers/i18n";
 import PollOptionRankedChoiceDropdown from "./poll-option-ranked-choice-dropdown";
 
 export default class PollOptionsComponent extends Component {
@@ -30,9 +29,11 @@ export default class PollOptionsComponent extends Component {
           @sendRank={{this.sendRank}}
         />
       {{else}}
-        <DButton class="btn-default" onclick={{routeAction "showLogin"}}>{{i18n
-            "poll.options.ranked_choice.login"
-          }}</DButton>
+        <DButton
+          @action={{routeAction "showLogin"}}
+          @label="poll.options.ranked_choice.login"
+          class="btn-default"
+        />
       {{/if}}
       <span class="option-text">{{htmlSafe @option.html}}</span>
     </div>

plugins/poll/assets/javascripts/discourse/components/poll-options.gjs

@@ -59,7 +59,7 @@ export default class PollOptionsComponent extends Component {
                 <span class="option-text">{{htmlSafe option.html}}</span>
               </button>
             {{else}}
-              <button onclick={{routeAction "showLogin"}}>
+              <button {{on "click" (routeAction "showLogin")}}>
                 {{#if (this.isChosen option)}}
                   {{#if @isCheckbox}}
                     {{icon "far-check-square"}}