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.

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));
   },

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}}

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);
+    });
+  });
+
+  needs.hooks.beforeEach(() => {
+    updateCurrentUser({ moderator: true });
   });
 
   test("the slow mode dialog loads settings of currently enabled slow mode ", async function (assert) {
-    updateCurrentUser({ moderator: true });
-    await visit("/t/slow-mode-testing/130");
+    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"
+    );
+  });
 });

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:"