UX: show close date on automatically closed polls

plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6

@@ -7,6 +7,7 @@ import { popupAjaxError } from 'discourse/lib/ajax-error';
 import evenRound from "discourse/plugins/poll/lib/even-round";
 import { avatarFor } from 'discourse/widgets/post';
 import round from "discourse/lib/round";
+import { relativeAge } from 'discourse/lib/formatter';
 
 function optionHtml(option) {
   return new RawHtml({ html: `<span>${option.html}</span>` });
@@ -353,8 +354,12 @@ createWidget('discourse-poll-info', {
 
       if (poll.close) {
         const closeDate = moment.utc(poll.close);
+        const title = closeDate.format("LLL");
         const timeLeft = moment().to(closeDate.local(), true);
-        result.push(new RawHtml({ html: `<span class="info-text" title="${closeDate.format("LLL")}">${I18n.t("poll.automatic_close.closes_in", { timeLeft })}</span>` }));
+
+        result.push(new RawHtml({
+          html: `<span class="info-text" title="${title}">${I18n.t("poll.automatic_close.closes_in", { timeLeft })}</span>`
+        }));
       }
     }
 
@@ -404,6 +409,16 @@ createWidget('discourse-poll-buttons', {
       }));
     }
 
+    if (attrs.isAutomaticallyClosed) {
+      const closeDate = moment.utc(poll.get("close"));
+      const title = closeDate.format("LLL");
+      const age = relativeAge(closeDate.toDate(), { addAgo: true });
+
+      results.push(new RawHtml({
+        html: `<span class="info-text" title="${title}">${I18n.t("poll.automatic_close.age", { age })}</span>`
+      }));
+    }
+
     if (this.currentUser &&
         (this.currentUser.get("id") === post.get('user_id') ||
          this.currentUser.get("staff")) &&

plugins/poll/assets/stylesheets/common/poll.scss

@@ -75,6 +75,10 @@ div.poll {
     button {
       float: none;
     }
+    .info-text {
+      margin: 0 5px;
+      color: $text-color;
+    }
   }
 
   .poll-voters-list {

plugins/poll/config/locales/client.en.yml

@@ -67,6 +67,7 @@ en:
 
       automatic_close:
         closes_in: "closes in <strong>%{timeLeft}</strong>"
+        age: "closed <strong>%{age}</strong>"
 
       error_while_toggling_status: "Sorry, there was an error toggling the status of this poll."
       error_while_casting_votes: "Sorry, there was an error casting your votes."