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
226
playwright/e2e/pinned-messages/index.ts
Normal file
226
playwright/e2e/pinned-messages/index.ts
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
/*
|
||||
* 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 { Page } from "@playwright/test";
|
||||
|
||||
import { test as base, expect } from "../../element-web-test";
|
||||
import { Client } from "../../pages/client";
|
||||
import { ElementAppPage } from "../../pages/ElementAppPage";
|
||||
import { Bot } from "../../pages/bot";
|
||||
|
||||
/**
|
||||
* Set up for pinned message tests.
|
||||
*/
|
||||
export const test = base.extend<{
|
||||
room1Name?: string;
|
||||
room1: { name: string; roomId: string };
|
||||
util: Helpers;
|
||||
}>({
|
||||
displayName: "Alice",
|
||||
botCreateOpts: { displayName: "Other User" },
|
||||
|
||||
room1Name: "Room 1",
|
||||
room1: async ({ room1Name: name, app, user, bot }, use) => {
|
||||
const roomId = await app.client.createRoom({ name, invite: [bot.credentials.userId] });
|
||||
await use({ name, roomId });
|
||||
},
|
||||
|
||||
util: async ({ page, app, bot }, use) => {
|
||||
await use(new Helpers(page, app, bot));
|
||||
},
|
||||
});
|
||||
|
||||
export class Helpers {
|
||||
constructor(
|
||||
private page: Page,
|
||||
private app: ElementAppPage,
|
||||
private bot: Bot,
|
||||
) {}
|
||||
|
||||
/**
|
||||
* Sends messages into given room as a bot
|
||||
* @param room - the name of the room to send messages into
|
||||
* @param messages - the list of messages to send, these can be strings or implementations of MessageSpec like `editOf`
|
||||
*/
|
||||
async receiveMessages(room: string | { name: string }, messages: string[]) {
|
||||
await this.sendMessageAsClient(this.bot, room, messages);
|
||||
}
|
||||
|
||||
/**
|
||||
* Use the supplied client to send messages or perform actions as specified by
|
||||
* the supplied {@link Message} items.
|
||||
*/
|
||||
private async sendMessageAsClient(cli: Client, roomName: string | { name: string }, messages: string[]) {
|
||||
const room = await this.findRoomByName(typeof roomName === "string" ? roomName : roomName.name);
|
||||
const roomId = await room.evaluate((room) => room.roomId);
|
||||
|
||||
for (const message of messages) {
|
||||
await cli.sendMessage(roomId, { body: message, msgtype: "m.text" });
|
||||
|
||||
// TODO: without this wait, some tests that send lots of messages flake
|
||||
// from time to time. I (andyb) have done some investigation, but it
|
||||
// needs more work to figure out. The messages do arrive over sync, but
|
||||
// they never appear in the timeline, and they never fire a
|
||||
// Room.timeline event. I think this only happens with events that refer
|
||||
// to other events (e.g. replies), so it might be caused by the
|
||||
// referring event arriving before the referred-to event.
|
||||
await this.page.waitForTimeout(100);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Find a room by its name
|
||||
* @param roomName
|
||||
* @private
|
||||
*/
|
||||
private async findRoomByName(roomName: string) {
|
||||
return this.app.client.evaluateHandle((cli, roomName) => {
|
||||
return cli.getRooms().find((r) => r.name === roomName);
|
||||
}, roomName);
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the room with the supplied name.
|
||||
*/
|
||||
async goTo(room: string | { name: string }) {
|
||||
await this.app.viewRoomByName(typeof room === "string" ? room : room.name);
|
||||
}
|
||||
|
||||
/**
|
||||
* Pin the given message
|
||||
* @param message
|
||||
*/
|
||||
async pinMessage(message: string) {
|
||||
const timelineMessage = this.page.locator(".mx_MTextBody", { hasText: message });
|
||||
await timelineMessage.click({ button: "right" });
|
||||
await this.page.getByRole("menuitem", { name: "Pin" }).click();
|
||||
}
|
||||
|
||||
/**
|
||||
* Pin the given messages
|
||||
* @param messages
|
||||
*/
|
||||
async pinMessages(messages: string[]) {
|
||||
for (const message of messages) {
|
||||
await this.pinMessage(message);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the room info panel
|
||||
*/
|
||||
async openRoomInfo() {
|
||||
await this.page.getByRole("button", { name: "Room info" }).nth(1).click();
|
||||
}
|
||||
|
||||
/**
|
||||
* Assert that the pinned count in the room info is correct
|
||||
* Open the room info and check the pinned count
|
||||
* @param count
|
||||
*/
|
||||
async assertPinnedCountInRoomInfo(count: number) {
|
||||
await expect(this.page.getByRole("menuitem", { name: "Pinned messages" })).toHaveText(
|
||||
`Pinned messages${count}`,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the pinned messages list
|
||||
*/
|
||||
async openPinnedMessagesList() {
|
||||
await this.page.getByRole("menuitem", { name: "Pinned messages" }).click();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the right panel
|
||||
* @private
|
||||
*/
|
||||
private getRightPanel() {
|
||||
return this.page.locator("#mx_RightPanel");
|
||||
}
|
||||
|
||||
/**
|
||||
* Assert that the pinned message list contains the given messages
|
||||
* @param messages
|
||||
*/
|
||||
async assertPinnedMessagesList(messages: string[]) {
|
||||
const rightPanel = this.getRightPanel();
|
||||
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);
|
||||
|
||||
for (const message of messages) {
|
||||
await expect(list.getByText(message)).toBeVisible();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Assert that the pinned message list is empty
|
||||
*/
|
||||
async assertEmptyPinnedMessagesList() {
|
||||
const rightPanel = this.getRightPanel();
|
||||
await expect(rightPanel).toMatchScreenshot(`pinned-messages-list-empty.png`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the unpin all dialog
|
||||
*/
|
||||
async openUnpinAllDialog() {
|
||||
await this.openRoomInfo();
|
||||
await this.openPinnedMessagesList();
|
||||
await this.page.getByRole("button", { name: "Unpin all" }).click();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the unpin all dialog
|
||||
*/
|
||||
getUnpinAllDialog() {
|
||||
return this.page.locator(".mx_Dialog", { hasText: "Unpin all messages?" });
|
||||
}
|
||||
|
||||
/**
|
||||
* Click on the Continue button of the unoin all dialog
|
||||
*/
|
||||
async confirmUnpinAllDialog() {
|
||||
await this.getUnpinAllDialog().getByRole("button", { name: "Continue" }).click();
|
||||
}
|
||||
|
||||
/**
|
||||
* Go back from the pinned messages list
|
||||
*/
|
||||
async backPinnedMessagesList() {
|
||||
await this.page.locator("#mx_RightPanel").getByTestId("base-card-back-button").click();
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the contextual menu of a message in the pin message list and click on unpin
|
||||
* @param message
|
||||
*/
|
||||
async unpinMessageFromMessageList(message: string) {
|
||||
const item = this.getRightPanel().getByRole("list").getByRole("listitem").filter({
|
||||
hasText: message,
|
||||
});
|
||||
|
||||
await item.getByRole("button").click();
|
||||
await this.page.getByRole("menu", { name: "Open menu" }).getByRole("menuitem", { name: "Unpin" }).click();
|
||||
}
|
||||
}
|
||||
|
||||
export { expect };
|
||||
79
playwright/e2e/pinned-messages/pinned-messages.spec.ts
Normal file
79
playwright/e2e/pinned-messages/pinned-messages.spec.ts
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/*
|
||||
* 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 { test } from "./index";
|
||||
import { expect } from "../../element-web-test";
|
||||
|
||||
test.describe("Pinned messages", () => {
|
||||
test.use({
|
||||
labsFlags: ["feature_pinning"],
|
||||
});
|
||||
|
||||
test("should show the empty state when there are no pinned messages", async ({ page, app, room1, util }) => {
|
||||
await util.goTo(room1);
|
||||
await util.openRoomInfo();
|
||||
await util.assertPinnedCountInRoomInfo(0);
|
||||
await util.openPinnedMessagesList();
|
||||
await util.assertEmptyPinnedMessagesList();
|
||||
});
|
||||
|
||||
test("should pin messages and show them in the room info panel", async ({ page, app, room1, util }) => {
|
||||
await util.goTo(room1);
|
||||
await util.receiveMessages(room1, ["Msg1", "Msg2", "Msg3", "Msg4"]);
|
||||
|
||||
await util.pinMessages(["Msg1", "Msg2", "Msg4"]);
|
||||
await util.openRoomInfo();
|
||||
await util.assertPinnedCountInRoomInfo(3);
|
||||
});
|
||||
|
||||
test("should pin messages and show them in the pinned message panel", async ({ page, app, room1, util }) => {
|
||||
await util.goTo(room1);
|
||||
await util.receiveMessages(room1, ["Msg1", "Msg2", "Msg3", "Msg4"]);
|
||||
|
||||
// Pin the messages
|
||||
await util.pinMessages(["Msg1", "Msg2", "Msg4"]);
|
||||
await util.openRoomInfo();
|
||||
await util.openPinnedMessagesList();
|
||||
await util.assertPinnedMessagesList(["Msg1", "Msg2", "Msg4"]);
|
||||
});
|
||||
|
||||
test("should unpin one message", async ({ page, app, room1, util }) => {
|
||||
await util.goTo(room1);
|
||||
await util.receiveMessages(room1, ["Msg1", "Msg2", "Msg3", "Msg4"]);
|
||||
await util.pinMessages(["Msg1", "Msg2", "Msg4"]);
|
||||
|
||||
await util.openRoomInfo();
|
||||
await util.openPinnedMessagesList();
|
||||
await util.unpinMessageFromMessageList("Msg2");
|
||||
await util.assertPinnedMessagesList(["Msg1", "Msg4"]);
|
||||
await util.backPinnedMessagesList();
|
||||
await util.assertPinnedCountInRoomInfo(2);
|
||||
});
|
||||
|
||||
test("should unpin all messages", async ({ page, app, room1, util }) => {
|
||||
await util.goTo(room1);
|
||||
await util.receiveMessages(room1, ["Msg1", "Msg2", "Msg3", "Msg4"]);
|
||||
await util.pinMessages(["Msg1", "Msg2", "Msg4"]);
|
||||
|
||||
await util.openUnpinAllDialog();
|
||||
await expect(util.getUnpinAllDialog()).toMatchScreenshot("unpin-all-dialog.png");
|
||||
await util.confirmUnpinAllDialog();
|
||||
|
||||
await util.assertEmptyPinnedMessagesList();
|
||||
await util.backPinnedMessagesList();
|
||||
await util.assertPinnedCountInRoomInfo(0);
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -604,7 +604,7 @@ legend {
|
|||
.mx_Dialog
|
||||
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
|
||||
.mx_UserProfileSettings button
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button),
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
|
||||
.mx_Dialog input[type="submit"],
|
||||
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
|
||||
.mx_Dialog_buttons input[type="submit"] {
|
||||
|
|
@ -624,14 +624,14 @@ legend {
|
|||
.mx_Dialog
|
||||
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
|
||||
.mx_UserProfileSettings button
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):last-child {
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.mx_Dialog
|
||||
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
|
||||
.mx_UserProfileSettings button
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):focus,
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):focus,
|
||||
.mx_Dialog input[type="submit"]:focus,
|
||||
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
|
||||
.mx_Dialog_buttons input[type="submit"]:focus {
|
||||
|
|
@ -643,7 +643,7 @@ legend {
|
|||
.mx_Dialog_buttons
|
||||
button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
|
||||
.mx_UserProfileSettings button
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button),
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
|
||||
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
|
||||
color: var(--cpd-color-text-on-solid-primary);
|
||||
background-color: var(--cpd-color-bg-action-primary-rest);
|
||||
|
|
@ -656,7 +656,7 @@ legend {
|
|||
.mx_Dialog_buttons
|
||||
button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
|
||||
.mx_ThemeChoicePanel_CustomTheme button
|
||||
),
|
||||
):not(.mx_UnpinAllDialog button),
|
||||
.mx_Dialog_buttons input[type="submit"].danger {
|
||||
background-color: var(--cpd-color-bg-critical-primary);
|
||||
border: solid 1px var(--cpd-color-bg-critical-primary);
|
||||
|
|
@ -672,7 +672,7 @@ legend {
|
|||
.mx_Dialog
|
||||
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
|
||||
.mx_UserProfileSettings button
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):disabled,
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):disabled,
|
||||
.mx_Dialog input[type="submit"]:disabled,
|
||||
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
|
||||
.mx_Dialog_buttons input[type="submit"]:disabled {
|
||||
|
|
|
|||
|
|
@ -167,6 +167,7 @@
|
|||
@import "./views/dialogs/_SpaceSettingsDialog.pcss";
|
||||
@import "./views/dialogs/_SpotlightDialog.pcss";
|
||||
@import "./views/dialogs/_TermsDialog.pcss";
|
||||
@import "./views/dialogs/_UnpinAllDialog.pcss";
|
||||
@import "./views/dialogs/_UntrustedDeviceDialog.pcss";
|
||||
@import "./views/dialogs/_UploadConfirmDialog.pcss";
|
||||
@import "./views/dialogs/_UserSettingsDialog.pcss";
|
||||
|
|
|
|||
38
res/css/views/dialogs/_UnpinAllDialog.pcss
Normal file
38
res/css/views/dialogs/_UnpinAllDialog.pcss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
/*
|
||||
* 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_UnpinAllDialog {
|
||||
/* 396 is coming from figma and we remove the left and right paddings of the dialog */
|
||||
width: calc(396px - (var(--cpd-space-10x) * 2));
|
||||
padding-bottom: var(--cpd-space-2x);
|
||||
|
||||
.mx_UnpinAllDialog_title {
|
||||
/* Override the default heading style */
|
||||
font: var(--cpd-font-heading-sm-semibold) !important;
|
||||
margin-bottom: var(--cpd-space-3x);
|
||||
}
|
||||
|
||||
.mx_UnpinAllDialog_buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cpd-space-4x);
|
||||
margin: var(--cpd-space-8x) var(--cpd-space-2x) 0 var(--cpd-space-2x);
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -15,50 +15,40 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_PinnedMessagesCard {
|
||||
.mx_PinnedMessagesCard_empty_wrapper {
|
||||
--unpin-height: 76px;
|
||||
|
||||
.mx_PinnedMessagesCard_wrapper {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
padding: var(--cpd-space-4x);
|
||||
gap: var(--cpd-space-6x);
|
||||
overflow-y: auto;
|
||||
|
||||
.mx_PinnedMessagesCard_empty {
|
||||
height: max-content;
|
||||
text-align: center;
|
||||
margin: auto 40px;
|
||||
|
||||
.mx_PinnedMessagesCard_MessageActionBar {
|
||||
pointer-events: none;
|
||||
width: max-content;
|
||||
margin: 0 auto;
|
||||
|
||||
/* Cancel the default values for non-interactivity */
|
||||
position: unset;
|
||||
visibility: visible;
|
||||
cursor: unset;
|
||||
|
||||
&::before {
|
||||
content: unset;
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_optionsButton {
|
||||
background: var(--MessageActionBar-item-hover-background);
|
||||
border-radius: var(--MessageActionBar-item-hover-borderRadius);
|
||||
z-index: var(--MessageActionBar-item-hover-zIndex);
|
||||
color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PinnedMessagesCard_empty_header {
|
||||
color: $primary-content;
|
||||
margin-block: $spacing-24 $spacing-20;
|
||||
}
|
||||
|
||||
> span {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-content;
|
||||
}
|
||||
.mx_PinnedMessagesCard_Separator {
|
||||
min-height: 1px;
|
||||
/* Override default compound value */
|
||||
margin-block: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PinnedMessagesCard_wrapper_unpin_all {
|
||||
/* Remove the unpin all button height and the top and bottom padding */
|
||||
height: calc(100% - var(--unpin-height) - calc(var(--cpd-space-4x) * 2));
|
||||
}
|
||||
|
||||
.mx_PinnedMessagesCard_unpin {
|
||||
/* Make it float at the bottom of the unpin panel */
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: var(--unpin-height);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 24px 0 rgba(27, 29, 34, 0.1);
|
||||
background: var(--cpd-color-bg-canvas-default);
|
||||
}
|
||||
|
||||
.mx_EventTile_body {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,95 +15,27 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_PinnedEventTile {
|
||||
min-height: 40px;
|
||||
width: 100%;
|
||||
padding: 0 4px 12px;
|
||||
display: flex;
|
||||
gap: var(--cpd-space-4x);
|
||||
align-items: flex-start;
|
||||
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"avatar name remove"
|
||||
"content content content"
|
||||
"footer footer footer";
|
||||
grid-template-rows: max-content auto max-content;
|
||||
grid-template-columns: 24px auto 24px;
|
||||
grid-row-gap: 12px;
|
||||
grid-column-gap: 8px;
|
||||
.mx_PinnedEventTile_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cpd-space-1x);
|
||||
width: 100%;
|
||||
|
||||
& + .mx_PinnedEventTile {
|
||||
padding: 12px 4px;
|
||||
border-top: 1px solid $menu-border-color;
|
||||
}
|
||||
.mx_PinnedEventTile_top {
|
||||
display: flex;
|
||||
gap: var(--cpd-space-1x);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.mx_PinnedEventTile_senderAvatar,
|
||||
.mx_PinnedEventTile_sender,
|
||||
.mx_PinnedEventTile_unpinButton,
|
||||
.mx_PinnedEventTile_message,
|
||||
.mx_PinnedEventTile_footer {
|
||||
min-width: 0; /* Prevent a grid blowout */
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile_senderAvatar {
|
||||
grid-area: avatar;
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile_sender {
|
||||
grid-area: name;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile_unpinButton {
|
||||
visibility: hidden;
|
||||
grid-area: remove;
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
background-color: $roomheader-addroom-bg-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
background: $secondary-content;
|
||||
mask-position: center;
|
||||
mask-size: 8px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url("$(res)/img/image-view/close.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile_message {
|
||||
grid-area: content;
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile_footer {
|
||||
grid-area: footer;
|
||||
font-size: $font-10px;
|
||||
line-height: 12px;
|
||||
|
||||
.mx_PinnedEventTile_timestamp {
|
||||
color: $secondary-content;
|
||||
display: unset;
|
||||
width: unset; /* Cancel the default width value */
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.mx_PinnedEventTile_unpinButton {
|
||||
visibility: visible;
|
||||
.mx_PinnedEventTile_sender {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ import ThreadView from "./ThreadView";
|
|||
import ThreadPanel from "./ThreadPanel";
|
||||
import NotificationPanel from "./NotificationPanel";
|
||||
import ResizeNotifier from "../../utils/ResizeNotifier";
|
||||
import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard";
|
||||
import { PinnedMessagesCard } from "../views/right_panel/PinnedMessagesCard";
|
||||
import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
|
||||
import { E2EStatus } from "../../utils/ShieldUtils";
|
||||
import TimelineCard from "../views/right_panel/TimelineCard";
|
||||
|
|
|
|||
77
src/components/views/dialogs/UnpinAllDialog.tsx
Normal file
77
src/components/views/dialogs/UnpinAllDialog.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
/*
|
||||
* 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 } from "react";
|
||||
import { Button, Text } from "@vector-im/compound-web";
|
||||
import { EventType, MatrixClient } from "matrix-js-sdk/src/matrix";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
import BaseDialog from "../dialogs/BaseDialog";
|
||||
import { _t } from "../../../languageHandler";
|
||||
|
||||
/**
|
||||
* Properties for {@link UnpinAllDialog}.
|
||||
*/
|
||||
interface UnpinAllDialogProps {
|
||||
/*
|
||||
* The matrix client to use.
|
||||
*/
|
||||
matrixClient: MatrixClient;
|
||||
/*
|
||||
* The room ID to unpin all events in.
|
||||
*/
|
||||
roomId: string;
|
||||
/*
|
||||
* Callback for when the dialog is closed.
|
||||
*/
|
||||
onFinished: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* A dialog that asks the user to confirm unpinning all events in a room.
|
||||
*/
|
||||
export function UnpinAllDialog({ matrixClient, roomId, onFinished }: UnpinAllDialogProps): JSX.Element {
|
||||
return (
|
||||
<BaseDialog
|
||||
hasCancel={true}
|
||||
title={_t("right_panel|pinned_messages|unpin_all|title")}
|
||||
titleClass="mx_UnpinAllDialog_title"
|
||||
className="mx_UnpinAllDialog"
|
||||
onFinished={onFinished}
|
||||
fixedWidth={false}
|
||||
>
|
||||
<Text as="span">{_t("right_panel|pinned_messages|unpin_all|content")}</Text>
|
||||
<div className="mx_UnpinAllDialog_buttons">
|
||||
<Button
|
||||
destructive={true}
|
||||
onClick={async () => {
|
||||
try {
|
||||
await matrixClient.sendStateEvent(roomId, EventType.RoomPinnedEvents, { pinned: [] }, "");
|
||||
} catch (e) {
|
||||
logger.error("Failed to unpin all events:", e);
|
||||
}
|
||||
onFinished();
|
||||
}}
|
||||
>
|
||||
{_t("action|continue")}
|
||||
</Button>
|
||||
<Button kind="tertiary" onClick={onFinished}>
|
||||
{_t("action|cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</BaseDialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -14,41 +14,62 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useCallback, useContext, useEffect, useState } from "react";
|
||||
import { Room, RoomEvent, RoomStateEvent, MatrixEvent, EventType, RelationType } from "matrix-js-sdk/src/matrix";
|
||||
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 { Button, Separator } from "@vector-im/compound-web";
|
||||
import classNames from "classnames";
|
||||
import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
|
||||
|
||||
import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg";
|
||||
import { Icon as EmojiIcon } from "../../../../res/img/element-icons/room/message-bar/emoji.svg";
|
||||
import { Icon as ReplyIcon } from "../../../../res/img/element-icons/room/message-bar/reply.svg";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import BaseCard from "./BaseCard";
|
||||
import Spinner from "../elements/Spinner";
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
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 { PinnedEventTile } from "../rooms/PinnedEventTile";
|
||||
import { useRoomState } from "../../../hooks/useRoomState";
|
||||
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
|
||||
import RoomContext, { TimelineRenderingType, useRoomContext } from "../../../contexts/RoomContext";
|
||||
import { ReadPinsEventId } from "./types";
|
||||
import Heading from "../typography/Heading";
|
||||
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
|
||||
import { filterBoolean } from "../../../utils/arrays";
|
||||
import Modal from "../../../Modal";
|
||||
import { UnpinAllDialog } from "../dialogs/UnpinAllDialog";
|
||||
import EmptyState from "./EmptyState";
|
||||
|
||||
interface IProps {
|
||||
room: Room;
|
||||
permalinkCreator: RoomPermalinkCreator;
|
||||
onClose(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the pinned event IDs from a room.
|
||||
* @param room
|
||||
*/
|
||||
function getPinnedEventIds(room?: Room): string[] {
|
||||
return room?.currentState.getStateEvents(EventType.RoomPinnedEvents, "")?.getContent()?.pinned ?? [];
|
||||
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;
|
||||
|
|
@ -57,7 +78,7 @@ export const usePinnedEvents = (room?: Room): string[] => {
|
|||
[room],
|
||||
);
|
||||
|
||||
useTypedEventEmitter(room?.currentState, RoomStateEvent.Events, update);
|
||||
useTypedEventEmitter(room?.getLiveTimeline().getState(EventTimeline.FORWARDS), RoomStateEvent.Events, update);
|
||||
useEffect(() => {
|
||||
setPinnedEvents(getPinnedEventIds(room));
|
||||
return () => {
|
||||
|
|
@ -67,13 +88,23 @@ export const usePinnedEvents = (room?: Room): string[] => {
|
|||
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;
|
||||
|
|
@ -92,36 +123,36 @@ export const useReadPinnedEvents = (room?: Room): Set<string> => {
|
|||
return readPinnedEvents;
|
||||
};
|
||||
|
||||
const PinnedMessagesCard: React.FC<IProps> = ({ room, onClose, permalinkCreator }) => {
|
||||
const cli = useContext(MatrixClientContext);
|
||||
const roomContext = useContext(RoomContext);
|
||||
const canUnpin = useRoomState(room, (state) => state.mayClientSendStateEvent(EventType.RoomPinnedEvents, cli));
|
||||
const pinnedEventIds = usePinnedEvents(room);
|
||||
const readPinnedEvents = useReadPinnedEvents(room);
|
||||
/**
|
||||
* Fetch the pinned events
|
||||
* @param room
|
||||
* @param pinnedEventIds
|
||||
*/
|
||||
function useFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Array<MatrixEvent | null> | null {
|
||||
const cli = useMatrixClientContext();
|
||||
|
||||
useEffect(() => {
|
||||
if (!cli || cli.isGuest()) return; // nothing to do
|
||||
const newlyRead = pinnedEventIds.filter((id) => !readPinnedEvents.has(id));
|
||||
if (newlyRead.length > 0) {
|
||||
// clear out any read pinned events which no longer are pinned
|
||||
cli.setRoomAccountData(room.roomId, ReadPinsEventId, {
|
||||
event_ids: pinnedEventIds,
|
||||
});
|
||||
}
|
||||
}, [cli, room.roomId, pinnedEventIds, readPinnedEvents]);
|
||||
|
||||
const pinnedEvents = useAsyncMemo(
|
||||
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 {
|
||||
// Fetch the event and latest edit in parallel
|
||||
// The event is not available locally, so we fetch the event and latest edit in parallel
|
||||
const [
|
||||
evJson,
|
||||
{
|
||||
|
|
@ -131,10 +162,15 @@ const PinnedMessagesCard: React.FC<IProps> = ({ room, onClose, permalinkCreator
|
|||
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); // TODO await?
|
||||
await cli.decryptEventIfNeeded(event);
|
||||
}
|
||||
|
||||
// Handle poll events
|
||||
await room.processPollEvents([event]);
|
||||
|
||||
const senderUserId = event.getSender();
|
||||
|
|
@ -158,62 +194,59 @@ const PinnedMessagesCard: React.FC<IProps> = ({ room, onClose, permalinkCreator
|
|||
[cli, room, pinnedEventIds],
|
||||
null,
|
||||
);
|
||||
}
|
||||
|
||||
let content: JSX.Element[] | JSX.Element | undefined;
|
||||
/**
|
||||
* List the pinned messages in a room inside a Card.
|
||||
*/
|
||||
interface PinnedMessagesCardProps {
|
||||
/**
|
||||
* The room to list the pinned messages for.
|
||||
*/
|
||||
room: Room;
|
||||
/**
|
||||
* Permalink of the room.
|
||||
*/
|
||||
permalinkCreator: RoomPermalinkCreator;
|
||||
/**
|
||||
* Callback for when the card is closed.
|
||||
*/
|
||||
onClose(): void;
|
||||
}
|
||||
|
||||
export function PinnedMessagesCard({ room, onClose, permalinkCreator }: PinnedMessagesCardProps): JSX.Element {
|
||||
const cli = useMatrixClientContext();
|
||||
const roomContext = useRoomContext();
|
||||
const pinnedEventIds = usePinnedEvents(room);
|
||||
const readPinnedEvents = useReadPinnedEvents(room);
|
||||
const pinnedEvents = useFetchedPinnedEvents(room, pinnedEventIds);
|
||||
|
||||
useEffect(() => {
|
||||
if (!cli || cli.isGuest()) return; // nothing to do
|
||||
const newlyRead = pinnedEventIds.filter((id) => !readPinnedEvents.has(id));
|
||||
if (newlyRead.length > 0) {
|
||||
// clear out any read pinned events which no longer are pinned
|
||||
cli.setRoomAccountData(room.roomId, ReadPinsEventId, {
|
||||
event_ids: pinnedEventIds,
|
||||
});
|
||||
}
|
||||
}, [cli, room.roomId, pinnedEventIds, readPinnedEvents]);
|
||||
|
||||
let content: JSX.Element;
|
||||
if (!pinnedEventIds.length) {
|
||||
content = (
|
||||
<div className="mx_PinnedMessagesCard_empty_wrapper">
|
||||
<div className="mx_PinnedMessagesCard_empty">
|
||||
{/* XXX: We reuse the classes for simplicity, but deliberately not the components for non-interactivity. */}
|
||||
<div className="mx_MessageActionBar mx_PinnedMessagesCard_MessageActionBar">
|
||||
<div className="mx_MessageActionBar_iconButton">
|
||||
<EmojiIcon />
|
||||
</div>
|
||||
<div className="mx_MessageActionBar_iconButton">
|
||||
<ReplyIcon />
|
||||
</div>
|
||||
<div className="mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton">
|
||||
<ContextMenuIcon />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Heading size="4" className="mx_PinnedMessagesCard_empty_header">
|
||||
{_t("right_panel|pinned_messages|empty")}
|
||||
</Heading>
|
||||
{_t(
|
||||
"right_panel|pinned_messages|explainer",
|
||||
{},
|
||||
{
|
||||
b: (sub) => <b>{sub}</b>,
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<EmptyState
|
||||
Icon={PinIcon}
|
||||
title={_t("right_panel|pinned_messages|empty_title")}
|
||||
description={_t("right_panel|pinned_messages|empty_description", {
|
||||
pinAction: _t("action|pin"),
|
||||
})}
|
||||
/>
|
||||
);
|
||||
} else if (pinnedEvents?.length) {
|
||||
const onUnpinClicked = async (event: MatrixEvent): Promise<void> => {
|
||||
const pinnedEvents = room.currentState.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 cli.sendStateEvent(room.roomId, EventType.RoomPinnedEvents, { pinned }, "");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// show them in reverse, with latest pinned at the top
|
||||
content = filterBoolean(pinnedEvents)
|
||||
.reverse()
|
||||
.map((ev) => (
|
||||
<PinnedEventTile
|
||||
key={ev.getId()}
|
||||
event={ev}
|
||||
onUnpinClicked={canUnpin ? () => onUnpinClicked(ev) : undefined}
|
||||
permalinkCreator={permalinkCreator}
|
||||
/>
|
||||
));
|
||||
content = (
|
||||
<PinnedMessages events={filterBoolean(pinnedEvents)} room={room} permalinkCreator={permalinkCreator} />
|
||||
);
|
||||
} else {
|
||||
content = <Spinner />;
|
||||
}
|
||||
|
|
@ -223,7 +256,7 @@ const PinnedMessagesCard: React.FC<IProps> = ({ room, onClose, permalinkCreator
|
|||
header={
|
||||
<div className="mx_BaseCard_header_title">
|
||||
<Heading size="4" className="mx_BaseCard_header_title_heading">
|
||||
{_t("right_panel|pinned_messages|title")}
|
||||
{_t("right_panel|pinned_messages|header", { count: pinnedEventIds.length })}
|
||||
</Heading>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -240,6 +273,79 @@ const PinnedMessagesCard: React.FC<IProps> = ({ room, onClose, permalinkCreator
|
|||
</RoomContext.Provider>
|
||||
</BaseCard>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default PinnedMessagesCard;
|
||||
/**
|
||||
* The pinned messages in a room.
|
||||
*/
|
||||
interface PinnedMessagesProps {
|
||||
/**
|
||||
* The pinned events.
|
||||
*/
|
||||
events: MatrixEvent[];
|
||||
/**
|
||||
* The room the events are in.
|
||||
*/
|
||||
room: Room;
|
||||
/**
|
||||
* The permalink creator to use.
|
||||
*/
|
||||
permalinkCreator: RoomPermalinkCreator;
|
||||
}
|
||||
|
||||
/**
|
||||
* The pinned messages in a room.
|
||||
*/
|
||||
function PinnedMessages({ events, room, permalinkCreator }: PinnedMessagesProps): JSX.Element {
|
||||
const matrixClient = useMatrixClientContext();
|
||||
|
||||
/**
|
||||
* Whether the client can unpin events from the room.
|
||||
*/
|
||||
const canUnpin = useRoomState(room, (state) =>
|
||||
state.mayClientSendStateEvent(EventType.RoomPinnedEvents, matrixClient),
|
||||
);
|
||||
|
||||
/**
|
||||
* Opens the unpin all dialog.
|
||||
*/
|
||||
const onUnpinAll = useCallback(async (): Promise<void> => {
|
||||
Modal.createDialog(UnpinAllDialog, {
|
||||
roomId: room.roomId,
|
||||
matrixClient,
|
||||
});
|
||||
}, [room, matrixClient]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={classNames("mx_PinnedMessagesCard_wrapper", {
|
||||
mx_PinnedMessagesCard_wrapper_unpin_all: canUnpin,
|
||||
})}
|
||||
role="list"
|
||||
>
|
||||
{events.reverse().map((event, i) => (
|
||||
<>
|
||||
<PinnedEventTile
|
||||
key={event.getId()}
|
||||
event={event}
|
||||
permalinkCreator={permalinkCreator}
|
||||
room={room}
|
||||
/>
|
||||
{/* Add a separator if this isn't the last pinned message */}
|
||||
{events.length - 1 !== i && (
|
||||
<Separator key={`separator-${event.getId()}`} className="mx_PinnedMessagesCard_Separator" />
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
{canUnpin && (
|
||||
<div className="mx_PinnedMessagesCard_unpin">
|
||||
<Button kind="tertiary" onClick={onUnpinAll}>
|
||||
{_t("right_panel|pinned_messages|unpin_all|button")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1839,12 +1839,24 @@
|
|||
"files_button": "Files",
|
||||
"info": "Info",
|
||||
"pinned_messages": {
|
||||
"empty": "Nothing pinned, yet",
|
||||
"explainer": "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.",
|
||||
"empty_description": "Select a message and choose “%(pinAction)s” to it include here.",
|
||||
"empty_title": "Pin important messages so that they can be easily discovered",
|
||||
"header": {
|
||||
"one": "1 Pinned message",
|
||||
"other": "%(count)s Pinned messages",
|
||||
"zero": "Pinned message"
|
||||
},
|
||||
"limits": {
|
||||
"other": "You can only pin up to %(count)s widgets"
|
||||
},
|
||||
"title": "Pinned messages"
|
||||
"menu": "Open menu",
|
||||
"title": "Pinned messages",
|
||||
"unpin_all": {
|
||||
"button": "Unpin all messages",
|
||||
"content": "Make sure that you really want to remove all pinned messages. This action can’t be undone.",
|
||||
"title": "Unpin all messages?"
|
||||
},
|
||||
"view": "View in timeline"
|
||||
},
|
||||
"pinned_messages_button": "Pinned messages",
|
||||
"poll": {
|
||||
|
|
|
|||
46
test/components/views/dialogs/UnpinAllDialog-test.tsx
Normal file
46
test/components/views/dialogs/UnpinAllDialog-test.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/*
|
||||
* 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 from "react";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { EventType } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import { UnpinAllDialog } from "../../../../src/components/views/dialogs/UnpinAllDialog";
|
||||
import { createTestClient } from "../../../test-utils";
|
||||
|
||||
describe("<UnpinAllDialog />", () => {
|
||||
const client = createTestClient();
|
||||
const roomId = "!room:example.org";
|
||||
|
||||
function renderDialog(onFinished = jest.fn()) {
|
||||
return render(<UnpinAllDialog matrixClient={client} roomId={roomId} onFinished={onFinished} />);
|
||||
}
|
||||
|
||||
it("should render", () => {
|
||||
const { asFragment } = renderDialog();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should remove all pinned events when clicked on Continue", async () => {
|
||||
const onFinished = jest.fn();
|
||||
renderDialog(onFinished);
|
||||
|
||||
await userEvent.click(screen.getByText("Continue"));
|
||||
expect(client.sendStateEvent).toHaveBeenCalledWith(roomId, EventType.RoomPinnedEvents, { pinned: [] }, "");
|
||||
expect(onFinished).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<UnpinAllDialog /> should render 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
aria-labelledby="mx_BaseDialog_title"
|
||||
class="mx_UnpinAllDialog"
|
||||
data-focus-lock-disabled="false"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title mx_UnpinAllDialog_title"
|
||||
id="mx_BaseDialog_title"
|
||||
>
|
||||
Unpin all messages?
|
||||
</h1>
|
||||
</div>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
|
||||
>
|
||||
Make sure that you really want to remove all pinned messages. This action can’t be undone.
|
||||
</span>
|
||||
<div
|
||||
class="mx_UnpinAllDialog_buttons"
|
||||
>
|
||||
<button
|
||||
class="_button_zt6rp_17 _destructive_zt6rp_111"
|
||||
data-kind="primary"
|
||||
data-size="lg"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
<button
|
||||
class="_button_zt6rp_17"
|
||||
data-kind="tertiary"
|
||||
data-size="lg"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
|
@ -15,37 +15,44 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from "react";
|
||||
import { render, act, RenderResult, fireEvent, waitForElementToBeRemoved, screen } from "@testing-library/react";
|
||||
import { mocked } from "jest-mock";
|
||||
import { render, act, RenderResult, waitForElementToBeRemoved, screen } from "@testing-library/react";
|
||||
import { mocked, MockedObject } from "jest-mock";
|
||||
import {
|
||||
MatrixEvent,
|
||||
RoomStateEvent,
|
||||
IEvent,
|
||||
Room,
|
||||
EventTimelineSet,
|
||||
IMinimalEvent,
|
||||
EventType,
|
||||
RelationType,
|
||||
MsgType,
|
||||
M_POLL_KIND_DISCLOSED,
|
||||
EventTimeline,
|
||||
MatrixClient,
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
|
||||
import { PollResponseEvent } from "matrix-js-sdk/src/extensible_events_v1/PollResponseEvent";
|
||||
import { PollEndEvent } from "matrix-js-sdk/src/extensible_events_v1/PollEndEvent";
|
||||
import { sleep } from "matrix-js-sdk/src/utils";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
import { stubClient, mkEvent, mkMessage, flushPromises } from "../../../test-utils";
|
||||
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
|
||||
import PinnedMessagesCard from "../../../../src/components/views/right_panel/PinnedMessagesCard";
|
||||
import { PinnedMessagesCard } from "../../../../src/components/views/right_panel/PinnedMessagesCard";
|
||||
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
|
||||
import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
|
||||
import Modal from "../../../../src/Modal";
|
||||
import { UnpinAllDialog } from "../../../../src/components/views/dialogs/UnpinAllDialog";
|
||||
|
||||
describe("<PinnedMessagesCard />", () => {
|
||||
stubClient();
|
||||
const cli = mocked(MatrixClientPeg.safeGet());
|
||||
cli.getUserId.mockReturnValue("@alice:example.org");
|
||||
cli.setRoomAccountData.mockResolvedValue({});
|
||||
cli.relations.mockResolvedValue({ originalEvent: {} as unknown as MatrixEvent, events: [] });
|
||||
let cli: MockedObject<MatrixClient>;
|
||||
beforeEach(() => {
|
||||
stubClient();
|
||||
cli = mocked(MatrixClientPeg.safeGet());
|
||||
cli.getUserId.mockReturnValue("@alice:example.org");
|
||||
cli.setRoomAccountData.mockResolvedValue({});
|
||||
cli.relations.mockResolvedValue({ originalEvent: {} as unknown as MatrixEvent, events: [] });
|
||||
});
|
||||
|
||||
const mkRoom = (localPins: MatrixEvent[], nonLocalPins: MatrixEvent[]): Room => {
|
||||
const room = new Room("!room:example.org", cli, "@me:example.org");
|
||||
|
|
@ -53,27 +60,27 @@ describe("<PinnedMessagesCard />", () => {
|
|||
const pins = () => [...localPins, ...nonLocalPins];
|
||||
|
||||
// Insert pin IDs into room state
|
||||
jest.spyOn(room.currentState, "getStateEvents").mockImplementation((): any =>
|
||||
mkEvent({
|
||||
event: true,
|
||||
type: EventType.RoomPinnedEvents,
|
||||
content: {
|
||||
pinned: pins().map((e) => e.getId()),
|
||||
},
|
||||
user: "@user:example.org",
|
||||
room: "!room:example.org",
|
||||
}),
|
||||
jest.spyOn(room.getLiveTimeline().getState(EventTimeline.FORWARDS)!, "getStateEvents").mockImplementation(
|
||||
(): any =>
|
||||
mkEvent({
|
||||
event: true,
|
||||
type: EventType.RoomPinnedEvents,
|
||||
content: {
|
||||
pinned: pins().map((e) => e.getId()),
|
||||
},
|
||||
user: "@user:example.org",
|
||||
room: "!room:example.org",
|
||||
}),
|
||||
);
|
||||
|
||||
jest.spyOn(room.currentState, "on");
|
||||
|
||||
// Insert local pins into local timeline set
|
||||
room.getUnfilteredTimelineSet = () =>
|
||||
({
|
||||
getTimelineForEvent: () => ({
|
||||
getEvents: () => localPins,
|
||||
}),
|
||||
}) as unknown as EventTimelineSet;
|
||||
jest.spyOn(room.getLiveTimeline().getState(EventTimeline.FORWARDS)!, "mayClientSendStateEvent").mockReturnValue(
|
||||
true,
|
||||
);
|
||||
// poll end event validates against this
|
||||
jest.spyOn(
|
||||
room.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
|
||||
"maySendRedactionForEvent",
|
||||
).mockReturnValue(true);
|
||||
|
||||
// Return all pins over fetchRoomEvent
|
||||
cli.fetchRoomEvent.mockImplementation((roomId, eventId) => {
|
||||
|
|
@ -86,8 +93,8 @@ describe("<PinnedMessagesCard />", () => {
|
|||
return room;
|
||||
};
|
||||
|
||||
const mountPins = async (room: Room): Promise<RenderResult> => {
|
||||
const pins = render(
|
||||
async function renderMessagePinList(room: Room): Promise<RenderResult> {
|
||||
const renderResult = render(
|
||||
<MatrixClientContext.Provider value={cli}>
|
||||
<PinnedMessagesCard
|
||||
room={room}
|
||||
|
|
@ -99,22 +106,60 @@ describe("<PinnedMessagesCard />", () => {
|
|||
// Wait a tick for state updates
|
||||
await act(() => sleep(0));
|
||||
|
||||
return pins;
|
||||
};
|
||||
|
||||
const emitPinUpdates = async (room: Room) => {
|
||||
const pinListener = mocked(room.currentState).on.mock.calls.find(
|
||||
([eventName, listener]) => eventName === RoomStateEvent.Events,
|
||||
)![1];
|
||||
return renderResult;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param room
|
||||
*/
|
||||
async function emitPinUpdate(room: Room) {
|
||||
await act(async () => {
|
||||
// Emit the update
|
||||
// @ts-ignore what is going on here?
|
||||
pinListener(room.currentState.getStateEvents());
|
||||
// Wait a tick for state updates
|
||||
await sleep(0);
|
||||
const roomState = room.getLiveTimeline().getState(EventTimeline.FORWARDS)!;
|
||||
roomState.emit(
|
||||
RoomStateEvent.Events,
|
||||
new MatrixEvent({ type: EventType.RoomPinnedEvents }),
|
||||
roomState,
|
||||
null,
|
||||
);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the pinned messages card with the given pinned messages.
|
||||
* Return the room, testing library helpers and functions to add and remove pinned messages.
|
||||
* @param localPins
|
||||
* @param nonLocalPins
|
||||
*/
|
||||
async function initPinnedMessagesCard(localPins: MatrixEvent[], nonLocalPins: MatrixEvent[]) {
|
||||
const room = mkRoom(localPins, nonLocalPins);
|
||||
const addLocalPinEvent = async (event: MatrixEvent) => {
|
||||
localPins.push(event);
|
||||
await emitPinUpdate(room);
|
||||
};
|
||||
const removeLastLocalPinEvent = async () => {
|
||||
localPins.pop();
|
||||
await emitPinUpdate(room);
|
||||
};
|
||||
const addNonLocalPinEvent = async (event: MatrixEvent) => {
|
||||
nonLocalPins.push(event);
|
||||
await emitPinUpdate(room);
|
||||
};
|
||||
const removeLastNonLocalPinEvent = async () => {
|
||||
nonLocalPins.pop();
|
||||
await emitPinUpdate(room);
|
||||
};
|
||||
const renderResult = await renderMessagePinList(room);
|
||||
|
||||
return {
|
||||
...renderResult,
|
||||
addLocalPinEvent,
|
||||
removeLastLocalPinEvent,
|
||||
addNonLocalPinEvent,
|
||||
removeLastNonLocalPinEvent,
|
||||
room,
|
||||
};
|
||||
}
|
||||
|
||||
const pin1 = mkMessage({
|
||||
event: true,
|
||||
|
|
@ -129,75 +174,66 @@ describe("<PinnedMessagesCard />", () => {
|
|||
msg: "The second one",
|
||||
});
|
||||
|
||||
it("updates when messages are pinned", async () => {
|
||||
it("should show spinner whilst loading", async () => {
|
||||
const room = mkRoom([], [pin1]);
|
||||
render(
|
||||
<MatrixClientContext.Provider value={cli}>
|
||||
<PinnedMessagesCard
|
||||
room={room}
|
||||
onClose={jest.fn()}
|
||||
permalinkCreator={new RoomPermalinkCreator(room, room.roomId)}
|
||||
/>
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar"));
|
||||
});
|
||||
|
||||
it("should show the empty state when there are no pins", async () => {
|
||||
const { asFragment } = await initPinnedMessagesCard([], []);
|
||||
|
||||
expect(screen.getByText("Pin important messages so that they can be easily discovered")).toBeInTheDocument();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should show two pinned messages", async () => {
|
||||
//const room = mkRoom([pin1], [pin2]);
|
||||
const { asFragment } = await initPinnedMessagesCard([pin1], [pin2]);
|
||||
|
||||
expect(screen.queryAllByRole("listitem")).toHaveLength(2);
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should updates when messages are pinned", async () => {
|
||||
// Start with nothing pinned
|
||||
const localPins: MatrixEvent[] = [];
|
||||
const nonLocalPins: MatrixEvent[] = [];
|
||||
const room = mkRoom(localPins, nonLocalPins);
|
||||
const pins = await mountPins(room);
|
||||
expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(0);
|
||||
const { addLocalPinEvent, addNonLocalPinEvent } = await initPinnedMessagesCard([], []);
|
||||
|
||||
expect(screen.queryAllByRole("listitem")).toHaveLength(0);
|
||||
|
||||
// Pin the first message
|
||||
localPins.push(pin1);
|
||||
await emitPinUpdates(room);
|
||||
expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(1);
|
||||
await addLocalPinEvent(pin1);
|
||||
expect(screen.getAllByRole("listitem")).toHaveLength(1);
|
||||
|
||||
// Pin the second message
|
||||
nonLocalPins.push(pin2);
|
||||
await emitPinUpdates(room);
|
||||
expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(2);
|
||||
await addNonLocalPinEvent(pin2);
|
||||
expect(screen.getAllByRole("listitem")).toHaveLength(2);
|
||||
});
|
||||
|
||||
it("updates when messages are unpinned", async () => {
|
||||
it("should updates when messages are unpinned", async () => {
|
||||
// Start with two pins
|
||||
const localPins = [pin1];
|
||||
const nonLocalPins = [pin2];
|
||||
const room = mkRoom(localPins, nonLocalPins);
|
||||
const pins = await mountPins(room);
|
||||
expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(2);
|
||||
const { removeLastLocalPinEvent, removeLastNonLocalPinEvent } = await initPinnedMessagesCard([pin1], [pin2]);
|
||||
expect(screen.getAllByRole("listitem")).toHaveLength(2);
|
||||
|
||||
// Unpin the first message
|
||||
localPins.pop();
|
||||
await emitPinUpdates(room);
|
||||
expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(1);
|
||||
await removeLastLocalPinEvent();
|
||||
expect(screen.getAllByRole("listitem")).toHaveLength(1);
|
||||
|
||||
// Unpin the second message
|
||||
nonLocalPins.pop();
|
||||
await emitPinUpdates(room);
|
||||
expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(0);
|
||||
await removeLastNonLocalPinEvent();
|
||||
expect(screen.queryAllByRole("listitem")).toHaveLength(0);
|
||||
});
|
||||
|
||||
it("hides unpinnable events found in local timeline", async () => {
|
||||
// Redacted messages are unpinnable
|
||||
const pin = mkEvent({
|
||||
event: true,
|
||||
type: EventType.RoomMessage,
|
||||
content: {},
|
||||
unsigned: { redacted_because: {} as unknown as IEvent },
|
||||
room: "!room:example.org",
|
||||
user: "@alice:example.org",
|
||||
});
|
||||
|
||||
const pins = await mountPins(mkRoom([pin], []));
|
||||
expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(0);
|
||||
});
|
||||
|
||||
it("hides unpinnable events not found in local timeline", async () => {
|
||||
// Redacted messages are unpinnable
|
||||
const pin = mkEvent({
|
||||
event: true,
|
||||
type: EventType.RoomMessage,
|
||||
content: {},
|
||||
unsigned: { redacted_because: {} as unknown as IEvent },
|
||||
room: "!room:example.org",
|
||||
user: "@alice:example.org",
|
||||
});
|
||||
|
||||
const pins = await mountPins(mkRoom([], [pin]));
|
||||
expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(0);
|
||||
});
|
||||
|
||||
it("accounts for edits", async () => {
|
||||
it("should display an edited pinned event", async () => {
|
||||
const messageEvent = mkEvent({
|
||||
event: true,
|
||||
type: EventType.RoomMessage,
|
||||
|
|
@ -221,13 +257,78 @@ describe("<PinnedMessagesCard />", () => {
|
|||
events: [messageEvent],
|
||||
});
|
||||
|
||||
const pins = await mountPins(mkRoom([], [pin1]));
|
||||
const pinTile = pins.container.querySelectorAll(".mx_PinnedEventTile");
|
||||
expect(pinTile.length).toBe(1);
|
||||
expect(pinTile[0].querySelector(".mx_EventTile_body")!).toHaveTextContent("First pinned message, edited");
|
||||
await initPinnedMessagesCard([], [pin1]);
|
||||
expect(screen.getByText("First pinned message, edited")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("displays votes on polls not found in local timeline", async () => {
|
||||
describe("unpinnable event", () => {
|
||||
it("should hide unpinnable events found in local timeline", async () => {
|
||||
// Redacted messages are unpinnable
|
||||
const pin = mkEvent({
|
||||
event: true,
|
||||
type: EventType.RoomMessage,
|
||||
content: {},
|
||||
unsigned: { redacted_because: {} as unknown as IEvent },
|
||||
room: "!room:example.org",
|
||||
user: "@alice:example.org",
|
||||
});
|
||||
await initPinnedMessagesCard([pin], []);
|
||||
expect(screen.queryAllByRole("listitem")).toHaveLength(0);
|
||||
});
|
||||
|
||||
it("hides unpinnable events not found in local timeline", async () => {
|
||||
// Redacted messages are unpinnable
|
||||
const pin = mkEvent({
|
||||
event: true,
|
||||
type: EventType.RoomMessage,
|
||||
content: {},
|
||||
unsigned: { redacted_because: {} as unknown as IEvent },
|
||||
room: "!room:example.org",
|
||||
user: "@alice:example.org",
|
||||
});
|
||||
await initPinnedMessagesCard([], [pin]);
|
||||
expect(screen.queryAllByRole("listitem")).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("unpin all", () => {
|
||||
it("should not allow to unpinall", async () => {
|
||||
const room = mkRoom([pin1], [pin2]);
|
||||
jest.spyOn(
|
||||
room.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
|
||||
"mayClientSendStateEvent",
|
||||
).mockReturnValue(false);
|
||||
|
||||
const { asFragment } = render(
|
||||
<MatrixClientContext.Provider value={cli}>
|
||||
<PinnedMessagesCard
|
||||
room={room}
|
||||
onClose={jest.fn()}
|
||||
permalinkCreator={new RoomPermalinkCreator(room, room.roomId)}
|
||||
/>
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
// Wait a tick for state updates
|
||||
await act(() => sleep(0));
|
||||
|
||||
expect(screen.queryByText("Unpin all messages")).toBeNull();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should allow unpinning all messages", async () => {
|
||||
jest.spyOn(Modal, "createDialog");
|
||||
|
||||
const { room } = await initPinnedMessagesCard([pin1], [pin2]);
|
||||
expect(screen.getByText("Unpin all messages")).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(screen.getByText("Unpin all messages"));
|
||||
// Should open the UnpinAllDialog dialog
|
||||
expect(Modal.createDialog).toHaveBeenCalledWith(UnpinAllDialog, { roomId: room.roomId, matrixClient: cli });
|
||||
});
|
||||
});
|
||||
|
||||
it("should displays votes on polls not found in local timeline", async () => {
|
||||
const poll = mkEvent({
|
||||
...PollStartEvent.from("A poll", ["Option 1", "Option 2"], M_POLL_KIND_DISCLOSED).serialize(),
|
||||
event: true,
|
||||
|
|
@ -270,11 +371,8 @@ describe("<PinnedMessagesCard />", () => {
|
|||
return { originalEvent: undefined as unknown as MatrixEvent, events: [] };
|
||||
});
|
||||
|
||||
const room = mkRoom([], [poll]);
|
||||
// poll end event validates against this
|
||||
jest.spyOn(room.currentState, "maySendRedactionForEvent").mockReturnValue(true);
|
||||
const { room } = await initPinnedMessagesCard([], [poll]);
|
||||
|
||||
const pins = await mountPins(room);
|
||||
// two pages of results
|
||||
await flushPromises();
|
||||
await flushPromises();
|
||||
|
|
@ -282,34 +380,12 @@ describe("<PinnedMessagesCard />", () => {
|
|||
const pollInstance = room.polls.get(poll.getId()!);
|
||||
expect(pollInstance).toBeTruthy();
|
||||
|
||||
const pinTile = pins.container.querySelectorAll(".mx_MPollBody");
|
||||
expect(screen.getByText("A poll")).toBeInTheDocument();
|
||||
|
||||
expect(pinTile).toHaveLength(1);
|
||||
expect(pinTile[0].querySelectorAll(".mx_PollOption_ended")).toHaveLength(2);
|
||||
expect(pinTile[0].querySelectorAll(".mx_PollOption_optionVoteCount")[0]).toHaveTextContent("2 votes");
|
||||
expect([...pinTile[0].querySelectorAll(".mx_PollOption_optionVoteCount")].at(-1)).toHaveTextContent("1 vote");
|
||||
});
|
||||
expect(screen.getByText("Option 1")).toBeInTheDocument();
|
||||
expect(screen.getByText("2 votes")).toBeInTheDocument();
|
||||
|
||||
it("should allow admins to unpin messages", async () => {
|
||||
const nonLocalPins = [pin1];
|
||||
const room = mkRoom([], nonLocalPins);
|
||||
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
|
||||
const sendStateEvent = jest.spyOn(cli, "sendStateEvent");
|
||||
|
||||
const pins = await mountPins(room);
|
||||
const pinTile = pins.container.querySelectorAll(".mx_PinnedEventTile");
|
||||
expect(pinTile).toHaveLength(1);
|
||||
|
||||
fireEvent.click(pinTile[0].querySelector(".mx_PinnedEventTile_unpinButton")!);
|
||||
expect(sendStateEvent).toHaveBeenCalledWith(room.roomId, "m.room.pinned_events", { pinned: [] }, "");
|
||||
|
||||
nonLocalPins.pop();
|
||||
await Promise.all([waitForElementToBeRemoved(pinTile[0]), emitPinUpdates(room)]);
|
||||
});
|
||||
|
||||
it("should show spinner whilst loading", async () => {
|
||||
const room = mkRoom([], [pin1]);
|
||||
mountPins(room);
|
||||
await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar"));
|
||||
expect(screen.getByText("Option 2")).toBeInTheDocument();
|
||||
expect(screen.getByText("1 vote")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,457 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<PinnedMessagesCard /> should show the empty state when there are no pins 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_BaseCard mx_PinnedMessagesCard"
|
||||
>
|
||||
<div
|
||||
class="mx_BaseCard_header"
|
||||
>
|
||||
<div
|
||||
class="mx_BaseCard_header_title"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_h4 mx_BaseCard_header_title_heading"
|
||||
>
|
||||
Pinned message
|
||||
</h4>
|
||||
</div>
|
||||
<button
|
||||
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
|
||||
data-testid="base-card-close-button"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 28px;"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="_indicator-icon_133tf_26"
|
||||
style="--cpd-icon-button-size: 100%;"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AutoHideScrollbar"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_Flex mx_EmptyState"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
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>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
|
||||
>
|
||||
Pin important messages so that they can be easily discovered
|
||||
</p>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
|
||||
>
|
||||
Select a message and choose “Pin” to it include here.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_BaseCard mx_PinnedMessagesCard"
|
||||
>
|
||||
<div
|
||||
class="mx_BaseCard_header"
|
||||
>
|
||||
<div
|
||||
class="mx_BaseCard_header_title"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_h4 mx_BaseCard_header_title_heading"
|
||||
>
|
||||
2 Pinned messages
|
||||
</h4>
|
||||
</div>
|
||||
<button
|
||||
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
|
||||
data-testid="base-card-close-button"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 28px;"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="_indicator-icon_133tf_26"
|
||||
style="--cpd-icon-button-size: 100%;"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AutoHideScrollbar"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_PinnedMessagesCard_wrapper mx_PinnedMessagesCard_wrapper_unpin_all"
|
||||
role="list"
|
||||
>
|
||||
<div
|
||||
class="mx_PinnedEventTile"
|
||||
role="listitem"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
|
||||
data-color="3"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 32px;"
|
||||
>
|
||||
a
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PinnedEventTile_wrapper"
|
||||
>
|
||||
<div
|
||||
class="mx_PinnedEventTile_top"
|
||||
>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
|
||||
>
|
||||
@alice:example.org
|
||||
</span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="menu"
|
||||
aria-label="Open menu"
|
||||
class="_icon-button_bh2qc_17"
|
||||
data-state="closed"
|
||||
id="radix-2"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 24px;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="_indicator-icon_133tf_26"
|
||||
style="--cpd-icon-button-size: 100%;"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_MTextBody mx_EventTile_content"
|
||||
>
|
||||
<div
|
||||
class="mx_EventTile_body translate"
|
||||
dir="auto"
|
||||
>
|
||||
The second one
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="_separator_144s5_17 mx_PinnedMessagesCard_Separator"
|
||||
data-kind="primary"
|
||||
data-orientation="horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
<div
|
||||
class="mx_PinnedEventTile"
|
||||
role="listitem"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
|
||||
data-color="3"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 32px;"
|
||||
>
|
||||
a
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PinnedEventTile_wrapper"
|
||||
>
|
||||
<div
|
||||
class="mx_PinnedEventTile_top"
|
||||
>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
|
||||
>
|
||||
@alice:example.org
|
||||
</span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="menu"
|
||||
aria-label="Open menu"
|
||||
class="_icon-button_bh2qc_17"
|
||||
data-state="closed"
|
||||
id="radix-3"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 24px;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="_indicator-icon_133tf_26"
|
||||
style="--cpd-icon-button-size: 100%;"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_MTextBody mx_EventTile_content"
|
||||
>
|
||||
<div
|
||||
class="mx_EventTile_body translate"
|
||||
dir="auto"
|
||||
>
|
||||
First pinned message
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PinnedMessagesCard_unpin"
|
||||
>
|
||||
<button
|
||||
class="_button_zt6rp_17"
|
||||
data-kind="tertiary"
|
||||
data-size="lg"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Unpin all messages
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_BaseCard mx_PinnedMessagesCard"
|
||||
>
|
||||
<div
|
||||
class="mx_BaseCard_header"
|
||||
>
|
||||
<div
|
||||
class="mx_BaseCard_header_title"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_h4 mx_BaseCard_header_title_heading"
|
||||
>
|
||||
2 Pinned messages
|
||||
</h4>
|
||||
</div>
|
||||
<button
|
||||
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
|
||||
data-testid="base-card-close-button"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 28px;"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="_indicator-icon_133tf_26"
|
||||
style="--cpd-icon-button-size: 100%;"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AutoHideScrollbar"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_PinnedMessagesCard_wrapper"
|
||||
role="list"
|
||||
>
|
||||
<div
|
||||
class="mx_PinnedEventTile"
|
||||
role="listitem"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
|
||||
data-color="3"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 32px;"
|
||||
>
|
||||
a
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PinnedEventTile_wrapper"
|
||||
>
|
||||
<div
|
||||
class="mx_PinnedEventTile_top"
|
||||
>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
|
||||
>
|
||||
@alice:example.org
|
||||
</span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="menu"
|
||||
aria-label="Open menu"
|
||||
class="_icon-button_bh2qc_17"
|
||||
data-state="closed"
|
||||
id="radix-18"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 24px;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="_indicator-icon_133tf_26"
|
||||
style="--cpd-icon-button-size: 100%;"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_MTextBody mx_EventTile_content"
|
||||
>
|
||||
<div
|
||||
class="mx_EventTile_body translate"
|
||||
dir="auto"
|
||||
>
|
||||
The second one
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="_separator_144s5_17 mx_PinnedMessagesCard_Separator"
|
||||
data-kind="primary"
|
||||
data-orientation="horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
<div
|
||||
class="mx_PinnedEventTile"
|
||||
role="listitem"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
|
||||
data-color="3"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 32px;"
|
||||
>
|
||||
a
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PinnedEventTile_wrapper"
|
||||
>
|
||||
<div
|
||||
class="mx_PinnedEventTile_top"
|
||||
>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
|
||||
>
|
||||
@alice:example.org
|
||||
</span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="menu"
|
||||
aria-label="Open menu"
|
||||
class="_icon-button_bh2qc_17"
|
||||
data-state="closed"
|
||||
id="radix-19"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 24px;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="_indicator-icon_133tf_26"
|
||||
style="--cpd-icon-button-size: 100%;"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_MTextBody mx_EventTile_content"
|
||||
>
|
||||
<div
|
||||
class="mx_EventTile_body translate"
|
||||
dir="auto"
|
||||
>
|
||||
First pinned message
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
|
@ -15,32 +15,44 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from "react";
|
||||
import { render } from "@testing-library/react";
|
||||
import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import { EventTimeline, EventType, IEvent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
|
||||
import PinnedEventTile from "../../../../src/components/views/rooms/PinnedEventTile";
|
||||
import { getMockClientWithEventEmitter } from "../../../test-utils";
|
||||
import { PinnedEventTile } from "../../../../src/components/views/rooms/PinnedEventTile";
|
||||
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
|
||||
import { stubClient } from "../../../test-utils";
|
||||
import dis from "../../../../src/dispatcher/dispatcher";
|
||||
import { Action } from "../../../../src/dispatcher/actions";
|
||||
import { getForwardableEvent } from "../../../../src/events";
|
||||
import { createRedactEventDialog } from "../../../../src/components/views/dialogs/ConfirmRedactDialog";
|
||||
|
||||
jest.mock("../../../../src/components/views/dialogs/ConfirmRedactDialog", () => ({
|
||||
createRedactEventDialog: jest.fn(),
|
||||
}));
|
||||
|
||||
describe("<PinnedEventTile />", () => {
|
||||
const userId = "@alice:server.org";
|
||||
const roomId = "!room:server.org";
|
||||
const mockClient = getMockClientWithEventEmitter({
|
||||
getRoom: jest.fn(),
|
||||
});
|
||||
const room = new Room(roomId, mockClient, userId);
|
||||
const permalinkCreator = new RoomPermalinkCreator(room);
|
||||
|
||||
const getComponent = (event: MatrixEvent) =>
|
||||
render(<PinnedEventTile permalinkCreator={permalinkCreator} event={event} />);
|
||||
|
||||
let mockClient: MatrixClient;
|
||||
let room: Room;
|
||||
let permalinkCreator: RoomPermalinkCreator;
|
||||
beforeEach(() => {
|
||||
mockClient.getRoom.mockReturnValue(room);
|
||||
mockClient = stubClient();
|
||||
room = new Room(roomId, mockClient, userId);
|
||||
permalinkCreator = new RoomPermalinkCreator(room);
|
||||
jest.spyOn(dis, "dispatch").mockReturnValue(undefined);
|
||||
});
|
||||
|
||||
it("should render pinned event", () => {
|
||||
const pin1 = new MatrixEvent({
|
||||
type: "m.room.message",
|
||||
/**
|
||||
* 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",
|
||||
|
|
@ -48,25 +60,150 @@ describe("<PinnedEventTile />", () => {
|
|||
},
|
||||
room_id: roomId,
|
||||
origin_server_ts: 0,
|
||||
event_id: "$eventId",
|
||||
...content,
|
||||
});
|
||||
}
|
||||
|
||||
const { container } = getComponent(pin1);
|
||||
/**
|
||||
* Render the component with the given event.
|
||||
* @param event - pinned event
|
||||
*/
|
||||
function renderComponent(event: MatrixEvent) {
|
||||
return render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<PinnedEventTile permalinkCreator={permalinkCreator} event={event} room={room} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the component and open the menu.
|
||||
*/
|
||||
async function renderAndOpenMenu() {
|
||||
const pinEvent = makePinEvent();
|
||||
const renderResult = renderComponent(pinEvent);
|
||||
await userEvent.click(screen.getByRole("button", { name: "Open menu" }));
|
||||
return { pinEvent, renderResult };
|
||||
}
|
||||
|
||||
it("should throw when pinned event has no sender", () => {
|
||||
const pinEventWithoutSender = makePinEvent({ sender: undefined });
|
||||
expect(() => renderComponent(pinEventWithoutSender)).toThrow("Pinned event unexpectedly has no sender");
|
||||
});
|
||||
|
||||
it("should render pinned event", () => {
|
||||
const { container } = renderComponent(makePinEvent());
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should throw when pinned event has no sender", () => {
|
||||
const pin1 = new MatrixEvent({
|
||||
type: "m.room.message",
|
||||
sender: undefined,
|
||||
content: {
|
||||
body: "First pinned message",
|
||||
msgtype: "m.text",
|
||||
},
|
||||
room_id: roomId,
|
||||
origin_server_ts: 0,
|
||||
});
|
||||
it("should render the menu without unpin and delete", async () => {
|
||||
jest.spyOn(room.getLiveTimeline().getState(EventTimeline.FORWARDS)!, "mayClientSendStateEvent").mockReturnValue(
|
||||
false,
|
||||
);
|
||||
jest.spyOn(
|
||||
room.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
|
||||
"maySendRedactionForEvent",
|
||||
).mockReturnValue(false);
|
||||
|
||||
expect(() => getComponent(pin1)).toThrow("Pinned event unexpectedly has no sender");
|
||||
await renderAndOpenMenu();
|
||||
|
||||
// Unpin and delete should not be present
|
||||
await waitFor(() => expect(screen.getByRole("menu")).toBeInTheDocument());
|
||||
expect(screen.getByRole("menuitem", { name: "View in timeline" })).toBeInTheDocument();
|
||||
expect(screen.getByRole("menuitem", { name: "Forward" })).toBeInTheDocument();
|
||||
expect(screen.queryByRole("menuitem", { name: "Unpin" })).toBeNull();
|
||||
expect(screen.queryByRole("menuitem", { name: "Delete" })).toBeNull();
|
||||
expect(screen.getByRole("menu")).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should render the menu with all the options", async () => {
|
||||
// Enable unpin
|
||||
jest.spyOn(room.getLiveTimeline().getState(EventTimeline.FORWARDS)!, "mayClientSendStateEvent").mockReturnValue(
|
||||
true,
|
||||
);
|
||||
// Enable redaction
|
||||
jest.spyOn(
|
||||
room.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
|
||||
"maySendRedactionForEvent",
|
||||
).mockReturnValue(true);
|
||||
|
||||
await renderAndOpenMenu();
|
||||
|
||||
await waitFor(() => expect(screen.getByRole("menu")).toBeInTheDocument());
|
||||
["View in timeline", "Forward", "Unpin", "Delete"].forEach((name) =>
|
||||
expect(screen.getByRole("menuitem", { name })).toBeInTheDocument(),
|
||||
);
|
||||
expect(screen.getByRole("menu")).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should view in the timeline", async () => {
|
||||
const { pinEvent } = await renderAndOpenMenu();
|
||||
|
||||
// Test view in timeline button
|
||||
await userEvent.click(screen.getByRole("menuitem", { name: "View in timeline" }));
|
||||
expect(dis.dispatch).toHaveBeenCalledWith({
|
||||
action: Action.ViewRoom,
|
||||
event_id: pinEvent.getId(),
|
||||
highlighted: true,
|
||||
room_id: pinEvent.getRoomId(),
|
||||
metricsTrigger: undefined, // room doesn't change
|
||||
});
|
||||
});
|
||||
|
||||
it("should open forward dialog", async () => {
|
||||
const { pinEvent } = await renderAndOpenMenu();
|
||||
|
||||
// Test forward button
|
||||
await userEvent.click(screen.getByRole("menuitem", { name: "Forward" }));
|
||||
expect(dis.dispatch).toHaveBeenCalledWith({
|
||||
action: Action.OpenForwardDialog,
|
||||
event: getForwardableEvent(pinEvent, mockClient),
|
||||
permalinkCreator: permalinkCreator,
|
||||
});
|
||||
});
|
||||
|
||||
it("should unpin the event", async () => {
|
||||
const { pinEvent } = await renderAndOpenMenu();
|
||||
const pinEvent2 = makePinEvent({ event_id: "$eventId2" });
|
||||
|
||||
const stateEvent = {
|
||||
getContent: jest.fn().mockReturnValue({ pinned: [pinEvent.getId(), pinEvent2.getId()] }),
|
||||
} as unknown as MatrixEvent;
|
||||
|
||||
// Enable unpin
|
||||
jest.spyOn(room.getLiveTimeline().getState(EventTimeline.FORWARDS)!, "mayClientSendStateEvent").mockReturnValue(
|
||||
true,
|
||||
);
|
||||
// Mock the state event
|
||||
jest.spyOn(room.getLiveTimeline().getState(EventTimeline.FORWARDS)!, "getStateEvents").mockReturnValue(
|
||||
stateEvent,
|
||||
);
|
||||
|
||||
// Test unpin button
|
||||
await userEvent.click(screen.getByRole("menuitem", { name: "Unpin" }));
|
||||
expect(mockClient.sendStateEvent).toHaveBeenCalledWith(
|
||||
room.roomId,
|
||||
EventType.RoomPinnedEvents,
|
||||
{
|
||||
pinned: [pinEvent2.getId()],
|
||||
},
|
||||
"",
|
||||
);
|
||||
});
|
||||
|
||||
it("should delete the event", async () => {
|
||||
// Enable redaction
|
||||
jest.spyOn(
|
||||
room.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
|
||||
"maySendRedactionForEvent",
|
||||
).mockReturnValue(true);
|
||||
|
||||
const { pinEvent } = await renderAndOpenMenu();
|
||||
|
||||
await userEvent.click(screen.getByRole("menuitem", { name: "Delete" }));
|
||||
expect(createRedactEventDialog).toHaveBeenCalledWith({
|
||||
mxEvent: pinEvent,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,25 +4,52 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
|
|||
<div>
|
||||
<div
|
||||
class="mx_PinnedEventTile"
|
||||
role="listitem"
|
||||
>
|
||||
<span
|
||||
class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
|
||||
data-color="2"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 24px;"
|
||||
>
|
||||
a
|
||||
</span>
|
||||
<span
|
||||
class="mx_PinnedEventTile_sender mx_Username_color2"
|
||||
>
|
||||
@alice:server.org
|
||||
</span>
|
||||
<div>
|
||||
<span
|
||||
class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
|
||||
data-color="2"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 32px;"
|
||||
>
|
||||
a
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PinnedEventTile_message"
|
||||
class="mx_PinnedEventTile_wrapper"
|
||||
>
|
||||
<div
|
||||
class="mx_PinnedEventTile_top"
|
||||
>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color2"
|
||||
>
|
||||
@alice:server.org
|
||||
</span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="menu"
|
||||
aria-label="Open menu"
|
||||
class="_icon-button_bh2qc_17"
|
||||
data-state="closed"
|
||||
id="radix-0"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 24px;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="_indicator-icon_133tf_26"
|
||||
style="--cpd-icon-button-size: 100%;"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_MTextBody mx_EventTile_content"
|
||||
>
|
||||
|
|
@ -34,22 +61,250 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PinnedEventTile_footer"
|
||||
>
|
||||
<span
|
||||
class="mx_MessageTimestamp mx_PinnedEventTile_timestamp"
|
||||
>
|
||||
Thu, Jan 1, 1970, 00:00
|
||||
</span>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
View message
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
|
||||
<div
|
||||
aria-label="Open menu"
|
||||
aria-labelledby="radix-6"
|
||||
aria-orientation="vertical"
|
||||
class="_menu_1x5h1_17"
|
||||
data-align="start"
|
||||
data-orientation="vertical"
|
||||
data-radix-menu-content=""
|
||||
data-side="right"
|
||||
data-state="open"
|
||||
dir="ltr"
|
||||
id="radix-7"
|
||||
role="menu"
|
||||
style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<button
|
||||
class="_item_1gwvj_17 _interactive_1gwvj_36"
|
||||
data-kind="primary"
|
||||
data-orientation="vertical"
|
||||
data-radix-collection-item=""
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="_icon_1gwvj_44"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
||||
>
|
||||
View in timeline
|
||||
</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>
|
||||
</button>
|
||||
<button
|
||||
class="_item_1gwvj_17 _interactive_1gwvj_36"
|
||||
data-kind="primary"
|
||||
data-orientation="vertical"
|
||||
data-radix-collection-item=""
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="_icon_1gwvj_44"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
||||
>
|
||||
Unpin
|
||||
</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>
|
||||
</button>
|
||||
<button
|
||||
class="_item_1gwvj_17 _interactive_1gwvj_36"
|
||||
data-kind="primary"
|
||||
data-orientation="vertical"
|
||||
data-radix-collection-item=""
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="_icon_1gwvj_44"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
||||
>
|
||||
Forward
|
||||
</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>
|
||||
</button>
|
||||
<div
|
||||
class="_separator_144s5_17"
|
||||
data-kind="primary"
|
||||
data-orientation="horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
<button
|
||||
class="_item_1gwvj_17 _interactive_1gwvj_36"
|
||||
data-kind="critical"
|
||||
data-orientation="vertical"
|
||||
data-radix-collection-item=""
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="_icon_1gwvj_44"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
||||
>
|
||||
Delete
|
||||
</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>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`] = `
|
||||
<div
|
||||
aria-label="Open menu"
|
||||
aria-labelledby="radix-2"
|
||||
aria-orientation="vertical"
|
||||
class="_menu_1x5h1_17"
|
||||
data-align="start"
|
||||
data-orientation="vertical"
|
||||
data-radix-menu-content=""
|
||||
data-side="right"
|
||||
data-state="open"
|
||||
dir="ltr"
|
||||
id="radix-3"
|
||||
role="menu"
|
||||
style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<button
|
||||
class="_item_1gwvj_17 _interactive_1gwvj_36"
|
||||
data-kind="primary"
|
||||
data-orientation="vertical"
|
||||
data-radix-collection-item=""
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="_icon_1gwvj_44"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
||||
>
|
||||
View in timeline
|
||||
</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>
|
||||
</button>
|
||||
<button
|
||||
class="_item_1gwvj_17 _interactive_1gwvj_36"
|
||||
data-kind="primary"
|
||||
data-orientation="vertical"
|
||||
data-radix-collection-item=""
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="_icon_1gwvj_44"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
||||
>
|
||||
Forward
|
||||
</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>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
Loading…
Reference in a new issue