FIX: Watched words submit button should be disabled by default (#18947)

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

@@ -2,7 +2,7 @@ import discourseComputed, { observes } from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import I18n from "I18n";
 import WatchedWord from "admin/models/watched-word";
-import { equal } from "@ember/object/computed";
+import { equal, not } from "@ember/object/computed";
 import { isEmpty } from "@ember/utils";
 import { schedule } from "@ember/runloop";
 import { inject as service } from "@ember/service";
@@ -16,7 +16,7 @@ export default Component.extend({
   showMessage: false,
   selectedTags: null,
   isCaseSensitive: false,
-
+  submitDisabled: not("word"),
   canReplace: equal("actionKey", "replace"),
   canTag: equal("actionKey", "tag"),
   canLink: equal("actionKey", "link"),

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

@@ -35,7 +35,7 @@
   </label>
 </div>
 
-<DButton @type="submit" @class="btn btn-primary" @action={{action "submit"}} @disabled={{this.formSubmitted}} @label="admin.watched_words.form.add" />
+<DButton @type="submit" @class="btn btn-primary" @action={{action "submit"}} @disabled={{this.submitDisabled}} @label="admin.watched_words.form.add" />
 
 {{#if this.showMessage}}
   <span class="success-message">{{this.message}}</span>

app/assets/javascripts/discourse/tests/acceptance/admin-watched-words-test.js

@@ -75,11 +75,21 @@ acceptance("Admin - Watched Words", function (needs) {
 
   test("add case-sensitive words", async function (assert) {
     await visit("/admin/customize/watched_words/action/block");
-
+    const submitButton = query(".watched-word-form button");
+    assert.strictEqual(
+      submitButton.disabled,
+      true,
+      "Add button is disabled by default"
+    );
     await click(".show-words-checkbox");
     await fillIn(".watched-word-form input", "Discourse");
     await click(".case-sensitivity-checkbox");
-    await click(".watched-word-form button");
+    assert.strictEqual(
+      submitButton.disabled,
+      false,
+      "Add button should no longer be disabled after input is filled"
+    );
+    await click(submitButton);
 
     assert
       .dom(".watched-words-list .watched-word")
@@ -87,7 +97,7 @@ acceptance("Admin - Watched Words", function (needs) {
 
     await fillIn(".watched-word-form input", "discourse");
     await click(".case-sensitivity-checkbox");
-    await click(".watched-word-form button");
+    await click(submitButton);
 
     assert
       .dom(".watched-words-list .watched-word")