Merge branch 'develop' into staging

Author: RiotRobot

.editorconfig

@@ -23,4 +23,4 @@ indent_size = 4
 trim_trailing_whitespace = true
 
 [*.{yml,yaml}]
-indent_size = 2
+indent_size = 4

.eslintrc.js

@@ -165,17 +165,43 @@ module.exports = {
         },
         {
             files: ["test/**/*.{ts,tsx}", "cypress/**/*.ts"],
+            extends: ["plugin:matrix-org/jest"],
             rules: {
                 // We don't need super strict typing in test utilities
                 "@typescript-eslint/explicit-function-return-type": "off",
                 "@typescript-eslint/explicit-member-accessibility": "off",
+
+                // Jest/Cypress specific
+
+                // Disabled tests are a reality for now but as soon as all of the xits are
+                // eliminated, we should enforce this.
+                "jest/no-disabled-tests": "off",
+                // TODO: There are many tests with invalid expects that should be fixed,
+                // https://github.com/vector-im/element-web/issues/24709
+                "jest/valid-expect": "off",
+                // TODO: There are many cases to refactor away,
+                // https://github.com/vector-im/element-web/issues/24710
+                "jest/no-conditional-expect": "off",
+                // Also treat "oldBackendOnly" as a test function.
+                // Used in some crypto tests.
+                "jest/no-standalone-expect": [
+                    "error",
+                    {
+                        additionalTestBlockFunctions: ["beforeAll", "beforeEach", "oldBackendOnly"],
+                    },
+                ],
             },
         },
         {
             files: ["cypress/**/*.ts"],
             parserOptions: {
                 project: ["./cypress/tsconfig.json"],
             },
+            rules: {
+                // Cypress "promises" work differently - disable some related rules
+                "jest/valid-expect-in-promise": "off",
+                "jest/no-done-callback": "off",
+            },
         },
     ],
     settings: {

.github/workflows/cypress.yaml

@@ -5,6 +5,9 @@ on:
         workflows: ["Element Web - Build"]
         types:
             - completed
+concurrency:
+    group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch || github.ref }}
+    cancel-in-progress: ${{ github.event.workflow_run.event == 'pull_request' }}
 jobs:
     prepare:
         name: Prepare
@@ -119,7 +122,7 @@ jobs:
                   path: webapp
 
             - name: Run Cypress tests
-              uses: cypress-io/github-action@v5.0.2
+              uses: cypress-io/github-action@v5.1.0
               with:
                   # The built-in Electron runner seems to grind to a halt trying
                   # to run the tests, so use chrome.
@@ -162,8 +165,9 @@ jobs:
                   PERCY_BRANCH: ${{ github.event.workflow_run.head_branch }}
                   PERCY_COMMIT: ${{ github.event.workflow_run.head_sha }}
                   PERCY_PULL_REQUEST: ${{ needs.prepare.outputs.pr_id }}
-                  PERCY_PARALLEL_TOTAL: ${{ strategy.job-total }}
                   PERCY_PARALLEL_NONCE: ${{ needs.prepare.outputs.uuid }}
+                  # We manually finalize the build in the report stage
+                  PERCY_PARALLEL_TOTAL: -1
 
             - name: Upload Artifact
               if: failure()
@@ -181,21 +185,43 @@ jobs:
               with:
                   name: cypress-junit
                   path: cypress/results
+
     report:
         name: Report results
-        needs: tests
+        needs:
+            - prepare
+            - tests
         runs-on: ubuntu-latest
         if: always()
         permissions:
             statuses: write
         steps:
+            - name: Finalize Percy
+              if: needs.prepare.outputs.percy_enable == '1'
+              run: npx -p @percy/cli percy build:finalize
+              env:
+                  PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+                  PERCY_PARALLEL_NONCE: ${{ needs.prepare.outputs.uuid }}
+
+            - name: Skip Percy required check
+              if: needs.prepare.outputs.percy_enable != '1'
+              uses: Sibz/github-status-action@v1
+              with:
+                  authToken: ${{ secrets.GITHUB_TOKEN }}
+                  state: success
+                  description: Percy skipped
+                  context: percy/matrix-react-sdk
+                  sha: ${{ github.event.workflow_run.head_sha }}
+                  target_url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
+
             - uses: Sibz/github-status-action@v1
               with:
                   authToken: ${{ secrets.GITHUB_TOKEN }}
                   state: ${{ needs.tests.result == 'success' && 'success' || 'failure' }}
                   context: ${{ github.workflow }} / cypress (${{ github.event.workflow_run.event }} => ${{ github.event_name }})
                   sha: ${{ github.event.workflow_run.head_sha }}
                   target_url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
+
     testrail:
         name: Report results to testrail
         needs:

.github/workflows/tests.yml

@@ -39,6 +39,12 @@ jobs:
               env:
                   JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
 
+            - name: Jest Cache
+              uses: actions/cache@v3
+              with:
+                  path: /tmp/jest_cache
+                  key: ${{ hashFiles('**/yarn.lock') }}
+
             - name: Get number of CPU cores
               id: cpu-cores
               uses: SimenB/github-actions-cpu-cores@v1
@@ -54,7 +60,8 @@ jobs:
                   yarn ${{ inputs.disable_coverage != 'true' && 'coverage' || 'test' }} \
                       --ci \
                       --reporters github-actions ${{ steps.metrics.outputs.extra-reporter }} \
-                      --max-workers ${{ steps.cpu-cores.outputs.count }}
+                      --max-workers ${{ steps.cpu-cores.outputs.count }} \
+                      --cacheDirectory /tmp/jest_cache
 
             - name: Upload Artifact
               if: inputs.disable_coverage != 'true'

CHANGELOG.md

@@ -2,17 +2,6 @@ Changes in [3.67.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/
 =====================================================================================================
 
 ## ✨ Features
- * Fix block code styling in rich text editor ([\#10246](https://github.com/matrix-org/matrix-react-sdk/pull/10246)). Contributed by @alunturner.
- * Poll history: fetch more poll history ([\#10235](https://github.com/matrix-org/matrix-react-sdk/pull/10235)). Contributed by @kerryarchibald.
- * Sort short/exact emoji matches before longer incomplete matches ([\#10212](https://github.com/matrix-org/matrix-react-sdk/pull/10212)). Fixes vector-im/element-web#23210. Contributed by @grimhilt.
- * Poll history: detail screen ([\#10172](https://github.com/matrix-org/matrix-react-sdk/pull/10172)). Contributed by @kerryarchibald.
- * Provide a more detailed error message than "No known servers" ([\#6048](https://github.com/matrix-org/matrix-react-sdk/pull/6048)). Fixes vector-im/element-web#13247. Contributed by @aaronraimist.
- * Say when a call was answered from a different device ([\#10224](https://github.com/matrix-org/matrix-react-sdk/pull/10224)).
- * Widget permissions customizations using module api ([\#10121](https://github.com/matrix-org/matrix-react-sdk/pull/10121)). Contributed by @maheichyk.
- * Fix copy button icon overlapping with copyable text ([\#10227](https://github.com/matrix-org/matrix-react-sdk/pull/10227)). Contributed by @Adesh-Pandey.
- * Support joining non-peekable rooms via the module API ([\#10154](https://github.com/matrix-org/matrix-react-sdk/pull/10154)). Contributed by @maheichyk.
- * The "new login" toast does now display the same device information as in the settings. "No" does now open the device settings. "Yes, it was me" dismisses the toast. ([\#10200](https://github.com/matrix-org/matrix-react-sdk/pull/10200)).
- * Do not prompt for a password when doing a „reset all“ after login ([\#10208](https://github.com/matrix-org/matrix-react-sdk/pull/10208)).
  * Display "The sender has blocked you from receiving this message" error message instead of "Unable to decrypt message" ([\#10202](https://github.com/matrix-org/matrix-react-sdk/pull/10202)). Contributed by @florianduros.
  * Polls: show warning about undecryptable relations ([\#10179](https://github.com/matrix-org/matrix-react-sdk/pull/10179)). Contributed by @kerryarchibald.
  * Poll history: fetch last 30 days of polls ([\#10157](https://github.com/matrix-org/matrix-react-sdk/pull/10157)). Contributed by @kerryarchibald.
@@ -25,11 +14,7 @@ Changes in [3.67.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/
  * Render poll end events in timeline ([\#10027](https://github.com/matrix-org/matrix-react-sdk/pull/10027)). Contributed by @kerryarchibald.
 
 ## 🐛 Bug Fixes
- * Use the room avatar as a placeholder in calls ([\#10231](https://github.com/matrix-org/matrix-react-sdk/pull/10231)).
- * Fix calls showing as 'connecting' after hangup ([\#10223](https://github.com/matrix-org/matrix-react-sdk/pull/10223)).
  * Stop access token overflowing the box ([\#10069](https://github.com/matrix-org/matrix-react-sdk/pull/10069)). Fixes vector-im/element-web#24023. Contributed by @sbjaj33.
- * Prevent multiple Jitsi calls started at the same time ([\#10183](https://github.com/matrix-org/matrix-react-sdk/pull/10183)). Fixes vector-im/element-web#23009.
- * Make localization keys compatible with agglutinative and/or SOV type languages ([\#10159](https://github.com/matrix-org/matrix-react-sdk/pull/10159)). Contributed by @luixxiul.
  * Add link to next file in the export ([\#10190](https://github.com/matrix-org/matrix-react-sdk/pull/10190)). Fixes vector-im/element-web#20272. Contributed by @grimhilt.
  * Ended poll tiles: add ended the poll message ([\#10193](https://github.com/matrix-org/matrix-react-sdk/pull/10193)). Fixes vector-im/element-web#24579. Contributed by @kerryarchibald.
  * Fix accidentally inverted condition for room ordering ([\#10178](https://github.com/matrix-org/matrix-react-sdk/pull/10178)). Fixes vector-im/element-web#24527. Contributed by @justjanne.

cypress/e2e/create-room/create-room.spec.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 The Matrix.org Foundation C.I.C.
+Copyright 2022-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.
@@ -61,4 +61,31 @@ describe("Create Room", () => {
         cy.contains(".mx_RoomHeader_nametext", name);
         cy.contains(".mx_RoomHeader_topic", topic);
     });
+
+    it("should create a room with a long room name, which is displayed with ellipsis", () => {
+        let roomId: string;
+        const LONG_ROOM_NAME =
+            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " +
+            "et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " +
+            "aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " +
+            "dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui " +
+            "officia deserunt mollit anim id est laborum.";
+
+        cy.createRoom({ name: LONG_ROOM_NAME }).then((_roomId) => {
+            roomId = _roomId;
+            cy.visit("/#/room/" + roomId);
+        });
+
+        // Wait until the room name is set
+        cy.get(".mx_RoomHeader_nametext").contains("Lorem ipsum");
+
+        // Make sure size of buttons on RoomHeader (except .mx_RoomHeader_name) are specified
+        // and the buttons are not compressed
+        // TODO: use a same class name
+        cy.get(".mx_RoomHeader_button").should("have.css", "height", "32px").should("have.css", "width", "32px");
+        cy.get(".mx_HeaderButtons > .mx_RightPanel_headerButton")
+            .should("have.css", "height", "32px")
+            .should("have.css", "width", "32px");
+        cy.get(".mx_RoomHeader").percySnapshotElement("Room header with a long room name");
+    });
 });

cypress/e2e/crypto/decryption-failure.spec.ts

@@ -118,7 +118,12 @@ describe("Decryption Failure Bar", () => {
                         "Verify this device to access all messages",
                     );
 
-                    cy.percySnapshot("DecryptionFailureBar prompts user to verify");
+                    cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
+                        "DecryptionFailureBar prompts user to verify",
+                        {
+                            widths: [320, 640],
+                        },
+                    );
 
                     cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").should("not.exist");
                     cy.contains(".mx_DecryptionFailureBar_button", "Verify").click();
@@ -146,17 +151,23 @@ describe("Decryption Failure Bar", () => {
                 "Open another device to load encrypted messages",
             );
 
-            cy.percySnapshot(
+            cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
                 "DecryptionFailureBar prompts user to open another device, with Resend Key Requests button",
+                {
+                    widths: [320, 640],
+                },
             );
 
             cy.intercept("/_matrix/client/r0/sendToDevice/m.room_key_request/*").as("keyRequest");
             cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").click();
             cy.wait("@keyRequest");
             cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").should("not.exist");
 
-            cy.percySnapshot(
-                "DecryptionFailureBar prompts user to open another device, " + "without Resend Key Requests button",
+            cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
+                "DecryptionFailureBar prompts user to open another device, without Resend Key Requests button",
+                {
+                    widths: [320, 640],
+                },
             );
         },
     );
@@ -177,7 +188,9 @@ describe("Decryption Failure Bar", () => {
                 "Reset your keys to prevent future decryption errors",
             );
 
-            cy.percySnapshot("DecryptionFailureBar prompts user to reset keys");
+            cy.get(".mx_DecryptionFailureBar").percySnapshotElement("DecryptionFailureBar prompts user to reset keys", {
+                widths: [320, 640],
+            });
 
             cy.contains(".mx_DecryptionFailureBar_button", "Reset").click();
 
@@ -196,7 +209,12 @@ describe("Decryption Failure Bar", () => {
                 "Some messages could not be decrypted",
             );
 
-            cy.percySnapshot("DecryptionFailureBar displays general message with no call to action");
+            cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
+                "DecryptionFailureBar displays general message with no call to action",
+                {
+                    widths: [320, 640],
+                },
+            );
         },
     );
 
@@ -210,7 +228,10 @@ describe("Decryption Failure Bar", () => {
         cy.get(".mx_DecryptionFailureBar").should("exist");
         cy.get(".mx_DecryptionFailureBar .mx_Spinner").should("exist");
 
-        cy.percySnapshot("DecryptionFailureBar displays loading spinner");
+        cy.get(".mx_DecryptionFailureBar").percySnapshotElement("DecryptionFailureBar displays loading spinner", {
+            allowSpinners: true,
+            widths: [320, 640],
+        });
 
         cy.wait(5000);
         cy.get(".mx_DecryptionFailureBar .mx_Spinner").should("not.exist");

cypress/e2e/polls/polls.spec.ts

@@ -20,7 +20,7 @@ import { HomeserverInstance } from "../../plugins/utils/homeserver";
 import { MatrixClient } from "../../global";
 import Chainable = Cypress.Chainable;
 
-const hideTimestampCSS = ".mx_MessageTimestamp { visibility: hidden !important; }";
+const hidePercyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
 
 describe("Polls", () => {
     let homeserver: HomeserverInstance;
@@ -133,7 +133,7 @@ describe("Polls", () => {
             .as("pollId");
 
         cy.get<string>("@pollId").then((pollId) => {
-            getPollTile(pollId).percySnapshotElement("Polls Timeline tile - no votes", { percyCSS: hideTimestampCSS });
+            getPollTile(pollId).percySnapshotElement("Polls Timeline tile - no votes", { percyCSS: hidePercyCSS });
 
             // Bot votes 'Maybe' in the poll
             botVoteForOption(bot, roomId, pollId, pollParams.options[2]);

cypress/e2e/sliding-sync/sliding-sync.ts

@@ -356,7 +356,7 @@ describe("Sliding Sync", () => {
     });
 
     // Regression test for https://github.com/vector-im/element-web/issues/21462
-    it("should not cancel replies when permalinks are clicked ", () => {
+    it("should not cancel replies when permalinks are clicked", () => {
         cy.get<string>("@roomId").then((roomId) => {
             // we require a first message as you cannot click the permalink text with the avatar in the way
             return cy

cypress/e2e/spotlight/spotlight.spec.ts

@@ -24,7 +24,7 @@ import Timeoutable = Cypress.Timeoutable;
 import Withinable = Cypress.Withinable;
 import Shadow = Cypress.Shadow;
 
-export enum Filter {
+enum Filter {
     People = "people",
     PublicRooms = "public_rooms",
 }
@@ -297,27 +297,28 @@ describe("Spotlight", () => {
 
     // TODO: We currently can’t test finding rooms on other homeservers/other protocols
     // We obviously don’t have federation or bridges in cypress tests
-    /*
-    const room3Name = "Matrix HQ";
-    const room3Id = "#matrix:matrix.org";
-
-    it("should find unknown public rooms on other homeservers", () => {
-        cy.openSpotlightDialog().within(() => {
-            cy.spotlightFilter(Filter.PublicRooms);
-            cy.spotlightSearch().clear().type(room3Name);
-            cy.get("[aria-haspopup=true][role=button]").click();
-        }).then(() => {
-            cy.contains(".mx_GenericDropdownMenu_Option--header", "matrix.org")
-                .next("[role=menuitemradio]")
-                .click();
-            cy.wait(3_600_000);
-        }).then(() => cy.spotlightDialog().within(() => {
-            cy.spotlightResults().should("have.length", 1);
-            cy.spotlightResults().eq(0).should("contain", room3Name);
-            cy.spotlightResults().eq(0).should("contain", room3Id);
-        }));
+    it.skip("should find unknown public rooms on other homeservers", () => {
+        cy.openSpotlightDialog()
+            .within(() => {
+                cy.spotlightFilter(Filter.PublicRooms);
+                cy.spotlightSearch().clear().type(room3Name);
+                cy.get("[aria-haspopup=true][role=button]").click();
+            })
+            .then(() => {
+                cy.contains(".mx_GenericDropdownMenu_Option--header", "matrix.org")
+                    .next("[role=menuitemradio]")
+                    .click();
+                cy.wait(3_600_000);
+            })
+            .then(() =>
+                cy.spotlightDialog().within(() => {
+                    cy.spotlightResults().should("have.length", 1);
+                    cy.spotlightResults().eq(0).should("contain", room3Name);
+                    cy.spotlightResults().eq(0).should("contain", room3Id);
+                }),
+            );
     });
-    */
+
     it("should find known people", () => {
         cy.openSpotlightDialog()
             .within(() => {