From f5544e36ed54b8282fc28ee143be2b56c6fd3eca Mon Sep 17 00:00:00 2001
From: Nikhil Maske <nikhilmaske2001@gmail.com>
Date: Wed, 3 Mar 2021 16:48:35 +0530
Subject: [PATCH] markdown: Add fa-clock icon before markdown timestamps.

These sigils will help make it easier to see that this is a special
Zulip syntax feature, not just something the other user typed, which
might help set the expectation that we're showing the time in the
user's timezone.

Tweaked by tabbott to improve variable/template naming.
---
 frontend_tests/node_tests/rendered_markdown.js | 9 ++++++---
 static/js/rendered_markdown.js                 | 6 +++++-
 static/templates/markdown_timestamp.hbs        | 2 ++
 3 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 static/templates/markdown_timestamp.hbs

diff --git a/frontend_tests/node_tests/rendered_markdown.js b/frontend_tests/node_tests/rendered_markdown.js
index 7706d8f31c..243ac4444e 100644
--- a/frontend_tests/node_tests/rendered_markdown.js
+++ b/frontend_tests/node_tests/rendered_markdown.js
@@ -178,7 +178,7 @@ run_test("timestamp", () => {
     rm.update_elements($content);
 
     // Final asserts
-    assert.equal($timestamp.text(), "Thu, Jan 1 1970, 12:00 AM");
+    assert.equal($timestamp.html(), '<i class="fa fa-clock-o"></i>\nThu, Jan 1 1970, 12:00 AM\n');
     assert.equal(
         $timestamp.attr("title"),
         "This time is in your timezone. Original text was 'never-been-set'.",
@@ -195,12 +195,15 @@ run_test("timestamp-twenty-four-hour-time", () => {
     // We will temporarily change the 24h setting for this test.
     with_field(page_params, "twenty_four_hour_time", true, () => {
         rm.update_elements($content);
-        assert.equal($timestamp.text(), "Wed, Jul 15 2020, 20:40");
+        assert.equal($timestamp.html(), '<i class="fa fa-clock-o"></i>\nWed, Jul 15 2020, 20:40\n');
     });
 
     with_field(page_params, "twenty_four_hour_time", false, () => {
         rm.update_elements($content);
-        assert.equal($timestamp.text(), "Wed, Jul 15 2020, 8:40 PM");
+        assert.equal(
+            $timestamp.html(),
+            '<i class="fa fa-clock-o"></i>\nWed, Jul 15 2020, 8:40 PM\n',
+        );
     });
 });
 
diff --git a/static/js/rendered_markdown.js b/static/js/rendered_markdown.js
index 883348ff91..09dff12641 100644
--- a/static/js/rendered_markdown.js
+++ b/static/js/rendered_markdown.js
@@ -3,6 +3,7 @@ import {parseISO, isValid} from "date-fns";
 import $ from "jquery";
 
 import copy_code_button from "../templates/copy_code_button.hbs";
+import render_markdown_timestamp from "../templates/markdown_timestamp.hbs";
 import view_code_in_playground from "../templates/view_code_in_playground.hbs";
 
 import * as people from "./people";
@@ -162,7 +163,10 @@ export const update_elements = (content) => {
         if (isValid(timestamp)) {
             const text = $(this).text();
             const rendered_time = timerender.render_markdown_timestamp(timestamp, text);
-            $(this).text(rendered_time.text);
+            const rendered_timestamp = render_markdown_timestamp({
+                text: rendered_time.text,
+            });
+            $(this).html(rendered_timestamp);
             $(this).attr("title", rendered_time.title);
         } else {
             // This shouldn't happen. If it does, we're very interested in debugging it.
diff --git a/static/templates/markdown_timestamp.hbs b/static/templates/markdown_timestamp.hbs
new file mode 100644
index 0000000000..a817b1191c
--- /dev/null
+++ b/static/templates/markdown_timestamp.hbs
@@ -0,0 +1,2 @@
+<i class="fa fa-clock-o"></i>
+{{ text }}