Ensure scalar_token is valid before opening integrations manager

Since Scalar (and other integration managers) are loaded as apps into
an iframe, a valid `scalar_token` must exist when loading the app.

It is possible that a scalar_token becomes invalid between the time
when the integration manager button was rendered and the user clicking
the link. Here we make a call to integration manager `/account`
before trying to render the integration manager, which ensures we
have a valid token for the integration manager to work with.

Moving the scalar token revalidation to the cases where it is actually
needed could make it possible to decrease the amount of Scalar /account
calls we do when switching rooms, which is currently 3.

Signed-off-by: Jason Robinson <jasonr@matrix.org>

Author: jaywink

src/IntegrationManager.js

@@ -51,6 +51,11 @@ export default class IntegrationManager {
    */
   static async open(integName, integId, onFinished) {
     await IntegrationManager._init();
+    if (global.mxIntegrationManager.client) {
+        await global.mxIntegrationManager.client.connect();
+    } else {
+        return;
+    }
     const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
     if (global.mxIntegrationManager.error ||
         !(global.mxIntegrationManager.client && global.mxIntegrationManager.client.hasCredentials())) {

src/components/views/elements/AppTile.js

@@ -241,11 +241,18 @@ export default class AppTile extends React.Component {
             this.props.onEditClick();
         } else {
             const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
-            const src = this._scalarClient.getScalarInterfaceUrlForRoom(
-                this.props.room, 'type_' + this.props.type, this.props.id);
-            Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
-                src: src,
-            }, "mx_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);
+            });
         }
     }
 

src/components/views/elements/ManageIntegsButton.js

@@ -45,7 +45,7 @@ export default class ManageIntegsButton extends React.Component {
             this.scalarClient.connect().done(() => {
                 this.forceUpdate();
             }, (err) => {
-                this.setState({ scalarError: err});
+                this.setState({scalarError: err});
                 console.error('Error whilst initialising scalarClient for ManageIntegsButton', err);
             });
         }
@@ -61,11 +61,16 @@ export default class ManageIntegsButton extends React.Component {
             return;
         }
         const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
-        Modal.createDialog(IntegrationsManager, {
-            src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
-                this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room) :
-                null,
-        }, "mx_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);
+        });
     }
 
     render() {

src/components/views/rooms/AppsDrawer.js

@@ -144,12 +144,16 @@ module.exports = React.createClass({
 
     _launchManageIntegrations: function() {
         const IntegrationsManager = sdk.getComponent('views.settings.IntegrationsManager');
-        const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
+        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');
+            Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
+                src: src,
+            }, 'mx_IntegrationsManager');
+        }, (err) => {
+            console.error('Error ensuring a valid scalar_token exists', err);
+        });
     },
 
     onClickAddWidget: function(e) {

src/components/views/rooms/Stickerpicker.js

@@ -310,18 +310,22 @@ export default class Stickerpicker extends React.Component {
      */
     _launchManageIntegrations() {
         const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
-        const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
+        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});
+            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);
+        });
     }
 
     render() {