Merge pull request #3115 from matrix-org/travis/reduce-scalar-calls

Defer scalar API calls until they are needed
2019-06-18 08:17:21 -06:00 · 2019-06-18 08:17:21 -06:00 · 7b514b0573
commit 7b514b0573
parent f7c03acb58 b6ca0ea6bf
12 changed files with 208 additions and 261 deletions
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@ -240,19 +240,13 @@ export default class AppTile extends React.Component {
        if (this.props.onEditClick) {
            this.props.onEditClick();
        } else {
+            // The dialog handles scalar auth for us
            const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
-            this._scalarClient.connect().done(() => {
-                const src = this._scalarClient.getScalarInterfaceUrlForRoom(
-                    this.props.room, 'type_' + this.props.type, this.props.id);
-                Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
-                    src: src,
-                }, "mx_IntegrationsManager");
-            }, (err) => {
-                this.setState({
-                    error: err.message,
-                });
-                console.error('Error ensuring a valid scalar_token exists', err);
-            });
+            Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
+                room: this.props.room,
+                screen: 'type_' + this.props.type,
+                integrationId: this.props.id,
+            }, "mx_IntegrationsManager");
        }
    }

--- a/src/components/views/elements/ManageIntegsButton.js
+++ b/src/components/views/elements/ManageIntegsButton.js
@ -1,5 +1,6 @@
 /*
 Copyright 2017 New Vector Ltd
+Copyright 2019 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.
@ -17,95 +18,34 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import sdk from '../../../index';
-import classNames from 'classnames';
-import SdkConfig from '../../../SdkConfig';
 import ScalarAuthClient from '../../../ScalarAuthClient';
-import ScalarMessaging from '../../../ScalarMessaging';
 import Modal from "../../../Modal";
 import { _t } from '../../../languageHandler';
-import AccessibleButton from './AccessibleButton';

 export default class ManageIntegsButton extends React.Component {
    constructor(props) {
        super(props);
-
-        this.state = {
-            scalarError: null,
-        };
-
-        this.onManageIntegrations = this.onManageIntegrations.bind(this);
    }

-    componentWillMount() {
-        ScalarMessaging.startListening();
-        this.scalarClient = null;
-
-        if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
-            this.scalarClient = new ScalarAuthClient();
-            this.scalarClient.connect().done(() => {
-                this.forceUpdate();
-            }, (err) => {
-                this.setState({scalarError: err});
-                console.error('Error whilst initialising scalarClient for ManageIntegsButton', err);
-            });
-        }
-    }
-
-    componentWillUnmount() {
-        ScalarMessaging.stopListening();
-    }
-
-    onManageIntegrations(ev) {
+    onManageIntegrations = (ev) => {
        ev.preventDefault();
-        if (this.state.scalarError && !this.scalarClient.hasCredentials()) {
-            return;
-        }
+
        const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
-        this.scalarClient.connect().done(() => {
-            Modal.createDialog(IntegrationsManager, {
-                src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
-                    this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room) :
-                    null,
-            }, "mx_IntegrationsManager");
-        }, (err) => {
-            this.setState({scalarError: err});
-            console.error('Error ensuring a valid scalar_token exists', err);
-        });
-    }
+        Modal.createDialog(IntegrationsManager, {
+            room: this.props.room,
+        }, "mx_IntegrationsManager");
+    };

    render() {
        let integrationsButton = <div />;
-        let integrationsWarningTriangle = <div />;
-        let integrationsErrorPopup = <div />;
-        if (this.scalarClient !== null) {
-            const integrationsButtonClasses = classNames({
-                mx_RoomHeader_button: true,
-                mx_RoomHeader_manageIntegsButton: true,
-                mx_ManageIntegsButton_error: !!this.state.scalarError,
-            });
-
-            if (this.state.scalarError && !this.scalarClient.hasCredentials()) {
-                integrationsWarningTriangle = <img
-                    src={require("../../../../res/img/warning.svg")}
-                    title={_t('Integrations Error')}
-                    width="17"
-                />;
-                // Popup shown when hovering over integrationsButton_error (via CSS)
-                integrationsErrorPopup = (
-                    <span className="mx_ManageIntegsButton_errorPopup">
-                        { _t('Could not connect to the integration server') }
-                    </span>
-                );
-            }
-
+        if (ScalarAuthClient.isPossible()) {
+            const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
            integrationsButton = (
-                <AccessibleButton className={integrationsButtonClasses}
+                <AccessibleButton
+                    className='mx_RoomHeader_button mx_RoomHeader_manageIntegsButton'
+                    title={_t("Manage Integrations")}
                    onClick={this.onManageIntegrations}
-                    title={_t('Manage Integrations')}
-                >
-                    { integrationsWarningTriangle }
-                    { integrationsErrorPopup }
-                </AccessibleButton>
+                />
            );
        }

--- a/src/components/views/rooms/AppsDrawer.js
+++ b/src/components/views/rooms/AppsDrawer.js
@ -24,8 +24,6 @@ import AppTile from '../elements/AppTile';
 import Modal from '../../../Modal';
 import dis from '../../../dispatcher';
 import sdk from '../../../index';
-import SdkConfig from '../../../SdkConfig';
-import ScalarAuthClient from '../../../ScalarAuthClient';
 import ScalarMessaging from '../../../ScalarMessaging';
 import { _t } from '../../../languageHandler';
 import WidgetUtils from '../../../utils/WidgetUtils';
@ -63,20 +61,6 @@ module.exports = React.createClass({
    },

    componentDidMount: function() {
-        this.scalarClient = null;
-        if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
-            this.scalarClient = new ScalarAuthClient();
-            this.scalarClient.connect().then(() => {
-                this.forceUpdate();
-            }).catch((e) => {
-                console.log('Failed to connect to integrations server');
-                // TODO -- Handle Scalar errors
-                //     this.setState({
-                //         scalar_error: err,
-                //     });
-            });
-        }
-
        this.dispatcherRef = dis.register(this.onAction);
    },

@ -144,16 +128,10 @@ module.exports = React.createClass({

    _launchManageIntegrations: function() {
        const IntegrationsManager = sdk.getComponent('views.settings.IntegrationsManager');
-        this.scalarClient.connect().done(() => {
-            const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
-                this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room, 'add_integ') :
-                null;
-            Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
-                src: src,
-            }, 'mx_IntegrationsManager');
-        }, (err) => {
-            console.error('Error ensuring a valid scalar_token exists', err);
-        });
+        Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
+            room: this.props.room,
+            screen: 'add_integ',
+        }, 'mx_IntegrationsManager');
    },

    onClickAddWidget: function(e) {
--- a/src/components/views/rooms/Stickerpicker.js
+++ b/src/components/views/rooms/Stickerpicker.js
@ -14,12 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
-import { _t } from '../../../languageHandler';
+import {_t, _td} from '../../../languageHandler';
 import AppTile from '../elements/AppTile';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import sdk from '../../../index';
-import SdkConfig from '../../../SdkConfig';
 import ScalarAuthClient from '../../../ScalarAuthClient';
 import dis from '../../../dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
@ -53,6 +52,9 @@ export default class Stickerpicker extends React.Component {
        this.popoverWidth = 300;
        this.popoverHeight = 300;

+        // This is loaded by _acquireScalarClient on an as-needed basis.
+        this.scalarClient = null;
+
        this.state = {
            showStickers: false,
            imError: null,
@ -63,14 +65,34 @@ export default class Stickerpicker extends React.Component {
        };
    }

-    _removeStickerpickerWidgets() {
+    _acquireScalarClient() {
+        if (this.scalarClient) return Promise.resolve(this.scalarClient);
+        if (ScalarAuthClient.isPossible()) {
+            this.scalarClient = new ScalarAuthClient();
+            return this.scalarClient.connect().then(() => {
+                this.forceUpdate();
+                return this.scalarClient;
+            }).catch((e) => {
+                this._imError(_td("Failed to connect to integrations server"), e);
+            });
+        } else {
+            this._imError(_td("No integrations server is configured to manage stickers with"));
+        }
+    }
+
+    async _removeStickerpickerWidgets() {
+        const scalarClient = await this._acquireScalarClient();
        console.warn('Removing Stickerpicker widgets');
        if (this.state.widgetId) {
-            this.scalarClient.disableWidgetAssets(widgetType, this.state.widgetId).then(() => {
-                console.warn('Assets disabled');
-            }).catch((err) => {
-                console.error('Failed to disable assets');
-            });
+            if (scalarClient) {
+                scalarClient.disableWidgetAssets(widgetType, this.state.widgetId).then(() => {
+                    console.warn('Assets disabled');
+                }).catch((err) => {
+                    console.error('Failed to disable assets');
+                });
+            } else {
+                console.error("Cannot disable assets: no scalar client");
+            }
        } else {
            console.warn('No widget ID specified, not disabling assets');
        }
@ -87,19 +109,7 @@ export default class Stickerpicker extends React.Component {
        // Close the sticker picker when the window resizes
        window.addEventListener('resize', this._onResize);

-        this.scalarClient = null;
-        if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
-            this.scalarClient = new ScalarAuthClient();
-            this.scalarClient.connect().then(() => {
-                this.forceUpdate();
-            }).catch((e) => {
-                this._imError("Failed to connect to integrations server", e);
-            });
-        }
-
-        if (!this.state.imError) {
-            this.dispatcherRef = dis.register(this._onWidgetAction);
-        }
+        this.dispatcherRef = dis.register(this._onWidgetAction);

        // Track updates to widget state in account data
        MatrixClientPeg.get().on('accountData', this._updateWidget);
@ -126,7 +136,7 @@ export default class Stickerpicker extends React.Component {
        console.error(errorMsg, e);
        this.setState({
            showStickers: false,
-            imError: errorMsg,
+            imError: _t(errorMsg),
        });
    }

@ -339,22 +349,13 @@ export default class Stickerpicker extends React.Component {
     */
    _launchManageIntegrations() {
        const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
-        this.scalarClient.connect().done(() => {
-            const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
-                this.scalarClient.getScalarInterfaceUrlForRoom(
-                    this.props.room,
-                    'type_' + widgetType,
-                    this.state.widgetId,
-                ) :
-                null;
-            Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
-                src: src,
-            }, "mx_IntegrationsManager");
-            this.setState({showStickers: false});
-        }, (err) => {
-            this.setState({imError: err});
-            console.error('Error ensuring a valid scalar_token exists', err);
-        });
+
+        // The integrations manager will handle scalar auth for us.
+        Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
+            room: this.props.room,
+            screen: `type_${widgetType}`,
+            integrationId: this.state.widgetId,
+        }, "mx_IntegrationsManager");
    }

    render() {
--- a/src/components/views/settings/IntegrationsManager.js
+++ b/src/components/views/settings/IntegrationsManager.js
@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 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.
@ -14,50 +15,124 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-'use strict';
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import dis from '../../../dispatcher';
+import ScalarAuthClient from '../../../ScalarAuthClient';

-const React = require('react');
-const sdk = require('../../../index');
-const MatrixClientPeg = require('../../../MatrixClientPeg');
-const dis = require('../../../dispatcher');
+export default class IntegrationsManager extends React.Component {
+    static propTypes = {
+        // the room object where the integrations manager should be opened in
+        room: PropTypes.object.isRequired,

-module.exports = React.createClass({
-    displayName: 'IntegrationsManager',
+        // the screen name to open
+        screen: PropTypes.string,

-    propTypes: {
-        src: React.PropTypes.string.isRequired, // the source of the integration manager being embedded
-        onFinished: React.PropTypes.func.isRequired, // callback when the lightbox is dismissed
-    },
+        // the integration ID to open
+        integrationId: PropTypes.string,

-    // XXX: keyboard shortcuts for managing dialogs should be done by the modal
-    // dialog base class somehow, surely...
-    componentDidMount: function() {
+        // callback when the manager is dismissed
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            loading: true,
+            configured: ScalarAuthClient.isPossible(),
+            connected: false, // true if a `src` is set and able to be connected to
+            src: null, // string for where to connect to
+        };
+    }
+
+    componentWillMount() {
+        if (!this.state.configured) return;
+
+        const scalarClient = new ScalarAuthClient();
+        scalarClient.connect().then(() => {
+            const hasCredentials = scalarClient.hasCredentials();
+            if (!hasCredentials) {
+                this.setState({
+                    connected: false,
+                    loading: false,
+                });
+            } else {
+                const src = scalarClient.getScalarInterfaceUrlForRoom(
+                    this.props.room,
+                    this.props.screen,
+                    this.props.integrationId,
+                );
+                this.setState({
+                    loading: false,
+                    connected: true,
+                    src: src,
+                });
+            }
+        }).catch(err => {
+            console.error(err);
+            this.setState({
+                loading: false,
+                connected: false,
+            });
+        });
+    }
+
+    componentDidMount() {
        this.dispatcherRef = dis.register(this.onAction);
        document.addEventListener("keydown", this.onKeyDown);
-    },
+    }

-    componentWillUnmount: function() {
+    componentWillUnmount() {
        dis.unregister(this.dispatcherRef);
        document.removeEventListener("keydown", this.onKeyDown);
-    },
+    }

-    onKeyDown: function(ev) {
-        if (ev.keyCode == 27) { // escape
+    onKeyDown = (ev) => {
+        if (ev.keyCode === 27) { // escape
            ev.stopPropagation();
            ev.preventDefault();
            this.props.onFinished();
        }
-    },
+    };

-    onAction: function(payload) {
+    onAction = (payload) => {
        if (payload.action === 'close_scalar') {
            this.props.onFinished();
        }
-    },
+    };

-    render: function() {
-        return (
-            <iframe src={ this.props.src }></iframe>
-        );
-    },
-});
+    render() {
+        if (!this.state.configured) {
+            return (
+                <div className='mx_IntegrationsManager_error'>
+                    <h3>{_t("No integrations server configured")}</h3>
+                    <p>{_t("This Riot instance does not have an integrations server configured.")}</p>
+                </div>
+            );
+        }
+
+        if (this.state.loading) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return (
+                <div className='mx_IntegrationsManager_loading'>
+                    <h3>{_t("Connecting to integrations server...")}</h3>
+                    <Spinner />
+                </div>
+            );
+        }
+
+        if (!this.state.connected) {
+            return (
+                <div className='mx_IntegrationsManager_error'>
+                    <h3>{_t("Cannot connect to integrations server")}</h3>
+                    <p>{_t("The integrations server is offline or it cannot reach your homeserver.")}</p>
+                </div>
+            );
+        }
+
+        return <iframe src={this.state.src}></iframe>;
+    }
+}