DEV: Convert `watched-word-test` modal to component-based API (#22911)

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

@@ -0,0 +1,45 @@
+<DModal
+  @title={{i18n
+    "admin.watched_words.test.modal_title"
+    action=@model.watchedWord.name
+  }}
+  @closeModal={{@closeModal}}
+  class="watched-words-test-modal"
+>
+  <:body>
+    <p>{{i18n "admin.watched_words.test.description"}}</p>
+    <Textarea name="test_value" @value={{this.value}} autofocus="autofocus" />
+    {{#if this.matches}}
+      <p>
+        {{i18n "admin.watched_words.test.found_matches"}}
+        <ul>
+          {{#if (or this.isReplace this.isLink)}}
+            {{#each this.matches as |match|}}
+              <li>
+                <span class="match">{{match.match}}</span>
+                &rarr;
+                <span class="replacement">{{match.replacement}}</span>
+              </li>
+            {{/each}}
+          {{else if this.isTag}}
+            {{#each this.matches as |match|}}
+              <li>
+                <span class="match">{{match.match}}</span>
+                &rarr;
+                {{#each match.tags as |tag|}}
+                  <span class="tag">{{tag}}</span>
+                {{/each}}
+              </li>
+            {{/each}}
+          {{else}}
+            {{#each this.matches as |match|}}
+              <li>{{match}}</li>
+            {{/each}}
+          {{/if}}
+        </ul>
+      </p>
+    {{else}}
+      <p>{{i18n "admin.watched_words.test.no_matches"}}</p>
+    {{/if}}
+  </:body>
+</DModal>

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

@@ -0,0 +1,79 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import {
+  createWatchedWordRegExp,
+  toWatchedWord,
+} from "discourse-common/utils/watched-words";
+
+export default class WatchedWordTest extends Component {
+  @tracked value;
+
+  get isReplace() {
+    return this.args.model.watchedWord.nameKey === "replace";
+  }
+
+  get isTag() {
+    return this.args.model.watchedWord.nameKey === "tag";
+  }
+
+  get isLink() {
+    return this.args.model.watchedWord.nameKey === "link";
+  }
+
+  get matches() {
+    if (
+      !this.value ||
+      this.args.model.watchedWord.compiledRegularExpression.length === 0
+    ) {
+      return [];
+    }
+
+    if (this.isReplace || this.isLink) {
+      const matches = [];
+      this.args.model.watchedWord.words.forEach((word) => {
+        const regexp = createWatchedWordRegExp(word);
+        let match;
+
+        while ((match = regexp.exec(this.value)) !== null) {
+          matches.push({
+            match: match[1],
+            replacement: word.replacement,
+          });
+        }
+      });
+      return matches;
+    } else if (this.isTag) {
+      const matches = {};
+      this.args.model.watchedWord.words.forEach((word) => {
+        const regexp = createWatchedWordRegExp(word);
+        let match;
+
+        while ((match = regexp.exec(this.value)) !== null) {
+          if (!matches[match[1]]) {
+            matches[match[1]] = new Set();
+          }
+
+          let tags = matches[match[1]];
+          word.replacement.split(",").forEach((tag) => {
+            tags.add(tag);
+          });
+        }
+      });
+
+      return Object.entries(matches).map((entry) => ({
+        match: entry[0],
+        tags: Array.from(entry[1]),
+      }));
+    } else {
+      let matches = [];
+      this.args.model.watchedWord.compiledRegularExpression.forEach(
+        (regexp) => {
+          const wordRegexp = createWatchedWordRegExp(toWatchedWord(regexp));
+          matches.push(...(this.value.match(wordRegexp) || []));
+        }
+      );
+
+      return matches;
+    }
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-watched-words-action.js

@@ -8,10 +8,11 @@ import { ajax } from "discourse/lib/ajax";
 import discourseComputed from "discourse-common/utils/decorators";
 import { fmt } from "discourse/lib/computed";
 import { schedule } from "@ember/runloop";
-import showModal from "discourse/lib/show-modal";
+import WatchedWordTestModal from "admin/components/modal/watched-word-test";
 
 export default class AdminWatchedWordsActionController extends Controller {
   @service dialog;
+  @service modal;
   @controller adminWatchedWords;
 
   actionNameKey = null;
@@ -91,9 +92,8 @@ export default class AdminWatchedWordsActionController extends Controller {
   test() {
     WatchedWord.findAll().then((data) => {
       this.adminWatchedWords.set("model", data);
-      showModal("admin-watched-word-test", {
-        admin: true,
-        model: this.currentAction,
+      this.modal.show(WatchedWordTestModal, {
+        model: { watchedWord: this.currentAction },
       });
     });
   }

app/assets/javascripts/admin/addon/controllers/modals/admin-watched-word-test.js

@@ -1,78 +0,0 @@
-import { equal } from "@ember/object/computed";
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import discourseComputed from "discourse-common/utils/decorators";
-import {
-  createWatchedWordRegExp,
-  toWatchedWord,
-} from "discourse-common/utils/watched-words";
-
-export default class AdminWatchedWordTestController extends Controller.extend(
-  ModalFunctionality
-) {
-  @equal("model.nameKey", "replace") isReplace;
-
-  @equal("model.nameKey", "tag") isTag;
-  @equal("model.nameKey", "link") isLink;
-
-  @discourseComputed(
-    "value",
-    "model.compiledRegularExpression",
-    "model.words",
-    "isReplace",
-    "isTag",
-    "isLink"
-  )
-  matches(value, regexpList, words, isReplace, isTag, isLink) {
-    if (!value || regexpList.length === 0) {
-      return [];
-    }
-
-    if (isReplace || isLink) {
-      const matches = [];
-      words.forEach((word) => {
-        const regexp = createWatchedWordRegExp(word);
-        let match;
-
-        while ((match = regexp.exec(value)) !== null) {
-          matches.push({
-            match: match[1],
-            replacement: word.replacement,
-          });
-        }
-      });
-      return matches;
-    } else if (isTag) {
-      const matches = {};
-      words.forEach((word) => {
-        const regexp = createWatchedWordRegExp(word);
-        let match;
-
-        while ((match = regexp.exec(value)) !== null) {
-          if (!matches[match[1]]) {
-            matches[match[1]] = new Set();
-          }
-
-          let tags = matches[match[1]];
-          word.replacement.split(",").forEach((tag) => {
-            tags.add(tag);
-          });
-        }
-      });
-
-      return Object.entries(matches).map((entry) => ({
-        match: entry[0],
-        tags: Array.from(entry[1]),
-      }));
-    } else {
-      let matches = [];
-      regexpList.forEach((regexp) => {
-        const wordRegexp = createWatchedWordRegExp(toWatchedWord(regexp));
-
-        matches.push(...(value.match(wordRegexp) || []));
-      });
-
-      return matches;
-    }
-  }
-}

app/assets/javascripts/admin/addon/templates/modal/admin-watched-word-test.hbs

@@ -1,42 +0,0 @@
-<DModalBody
-  @rawTitle={{i18n
-    "admin.watched_words.test.modal_title"
-    action=this.model.name
-  }}
-  @class="watched-words-test-modal"
->
-  <p>{{i18n "admin.watched_words.test.description"}}</p>
-  <Textarea name="test_value" @value={{this.value}} autofocus="autofocus" />
-  {{#if this.matches}}
-    <p>
-      {{i18n "admin.watched_words.test.found_matches"}}
-      <ul>
-        {{#if (or this.isReplace this.isLink)}}
-          {{#each this.matches as |match|}}
-            <li>
-              <span class="match">{{match.match}}</span>
-              &rarr;
-              <span class="replacement">{{match.replacement}}</span>
-            </li>
-          {{/each}}
-        {{else if this.isTag}}
-          {{#each this.matches as |match|}}
-            <li>
-              <span class="match">{{match.match}}</span>
-              &rarr;
-              {{#each match.tags as |tag|}}
-                <span class="tag">{{tag}}</span>
-              {{/each}}
-            </li>
-          {{/each}}
-        {{else}}
-          {{#each this.matches as |match|}}
-            <li>{{match}}</li>
-          {{/each}}
-        {{/if}}
-      </ul>
-    </p>
-  {{else}}
-    <p>{{i18n "admin.watched_words.test.no_matches"}}</p>
-  {{/if}}
-</DModalBody>

app/assets/javascripts/discourse/app/services/modal.js

@@ -48,7 +48,6 @@ const KNOWN_LEGACY_MODALS = [
   "tag-upload",
   "topic-summary",
   "user-status",
-  "admin-watched-word-test",
   "admin-install-theme",
   "admin-penalize-user",
   "admin-theme-change",