From 3bab7a44d4e0abbeca381f956d9a1d131ea2b847 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Tue, 8 Nov 2022 15:38:11 -0800
Subject: [PATCH] FIX: Watched words submit button should be disabled by
 default (#18947)

---
 .../admin/addon/components/watched-word-form.js  |  4 ++--
 .../templates/components/watched-word-form.hbs   |  2 +-
 .../tests/acceptance/admin-watched-words-test.js | 16 +++++++++++++---
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/watched-word-form.js b/app/assets/javascripts/admin/addon/components/watched-word-form.js
index 1d6ba8ccba..f1b3138a78 100644
--- a/app/assets/javascripts/admin/addon/components/watched-word-form.js
+++ b/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"),
diff --git a/app/assets/javascripts/admin/addon/templates/components/watched-word-form.hbs b/app/assets/javascripts/admin/addon/templates/components/watched-word-form.hbs
index ef56c81a54..a971c2568e 100644
--- a/app/assets/javascripts/admin/addon/templates/components/watched-word-form.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/tests/acceptance/admin-watched-words-test.js b/app/assets/javascripts/discourse/tests/acceptance/admin-watched-words-test.js
index 37cb1c8797..532e79904b 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/admin-watched-words-test.js
+++ b/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")