Merge branch 'develop' into patch-1

Author: turt2live

.eslintignore.errorfiles

@@ -1,56 +1,15 @@
 # autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
 
+src/Markdown.js
+src/Velociraptor.js
 src/components/structures/RoomDirectory.js
-src/components/structures/RoomStatusBar.js
-src/components/structures/RoomView.js
-src/components/structures/ScrollPanel.js
-src/components/structures/SearchBox.js
-src/components/structures/UploadBar.js
-src/components/views/avatars/MemberAvatar.js
-src/components/views/create_room/RoomAlias.js
-src/components/views/dialogs/SetPasswordDialog.js
-src/components/views/elements/AddressSelector.js
-src/components/views/elements/DirectorySearchBox.js
-src/components/views/elements/MemberEventListSummary.js
-src/components/views/elements/UserSelector.js
-src/components/views/globals/NewVersionBar.js
-src/components/views/messages/MFileBody.js
-src/components/views/messages/TextualBody.js
-src/components/views/room_settings/ColorSettings.js
-src/components/views/rooms/Autocomplete.js
-src/components/views/rooms/AuxPanel.js
-src/components/views/rooms/LinkPreviewWidget.js
-src/components/views/rooms/MemberInfo.js
 src/components/views/rooms/MemberList.js
-src/components/views/rooms/RoomList.js
-src/components/views/rooms/RoomPreviewBar.js
-src/components/views/rooms/SearchResultTile.js
-src/components/views/settings/ChangeAvatar.js
-src/components/views/settings/ChangePassword.js
-src/components/views/settings/DevicesPanel.js
-src/components/views/settings/Notifications.js
-src/HtmlUtils.js
-src/ImageUtils.js
-src/Markdown.js
-src/notifications/ContentRules.js
-src/notifications/PushRuleVectorState.js
-src/PlatformPeg.js
-src/rageshake/rageshake.js
 src/ratelimitedfunc.js
-src/Rooms.js
-src/Unread.js
-src/utils/DecryptFile.js
-src/utils/DirectoryUtils.js
 src/utils/DMRoomMap.js
-src/utils/FormattingUtils.js
 src/utils/MultiInviter.js
-src/utils/Receipt.js
-src/Velociraptor.js
 test/components/structures/MessagePanel-test.js
 test/components/views/dialogs/InteractiveAuthDialog-test.js
 test/mock-clock.js
-test/notifications/ContentRules-test.js
-test/notifications/PushRuleVectorState-test.js
 src/component-index.js
 test/end-to-end-tests/node_modules/
 test/end-to-end-tests/riot/

CHANGELOG.md

@@ -18,7 +18,7 @@ are currently filed against vector-im/element-web rather than this project).
 
 Translation Status
 ==================
-[![Translation status](https://translate.riot.im/widgets/element-web/-/multi-auto.svg)](https://translate.riot.im/engage/element-web/?utm_source=widget)
+[![Translation status](https://translate.element.io/widgets/element-web/-/multi-auto.svg)](https://translate.element.io/engage/element-web/?utm_source=widget)
 
 Developer Guide
 ===============
@@ -160,8 +160,8 @@ yarn link matrix-js-sdk
 yarn install
 ```
 
-See the [help for `yarn link`](https://yarnpkg.com/docs/cli/link) for more
-details about this.
+See the [help for `yarn link`](https://classic.yarnpkg.com/docs/cli/link) for
+more details about this.
 
 Running tests
 =============

README.md

@@ -1,5 +1,10 @@
 const en = require("../src/i18n/strings/en_EN");
+const de = require("../src/i18n/strings/de_DE");
 
+// Mock the browser-request for the languageHandler tests to return
+// Fake languages.json containing references to en_EN and de_DE
+// en_EN.json
+// de_DE.json
 module.exports = jest.fn((opts, cb) => {
     const url = opts.url || opts.uri;
     if (url && url.endsWith("languages.json")) {
@@ -8,9 +13,15 @@ module.exports = jest.fn((opts, cb) => {
                 "fileName": "en_EN.json",
                 "label": "English",
             },
+            "de": {
+                "fileName": "de_DE.json",
+                "label": "German",
+            },
         }));
     } else if (url && url.endsWith("en_EN.json")) {
         cb(undefined, {status: 200}, JSON.stringify(en));
+    } else if (url && url.endsWith("de_DE.json")) {
+        cb(undefined, {status: 200}, JSON.stringify(de));
     } else {
         cb(true, {status: 404}, "");
     }

__mocks__/browser-request.js

@@ -0,0 +1,17 @@
+const BaseEnvironment = require("jest-environment-jsdom-sixteen");
+
+class Environment extends BaseEnvironment {
+    constructor(config, options) {
+        super(Object.assign({}, config, {
+            globals: Object.assign({}, config.globals, {
+                // Explicitly specify the correct globals to workaround Jest bug
+                // https://github.com/facebook/jest/issues/7780
+                Uint32Array: Uint32Array,
+                Uint8Array: Uint8Array,
+                ArrayBuffer: ArrayBuffer,
+            }),
+        }), options);
+    }
+}
+
+module.exports = Environment;

__test-utils__/environment.js

@@ -120,6 +120,18 @@ Call `SettingsStore.getValue()` as you would for any other setting.
 
 Call `SettingsStore.setValue("feature_name", null, SettingLevel.DEVICE, true)`.
 
+### A note on UI features
+
+UI features are a different concept to plain features. Instead of being representative of unstable or
+unpredicatable behaviour, they are logical chunks of UI which can be disabled by deployments for ease
+of understanding with users. They are simply represented as boring settings with a convention of being
+named as `UIFeature.$location` where `$location` is a rough descriptor of what is toggled, such as
+`URLPreviews` or `Communities`.
+
+UI features also tend to have their own setting controller (see below) to manipulate settings which might
+be affected by the UI feature being disabled. For example, if URL previews are disabled as a UI feature
+then the URL preview options will use the `UIFeatureController` to ensure they remain disabled while the
+UI feature is disabled.
 
 ## Setting controllers
 
@@ -226,4 +238,3 @@ In practice, handlers which rely on remote changes (account data, room events, e
 generalized `WatchManager` - a class specifically designed to deduplicate the logic of managing watchers. The handlers 
 which are localized to the local client (device) generally just trigger the `WatchManager` when they manipulate the 
 setting themselves as there's nothing to really 'watch'.
- 

docs/settings.md

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.3.0",
+  "version": "3.8.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -61,7 +61,6 @@
     "classnames": "^2.2.6",
     "commonmark": "^0.29.1",
     "counterpart": "^0.18.6",
-    "create-react-class": "^15.6.3",
     "diff-dom": "^4.1.6",
     "diff-match-patch": "^1.0.5",
     "emojibase-data": "^5.0.1",
@@ -80,6 +79,7 @@
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.19",
     "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+    "matrix-widget-api": "^0.1.0-beta.8",
     "minimist": "^1.2.5",
     "pako": "^1.0.11",
     "parse5": "^5.1.1",
@@ -95,7 +95,8 @@
     "react-focus-lock": "^2.4.1",
     "react-transition-group": "^4.4.1",
     "resize-observer-polyfill": "^1.5.1",
-    "sanitize-html": "^1.27.1",
+    "rfc4648": "^1.4.0",
+    "sanitize-html": "github:apostrophecms/sanitize-html#3c7f93f2058f696f5359e3e58d464161647226db",
     "tar-js": "^0.3.0",
     "text-encoding-utf-8": "^1.0.2",
     "url": "^0.11.0",
@@ -120,7 +121,7 @@
     "@babel/preset-typescript": "^7.10.4",
     "@babel/register": "^7.10.5",
     "@babel/traverse": "^7.11.0",
-    "@peculiar/webcrypto": "^1.1.2",
+    "@peculiar/webcrypto": "^1.1.3",
     "@types/classnames": "^2.2.10",
     "@types/counterpart": "^0.18.1",
     "@types/flux": "^3.1.9",
@@ -149,23 +150,23 @@
     "eslint-plugin-flowtype": "^2.50.3",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^2.5.1",
-    "file-loader": "^3.0.1",
     "glob": "^5.0.15",
-    "jest": "^24.9.0",
-    "jest-canvas-mock": "^2.2.0",
+    "jest": "^26.5.2",
+    "jest-canvas-mock": "^2.3.0",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
     "lolex": "^5.1.2",
     "matrix-mock-request": "^1.2.3",
     "matrix-react-test-utils": "^0.2.2",
     "react-test-renderer": "^16.13.1",
     "rimraf": "^2.7.1",
-    "source-map-loader": "^0.2.4",
     "stylelint": "^9.10.1",
     "stylelint-config-standard": "^18.3.0",
     "stylelint-scss": "^3.18.0",
     "typescript": "^3.9.7",
     "walk": "^2.3.14"
   },
   "jest": {
+    "testEnvironment": "./__test-utils__/environment.js",
     "testMatch": [
       "<rootDir>/test/**/*-test.js"
     ],

package.json

@@ -9,6 +9,9 @@ set -e
 
 cd `dirname $0`
 
+# This link seems to get eaten by the release process, so ensure it exists.
+yarn link matrix-js-sdk
+
 for i in matrix-js-sdk
 do
     echo "Checking version of $i..."
@@ -29,9 +32,7 @@ do
             echo "Upgrading $i to $latestver..."
             yarn add -E $i@$latestver
             git add -u
-            # The `-e` flag opens the editor and gives you a chance to check
-            # the upgrade for correctness.
-            git commit -m "Upgrade $i to $latestver" -e
+            git commit -m "Upgrade $i to $latestver"
         fi
     fi
 done

release.sh

@@ -17,6 +17,9 @@ limitations under the License.
 */
 
 @import "./_font-sizes.scss";
+@import "./_font-weights.scss";
+
+$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
 
 :root {
     font-size: 10px;
@@ -206,12 +209,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     border: 0;
 }
 
-/* applied to side-panels and messagepanel when in RoomSettings */
-.mx_fadable {
-    opacity: 1;
-    transition: opacity 0.2s ease-in-out;
-}
-
 // These are magic constants which are excluded from tinting, to let themes
 // (which only have CSS, unlike skins) tell the app what their non-tinted
 // colourscheme is by inspecting the stylesheet DOM.
@@ -260,7 +257,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     font-weight: 300;
     font-size: $font-15px;
     position: relative;
-    padding: 25px 30px 30px 30px;
+    padding: 24px;
     max-height: 80%;
     box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
     border-radius: 8px;
@@ -327,6 +324,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 
 .mx_Dialog_title {
     font-size: $font-22px;
+    font-weight: $font-semi-bold;
     line-height: $font-36px;
     color: $dialog-title-fg-color;
 }
@@ -352,8 +350,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     background-color: $dialog-close-fg-color;
     cursor: pointer;
     position: absolute;
-    top: 4px;
-    right: 0px;
+    top: 10px;
+    right: 0;
 }
 
 .mx_Dialog_content {