UX: show Update button instead of Enable button when slow mode is already enabled (#13077)

UX: show Update button instead of Enable button when slow mode is already enabled (#13077)

When slow mode is enabled it’s possible to open the slow mode dialog again to disable it or to update slow mode settings. The problem is that in this case, the button for saving still has the label “Enable” which is confusing.

This changes the text on the button from “Enable” to “Update” when slow mode is already enabled.

diff --git a/app/assets/javascripts/discourse/app/controllers/edit-slow-mode.js b/app/assets/javascripts/discourse/app/controllers/edit-slow-mode.js
index f06e9ce..254f65a 100644
--- a/app/assets/javascripts/discourse/app/controllers/edit-slow-mode.js
+++ b/app/assets/javascripts/discourse/app/controllers/edit-slow-mode.js
@@ -95,6 +95,18 @@ export default Controller.extend(ModalFunctionality, {
     return saveDisabled || !durationIsSet || !enabledUntil;
   },
 
+  @discourseComputed("model.slow_mode_seconds")
+  slowModeEnabled(slowModeSeconds) {
+    return slowModeSeconds && slowModeSeconds !== 0;
+  },
+
+  @discourseComputed("slowModeEnabled")
+  saveButtonLabel(slowModeEnabled) {
+    return slowModeEnabled
+      ? "topic.slow_mode_update.update"
+      : "topic.slow_mode_update.enable";
+  },
+
   _setFromSeconds(seconds) {
     this.setProperties(fromSeconds(seconds));
   },
diff --git a/app/assets/javascripts/discourse/app/templates/modal/edit-slow-mode.hbs b/app/assets/javascripts/discourse/app/templates/modal/edit-slow-mode.hbs
index 8b6dbae..824dd2f 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/edit-slow-mode.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/edit-slow-mode.hbs
@@ -43,7 +43,7 @@
   {{d-button class="btn-primary"
       disabled=submitDisabled
       icon="hourglass-start"
-      label="topic.slow_mode_update.save"
+      label=saveButtonLabel
       action=(action "enableSlowMode")}}
 
   {{conditional-loading-spinner size="small" condition=loading}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/topic-slow-mode-test.js b/app/assets/javascripts/discourse/tests/acceptance/topic-slow-mode-test.js
index 3324d7b..b752e38 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/topic-slow-mode-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/topic-slow-mode-test.js
@@ -13,18 +13,28 @@ import topicFixtures from "discourse/tests/fixtures/topic";
 acceptance("Topic - Slow Mode - enabled", function (needs) {
   needs.user();
   needs.pretender((server, helper) => {
-    server.get("/t/130.json", () => {
+    server.get("/t/1.json", () => {
       const json = cloneJSON(topicFixtures["/t/130.json"]);
       json.slow_mode_seconds = 600;
       json.slow_mode_enabled_until = "2040-01-01T04:00:00.000Z";
 
       return helper.response(json);
     });
+    server.get("/t/2.json", () => {
+      const json = cloneJSON(topicFixtures["/t/130.json"]);
+      json.slow_mode_seconds = 0;
+      json.slow_mode_enabled_until = null;
+
+      return helper.response(json);
+    });
   });
 
-  test("the slow mode dialog loads settings of currently enabled slow mode ", async function (assert) {
+  needs.hooks.beforeEach(() => {
     updateCurrentUser({ moderator: true });
-    await visit("/t/slow-mode-testing/130");
+  });
+
+  test("the slow mode dialog loads settings of currently enabled slow mode ", async function (assert) {
+    await visit("/t/a-topic-with-enabled-slow-mode/1");
     await click(".toggle-admin-menu");
     await click(".topic-admin-slow-mode button");
 
@@ -55,4 +65,28 @@ acceptance("Topic - Slow Mode - enabled", function (needs) {
     assert.ok(exists("input.date-picker"), "date picker is rendered");
     assert.ok(exists("input.time-input"), "time picker is rendered");
   });
+
+  test("'Enable' button changes to 'Update' button when slow mode is enabled", async function (assert) {
+    await visit("/t/a-topic-with-disabled-slow-mode/2");
+    await click(".toggle-admin-menu");
+    await click(".topic-admin-slow-mode button");
+    await click(".future-date-input-selector-header");
+
+    assert.equal(
+      query("div.modal-footer button.btn-primary span").innerText,
+      I18n.t("topic.slow_mode_update.enable"),
+      "shows 'Enable' button when slow mode is disabled"
+    );
+
+    await visit("/t/a-topic-with-enabled-slow-mode/1");
+    await click(".toggle-admin-menu");
+    await click(".topic-admin-slow-mode button");
+    await click(".future-date-input-selector-header");
+
+    assert.equal(
+      query("div.modal-footer button.btn-primary span").innerText,
+      I18n.t("topic.slow_mode_update.update"),
+      "shows 'Update' button when slow mode is enabled"
+    );
+  });
 });
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 6f95604..6a4e859 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -2483,7 +2483,8 @@ en:
         title: "Slow Mode"
         select: "Users may only post in this topic once every:"
         description: "To promote thoughtful discussion in fast moving or contentious discussions, users must wait before posting again in this topic."
-        save: "Enable"
+        enable: "Enable"
+        update: "Update"
         enabled_until: "Enabled until:"
         remove: "Disable"
         hours: "Hours:"

GitHub sha: f21d50eb

This commit appears in #13077 which was approved by ZogStriP. It was merged by AndrewPrigorshnev.