FIX: Correctly update edit-topic-timer interval values (#27575)

app/assets/javascripts/discourse/app/components/edit-topic-timer-form.hbs

@@ -41,7 +41,7 @@
       </label>
       <RelativeTimePicker
         @onChange={{this.changeDuration}}
-        @durationMinutes={{readonly @topicTimer.duration_minutes}}
+        @durationMinutes={{@topicTimer.duration_minutes}}
       />
     </div>
   {{/if}}

app/assets/javascripts/discourse/app/components/edit-topic-timer-form.js

@@ -175,6 +175,6 @@ export default class EditTopicTimerForm extends Component {
 
   @action
   changeDuration(newDurationMins) {
-    this.args.topicTimer.set("duration_minutes", newDurationMins);
+    this.args.topicTimer.duration_minutes = newDurationMins;
   }
 }

app/assets/javascripts/discourse/app/components/relative-time-picker.gjs

@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { isBlank } from "@ember/utils";
@@ -6,6 +7,8 @@ import I18n from "discourse-i18n";
 import ComboBox from "select-kit/components/combo-box";
 
 export default class RelativeTimePicker extends Component {
+  @tracked _selectedInterval;
+
   _roundedDuration(duration) {
     const rounded = parseFloat(duration.toFixed(2));
 
@@ -22,7 +25,9 @@ export default class RelativeTimePicker extends Component {
   }
 
   get selectedInterval() {
-    if (this.args.durationMinutes !== undefined) {
+    if (this._selectedInterval) {
+      return this._selectedInterval;
+    } else if (this.args.durationMinutes !== undefined) {
       return this._intervalFromMinutes;
     } else {
       return this._intervalFromHours;
@@ -148,6 +153,7 @@ export default class RelativeTimePicker extends Component {
 
   @action
   onChangeInterval(interval) {
+    this._selectedInterval = interval;
     const minutes = this.calculateMinutes(this.duration, interval);
     this.args.onChange?.(minutes);
   }

app/assets/javascripts/discourse/tests/acceptance/topic-edit-timer-test.js

@@ -14,7 +14,6 @@ import { cloneJSON } from "discourse-common/lib/object";
 import I18n from "discourse-i18n";
 
 acceptance("Topic - Edit timer", function (needs) {
-  let clock = null;
   needs.user();
   needs.pretender((server, helper) => {
     server.post("/t/280/timer", () =>
@@ -35,14 +34,14 @@ acceptance("Topic - Edit timer", function (needs) {
     server.get("/t/54077.json", () => helper.response(topicResponse));
   });
 
-  needs.hooks.beforeEach(() => {
+  needs.hooks.beforeEach(function () {
-    const timezone = loggedInUser().user_option.timezone;
+    this.timezone = loggedInUser().user_option.timezone;
     const tuesday = "2100-06-15T08:00:00";
-    clock = fakeTime(tuesday, timezone, true);
+    this.clock = fakeTime(tuesday, this.timezone, true);
   });
 
-  needs.hooks.afterEach(() => {
+  needs.hooks.afterEach(function () {
-    clock.restore();
+    this.clock.restore();
   });
 
   test("autoclose - specific time", async function (assert) {
@@ -69,14 +68,14 @@ acceptance("Topic - Edit timer", function (needs) {
 
     assert
       .dom(".edit-topic-timer-modal .topic-timer-info")
-      .matchesText(/will automatically close in/g);
+      .matchesText(/will automatically close in/);
 
     await click("#tap_tile_custom");
     await fillIn(".tap-tile-date-input .date-picker", "2100-11-24");
 
     assert
       .dom(".edit-topic-timer-modal .topic-timer-info")
-      .matchesText(/will automatically close in/g);
+      .matchesText(/will automatically close in/);
 
     const timerType = selectKit(".select-kit.timer-type");
     await timerType.expand();
@@ -85,11 +84,34 @@ acceptance("Topic - Edit timer", function (needs) {
     const interval = selectKit(".select-kit.relative-time-intervals");
     await interval.expand();
     await interval.selectRowByValue("hours");
+    assert.strictEqual(interval.header().label(), "hours");
     await fillIn(".relative-time-duration", "2");
 
     assert
       .dom(".edit-topic-timer-modal .warning")
-      .matchesText(/last post in the topic is already/g);
+      .matchesText(
+        /last post in the topic is already/,
+        "shows the warning if the topic will be closed immediately"
+      );
+
+    const topic = topicFixtures["/t/54077.json"];
+    const lastPostIndex = topic.post_stream.posts.length - 1;
+    const time = topic.post_stream.posts[lastPostIndex].updated_at;
+    this.clock.restore();
+    this.clock = fakeTime(time, this.timezone, true);
+    await fillIn(".relative-time-duration", "6");
+
+    assert
+      .dom(".topic-timer-heading")
+      .hasText("This topic will close 6 hours after the last reply.");
+
+    await interval.expand();
+    await interval.selectRowByValue("days");
+
+    assert.strictEqual(interval.header().label(), "days");
+    assert
+      .dom(".topic-timer-heading")
+      .hasText("This topic will close 6 days after the last reply.");
   });
 
   test("close temporarily", async function (assert) {