Merge branch 'develop' into staging

# Conflicts:
#	package.json
#	src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx

Author: RiotRobot

.github/workflows/cypress.yaml

@@ -1,13 +1,33 @@
 # Triggers after the layered build has finished, taking the artifact and running cypress on it
+#
+# Also called by a workflow in matrix-js-sdk.
+#
 name: Cypress End to End Tests
 on:
     workflow_run:
         workflows: ["Element Web - Build"]
         types:
             - completed
+
+    # support calls from other workflows
+    workflow_call:
+        inputs:
+            react-sdk-repository:
+                type: string
+                required: true
+                description: "The name of the github repository to check out and build."
+            rust-crypto:
+                type: boolean
+                required: false
+                description: "Enable Rust cryptography for the cypress run."
+        secrets:
+            CYPRESS_RECORD_KEY:
+                required: true
+
 concurrency:
     group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch || github.run_id }}
     cancel-in-progress: ${{ github.event.workflow_run.event == 'pull_request' }}
+
 jobs:
     prepare:
         name: Prepare
@@ -100,16 +120,10 @@ jobs:
             - uses: browser-actions/setup-chrome@c485fa3bab6be59dce18dbc18ef6ab7cbc8ff5f1
             - run: echo "BROWSER_PATH=$(which chrome)" >> $GITHUB_ENV
 
-            - uses: tecolicom/actions-use-apt-tools@ceaf289fdbc6169fd2406a0f0365a584ffba003b # v1
-              with:
-                  # Our test suite includes some screenshot tests with unusual diacritics, which are
-                  # supposed to be covered by STIXGeneral.
-                  tools: fonts-stix
-
             # There's a 'download artifact' action, but it hasn't been updated for the workflow_run action
             # (https://github.com/actions/download-artifact/issues/60) so instead we get this mess:
             - name: 📥 Download artifact
-              uses: dawidd6/action-download-artifact@5e780fc7bbd0cac69fc73271ed86edf5dcb72d67 # v2
+              uses: dawidd6/action-download-artifact@246dbf436b23d7c49e21a7ab8204ca9ecd1fe615 # v2
               with:
                   run_id: ${{ github.event.workflow_run.id }}
                   name: previewbuild
@@ -129,14 +143,23 @@ jobs:
                   # XXX: We're checking out untrusted code in a secure context
                   # We need to be careful to not trust anything this code outputs/may do
                   #
-                  # Note that we check out from the default repository, which is (for this workflow) the
+                  # Note that (in the absence of a `react-sdk-repository` input),
+                  # we check out from the default repository, which is (for this workflow) the
                   # *target* repository for the pull request.
+                  #
                   ref: ${{ steps.sha.outputs.sha }}
                   persist-credentials: false
                   path: matrix-react-sdk
+                  repository: ${{ inputs.react-sdk-repository || github.repository }}
+
+            # Enable rust crypto if the calling workflow requests it
+            - name: Enable rust crypto
+              if: inputs.rust-crypto
+              run: |
+                  echo "CYPRESS_RUST_CRYPTO=1" >> "$GITHUB_ENV"
 
             - name: Run Cypress tests
-              uses: cypress-io/github-action@59c3b9b4a1a6e623c29806797d849845443487d1
+              uses: cypress-io/github-action@40a1a26c08d0e549e8516612ecebbd1ab5eeec8f
               with:
                   working-directory: matrix-react-sdk
                   # The built-in Electron runner seems to grind to a halt trying

.github/workflows/element-web.yaml

@@ -12,26 +12,47 @@ on:
         branches: [develop, master]
     repository_dispatch:
         types: [upstream-sdk-notify]
+
+    # support triggering from other workflows
+    workflow_call:
+        inputs:
+            react-sdk-repository:
+                type: string
+                required: true
+                description: "The name of the github repository to check out and build."
+
+            matrix-js-sdk-sha:
+                type: string
+                required: false
+                description: "The Git SHA of matrix-js-sdk to build against. By default, will use a matching branch name if it exists, or develop."
+
 concurrency:
     group: ${{ github.workflow }}-${{ github.ref }}-${{ github.event_name }}
     cancel-in-progress: true
+
 env:
-    # These must be set for fetchdep.sh to get the right branch
-    REPOSITORY: ${{ github.repository }}
+    # fetchdep.sh needs to know our PR number
     PR_NUMBER: ${{ github.event.pull_request.number }}
+
 jobs:
     build:
         name: "Build Element-Web"
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v3
+            - name: Checkout code
+              uses: actions/checkout@v3
+              with:
+                  repository: ${{ inputs.react-sdk-repository || github.repository }}
 
             - uses: actions/setup-node@v3
               with:
                   cache: "yarn"
 
             - name: Fetch layered build
               id: layered_build
+              env:
+                  # tell layered.sh to check out the right sha of the JS-SDK, if we were given one
+                  JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
               run: |
                   scripts/ci/layered.sh
                   JSSDK_SHA=$(git -C matrix-js-sdk rev-parse --short=12 HEAD)
@@ -43,17 +64,20 @@ jobs:
               run: cp element.io/develop/config.json config.json
               working-directory: ./element-web
 
-            # After building we write the version file and the react-sdk sha so our cypress tests are from the same sha
             - name: Build
               env:
                   CI_PACKAGE: true
                   VERSION: "${{ steps.layered_build.outputs.VERSION }}"
               run: |
                   yarn build
                   echo $VERSION > webapp/version
-                  echo $GITHUB_SHA > webapp/sha
               working-directory: ./element-web
 
+            # Record the react-sdk sha so our cypress tests are from the same sha
+            - name: Record react-sdk SHA
+              run: |
+                  git rev-parse HEAD > element-web/webapp/sha
+
             - name: Upload Artifact
               uses: actions/upload-artifact@v3
               with:

.github/workflows/netlify.yaml

@@ -33,7 +33,7 @@ jobs:
             # There's a 'download artifact' action, but it hasn't been updated for the workflow_run action
             # (https://github.com/actions/download-artifact/issues/60) so instead we get this mess:
             - name: 📥 Download artifact
-              uses: dawidd6/action-download-artifact@5e780fc7bbd0cac69fc73271ed86edf5dcb72d67 # v2
+              uses: dawidd6/action-download-artifact@246dbf436b23d7c49e21a7ab8204ca9ecd1fe615 # v2
               with:
                   run_id: ${{ github.event.workflow_run.id }}
                   name: previewbuild

.github/workflows/static_analysis.yaml

@@ -10,10 +10,11 @@ on:
 concurrency:
     group: ${{ github.workflow }}-${{ github.ref }}-${{ github.event_name }}
     cancel-in-progress: true
+
 env:
-    # These must be set for fetchdep.sh to get the right branch
-    REPOSITORY: ${{ github.repository }}
+    # fetchdep.sh needs to know our PR number
     PR_NUMBER: ${{ github.event.pull_request.number }}
+
 jobs:
     ts_lint:
         name: "Typescript Syntax Check"
@@ -59,7 +60,7 @@ jobs:
 
             - name: Get diff lines
               id: diff
-              uses: Equip-Collaboration/diff-line-numbers@df70b4b83e05105c15f20dc6cc61f1463411b2a6 # v1.0.0
+              uses: Equip-Collaboration/diff-line-numbers@e752977e2cb4207d671bb9e4dad18c07c1b73d52 # v1.1.0
               with:
                   include: '["\\.tsx?$"]'
 

.github/workflows/tests.yml

@@ -20,11 +20,12 @@ on:
 concurrency:
     group: ${{ github.workflow }}-${{ github.ref }}-${{ github.event_name }}
     cancel-in-progress: true
+
 env:
     ENABLE_COVERAGE: ${{ github.event_name != 'merge_group' && inputs.disable_coverage != 'true' }}
-    # These must be set for fetchdep.sh to get the right branch
-    REPOSITORY: ${{ github.repository }}
+    # fetchdep.sh needs to know our PR number
     PR_NUMBER: ${{ github.event.pull_request.number }}
+
 jobs:
     jest:
         name: Jest

.stylelintrc.js

@@ -33,6 +33,11 @@ module.exports = {
         "import-notation": null,
         "value-keyword-case": null,
         "declaration-block-no-redundant-longhand-properties": null,
+        "declaration-block-no-duplicate-properties": [
+            true,
+            // useful for fallbacks
+            { ignore: ["consecutive-duplicates-with-different-values"] },
+        ],
         "shorthand-property-no-redundant-values": null,
         "property-no-vendor-prefix": null,
         "value-no-vendor-prefix": null,

cypress/e2e/audio-player/audio-player.spec.ts

@@ -176,7 +176,7 @@ describe("Audio player", () => {
 
         // Enable high contrast manually
         cy.openUserSettings("Appearance")
-            .get(".mx_ThemeChoicePanel")
+            .findByTestId("mx_ThemeChoicePanel")
             .findByLabelText("Use high contrast")
             .click({ force: true }); // force click because the size of the checkbox is zero
 
@@ -333,30 +333,33 @@ describe("Audio player", () => {
 
         // On a thread
         cy.get(".mx_ThreadView").within(() => {
-            cy.get(".mx_EventTile_last")
-                .within(() => {
-                    // Assert that the player is correctly rendered on a thread
-                    cy.get(".mx_EventTile_mediaLine .mx_MAudioBody .mx_AudioPlayer_container").within(() => {
-                        // Assert that the counter is zero before clicking the play button
-                        cy.contains(".mx_AudioPlayer_seek [role='timer']", "00:00").should("exist");
-
-                        // Find and click "Play" button, the wait is to make the test less flaky
-                        cy.findByRole("button", { name: "Play" }).should("exist");
-                        cy.wait(500).findByRole("button", { name: "Play" }).click();
-
-                        // Assert that "Pause" button can be found
-                        cy.findByRole("button", { name: "Pause" }).should("exist");
-
-                        // Assert that the timer is reset when the audio file finished playing
-                        cy.contains(".mx_AudioPlayer_seek [role='timer']", "00:00").should("exist");
-
-                        // Assert that "Play" button can be found
-                        cy.findByRole("button", { name: "Play" }).should("exist").should("not.have.attr", "disabled");
-                    });
-                })
-                .realHover()
-                .findByRole("button", { name: "Reply" })
-                .click(); // Find and click "Reply" button
+            cy.get(".mx_EventTile_last").within(() => {
+                // Assert that the player is correctly rendered on a thread
+                cy.get(".mx_EventTile_mediaLine .mx_MAudioBody .mx_AudioPlayer_container").within(() => {
+                    // Assert that the counter is zero before clicking the play button
+                    cy.contains(".mx_AudioPlayer_seek [role='timer']", "00:00").should("exist");
+
+                    // Find and click "Play" button, the wait is to make the test less flaky
+                    cy.findByRole("button", { name: "Play" }).should("exist");
+                    cy.wait(500).findByRole("button", { name: "Play" }).click();
+
+                    // Assert that "Pause" button can be found
+                    cy.findByRole("button", { name: "Pause" }).should("exist");
+
+                    // Assert that the timer is reset when the audio file finished playing
+                    cy.contains(".mx_AudioPlayer_seek [role='timer']", "00:00").should("exist");
+
+                    // Assert that "Play" button can be found
+                    cy.findByRole("button", { name: "Play" }).should("exist").should("not.have.attr", "disabled");
+                });
+            });
+
+            // Find and click "Reply" button
+            //
+            // Calling cy.get(".mx_EventTile_last") again here is a workaround for
+            // https://github.com/matrix-org/matrix-js-sdk/issues/3394: the event tile may have been re-mounted while
+            // the audio was playing.
+            cy.get(".mx_EventTile_last").realHover().findByRole("button", { name: "Reply" }).click();
 
             cy.get(".mx_MessageComposer--compact").within(() => {
                 // Assert that the reply preview is rendered on the message composer

cypress/e2e/composer/composer.spec.ts

@@ -225,9 +225,10 @@ describe("Composer", () => {
                         });
                     // ...inserts the username into the composer
                     cy.findByRole("textbox").within(() => {
-                        // TODO update this test when the mentions are inserted as pills, instead
-                        // of as text
-                        cy.findByText(otherUserName, { exact: false }).should("exist");
+                        cy.findByText(otherUserName, { exact: false })
+                            .should("exist")
+                            .should("have.attr", "contenteditable", "false")
+                            .should("have.attr", "data-mention-type", "user");
                     });
 
                     // Send the message to clear the composer
@@ -250,9 +251,10 @@ describe("Composer", () => {
                     // Selecting the autocomplete option using Enter inserts it into the composer
                     cy.findByRole("textbox").type(`{Enter}`);
                     cy.findByRole("textbox").within(() => {
-                        // TODO update this test when the mentions are inserted as pills, instead
-                        // of as text
-                        cy.findByText(otherUserName, { exact: false }).should("exist");
+                        cy.findByText(otherUserName, { exact: false })
+                            .should("exist")
+                            .should("have.attr", "contenteditable", "false")
+                            .should("have.attr", "data-mention-type", "user");
                     });
                 });
             });

cypress/e2e/crypto/complete-security.spec.ts

@@ -16,8 +16,9 @@ limitations under the License.
 
 import type { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import { HomeserverInstance } from "../../plugins/utils/homeserver";
-import { handleVerificationRequest, waitForVerificationRequest } from "./utils";
+import { handleVerificationRequest, logIntoElement, waitForVerificationRequest } from "./utils";
 import { CypressBot } from "../../support/bot";
+import { skipIfRustCrypto } from "../../support/util";
 
 describe("Complete security", () => {
     let homeserver: HomeserverInstance;
@@ -46,6 +47,8 @@ describe("Complete security", () => {
     });
 
     it("should walk through device verification if we have a signed device", () => {
+        skipIfRustCrypto();
+
         // create a new user, and have it bootstrap cross-signing
         let botClient: CypressBot;
         cy.getBot(homeserver, { displayName: "Jeff" })
@@ -66,7 +69,6 @@ describe("Complete security", () => {
 
                 // accept the verification request on the "bot" side
                 cy.wrap(botVerificationRequestPromise).then(async (verificationRequest: VerificationRequest) => {
-                    await verificationRequest.accept();
                     await handleVerificationRequest(verificationRequest);
                 });
 
@@ -80,22 +82,3 @@ describe("Complete security", () => {
             });
     });
 });
-
-/**
- * Fill in the login form in element with the given creds
- */
-function logIntoElement(homeserverUrl: string, username: string, password: string) {
-    cy.visit("/#/login");
-
-    // select homeserver
-    cy.findByRole("button", { name: "Edit" }).click();
-    cy.findByRole("textbox", { name: "Other homeserver" }).type(homeserverUrl);
-    cy.findByRole("button", { name: "Continue" }).click();
-
-    // wait for the dialog to go away
-    cy.get(".mx_ServerPickerDialog").should("not.exist");
-
-    cy.findByRole("textbox", { name: "Username" }).type(username);
-    cy.findByPlaceholderText("Password").type(password);
-    cy.findByRole("button", { name: "Sign in" }).click();
-}