Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into joriks/appearance-tab

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -539,6 +539,7 @@ export const MsisdnAuthEntry = createReactClass({
                     type: MsisdnAuthEntry.LOGIN_TYPE,
                     // TODO: Remove `threepid_creds` once servers support proper UIA
                     // See https://github.com/vector-im/riot-web/issues/10312
+                    // See https://github.com/matrix-org/matrix-doc/issues/2220
                     threepid_creds: creds,
                     threepidCreds: creds,
                 });

src/components/views/auth/ModularServerConfig.js

@@ -23,7 +23,8 @@ import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 import * as ServerType from '../../views/auth/ServerTypeSelector';
 import ServerConfig from "./ServerConfig";
 
-const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
+const MODULAR_URL = 'https://modular.im/services/matrix-hosting-riot' +
+    '?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
 
 // TODO: TravisR - Can this extend ServerConfig for most things?
 

src/components/views/auth/PasswordLogin.js

@@ -238,7 +238,7 @@ export default class PasswordLogin extends React.Component {
                     type="text"
                     label={_t("Phone")}
                     value={this.state.phoneNumber}
-                    prefix={phoneCountry}
+                    prefixComponent={phoneCountry}
                     onChange={this.onPhoneNumberChanged}
                     onBlur={this.onPhoneNumberBlur}
                     disabled={this.props.disableSubmit}

src/components/views/auth/RegistrationForm.js

@@ -473,7 +473,7 @@ export default createReactClass({
             type="text"
             label={phoneLabel}
             value={this.state.phoneNumber}
-            prefix={phoneCountry}
+            prefixComponent={phoneCountry}
             onChange={this.onPhoneNumberChange}
             onValidate={this.onPhoneNumberValidate}
         />;

src/components/views/auth/ServerTypeSelector.js

@@ -22,7 +22,8 @@ import classnames from 'classnames';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import {makeType} from "../../../utils/TypeUtils";
 
-const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
+const MODULAR_URL = 'https://modular.im/services/matrix-hosting-riot' +
+    '?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
 
 export const FREE = 'Free';
 export const PREMIUM = 'Premium';

src/components/views/dialogs/BaseDialog.js

@@ -144,6 +144,7 @@ export default createReactClass({
                 >
                     <div className={classNames('mx_Dialog_header', {
                         'mx_Dialog_headerWithButton': !!this.props.headerButton,
+                        'mx_Dialog_headerWithCancel': !!cancelButton,
                     })}>
                         <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
                             {headerImage}

src/components/views/elements/RoomAliasField.js

@@ -47,8 +47,8 @@ export default class RoomAliasField extends React.PureComponent {
                 <Field
                     label={_t("Room address")}
                     className="mx_RoomAliasField"
-                    prefix={poundSign}
-                    postfix={domain}
+                    prefixComponent={poundSign}
+                    postfixComponent={domain}
                     ref={ref => this._fieldRef = ref}
                     onValidate={this._onValidate}
                     placeholder={_t("e.g. my-room")}

src/components/views/globals/CookieBar.js

@@ -1,103 +0,0 @@
-/*
-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.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import dis from '../../../dispatcher/dispatcher';
-import { _t } from '../../../languageHandler';
-import * as sdk from '../../../index';
-import Analytics from '../../../Analytics';
-
-export default class CookieBar extends React.Component {
-    static propTypes = {
-        policyUrl: PropTypes.string,
-    }
-
-    constructor() {
-        super();
-    }
-
-    onUsageDataClicked(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        Analytics.showDetailsModal();
-    }
-
-    onAccept() {
-        dis.dispatch({
-            action: 'accept_cookies',
-        });
-    }
-
-    onReject() {
-        dis.dispatch({
-            action: 'reject_cookies',
-        });
-    }
-
-    render() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const toolbarClasses = "mx_MatrixToolbar";
-        return (
-            <div className={toolbarClasses}>
-                <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />
-                <div className="mx_MatrixToolbar_content">
-                    { this.props.policyUrl ? _t(
-                        "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. " +
-                        "This will use a cookie " +
-                        "(please see our <PolicyLink>Cookie Policy</PolicyLink>).",
-                        {},
-                        {
-                            'UsageDataLink': (sub) => <a
-                                className="mx_MatrixToolbar_link"
-                                onClick={this.onUsageDataClicked}
-                            >
-                                { sub }
-                            </a>,
-                            // XXX: We need to link to the page that explains our cookies
-                            'PolicyLink': (sub) => <a
-                                    className="mx_MatrixToolbar_link"
-                                    target="_blank"
-                                    href={this.props.policyUrl}
-                                >
-                                    { sub }
-                                </a>
-                            ,
-                        },
-                    ) : _t(
-                        "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. " +
-                        "This will use a cookie.",
-                        {},
-                        {
-                            'UsageDataLink': (sub) => <a
-                                className="mx_MatrixToolbar_link"
-                                onClick={this.onUsageDataClicked}
-                            >
-                                { sub }
-                            </a>,
-                        },
-                    ) }
-                </div>
-                <AccessibleButton element='button' className="mx_MatrixToolbar_action" onClick={this.onAccept}>
-                    { _t("Yes, I want to help!") }
-                </AccessibleButton>
-                <AccessibleButton className="mx_MatrixToolbar_close" onClick={this.onReject}>
-                    <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} />
-                </AccessibleButton>
-            </div>
-        );
-    }
-}

src/components/views/globals/MatrixToolbar.js

@@ -1,45 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket 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.
-*/
-
-import React from 'react';
-import createReactClass from 'create-react-class';
-import { _t } from '../../../languageHandler';
-import Notifier from '../../../Notifier';
-import AccessibleButton from '../../../components/views/elements/AccessibleButton';
-
-export default createReactClass({
-    displayName: 'MatrixToolbar',
-
-    hideToolbar: function() {
-        Notifier.setToolbarHidden(true);
-    },
-
-    onClick: function() {
-        Notifier.setEnabled(true);
-    },
-
-    render: function() {
-        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('You are not receiving desktop notifications') } <a className="mx_MatrixToolbar_link" onClick={ this.onClick }> { _t('Enable them now') }</a>
-                </div>
-                <AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} /></AccessibleButton>
-            </div>
-        );
-    },
-});

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/components/views/globals/PasswordNagBar.js

@@ -1,53 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-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.
-*/
-
-import React from 'react';
-import createReactClass from 'create-react-class';
-import * as sdk from '../../../index';
-import Modal from '../../../Modal';
-import { _t } from '../../../languageHandler';
-
-export default createReactClass({
-    onUpdateClicked: function() {
-        const SetPasswordDialog = sdk.getComponent('dialogs.SetPasswordDialog');
-        Modal.createTrackedDialog('Set Password Dialog', 'Password Nag Bar', SetPasswordDialog);
-    },
-
-    render: function() {
-        const toolbarClasses = "mx_MatrixToolbar mx_MatrixToolbar_clickable";
-        return (
-            <div className={toolbarClasses} onClick={this.onUpdateClicked}>
-                <img className="mx_MatrixToolbar_warning"
-                    src={require("../../../../res/img/warning.svg")}
-                    width="24"
-                    height="23"
-                    alt=""
-                />
-                <div className="mx_MatrixToolbar_content">
-                    { _t(
-                        "To return to your account in future you need to <u>set a password</u>",
-                        {},
-                        { 'u': (sub) => <u>{ sub }</u> },
-                    ) }
-                </div>
-                <button className="mx_MatrixToolbar_action">
-                    { _t("Set Password") }
-                </button>
-            </div>
-        );
-    },
-});

src/components/views/globals/ServerLimitBar.js

@@ -1,99 +0,0 @@
-/*
-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.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import classNames from 'classnames';
-import { _td } from '../../../languageHandler';
-import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
-
-export default createReactClass({
-    propTypes: {
-        // 'hard' if the logged in user has been locked out, 'soft' if they haven't
-        kind: PropTypes.string,
-        adminContact: PropTypes.string,
-        // The type of limit that has been hit.
-        limitType: PropTypes.string.isRequired,
-    },
-
-    getDefaultProps: function() {
-        return {
-            kind: 'hard',
-        };
-    },
-
-    render: function() {
-        const toolbarClasses = {
-            'mx_MatrixToolbar': true,
-        };
-
-        let adminContact;
-        let limitError;
-        if (this.props.kind === 'hard') {
-            toolbarClasses['mx_MatrixToolbar_error'] = true;
-
-            adminContact = messageForResourceLimitError(
-                this.props.limitType,
-                this.props.adminContact,
-                {
-                    '': _td("Please <a>contact your service administrator</a> to continue using the service."),
-                },
-            );
-            limitError = messageForResourceLimitError(
-                this.props.limitType,
-                this.props.adminContact,
-                {
-                    'monthly_active_user': _td("This homeserver has hit its Monthly Active User limit."),
-                    '': _td("This homeserver has exceeded one of its resource limits."),
-                },
-            );
-        } else {
-            toolbarClasses['mx_MatrixToolbar_info'] = true;
-            adminContact = messageForResourceLimitError(
-                this.props.limitType,
-                this.props.adminContact,
-                {
-                    '': _td("Please <a>contact your service administrator</a> to get this limit increased."),
-                },
-            );
-            limitError = messageForResourceLimitError(
-                this.props.limitType,
-                this.props.adminContact,
-                {
-                    'monthly_active_user': _td(
-                        "This homeserver has hit its Monthly Active User limit so " +
-                        "<b>some users will not be able to log in</b>.",
-                    ),
-                    '': _td(
-                        "This homeserver has exceeded one of its resource limits so " +
-                        "<b>some users will not be able to log in</b>.",
-                    ),
-                },
-                {'b': sub => <b>{sub}</b>},
-            );
-        }
-        return (
-            <div className={classNames(toolbarClasses)}>
-                <div className="mx_MatrixToolbar_content">
-                    {limitError}
-                    {' '}
-                    {adminContact}
-                </div>
-            </div>
-        );
-    },
-});

src/components/views/globals/UpdateCheckBar.js

@@ -1,91 +0,0 @@
-/*
-Copyright 2017, 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 { _t } from '../../../languageHandler';
-import PlatformPeg from '../../../PlatformPeg';
-import AccessibleButton from '../../../components/views/elements/AccessibleButton';
-
-export default createReactClass({
-    propTypes: {
-        status: PropTypes.string.isRequired,
-        // Currently for error detail but will be usable for download progress
-        // once that is a thing that squirrel passes through electron.
-        detail: PropTypes.string,
-    },
-
-    getDefaultProps: function() {
-        return {
-            detail: '',
-        };
-    },
-
-    getStatusText: function() {
-        // we can't import the enum from riot-web as we don't want matrix-react-sdk
-        // to depend on riot-web. so we grab it as a normal object via API instead.
-        const updateCheckStatusEnum = PlatformPeg.get().getUpdateCheckStatusEnum();
-        switch (this.props.status) {
-            case updateCheckStatusEnum.ERROR:
-                return _t('Error encountered (%(errorDetail)s).', { errorDetail: this.props.detail });
-            case updateCheckStatusEnum.CHECKING:
-                return _t('Checking for an update...');
-            case updateCheckStatusEnum.NOTAVAILABLE:
-                return _t('No update available.');
-            case updateCheckStatusEnum.DOWNLOADING:
-                return _t('Downloading update...');
-        }
-    },
-
-    hideToolbar: function() {
-        PlatformPeg.get().stopUpdateCheck();
-    },
-
-    render: function() {
-        const message = this.getStatusText();
-        const warning = _t('Warning');
-
-        if (!('getUpdateCheckStatusEnum' in PlatformPeg.get())) {
-            return <div></div>;
-        }
-
-        const updateCheckStatusEnum = PlatformPeg.get().getUpdateCheckStatusEnum();
-        const doneStatuses = [
-            updateCheckStatusEnum.ERROR,
-            updateCheckStatusEnum.NOTAVAILABLE,
-        ];
-
-        let image;
-        if (doneStatuses.includes(this.props.status)) {
-            image = <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />;
-        } else {
-            image = <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/spinner.gif")} width="24" height="23" alt="" />;
-        }
-
-        return (
-            <div className="mx_MatrixToolbar">
-                {image}
-                <div className="mx_MatrixToolbar_content">
-                    {message}
-                </div>
-                <AccessibleButton className="mx_MatrixToolbar_close" onClick={this.hideToolbar}>
-                    <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} />
-                </AccessibleButton>
-            </div>
-        );
-    },
-});

src/components/views/settings/ChangePassword.js

@@ -141,6 +141,12 @@ export default createReactClass({
     _changePassword: function(cli, oldPassword, newPassword) {
         const authDict = {
             type: 'm.login.password',
+            identifier: {
+                type: 'm.id.user',
+                user: cli.credentials.userId,
+            },
+            // TODO: Remove `user` once servers support proper UIA
+            // See https://github.com/matrix-org/synapse/issues/5665
             user: cli.credentials.userId,
             password: oldPassword,
         };

src/components/views/settings/EnableNotificationsButton.js

@@ -1,75 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket 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.
-*/
-
-import React from "react";
-import createReactClass from 'create-react-class';
-import Notifier from "../../../Notifier";
-import dis from "../../../dispatcher/dispatcher";
-import { _t } from '../../../languageHandler';
-
-export default createReactClass({
-    displayName: 'EnableNotificationsButton',
-
-    componentDidMount: function() {
-        this.dispatcherRef = dis.register(this.onAction);
-    },
-
-    componentWillUnmount: function() {
-        dis.unregister(this.dispatcherRef);
-    },
-
-    onAction: function(payload) {
-        if (payload.action !== "notifier_enabled") {
-            return;
-        }
-        this.forceUpdate();
-    },
-
-    enabled: function() {
-        return Notifier.isEnabled();
-    },
-
-    onClick: function() {
-        const self = this;
-        if (!Notifier.supportsDesktopNotifications()) {
-            return;
-        }
-        if (!Notifier.isEnabled()) {
-            Notifier.setEnabled(true, function() {
-                self.forceUpdate();
-            });
-        } else {
-            Notifier.setEnabled(false);
-        }
-        this.forceUpdate();
-    },
-
-    render: function() {
-        if (this.enabled()) {
-            return (
-                <button className="mx_EnableNotificationsButton" onClick={this.onClick}>
-                    { _t("Disable Notifications") }
-                </button>
-            );
-        } else {
-            return (
-                <button className="mx_EnableNotificationsButton" onClick={this.onClick}>
-                    { _t("Enable Notifications") }
-                </button>
-            );
-        }
-    },
-});

src/components/views/settings/UpdateCheckButton.tsx

@@ -0,0 +1,88 @@
+/*
+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, {useState} from "react";
+
+import {UpdateCheckStatus} from "../../../BasePlatform";
+import PlatformPeg from "../../../PlatformPeg";
+import {useDispatcher} from "../../../hooks/useDispatcher";
+import dis from "../../../dispatcher/dispatcher";
+import {Action} from "../../../dispatcher/actions";
+import {_t} from "../../../languageHandler";
+import InlineSpinner from "../../../components/views/elements/InlineSpinner";
+import AccessibleButton from "../../../components/views/elements/AccessibleButton";
+import {CheckUpdatesPayload} from "../../../dispatcher/payloads/CheckUpdatesPayload";
+
+function installUpdate() {
+    PlatformPeg.get().installUpdate();
+}
+
+function getStatusText(status: UpdateCheckStatus, errorDetail?: string) {
+    switch (status) {
+        case UpdateCheckStatus.Error:
+            return _t('Error encountered (%(errorDetail)s).', { errorDetail });
+        case UpdateCheckStatus.Checking:
+            return _t('Checking for an update...');
+        case UpdateCheckStatus.NotAvailable:
+            return _t('No update available.');
+        case UpdateCheckStatus.Downloading:
+            return _t('Downloading update...');
+        case UpdateCheckStatus.Ready:
+            return _t("New version available. <a>Update now.</a>", {}, {
+                a: sub => <AccessibleButton kind="link" onClick={installUpdate}>{sub}</AccessibleButton>
+            });
+    }
+}
+
+const doneStatuses = [
+    UpdateCheckStatus.Ready,
+    UpdateCheckStatus.Error,
+    UpdateCheckStatus.NotAvailable,
+];
+
+const UpdateCheckButton = () => {
+    const [state, setState] = useState<CheckUpdatesPayload>(null);
+
+    const onCheckForUpdateClick = () => {
+        setState(null);
+        PlatformPeg.get().startUpdateCheck();
+    };
+
+    useDispatcher(dis, ({action, ...params}) => {
+        if (action === Action.CheckUpdates) {
+            setState(params as CheckUpdatesPayload);
+        }
+    });
+
+    const busy = state && !doneStatuses.includes(state.status);
+
+    let suffix;
+    if (state) {
+        suffix = <span className="mx_UpdateCheckButton_summary">
+            {getStatusText(state.status, state.detail)}
+            {busy && <InlineSpinner />}
+        </span>;
+    }
+
+    return <React.Fragment>
+        <AccessibleButton onClick={onCheckForUpdateClick} kind="primary" disabled={busy}>
+            {_t("Check for update")}
+        </AccessibleButton>
+        { suffix }
+    </React.Fragment>;
+};
+
+export default UpdateCheckButton;

src/components/views/settings/tabs/user/HelpUserSettingsTab.js

@@ -25,6 +25,7 @@ import Modal from "../../../../../Modal";
 import * as sdk from "../../../../../";
 import PlatformPeg from "../../../../../PlatformPeg";
 import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
+import UpdateCheckButton from "../../UpdateCheckButton";
 
 export default class HelpUserSettingsTab extends React.Component {
     static propTypes = {
@@ -177,12 +178,7 @@ export default class HelpUserSettingsTab extends React.Component {
 
         let updateButton = null;
         if (this.state.canUpdate) {
-            const platform = PlatformPeg.get();
-            updateButton = (
-                <AccessibleButton onClick={platform.startUpdateCheck} kind='primary'>
-                    {_t('Check for update')}
-                </AccessibleButton>
-            );
+            updateButton = <UpdateCheckButton />;
         }
 
         return (

src/components/views/toasts/GenericToast.tsx

@@ -17,17 +17,21 @@ limitations under the License.
 import React, {ReactChild} from "react";
 
 import FormButton from "../elements/FormButton";
+import {XOR} from "../../../@types/common";
 
 interface IProps {
     description: ReactChild;
     acceptLabel: string;
-    rejectLabel?: string;
 
     onAccept();
-    onReject?();
 }
 
-const GenericToast: React.FC<IProps> = ({description, acceptLabel, rejectLabel, onAccept, onReject}) => {
+interface IPropsExtended extends IProps {
+    rejectLabel: string;
+    onReject();
+}
+
+const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({description, acceptLabel, rejectLabel, onAccept, onReject}) => {
     return <div>
         <div className="mx_Toast_description">
             { description }