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

… spaces-jump-to-room

.eslintrc.js

@@ -18,7 +18,7 @@ module.exports = {
     },
 
     overrides: [{
-        "files": ["src/**/*.{ts,tsx}"],
+        "files": ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}"],
         "extends": ["matrix-org/ts"],
         "rules": {
             // We're okay being explicit at the moment
@@ -30,6 +30,24 @@ module.exports = {
 
             "quotes": "off",
             "no-extra-boolean-cast": "off",
+            "no-restricted-properties": [
+                "error",
+                ...buildRestrictedPropertiesOptions(
+                    ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
+                    "Use UIStore to access window dimensions instead",
+                ),
+            ],
         },
     }],
 };
+
+function buildRestrictedPropertiesOptions(properties, message) {
+    return properties.map(prop => {
+        const [object, property] = prop.split(".");
+        return {
+            object,
+            property,
+            message,
+        };
+    });
+}

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,3 @@
+<!-- Please read https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.rst before submitting your pull request -->
+
+<!-- Include a Sign-Off as described in https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.rst#sign-off -->

.github/workflows/develop.yml

@@ -0,0 +1,41 @@
+name: Develop
+on:
+    push:
+        branches: [develop]
+    pull_request:
+        branches: [develop]
+jobs:
+    end-to-end:
+        runs-on: ubuntu-latest
+        container: vectorim/element-web-ci-e2etests-env:latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v2
+            - name: Prepare End-to-End tests
+              run: ./scripts/ci/prepare-end-to-end-tests.sh
+            - name: Run End-to-End tests
+              run: ./scripts/ci/run-end-to-end-tests.sh
+            - name: Archive logs
+              uses: actions/upload-artifact@v2
+              if: ${{ always() }}
+              with:
+                path: |
+                    test/end-to-end-tests/logs/**/*
+                    test/end-to-end-tests/synapse/installations/consent/homeserver.log
+                retention-days: 14
+            - name: Download previous benchmark data
+              uses: actions/cache@v1
+              with:
+                path: ./cache
+                key: ${{ runner.os }}-benchmark
+            - name: Store benchmark result
+              uses: matrix-org/github-action-benchmark@jsperfentry-1
+              with:
+                tool: 'jsperformanceentry'
+                output-file-path: test/end-to-end-tests/performance-entries.json
+                fail-on-alert: false
+                comment-on-alert: false
+                # Only temporary to monitor where failures occur
+                alert-comment-cc-users: '@gsouquet'
+                github-token: ${{ secrets.DEPLOY_GH_PAGES }}
+                auto-push: ${{ github.ref == 'refs/heads/develop' }}

__mocks__/empty.js

@@ -0,0 +1,2 @@
+// Yes, this is empty.
+module.exports = {};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.20.0",
+  "version": "3.24.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -55,10 +55,9 @@
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "await-lock": "^2.1.0",
-    "blueimp-canvas-to-blob": "^3.28.0",
     "browser-encrypt-attachment": "^0.3.0",
     "browser-request": "^0.3.3",
-    "cheerio": "^1.0.0-rc.5",
+    "cheerio": "^1.0.0-rc.9",
     "classnames": "^2.2.6",
     "commonmark": "^0.29.3",
     "counterpart": "^0.18.6",
@@ -79,27 +78,25 @@
     "katex": "^0.12.0",
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.20",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-    "matrix-widget-api": "^0.1.0-beta.13",
+    "matrix-js-sdk": "12.0.0",
+    "matrix-widget-api": "^0.1.0-beta.15",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
     "pako": "^2.0.3",
     "parse5": "^6.0.1",
     "png-chunks-extract": "^1.0.0",
     "prop-types": "^15.7.2",
     "qrcode": "^1.4.4",
-    "qs": "^6.9.6",
     "re-resizable": "^6.9.0",
-    "react": "^16.14.0",
-    "react-beautiful-dnd": "^4.0.1",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.2",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-dom": "^17.0.2",
     "react-focus-lock": "^2.5.0",
     "react-transition-group": "^4.4.1",
     "resize-observer-polyfill": "^1.5.1",
     "rfc4648": "^1.4.0",
     "sanitize-html": "^2.3.2",
     "tar-js": "^0.3.0",
-    "text-encoding-utf-8": "^1.0.2",
     "url": "^0.11.0",
     "what-input": "^5.2.10",
     "zxcvbn": "^4.4.2"
@@ -121,10 +118,12 @@
     "@babel/preset-typescript": "^7.12.7",
     "@babel/register": "^7.12.10",
     "@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.3.tgz",
     "@peculiar/webcrypto": "^1.1.4",
     "@sinonjs/fake-timers": "^7.0.2",
     "@types/classnames": "^2.2.11",
     "@types/counterpart": "^0.18.1",
+    "@types/diff-match-patch": "^1.0.32",
     "@types/flux": "^3.1.9",
     "@types/jest": "^26.0.20",
     "@types/linkifyjs": "^2.1.3",
@@ -134,19 +133,20 @@
     "@types/pako": "^1.0.1",
     "@types/parse5": "^6.0.0",
     "@types/qrcode": "^1.3.5",
-    "@types/react": "^16.9",
-    "@types/react-dom": "^16.9.10",
+    "@types/react": "^17.0.2",
+    "@types/react-beautiful-dnd": "^13.0.0",
+    "@types/react-dom": "^17.0.2",
     "@types/react-transition-group": "^4.4.0",
-    "@types/sanitize-html": "^1.27.0",
+    "@types/sanitize-html": "^2.3.1",
     "@types/zxcvbn": "^4.4.0",
     "@typescript-eslint/eslint-plugin": "^4.14.0",
     "@typescript-eslint/parser": "^4.14.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "chokidar": "^3.5.1",
     "concurrently": "^5.3.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "7.18.0",
     "eslint-config-matrix-org": "^0.2.0",
     "eslint-plugin-babel": "^5.3.1",
@@ -159,24 +159,20 @@
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "jest-fetch-mock": "^3.0.3",
     "matrix-mock-request": "^1.2.3",
-    "matrix-react-test-utils": "^0.2.2",
+    "matrix-react-test-utils": "^0.2.3",
     "matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
-    "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
-    "react-test-renderer": "^16.14.0",
+    "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.2",
     "stylelint": "^13.9.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.18.0",
     "typescript": "^4.1.3",
     "walk": "^2.3.14"
   },
-  "resolutions": {
-    "**/@types/react": "^16.14"
-  },
   "jest": {
     "testEnvironment": "./__test-utils__/environment.js",
     "testMatch": [
-      "<rootDir>/test/**/*-test.[jt]s"
+      "<rootDir>/test/**/*-test.[jt]s?(x)"
     ],
     "setupFiles": [
       "jest-canvas-mock"
@@ -186,7 +182,10 @@
     ],
     "moduleNameMapper": {
       "\\.(gif|png|svg|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
-      "\\$webapp/i18n/languages.json": "<rootDir>/__mocks__/languages.json"
+      "\\$webapp/i18n/languages.json": "<rootDir>/__mocks__/languages.json",
+      "decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
+      "decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
+      "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js"
     },
     "transformIgnorePatterns": [
       "/node_modules/(?!matrix-js-sdk).+$"

res/css/_common.scss

@@ -45,6 +45,8 @@ html {
        N.B. Breaks things when we have legitimate horizontal overscroll */
     height: 100%;
     overflow: hidden;
+    // Stop similar overscroll bounce in Firefox Nightly for macOS
+    overscroll-behavior: none;
 }
 
 body {
@@ -289,6 +291,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 
 .mx_Dialog_staticWrapper .mx_Dialog {
     z-index: 4010;
+    contain: content;
 }
 
 .mx_Dialog_background {

res/css/_components.scss

@@ -54,6 +54,7 @@
 @import "./views/avatars/_MemberStatusMessageAvatar.scss";
 @import "./views/avatars/_PulsedAvatar.scss";
 @import "./views/avatars/_WidgetAvatar.scss";
+@import "./views/beta/_BetaCard.scss";
 @import "./views/context_menus/_CallContextMenu.scss";
 @import "./views/context_menus/_IconizedContextMenu.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
@@ -62,6 +63,7 @@
 @import "./views/dialogs/_AddExistingToSpaceDialog.scss";
 @import "./views/dialogs/_AddressPickerDialog.scss";
 @import "./views/dialogs/_Analytics.scss";
+@import "./views/dialogs/_BetaFeedbackDialog.scss";
 @import "./views/dialogs/_BugReportDialog.scss";
 @import "./views/dialogs/_ChangelogDialog.scss";
 @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@@ -74,6 +76,7 @@
 @import "./views/dialogs/_DevtoolsDialog.scss";
 @import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
 @import "./views/dialogs/_FeedbackDialog.scss";
+@import "./views/dialogs/_ForwardDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_HostSignupDialog.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";
@@ -96,6 +99,7 @@
 @import "./views/dialogs/_SpaceSettingsDialog.scss";
 @import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
 @import "./views/dialogs/_TermsDialog.scss";
+@import "./views/dialogs/_UntrustedDeviceDialog.scss";
 @import "./views/dialogs/_UploadConfirmDialog.scss";
 @import "./views/dialogs/_UserSettingsDialog.scss";
 @import "./views/dialogs/_WidgetCapabilitiesPromptDialog.scss";
@@ -119,7 +123,6 @@
 @import "./views/elements/_EventListSummary.scss";
 @import "./views/elements/_FacePile.scss";
 @import "./views/elements/_Field.scss";
-@import "./views/elements/_FormButton.scss";
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InfoTooltip.scss";
 @import "./views/elements/_InlineSpinner.scss";
@@ -176,6 +179,7 @@
 @import "./views/messages/_common_CryptoEvent.scss";
 @import "./views/right_panel/_BaseCard.scss";
 @import "./views/right_panel/_EncryptionInfo.scss";
+@import "./views/right_panel/_PinnedMessagesCard.scss";
 @import "./views/right_panel/_RoomSummaryCard.scss";
 @import "./views/right_panel/_UserInfo.scss";
 @import "./views/right_panel/_VerificationPanel.scss";
@@ -200,7 +204,6 @@
 @import "./views/rooms/_NewRoomIntro.scss";
 @import "./views/rooms/_NotificationBadge.scss";
 @import "./views/rooms/_PinnedEventTile.scss";
-@import "./views/rooms/_PinnedEventsPanel.scss";
 @import "./views/rooms/_PresenceLabel.scss";
 @import "./views/rooms/_ReplyPreview.scss";
 @import "./views/rooms/_RoomBreadcrumbs.scss";
@@ -237,6 +240,7 @@
 @import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
+@import "./views/settings/tabs/user/_LabsUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_NotificationUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";

res/css/structures/_ContextualMenu.scss

@@ -38,6 +38,7 @@ limitations under the License.
     position: absolute;
     font-size: $font-14px;
     z-index: 5001;
+    contain: content;
 }
 
 .mx_ContextualMenu_right {
@@ -115,8 +116,3 @@ limitations under the License.
     border-top: 8px solid $menu-bg-color;
     border-right: 8px solid transparent;
 }
-
-.mx_ContextualMenu_spinner {
-    display: block;
-    margin: 0 auto;
-}

res/css/structures/_GroupFilterPanel.scss

@@ -56,6 +56,12 @@ limitations under the License.
 .mx_GroupFilterPanel .mx_TagTile {
     // opacity: 0.5;
     position: relative;
+
+    .mx_BetaDot {
+        position: absolute;
+        right: -13px;
+        top: -11px;
+    }
 }
 
 .mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {

res/css/structures/_LeftPanel.scss

@@ -25,6 +25,7 @@ $roomListCollapsedWidth: 68px;
 
     // Create a row-based flexbox for the GroupFilterPanel and the room list
     display: flex;
+    contain: content;
 
     .mx_LeftPanel_GroupFilterPanelContainer {
         flex-grow: 0;
@@ -70,6 +71,7 @@ $roomListCollapsedWidth: 68px;
             // aligned correctly. This is also a row-based flexbox.
             display: flex;
             align-items: center;
+            contain: content;
 
             &.mx_IndicatorScrollbar_leftOverflow {
                 mask-image: linear-gradient(90deg, transparent, black 5%);
@@ -109,6 +111,29 @@ $roomListCollapsedWidth: 68px;
                 }
             }
 
+            .mx_LeftPanel_dialPadButton {
+                width: 32px;
+                height: 32px;
+                border-radius: 8px;
+                background-color: $roomlist-button-bg-color;
+                position: relative;
+                margin-left: 8px;
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 8px;
+                    left: 8px;
+                    width: 16px;
+                    height: 16px;
+                    mask-image: url('$(res)/img/element-icons/call/dialpad.svg');
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background: $secondary-fg-color;
+                }
+            }
+
             .mx_LeftPanel_exploreButton {
                 width: 32px;
                 height: 32px;
@@ -183,6 +208,12 @@ $roomListCollapsedWidth: 68px;
                 flex-direction: column;
                 justify-content: center;
 
+                .mx_LeftPanel_dialPadButton {
+                    margin-left: 0;
+                    margin-top: 8px;
+                    background-color: transparent;
+                }
+
                 .mx_LeftPanel_exploreButton {
                     margin-left: 0;
                     margin-top: 8px;