Display pinned messages on a banner at the top of a room ()

* Move pinned message hooks to a dedicated file

* Add a banner at the top of a room to display the pinned messages

* Put the pinning banner behind labs pinning labs flag

* Add redacted event support

* Handle UTD in pinning message banner

* Add tests for redaction

* Make all the banner clickable

* Add tests for PinnedMessageBanner.tsx

* Add e2e tests for the pinned message banner

* Review changes
This commit is contained in:
Florian Duros 2024-08-29 16:26:10 +02:00 committed by GitHub
parent 8b2ded8a0e
commit d16ab09866
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 1130 additions and 180 deletions

View file

@ -168,9 +168,8 @@ export class Helpers {
/**
* Return the right panel
* @private
*/
private getRightPanel() {
public getRightPanel() {
return this.page.locator("#mx_RightPanel");
}
@ -183,7 +182,6 @@ export class Helpers {
await expect(rightPanel.getByRole("heading", { name: "Pinned messages" })).toHaveText(
`${messages.length} Pinned messages`,
);
await expect(rightPanel).toMatchScreenshot(`pinned-messages-list-messages-${messages.length}.png`);
const list = rightPanel.getByRole("list");
await expect(list.getByRole("listitem")).toHaveCount(messages.length);
@ -243,6 +241,36 @@ export class Helpers {
await item.getByRole("button").click();
await this.page.getByRole("menu", { name: "Open menu" }).getByRole("menuitem", { name: "Unpin" }).click();
}
/**
* Return the banner
* @private
*/
public getBanner() {
return this.page.getByTestId("pinned-message-banner");
}
/**
* Assert that the banner contains the given message
* @param msg
*/
async assertMessageInBanner(msg: string) {
await expect(this.getBanner().getByText(msg)).toBeVisible();
}
/**
* Return the view all button
*/
public getViewAllButton() {
return this.page.getByRole("button", { name: "View all" });
}
/**
* Return the close list button
*/
public getCloseListButton() {
return this.page.getByRole("button", { name: "Close list" });
}
}
export { expect };

View file

@ -48,6 +48,7 @@ test.describe("Pinned messages", () => {
await util.openRoomInfo();
await util.openPinnedMessagesList();
await util.assertPinnedMessagesList(["Msg1", "Msg2", "Msg4"]);
await expect(util.getRightPanel()).toMatchScreenshot(`pinned-messages-list-pin-3.png`);
});
test("should unpin one message", async ({ page, app, room1, util }) => {
@ -59,6 +60,7 @@ test.describe("Pinned messages", () => {
await util.openPinnedMessagesList();
await util.unpinMessageFromMessageList("Msg2");
await util.assertPinnedMessagesList(["Msg1", "Msg4"]);
await expect(util.getRightPanel()).toMatchScreenshot(`pinned-messages-list-unpin-2.png`);
await util.backPinnedMessagesList();
await util.assertPinnedCountInRoomInfo(2);
});
@ -87,4 +89,65 @@ test.describe("Pinned messages", () => {
await util.pinMessagesFromQuickActions(["Msg1"], true);
await util.assertPinnedCountInRoomInfo(0);
});
test("should display one message in the banner", async ({ page, app, room1, util }) => {
await util.goTo(room1);
await util.receiveMessages(room1, ["Msg1"]);
await util.pinMessages(["Msg1"]);
await util.assertMessageInBanner("Msg1");
await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-1-Msg1.png");
});
test("should display 2 messages in the banner", async ({ page, app, room1, util }) => {
await util.goTo(room1);
await util.receiveMessages(room1, ["Msg1", "Msg2"]);
await util.pinMessages(["Msg1", "Msg2"]);
await util.assertMessageInBanner("Msg1");
await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-2-Msg1.png");
await util.getBanner().click();
await util.assertMessageInBanner("Msg2");
await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-2-Msg2.png");
await util.getBanner().click();
await util.assertMessageInBanner("Msg1");
await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-2-Msg1.png");
});
test("should display 4 messages in the banner", async ({ page, app, room1, util }) => {
await util.goTo(room1);
await util.receiveMessages(room1, ["Msg1", "Msg2", "Msg3", "Msg4"]);
await util.pinMessages(["Msg1", "Msg2", "Msg3", "Msg4"]);
for (const msg of ["Msg1", "Msg4", "Msg3", "Msg2"]) {
await util.assertMessageInBanner(msg);
await expect(util.getBanner()).toMatchScreenshot(`pinned-message-banner-4-${msg}.png`);
await util.getBanner().click();
}
});
test("should open the pinned messages list from the banner", async ({ page, app, room1, util }) => {
await util.goTo(room1);
await util.receiveMessages(room1, ["Msg1", "Msg2"]);
await util.pinMessages(["Msg1", "Msg2"]);
await util.getViewAllButton().click();
await util.assertPinnedMessagesList(["Msg1", "Msg2"]);
await expect(util.getRightPanel()).toMatchScreenshot("pinned-message-banner-2.png");
await expect(util.getCloseListButton()).toBeVisible();
});
test("banner should listen to pinned message list", async ({ page, app, room1, util }) => {
await util.goTo(room1);
await util.receiveMessages(room1, ["Msg1", "Msg2"]);
await util.pinMessages(["Msg1", "Msg2"]);
await expect(util.getViewAllButton()).toBeVisible();
await util.openRoomInfo();
await util.openPinnedMessagesList();
await expect(util.getCloseListButton()).toBeVisible();
});
});

View file

@ -298,6 +298,7 @@
@import "./views/rooms/_NewRoomIntro.pcss";
@import "./views/rooms/_NotificationBadge.pcss";
@import "./views/rooms/_PinnedEventTile.pcss";
@import "./views/rooms/_PinnedMessageBanner.pcss";
@import "./views/rooms/_PresenceLabel.pcss";
@import "./views/rooms/_ReadReceiptGroup.pcss";
@import "./views/rooms/_ReplyPreview.pcss";

View file

@ -0,0 +1,119 @@
/*
* Copyright 2024 The Matrix.org Foundation C.I.C.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.mx_PinnedMessageBanner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cpd-space-4x);
/* 80px = 79px + 1px from the bottom border */
height: 79px;
padding: 0 var(--cpd-space-4x);
background-color: var(--cpd-color-bg-canvas-default);
border-bottom: 1px solid var(--cpd-color-gray-400);
/* From figma */
box-shadow: 0 var(--cpd-space-2x) var(--cpd-space-6x) calc(var(--cpd-space-2x) * -1) rgba(27, 29, 34, 0.1);
.mx_PinnedMessageBanner_main {
background: transparent;
border: none;
text-align: start;
cursor: pointer;
height: 100%;
flex-grow: 1;
display: flex;
align-items: center;
.mx_PinnedMessageBanner_content {
display: grid;
grid-template:
"indicators pinIcon title" auto
"indicators pinIcon message" auto;
column-gap: var(--cpd-space-2x);
}
.mx_PinnedMessageBanner_Indicators {
grid-area: indicators;
display: flex;
flex-direction: column;
gap: var(--cpd-space-0-5x);
height: 100%;
.mx_PinnedMessageBanner_Indicator {
width: var(--cpd-space-0-5x);
background-color: var(--cpd-color-gray-600);
height: 100%;
}
.mx_PinnedMessageBanner_Indicator--active {
background-color: var(--cpd-color-icon-accent-primary);
}
.mx_PinnedMessageBanner_Indicator--hidden {
background-color: transparent;
}
}
.mx_PinnedMessageBanner_PinIcon {
grid-area: pinIcon;
align-self: center;
fill: var(--cpd-color-icon-secondary-alpha);
}
.mx_PinnedMessageBanner_title {
grid-area: title;
font: var(--cpd-font-body-sm-regular);
color: var(--cpd-color-text-action-accent);
height: 20px;
.mx_PinnedMessageBanner_title_counter {
font: var(--cpd-font-body-sm-semibold);
}
}
.mx_PinnedMessageBanner_message {
grid-area: message;
font: var(--cpd-font-body-sm-regular);
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_PinnedMessageBanner_redactedMessage {
grid-area: message;
height: 20px;
display: flex;
align-items: center;
}
}
.mx_PinnedMessageBanner_actions {
white-space: nowrap;
}
}
.mx_PinnedMessageBanner[data-single-message="true"] {
/* 64px = 63px + 1px from the bottom border */
height: 63px;
.mx_PinnedMessageBanner_content {
grid-template: "pinIcon message" auto;
}
}

View file

@ -133,6 +133,7 @@ import { SubmitAskToJoinPayload } from "../../dispatcher/payloads/SubmitAskToJoi
import RightPanelStore from "../../stores/right-panel/RightPanelStore";
import { onView3pidInvite } from "../../stores/right-panel/action-handlers";
import RoomSearchAuxPanel from "../views/rooms/RoomSearchAuxPanel";
import { PinnedMessageBanner } from "../views/rooms/PinnedMessageBanner";
const DEBUG = false;
const PREVENT_MULTIPLE_JITSI_WITHIN = 30_000;
@ -2409,6 +2410,14 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
</AuxPanel>
);
const isPinningEnabled = SettingsStore.getValue<boolean>("feature_pinning");
let pinnedMessageBanner;
if (isPinningEnabled) {
pinnedMessageBanner = (
<PinnedMessageBanner room={this.state.room} permalinkCreator={this.permalinkCreator} />
);
}
let messageComposer;
const showComposer =
// joined and not showing search results
@ -2537,6 +2546,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
<Measured sensor={this.roomViewBody.current} onMeasurement={this.onMeasurement} />
)}
{auxPanel}
{pinnedMessageBanner}
<main className={timelineClasses}>
<FileDropTarget parent={this.roomView.current} onFileDrop={this.onFileDrop} />
{topUnreadMessagesBar}

View file

@ -35,7 +35,6 @@ import { RoomNotifState } from "../../../RoomNotifs";
import Modal from "../../../Modal";
import ExportDialog from "../dialogs/ExportDialog";
import { useFeatureEnabled } from "../../../hooks/useSettings";
import { usePinnedEvents } from "../right_panel/PinnedMessagesCard";
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
import { RoomSettingsTab } from "../dialogs/RoomSettingsDialog";
import { useEventEmitterState } from "../../../hooks/useEventEmitter";
@ -53,6 +52,7 @@ import { UIComponent } from "../../../settings/UIFeature";
import { DeveloperToolsOption } from "./DeveloperToolsOption";
import { tagRoom } from "../../../utils/room/tagRoom";
import { useIsVideoRoom } from "../../../utils/video-rooms";
import { usePinnedEvents } from "../../../hooks/usePinnedEvents";
interface IProps extends IContextMenuProps {
room: Room;

View file

@ -28,7 +28,6 @@ import HeaderButtons, { HeaderKind } from "./HeaderButtons";
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
import { ActionPayload } from "../../../dispatcher/payloads";
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
import { useReadPinnedEvents, usePinnedEvents } from "./PinnedMessagesCard";
import { showThreadPanel } from "../../../dispatcher/dispatch-actions/threads";
import SettingsStore from "../../../settings/SettingsStore";
import {
@ -40,6 +39,7 @@ import { SummarizedNotificationState } from "../../../stores/notifications/Summa
import PosthogTrackers from "../../../PosthogTrackers";
import { ButtonEvent } from "../elements/AccessibleButton";
import { doesRoomOrThreadHaveUnreadMessages } from "../../../Unread";
import { usePinnedEvents, useReadPinnedEvents } from "../../../hooks/usePinnedEvents";
const ROOM_INFO_PHASES = [
RightPanelPhases.RoomSummary,

View file

@ -14,17 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useCallback, useEffect, useState, JSX } from "react";
import {
Room,
RoomEvent,
RoomStateEvent,
MatrixEvent,
EventType,
RelationType,
EventTimeline,
} from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
import React, { useCallback, useEffect, JSX } from "react";
import { Room, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
import { Button, Separator } from "@vector-im/compound-web";
import classNames from "classnames";
import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
@ -33,9 +24,6 @@ import { _t } from "../../../languageHandler";
import BaseCard from "./BaseCard";
import Spinner from "../elements/Spinner";
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
import PinningUtils from "../../../utils/PinningUtils";
import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
import { PinnedEventTile } from "../rooms/PinnedEventTile";
import { useRoomState } from "../../../hooks/useRoomState";
import RoomContext, { TimelineRenderingType, useRoomContext } from "../../../contexts/RoomContext";
@ -46,155 +34,7 @@ import { filterBoolean } from "../../../utils/arrays";
import Modal from "../../../Modal";
import { UnpinAllDialog } from "../dialogs/UnpinAllDialog";
import EmptyState from "./EmptyState";
/**
* Get the pinned event IDs from a room.
* @param room
*/
function getPinnedEventIds(room?: Room): string[] {
return (
room
?.getLiveTimeline()
.getState(EventTimeline.FORWARDS)
?.getStateEvents(EventType.RoomPinnedEvents, "")
?.getContent()?.pinned ?? []
);
}
/**
* Get the pinned event IDs from a room.
* @param room
*/
export const usePinnedEvents = (room?: Room): string[] => {
const [pinnedEvents, setPinnedEvents] = useState<string[]>(getPinnedEventIds(room));
// Update the pinned events when the room state changes
// Filter out events that are not pinned events
const update = useCallback(
(ev?: MatrixEvent) => {
if (ev && ev.getType() !== EventType.RoomPinnedEvents) return;
setPinnedEvents(getPinnedEventIds(room));
},
[room],
);
useTypedEventEmitter(room?.getLiveTimeline().getState(EventTimeline.FORWARDS), RoomStateEvent.Events, update);
useEffect(() => {
setPinnedEvents(getPinnedEventIds(room));
return () => {
setPinnedEvents([]);
};
}, [room]);
return pinnedEvents;
};
/**
* Get the read pinned event IDs from a room.
* @param room
*/
function getReadPinnedEventIds(room?: Room): Set<string> {
return new Set(room?.getAccountData(ReadPinsEventId)?.getContent()?.event_ids ?? []);
}
/**
* Get the read pinned event IDs from a room.
* @param room
*/
export const useReadPinnedEvents = (room?: Room): Set<string> => {
const [readPinnedEvents, setReadPinnedEvents] = useState<Set<string>>(new Set());
// Update the read pinned events when the room state changes
// Filter out events that are not read pinned events
const update = useCallback(
(ev?: MatrixEvent) => {
if (ev && ev.getType() !== ReadPinsEventId) return;
setReadPinnedEvents(getReadPinnedEventIds(room));
},
[room],
);
useTypedEventEmitter(room, RoomEvent.AccountData, update);
useEffect(() => {
setReadPinnedEvents(getReadPinnedEventIds(room));
return () => {
setReadPinnedEvents(new Set());
};
}, [room]);
return readPinnedEvents;
};
/**
* Fetch the pinned events
* @param room
* @param pinnedEventIds
*/
function useFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Array<MatrixEvent | null> | null {
const cli = useMatrixClientContext();
return useAsyncMemo(
() => {
const promises = pinnedEventIds.map(async (eventId): Promise<MatrixEvent | null> => {
const timelineSet = room.getUnfilteredTimelineSet();
// Get the event from the local timeline
const localEvent = timelineSet
?.getTimelineForEvent(eventId)
?.getEvents()
.find((e) => e.getId() === eventId);
// Decrypt the event if it's encrypted
// Can happen when the tab is refreshed and the pinned events card is opened directly
if (localEvent?.isEncrypted()) {
await cli.decryptEventIfNeeded(localEvent);
}
// If the event is available locally, return it if it's pinnable
// Otherwise, return null
if (localEvent) return PinningUtils.isPinnable(localEvent) ? localEvent : null;
try {
// The event is not available locally, so we fetch the event and latest edit in parallel
const [
evJson,
{
events: [edit],
},
] = await Promise.all([
cli.fetchRoomEvent(room.roomId, eventId),
cli.relations(room.roomId, eventId, RelationType.Replace, null, { limit: 1 }),
]);
const event = new MatrixEvent(evJson);
// Decrypt the event if it's encrypted
if (event.isEncrypted()) {
await cli.decryptEventIfNeeded(event);
}
// Handle poll events
await room.processPollEvents([event]);
const senderUserId = event.getSender();
if (senderUserId && PinningUtils.isPinnable(event)) {
// Inject sender information
event.sender = room.getMember(senderUserId);
// Also inject any edits we've found
if (edit) event.makeReplaced(edit);
return event;
}
} catch (err) {
logger.error("Error looking up pinned event " + eventId + " in room " + room.roomId);
logger.error(err);
}
return null;
});
return Promise.all(promises);
},
[cli, room, pinnedEventIds],
null,
);
}
import { useFetchedPinnedEvents, usePinnedEvents, useReadPinnedEvents } from "../../../hooks/usePinnedEvents";
/**
* List the pinned messages in a room inside a Card.

View file

@ -58,7 +58,6 @@ import { E2EStatus } from "../../../utils/ShieldUtils";
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import { useFeatureEnabled } from "../../../hooks/useSettings";
import { usePinnedEvents } from "./PinnedMessagesCard";
import RoomName from "../elements/RoomName";
import ExportDialog from "../dialogs/ExportDialog";
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
@ -81,6 +80,7 @@ import { Action } from "../../../dispatcher/actions";
import { Key } from "../../../Keyboard";
import { useTransition } from "../../../hooks/useTransition";
import { useIsVideoRoom } from "../../../utils/video-rooms";
import { usePinnedEvents } from "../../../hooks/usePinnedEvents";
interface IProps {
room: Room;

View file

@ -0,0 +1,252 @@
/*
* Copyright 2024 The Matrix.org Foundation C.I.C.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { JSX, useEffect, useMemo, useState } from "react";
import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin-solid.svg";
import { Button } from "@vector-im/compound-web";
import { Room } from "matrix-js-sdk/src/matrix";
import classNames from "classnames";
import { usePinnedEvents, useSortedFetchedPinnedEvents } from "../../../hooks/usePinnedEvents";
import { _t } from "../../../languageHandler";
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
import { useEventEmitter } from "../../../hooks/useEventEmitter";
import { UPDATE_EVENT } from "../../../stores/AsyncStore";
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
import dis from "../../../dispatcher/dispatcher";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { Action } from "../../../dispatcher/actions";
import MessageEvent from "../messages/MessageEvent";
/**
* The props for the {@link PinnedMessageBanner} component.
*/
interface PinnedMessageBannerProps {
/**
* The permalink creator to use.
*/
permalinkCreator: RoomPermalinkCreator;
/**
* The room where the banner is displayed
*/
room: Room;
}
/**
* A banner that displays the pinned messages in a room.
*/
export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBannerProps): JSX.Element | null {
const pinnedEventIds = usePinnedEvents(room);
const pinnedEvents = useSortedFetchedPinnedEvents(room, pinnedEventIds);
const eventCount = pinnedEvents.length;
const isSinglePinnedEvent = eventCount === 1;
const [currentEventIndex, setCurrentEventIndex] = useState(eventCount - 1);
// If the list of pinned events changes, we need to make sure the current index isn't out of bound
useEffect(() => {
setCurrentEventIndex((currentEventIndex) => {
// If the current index is out of bound, we set it to the last index
if (currentEventIndex < 0 || currentEventIndex >= eventCount) return eventCount - 1;
return currentEventIndex;
});
}, [eventCount]);
const pinnedEvent = pinnedEvents[currentEventIndex];
// Generate a preview for the pinned event
const eventPreview = useMemo(() => {
if (!pinnedEvent || pinnedEvent.isRedacted() || pinnedEvent.isDecryptionFailure()) return null;
return MessagePreviewStore.instance.generatePreviewForEvent(pinnedEvent);
}, [pinnedEvent]);
if (!pinnedEvent) return null;
const shouldUseMessageEvent = pinnedEvent.isRedacted() || pinnedEvent.isDecryptionFailure();
const onBannerClick = (): void => {
// Scroll to the pinned message
dis.dispatch<ViewRoomPayload>({
action: Action.ViewRoom,
event_id: pinnedEvent.getId(),
highlighted: true,
room_id: room.roomId,
metricsTrigger: undefined, // room doesn't change
});
// Cycle through the pinned messages
// When we reach the first message, we go back to the last message
setCurrentEventIndex((currentEventIndex) => (--currentEventIndex === -1 ? eventCount - 1 : currentEventIndex));
};
return (
<div
className="mx_PinnedMessageBanner"
data-single-message={isSinglePinnedEvent}
aria-label={_t("room|pinned_message_banner|description")}
data-testid="pinned-message-banner"
>
<button
aria-label={_t("room|pinned_message_banner|go_to_message")}
type="button"
className="mx_PinnedMessageBanner_main"
onClick={onBannerClick}
>
<div className="mx_PinnedMessageBanner_content">
{!isSinglePinnedEvent && <Indicators count={eventCount} currentIndex={currentEventIndex} />}
<PinIcon width="20" className="mx_PinnedMessageBanner_PinIcon" />
{!isSinglePinnedEvent && (
<div className="mx_PinnedMessageBanner_title" data-testid="banner-counter">
{_t(
"room|pinned_message_banner|title",
{
index: currentEventIndex + 1,
length: eventCount,
},
{ bold: (sub) => <span className="mx_PinnedMessageBanner_title_counter">{sub}</span> },
)}
</div>
)}
{eventPreview && <span className="mx_PinnedMessageBanner_message">{eventPreview}</span>}
{/* In case of redacted event, we want to display the nice sentence of the message event like in the timeline or in the pinned message list */}
{shouldUseMessageEvent && (
<div className="mx_PinnedMessageBanner_redactedMessage">
<MessageEvent
mxEvent={pinnedEvent}
maxImageHeight={20}
permalinkCreator={permalinkCreator}
replacingEventId={pinnedEvent.replacingEventId()}
/>
</div>
)}
</div>
</button>
{!isSinglePinnedEvent && <BannerButton room={room} />}
</div>
);
}
const MAX_INDICATORS = 3;
/**
* The props for the {@link IndicatorsProps} component.
*/
interface IndicatorsProps {
/**
* The number of messages pinned
*/
count: number;
/**
* The current index of the pinned message
*/
currentIndex: number;
}
/**
* A component that displays vertical indicators for the pinned messages.
*/
function Indicators({ count, currentIndex }: IndicatorsProps): JSX.Element {
// We only display a maximum of 3 indicators at one time.
// When there is more than 3 messages pinned, we will cycle through the indicators
// If there is only 2 messages pinned, we will display 2 indicators
// In case of 1 message pinned, the indicators are not displayed, see {@link PinnedMessageBanner} logic.
const numberOfIndicators = Math.min(count, MAX_INDICATORS);
// The index of the active indicator
const index = currentIndex % numberOfIndicators;
// We hide the indicators when we are on the last cycle and there are less than 3 remaining messages pinned
const numberOfCycles = Math.ceil(count / numberOfIndicators);
// If the current index is greater than the last cycle index, we are on the last cycle
const isLastCycle = currentIndex >= (numberOfCycles - 1) * MAX_INDICATORS;
// The index of the last message in the last cycle
const lastCycleIndex = numberOfIndicators - (numberOfCycles * numberOfIndicators - count);
return (
<div className="mx_PinnedMessageBanner_Indicators">
{Array.from({ length: numberOfIndicators }).map((_, i) => (
<Indicator key={i} active={i === index} hidden={isLastCycle && lastCycleIndex <= i} />
))}
</div>
);
}
/**
* The props for the {@link Indicator} component.
*/
interface IndicatorProps {
/**
* Whether the indicator is active
*/
active: boolean;
/**
* Whether the indicator is hidden
*/
hidden: boolean;
}
/**
* A component that displays a vertical indicator for a pinned message.
*/
function Indicator({ active, hidden }: IndicatorProps): JSX.Element {
return (
<div
data-testid="banner-indicator"
className={classNames("mx_PinnedMessageBanner_Indicator", {
"mx_PinnedMessageBanner_Indicator--active": active,
"mx_PinnedMessageBanner_Indicator--hidden": hidden,
})}
/>
);
}
function getRightPanelPhase(roomId: string): RightPanelPhases | null {
if (!RightPanelStore.instance.isOpenForRoom(roomId)) return null;
return RightPanelStore.instance.currentCard.phase;
}
/**
* The props for the {@link BannerButton} component.
*/
interface BannerButtonProps {
/**
* The room where the banner is displayed
*/
room: Room;
}
/**
* A button that allows the user to view or close the list of pinned messages.
*/
function BannerButton({ room }: BannerButtonProps): JSX.Element {
const [currentPhase, setCurrentPhase] = useState<RightPanelPhases | null>(getRightPanelPhase(room.roomId));
useEventEmitter(RightPanelStore.instance, UPDATE_EVENT, () => setCurrentPhase(getRightPanelPhase(room.roomId)));
const isPinnedMessagesPhase = currentPhase === RightPanelPhases.PinnedMessages;
return (
<Button
className="mx_PinnedMessageBanner_actions"
kind="tertiary"
onClick={() => {
RightPanelStore.instance.showOrHidePhase(RightPanelPhases.PinnedMessages);
}}
>
{isPinnedMessagesPhase
? _t("room|pinned_message_banner|button_close_list")
: _t("room|pinned_message_banner|button_view_all")}
</Button>
);
}

View file

@ -0,0 +1,212 @@
/*
* Copyright 2024 The Matrix.org Foundation C.I.C.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { useCallback, useEffect, useMemo, useState } from "react";
import {
Room,
RoomEvent,
RoomStateEvent,
MatrixEvent,
EventType,
RelationType,
EventTimeline,
MatrixClient,
} from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
import { useTypedEventEmitter } from "./useEventEmitter";
import { ReadPinsEventId } from "../components/views/right_panel/types";
import { useMatrixClientContext } from "../contexts/MatrixClientContext";
import { useAsyncMemo } from "./useAsyncMemo";
import PinningUtils from "../utils/PinningUtils";
/**
* Get the pinned event IDs from a room.
* @param room
*/
function getPinnedEventIds(room?: Room): string[] {
return (
room
?.getLiveTimeline()
.getState(EventTimeline.FORWARDS)
?.getStateEvents(EventType.RoomPinnedEvents, "")
?.getContent()?.pinned ?? []
);
}
/**
* Get the pinned event IDs from a room.
* @param room
*/
export const usePinnedEvents = (room?: Room): string[] => {
const [pinnedEvents, setPinnedEvents] = useState<string[]>(getPinnedEventIds(room));
// Update the pinned events when the room state changes
// Filter out events that are not pinned events
const update = useCallback(
(ev?: MatrixEvent) => {
if (ev && ev.getType() !== EventType.RoomPinnedEvents) return;
setPinnedEvents(getPinnedEventIds(room));
},
[room],
);
useTypedEventEmitter(room?.getLiveTimeline().getState(EventTimeline.FORWARDS), RoomStateEvent.Events, update);
useEffect(() => {
setPinnedEvents(getPinnedEventIds(room));
return () => {
setPinnedEvents([]);
};
}, [room]);
return pinnedEvents;
};
/**
* Get the read pinned event IDs from a room.
* @param room
*/
function getReadPinnedEventIds(room?: Room): Set<string> {
return new Set(room?.getAccountData(ReadPinsEventId)?.getContent()?.event_ids ?? []);
}
/**
* Get the read pinned event IDs from a room.
* @param room
*/
export const useReadPinnedEvents = (room?: Room): Set<string> => {
const [readPinnedEvents, setReadPinnedEvents] = useState<Set<string>>(new Set());
// Update the read pinned events when the room state changes
// Filter out events that are not read pinned events
const update = useCallback(
(ev?: MatrixEvent) => {
if (ev && ev.getType() !== ReadPinsEventId) return;
setReadPinnedEvents(getReadPinnedEventIds(room));
},
[room],
);
useTypedEventEmitter(room, RoomEvent.AccountData, update);
useEffect(() => {
setReadPinnedEvents(getReadPinnedEventIds(room));
return () => {
setReadPinnedEvents(new Set());
};
}, [room]);
return readPinnedEvents;
};
/**
* Fetch the pinned event
* @param room
* @param pinnedEventId
* @param cli
*/
async function fetchPinnedEvent(room: Room, pinnedEventId: string, cli: MatrixClient): Promise<MatrixEvent | null> {
const timelineSet = room.getUnfilteredTimelineSet();
// Get the event from the local timeline
const localEvent = timelineSet
?.getTimelineForEvent(pinnedEventId)
?.getEvents()
.find((e) => e.getId() === pinnedEventId);
// Decrypt the event if it's encrypted
// Can happen when the tab is refreshed and the pinned events card is opened directly
if (localEvent?.isEncrypted()) {
await cli.decryptEventIfNeeded(localEvent);
}
// If the event is available locally, return it if it's pinnable
// or if it's redacted (to show the redacted event and to be able to unpin it)
// Otherwise, return null
if (localEvent) return PinningUtils.isUnpinnable(localEvent) ? localEvent : null;
try {
// The event is not available locally, so we fetch the event and latest edit in parallel
const [
evJson,
{
events: [edit],
},
] = await Promise.all([
cli.fetchRoomEvent(room.roomId, pinnedEventId),
cli.relations(room.roomId, pinnedEventId, RelationType.Replace, null, { limit: 1 }),
]);
const event = new MatrixEvent(evJson);
// Decrypt the event if it's encrypted
if (event.isEncrypted()) {
await cli.decryptEventIfNeeded(event);
}
// Handle poll events
await room.processPollEvents([event]);
const senderUserId = event.getSender();
if (senderUserId && PinningUtils.isUnpinnable(event)) {
// Inject sender information
event.sender = room.getMember(senderUserId);
// Also inject any edits we've found
if (edit) event.makeReplaced(edit);
return event;
}
} catch (err) {
logger.error(`Error looking up pinned event ${pinnedEventId} in room ${room.roomId}`);
logger.error(err);
}
return null;
}
/**
* Fetch the pinned events
* @param room
* @param pinnedEventIds
*/
export function useFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Array<MatrixEvent | null> | null {
const cli = useMatrixClientContext();
return useAsyncMemo(
() =>
Promise.all(
pinnedEventIds.map(
async (eventId): Promise<MatrixEvent | null> => fetchPinnedEvent(room, eventId, cli),
),
),
[cli, room, pinnedEventIds],
null,
);
}
/**
* Fetch the pinned events and sort them by from the oldest to the newest
* The order is determined by the event timestamp
* @param room
* @param pinnedEventIds
*/
export function useSortedFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Array<MatrixEvent | null> {
const pinnedEvents = useFetchedPinnedEvents(room, pinnedEventIds);
return useMemo(() => {
if (!pinnedEvents) return [];
return pinnedEvents.sort((a, b) => {
if (!a) return -1;
if (!b) return 1;
return a.getTs() - b.getTs();
});
}, [pinnedEvents]);
}

View file

@ -2048,6 +2048,13 @@
"not_found_title": "This room or space does not exist.",
"not_found_title_name": "%(roomName)s does not exist.",
"peek_join_prompt": "You're previewing %(roomName)s. Want to join it?",
"pinned_message_banner": {
"button_close_list": "Close list",
"button_view_all": "View all",
"description": "This room has pinned messages. Click to view them.",
"go_to_message": "View the pinned message in the timeline.",
"title": "<bold>%(index)s of %(length)s</bold> Pinned messages"
},
"read_topic": "Click to read topic",
"rejecting": "Rejecting invite…",
"rejoin_button": "Re-join",

View file

@ -37,11 +37,19 @@ export default class PinningUtils {
* @return {boolean} True if the event may be pinned, false otherwise.
*/
public static isPinnable(event: MatrixEvent): boolean {
if (!event) return false;
if (!this.PINNABLE_EVENT_TYPES.includes(event.getType())) return false;
if (event.isRedacted()) return false;
return PinningUtils.isUnpinnable(event);
}
return true;
/**
* Determines if the given event may be unpinned.
* @param {MatrixEvent} event The event to check.
* @return {boolean} True if the event may be unpinned, false otherwise.
*/
public static isUnpinnable(event: MatrixEvent): boolean {
if (!event) return false;
if (event.isRedacted()) return true;
return this.PINNABLE_EVENT_TYPES.includes(event.getType());
}
/**

View file

@ -20,7 +20,6 @@ import { mocked, MockedObject } from "jest-mock";
import {
MatrixEvent,
RoomStateEvent,
IEvent,
Room,
IMinimalEvent,
EventType,
@ -266,9 +265,8 @@ describe("<PinnedMessagesCard />", () => {
// Redacted messages are unpinnable
const pin = mkEvent({
event: true,
type: EventType.RoomMessage,
type: EventType.RoomCreate,
content: {},
unsigned: { redacted_because: {} as unknown as IEvent },
room: "!room:example.org",
user: "@alice:example.org",
});
@ -280,9 +278,8 @@ describe("<PinnedMessagesCard />", () => {
// Redacted messages are unpinnable
const pin = mkEvent({
event: true,
type: EventType.RoomMessage,
type: EventType.RoomCreate,
content: {},
unsigned: { redacted_because: {} as unknown as IEvent },
room: "!room:example.org",
user: "@alice:example.org",
});

View file

@ -0,0 +1,235 @@
/*
* Copyright 2024 The Matrix.org Foundation C.I.C.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { act, screen, render } from "@testing-library/react";
import React from "react";
import { EventType, IEvent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import userEvent from "@testing-library/user-event";
import * as pinnedEventHooks from "../../../../src/hooks/usePinnedEvents";
import { PinnedMessageBanner } from "../../../../src/components/views/rooms/PinnedMessageBanner";
import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
import { stubClient } from "../../../test-utils";
import dis from "../../../../src/dispatcher/dispatcher";
import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore";
import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases";
import { UPDATE_EVENT } from "../../../../src/stores/AsyncStore";
import { Action } from "../../../../src/dispatcher/actions";
describe("<PinnedMessageBanner />", () => {
const userId = "@alice:server.org";
const roomId = "!room:server.org";
let mockClient: MatrixClient;
let room: Room;
let permalinkCreator: RoomPermalinkCreator;
beforeEach(() => {
mockClient = stubClient();
room = new Room(roomId, mockClient, userId);
permalinkCreator = new RoomPermalinkCreator(room);
jest.spyOn(dis, "dispatch").mockReturnValue(undefined);
});
afterEach(() => {
jest.restoreAllMocks();
});
/**
* Create a pinned event with the given content.
* @param content
*/
function makePinEvent(content?: Partial<IEvent>) {
return new MatrixEvent({
type: EventType.RoomMessage,
sender: userId,
content: {
body: "First pinned message",
msgtype: "m.text",
},
room_id: roomId,
origin_server_ts: 0,
event_id: "$eventId",
...content,
});
}
const event1 = makePinEvent();
const event2 = makePinEvent({
event_id: "$eventId2",
content: { body: "Second pinned message" },
});
const event3 = makePinEvent({
event_id: "$eventId3",
content: { body: "Third pinned message" },
});
const event4 = makePinEvent({
event_id: "$eventId4",
content: { body: "Fourth pinned message" },
});
/**
* Render the banner
*/
function renderBanner() {
return render(<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} />);
}
it("should render nothing when there are no pinned events", async () => {
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([]);
const { container } = renderBanner();
expect(container).toBeEmptyDOMElement();
});
it("should render a single pinned event", async () => {
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1]);
const { asFragment } = renderBanner();
expect(screen.getByText("First pinned message")).toBeVisible();
expect(screen.queryByRole("button", { name: "View all" })).toBeNull();
expect(asFragment()).toMatchSnapshot();
});
it("should render 2 pinned event", async () => {
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!, event2.getId()!]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2]);
const { asFragment } = renderBanner();
expect(screen.getByText("Second pinned message")).toBeVisible();
expect(screen.getByTestId("banner-counter")).toHaveTextContent("2 of 2 Pinned messages");
expect(screen.getAllByTestId("banner-indicator")).toHaveLength(2);
expect(screen.queryByRole("button", { name: "View all" })).toBeVisible();
expect(asFragment()).toMatchSnapshot();
});
it("should render 4 pinned event", async () => {
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([
event1.getId()!,
event2.getId()!,
event3.getId()!,
event4.getId()!,
]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2, event3, event4]);
const { asFragment } = renderBanner();
expect(screen.getByText("Fourth pinned message")).toBeVisible();
expect(screen.getByTestId("banner-counter")).toHaveTextContent("4 of 4 Pinned messages");
expect(screen.getAllByTestId("banner-indicator")).toHaveLength(3);
expect(screen.queryByRole("button", { name: "View all" })).toBeVisible();
expect(asFragment()).toMatchSnapshot();
});
it("should rotate the pinned events when the banner is clicked", async () => {
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!, event2.getId()!]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2]);
renderBanner();
expect(screen.getByText("Second pinned message")).toBeVisible();
await userEvent.click(screen.getByRole("button", { name: "View the pinned message in the timeline." }));
expect(screen.getByText("First pinned message")).toBeVisible();
expect(screen.getByTestId("banner-counter")).toHaveTextContent("1 of 2 Pinned messages");
expect(dis.dispatch).toHaveBeenCalledWith({
action: Action.ViewRoom,
event_id: event2.getId(),
highlighted: true,
room_id: room.roomId,
metricsTrigger: undefined, // room doesn't change
});
await userEvent.click(screen.getByRole("button", { name: "View the pinned message in the timeline." }));
expect(screen.getByText("Second pinned message")).toBeVisible();
expect(screen.getByTestId("banner-counter")).toHaveTextContent("2 of 2 Pinned messages");
expect(dis.dispatch).toHaveBeenCalledWith({
action: Action.ViewRoom,
event_id: event1.getId(),
highlighted: true,
room_id: room.roomId,
metricsTrigger: undefined, // room doesn't change
});
});
describe("Right button", () => {
beforeEach(() => {
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!, event2.getId()!]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2]);
});
it("should display View all button if the right panel is closed", async () => {
// The Right panel is closed
jest.spyOn(RightPanelStore.instance, "isOpenForRoom").mockReturnValue(false);
renderBanner();
expect(screen.getByRole("button", { name: "View all" })).toBeVisible();
});
it("should display View all button if the right panel is not opened on the pinned message list", async () => {
// The Right panel is opened on another card
jest.spyOn(RightPanelStore.instance, "isOpenForRoom").mockReturnValue(true);
jest.spyOn(RightPanelStore.instance, "currentCard", "get").mockReturnValue({
phase: RightPanelPhases.RoomMemberList,
});
renderBanner();
expect(screen.getByRole("button", { name: "View all" })).toBeVisible();
});
it("should display Close list button if the message pinning list is displayed", async () => {
// The Right panel is closed
jest.spyOn(RightPanelStore.instance, "isOpenForRoom").mockReturnValue(true);
jest.spyOn(RightPanelStore.instance, "currentCard", "get").mockReturnValue({
phase: RightPanelPhases.PinnedMessages,
});
renderBanner();
expect(screen.getByRole("button", { name: "Close list" })).toBeVisible();
});
it("should open or close the message pinning list", async () => {
// The Right panel is closed
jest.spyOn(RightPanelStore.instance, "isOpenForRoom").mockReturnValue(true);
jest.spyOn(RightPanelStore.instance, "currentCard", "get").mockReturnValue({
phase: RightPanelPhases.PinnedMessages,
});
jest.spyOn(RightPanelStore.instance, "showOrHidePhase").mockReturnValue();
renderBanner();
await userEvent.click(screen.getByRole("button", { name: "Close list" }));
expect(RightPanelStore.instance.showOrHidePhase).toHaveBeenCalledWith(RightPanelPhases.PinnedMessages);
});
it("should listen to the right panel", async () => {
// The Right panel is closed
jest.spyOn(RightPanelStore.instance, "isOpenForRoom").mockReturnValue(true);
jest.spyOn(RightPanelStore.instance, "currentCard", "get").mockReturnValue({
phase: RightPanelPhases.PinnedMessages,
});
renderBanner();
expect(screen.getByRole("button", { name: "Close list" })).toBeVisible();
jest.spyOn(RightPanelStore.instance, "isOpenForRoom").mockReturnValue(false);
act(() => {
RightPanelStore.instance.emit(UPDATE_EVENT);
});
expect(screen.getByRole("button", { name: "View all" })).toBeVisible();
});
});
});

View file

@ -0,0 +1,166 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<PinnedMessageBanner /> should render 2 pinned event 1`] = `
<DocumentFragment>
<div
aria-label="This room has pinned messages. Click to view them."
class="mx_PinnedMessageBanner"
data-single-message="false"
data-testid="pinned-message-banner"
>
<button
aria-label="View the pinned message in the timeline."
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
>
<div
class="mx_PinnedMessageBanner_Indicators"
>
<div
class="mx_PinnedMessageBanner_Indicator"
data-testid="banner-indicator"
/>
<div
class="mx_PinnedMessageBanner_Indicator mx_PinnedMessageBanner_Indicator--active"
data-testid="banner-indicator"
/>
</div>
<div
class="mx_PinnedMessageBanner_PinIcon"
width="20"
/>
<div
class="mx_PinnedMessageBanner_title"
data-testid="banner-counter"
>
<span>
<span
class="mx_PinnedMessageBanner_title_counter"
>
2 of 2
</span>
Pinned messages
</span>
</div>
<span
class="mx_PinnedMessageBanner_message"
>
Second pinned message
</span>
</div>
</button>
<button
class="_button_zt6rp_17 mx_PinnedMessageBanner_actions"
data-kind="tertiary"
data-size="lg"
role="button"
tabindex="0"
>
View all
</button>
</div>
</DocumentFragment>
`;
exports[`<PinnedMessageBanner /> should render 4 pinned event 1`] = `
<DocumentFragment>
<div
aria-label="This room has pinned messages. Click to view them."
class="mx_PinnedMessageBanner"
data-single-message="false"
data-testid="pinned-message-banner"
>
<button
aria-label="View the pinned message in the timeline."
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
>
<div
class="mx_PinnedMessageBanner_Indicators"
>
<div
class="mx_PinnedMessageBanner_Indicator mx_PinnedMessageBanner_Indicator--active"
data-testid="banner-indicator"
/>
<div
class="mx_PinnedMessageBanner_Indicator mx_PinnedMessageBanner_Indicator--hidden"
data-testid="banner-indicator"
/>
<div
class="mx_PinnedMessageBanner_Indicator mx_PinnedMessageBanner_Indicator--hidden"
data-testid="banner-indicator"
/>
</div>
<div
class="mx_PinnedMessageBanner_PinIcon"
width="20"
/>
<div
class="mx_PinnedMessageBanner_title"
data-testid="banner-counter"
>
<span>
<span
class="mx_PinnedMessageBanner_title_counter"
>
4 of 4
</span>
Pinned messages
</span>
</div>
<span
class="mx_PinnedMessageBanner_message"
>
Fourth pinned message
</span>
</div>
</button>
<button
class="_button_zt6rp_17 mx_PinnedMessageBanner_actions"
data-kind="tertiary"
data-size="lg"
role="button"
tabindex="0"
>
View all
</button>
</div>
</DocumentFragment>
`;
exports[`<PinnedMessageBanner /> should render a single pinned event 1`] = `
<DocumentFragment>
<div
aria-label="This room has pinned messages. Click to view them."
class="mx_PinnedMessageBanner"
data-single-message="true"
data-testid="pinned-message-banner"
>
<button
aria-label="View the pinned message in the timeline."
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
>
<div
class="mx_PinnedMessageBanner_PinIcon"
width="20"
/>
<span
class="mx_PinnedMessageBanner_message"
>
First pinned message
</span>
</div>
</button>
</div>
</DocumentFragment>
`;

View file

@ -73,15 +73,27 @@ describe("PinningUtils", () => {
).mockReturnValue(true);
});
describe("isPinnable", () => {
describe("isUnpinnable", () => {
test.each(PinningUtils.PINNABLE_EVENT_TYPES)("should return true for pinnable event types", (eventType) => {
const event = makePinEvent({ type: eventType });
expect(PinningUtils.isPinnable(event)).toBe(true);
expect(PinningUtils.isUnpinnable(event)).toBe(true);
});
test("should return false for a non pinnable event type", () => {
const event = makePinEvent({ type: EventType.RoomCreate });
expect(PinningUtils.isPinnable(event)).toBe(false);
expect(PinningUtils.isUnpinnable(event)).toBe(false);
});
test("should return true for a redacted event", () => {
const event = makePinEvent({ unsigned: { redacted_because: "because" as unknown as IEvent } });
expect(PinningUtils.isUnpinnable(event)).toBe(true);
});
});
describe("isPinnable", () => {
test.each(PinningUtils.PINNABLE_EVENT_TYPES)("should return true for pinnable event types", (eventType) => {
const event = makePinEvent({ type: eventType });
expect(PinningUtils.isPinnable(event)).toBe(true);
});
test("should return false for a redacted event", () => {