FIX: Split link watched words from replace (#13196)

It was not clear that replace watched words can be used to replace text
with URLs. This introduces a new watched word type that makes it easier
to understand.

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

@@ -9,6 +9,7 @@ export default Component.extend({
 
   isReplace: equal("actionKey", "replace"),
   isTag: equal("actionKey", "tag"),
+  isLink: equal("actionKey", "link"),
 
   @discourseComputed("word.replacement")
   tags(replacement) {

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

@@ -15,9 +15,16 @@ export default Component.extend({
   formSubmitted: false,
   actionKey: null,
   showMessage: false,
+  selectedTags: null,
 
   canReplace: equal("actionKey", "replace"),
   canTag: equal("actionKey", "tag"),
+  canLink: equal("actionKey", "link"),
+
+  didInsertElement() {
+    this._super(...arguments);
+    this.set("selectedTags", []);
+  },
 
   @discourseComputed("siteSettings.watched_words_regular_expressions")
   placeholderKey(watchedWordsRegularExpressions) {
@@ -47,6 +54,13 @@ export default Component.extend({
   },
 
   actions: {
+    changeSelectedTags(tags) {
+      this.setProperties({
+        selectedTags: tags,
+        replacement: tags.join(","),
+      });
+    },
+
     submit() {
       if (!this.isUniqueWord) {
         this.setProperties({
@@ -61,7 +75,10 @@ export default Component.extend({
 
         const watchedWord = WatchedWord.create({
           word: this.word,
-          replacement: this.canReplace || this.canTag ? this.replacement : null,
+          replacement:
+            this.canReplace || this.canTag || this.canLink
+              ? this.replacement
+              : null,
           action: this.actionKey,
         });
 

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

@@ -6,15 +6,17 @@ import { equal } from "@ember/object/computed";
 export default Controller.extend(ModalFunctionality, {
   isReplace: equal("model.nameKey", "replace"),
   isTag: equal("model.nameKey", "tag"),
+  isLink: equal("model.nameKey", "link"),
 
   @discourseComputed(
     "value",
     "model.compiledRegularExpression",
     "model.words",
     "isReplace",
-    "isTag"
+    "isTag",
+    "isLink"
   )
-  matches(value, regexpString, words, isReplace, isTag) {
+  matches(value, regexpString, words, isReplace, isTag, isLink) {
     if (!value || !regexpString) {
       return;
     }
@@ -22,7 +24,7 @@ export default Controller.extend(ModalFunctionality, {
     const regexp = new RegExp(regexpString, "ig");
     const matches = value.match(regexp) || [];
 
-    if (isReplace) {
+    if (isReplace || isLink) {
       return matches.map((match) => ({
         match,
         replacement: words.find((word) =>

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

@@ -1,5 +1,5 @@
 {{d-icon "times"}} {{word.word}}
-{{#if isReplace}}
+{{#if (or isReplace isLink)}}
   &rarr; <span class="replacement">{{word.replacement}}</span>
 {{else if isTag}}
   &rarr;

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

@@ -5,15 +5,29 @@
 
 {{#if canReplace}}
   <div class="watched-word-input">
-    <label for="watched-replacement">{{i18n "admin.watched_words.form.replacement_label"}}</label>
-    {{text-field id="watched-replacement" value=replacement disabled=formSubmitted class="watched-word-input-field" autocorrect="off" autocapitalize="off" placeholderKey="admin.watched_words.form.replacement_placeholder"}}
+    <label for="watched-replacement">{{i18n "admin.watched_words.form.replace_label"}}</label>
+    {{text-field id="watched-replacement" value=replacement disabled=formSubmitted class="watched-word-input-field" autocorrect="off" autocapitalize="off" placeholderKey="admin.watched_words.form.replace_placeholder"}}
   </div>
 {{/if}}
 
 {{#if canTag}}
   <div class="watched-word-input">
     <label for="watched-tag">{{i18n "admin.watched_words.form.tag_label"}}</label>
-    {{text-field id="watched-tag" value=replacement disabled=formSubmitted class="watched-word-input-field" autocorrect="off" autocapitalize="off" placeholderKey="admin.watched_words.form.tag_placeholder"}}
+    {{tag-chooser
+      id="watched-tag"
+      class="watched-word-input-field"
+      allowCreate=true
+      disabled=formSubmitted
+      tags=selectedTags
+      onChange=(action "changeSelectedTags")
+    }}
+  </div>
+{{/if}}
+
+{{#if canLink}}
+  <div class="watched-word-input">
+    <label for="watched-replacement">{{i18n "admin.watched_words.form.link_label"}}</label>
+    {{text-field id="watched-replacement" value=replacement disabled=formSubmitted class="watched-word-input-field" autocorrect="off" autocapitalize="off" placeholderKey="admin.watched_words.form.link_placeholder"}}
   </div>
 {{/if}}
 

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

@@ -5,7 +5,7 @@
     <p>
       {{i18n "admin.watched_words.test.found_matches"}}
       <ul>
-        {{#if isReplace}}
+        {{#if (or isReplace isLink)}}
           {{#each matches as |match|}}
             <li>
               <span class="match">{{match.match}}</span>

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

@@ -40,7 +40,7 @@
 {{/if}}
 
 {{#if showWordsList}}
-  <div class="watched-words-list">
+  <div class="watched-words-list watched-words-{{actionNameKey}}">
     {{#each currentAction.words as |word| }}
       <div class="watched-word-box">{{admin-watched-word actionKey=actionNameKey word=word action=(action "recordRemoved")}}</div>
     {{/each}}