When a single message is unpinned, link to it

Signed-off-by: Paulo Pinto <paulo.pinto@automattic.com>

src/TextForEvent.tsx

@@ -428,16 +428,17 @@ const onPinnedMessagesClick = (): void => {
 function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string | JSX.Element | null {
     if (!SettingsStore.getValue("feature_pinning")) return null;
     const senderName = event.sender ? event.sender.name : event.getSender();
+    const roomId = event.getRoomId();
 
     const pinned = event.getContent().pinned ?? [];
     const previouslyPinned = event.getPrevContent().pinned ?? [];
     const newlyPinned = pinned.filter(item => previouslyPinned.indexOf(item) < 0);
+    const newlyUnpinned = previouslyPinned.filter(item => pinned.indexOf(item) < 0);
 
     if (newlyPinned.length === 1) {
         // A single message was pinned, include a link to that message.
         if (allowJSX) {
             const messageId = newlyPinned.pop();
-            const roomId = event.getRoomId();
 
             return () => (
                 <span>
@@ -464,6 +465,36 @@ function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string
         return () => _t("%(senderName)s pinned a message to this room. See all pinned messages.", { senderName });
     }
 
+    if (newlyUnpinned.length === 1) {
+        // A single message was unpinned, include a link to that message.
+        if (allowJSX) {
+            const messageId = newlyUnpinned.pop();
+
+            return () => (
+                <span>
+                    {
+                        _t(
+                            "%(senderName)s unpinned <a>a message</a> from this room. See all <b>pinned messages</b>.",
+                            { senderName },
+                            {
+                                "a": (sub) =>
+                                    <a onClick={(e) => onPinnedOrUnpinnedMessageClick(messageId, roomId)}>
+                                        { sub }
+                                    </a>,
+                                "b": (sub) =>
+                                    <a onClick={onPinnedMessagesClick}>
+                                        { sub }
+                                    </a>,
+                            },
+                        )
+                    }
+                </span>
+            );
+        }
+
+        return () => _t("%(senderName)s unpinned a message from this room. See all pinned messages.", { senderName });
+    }
+
     if (allowJSX) {
         return () => (
             <span>

src/i18n/strings/en_EN.json

@@ -546,6 +546,7 @@
     "%(senderName)s changed the power level of %(powerLevelDiffText)s.": "%(senderName)s changed the power level of %(powerLevelDiffText)s.",
     "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s": "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s",
     "%(senderName)s pinned <a>a message</a> to this room. See all <b>pinned messages</b>.": "%(senderName)s pinned <a>a message</a> to this room. See all <b>pinned messages</b>.",
+    "%(senderName)s unpinned <a>a message</a> from this room. See all <b>pinned messages</b>.": "%(senderName)s unpinned <a>a message</a> from this room. See all <b>pinned messages</b>.",
     "%(senderName)s changed the <a>pinned messages</a> for the room.": "%(senderName)s changed the <a>pinned messages</a> for the room.",
     "%(senderName)s changed the pinned messages for the room.": "%(senderName)s changed the pinned messages for the room.",
     "%(widgetName)s widget modified by %(senderName)s": "%(widgetName)s widget modified by %(senderName)s",

test/TextForEvent-test.ts

@@ -37,7 +37,7 @@ describe("TextForPinnedEvent - newly pinned message(s)", () => {
     });
 
     it("shows generic text when multiple messages were pinned", () => {
-        const event = mockPinnedEvent(['message-2', 'message-3'], ['message-1']);
+        const event = mockPinnedEvent(['message-1', 'message-2', 'message-3'], ['message-1']);
         expect(textForEvent(event)).toBe("@foo:example.com changed the pinned messages for the room.");
     });
 });
@@ -58,7 +58,48 @@ describe("TextForPinnedEvent - newly pinned message(s) (JSX)", () => {
     });
 
     it("shows generic text when multiple messages were pinned", () => {
-        const event = mockPinnedEvent(['message-2', 'message-3'], ['message-1']);
+        const event = mockPinnedEvent(['message-1', 'message-2', 'message-3'], ['message-1']);
+        const component = renderer.create(textForEvent(event, true));
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+});
+
+describe("TextForPinnedEvent - newly unpinned message(s)", () => {
+    SettingsStore.setValue("feature_pinning", null, SettingLevel.DEVICE, true);
+
+    it("mentions message when a single message was unpinned, with a single message previously pinned", () => {
+        const event = mockPinnedEvent([], ['message-1']);
+        expect(textForEvent(event)).toBe("@foo:example.com unpinned a message from this room. See all pinned messages.");
+    });
+
+    it("mentions message when a single message was unpinned, with multiple previously pinned messages", () => {
+        const event = mockPinnedEvent(['message-2'], ['message-1', 'message-2']);
+        expect(textForEvent(event)).toBe("@foo:example.com unpinned a message from this room. See all pinned messages.");
+    });
+
+    it("shows generic text when multiple messages were unpinned", () => {
+        const event = mockPinnedEvent(['message-3'], ['message-1', 'message-2', 'message-3']);
+        expect(textForEvent(event)).toBe("@foo:example.com changed the pinned messages for the room.");
+    });
+});
+
+describe("TextForPinnedEvent - newly unpinned message(s) (JSX)", () => {
+    SettingsStore.setValue("feature_pinning", null, SettingLevel.DEVICE, true);
+
+    it("mentions message when a single message was unpinned, with a single message previously pinned", () => {
+        const event = mockPinnedEvent([], ['message-1']);
+        const component = renderer.create(textForEvent(event, true));
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("mentions message when a single message was unpinned, with multiple previously pinned messages", () => {
+        const event = mockPinnedEvent(['message-2'], ['message-1', 'message-2']);
+        const component = renderer.create(textForEvent(event, true));
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("shows generic text when multiple messages were unpinned", () => {
+        const event = mockPinnedEvent(['message-3'], ['message-1', 'message-2', 'message-3']);
         const component = renderer.create(textForEvent(event, true));
         expect(component.toJSON()).toMatchSnapshot();
     });

test/__snapshots__/TextForEvent-test.ts.snap

@@ -55,3 +55,59 @@ exports[`TextForPinnedEvent - newly pinned message(s) (JSX) shows generic text w
   </span>
 </span>
 `;
+
+exports[`TextForPinnedEvent - newly unpinned message(s) (JSX) mentions message when a single message was unpinned, with a single message previously pinned 1`] = `
+<span>
+  <span>
+    @foo:example.com unpinned 
+    <a
+      onClick={[Function]}
+    >
+      a message
+    </a>
+     from this room. See all 
+    <a
+      onClick={[Function]}
+    >
+      pinned messages
+    </a>
+    .
+  </span>
+</span>
+`;
+
+exports[`TextForPinnedEvent - newly unpinned message(s) (JSX) mentions message when a single message was unpinned, with multiple previously pinned messages 1`] = `
+<span>
+  <span>
+    @foo:example.com unpinned 
+    <a
+      onClick={[Function]}
+    >
+      a message
+    </a>
+     from this room. See all 
+    <a
+      onClick={[Function]}
+    >
+      pinned messages
+    </a>
+    .
+  </span>
+</span>
+`;
+
+exports[`TextForPinnedEvent - newly unpinned message(s) (JSX) shows generic text when multiple messages were unpinned 1`] = `
+<span>
+  <span>
+    @foo:example.com changed the 
+    <a
+      onClick={[Function]}
+    >
+       
+      pinned messages
+       
+    </a>
+     for the room.
+  </span>
+</span>
+`;