PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
* Add RA for the pinning message list

* Update RoomSummaryCard-test.tsx snapshot

* Update RA labels
This commit is contained in:
Florian Duros 2024-09-18 11:26:17 +02:00 committed by GitHub
parent 1058af6add
commit 13e67ae0eb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 175 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/views/right_panel/RoomSummaryCard.tsx
View file

@ -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} />
</>
)}

5
src/i18n/strings/en_EN.json
View file

@ -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": {

2
src/stores/ReleaseAnnouncementStore.ts
View file

@ -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.
*/

267
test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
View file

@ -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"
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<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>
<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"
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<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>
<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"
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<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>
<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"

12
test/stores/ReleaseAnnouncementStore-test.tsx
View file

@ -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");
});
});