Skip to content
This repository was archived by the owner on Oct 22, 2024. It is now read-only.

Commit 13e67ae

Browse files
floriandurosflorianduros
authored
Add Release announcement for the pinning message list (#46)
* Add RA for the pinning message list * Update RoomSummaryCard-test.tsx snapshot * Update RA labels
1 parent 1058af6 commit 13e67ae

File tree

5 files changed

+178
-142
lines changed

5 files changed

+178
-142
lines changed

‎src/components/views/right_panel/RoomSummaryCard.tsx‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ import { Key } from "../../../Keyboard";
7272
import { useTransition } from "../../../hooks/useTransition";
7373
import { useIsVideoRoom } from "../../../utils/video-rooms";
7474
import { usePinnedEvents } from "../../../hooks/usePinnedEvents";
75+
import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement.tsx";
7576

7677
interface IProps {
7778
room: Room;
@@ -380,16 +381,25 @@ const RoomSummaryCard: React.FC<IProps> = ({
380381

381382
{!isVideoRoom && (
382383
<>
383-
<MenuItem
384-
Icon={PinIcon}
385-
label={_t("right_panel|pinned_messages_button")}
386-
onSelect={onRoomPinsClick}
384+
<ReleaseAnnouncement
385+
feature="pinningMessageList"
386+
header={_t("right_panel|pinned_messages|release_announcement|title")}
387+
description={_t("right_panel|pinned_messages|release_announcement|description")}
388+
closeLabel={_t("right_panel|pinned_messages|release_announcement|close")}
389+
placement="top"
387390
>
388-
<Text as="span" size="sm">
389-
{pinCount}
390-
</Text>
391-
</MenuItem>
392-
391+
<div>
392+
<MenuItem
393+
Icon={PinIcon}
394+
label={_t("right_panel|pinned_messages_button")}
395+
onSelect={onRoomPinsClick}
396+
>
397+
<Text as="span" size="sm">
398+
{pinCount}
399+
</Text>
400+
</MenuItem>
401+
</div>
402+
</ReleaseAnnouncement>
393403
<MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} />
394404
</>
395405
)}

‎src/i18n/strings/en_EN.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1853,6 +1853,11 @@
18531853
"other": "You can only pin up to %(count)s widgets"
18541854
},
18551855
"menu": "Open menu",
1856+
"release_announcement": {
1857+
"close": "Ok",
1858+
"description": "Find all pinned messages here. Rollover any message and select “Pin” to add it.",
1859+
"title": "All new pinned messages"
1860+
},
18561861
"reply_thread": "Reply to a <link>thread message</link>",
18571862
"title": "Pinned messages",
18581863
"unpin_all": {

‎src/stores/ReleaseAnnouncementStore.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { Features } from "../settings/Settings";
1717
/**
1818
* The features are shown in the array order.
1919
*/
20-
const FEATURES = ["threadsActivityCentre"] as const;
20+
const FEATURES = ["threadsActivityCentre", "pinningMessageList"] as const;
2121
/**
2222
* All the features that can be shown in the release announcements.
2323
*/

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

Lines changed: 144 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -186,50 +186,55 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
186186
data-orientation="horizontal"
187187
role="separator"
188188
/>
189-
<button
190-
class="_item_1gwvj_17 _interactive_1gwvj_36"
191-
data-kind="primary"
192-
role="menuitem"
189+
<div
190+
aria-expanded="false"
191+
aria-haspopup="dialog"
193192
>
194-
<svg
195-
aria-hidden="true"
196-
class="_icon_1gwvj_44"
197-
fill="currentColor"
198-
height="24"
199-
viewBox="0 0 24 24"
200-
width="24"
201-
xmlns="http://www.w3.org/2000/svg"
202-
>
203-
<path
204-
clip-rule="evenodd"
205-
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"
206-
fill-rule="evenodd"
207-
/>
208-
</svg>
209-
<span
210-
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
211-
>
212-
Pinned messages
213-
</span>
214-
<svg
215-
aria-hidden="true"
216-
class="_nav-hint_1gwvj_60"
217-
fill="currentColor"
218-
height="24"
219-
viewBox="8 0 8 24"
220-
width="8"
221-
xmlns="http://www.w3.org/2000/svg"
222-
>
223-
<path
224-
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"
225-
/>
226-
</svg>
227-
<span
228-
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
229-
>
230-
0
231-
</span>
232-
</button>
193+
<button
194+
class="_item_1gwvj_17 _interactive_1gwvj_36"
195+
data-kind="primary"
196+
role="menuitem"
197+
>
198+
<svg
199+
aria-hidden="true"
200+
class="_icon_1gwvj_44"
201+
fill="currentColor"
202+
height="24"
203+
viewBox="0 0 24 24"
204+
width="24"
205+
xmlns="http://www.w3.org/2000/svg"
206+
>
207+
<path
208+
clip-rule="evenodd"
209+
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"
210+
fill-rule="evenodd"
211+
/>
212+
</svg>
213+
<span
214+
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
215+
>
216+
Pinned messages
217+
</span>
218+
<svg
219+
aria-hidden="true"
220+
class="_nav-hint_1gwvj_60"
221+
fill="currentColor"
222+
height="24"
223+
viewBox="8 0 8 24"
224+
width="8"
225+
xmlns="http://www.w3.org/2000/svg"
226+
>
227+
<path
228+
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"
229+
/>
230+
</svg>
231+
<span
232+
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
233+
>
234+
0
235+
</span>
236+
</button>
237+
</div>
233238
<button
234239
class="_item_1gwvj_17 _interactive_1gwvj_36"
235240
data-kind="primary"
@@ -628,50 +633,55 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
628633
data-orientation="horizontal"
629634
role="separator"
630635
/>
631-
<button
632-
class="_item_1gwvj_17 _interactive_1gwvj_36"
633-
data-kind="primary"
634-
role="menuitem"
636+
<div
637+
aria-expanded="false"
638+
aria-haspopup="dialog"
635639
>
636-
<svg
637-
aria-hidden="true"
638-
class="_icon_1gwvj_44"
639-
fill="currentColor"
640-
height="24"
641-
viewBox="0 0 24 24"
642-
width="24"
643-
xmlns="http://www.w3.org/2000/svg"
644-
>
645-
<path
646-
clip-rule="evenodd"
647-
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"
648-
fill-rule="evenodd"
649-
/>
650-
</svg>
651-
<span
652-
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
653-
>
654-
Pinned messages
655-
</span>
656-
<svg
657-
aria-hidden="true"
658-
class="_nav-hint_1gwvj_60"
659-
fill="currentColor"
660-
height="24"
661-
viewBox="8 0 8 24"
662-
width="8"
663-
xmlns="http://www.w3.org/2000/svg"
664-
>
665-
<path
666-
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"
667-
/>
668-
</svg>
669-
<span
670-
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
671-
>
672-
0
673-
</span>
674-
</button>
640+
<button
641+
class="_item_1gwvj_17 _interactive_1gwvj_36"
642+
data-kind="primary"
643+
role="menuitem"
644+
>
645+
<svg
646+
aria-hidden="true"
647+
class="_icon_1gwvj_44"
648+
fill="currentColor"
649+
height="24"
650+
viewBox="0 0 24 24"
651+
width="24"
652+
xmlns="http://www.w3.org/2000/svg"
653+
>
654+
<path
655+
clip-rule="evenodd"
656+
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"
657+
fill-rule="evenodd"
658+
/>
659+
</svg>
660+
<span
661+
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
662+
>
663+
Pinned messages
664+
</span>
665+
<svg
666+
aria-hidden="true"
667+
class="_nav-hint_1gwvj_60"
668+
fill="currentColor"
669+
height="24"
670+
viewBox="8 0 8 24"
671+
width="8"
672+
xmlns="http://www.w3.org/2000/svg"
673+
>
674+
<path
675+
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"
676+
/>
677+
</svg>
678+
<span
679+
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
680+
>
681+
0
682+
</span>
683+
</button>
684+
</div>
675685
<button
676686
class="_item_1gwvj_17 _interactive_1gwvj_36"
677687
data-kind="primary"
@@ -1097,50 +1107,55 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
10971107
data-orientation="horizontal"
10981108
role="separator"
10991109
/>
1100-
<button
1101-
class="_item_1gwvj_17 _interactive_1gwvj_36"
1102-
data-kind="primary"
1103-
role="menuitem"
1110+
<div
1111+
aria-expanded="false"
1112+
aria-haspopup="dialog"
11041113
>
1105-
<svg
1106-
aria-hidden="true"
1107-
class="_icon_1gwvj_44"
1108-
fill="currentColor"
1109-
height="24"
1110-
viewBox="0 0 24 24"
1111-
width="24"
1112-
xmlns="http://www.w3.org/2000/svg"
1113-
>
1114-
<path
1115-
clip-rule="evenodd"
1116-
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"
1117-
fill-rule="evenodd"
1118-
/>
1119-
</svg>
1120-
<span
1121-
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
1122-
>
1123-
Pinned messages
1124-
</span>
1125-
<svg
1126-
aria-hidden="true"
1127-
class="_nav-hint_1gwvj_60"
1128-
fill="currentColor"
1129-
height="24"
1130-
viewBox="8 0 8 24"
1131-
width="8"
1132-
xmlns="http://www.w3.org/2000/svg"
1133-
>
1134-
<path
1135-
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"
1136-
/>
1137-
</svg>
1138-
<span
1139-
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
1140-
>
1141-
0
1142-
</span>
1143-
</button>
1114+
<button
1115+
class="_item_1gwvj_17 _interactive_1gwvj_36"
1116+
data-kind="primary"
1117+
role="menuitem"
1118+
>
1119+
<svg
1120+
aria-hidden="true"
1121+
class="_icon_1gwvj_44"
1122+
fill="currentColor"
1123+
height="24"
1124+
viewBox="0 0 24 24"
1125+
width="24"
1126+
xmlns="http://www.w3.org/2000/svg"
1127+
>
1128+
<path
1129+
clip-rule="evenodd"
1130+
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"
1131+
fill-rule="evenodd"
1132+
/>
1133+
</svg>
1134+
<span
1135+
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
1136+
>
1137+
Pinned messages
1138+
</span>
1139+
<svg
1140+
aria-hidden="true"
1141+
class="_nav-hint_1gwvj_60"
1142+
fill="currentColor"
1143+
height="24"
1144+
viewBox="8 0 8 24"
1145+
width="8"
1146+
xmlns="http://www.w3.org/2000/svg"
1147+
>
1148+
<path
1149+
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"
1150+
/>
1151+
</svg>
1152+
<span
1153+
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
1154+
>
1155+
0
1156+
</span>
1157+
</button>
1158+
</div>
11441159
<button
11451160
class="_item_1gwvj_17 _interactive_1gwvj_36"
11461161
data-kind="primary"

‎test/stores/ReleaseAnnouncementStore-test.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,13 @@ describe("ReleaseAnnouncementStore", () => {
8989
// Sanity check
9090
expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("threadsActivityCentre");
9191

92-
const promise = listenReleaseAnnouncementChanged();
92+
let promise = listenReleaseAnnouncementChanged();
93+
await releaseAnnouncementStore.nextReleaseAnnouncement();
94+
95+
expect(await promise).toBe("pinningMessageList");
96+
expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("pinningMessageList");
97+
98+
promise = listenReleaseAnnouncementChanged();
9399
await releaseAnnouncementStore.nextReleaseAnnouncement();
94100

95101
expect(await promise).toBeNull();
@@ -108,7 +114,7 @@ describe("ReleaseAnnouncementStore", () => {
108114
const promise = listenReleaseAnnouncementChanged();
109115
await secondStore.nextReleaseAnnouncement();
110116

111-
expect(await promise).toBeNull();
112-
expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBeNull();
117+
expect(await promise).toBe("pinningMessageList");
118+
expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("pinningMessageList");
113119
});
114120
});

0 commit comments

Comments
 (0)