Merge remote-tracking branch 'upstream/develop' into SimonBrandner/feat/reaction-redact

Author: SimonBrandner

.github/workflows/cypress.yaml

@@ -48,14 +48,25 @@ jobs:
 
       - name: Get commit details
         if: github.event.workflow_run.event == 'pull_request'
+        uses: actions/github-script@v5
+        with:
+          script: |
+            const response = await github.rest.git.getCommit({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              commit_sha: "${{ github.event.workflow_run.head_sha }}",
+            });
+            core.exportVariable("COMMIT_INFO_MESSAGE", response.data.message);
+            core.exportVariable("COMMIT_INFO_AUTHOR", response.data.author.name);
+            core.exportVariable("COMMIT_INFO_EMAIL", response.data.author.email);
+
+      # Only run Percy when it is demanded or on develop
+      - name: Disable Percy if not needed
+        if: |
+          github.event.workflow_run.event == 'pull_request' &&
+          !contains(fromJSON(steps.prdetails.outputs.data).labels.*.name, 'X-Needs-Percy')
         run: |
-          echo "COMMIT_INFO_MESSAGE=\"$(git log --format=%B -n 1 ${{ github.event.workflow_run.head_sha }})\"" >> $GITHUB_ENV
-          echo "COMMIT_INFO_AUTHOR=$(git log --format='%an' -n 1 ${{ github.event.workflow_run.head_sha }})" >> $GITHUB_ENV
-          echo "COMMIT_INFO_EMAIL=$(git log --format='%ae' -n 1 ${{ github.event.workflow_run.head_sha }})" >> $GITHUB_ENV
-          # Only run Percy when it is demanded or on develop
-          if [[ "${{ (contains(fromJSON(steps.prdetails.outputs.data).labels.*.name, 'X-Needs-Percy') || github.event.workflow_run.event != 'pull_request') }}" == "false" ]]; then
-            echo "PERCY_ENABLE=0" >> $GITHUB_ENV
-          fi
+          echo "PERCY_ENABLE=0" >> $GITHUB_ENV
 
       - name: Run Cypress tests
         uses: cypress-io/github-action@v2
@@ -109,10 +120,14 @@ jobs:
   store-benchmark:
     needs: cypress
     runs-on: ubuntu-latest
-    if: github.event.workflow_run.event != 'pull_request'
+    if: |
+      github.event.workflow_run.event != 'pull_request' &&
+      github.event.workflow_run.head_branch == 'develop'
     permissions:
       contents: write
     steps:
+      - uses: actions/checkout@v2
+    
       - name: Download benchmark result
         uses: actions/download-artifact@v3
         with:

cypress.json

@@ -3,5 +3,9 @@
     "videoUploadOnPasses": false,
     "projectId": "ppvnzg",
     "experimentalSessionAndOrigin": true,
-    "experimentalInteractiveRunEvents": true
+    "experimentalInteractiveRunEvents": true,
+    "retries": {
+        "runMode": 2,
+        "openMode": 0
+    }
 }

cypress/integration/10-user-view/user-view.spec.ts

@@ -0,0 +1,51 @@
+/*
+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.
+*/
+
+/// <reference types="cypress" />
+
+import { SynapseInstance } from "../../plugins/synapsedocker";
+import { MatrixClient } from "../../global";
+
+describe("UserView", () => {
+    let synapse: SynapseInstance;
+
+    beforeEach(() => {
+        cy.startSynapse("default").then(data => {
+            synapse = data;
+
+            cy.initTestUser(synapse, "Violet");
+            cy.getBot(synapse, "Usman").as("bot");
+        });
+    });
+
+    afterEach(() => {
+        cy.stopSynapse(synapse);
+    });
+
+    it("should render the user view as expected", () => {
+        cy.get<MatrixClient>("@bot").then(bot => {
+            cy.visit(`/#/user/${bot.getUserId()}`);
+        });
+
+        cy.get("#mx_RightPanel .mx_UserInfo_profile h2").should("contain", "Usman");
+        cy.get(".mx_RightPanel .mx_Spinner").should("not.exist"); // wait for spinners to finish
+        cy.get(".mx_RightPanel").percySnapshotElement("User View", {
+            // Hide the MXID field as it'll vary on each test
+            percyCSS: ".mx_UserInfo_profile_mxid { visibility: hidden !important; }",
+            widths: [260, 500],
+        });
+    });
+});

cypress/support/app.ts

@@ -16,7 +16,6 @@ limitations under the License.
 
 /// <reference types="cypress" />
 
-import "./client"; // XXX: without an (any) import here, types break down
 import Chainable = Cypress.Chainable;
 import AUTWindow = Cypress.AUTWindow;
 
@@ -41,3 +40,6 @@ Cypress.Commands.add("tweakConfig", (tweaks: Record<string, any>): Chainable<AUT
         }
     });
 });
+
+// Needed to make this file a module
+export { };

cypress/support/index.ts

@@ -28,3 +28,4 @@ import "./bot";
 import "./clipboard";
 import "./util";
 import "./app";
+import "./percy";

cypress/support/percy.ts

@@ -0,0 +1,54 @@
+/*
+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.
+*/
+
+/// <reference types="cypress" />
+import { SnapshotOptions as PercySnapshotOptions } from '@percy/core';
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace Cypress {
+        interface SnapshotOptions extends PercySnapshotOptions {
+            domTransformation?: (documentClone: Document) => void;
+        }
+
+        interface Chainable {
+            percySnapshotElement(name?: string, options?: SnapshotOptions);
+        }
+
+        interface Chainable {
+            /**
+             * Takes a Percy snapshot of a given element
+             */
+            percySnapshotElement(name: string, options: SnapshotOptions): Chainable<void>;
+        }
+    }
+}
+
+Cypress.Commands.add("percySnapshotElement", { prevSubject: true }, (subject, name, options) => {
+    cy.percySnapshot(name, {
+        domTransformation: documentClone => scope(documentClone, subject.selector),
+        ...options,
+    });
+});
+
+function scope(documentClone: Document, selector: string): Document {
+    const element = documentClone.querySelector(selector);
+    documentClone.querySelector('body').innerHTML = element.outerHTML;
+
+    return documentClone;
+}
+
+export { };

package.json

@@ -134,7 +134,7 @@
     "@babel/traverse": "^7.12.12",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
     "@peculiar/webcrypto": "^1.1.4",
-    "@percy/cli": "^1.1.4",
+    "@percy/cli": "^1.3.0",
     "@percy/cypress": "^3.1.1",
     "@sentry/types": "^6.10.0",
     "@sinonjs/fake-timers": "^9.1.2",

res/css/_components.scss

@@ -275,6 +275,7 @@
 @import "./views/rooms/_ThreadSummary.scss";
 @import "./views/rooms/_TopUnreadMessagesBar.scss";
 @import "./views/rooms/_VoiceRecordComposerTile.scss";
+@import "./views/rooms/_VideoRoomSummary.scss";
 @import "./views/rooms/_WhoIsTypingTile.scss";
 @import "./views/settings/_AvatarSetting.scss";
 @import "./views/settings/_CrossSigningPanel.scss";

res/css/views/beta/_BetaCard.scss

@@ -20,6 +20,7 @@ limitations under the License.
     background-color: $system;
     border-radius: 8px;
     box-sizing: border-box;
+    color: $secondary-content;
 
     .mx_BetaCard_columns {
         display: flex;
@@ -45,14 +46,13 @@ limitations under the License.
             .mx_BetaCard_caption {
                 font-size: $font-15px;
                 line-height: $font-20px;
-                color: $secondary-content;
             }
 
             .mx_BetaCard_buttons {
                 display: flex;
                 flex-wrap: wrap-reverse;
-                gap: 12px;
-                margin: 20px auto;
+                gap: $spacing-12;
+                margin: $spacing-20 auto 0;
 
                 .mx_AccessibleButton {
                     padding: 7px 40px;
@@ -66,10 +66,16 @@ limitations under the License.
                 }
             }
 
-            .mx_BetaCard_disclaimer {
+            .mx_BetaCard_refreshWarning {
+                margin-top: $spacing-8;
+                font-size: $font-10px;
+                text-align: center;
+            }
+
+            .mx_BetaCard_faq {
+                margin-top: $spacing-20;
                 font-size: $font-12px;
                 line-height: $font-15px;
-                color: $secondary-content;
 
                 > h4 {
                     margin: 12px 0 0;
@@ -105,7 +111,6 @@ limitations under the License.
                 margin-top: 4px;
                 font-size: $font-12px;
                 line-height: $font-15px;
-                color: $secondary-content;
             }
         }
     }