Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into…

… t3chguy/fix/22275

� Conflicts:
�	res/css/_common.pcss
�	res/css/views/dialogs/_CompoundDialog.pcss
�	src/@types/global.d.ts
�	src/components/structures/MatrixChat.tsx
�	src/components/views/beacon/BeaconViewDialog.tsx
�	src/components/views/dialogs/CreateSubspaceDialog.tsx
�	src/components/views/messages/MBeaconBody.tsx
�	test/components/views/beacon/BeaconViewDialog-test.tsx

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,15 +1,21 @@
-<!-- Please read https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.md before submitting your pull request -->
+<!-- Thanks for submitting a PR! Please ensure the following requirements are met in order for us to review your PR -->
 
-<!-- Include a Sign-Off as described in https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.md#sign-off -->
+## Checklist
 
-<!-- To specify text for the changelog entry (otherwise the PR title will be used):
-Notes:
+* [ ] Tests written for new code (and old code if feasible)
+* [ ] Linter and other CI checks pass
+* [ ] Sign-off given on the changes (see [CONTRIBUTING.md](https://github.com/matrix-org/matrix-react-sdk/blob/develop/CONTRIBUTING.md))
 
-Changes in this project generate changelog entries in element-web by default.
-To suppress this:
+<!--
+If you would like to specify text for the changelog entry other than your PR title, add the following:
+
+Notes: Add super cool feature
+
+Changes in this project also generate changelogs in Element Web. To disable this, use the following:
 
 element-web notes: none
 
-...or to specify different notes:
-element-web notes: <notes>
+or specify alternative text:
+
+element-web notes: Add super cool feature
 -->

.github/renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "github>matrix-org/renovate-config-element-web"
+  ]
+}

.github/workflows/cypress.yaml

@@ -22,7 +22,7 @@ jobs:
 
       - id: prdetails
         if: github.event.workflow_run.event == 'pull_request'
-        uses: matrix-org/pr-details-action@v1.1
+        uses: matrix-org/pr-details-action@v1.2
         with:
           owner: ${{ github.event.workflow_run.head_repository.owner.login }}
           branch: ${{ github.event.workflow_run.head_branch }}
@@ -69,7 +69,7 @@ jobs:
           echo "PERCY_ENABLE=0" >> $GITHUB_ENV
 
       - name: Run Cypress tests
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4.1.1
         with:
           # The built-in Electron runner seems to grind to a halt trying
           # to run the tests, so use chrome.

.github/workflows/netlify.yaml

@@ -25,7 +25,7 @@ jobs:
             Exercise caution. Use test accounts.
 
       - id: prdetails
-        uses: matrix-org/pr-details-action@v1.1
+        uses: matrix-org/pr-details-action@v1.2
         with:
           owner: ${{ github.event.workflow_run.head_repository.owner.login }}
           branch: ${{ github.event.workflow_run.head_branch }}

.stylelintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
     "extends": "stylelint-config-standard",
+    customSyntax: require('postcss-scss'),
     "plugins": [
         "stylelint-scss",
     ],
@@ -27,6 +28,26 @@ module.exports = {
         // rather than a CI thing. Shorthand selectors are harder to detect when searching for a
         // class name. This regex is trying to *allow* anything except `&words`, such as `&::before`,
         // `&.mx_Class`, etc.
-        "selector-nested-pattern": "^((&[ :.\\\[,])|([^&]))"
-    }
+        "selector-nested-pattern": "^((&[ :.\\\[,])|([^&]))",
+        "declaration-colon-space-after": "always-single-line",
+        // Disable some defaults
+        "selector-class-pattern": null,
+        "custom-property-pattern": null,
+        "selector-id-pattern": null,
+        "keyframes-name-pattern": null,
+        "string-quotes": null,
+        "alpha-value-notation": null,
+        "color-function-notation": null,
+        "selector-not-notation": null,
+        "import-notation": null,
+        "value-keyword-case": null,
+        "declaration-block-no-redundant-longhand-properties": null,
+        "shorthand-property-no-redundant-values": null,
+        "property-no-vendor-prefix": null,
+        "value-no-vendor-prefix": null,
+        "selector-no-vendor-prefix": null,
+        "media-feature-name-no-vendor-prefix": null,
+        "number-max-precision": null,
+        "no-invalid-double-slash-comments": true,
+    },
 }

README.md

@@ -211,6 +211,6 @@ Now the yarn commands should work as normal.
 ### End-to-End tests
 
 Make sure you've got your Element development server running (by doing `yarn
-start` in element-web), and then in this project, run `yarn run e2etests`. See
-[`test/end-to-end-tests/README.md`](https://github.com/matrix-org/matrix-react-sdk/blob/develop/test/end-to-end-tests/README.md)
+start` in element-web), and then in this project, run `yarn run test:cypress`. See
+[`docs/cypress.md`](https://github.com/matrix-org/matrix-react-sdk/blob/develop/docs/cypress.md)
 for more information.

cypress.config.ts

@@ -0,0 +1,33 @@
+/*
+Copyright 2022 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 { defineConfig } from 'cypress';
+
+export default defineConfig({
+    videoUploadOnPasses: false,
+    projectId: 'ppvnzg',
+    experimentalInteractiveRunEvents: true,
+    defaultCommandTimeout: 10000,
+    chromeWebSecurity: false,
+    e2e: {
+        setupNodeEvents(on, config) {
+            return require('./cypress/plugins/index.ts').default(on, config);
+        },
+        baseUrl: 'http://localhost:8080',
+        experimentalSessionAndOrigin: true,
+        specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+    },
+});

cypress/integration/1-register/register.spec.ts → cypress/e2e/1-register/register.spec.ts

@@ -65,6 +65,8 @@ describe("Registration", () => {
         cy.startMeasuring("from-submit-to-home");
         cy.get(".mx_InteractiveAuthEntryComponents_termsSubmit").click();
 
+        cy.get(".mx_UseCaseSelection_skip .mx_AccessibleButton").click();
+
         cy.url().should('contain', '/#/home');
         cy.stopMeasuring("from-submit-to-home");
 

cypress/integration/12-spotlight/spotlight.spec.ts → cypress/e2e/12-spotlight/spotlight.spec.ts

@@ -55,6 +55,7 @@ declare global {
             roomHeaderName(
                 options?: Partial<Loggable & Timeoutable & Withinable & Shadow>
             ): Chainable<JQuery<HTMLElement>>;
+            startDM(name: string): Chainable<void>;
         }
     }
 }
@@ -109,6 +110,20 @@ Cypress.Commands.add("roomHeaderName", (
     return cy.get(".mx_RoomHeader_nametext", options);
 });
 
+Cypress.Commands.add("startDM", (name: string) => {
+    cy.openSpotlightDialog().within(() => {
+        cy.spotlightFilter(Filter.People);
+        cy.spotlightSearch().clear().type(name);
+        cy.get(".mx_Spinner").should("not.exist");
+        cy.spotlightResults().should("have.length", 1);
+        cy.spotlightResults().eq(0).should("contain", name);
+        cy.spotlightResults().eq(0).click();
+    }).then(() => {
+        cy.roomHeaderName().should("contain", name);
+        cy.get(".mx_RoomSublist[aria-label=People]").should("contain", name);
+    });
+});
+
 describe("Spotlight", () => {
     let synapse: SynapseInstance;
 
@@ -124,6 +139,9 @@ describe("Spotlight", () => {
     const room2Name = "Lounge";
     let room2Id: string;
 
+    const room3Name = "Public";
+    let room3Id: string;
+
     beforeEach(() => {
         cy.startSynapse("default").then(data => {
             synapse = data;
@@ -148,6 +166,19 @@ describe("Spotlight", () => {
                             room2Id = _room2Id;
                             bot2.invite(room2Id, bot1.getUserId());
                         });
+                    bot2.createRoom({
+                        name: room3Name,
+                        visibility: Visibility.Public, initial_state: [{
+                            type: "m.room.history_visibility",
+                            state_key: "",
+                            content: {
+                                history_visibility: "world_readable",
+                            },
+                        }],
+                    }).then(({ room_id: _room3Id }) => {
+                        room3Id = _room3Id;
+                        bot2.invite(room3Id, bot1.getUserId());
+                    });
                 }),
             ).then(() =>
                 cy.get('.mx_RoomSublist_skeletonUI').should('not.exist'),
@@ -197,6 +228,7 @@ describe("Spotlight", () => {
             cy.spotlightSearch().clear().type(room1Name);
             cy.spotlightResults().should("have.length", 1);
             cy.spotlightResults().eq(0).should("contain", room1Name);
+            cy.spotlightResults().eq(0).should("contain", "View");
             cy.spotlightResults().eq(0).click();
             cy.url().should("contain", room1Id);
         }).then(() => {
@@ -210,6 +242,7 @@ describe("Spotlight", () => {
             cy.spotlightSearch().clear().type(room2Name);
             cy.spotlightResults().should("have.length", 1);
             cy.spotlightResults().eq(0).should("contain", room2Name);
+            cy.spotlightResults().eq(0).should("contain", "Join");
             cy.spotlightResults().eq(0).click();
             cy.url().should("contain", room2Id);
         }).then(() => {
@@ -218,6 +251,21 @@ describe("Spotlight", () => {
         });
     });
 
+    it("should find unknown public world readable rooms", () => {
+        cy.openSpotlightDialog().within(() => {
+            cy.spotlightFilter(Filter.PublicRooms);
+            cy.spotlightSearch().clear().type(room3Name);
+            cy.spotlightResults().should("have.length", 1);
+            cy.spotlightResults().eq(0).should("contain", room3Name);
+            cy.spotlightResults().eq(0).should("contain", "View");
+            cy.spotlightResults().eq(0).click();
+            cy.url().should("contain", room3Id);
+        }).then(() => {
+            cy.get(".mx_RoomPreviewBar_actions .mx_AccessibleButton").click();
+            cy.roomHeaderName().should("contain", room3Name);
+        });
+    });
+
     // TODO: We currently can’t test finding rooms on other homeservers/other protocols
     // We obviously don’t have federation or bridges in cypress tests
     /*
@@ -319,13 +367,30 @@ describe("Spotlight", () => {
         });
     });
 
+    it("should close spotlight after starting a DM", () => {
+        cy.startDM(bot1Name);
+        cy.get(".mx_SpotlightDialog").should("have.length", 0);
+    });
+
+    it("should show the same user only once", () => {
+        cy.startDM(bot1Name);
+        cy.visit("/#/home");
+
+        cy.openSpotlightDialog().within(() => {
+            cy.spotlightFilter(Filter.People);
+            cy.spotlightSearch().clear().type(bot1Name);
+            cy.get(".mx_Spinner").should("not.exist");
+            cy.spotlightResults().should("have.length", 1);
+        });
+    });
+
     it("should be able to navigate results via keyboard", () => {
         cy.openSpotlightDialog().within(() => {
             cy.spotlightFilter(Filter.People);
             cy.spotlightSearch().clear().type("b");
             // our debouncing logic only starts the search after a short timeout,
             // so we wait a few milliseconds.
-            cy.wait(300);
+            cy.wait(1000);
             cy.get(".mx_Spinner").should("not.exist").then(() => {
                 cy.spotlightResults().should("have.length", 2).then(() => {
                     cy.spotlightResults().eq(0)