Display relative time in thread panel event tile (#7068)

* Null-guard for missing root event in thread panel

* Add formatRelativeTime date utility

* Display relative time format in thread panel event tiles

test/utils/DateUtils-test.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { formatSeconds } from "../../src/DateUtils";
+import { formatSeconds, formatRelativeTime } from "../../src/DateUtils";
 
 describe("formatSeconds", () => {
     it("correctly formats time with hours", () => {
@@ -29,3 +29,44 @@ describe("formatSeconds", () => {
         expect(formatSeconds((60 * 60 * 0) + (60 * 31) + (0))).toBe("31:00");
     });
 });
+
+describe("formatRelativeTime", () => {
+    let dateSpy;
+    beforeAll(() => {
+        dateSpy = jest
+            .spyOn(global.Date, 'now')
+            // Tuesday, 2 November 2021 11:18:03
+            .mockImplementation(() => 1635851883000);
+    });
+
+    afterAll(() => {
+        dateSpy.mockRestore();
+    });
+
+    it("returns hour format for events created less than 24 hours ago", () => {
+        const date = new Date(1635850883000);
+        expect(formatRelativeTime(date)).toBe("11:01");
+    });
+
+    it("honours the hour format setting", () => {
+        const date = new Date(1635850883000);
+        expect(formatRelativeTime(date)).toBe("11:01");
+        expect(formatRelativeTime(date, false)).toBe("11:01");
+        expect(formatRelativeTime(date, true)).toBe("11:01AM");
+    });
+
+    it("returns month and day for events created in the current year", () => {
+        const date = new Date(1632567741000);
+        expect(formatRelativeTime(date, true)).toBe("Sep 25");
+    });
+
+    it("does not return a leading 0 for single digit days", () => {
+        const date = new Date(1635764541000);
+        expect(formatRelativeTime(date, true)).toBe("Nov 1");
+    });
+
+    it("appends the year for events created in previous years", () => {
+        const date = new Date(1604142141000);
+        expect(formatRelativeTime(date, true)).toBe("Oct 31, 2020");
+    });
+});