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

Defer scalar API calls until they are needed

.eslintignore.errorfiles

@@ -47,7 +47,6 @@ src/components/views/rooms/UserTile.js
 src/components/views/settings/ChangeAvatar.js
 src/components/views/settings/ChangePassword.js
 src/components/views/settings/DevicesPanel.js
-src/components/views/settings/IntegrationsManager.js
 src/components/views/settings/Notifications.js
 src/GroupAddressPicker.js
 src/HtmlUtils.js

res/css/views/settings/_IntegrationsManager.scss

@@ -29,3 +29,16 @@ limitations under the License.
     width: 100%;
     height: 100%;
 }
+
+.mx_IntegrationsManager_loading h3 {
+    text-align: center;
+}
+
+.mx_IntegrationsManager_error {
+    text-align: center;
+    padding-top: 20px;
+}
+
+.mx_IntegrationsManager_error h3 {
+    color: $warning-color;
+}

src/CallHandler.js

@@ -344,7 +344,7 @@ function _onAction(payload) {
 }
 
 async function _startCallApp(roomId, type) {
-    // check for a working intgrations manager. Technically we could put
+    // check for a working integrations manager. Technically we could put
     // the state event in anyway, but the resulting widget would then not
     // work for us. Better that the user knows before everyone else in the
     // room sees it.

src/FromWidgetPostMessageApi.js

@@ -17,9 +17,12 @@ limitations under the License.
 
 import URL from 'url';
 import dis from './dispatcher';
-import IntegrationManager from './IntegrationManager';
 import WidgetMessagingEndpoint from './WidgetMessagingEndpoint';
 import ActiveWidgetStore from './stores/ActiveWidgetStore';
+import sdk from "./index";
+import Modal from "./Modal";
+import MatrixClientPeg from "./MatrixClientPeg";
+import RoomViewStore from "./stores/RoomViewStore";
 
 const WIDGET_API_VERSION = '0.0.2'; // Current API version
 const SUPPORTED_WIDGET_API_VERSIONS = [
@@ -189,7 +192,14 @@ export default class FromWidgetPostMessageApi {
             const data = event.data.data || event.data.widgetData;
             const integType = (data && data.integType) ? data.integType : null;
             const integId = (data && data.integId) ? data.integId : null;
-            IntegrationManager.open(integType, integId);
+
+            // The dialog will take care of scalar auth for us
+            const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
+            Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
+                room: MatrixClientPeg.get().getRoom(RoomViewStore.getRoomId()),
+                screen: 'type_' + integType,
+                integrationId: integId,
+            }, "mx_IntegrationsManager");
         } else if (action === 'set_always_on_screen') {
             // This is a new message: there is no reason to support the deprecated widgetData here
             const data = event.data.data;

src/ScalarAuthClient.js

@@ -29,6 +29,14 @@ class ScalarAuthClient {
         this.scalarToken = null;
     }
 
+    /**
+     * Determines if setting up a ScalarAuthClient is even possible
+     * @returns {boolean} true if possible, false otherwise.
+     */
+    static isPossible() {
+        return SdkConfig.get()['integrations_rest_url'] && SdkConfig.get()['integrations_ui_url'];
+    }
+
     connect() {
         return this.getScalarToken().then((tok) => {
             this.scalarToken = tok;
@@ -41,7 +49,8 @@ class ScalarAuthClient {
 
     // Returns a scalar_token string
     getScalarToken() {
-        const token = window.localStorage.getItem("mx_scalar_token");
+        let token = this.scalarToken;
+        if (!token) token = window.localStorage.getItem("mx_scalar_token");
 
         if (!token) {
             return this.registerForToken();

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");
         }
     }
 

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>
+                />
             );
         }
 

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) {