Message Pinning: rework the message pinning list in the right panel (#12825)
* Fix pinning event loading after restart * Update deps * Replace pinned event list * Add a dialog to confirm to unpin all messages * Use `EmptyState` when there is no pinned messages * Rework `PinnedEventTile` tests * Add comments and refactor `PinnedMessageCard` * Rework `PinnedMessageCard` tests * Add tests for `UnpinAllDialog` * Add e2e tests for pinned messages * Replace 3px custom gap by 4px gap * Use string interpolation for `Pin` action. * Update playright sceenshot for empty state
This commit is contained in:
Florian Duros
GitHub
parent
88cf643cbd
commit
6f3dc30693
22 changed files with 2099 additions and 507 deletions
|
|
@ -15,112 +15,206 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { MatrixEvent, EventType, RelationType, Relations } from "matrix-js-sdk/src/matrix";
|
||||
import React, { JSX, useCallback, useState } from "react";
|
||||
import { EventTimeline, EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
|
||||
import { IconButton, Menu, MenuItem, Separator, Text } from "@vector-im/compound-web";
|
||||
import { Icon as ViewIcon } from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
|
||||
import { Icon as UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg";
|
||||
import { Icon as ForwardIcon } from "@vector-im/compound-design-tokens/icons/forward.svg";
|
||||
import { Icon as TriggerIcon } from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg";
|
||||
import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
|
||||
import classNames from "classnames";
|
||||
|
||||
import dis from "../../../dispatcher/dispatcher";
|
||||
import { Action } from "../../../dispatcher/actions";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import MessageEvent from "../messages/MessageEvent";
|
||||
import MemberAvatar from "../avatars/MemberAvatar";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { formatDate } from "../../../DateUtils";
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import { getUserNameColorClass } from "../../../utils/FormattingUtils";
|
||||
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
|
||||
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
|
||||
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
|
||||
import { useRoomState } from "../../../hooks/useRoomState";
|
||||
import { isContentActionable } from "../../../utils/EventUtils";
|
||||
import { getForwardableEvent } from "../../../events";
|
||||
import { OpenForwardDialogPayload } from "../../../dispatcher/payloads/OpenForwardDialogPayload";
|
||||
import { createRedactEventDialog } from "../dialogs/ConfirmRedactDialog";
|
||||
|
||||
interface IProps {
|
||||
const AVATAR_SIZE = "32px";
|
||||
|
||||
/**
|
||||
* Properties for {@link PinnedEventTile}.
|
||||
*/
|
||||
interface PinnedEventTileProps {
|
||||
/**
|
||||
* The event to display.
|
||||
*/
|
||||
event: MatrixEvent;
|
||||
/**
|
||||
* The permalink creator to use.
|
||||
*/
|
||||
permalinkCreator: RoomPermalinkCreator;
|
||||
onUnpinClicked?(): void;
|
||||
/**
|
||||
* The room the event is in.
|
||||
*/
|
||||
room: Room;
|
||||
}
|
||||
|
||||
const AVATAR_SIZE = "24px";
|
||||
/**
|
||||
* A pinned event tile.
|
||||
*/
|
||||
export function PinnedEventTile({ event, room, permalinkCreator }: PinnedEventTileProps): JSX.Element {
|
||||
const sender = event.getSender();
|
||||
if (!sender) {
|
||||
throw new Error("Pinned event unexpectedly has no sender");
|
||||
}
|
||||
|
||||
export default class PinnedEventTile extends React.Component<IProps> {
|
||||
public static contextType = MatrixClientContext;
|
||||
public declare context: React.ContextType<typeof MatrixClientContext>;
|
||||
|
||||
private onTileClicked = (): void => {
|
||||
dis.dispatch<ViewRoomPayload>({
|
||||
action: Action.ViewRoom,
|
||||
event_id: this.props.event.getId(),
|
||||
highlighted: true,
|
||||
room_id: this.props.event.getRoomId(),
|
||||
metricsTrigger: undefined, // room doesn't change
|
||||
});
|
||||
};
|
||||
|
||||
// For event types like polls that use relations, we fetch those manually on
|
||||
// mount and store them here, exposing them through getRelationsForEvent
|
||||
private relations = new Map<string, Map<string, Relations>>();
|
||||
private getRelationsForEvent = (
|
||||
eventId: string,
|
||||
relationType: RelationType | string,
|
||||
eventType: EventType | string,
|
||||
): Relations | undefined => {
|
||||
if (eventId === this.props.event.getId()) {
|
||||
return this.relations.get(relationType)?.get(eventType);
|
||||
}
|
||||
};
|
||||
|
||||
public render(): React.ReactNode {
|
||||
const sender = this.props.event.getSender();
|
||||
|
||||
if (!sender) {
|
||||
throw new Error("Pinned event unexpectedly has no sender");
|
||||
}
|
||||
|
||||
let unpinButton: JSX.Element | undefined;
|
||||
if (this.props.onUnpinClicked) {
|
||||
unpinButton = (
|
||||
<AccessibleButton
|
||||
onClick={this.props.onUnpinClicked}
|
||||
className="mx_PinnedEventTile_unpinButton"
|
||||
title={_t("action|unpin")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx_PinnedEventTile">
|
||||
return (
|
||||
<div className="mx_PinnedEventTile" role="listitem">
|
||||
<div>
|
||||
<MemberAvatar
|
||||
className="mx_PinnedEventTile_senderAvatar"
|
||||
member={this.props.event.sender}
|
||||
member={event.sender}
|
||||
size={AVATAR_SIZE}
|
||||
fallbackUserId={sender}
|
||||
/>
|
||||
|
||||
<span className={"mx_PinnedEventTile_sender " + getUserNameColorClass(sender)}>
|
||||
{this.props.event.sender?.name || sender}
|
||||
</span>
|
||||
|
||||
{unpinButton}
|
||||
|
||||
<div className="mx_PinnedEventTile_message">
|
||||
<MessageEvent
|
||||
mxEvent={this.props.event}
|
||||
getRelationsForEvent={this.getRelationsForEvent}
|
||||
// @ts-ignore - complaining that className is invalid when it's not
|
||||
className="mx_PinnedEventTile_body"
|
||||
maxImageHeight={150}
|
||||
onHeightChanged={() => {}} // we need to give this, apparently
|
||||
permalinkCreator={this.props.permalinkCreator}
|
||||
replacingEventId={this.props.event.replacingEventId()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mx_PinnedEventTile_footer">
|
||||
<span className="mx_MessageTimestamp mx_PinnedEventTile_timestamp">
|
||||
{formatDate(new Date(this.props.event.getTs()))}
|
||||
</span>
|
||||
|
||||
<AccessibleButton onClick={this.onTileClicked} kind="link">
|
||||
{_t("common|view_message")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<div className="mx_PinnedEventTile_wrapper">
|
||||
<div className="mx_PinnedEventTile_top">
|
||||
<Text
|
||||
weight="semibold"
|
||||
className={classNames("mx_PinnedEventTile_sender", getUserNameColorClass(sender))}
|
||||
as="span"
|
||||
>
|
||||
{event.sender?.name || sender}
|
||||
</Text>
|
||||
<PinMenu event={event} room={room} permalinkCreator={permalinkCreator} />
|
||||
</div>
|
||||
<MessageEvent
|
||||
mxEvent={event}
|
||||
maxImageHeight={150}
|
||||
onHeightChanged={() => {}} // we need to give this, apparently
|
||||
permalinkCreator={permalinkCreator}
|
||||
replacingEventId={event.replacingEventId()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Properties for {@link PinMenu}.
|
||||
*/
|
||||
interface PinMenuProps extends PinnedEventTileProps {}
|
||||
|
||||
/**
|
||||
* A popover menu with actions on the pinned event
|
||||
*/
|
||||
function PinMenu({ event, room, permalinkCreator }: PinMenuProps): JSX.Element {
|
||||
const [open, setOpen] = useState(false);
|
||||
const matrixClient = useMatrixClientContext();
|
||||
|
||||
/**
|
||||
* View the event in the timeline.
|
||||
*/
|
||||
const onViewInTimeline = useCallback(() => {
|
||||
dis.dispatch<ViewRoomPayload>({
|
||||
action: Action.ViewRoom,
|
||||
event_id: event.getId(),
|
||||
highlighted: true,
|
||||
room_id: event.getRoomId(),
|
||||
metricsTrigger: undefined, // room doesn't change
|
||||
});
|
||||
}, [event]);
|
||||
|
||||
/**
|
||||
* Whether the client can unpin the event.
|
||||
* Pin and unpin are using the same permission.
|
||||
*/
|
||||
const canUnpin = useRoomState(room, (state) =>
|
||||
state.mayClientSendStateEvent(EventType.RoomPinnedEvents, matrixClient),
|
||||
);
|
||||
|
||||
/**
|
||||
* Unpin the event.
|
||||
* @param event
|
||||
*/
|
||||
const onUnpin = useCallback(async (): Promise<void> => {
|
||||
const pinnedEvents = room
|
||||
.getLiveTimeline()
|
||||
.getState(EventTimeline.FORWARDS)
|
||||
?.getStateEvents(EventType.RoomPinnedEvents, "");
|
||||
if (pinnedEvents?.getContent()?.pinned) {
|
||||
const pinned = pinnedEvents.getContent().pinned;
|
||||
const index = pinned.indexOf(event.getId());
|
||||
if (index !== -1) {
|
||||
pinned.splice(index, 1);
|
||||
await matrixClient.sendStateEvent(room.roomId, EventType.RoomPinnedEvents, { pinned }, "");
|
||||
}
|
||||
}
|
||||
}, [event, room, matrixClient]);
|
||||
|
||||
const contentActionable = isContentActionable(event);
|
||||
// Get the forwardable event for the given event
|
||||
const forwardableEvent = contentActionable && getForwardableEvent(event, matrixClient);
|
||||
/**
|
||||
* Open the forward dialog.
|
||||
*/
|
||||
const onForward = useCallback(() => {
|
||||
if (forwardableEvent) {
|
||||
dis.dispatch<OpenForwardDialogPayload>({
|
||||
action: Action.OpenForwardDialog,
|
||||
event: forwardableEvent,
|
||||
permalinkCreator: permalinkCreator,
|
||||
});
|
||||
}
|
||||
}, [forwardableEvent, permalinkCreator]);
|
||||
|
||||
/**
|
||||
* Whether the client can redact the event.
|
||||
*/
|
||||
const canRedact =
|
||||
room
|
||||
.getLiveTimeline()
|
||||
.getState(EventTimeline.FORWARDS)
|
||||
?.maySendRedactionForEvent(event, matrixClient.getSafeUserId()) &&
|
||||
event.getType() !== EventType.RoomServerAcl &&
|
||||
event.getType() !== EventType.RoomEncryption;
|
||||
|
||||
/**
|
||||
* Redact the event.
|
||||
*/
|
||||
const onRedact = useCallback(
|
||||
(): void =>
|
||||
createRedactEventDialog({
|
||||
mxEvent: event,
|
||||
}),
|
||||
[event],
|
||||
);
|
||||
|
||||
return (
|
||||
<Menu
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
showTitle={false}
|
||||
title={_t("right_panel|pinned_messages|menu")}
|
||||
side="right"
|
||||
align="start"
|
||||
trigger={
|
||||
<IconButton size="24px" aria-label={_t("right_panel|pinned_messages|menu")}>
|
||||
<TriggerIcon />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<MenuItem Icon={ViewIcon} label={_t("right_panel|pinned_messages|view")} onSelect={onViewInTimeline} />
|
||||
{canUnpin && <MenuItem Icon={UnpinIcon} label={_t("action|unpin")} onSelect={onUnpin} />}
|
||||
{forwardableEvent && <MenuItem Icon={ForwardIcon} label={_t("action|forward")} onSelect={onForward} />}
|
||||
{canRedact && (
|
||||
<>
|
||||
<Separator />
|
||||
<MenuItem kind="critical" Icon={DeleteIcon} label={_t("action|delete")} onSelect={onRedact} />
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue