From f8de4ba2b0d672245d8c93f45b4ca633ab0472b8 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Mon, 28 Jan 2019 17:21:33 -0700
Subject: [PATCH] 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         | 17 +++++++--
 .../views/dialogs/RoomUpgradeDialog.js        |  8 +++--
 .../views/rooms/RoomUpgradeWarningBar.js      | 36 +++++++++++++++----
 src/i18n/strings/en_EN.json                   |  2 ++
 4 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 8ad81a1343..6c17aa415a 100644
--- a/src/components/structures/RoomView.js
+++ b/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} />;
diff --git a/src/components/views/dialogs/RoomUpgradeDialog.js b/src/components/views/dialogs/RoomUpgradeDialog.js
index 936ff745d1..403fbf4f77 100644
--- a/src/components/views/dialogs/RoomUpgradeDialog.js
+++ b/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,
         };
     },
 
diff --git a/src/components/views/rooms/RoomUpgradeWarningBar.js b/src/components/views/rooms/RoomUpgradeWarningBar.js
index 75a5901fc9..ccf2e45b25 100644
--- a/src/components/views/rooms/RoomUpgradeWarningBar.js
+++ b/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,19 +36,40 @@ module.exports = React.createClass({
 
     render: function() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return (
-            <div className="mx_RoomUpgradeWarningBar">
-                <div className="mx_RoomUpgradeWarningBar_header">
-                    {_t("There is a known vulnerability affecting this room.")}
-                </div>
+
+        let upgradeText = (
+            <div>
                 <div className="mx_RoomUpgradeWarningBar_body">
-                    {_t("This room version is vulnerable to malicious modification of room state.")}
+                    {_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 and ensure room integrity is protected.")}
+                        {_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>
+                    <div className="mx_RoomUpgradeWarningBar_body">
+                        {_t("This room version is vulnerable to malicious modification of room state.")}
+                    </div>
+                    <p className="mx_RoomUpgradeWarningBar_upgradelink">
+                        <AccessibleButton onClick={this.onUpgradeClick}>
+                            {_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>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f04c62cbbb..884c2c471e 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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.",