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

* Add RA for the pinning message list * Update RoomSummaryCard-test.tsx snapshot * Update RA labels
element-hq · Sep 18, 2024 · 13e67ae · 13e67ae
1 parent 1058af6
commit 13e67ae
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 142 deletions.
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/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,16 +381,25 @@ const RoomSummaryCard: React.FC<IProps> = ({
 
                 {!isVideoRoom && (
                     <>
-                        <MenuItem
-                            Icon={PinIcon}
-                            label={_t("right_panel|pinned_messages_button")}
-                            onSelect={onRoomPinsClick}
+                        <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"
                         >
-                            <Text as="span" size="sm">
-                                {pinCount}
-                            </Text>
-                        </MenuItem>
-
+                            <div>
+                                <MenuItem
+                                    Icon={PinIcon}
+                                    label={_t("right_panel|pinned_messages_button")}
+                                    onSelect={onRoomPinsClick}
+                                >
+                                    <Text as="span" size="sm">
+                                        {pinCount}
+                                    </Text>
+                                </MenuItem>
+                            </div>
+                        </ReleaseAnnouncement>
                         <MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} />
                     </>
                 )}

diff --git a/src/i18n/strings/en_EN.json b/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": {

diff --git a/src/stores/ReleaseAnnouncementStore.ts b/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.
  */

diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
@@ -186,50 +186,55 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           data-orientation="horizontal"
           role="separator"
         />
-        <button
-          class="_item_1gwvj_17 _interactive_1gwvj_36"
-          data-kind="primary"
-          role="menuitem"
+        <div
+          aria-expanded="false"
+          aria-haspopup="dialog"
         >
-          <svg
-            aria-hidden="true"
-            class="_icon_1gwvj_44"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857H6.119ZM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744V4Z"
-              fill-rule="evenodd"
-            />
-          </svg>
-          <span
-            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
-          >
-            Pinned messages
-          </span>
-          <svg
-            aria-hidden="true"
-            class="_nav-hint_1gwvj_60"
-            fill="currentColor"
-            height="24"
-            viewBox="8 0 8 24"
-            width="8"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
-            />
-          </svg>
-          <span
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
-          >
-            0
-          </span>
-        </button>
+          <button
+            class="_item_1gwvj_17 _interactive_1gwvj_36"
+            data-kind="primary"
+            role="menuitem"
+          >
+            <svg
+              aria-hidden="true"
+              class="_icon_1gwvj_44"
+              fill="currentColor"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857H6.119ZM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744V4Z"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+            >
+              Pinned messages
+            </span>
+            <svg
+              aria-hidden="true"
+              class="_nav-hint_1gwvj_60"
+              fill="currentColor"
+              height="24"
+              viewBox="8 0 8 24"
+              width="8"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+              />
+            </svg>
+            <span
+              class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+            >
+              0
+            </span>
+          </button>
+        </div>
         <button
           class="_item_1gwvj_17 _interactive_1gwvj_36"
           data-kind="primary"
@@ -628,50 +633,55 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           data-orientation="horizontal"
           role="separator"
         />
-        <button
-          class="_item_1gwvj_17 _interactive_1gwvj_36"
-          data-kind="primary"
-          role="menuitem"
+        <div
+          aria-expanded="false"
+          aria-haspopup="dialog"
         >
-          <svg
-            aria-hidden="true"
-            class="_icon_1gwvj_44"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857H6.119ZM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744V4Z"
-              fill-rule="evenodd"
-            />
-          </svg>
-          <span
-            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
-          >
-            Pinned messages
-          </span>
-          <svg
-            aria-hidden="true"
-            class="_nav-hint_1gwvj_60"
-            fill="currentColor"
-            height="24"
-            viewBox="8 0 8 24"
-            width="8"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
-            />
-          </svg>
-          <span
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
-          >
-            0
-          </span>
-        </button>
+          <button
+            class="_item_1gwvj_17 _interactive_1gwvj_36"
+            data-kind="primary"
+            role="menuitem"
+          >
+            <svg
+              aria-hidden="true"
+              class="_icon_1gwvj_44"
+              fill="currentColor"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857H6.119ZM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744V4Z"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+            >
+              Pinned messages
+            </span>
+            <svg
+              aria-hidden="true"
+              class="_nav-hint_1gwvj_60"
+              fill="currentColor"
+              height="24"
+              viewBox="8 0 8 24"
+              width="8"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+              />
+            </svg>
+            <span
+              class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+            >
+              0
+            </span>
+          </button>
+        </div>
         <button
           class="_item_1gwvj_17 _interactive_1gwvj_36"
           data-kind="primary"
@@ -1097,50 +1107,55 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           data-orientation="horizontal"
           role="separator"
         />
-        <button
-          class="_item_1gwvj_17 _interactive_1gwvj_36"
-          data-kind="primary"
-          role="menuitem"
+        <div
+          aria-expanded="false"
+          aria-haspopup="dialog"
         >
-          <svg
-            aria-hidden="true"
-            class="_icon_1gwvj_44"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857H6.119ZM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744V4Z"
-              fill-rule="evenodd"
-            />
-          </svg>
-          <span
-            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
-          >
-            Pinned messages
-          </span>
-          <svg
-            aria-hidden="true"
-            class="_nav-hint_1gwvj_60"
-            fill="currentColor"
-            height="24"
-            viewBox="8 0 8 24"
-            width="8"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
-            />
-          </svg>
-          <span
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
-          >
-            0
-          </span>
-        </button>
+          <button
+            class="_item_1gwvj_17 _interactive_1gwvj_36"
+            data-kind="primary"
+            role="menuitem"
+          >
+            <svg
+              aria-hidden="true"
+              class="_icon_1gwvj_44"
+              fill="currentColor"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857H6.119ZM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744V4Z"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+            >
+              Pinned messages
+            </span>
+            <svg
+              aria-hidden="true"
+              class="_nav-hint_1gwvj_60"
+              fill="currentColor"
+              height="24"
+              viewBox="8 0 8 24"
+              width="8"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+              />
+            </svg>
+            <span
+              class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+            >
+              0
+            </span>
+          </button>
+        </div>
         <button
           class="_item_1gwvj_17 _interactive_1gwvj_36"
           data-kind="primary"

diff --git a/test/stores/ReleaseAnnouncementStore-test.tsx b/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");
     });
 });