Merge pull request #3695 from matrix-org/travis/new-upgrade-dialog

Match room upgrade warning to the new design

res/css/views/dialogs/_RoomUpgradeWarningDialog.scss

@@ -14,11 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_RoomUpgradeWarningDialog {
+    max-width: 38vw;
+    width: 38vw;
+}
+
 .mx_RoomUpgradeWarningDialog .mx_SettingsFlag {
+    font-weight: 700;
+
     .mx_ToggleSwitch {
         display: inline-block;
         vertical-align: middle;
-        margin-right: 8px;
+        margin-left: 8px;
+        float: right;
     }
 
     .mx_SettingsFlag_label {

src/SlashCommands.js

@@ -158,7 +158,8 @@ export const CommandMap = {
                 const RoomUpgradeWarningDialog = sdk.getComponent("dialogs.RoomUpgradeWarningDialog");
 
                 const {finished} = Modal.createTrackedDialog('Slash Commands', 'upgrade room confirmation',
-                    RoomUpgradeWarningDialog, {roomId: roomId, targetVersion: args});
+                    RoomUpgradeWarningDialog, {roomId: roomId, targetVersion: args}, /*className=*/null,
+                    /*isPriority=*/false, /*isStatic=*/true);
 
                 return success(finished.then(async ([resp]) => {
                     if (!resp.continue) return;

src/components/views/dialogs/RoomUpgradeWarningDialog.js

@@ -20,6 +20,7 @@ import {_t} from "../../../languageHandler";
 import sdk from "../../../index";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import MatrixClientPeg from "../../../MatrixClientPeg";
+import Modal from "../../../Modal";
 
 export default class RoomUpgradeWarningDialog extends React.Component {
     static propTypes = {
@@ -53,6 +54,14 @@ export default class RoomUpgradeWarningDialog extends React.Component {
         this.setState({inviteUsersToNewRoom: newVal});
     };
 
+    _openBugReportDialog = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
+        Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {});
+    };
+
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
@@ -61,60 +70,43 @@ export default class RoomUpgradeWarningDialog extends React.Component {
         if (this.state.isPrivate) {
             inviteToggle = (
                 <LabelledToggleSwitch
-                    value={this.state.inviteUsersToNewRoom} toggleInFront={true}
+                    value={this.state.inviteUsersToNewRoom}
                     onChange={this._onInviteUsersToggle}
-                    label={_t("Invite joined members to the new room automatically")} />
+                    label={_t("Automatically invite users")} />
             );
         }
 
+        const title = this.state.isPrivate ? _t("Upgrade private room") : _t("Upgrade public room");
+
         return (
-            <BaseDialog className='mx_RoomUpgradeWarningDialog' hasCancel={true}
-                        onFinished={this.props.onFinished}
-                        title={_t("Room upgrade confirmation")}>
+            <BaseDialog
+                className='mx_RoomUpgradeWarningDialog'
+                hasCancel={true}
+                fixedWidth={false}
+                onFinished={this.props.onFinished}
+                title={title}
+            >
                 <div>
-                    <p>{_t("Upgrading a room can be destructive and isn't always necessary.")}</p>
                     <p>
                         {_t(
-                            "Room upgrades are usually recommended when a room version is considered " +
-                            "<i>unstable</i>. Unstable room versions might have bugs, missing features, or " +
-                            "security vulnerabilities.",
-                            {}, {
-                                "i": (sub) => <i>{sub}</i>,
-                            },
+                            "Upgrading a room is an advanced action and is usually recommended when a room " +
+                            "is unstable due to bugs, missing features or security vulnerabilities.",
                         )}
                     </p>
                     <p>
                         {_t(
-                            "Room upgrades usually only affect <i>server-side</i> processing of the " +
-                            "room. If you're having problems with your Riot client, please file an issue " +
-                            "with <issueLink />.",
+                            "This usually only affects how the room is processed on the server. If you're " +
+                            "having problems with your Riot, please <a>report a bug</a>.",
                             {}, {
-                                "i": (sub) => <i>{sub}</i>,
-                                "issueLink": () => {
-                                    return <a href="https://github.com/vector-im/riot-web/issues/new/choose"
-                                              target="_blank" rel="noopener">
-                                        https://github.com/vector-im/riot-web/issues/new/choose
-                                    </a>;
+                                "a": (sub) => {
+                                    return <a href='#' onClick={this._openBugReportDialog}>{sub}</a>;
                                 },
                             },
                         )}
                     </p>
                     <p>
                         {_t(
-                            "<b>Warning</b>: Upgrading a room will <i>not automatically migrate room " +
-                            "members to the new version of the room.</i> We'll post a link to the new room " +
-                            "in the old version of the room - room members will have to click this link to " +
-                            "join the new room.",
-                            {}, {
-                                "b": (sub) => <b>{sub}</b>,
-                                "i": (sub) => <i>{sub}</i>,
-                            },
-                        )}
-                    </p>
-                    <p>
-                        {_t(
-                            "Please confirm that you'd like to go forward with upgrading this room " +
-                            "from <oldVersion /> to <newVersion />.",
+                            "You'll upgrade this room from <oldVersion /> to <newVersion />.",
                             {},
                             {
                                 oldVersion: () => <code>{this.state.currentVersion}</code>,
@@ -125,7 +117,7 @@ export default class RoomUpgradeWarningDialog extends React.Component {
                     {inviteToggle}
                 </div>
                 <DialogButtons
-                    primaryButton={_t("Continue")}
+                    primaryButton={_t("Upgrade")}
                     onPrimaryButtonClick={this._onContinue}
                     cancelButton={_t("Cancel")}
                     onCancel={this._onCancel}

src/i18n/strings/en_EN.json

@@ -1431,12 +1431,13 @@
     "Update any local room aliases to point to the new room": "Update any local room aliases to point to the new room",
     "Stop users from speaking in the old version of the room, and post a message advising users to move to the new room": "Stop users from speaking in the old version of the room, and post a message advising users to move to the new room",
     "Put a link back to the old room at the start of the new room so people can see old messages": "Put a link back to the old room at the start of the new room so people can see old messages",
-    "Invite joined members to the new room automatically": "Invite joined members to the new room automatically",
-    "Room upgrade confirmation": "Room upgrade confirmation",
-    "Upgrading a room can be destructive and isn't always necessary.": "Upgrading a room can be destructive and isn't always necessary.",
-    "Room upgrades are usually recommended when a room version is considered <i>unstable</i>. Unstable room versions might have bugs, missing features, or security vulnerabilities.": "Room upgrades are usually recommended when a room version is considered <i>unstable</i>. Unstable room versions might have bugs, missing features, or security vulnerabilities.",
-    "Room upgrades usually only affect <i>server-side</i> processing of the room. If you're having problems with your Riot client, please file an issue with <issueLink />.": "Room upgrades usually only affect <i>server-side</i> processing of the room. If you're having problems with your Riot client, please file an issue with <issueLink />.",
-    "Please confirm that you'd like to go forward with upgrading this room from <oldVersion /> to <newVersion />.": "Please confirm that you'd like to go forward with upgrading this room from <oldVersion /> to <newVersion />.",
+    "Automatically invite users": "Automatically invite users",
+    "Upgrade private room": "Upgrade private room",
+    "Upgrade public room": "Upgrade public room",
+    "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.": "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.",
+    "This usually only affects how the room is processed on the server. If you're having problems with your Riot, please <a>report a bug</a>.": "This usually only affects how the room is processed on the server. If you're having problems with your Riot, please <a>report a bug</a>.",
+    "You'll upgrade this room from <oldVersion /> to <newVersion />.": "You'll upgrade this room from <oldVersion /> to <newVersion />.",
+    "Upgrade": "Upgrade",
     "Sign out and remove encryption keys?": "Sign out and remove encryption keys?",
     "Clear Storage and Sign Out": "Clear Storage and Sign Out",
     "Send Logs": "Send Logs",