mirror of
https://github.com/element-hq/element-web
synced 2024-11-24 18:25:49 +03:00
Add Release announcement for the pinning message list (#46)
* Add RA for the pinning message list * Update RoomSummaryCard-test.tsx snapshot * Update RA labels
This commit is contained in:
Florian Duros
GitHub
parent
1058af6add
commit
13e67ae0eb
5 changed files with 175 additions and 139 deletions
|
|
@ -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} />
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue