Merge branch 'develop' of https://github.com/capGoblin/matrix-react-sdk…

… into fix/verification-message-scaling

CHANGELOG.md

@@ -1,3 +1,35 @@
+Changes in [3.83.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.83.0) (2023-10-24)
+=====================================================================================================
+
+## ✨ Features
+ * Iterate `io.element.late_event` decoration ([\#11760](https://github.com/matrix-org/matrix-react-sdk/pull/11760)). Fixes vector-im/element-web#26384.
+ * Render timeline separator for late event groups ([\#11739](https://github.com/matrix-org/matrix-react-sdk/pull/11739)).
+ * OIDC: revoke tokens on logout ([\#11718](https://github.com/matrix-org/matrix-react-sdk/pull/11718)). Fixes vector-im/element-web#25394. Contributed by @kerryarchibald.
+ * Show `io.element.late_event` in MessageTimestamp when known ([\#11733](https://github.com/matrix-org/matrix-react-sdk/pull/11733)).
+ * Show all labs flags if developerMode enabled ([\#11746](https://github.com/matrix-org/matrix-react-sdk/pull/11746)). Fixes vector-im/element-web#24571 and vector-im/element-web#8498.
+ * Use Compound tooltips on MessageTimestamp to improve UX of date time discovery ([\#11732](https://github.com/matrix-org/matrix-react-sdk/pull/11732)). Fixes vector-im/element-web#25913.
+ * Consolidate 4s passphrase input fields and use stable IDs ([\#11743](https://github.com/matrix-org/matrix-react-sdk/pull/11743)). Fixes vector-im/element-web#26228.
+ * Disable upgraderoom command without developer mode enabled ([\#11744](https://github.com/matrix-org/matrix-react-sdk/pull/11744)). Fixes vector-im/element-web#17620.
+ * Avoid rendering app download buttons if disabled in config ([\#11741](https://github.com/matrix-org/matrix-react-sdk/pull/11741)). Fixes vector-im/element-web#26309.
+ * OIDC: refresh tokens ([\#11699](https://github.com/matrix-org/matrix-react-sdk/pull/11699)). Fixes vector-im/element-web#25839. Contributed by @kerryarchibald.
+ * OIDC: register ([\#11727](https://github.com/matrix-org/matrix-react-sdk/pull/11727)). Fixes vector-im/element-web#25393. Contributed by @kerryarchibald.
+ * Use stable get_login_token and remove unstable MSC3882 support ([\#11001](https://github.com/matrix-org/matrix-react-sdk/pull/11001)). Contributed by @hughns.
+
+## 🐛 Bug Fixes
+ * Set max size for Element logo in search warning ([\#11779](https://github.com/matrix-org/matrix-react-sdk/pull/11779)). Fixes vector-im/element-web#26408.
+ * Avoid error when DMing oneself ([\#11754](https://github.com/matrix-org/matrix-react-sdk/pull/11754)). Fixes vector-im/element-web#7242.
+ * Fix: Message shield alignment is not right. ([\#11703](https://github.com/matrix-org/matrix-react-sdk/pull/11703)). Fixes vector-im/element-web#26142. Contributed by @manancodes.
+ * fix logging full event ([\#11755](https://github.com/matrix-org/matrix-react-sdk/pull/11755)). Fixes vector-im/element-web#26376.
+ * OIDC: use delegated auth account URL from `OidcClientStore` ([\#11723](https://github.com/matrix-org/matrix-react-sdk/pull/11723)). Fixes vector-im/element-web#26305. Contributed by @kerryarchibald.
+ * Fix: Members list shield alignment is not right. ([\#11700](https://github.com/matrix-org/matrix-react-sdk/pull/11700)). Fixes vector-im/element-web#26261. Contributed by @manancodes.
+ * Fix: <detail> HTML elements clickable area too wide. ([\#11666](https://github.com/matrix-org/matrix-react-sdk/pull/11666)). Fixes vector-im/element-web#25454. Contributed by @manancodes.
+ * Fix untranslated headings in the devtools dialog ([\#11734](https://github.com/matrix-org/matrix-react-sdk/pull/11734)).
+ * Fixes invite dialog alignment and pill color contrast ([\#11722](https://github.com/matrix-org/matrix-react-sdk/pull/11722)). Contributed by @gabrc52.
+ * Prevent select element in General settings overflowing in a room with very long room-id ([\#11597](https://github.com/matrix-org/matrix-react-sdk/pull/11597)). Contributed by @ABHIXIT2.
+ * Fix: Clicking on members pile does nothing. ([\#11657](https://github.com/matrix-org/matrix-react-sdk/pull/11657)). Fixes vector-im/element-web#26164. Contributed by @manancodes.
+ * Fix: Wierd shadow below room avatar in dark mode. ([\#11678](https://github.com/matrix-org/matrix-react-sdk/pull/11678)). Fixes vector-im/element-web#26153. Contributed by @manancodes.
+ * Fix start_sso / start_cas URLs failing to redirect to a authentication prompt ([\#11681](https://github.com/matrix-org/matrix-react-sdk/pull/11681)). Contributed by @Half-Shot.
+
 Changes in [3.82.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.82.0) (2023-10-10)
 =====================================================================================================
 

cypress/e2e/crypto/crypto.spec.ts

@@ -452,7 +452,7 @@ describe("Cryptography", function () {
         });
 
         it("Should show a grey padlock for a key restored from backup", () => {
-            skipIfRustCrypto(); // requires key backup (https://github.com/vector-im/element-web/issues/24828)
+            skipIfRustCrypto(); // doesn't work due to https://github.com/vector-im/element-web/issues/26393
 
             enableKeyBackup();
 

cypress/e2e/crypto/verification.spec.ts

@@ -95,7 +95,7 @@ describe("Device verification", () => {
         cy.wrap(promiseVerificationRequest).as("verificationRequest");
     }
 
-    it("Verify device during login with SAS", () => {
+    it("Verify device with SAS during login", () => {
         logIntoElement(homeserver.baseUrl, aliceBotClient.getUserId(), aliceBotClient.__cypress_password);
 
         // Launch the verification request between alice and the bot
@@ -122,8 +122,8 @@ describe("Device verification", () => {
         checkDeviceIsConnectedKeyBackup();
     });
 
-    it("Verify device during login with QR code", () => {
-        skipIfRustCrypto(); // https://github.com/vector-im/element-web/issues/26293
+    it("Verify device with QR code during login", () => {
+        // A mode 0x02 verification: "self-verifying in which the current device does not yet trust the master key"
         logIntoElement(homeserver.baseUrl, aliceBotClient.getUserId(), aliceBotClient.__cypress_password);
 
         // Launch the verification request between alice and the bot
@@ -156,14 +156,24 @@ describe("Device verification", () => {
         // the bot uploads the signatures asynchronously, so wait for that to happen
         cy.wait(1000);
 
+        // our device should trust the bot device
+        cy.getClient().then(async (cli) => {
+            const deviceStatus = await cli
+                .getCrypto()!
+                .getDeviceVerificationStatus(aliceBotClient.getUserId(), aliceBotClient.getDeviceId());
+            if (!deviceStatus.isVerified()) {
+                throw new Error("Bot device was not verified after QR code verification");
+            }
+        });
+
         // Check that our device is now cross-signed
         checkDeviceIsCrossSigned();
 
         // Check that the current device is connected to key backup
         checkDeviceIsConnectedKeyBackup();
     });
 
-    it("Verify device during login with Security Phrase", () => {
+    it("Verify device with Security Phrase during login", () => {
         logIntoElement(homeserver.baseUrl, aliceBotClient.getUserId(), aliceBotClient.__cypress_password);
 
         // Select the security phrase
@@ -188,7 +198,7 @@ describe("Device verification", () => {
         checkDeviceIsConnectedKeyBackup();
     });
 
-    it("Verify device during login with Security Key", () => {
+    it("Verify device with Security Key during login", () => {
         logIntoElement(homeserver.baseUrl, aliceBotClient.getUserId(), aliceBotClient.__cypress_password);
 
         // Select the security phrase
@@ -307,6 +317,10 @@ describe("User verification", () => {
     });
 
     it("can receive a verification request when there is no existing DM", () => {
+        // Extremely flaky with rust crypto
+        // see https://github.com/vector-im/element-web/issues/26420
+        skipIfRustCrypto();
+
         cy.bootstrapCrossSigning(aliceCredentials);
 
         // the other user creates a DM

cypress/e2e/invite/invite-dialog.spec.ts

@@ -53,7 +53,7 @@ describe("Invite dialog", function () {
             cy.findByRole("button", { name: /People/ }).click();
         });
 
-        cy.get(".mx_BaseCard_header").within(() => {
+        cy.get(".mx_BaseCard").within(() => {
             // Click "Invite to this room" button
             // Regex pattern due to "mx_MemberList_invite span::before"
             cy.findByRole("button", { name: /Invite to this room/ }).click();

cypress/e2e/read-receipts/high-level.spec.ts

@@ -282,7 +282,8 @@ describe("Read receipts", () => {
             assertUnreadThread("Root2");
             assertUnreadThread("Root3");
         });
-        it("Looking in thread view to find old threads that were never read makes the room unread", () => {
+        // XXX: fails because flakes, sometimes finding 7 unread instead of 6
+        it.skip("Looking in thread view to find old threads that were never read makes the room unread", () => {
             // Given lots of messages in threads that are unread
             goTo(room1);
             receiveMessages(room2, [

cypress/e2e/read-receipts/redactions.spec.ts

@@ -156,8 +156,7 @@ describe("Read receipts", () => {
                 // Then it becomes read
                 assertStillRead(room2);
             });
-            // XXX: failed because it flakes saying 2 unread when it should be 1
-            it.skip("Marking an unread room as read after a redaction makes it read", () => {
+            it("Marking an unread room as read after a redaction makes it read", () => {
                 // Given an unread room where latest message is redacted
                 goTo(room1);
                 receiveMessages(room2, ["Msg1", "Msg2"]);
@@ -221,8 +220,7 @@ describe("Read receipts", () => {
                 // Then the unread count goes down again
                 assertUnread(room2, 1);
             });
-            // XXX: fails because it flakes saying 2 unread instead of 1
-            it.skip("Redacting one of the unread messages reduces the unread count after restart", () => {
+            it("Redacting one of the unread messages reduces the unread count after restart", () => {
                 // Given unread count was reduced by redacting messages
                 goTo(room1);
                 receiveMessages(room2, ["Msg1", "Msg2", "Msg3"]);
@@ -384,8 +382,7 @@ describe("Read receipts", () => {
                 goTo(room2);
                 assertReadThread("Root");
             });
-
-            // XXX: fails because the unread count is still 1 when it should be 0 (this is a genuine stuck unread case)
+            // XXX: fails because it flakes (on CI only)
             it.skip("Reading an unread thread after a redaction of the latest message makes it read", () => {
                 // Given an unread thread where the latest message was redacted
                 goTo(room1);
@@ -431,7 +428,7 @@ describe("Read receipts", () => {
                 // Then the room is still read
                 assertRead(room2);
             });
-            // XXX: fails because the unread count is still 1 when it should be 0
+            // XXX: fails because it flakes (on CI only)
             it.skip("Reading an unread thread after a redaction of an older message makes it read", () => {
                 // Given an unread thread where an older message was redacted
                 goTo(room1);
@@ -453,7 +450,7 @@ describe("Read receipts", () => {
                 goTo(room2);
                 assertReadThread("Root");
             });
-            // XXX: fails because the room has an unread dot after I marked it as read
+            // XXX: fails because it flakes (on CI only)
             it.skip("Marking an unread thread as read after a redaction makes it read", () => {
                 // Given an unread thread where an older message was redacted
                 goTo(room1);

cypress/e2e/right-panel/file-panel.spec.ts

@@ -30,7 +30,7 @@ const viewRoomSummaryByName = (name: string): Chainable<JQuery<HTMLElement>> =>
 
 const checkRoomSummaryCard = (name: string): Chainable<JQuery<HTMLElement>> => {
     cy.get(".mx_RoomSummaryCard").should("have.length", 1);
-    return cy.get(".mx_BaseCard_header").should("contain", name);
+    return cy.get(".mx_RoomSummaryCard").should("contain", name);
 };
 
 const uploadFile = (file: string) => {

cypress/e2e/right-panel/right-panel.spec.ts

@@ -43,7 +43,7 @@ const viewRoomSummaryByName = (name: string): Chainable<JQuery<HTMLElement>> =>
 
 const checkRoomSummaryCard = (name: string): Chainable<JQuery<HTMLElement>> => {
     cy.get(".mx_RoomSummaryCard").should("have.length", 1);
-    return cy.get(".mx_BaseCard_header").should("contain", name);
+    return cy.get(".mx_RoomSummaryCard").should("contain", name);
 };
 
 describe("RightPanel", () => {

cypress/e2e/timeline/timeline.spec.ts

@@ -163,23 +163,8 @@ describe("Timeline", () => {
                     .should("exist");
             });
 
-            cy.get(".mx_IRCLayout").within(() => {
-                // Check room name line-height is reset
-                cy.get(".mx_NewRoomIntro h2").should("have.css", "line-height", "normal");
-
-                // Check the profile resizer's place
-                // See: _IRCLayout
-                // --RoomView_MessageList-padding = 18px (See: _RoomView.pcss)
-                // --MessageTimestamp-width = 46px (See: _MessageTimestamp.pcss)
-                // --icon-width = 14px
-                // --right-padding = 5px
-                // --name-width = 80px
-                // --resizer-width = 15px
-                // --resizer-a11y = 3px
-                // 18px + 46px + 14px + 5px + 80px + 5px - 15px - 3px
-                // = 150px
-                cy.get(".mx_ProfileResizer").should("have.css", "inset-inline-start", "150px");
-            });
+            // wait for the date separator to appear to have a stable percy snapshot
+            cy.get(".mx_TimelineSeparator").should("have.text", "today");
 
             cy.get(".mx_MainSplit").percySnapshotElement("Configured room on IRC layout");
         });
@@ -454,6 +439,12 @@ describe("Timeline", () => {
             sendEvent(roomId); // check the last EventTile
 
             cy.visit("/#/room/" + roomId);
+            // Send a plain text message
+            cy.getComposer().type(`Hello{enter}`);
+            // Send a big emoji
+            cy.getComposer().type(`🏀{enter}`);
+            // Send an inline emoji
+            cy.getComposer().type(`This message has an inline emoji 👒{enter}`);
 
             ////////////////////////////////////////////////////////////////////////////////////////////////////////////
             // IRC layout
@@ -466,28 +457,6 @@ describe("Timeline", () => {
                 cy.findByText(OLD_NAME + " created and configured the room.").should("exist");
             });
 
-            cy.get(".mx_RoomView_body[data-layout=irc]").within(() => {
-                // Ensure CSS declarations which cannot be detected with a screenshot test are applied as expected
-                cy.get(".mx_EventTile")
-                    .should("have.css", "max-width", "100%")
-                    .should("have.css", "clear", "both")
-                    .should("have.css", "position", "relative");
-
-                // Check mx_EventTile_continuation
-                // Block start padding of the second message should not be overridden
-                cy.get(".mx_EventTile_continuation").should("have.css", "padding-block-start", "0px");
-                cy.get(".mx_EventTile_continuation .mx_EventTile_line").should("have.css", "clear", "both");
-
-                // Select the last event tile
-                cy.get(".mx_EventTile_last")
-                    .within(() => {
-                        // The last tile is also a continued one
-                        cy.get(".mx_EventTile_line").should("have.css", "clear", "both");
-                    })
-                    // Check that zero block padding is set
-                    .should("have.css", "padding-block-start", "0px");
-            });
-
             cy.get(".mx_MainSplit").percySnapshotElement("EventTiles on IRC layout", { percyCSS });
 
             ////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -497,17 +466,6 @@ describe("Timeline", () => {
             cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group);
 
             cy.get(".mx_RoomView_body[data-layout=group]").within(() => {
-                // Ensure CSS declarations which cannot be detected with a screenshot test are applied as expected
-                cy.get(".mx_EventTile")
-                    .should("have.css", "max-width", "100%")
-                    .should("have.css", "clear", "both")
-                    .should("have.css", "position", "relative");
-
-                // Check mx_EventTile_continuation
-                // Block start padding of the second message should not be overridden
-                cy.get(".mx_EventTile_continuation").should("have.css", "padding-block-start", "0px");
-                cy.get(".mx_EventTile_continuation .mx_EventTile_line").should("have.css", "clear", "both");
-
                 // Check that the last EventTile is rendered
                 cy.get(".mx_EventTile.mx_EventTile_last").should("exist");
             });
@@ -518,15 +476,6 @@ describe("Timeline", () => {
             cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, true);
 
             cy.get(".mx_MatrixChat_useCompactLayout").within(() => {
-                // Ensure CSS declarations which cannot be detected with a screenshot test are applied as expected
-                cy.get(".mx_EventTile")
-                    .should("have.css", "max-width", "100%")
-                    .should("have.css", "clear", "both")
-                    .should("have.css", "position", "relative");
-
-                // Check cascading works
-                cy.get(".mx_EventTile_continuation").should("have.css", "padding-block-start", "0px");
-
                 // Check that the last EventTile is rendered
                 cy.get(".mx_EventTile.mx_EventTile_last").should("exist");
             });
@@ -539,25 +488,6 @@ describe("Timeline", () => {
 
             cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
 
-            cy.get(".mx_RoomView_body[data-layout=bubble]").within(() => {
-                // Ensure CSS declarations which cannot be detected with a screenshot test are applied as expected
-                cy.get(".mx_EventTile")
-                    .should("have.css", "max-width", "none")
-                    .should("have.css", "clear", "both")
-                    .should("have.css", "position", "relative");
-
-                // Check that block start padding of the second message is not overridden
-                cy.get(".mx_EventTile.mx_EventTile_continuation").should("have.css", "margin-block-start", "2px");
-
-                // Select the last bubble
-                cy.get(".mx_EventTile_last")
-                    .within(() => {
-                        // calc(var(--gutterSize) - 1px)
-                        cy.get(".mx_EventTile_line").should("have.css", "padding-block-start", "10px");
-                    })
-                    .should("have.css", "margin-block-start", "2px"); // The last bubble is also a continued one
-            });
-
             cy.get(".mx_MainSplit").percySnapshotElement("EventTiles on bubble layout", { percyCSS });
         });