Mark as Unread (#12254)

* Support the mark as unread flag

* Add mark as unread menu option

and make clering notifications also clear the unread flag

* Mark as read on viewing room

* Tests

* Remove random import

* Don't show mark as unread for historical rooms

* Fix tests & add test for menu option

* Test RoomNotificationState updates on unread flag change

* Test it doesn't update on other room account data

* New icon for mark as unread

* Add analytics events for mark as (un)read

* Bump to new analytics-events package

* Read from both stable & unstable prefixes

* Cast to boolean before checking

to avoid setting state unnecessarily

* Typo

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Doc external interface (and the rest at the same time)

* Doc & rename unread market set function

* Doc const exports

* Remove listener on destroy

* Add playwright test

* Clearer language, hopefully

* Move comment

* Add reference to the MSC

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Expand on function doc

* Remove empty beforeEach

* Rejig badge logic a little and add tests

* Fix basdges to not display dots in room sublists again

and hopefully rename the forceDot option to something that better
indicates what it does, and add tests.

* Remove duplicate license header (?)

* Missing word (several times...)

* Incorporate PR suggestion on badge type switch

* Better description in doc comment

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Update other doc comments in the same way

* Remove duplicate quote

* Use quotes consistently

* Better test name

* c+p fail

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

test/components/views/context_menus/RoomGeneralContextMenu-test.tsx

@@ -140,10 +140,28 @@ describe("RoomGeneralContextMenu", () => {
         const markAsReadBtn = getByLabelText(container, "Mark as read");
         fireEvent.click(markAsReadBtn);
 
+        await new Promise(setImmediate);
+
         expect(mockClient.sendReadReceipt).toHaveBeenCalledWith(event, ReceiptType.Read, true);
         expect(onFinished).toHaveBeenCalled();
     });
 
+    it("marks the room as unread", async () => {
+        room.updateMyMembership("join");
+
+        const { container } = getComponent({});
+
+        const markAsUnreadBtn = getByLabelText(container, "Mark as unread");
+        fireEvent.click(markAsUnreadBtn);
+
+        await new Promise(setImmediate);
+
+        expect(mockClient.setRoomAccountData).toHaveBeenCalledWith(ROOM_ID, "com.famedly.marked_unread", {
+            unread: true,
+        });
+        expect(onFinished).toHaveBeenCalled();
+    });
+
     it("when developer mode is disabled, it should not render the developer tools option", () => {
         getComponent();
         expect(screen.queryByText("Developer tools")).not.toBeInTheDocument();

test/components/views/rooms/NotificationBadge/NotificationBadge-test.tsx

@@ -20,8 +20,41 @@ import React from "react";
 import { StatelessNotificationBadge } from "../../../../../src/components/views/rooms/NotificationBadge/StatelessNotificationBadge";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { NotificationLevel } from "../../../../../src/stores/notifications/NotificationLevel";
+import NotificationBadge from "../../../../../src/components/views/rooms/NotificationBadge";
+import { NotificationState } from "../../../../../src/stores/notifications/NotificationState";
+
+class DummyNotificationState extends NotificationState {
+    constructor(level: NotificationLevel) {
+        super();
+        this._level = level;
+    }
+}
 
 describe("NotificationBadge", () => {
+    it("shows a dot if the level is activity", () => {
+        const notif = new DummyNotificationState(NotificationLevel.Activity);
+
+        const { container } = render(<NotificationBadge roomId="!foo:bar" notification={notif} />);
+        expect(container.querySelector(".mx_NotificationBadge_dot")).toBeInTheDocument();
+        expect(container.querySelector(".mx_NotificationBadge")).toBeInTheDocument();
+    });
+
+    it("does not show a dot if the level is activity and hideIfDot is true", () => {
+        const notif = new DummyNotificationState(NotificationLevel.Activity);
+
+        const { container } = render(<NotificationBadge roomId="!foo:bar" notification={notif} hideIfDot={true} />);
+        expect(container.querySelector(".mx_NotificationBadge_dot")).not.toBeInTheDocument();
+        expect(container.querySelector(".mx_NotificationBadge")).not.toBeInTheDocument();
+    });
+
+    it("still shows an empty badge if hideIfDot us true", () => {
+        const notif = new DummyNotificationState(NotificationLevel.Notification);
+
+        const { container } = render(<NotificationBadge roomId="!foo:bar" notification={notif} hideIfDot={true} />);
+        expect(container.querySelector(".mx_NotificationBadge_dot")).not.toBeInTheDocument();
+        expect(container.querySelector(".mx_NotificationBadge")).toBeInTheDocument();
+    });
+
     describe("StatelessNotificationBadge", () => {
         it("lets you click it", () => {
             const cb = jest.fn();

test/components/views/rooms/NotificationBadge/StatelessNotificationBadge-test.tsx

@@ -36,6 +36,13 @@ describe("StatelessNotificationBadge", () => {
         expect(container.querySelector(".mx_NotificationBadge_knocked")).toBeInTheDocument();
     });
 
+    it("has dot style for activity", () => {
+        const { container } = render(
+            <StatelessNotificationBadge symbol={null} count={3} level={NotificationLevel.Activity} />,
+        );
+        expect(container.querySelector(".mx_NotificationBadge_dot")).toBeInTheDocument();
+    });
+
     it("has badge style for notification", () => {
         const { container } = render(
             <StatelessNotificationBadge symbol={null} count={3} level={NotificationLevel.Notification} />,