UX: new inline button to remove a topic timer (#7790)

app/assets/javascripts/discourse/components/topic-timer-info.js.es6

@@ -40,7 +40,7 @@ export default Ember.Component.extend(
         }
         let autoCloseHours = this.duration || 0;
 
-        buffer.push(`<h3>${iconHTML("far-clock")} `);
+        buffer.push(`<h3 class="topic-timer-heading">`);
 
         let options = {
           timeLeft: duration.humanize(true),
@@ -61,11 +61,17 @@ export default Ember.Component.extend(
         }
 
         buffer.push(
-          `<span title="${moment(this.executeAt).format("LLLL")}">${I18n.t(
-            this._noticeKey(),
-            options
-          )}</span>`
+          `<span title="${moment(this.executeAt).format("LLLL")}">${iconHTML(
+            "far-clock"
+          )} ${I18n.t(this._noticeKey(), options)}</span>`
         );
+        if (this.removeTopicTimer) {
+          buffer.push(
+            `<button class="btn topic-timer-remove no-text" title="${I18n.t(
+              "post.controls.remove_timer"
+            )}">${iconHTML("trash-alt")}</button>`
+          );
+        }
         buffer.push("</h3>");
 
         // TODO Sam: concerned this can cause a heavy rerender loop
@@ -79,7 +85,21 @@ export default Ember.Component.extend(
       }
     },
 
+    didInsertElement() {
+      this._super(...arguments);
+
+      if (this.removeTopicTimer) {
+        $(this.element).on(
+          "click.topic-timer-remove",
+          "button",
+          this.removeTopicTimer
+        );
+      }
+    },
+
     willDestroyElement() {
+      $(this.element).off("click.topic-timer-remove", this.removeTopicTimer);
+
       if (this._delayedRerender) {
         Ember.run.cancel(this._delayedRerender);
       }

app/assets/javascripts/discourse/controllers/topic.js.es6

@@ -17,6 +17,7 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 import { spinnerHTML } from "discourse/helpers/loading-spinner";
 import { userPath } from "discourse/lib/url";
 import showModal from "discourse/lib/show-modal";
+import TopicTimer from "discourse/models/topic-timer";
 
 let customPostMessageCallbacks = {};
 
@@ -1035,6 +1036,18 @@ export default Ember.Controller.extend(bufferedProperty("model"), {
 
     resetBumpDate() {
       this.model.resetBumpDate();
+    },
+
+    removeTopicTimer(statusType, topicTimer) {
+      TopicTimer.updateStatus(
+        this.get("model.id"),
+        null,
+        null,
+        statusType,
+        null
+      )
+        .then(() => this.set(`model.${topicTimer}`, Ember.Object.create({})))
+        .catch(error => popupAjaxError(error));
     }
   },
 

app/assets/javascripts/discourse/templates/topic.hbs

@@ -264,7 +264,8 @@
                     topicClosed=model.closed
                     statusType=model.private_topic_timer.status_type
                     executeAt=model.private_topic_timer.execute_at
-                    duration=model.private_topic_timer.duration}}
+                    duration=model.private_topic_timer.duration
+                    removeTopicTimer=(action "removeTopicTimer" model.private_topic_timer.status_type "private_topic_timer")}}
               {{/if}}
 
               {{topic-timer-info
@@ -273,7 +274,8 @@
                   executeAt=model.topic_timer.execute_at
                   basedOnLastPost=model.topic_timer.based_on_last_post
                   duration=model.topic_timer.duration
-                  categoryId=model.topic_timer.category_id}}
+                  categoryId=model.topic_timer.category_id
+                  removeTopicTimer=(action "removeTopicTimer" model.topic_timer.status_type "topic_timer")}}
 
               {{#if session.showSignupCta}}
                 {{! replace "Log In to Reply" with the infobox }}

app/assets/stylesheets/desktop/topic.scss

@@ -72,8 +72,17 @@
 .topic-status-info {
   border-top: 1px solid $primary-low;
   padding: 10px 0;
-  height: 20px;
   max-width: 758px;
+  .topic-timer-heading {
+    display: flex;
+    align-items: center;
+    margin: 0px;
+  }
+  .topic-timer-remove {
+    font-size: $font-down-2;
+    background: transparent;
+    margin-left: auto;
+  }
 }
 
 #topic-progress-wrapper {