Add Release announcement for the pinning message list (#46)

* Add RA for the pinning message list

* Update RoomSummaryCard-test.tsx snapshot

* Update RA labels

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -72,6 +72,7 @@ import { Key } from "../../../Keyboard";
 import { useTransition } from "../../../hooks/useTransition";
 import { useIsVideoRoom } from "../../../utils/video-rooms";
 import { usePinnedEvents } from "../../../hooks/usePinnedEvents";
+import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement.tsx";
 
 interface IProps {
     room: Room;
@@ -380,6 +381,14 @@ const RoomSummaryCard: React.FC<IProps> = ({
 
                 {!isVideoRoom && (
                     <>
+                        <ReleaseAnnouncement
+                            feature="pinningMessageList"
+                            header={_t("right_panel|pinned_messages|release_announcement|title")}
+                            description={_t("right_panel|pinned_messages|release_announcement|description")}
+                            closeLabel={_t("right_panel|pinned_messages|release_announcement|close")}
+                            placement="top"
+                        >
+                            <div>
                                 <MenuItem
                                     Icon={PinIcon}
                                     label={_t("right_panel|pinned_messages_button")}
@@ -389,7 +398,8 @@ const RoomSummaryCard: React.FC<IProps> = ({
                                         {pinCount}
                                     </Text>
                                 </MenuItem>
-
+                            </div>
+                        </ReleaseAnnouncement>
                         <MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} />
                     </>
                 )}

src/i18n/strings/en_EN.json

@@ -1853,6 +1853,11 @@
                 "other": "You can only pin up to %(count)s widgets"
             },
             "menu": "Open menu",
+            "release_announcement": {
+                "close": "Ok",
+                "description": "Find all pinned messages here. Rollover any message and select “Pin” to add it.",
+                "title": "All new pinned messages"
+            },
             "reply_thread": "Reply to a <link>thread message</link>",
             "title": "Pinned messages",
             "unpin_all": {

src/stores/ReleaseAnnouncementStore.ts

@@ -17,7 +17,7 @@ import { Features } from "../settings/Settings";
 /**
  * The features are shown in the array order.
  */
-const FEATURES = ["threadsActivityCentre"] as const;
+const FEATURES = ["threadsActivityCentre", "pinningMessageList"] as const;
 /**
  * All the features that can be shown in the release announcements.
  */

test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

@@ -186,6 +186,10 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           data-orientation="horizontal"
           role="separator"
         />
+        <div
+          aria-expanded="false"
+          aria-haspopup="dialog"
+        >
           <button
             class="_item_1gwvj_17 _interactive_1gwvj_36"
             data-kind="primary"
@@ -230,6 +234,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               0
             </span>
           </button>
+        </div>
         <button
           class="_item_1gwvj_17 _interactive_1gwvj_36"
           data-kind="primary"
@@ -628,6 +633,10 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           data-orientation="horizontal"
           role="separator"
         />
+        <div
+          aria-expanded="false"
+          aria-haspopup="dialog"
+        >
           <button
             class="_item_1gwvj_17 _interactive_1gwvj_36"
             data-kind="primary"
@@ -672,6 +681,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
               0
             </span>
           </button>
+        </div>
         <button
           class="_item_1gwvj_17 _interactive_1gwvj_36"
           data-kind="primary"
@@ -1097,6 +1107,10 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           data-orientation="horizontal"
           role="separator"
         />
+        <div
+          aria-expanded="false"
+          aria-haspopup="dialog"
+        >
           <button
             class="_item_1gwvj_17 _interactive_1gwvj_36"
             data-kind="primary"
@@ -1141,6 +1155,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               0
             </span>
           </button>
+        </div>
         <button
           class="_item_1gwvj_17 _interactive_1gwvj_36"
           data-kind="primary"

test/stores/ReleaseAnnouncementStore-test.tsx

@@ -89,7 +89,13 @@ describe("ReleaseAnnouncementStore", () => {
         // Sanity check
         expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("threadsActivityCentre");
 
-        const promise = listenReleaseAnnouncementChanged();
+        let promise = listenReleaseAnnouncementChanged();
+        await releaseAnnouncementStore.nextReleaseAnnouncement();
+
+        expect(await promise).toBe("pinningMessageList");
+        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("pinningMessageList");
+
+        promise = listenReleaseAnnouncementChanged();
         await releaseAnnouncementStore.nextReleaseAnnouncement();
 
         expect(await promise).toBeNull();
@@ -108,7 +114,7 @@ describe("ReleaseAnnouncementStore", () => {
         const promise = listenReleaseAnnouncementChanged();
         await secondStore.nextReleaseAnnouncement();
 
-        expect(await promise).toBeNull();
-        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBeNull();
+        expect(await promise).toBe("pinningMessageList");
+        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("pinningMessageList");
     });
 });