Replace New Version Bar with a Toast

discards the `new_version` dispatch

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/views/globals/_MatrixToolbar.scss

@@ -67,7 +67,3 @@ limitations under the License.
 .mx_MatrixToolbar_action {
     margin-right: 16px;
 }
-
-.mx_MatrixToolbar_changelog {
-    white-space: pre;
-}

src/components/structures/LoggedInView.tsx

@@ -74,7 +74,6 @@ interface IProps {
     initialEventPixelOffset: number;
     leftDisabled: boolean;
     rightDisabled: boolean;
-    hasNewVersion: boolean;
     page_type: string;
     autoJoin: boolean;
     thirdPartyInvite?: object;
@@ -96,6 +95,7 @@ interface IProps {
     newVersion?: string;
     newVersionReleaseNotes?: string;
 }
+
 interface IState {
     mouseDown?: {
         x: number;
@@ -183,7 +183,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
     componentDidUpdate(prevProps, prevState) {
         // attempt to guess when a banner was opened or closed
         if (
-            (prevProps.hasNewVersion !== this.props.hasNewVersion)
+            (prevProps.checkingForUpdate !== this.props.checkingForUpdate)
         ) {
             this.props.resizeNotifier.notifyBannersChanged();
         }
@@ -620,7 +620,6 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
         const GroupView = sdk.getComponent('structures.GroupView');
         const MyGroups = sdk.getComponent('structures.MyGroups');
         const ToastContainer = sdk.getComponent('structures.ToastContainer');
-        const NewVersionBar = sdk.getComponent('globals.NewVersionBar');
         const UpdateCheckBar = sdk.getComponent('globals.UpdateCheckBar');
 
         let pageElement;
@@ -666,11 +665,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
         }
 
         let topBar;
-        if (this.props.hasNewVersion) {
+        if (this.props.checkingForUpdate) {
-            topBar = <NewVersionBar version={this.props.version} newVersion={this.props.newVersion}
-                                    releaseNotes={this.props.newVersionReleaseNotes}
-            />;
-        } else if (this.props.checkingForUpdate) {
             topBar = <UpdateCheckBar {...this.props.checkingForUpdate} />;
         }
 

src/components/structures/MatrixChat.tsx

@@ -173,10 +173,6 @@ interface IState {
     leftDisabled: boolean;
     middleDisabled: boolean;
     // the right panel's disabled state is tracked in its store.
-    version?: string;
-    newVersion?: string;
-    hasNewVersion: boolean;
-    newVersionReleaseNotes?: string;
     checkingForUpdate?: string; // updateCheckStatusEnum
     // Parameters used in the registration dance with the IS
     register_client_secret?: string;
@@ -230,7 +226,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             leftDisabled: false,
             middleDisabled: false,
 
-            hasNewVersion: false,
             newVersionReleaseNotes: null,
             checkingForUpdate: null,
 
@@ -726,12 +721,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             case 'client_started':
                 this.onClientStarted();
                 break;
-            case 'new_version':
-                this.onVersion(
-                    payload.currentVersion, payload.newVersion,
-                    payload.releaseNotes,
-                );
-                break;
             case 'check_updates':
                 this.setState({ checkingForUpdate: payload.value });
                 break;
@@ -1820,16 +1809,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         this.showScreen("settings");
     };
 
-    onVersion(current: string, latest: string, releaseNotes?: string) {
-        this.setState({
-            version: current,
-            newVersion: latest,
-            hasNewVersion: current !== latest,
-            newVersionReleaseNotes: releaseNotes,
-            checkingForUpdate: null,
-        });
-    }
-
     onSendEvent(roomId: string, event: MatrixEvent) {
         const cli = MatrixClientPeg.get();
         if (!cli) {

src/components/views/globals/NewVersionBar.js

@@ -1,108 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-
-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.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import * as sdk from '../../../index';
-import Modal from '../../../Modal';
-import PlatformPeg from '../../../PlatformPeg';
-import { _t } from '../../../languageHandler';
-
-/**
- * Check a version string is compatible with the Changelog
- * dialog ([vectorversion]-react-[react-sdk-version]-js-[js-sdk-version])
- */
-function checkVersion(ver) {
-    const parts = ver.split('-');
-    return parts.length == 5 && parts[1] == 'react' && parts[3] == 'js';
-}
-
-export default createReactClass({
-    propTypes: {
-        version: PropTypes.string.isRequired,
-        newVersion: PropTypes.string.isRequired,
-        releaseNotes: PropTypes.string,
-    },
-
-    displayReleaseNotes: function(releaseNotes) {
-        const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
-        Modal.createTrackedDialog('Display release notes', '', QuestionDialog, {
-            title: _t("What's New"),
-            description: <div className="mx_MatrixToolbar_changelog">{releaseNotes}</div>,
-            button: _t("Update"),
-            onFinished: (update) => {
-                if (update && PlatformPeg.get()) {
-                    PlatformPeg.get().installUpdate();
-                }
-            },
-        });
-    },
-
-    displayChangelog: function() {
-        const ChangelogDialog = sdk.getComponent('dialogs.ChangelogDialog');
-        Modal.createTrackedDialog('Display Changelog', '', ChangelogDialog, {
-            version: this.props.version,
-            newVersion: this.props.newVersion,
-            onFinished: (update) => {
-                if (update && PlatformPeg.get()) {
-                    PlatformPeg.get().installUpdate();
-                }
-            },
-        });
-    },
-
-    onUpdateClicked: function() {
-        PlatformPeg.get().installUpdate();
-    },
-
-    render: function() {
-        let action_button;
-        // If we have release notes to display, we display them. Otherwise,
-        // we display the Changelog Dialog which takes two versions and
-        // automatically tells you what's changed (provided the versions
-        // are in the right format)
-        if (this.props.releaseNotes) {
-            action_button = (
-                <button className="mx_MatrixToolbar_action" onClick={this.displayReleaseNotes}>
-                    { _t("What's new?") }
-                </button>
-            );
-        } else if (checkVersion(this.props.version) && checkVersion(this.props.newVersion)) {
-            action_button = (
-                <button className="mx_MatrixToolbar_action" onClick={this.displayChangelog}>
-                    { _t("What's new?") }
-                </button>
-            );
-        } else if (PlatformPeg.get()) {
-            action_button = (
-                <button className="mx_MatrixToolbar_action" onClick={this.onUpdateClicked}>
-                    { _t("Update") }
-                </button>
-            );
-        }
-        return (
-            <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />
-                <div className="mx_MatrixToolbar_content">
-                    {_t("A new version of Riot is available.")}
-                </div>
-                {action_button}
-            </div>
-        );
-    },
-});

src/i18n/strings/en_EN.json

@@ -421,6 +421,12 @@
     "Other users may not trust it": "Other users may not trust it",
     "New login. Was this you?": "New login. Was this you?",
     "Verify the new login accessing your account: %(name)s": "Verify the new login accessing your account: %(name)s",
+    "What's New": "What's New",
+    "Update": "Update",
+    "What's new?": "What's new?",
+    "Restart": "Restart",
+    "Upgrade your Riot": "Upgrade your Riot",
+    "A new version of Riot is available!": "A new version of Riot is available!",
     "There was an error joining the room": "There was an error joining the room",
     "Sorry, your homeserver is too old to participate in this room.": "Sorry, your homeserver is too old to participate in this room.",
     "Please contact your homeserver administrator.": "Please contact your homeserver administrator.",
@@ -1391,10 +1397,6 @@
     "Something went wrong when trying to get your communities.": "Something went wrong when trying to get your communities.",
     "Display your community flair in rooms configured to show it.": "Display your community flair in rooms configured to show it.",
     "You're not currently a member of any communities.": "You're not currently a member of any communities.",
-    "What's New": "What's New",
-    "Update": "Update",
-    "What's new?": "What's new?",
-    "A new version of Riot is available.": "A new version of Riot is available.",
     "Error encountered (%(errorDetail)s).": "Error encountered (%(errorDetail)s).",
     "Checking for an update...": "Checking for an update...",
     "No update available.": "No update available.",

src/toasts/UpdateToast.tsx

@@ -0,0 +1,90 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+import React from "react";
+
+import { _t } from "../languageHandler";
+import GenericToast from "../components/views/toasts/GenericToast";
+import ToastStore from "../stores/ToastStore";
+import QuestionDialog from "../components/views/dialogs/QuestionDialog";
+import ChangelogDialog from "../components/views/dialogs/ChangelogDialog";
+import PlatformPeg from "../PlatformPeg";
+import Modal from "../Modal";
+
+const TOAST_KEY = "update";
+
+/*
+ * Check a version string is compatible with the Changelog
+ * dialog ([riot-version]-react-[react-sdk-version]-js-[js-sdk-version])
+ */
+function checkVersion(ver) {
+    const parts = ver.split('-');
+    return parts.length === 5 && parts[1] === 'react' && parts[3] === 'js';
+}
+
+function installUpdate() {
+    PlatformPeg.get().installUpdate();
+}
+
+export const showToast = (version: string, newVersion: string, releaseNotes?: string) => {
+    let onAccept;
+    let acceptLabel = _t("What's new?");
+    if (releaseNotes) {
+        onAccept = () => {
+            Modal.createTrackedDialog('Display release notes', '', QuestionDialog, {
+                title: _t("What's New"),
+                description: <pre>{releaseNotes}</pre>,
+                button: _t("Update"),
+                onFinished: (update) => {
+                    if (update && PlatformPeg.get()) {
+                        PlatformPeg.get().installUpdate();
+                    }
+                },
+            });
+        };
+    } else if (checkVersion(version) && checkVersion(newVersion)) {
+        onAccept = () => {
+            Modal.createTrackedDialog('Display Changelog', '', ChangelogDialog, {
+                version,
+                newVersion,
+                onFinished: (update) => {
+                    if (update && PlatformPeg.get()) {
+                        PlatformPeg.get().installUpdate();
+                    }
+                },
+            });
+        };
+    } else {
+        onAccept = installUpdate;
+        acceptLabel = _t("Restart");
+    }
+
+    ToastStore.sharedInstance().addOrReplaceToast({
+        key: TOAST_KEY,
+        title: _t("Upgrade your Riot"),
+        props: {
+            description: _t("A new version of Riot is available!"),
+            acceptLabel,
+            onAccept,
+        },
+        component: GenericToast,
+        priority: 20,
+    });
+};
+
+export const hideToast = () => {
+    ToastStore.sharedInstance().dismissToast(TOAST_KEY);
+};