DEV: Convert admin-watched-word to glimmer/gjs/dbutton (#28340)

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

@@ -0,0 +1,60 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { eq, or } from "truth-helpers";
+import DButton from "discourse/components/d-button";
+import i18n from "discourse-common/helpers/i18n";
+
+export default class AdminWatchedWord extends Component {
+  @service dialog;
+
+  get tags() {
+    return this.args.word.replacement.replacement.split(",");
+  }
+
+  @action
+  async deleteWord() {
+    try {
+      await this.args.word.destroy();
+      this.args.action(this.args.word);
+    } catch (e) {
+      this.dialog.alert(
+        i18n("generic_error_with_reason", {
+          error: `http: ${e.status} - ${e.body}`,
+        })
+      );
+    }
+  }
+
+  <template>
+    <div class="watched-word">
+      <DButton
+        @action={{this.deleteWord}}
+        @icon="times"
+        class="btn-transparent delete-word-record"
+      />
+
+      <span>{{@word.word}}</span>
+
+      {{#if (or (eq @actionKey "replace") (eq @actionKey "link"))}}
+        &rarr;
+        <span class="replacement">{{@word.replacement}}</span>
+      {{else if (eq @actionKey "tag")}}
+        &rarr;
+        {{#each this.tags as |tag|}}
+          <span class="tag">{{tag}}</span>
+        {{/each}}
+      {{/if}}
+
+      {{#if @word.case_sensitive}}
+        <span class="case-sensitive">
+          {{i18n "admin.watched_words.case_sensitive"}}
+        </span>
+      {{/if}}
+
+      {{#if @word.html}}
+        <span class="html">{{i18n "admin.watched_words.html"}}</span>
+      {{/if}}
+    </div>
+  </template>
+}

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

@@ -1,23 +0,0 @@
-<span
-  role="button"
-  onclick={{this.deleteWord}}
-  class="delete-word-record"
->{{d-icon "times"}}</span>
-{{this.word.word}}
-{{#if (or this.isReplace this.isLink)}}
-  &rarr;
-  <span class="replacement">{{this.word.replacement}}</span>
-{{else if this.isTag}}
-  &rarr;
-  {{#each this.tags as |tag|}}
-    <span class="tag">{{tag}}</span>
-  {{/each}}
-{{/if}}
-{{#if this.isCaseSensitive}}
-  <span class="case-sensitive">{{i18n
-      "admin.watched_words.case_sensitive"
-    }}</span>
-{{/if}}
-{{#if this.isHtml}}
-  <span class="html">{{i18n "admin.watched_words.html"}}</span>
-{{/if}}

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

@@ -1,39 +0,0 @@
-import Component from "@ember/component";
-import { action } from "@ember/object";
-import { alias, equal } from "@ember/object/computed";
-import { service } from "@ember/service";
-import { classNames } from "@ember-decorators/component";
-import discourseComputed from "discourse-common/utils/decorators";
-import I18n from "discourse-i18n";
-
-@classNames("watched-word")
-export default class AdminWatchedWord extends Component {
-  @service dialog;
-
-  @equal("actionKey", "replace") isReplace;
-  @equal("actionKey", "tag") isTag;
-  @equal("actionKey", "link") isLink;
-  @alias("word.case_sensitive") isCaseSensitive;
-  @alias("word.html") isHtml;
-
-  @discourseComputed("word.replacement")
-  tags(replacement) {
-    return replacement.split(",");
-  }
-
-  @action
-  deleteWord() {
-    this.word
-      .destroy()
-      .then(() => {
-        this.action(this.word);
-      })
-      .catch((e) => {
-        this.dialog.alert(
-          I18n.t("generic_error_with_reason", {
-            error: `http: ${e.status} - ${e.body}`,
-          })
-        );
-      });
-  }
-}

app/assets/javascripts/admin/addon/templates/watched-words-action.hbs

@@ -63,11 +63,13 @@
 {{#if this.showWordsList}}
   <div class="watched-words-list watched-words-{{this.actionNameKey}}">
     {{#each this.currentAction.words as |word|}}
-      <div class="watched-word-box"><AdminWatchedWord
+      <div class="watched-word-box">
+        <AdminWatchedWord
           @actionKey={{this.actionNameKey}}
           @word={{word}}
           @action={{action "recordRemoved"}}
-        /></div>
+        />
+      </div>
     {{/each}}
   </div>
 {{/if}}