Skip to content

Commit

Permalink
Merge branch 'develop' into kerry/24922/user-settings-headings-1
Browse files Browse the repository at this point in the history
  • Loading branch information
Kerry Archibald committed May 3, 2023
2 parents 5ff3266 + 37b7dfe commit 953b6db
Show file tree
Hide file tree
Showing 34 changed files with 402 additions and 376 deletions.
133 changes: 133 additions & 0 deletions cypress/e2e/read-receipts/read-receipts.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
/*
Copyright 2023 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.
*/

/// <reference types="cypress" />

import type { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
import type { ISendEventResponse } from "matrix-js-sdk/src/@types/requests";
import type { ReceiptType } from "matrix-js-sdk/src/@types/read_receipts";
import { HomeserverInstance } from "../../plugins/utils/homeserver";

describe("Read receipts", () => {
const userName = "Mae";
const botName = "Other User";
const selectedRoomName = "Selected Room";
const otherRoomName = "Other Room";

let homeserver: HomeserverInstance;
let otherRoomId: string;
let selectedRoomId: string;
let bot: MatrixClient | undefined;

const botSendMessage = (): Cypress.Chainable<ISendEventResponse> => {
return cy.botSendMessage(bot, otherRoomId, "Message");
};

const fakeEventFromSent = (eventResponse: ISendEventResponse): MatrixEvent => {
return {
getRoomId: () => otherRoomId,
getId: () => eventResponse.event_id,
threadRootId: undefined,
getTs: () => 1,
} as any as MatrixEvent;
};

beforeEach(() => {
/*
* Create 2 rooms:
*
* - Selected room - this one is clicked in the UI
* - Other room - this one contains the bot, which will send events so
* we can check its unread state.
*/
cy.startHomeserver("default").then((data) => {
homeserver = data;
cy.initTestUser(homeserver, userName)
.then(() => {
cy.createRoom({ name: selectedRoomName }).then((createdRoomId) => {
selectedRoomId = createdRoomId;
});
})
.then(() => {
cy.createRoom({ name: otherRoomName }).then((createdRoomId) => {
otherRoomId = createdRoomId;
});
})
.then(() => {
cy.getBot(homeserver, { displayName: botName }).then((botClient) => {
bot = botClient;
});
})
.then(() => {
// Invite the bot to Other room
cy.inviteUser(otherRoomId, bot.getUserId());
cy.visit("/#/room/" + otherRoomId);
cy.findByText(botName + " joined the room").should("exist");

// Then go into Selected room
cy.visit("/#/room/" + selectedRoomId);
});
});
});

afterEach(() => {
cy.stopHomeserver(homeserver);
});

it(
"Considers room read if there's a receipt for main even if an earlier unthreaded receipt exists #24629",
{
// When #24629 exists, the test fails the first time but passes later, so we disable retries
// to be sure we are going to fail if the bug comes back.
// Why does it pass the second time? I wish I knew. (andyb)
retries: 0,
},
() => {
// Details are in https://github.com/vector-im/element-web/issues/24629
// This proves we've fixed one of the "stuck unreads" issues.

// Given we sent 3 events on the main thread
botSendMessage();
botSendMessage().then((main2) => {
botSendMessage().then((main3) => {
// (So the room starts off unread)
cy.findByLabelText(`${otherRoomName} 3 unread messages.`).should("exist");

// When we send a threaded receipt for the last event in main
// And an unthreaded receipt for an earlier event
cy.sendReadReceipt(fakeEventFromSent(main3));
cy.sendReadReceipt(fakeEventFromSent(main2), "m.read" as any as ReceiptType, true);

// (So the room has no unreads)
cy.findByLabelText(`${otherRoomName}`).should("exist");

// And we persuade the app to persist its state to indexeddb by reloading and waiting
cy.reload();
cy.findByLabelText(`${selectedRoomName}`).should("exist");

// And we reload again, fetching the persisted state FROM indexeddb
cy.reload();

// Then the room is read, because the persisted state correctly remembers both
// receipts. (In #24629, the unthreaded receipt overwrote the main thread one,
// meaning that the room still said it had unread messages.)
cy.findByLabelText(`${otherRoomName}`).should("exist");
cy.findByLabelText(`${otherRoomName} Unread messages.`).should("not.exist");
});
});
},
);
});
2 changes: 1 addition & 1 deletion cypress/e2e/timeline/timeline.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ describe("Timeline", () => {
cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_spacer").should(
"have.css",
"line-height",
"18px", // $irc-line-height: $font-18px (See: _IRCLayout.pcss)
"18px", // var(--irc-line-height): $font-18px (See: _IRCLayout.pcss)
);

cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on IRC layout", { percyCSS });
Expand Down
19 changes: 14 additions & 5 deletions cypress/plugins/docker/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,21 @@ export async function dockerRun(opts: {
const params = opts.params ?? [];

if (params?.includes("-v") && userInfo.uid >= 0) {
// On *nix we run the docker container as our uid:gid otherwise cleaning it up its media_store can be difficult
params.push("-u", `${userInfo.uid}:${userInfo.gid}`);

// Run the docker container as our uid:gid to prevent problems with permissions.
if (await isPodman()) {
// keep the user ID if the docker command is actually podman
params.push("--userns=keep-id");
// Note: this setup is for podman rootless containers.

// In podman, run as root in the container, which maps to the current
// user on the host. This is probably the default since Synapse's
// Dockerfile doesn't specify, but we're being explicit here
// because it's important for the permissions to work.
params.push("-u", "0:0");

// Tell Synapse not to switch UID
params.push("-e", "UID=0");
params.push("-e", "GID=0");
} else {
params.push("-u", `${userInfo.uid}:${userInfo.gid}`);
}
}

Expand Down
19 changes: 18 additions & 1 deletion cypress/support/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ import type { FileType, Upload, UploadOpts } from "matrix-js-sdk/src/http-api";
import type { ICreateRoomOpts, ISendEventResponse } from "matrix-js-sdk/src/@types/requests";
import type { MatrixClient } from "matrix-js-sdk/src/client";
import type { Room } from "matrix-js-sdk/src/models/room";
import type { IContent } from "matrix-js-sdk/src/models/event";
import type { IContent, MatrixEvent } from "matrix-js-sdk/src/models/event";
import type { ReceiptType } from "matrix-js-sdk/src/@types/read_receipts";
import Chainable = Cypress.Chainable;
import { UserCredentials } from "./login";

Expand Down Expand Up @@ -69,6 +70,13 @@ declare global {
eventType: string,
content: IContent,
): Chainable<ISendEventResponse>;
/**
* @param {MatrixEvent} event
* @param {ReceiptType} receiptType
* @param {boolean} unthreaded
* @return {module:http-api.MatrixError} Rejects: with an error response.
*/
sendReadReceipt(event: MatrixEvent, receiptType?: ReceiptType, unthreaded?: boolean): Chainable<{}>;
/**
* @param {string} name
* @param {module:client.callback} callback Optional.
Expand Down Expand Up @@ -195,6 +203,15 @@ Cypress.Commands.add(
},
);

Cypress.Commands.add(
"sendReadReceipt",
(event: MatrixEvent, receiptType?: ReceiptType, unthreaded?: boolean): Chainable<{}> => {
return cy.getClient().then(async (cli: MatrixClient) => {
return cli.sendReadReceipt(event, receiptType, unthreaded);
});
},
);

Cypress.Commands.add("setDisplayName", (name: string): Chainable<{}> => {
return cy.getClient().then(async (cli: MatrixClient) => {
return cli.setDisplayName(name);
Expand Down
5 changes: 2 additions & 3 deletions res/css/_common.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,12 @@ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $selected-mess
$slider-dot-size: 1em;
$slider-selection-dot-size: 2.4em;

$container-border-width: 8px;
$container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */

$timeline-image-border-radius: 8px;
:root {
font-size: 10px;

--container-border-width: 8px;
--container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */
--transition-short: 0.1s;
--transition-standard: 0.3s;
--MessageTimestamp-width: $MessageTimestamp_width;
Expand Down
1 change: 0 additions & 1 deletion res/css/_components.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,6 @@
@import "./views/settings/_CrossSigningPanel.pcss";
@import "./views/settings/_CryptographyPanel.pcss";
@import "./views/settings/_DevicesPanel.pcss";
@import "./views/settings/_EmailAddresses.pcss";
@import "./views/settings/_FontScalingPanel.pcss";
@import "./views/settings/_ImageSizePanel.pcss";
@import "./views/settings/_IntegrationManager.pcss";
Expand Down
4 changes: 2 additions & 2 deletions res/css/structures/_MainSplit.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ limitations under the License.
}

.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
padding: $container-gap-width;
padding: var(--container-gap-width);
/* The resizer should be centered: only half of the gap-width is handled by the right panel. */
/* The other half by the RoomView. */
padding-left: calc($container-gap-width / 2);
padding-left: calc(var(--container-gap-width) / 2);
height: calc(100vh - 51px); /* height of .mx_RoomHeader.light-panel */

&:hover .mx_ResizeHandle_horizontal::before {
Expand Down
4 changes: 2 additions & 2 deletions res/css/structures/_MatrixChat.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ limitations under the License.
/* or less, Safari and other WebKit based browsers get confused about overflows somehow and */
/* https://github.com/vector-im/element-web/issues/19863 happens. */
.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 calc(-5.5px - $container-gap-width / 2) 0 calc(-6.5px + $container-gap-width / 2);
margin: 0 calc(-5.5px - var(--container-gap-width) / 2) 0 calc(-6.5px + var(--container-gap-width) / 2);
/* The condition to prevent bleeding is: (margin-left + margin-right < -11px) */
/* (IF there is NO margin on the leftPanel_wrapper) */
/* The resizeHandle does not change the gap between the left panel and the room view: */
Expand All @@ -91,7 +91,7 @@ limitations under the License.
/* the handle requires no space */
/* right: -6px left: -6px positions the element exactly on the edge of leftPanel. */
/* left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap. */
/* We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2) */
/* We want the handle to be in the middle of the gap so it is shifted by (var(--container-gap-width) / 2) */
}

.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_RightPanel.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ limitations under the License.
display: flex;
flex-direction: column;
border-radius: 8px;
padding: $container-border-width 0;
padding: var(--container-border-width) 0;
box-sizing: border-box;
height: 100%;
contain: strict;
Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_RoomView.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ limitations under the License.
flex: 1;
display: flex;
flex-direction: column;
margin-right: calc($container-gap-width / 2);
margin-right: calc(var(--container-gap-width) / 2);
}
}

Expand Down
17 changes: 1 addition & 16 deletions res/css/views/messages/_MImageReplyBody.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -18,23 +18,8 @@ limitations under the License.
display: flex;
column-gap: $spacing-4;

.mx_MImageBody_thumbnail_container,
.mx_MImageReplyBody_info {
.mx_MImageBody_thumbnail_container {
flex: 1;
min-width: 0; /* Prevent a blowout */
}

.mx_MImageReplyBody_info {
.mx_MImageReplyBody_sender {
grid-area: sender;

.mx_DisambiguatedProfile {
max-width: 100%;
}
}

.mx_MImageReplyBody_filename {
grid-area: filename;
}
}
}
4 changes: 2 additions & 2 deletions res/css/views/right_panel/_TimelineCard.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ limitations under the License.

&.mx_EventTile_info .mx_MessageActionBar {
/* 1px: border width */
inset-inline-end: calc($container-gap-width + var(--BaseCard_padding-inline) + 1px);
inset-inline-end: calc(var(--container-gap-width) + var(--BaseCard_padding-inline) + 1px);
}

.mx_ReactionsRow {
Expand Down Expand Up @@ -178,7 +178,7 @@ limitations under the License.
/* 6px: scroll bar width (magic number) */
/* stylelint-disable-next-line declaration-colon-space-after */
inset-inline-end: calc(
-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + $container-gap-width + 6px
-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + var(--container-gap-width) + 6px
);
}

Expand Down
5 changes: 0 additions & 5 deletions res/css/views/right_panel/_WidgetCard.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,3 @@ limitations under the License.
border: 0;
}
}

.mx_WidgetCard_maxPinnedTooltip {
background-color: $alert;
color: #ffffff;
}
13 changes: 0 additions & 13 deletions res/css/views/room_settings/_AliasSettings.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_AliasSettings_editable {
border: 0px;
border-bottom: 1px solid $strong-input-border-color;
padding: 0px;
min-width: 240px;
}

.mx_AliasSettings_editable:focus {
border-bottom: 1px solid $accent;
outline: none;
box-shadow: none;
}

.mx_AliasSettings_localAddresses {
cursor: pointer;
color: $accent;
Expand Down
Loading

0 comments on commit 953b6db

Please sign in to comment.