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 { useTransition } from "../../../hooks/useTransition";
import { useIsVideoRoom } from "../../../utils/video-rooms"; import { useIsVideoRoom } from "../../../utils/video-rooms";
import { usePinnedEvents } from "../../../hooks/usePinnedEvents"; import { usePinnedEvents } from "../../../hooks/usePinnedEvents";
import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement.tsx";
interface IProps { interface IProps {
room: Room; room: Room;
@ -380,16 +381,25 @@ const RoomSummaryCard: React.FC<IProps> = ({
{!isVideoRoom && ( {!isVideoRoom && (
<> <>
<MenuItem <ReleaseAnnouncement
Icon={PinIcon} feature="pinningMessageList"
label={_t("right_panel|pinned_messages_button")} header={_t("right_panel|pinned_messages|release_announcement|title")}
onSelect={onRoomPinsClick} 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"> <div>
{pinCount} <MenuItem
</Text> Icon={PinIcon}
</MenuItem> 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} /> <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" "other": "You can only pin up to %(count)s widgets"
}, },
"menu": "Open menu", "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>", "reply_thread": "Reply to a <link>thread message</link>",
"title": "Pinned messages", "title": "Pinned messages",
"unpin_all": { "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. * 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. * 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" data-orientation="horizontal"
role="separator" role="separator"
/> />
<button <div
class="_item_1gwvj_17 _interactive_1gwvj_36" aria-expanded="false"
data-kind="primary" aria-haspopup="dialog"
role="menuitem"
> >
<svg <button
aria-hidden="true" class="_item_1gwvj_17 _interactive_1gwvj_36"
class="_icon_1gwvj_44" data-kind="primary"
fill="currentColor" role="menuitem"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
> >
<path <svg
clip-rule="evenodd" aria-hidden="true"
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" class="_icon_1gwvj_44"
fill-rule="evenodd" fill="currentColor"
/> height="24"
</svg> viewBox="0 0 24 24"
<span width="24"
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" xmlns="http://www.w3.org/2000/svg"
> >
Pinned messages <path
</span> clip-rule="evenodd"
<svg 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"
aria-hidden="true" fill-rule="evenodd"
class="_nav-hint_1gwvj_60" />
fill="currentColor" </svg>
height="24" <span
viewBox="8 0 8 24" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
width="8" >
xmlns="http://www.w3.org/2000/svg" Pinned messages
> </span>
<path <svg
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" aria-hidden="true"
/> class="_nav-hint_1gwvj_60"
</svg> fill="currentColor"
<span height="24"
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40" viewBox="8 0 8 24"
> width="8"
0 xmlns="http://www.w3.org/2000/svg"
</span> >
</button> <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 <button
class="_item_1gwvj_17 _interactive_1gwvj_36" class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary" data-kind="primary"
@ -628,50 +633,55 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
data-orientation="horizontal" data-orientation="horizontal"
role="separator" role="separator"
/> />
<button <div
class="_item_1gwvj_17 _interactive_1gwvj_36" aria-expanded="false"
data-kind="primary" aria-haspopup="dialog"
role="menuitem"
> >
<svg <button
aria-hidden="true" class="_item_1gwvj_17 _interactive_1gwvj_36"
class="_icon_1gwvj_44" data-kind="primary"
fill="currentColor" role="menuitem"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
> >
<path <svg
clip-rule="evenodd" aria-hidden="true"
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" class="_icon_1gwvj_44"
fill-rule="evenodd" fill="currentColor"
/> height="24"
</svg> viewBox="0 0 24 24"
<span width="24"
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" xmlns="http://www.w3.org/2000/svg"
> >
Pinned messages <path
</span> clip-rule="evenodd"
<svg 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"
aria-hidden="true" fill-rule="evenodd"
class="_nav-hint_1gwvj_60" />
fill="currentColor" </svg>
height="24" <span
viewBox="8 0 8 24" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
width="8" >
xmlns="http://www.w3.org/2000/svg" Pinned messages
> </span>
<path <svg
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" aria-hidden="true"
/> class="_nav-hint_1gwvj_60"
</svg> fill="currentColor"
<span height="24"
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40" viewBox="8 0 8 24"
> width="8"
0 xmlns="http://www.w3.org/2000/svg"
</span> >
</button> <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 <button
class="_item_1gwvj_17 _interactive_1gwvj_36" class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary" data-kind="primary"
@ -1097,50 +1107,55 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
data-orientation="horizontal" data-orientation="horizontal"
role="separator" role="separator"
/> />
<button <div
class="_item_1gwvj_17 _interactive_1gwvj_36" aria-expanded="false"
data-kind="primary" aria-haspopup="dialog"
role="menuitem"
> >
<svg <button
aria-hidden="true" class="_item_1gwvj_17 _interactive_1gwvj_36"
class="_icon_1gwvj_44" data-kind="primary"
fill="currentColor" role="menuitem"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
> >
<path <svg
clip-rule="evenodd" aria-hidden="true"
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" class="_icon_1gwvj_44"
fill-rule="evenodd" fill="currentColor"
/> height="24"
</svg> viewBox="0 0 24 24"
<span width="24"
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" xmlns="http://www.w3.org/2000/svg"
> >
Pinned messages <path
</span> clip-rule="evenodd"
<svg 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"
aria-hidden="true" fill-rule="evenodd"
class="_nav-hint_1gwvj_60" />
fill="currentColor" </svg>
height="24" <span
viewBox="8 0 8 24" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
width="8" >
xmlns="http://www.w3.org/2000/svg" Pinned messages
> </span>
<path <svg
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" aria-hidden="true"
/> class="_nav-hint_1gwvj_60"
</svg> fill="currentColor"
<span height="24"
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40" viewBox="8 0 8 24"
> width="8"
0 xmlns="http://www.w3.org/2000/svg"
</span> >
</button> <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 <button
class="_item_1gwvj_17 _interactive_1gwvj_36" class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary" data-kind="primary"

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

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