Iterate upon the room upgrade warning bar

This lessens the warning for unstable-but-not-official versions while still communicating that the version is unstable. In the future, we may want to make this state dismissable.

src/components/structures/RoomView.js

@@ -151,6 +151,10 @@ module.exports = React.createClass({
             auxPanelMaxHeight: undefined,
 
             statusBarVisible: false,
+
+            // We load this later by asking the js-sdk to suggest a version for us.
+            // This object is the result of Room#getRecommendedVersion()
+            upgradeRecommendation: null,
         };
     },
 
@@ -637,6 +641,13 @@ module.exports = React.createClass({
         this._calculatePeekRules(room);
         this._updatePreviewUrlVisibility(room);
         this._loadMembersIfJoined(room);
+        this._calculateRecommendedVersion(room);
+    },
+
+    _calculateRecommendedVersion: async function(room) {
+        this.setState({
+            upgradeRecommendation: await room.getRecommendedVersion(),
+        });
     },
 
     _loadMembersIfJoined: async function(room) {
@@ -1661,8 +1672,10 @@ module.exports = React.createClass({
             />;
         }
 
+        const roomVersionRecommendation = this.state.upgradeRecommendation;
         const showRoomUpgradeBar = (
-            this.state.room.shouldUpgradeToVersion() &&
+            roomVersionRecommendation &&
+            roomVersionRecommendation.needsUpgrade &&
             this.state.room.userMayUpgradeRoom(MatrixClientPeg.get().credentials.userId)
         );
 
@@ -1685,7 +1698,7 @@ module.exports = React.createClass({
             hideCancel = true; // has own cancel
             aux = <SearchBar ref="search_bar" searchInProgress={this.state.searchInProgress} onCancelClick={this.onCancelSearchClick} onSearch={this.onSearch} />;
         } else if (showRoomUpgradeBar) {
-            aux = <RoomUpgradeWarningBar room={this.state.room} />;
+            aux = <RoomUpgradeWarningBar room={this.state.room} recommendation={roomVersionRecommendation} />;
             hideCancel = true;
         } else if (showRoomRecoveryReminder) {
             aux = <RoomRecoveryReminder onDontAskAgainSet={this.onRoomRecoveryReminderDontAskAgain} />;

src/components/views/dialogs/RoomUpgradeDialog.js

@@ -29,13 +29,15 @@ export default React.createClass({
         onFinished: PropTypes.func.isRequired,
     },
 
-    componentWillMount: function() {
-        this._targetVersion = this.props.room.shouldUpgradeToVersion();
+    componentWillMount: async function() {
+        const recommended = await this.props.room.getRecommendedVersion();
+        this._targetVersion = recommended.version;
+        this.setState({busy: false});
     },
 
     getInitialState: function() {
         return {
-            busy: false,
+            busy: true,
         };
     },
 

src/components/views/rooms/RoomUpgradeWarningBar.js

@@ -26,6 +26,7 @@ module.exports = React.createClass({
 
     propTypes: {
         room: PropTypes.object.isRequired,
+        recommendation: PropTypes.object.isRequired,
     },
 
     onUpgradeClick: function() {
@@ -35,8 +36,22 @@ module.exports = React.createClass({
 
     render: function() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return (
-            <div className="mx_RoomUpgradeWarningBar">
+
+        let upgradeText = (
+            <div>
+                <div className="mx_RoomUpgradeWarningBar_body">
+                    {_t("This room is using an unstable room version. If you aren't expecting this, please upgrade the room.")}
+                </div>
+                <p className="mx_RoomUpgradeWarningBar_upgradelink">
+                    <AccessibleButton onClick={this.onUpgradeClick}>
+                        {_t("Click here to upgrade to the latest room version.")}
+                    </AccessibleButton>
+                </p>
+            </div>
+        );
+        if (this.props.recommendation.urgent) {
+            upgradeText = (
+                <div>
                     <div className="mx_RoomUpgradeWarningBar_header">
                         {_t("There is a known vulnerability affecting this room.")}
                     </div>
@@ -48,6 +63,13 @@ module.exports = React.createClass({
                             {_t("Click here to upgrade to the latest room version and ensure room integrity is protected.")}
                         </AccessibleButton>
                     </p>
+                </div>
+            );
+        }
+
+        return (
+            <div className="mx_RoomUpgradeWarningBar">
+                {upgradeText}
                 <div className="mx_RoomUpgradeWarningBar_small">
                     {_t("Only room administrators will see this warning")}
                 </div>

src/i18n/strings/en_EN.json

@@ -743,6 +743,8 @@
     "Internal room ID: ": "Internal room ID: ",
     "Room version number: ": "Room version number: ",
     "Add a topic": "Add a topic",
+    "This room is using an unstable room version. If you aren't expecting this, please upgrade the room.": "This room is using an unstable room version. If you aren't expecting this, please upgrade the room.",
+    "Click here to upgrade to the latest room version.": "Click here to upgrade to the latest room version.",
     "There is a known vulnerability affecting this room.": "There is a known vulnerability affecting this room.",
     "This room version is vulnerable to malicious modification of room state.": "This room version is vulnerable to malicious modification of room state.",
     "Click here to upgrade to the latest room version and ensure room integrity is protected.": "Click here to upgrade to the latest room version and ensure room integrity is protected.",