Part 2 of 3: Merge develop->experimental minus #2336

.eslintrc.js

@@ -47,6 +47,9 @@ module.exports = {
         }],
         "react/jsx-key": ["error"],
 
+        // Components in JSX should always be defined.
+        "react/jsx-no-undef": "error",
+
         // Assert no spacing in JSX curly brackets
         // <Element prop={ consideredError} prop={notConsideredError} />
         //

.travis-test-riot.sh

@@ -30,7 +30,7 @@ popd
 if [ "$TRAVIS_BRANCH" = "develop" ]
 then
     # run end to end tests
-    git clone https://github.com/matrix-org/matrix-react-end-to-end-tests.git --branch master
+    scripts/fetchdep.sh matrix-org matrix-react-end-to-end-tests master
     pushd matrix-react-end-to-end-tests
     ln -s $REACT_SDK_DIR/$RIOT_WEB_DIR riot/riot-web
     # PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true ./install.sh

CHANGELOG.md

@@ -1,3 +1,57 @@
+Changes in [0.14.7](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.14.7) (2018-12-10)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.14.7-rc.2...v0.14.7)
+
+ * No changes since rc.2
+
+Changes in [0.14.7-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.14.7-rc.2) (2018-12-06)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.14.7-rc.1...v0.14.7-rc.2)
+
+ * Ship the babelrc file to npm
+   [\#2332](https://github.com/matrix-org/matrix-react-sdk/pull/2332)
+
+Changes in [0.14.7-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.14.7-rc.1) (2018-12-06)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.14.6...v0.14.7-rc.1)
+
+ * Suppress CORS errors in the 'failed to join room' dialog
+   [\#2306](https://github.com/matrix-org/matrix-react-sdk/pull/2306)
+ * Check if users exist before inviting them and communicate errors
+   [\#2317](https://github.com/matrix-org/matrix-react-sdk/pull/2317)
+ * Update from Weblate.
+   [\#2328](https://github.com/matrix-org/matrix-react-sdk/pull/2328)
+ * Allow group summary to load when /users fails
+   [\#2326](https://github.com/matrix-org/matrix-react-sdk/pull/2326)
+ * Show correct text if passphrase is skipped
+   [\#2324](https://github.com/matrix-org/matrix-react-sdk/pull/2324)
+ * Add password strength meter to backup creation UI
+   [\#2294](https://github.com/matrix-org/matrix-react-sdk/pull/2294)
+ * Check upload limits before trying to upload large files
+   [\#1876](https://github.com/matrix-org/matrix-react-sdk/pull/1876)
+ * Support .well-known discovery
+   [\#2227](https://github.com/matrix-org/matrix-react-sdk/pull/2227)
+ * Make create key backup dialog async
+   [\#2291](https://github.com/matrix-org/matrix-react-sdk/pull/2291)
+ * Forgot to enable continue button on download
+   [\#2288](https://github.com/matrix-org/matrix-react-sdk/pull/2288)
+ * Online incremental megolm backups (v2)
+   [\#2169](https://github.com/matrix-org/matrix-react-sdk/pull/2169)
+ * Add recovery key download button
+   [\#2284](https://github.com/matrix-org/matrix-react-sdk/pull/2284)
+ * Passphrase Support for e2e backups
+   [\#2283](https://github.com/matrix-org/matrix-react-sdk/pull/2283)
+ * Update async dialog interface to use promises
+   [\#2286](https://github.com/matrix-org/matrix-react-sdk/pull/2286)
+ * Support for m.login.sso
+   [\#2279](https://github.com/matrix-org/matrix-react-sdk/pull/2279)
+ * Added badge to non-autoplay GIFs
+   [\#2235](https://github.com/matrix-org/matrix-react-sdk/pull/2235)
+ * Improve terms auth flow
+   [\#2277](https://github.com/matrix-org/matrix-react-sdk/pull/2277)
+ * Handle crypto db version upgrade
+   [\#2282](https://github.com/matrix-org/matrix-react-sdk/pull/2282)
+
 Changes in [0.14.6](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.14.6) (2018-11-22)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.14.5...v0.14.6)

CONTRIBUTING.rst

@@ -1,4 +1,4 @@
 Contributing code to The React SDK
 ==================================
 
-matrix-react-sdk follows the same pattern as https://github.com/matrix-org/synapse/blob/master/CONTRIBUTING.rst
+matrix-react-sdk follows the same pattern as https://github.com/matrix-org/matrix-js-sdk/blob/master/CONTRIBUTING.rst

README.md

@@ -127,61 +127,3 @@ Github Issues
 
 All issues should be filed under https://github.com/vector-im/riot-web/issues
 for now.
-
-OUTDATED: To Create Your Own Skin
-=================================
-
-**This is ALL LIES currently, and needs to be updated**
-
-Skins are modules are exported from such a package in the `lib` directory.
-`lib/skins` contains one directory per-skin, named after the skin, and the
-`modules` directory contains modules as their javascript files.
-
-A basic skin is provided in the matrix-react-skin package. This also contains
-a minimal application that instantiates the basic skin making a working matrix
-client.
-
-You can use matrix-react-sdk directly, but to do this you would have to provide
-'views' for each UI component. To get started quickly, use matrix-react-skin.
-
-To actually change the look of a skin, you can create a base skin (which
-does not use views from any other skin) or you can make a derived skin.
-Note that derived skins are currently experimental: for example, the CSS
-from the skins it is based on will not be automatically included.
-
-To make a skin, create React classes for any custom components you wish to add
-in a skin within `src/skins/<skin name>`. These can be based off the files in
-`views` in the `matrix-react-skin` package, modifying the require() statement
-appropriately.
-
-If you make a derived skin, you only need copy the files you wish to customise.
-
-Once you've made all your view files, you need to make a `skinfo.json`. This
-contains all the metadata for a skin. This is a JSON file with, currently, a
-single key, 'baseSkin'. Set this to the empty string if your skin is a base skin,
-or for a derived skin, set it to the path of your base skin's skinfo.json file, as
-you would use in a require call.
-
-Now you have the basis of a skin, you need to generate a skindex.json file. The
-`reskindex.js` tool in matrix-react-sdk does this for you. It is suggested that
-you add an npm script to run this, as in matrix-react-skin.
-
-For more specific detail on any of these steps, look at matrix-react-skin.
-
-Alternative instructions:
-
-  * Create a new NPM project. Be sure to directly depend on react, (otherwise
-    you can end up with two copies of react).
-  * Create an index.js file that sets up react. Add require statements for
-    React and matrix-react-sdk. Load a skin using the 'loadSkin' method on the
-    SDK and call Render. This can be a skin provided by a separate package or
-    a skin in the same package.
-  * Add a way to build your project: we suggest copying the scripts block
-    from matrix-react-skin (which uses babel and webpack). You could use
-    different tools but remember that at least the skins and modules of
-    your project should end up in plain (ie. non ES6, non JSX) javascript in
-    the lib directory at the end of the build process, as well as any
-    packaging that you might do.
-  * Create an index.html file pulling in your compiled javascript and the
-    CSS bundle from the skin you use. For now, you'll also need to manually
-    import CSS from any skins that your skin inherts from.

code_style.md

@@ -165,7 +165,6 @@ ECMAScript
 
 React
 -----
-- Use React.createClass rather than ES6 classes for components, as the boilerplate is way too heavy on ES6 currently.  ES7 might improve it.
 - Pull out functions in props to the class, generally as specific event handlers:
 
   ```jsx
@@ -174,11 +173,38 @@ React
   <Foo onClick={this.doStuff}> // Better
   <Foo onClick={this.onFooClick}> // Best, if onFooClick would do anything other than directly calling doStuff
   ```
-  
-  Not doing so is acceptable in a single case; in function-refs:
-  
+
+  Not doing so is acceptable in a single case: in function-refs:
+
   ```jsx
   <Foo ref={(self) => this.component = self}>
   ```
+
+- Prefer classes that extend `React.Component` (or `React.PureComponent`) instead of `React.createClass`
+  - You can avoid the need to bind handler functions by using [property initializers](https://reactjs.org/docs/react-component.html#constructor):
+
+  ```js
+  class Widget extends React.Component
+      onFooClick = () => {
+          ...
+      }
+  }
+  ```
+  - To define `propTypes`, use a static property:
+  ```js
+  class Widget extends React.Component
+      static propTypes = {
+          ...
+      }
+  }
+  ```
+  - If you need to specify initial component state, [assign it](https://reactjs.org/docs/react-component.html#constructor) to `this.state` in the constructor:
+  ```js
+  constructor(props) {
+    super(props);
+    // Don't call this.setState() here!
+    this.state = { counter: 0 };
+  }
+  ```
 - Think about whether your component really needs state: are you duplicating
   information in component state that could be derived from the model?

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.14.6",
+  "version": "0.14.7",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -10,6 +10,7 @@
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "files": [
+    ".babelrc",
     ".eslintrc.js",
     "CHANGELOG.md",
     "CONTRIBUTING.rst",
@@ -72,11 +73,12 @@
     "gfm.css": "^1.1.1",
     "glob": "^5.0.14",
     "highlight.js": "^9.13.0",
+    "is-ip": "^2.0.0",
     "isomorphic-fetch": "^2.2.1",
     "linkifyjs": "^2.1.6",
     "lodash": "^4.13.1",
     "lolex": "2.3.2",
-    "matrix-js-sdk": "0.14.1",
+    "matrix-js-sdk": "0.14.2",
     "optimist": "^0.6.1",
     "pako": "^1.0.5",
     "prop-types": "^15.5.8",
@@ -96,7 +98,8 @@
     "text-encoding-utf-8": "^1.0.1",
     "url": "^0.11.0",
     "velocity-vector": "github:vector-im/velocity#059e3b2",
-    "whatwg-fetch": "^1.1.1"
+    "whatwg-fetch": "^1.1.1",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
@@ -121,8 +124,9 @@
     "eslint-plugin-flowtype": "^2.30.0",
     "eslint-plugin-react": "^7.7.0",
     "estree-walker": "^0.5.0",
-    "expect": "^1.16.0",
+    "expect": "^23.6.0",
     "flow-parser": "^0.57.3",
+    "jest-mock": "^23.2.0",
     "karma": "^3.0.0",
     "karma-chrome-launcher": "^0.2.3",
     "karma-cli": "^1.0.1",

res/css/_common.scss

@@ -32,7 +32,7 @@ body {
     margin: 0px;
 }
 
-div.error, div.warning {
+.error, .warning {
     color: $warning-color;
 }
 

res/css/_components.scss

@@ -25,8 +25,10 @@
 @import "./structures/_ViewSource.scss";
 @import "./structures/login/_Login.scss";
 @import "./views/avatars/_BaseAvatar.scss";
+@import "./views/avatars/_MemberStatusMessageAvatar.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
 @import "./views/context_menus/_RoomTileContextMenu.scss";
+@import "./views/context_menus/_StatusMessageContextMenu.scss";
 @import "./views/context_menus/_TagTileContextMenu.scss";
 @import "./views/context_menus/_TopLeftMenu.scss";
 @import "./views/dialogs/_BugReportDialog.scss";
@@ -35,7 +37,6 @@
 @import "./views/dialogs/_ChatInviteDialog.scss";
 @import "./views/dialogs/_ConfirmUserActionDialog.scss";
 @import "./views/dialogs/_CreateGroupDialog.scss";
-@import "./views/dialogs/_CreateKeyBackupDialog.scss";
 @import "./views/dialogs/_CreateRoomDialog.scss";
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
 @import "./views/dialogs/_DevtoolsDialog.scss";
@@ -49,6 +50,7 @@
 @import "./views/dialogs/_ShareDialog.scss";
 @import "./views/dialogs/_UnknownDeviceDialog.scss";
 @import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
+@import "./views/dialogs/keybackup/_NewRecoveryMethodDialog.scss";
 @import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";
 @import "./views/directory/_NetworkDropdown.scss";
 @import "./views/elements/_AccessibleButton.scss";
@@ -104,6 +106,7 @@
 @import "./views/rooms/_RoomHeader.scss";
 @import "./views/rooms/_RoomList.scss";
 @import "./views/rooms/_RoomPreviewBar.scss";
+@import "./views/rooms/_RoomRecoveryReminder.scss";
 @import "./views/rooms/_RoomSettings.scss";
 @import "./views/rooms/_RoomTile.scss";
 @import "./views/rooms/_RoomTooltip.scss";

res/css/views/dialogs/_CreateKeyBackupDialog.scss → res/css/views/avatars/_MemberStatusMessageAvatar.scss

@@ -14,12 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_CreateKeyBackupDialog {
-    padding-right: 40px;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKey {
-    padding: 20px;
-    color: $info-plinth-fg-color;
-    background-color: $info-plinth-bg-color;
+.mx_MemberStatusMessageAvatar_hasStatus {
+    border: 2px solid $accent-color;
+    border-radius: 40px;
 }

res/css/views/context_menus/_StatusMessageContextMenu.scss

@@ -0,0 +1,55 @@
+/*
+Copyright 2018 New Vector Ltd
+
+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.
+*/
+
+.mx_StatusMessageContextMenu_message {
+    display: inline-block;
+    border-radius: 3px 0 0 3px;
+    border: 1px solid $input-border-color;
+    font-size: 13px;
+    padding: 7px 7px 7px 9px;
+    width: 135px;
+    background-color: $primary-bg-color !important;
+}
+
+.mx_StatusMessageContextMenu_submit {
+    display: inline-block;
+}
+
+.mx_StatusMessageContextMenu_submitFaded {
+    opacity: 0.5;
+}
+
+.mx_StatusMessageContextMenu_submit img {
+    vertical-align: middle;
+    margin-left: 8px;
+}
+
+.mx_StatusMessageContextMenu hr {
+    border: 0.5px solid $menu-border-color;
+}
+
+.mx_StatusMessageContextMenu_clearIcon {
+    margin: 5px 15px 5px 5px;
+    vertical-align: middle;
+}
+
+.mx_StatusMessageContextMenu_clear {
+    padding: 2px;
+}
+
+.mx_StatusMessageContextMenu_hasStatus .mx_StatusMessageContextMenu_clear {
+    color: $warning-color;
+}