Refactor integration manager handling into a common place

It was already in a common place, but this is the boilerplate for supporting multiple integration managers, and multiple integration manager sources. For element-hq/element-web#4913 / element-hq/element-web#10161
matrix-org · Aug 9, 2019 · ffa49df · ffa49df
1 parent 75bcd61
commit ffa49df
Show file tree

Hide file tree

Showing 11 changed files with 267 additions and 147 deletions.
diff --git a/src/CallHandler.js b/src/CallHandler.js
@@ -63,7 +63,7 @@ import SdkConfig from './SdkConfig';
 import { showUnknownDeviceDialogForCalls } from './cryptodevices';
 import WidgetUtils from './utils/WidgetUtils';
 import WidgetEchoStore from './stores/WidgetEchoStore';
-import ScalarAuthClient from './ScalarAuthClient';
+import {IntegrationManagers} from "./integrations/IntegrationManagers";
 
 global.mxCalls = {
     //room_id: MatrixCall
@@ -348,14 +348,20 @@ async function _startCallApp(roomId, type) {
     // 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.
-    const scalarClient = new ScalarAuthClient();
-    let haveScalar = false;
-    try {
-        await scalarClient.connect();
-        haveScalar = scalarClient.hasCredentials();
-    } catch (e) {
-        // fall through
+    const managers = IntegrationManagers.sharedInstance();
+    let haveScalar = true;
+    if (managers.hasManager()) {
+        try {
+            const scalarClient = managers.getPrimaryManager().getScalarClient();
+            await scalarClient.connect();
+            haveScalar = scalarClient.hasCredentials();
+        } catch (e) {
+            // ignore
+        }
+    } else {
+        haveScalar = false;
     }
+
     if (!haveScalar) {
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
 

diff --git a/src/FromWidgetPostMessageApi.js b/src/FromWidgetPostMessageApi.js
@@ -22,7 +22,7 @@ import WidgetMessagingEndpoint from './WidgetMessagingEndpoint';
 import ActiveWidgetStore from './stores/ActiveWidgetStore';
 import MatrixClientPeg from "./MatrixClientPeg";
 import RoomViewStore from "./stores/RoomViewStore";
-import { showIntegrationsManager } from './integrations/integrations';
+import {IntegrationManagers} from "./integrations/IntegrationManagers";
 
 const WIDGET_API_VERSION = '0.0.2'; // Current API version
 const SUPPORTED_WIDGET_API_VERSIONS = [
@@ -193,11 +193,12 @@ export default class FromWidgetPostMessageApi {
             const integType = (data && data.integType) ? data.integType : null;
             const integId = (data && data.integId) ? data.integId : null;
 
-            showIntegrationsManager({
-                room: MatrixClientPeg.get().getRoom(RoomViewStore.getRoomId()),
-                screen: 'type_' + integType,
-                integrationId: integId,
-            });
+            // TODO: Open the right integration manager for the widget
+            IntegrationManagers.sharedInstance().getPrimaryManager().open(
+                MatrixClientPeg.get().getRoom(RoomViewStore.getRoomId()),
+                `type_${integType}`,
+                integId,
+            );
         } 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;

diff --git a/src/ScalarAuthClient.js b/src/ScalarAuthClient.js
@@ -29,20 +29,43 @@ import * as Matrix from 'matrix-js-sdk';
 // The version of the integration manager API we're intending to work with
 const imApiVersion = "1.1";
 
-class ScalarAuthClient {
-    constructor() {
+export default class ScalarAuthClient {
+    constructor(apiUrl, uiUrl) {
+        this.apiUrl = apiUrl;
+        this.uiUrl = uiUrl;
         this.scalarToken = null;
         // `undefined` to allow `startTermsFlow` to fallback to a default
         // callback if this is unset.
         this.termsInteractionCallback = undefined;
+
+        // We try and store the token on a per-manager basis, but need a fallback
+        // for the default manager.
+        const configApiUrl = SdkConfig.get()['integrations_rest_url'];
+        const configUiUrl = SdkConfig.get()['integrations_ui_url'];
+        this.isDefaultManager = apiUrl === configApiUrl && configUiUrl === uiUrl;
     }
 
-    /**
-     * 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'];
+    _writeTokenToStore() {
+        window.localStorage.setItem("mx_scalar_token_at_" + this.apiUrl, this.scalarToken);
+        if (this.isDefaultManager) {
+            // We remove the old token from storage to migrate upwards. This is safe
+            // to do because even if the user switches to /app when this is on /develop
+            // they'll at worst register for a new token.
+            window.localStorage.removeItem("mx_scalar_token"); // no-op when not present
+        }
+    }
+
+    _readTokenFromStore() {
+        let token = window.localStorage.getItem("mx_scalar_token_at_" + this.apiUrl);
+        if (!token && this.isDefaultManager) {
+            token = window.localStorage.getItem("mx_scalar_token");
+        }
+        return token;
+    }
+
+    _readToken() {
+        if (this.scalarToken) return this.scalarToken;
+        return this._readTokenFromStore();
     }
 
     setTermsInteractionCallback(callback) {
@@ -61,8 +84,7 @@ class ScalarAuthClient {
 
     // Returns a promise that resolves to a scalar_token string
     getScalarToken() {
-        let token = this.scalarToken;
-        if (!token) token = window.localStorage.getItem("mx_scalar_token");
+        const token = this._readToken();
 
         if (!token) {
             return this.registerForToken();
@@ -78,7 +100,7 @@ class ScalarAuthClient {
     }
 
     _getAccountName(token) {
-        const url = SdkConfig.get().integrations_rest_url + "/account";
+        const url = this.apiUrl + "/account";
 
         return new Promise(function(resolve, reject) {
             request({
@@ -111,7 +133,7 @@ class ScalarAuthClient {
             return token;
         }).catch((e) => {
             if (e instanceof TermsNotSignedError) {
-                console.log("Integrations manager requires new terms to be agreed to");
+                console.log("Integration manager requires new terms to be agreed to");
                 // The terms endpoints are new and so live on standard _matrix prefixes,
                 // but IM rest urls are currently configured with paths, so remove the
                 // path from the base URL before passing it to the js-sdk
@@ -126,7 +148,7 @@ class ScalarAuthClient {
                 // Once we've fully transitioned to _matrix URLs, we can give people
                 // a grace period to update their configs, then use the rest url as
                 // a regular base url.
-                const parsedImRestUrl = url.parse(SdkConfig.get().integrations_rest_url);
+                const parsedImRestUrl = url.parse(this.apiUrl);
                 parsedImRestUrl.path = '';
                 parsedImRestUrl.pathname = '';
                 return startTermsFlow([new Service(
@@ -147,17 +169,18 @@ class ScalarAuthClient {
         return MatrixClientPeg.get().getOpenIdToken().then((tokenObject) => {
             // Now we can send that to scalar and exchange it for a scalar token
             return this.exchangeForScalarToken(tokenObject);
-        }).then((tokenObject) => {
+        }).then((token) => {
             // Validate it (this mostly checks to see if the IM needs us to agree to some terms)
-            return this._checkToken(tokenObject);
-        }).then((tokenObject) => {
-            window.localStorage.setItem("mx_scalar_token", tokenObject);
-            return tokenObject;
+            return this._checkToken(token);
+        }).then((token) => {
+            this.scalarToken = token;
+            this._writeTokenToStore();
+            return token;
         });
     }
 
     exchangeForScalarToken(openidTokenObject) {
-        const scalarRestUrl = SdkConfig.get().integrations_rest_url;
+        const scalarRestUrl = this.apiUrl;
 
         return new Promise(function(resolve, reject) {
             request({
@@ -181,7 +204,7 @@ class ScalarAuthClient {
     }
 
     getScalarPageTitle(url) {
-        let scalarPageLookupUrl = SdkConfig.get().integrations_rest_url + '/widgets/title_lookup';
+        let scalarPageLookupUrl = this.apiUrl + '/widgets/title_lookup';
         scalarPageLookupUrl = this.getStarterLink(scalarPageLookupUrl);
         scalarPageLookupUrl += '&curl=' + encodeURIComponent(url);
 
@@ -217,7 +240,7 @@ class ScalarAuthClient {
      * @return {Promise}           Resolves on completion
      */
     disableWidgetAssets(widgetType, widgetId) {
-        let url = SdkConfig.get().integrations_rest_url + '/widgets/set_assets_state';
+        let url = this.apiUrl + '/widgets/set_assets_state';
         url = this.getStarterLink(url);
         return new Promise((resolve, reject) => {
             request({
@@ -246,7 +269,7 @@ class ScalarAuthClient {
     getScalarInterfaceUrlForRoom(room, screen, id) {
         const roomId = room.roomId;
         const roomName = room.name;
-        let url = SdkConfig.get().integrations_ui_url;
+        let url = this.uiUrl;
         url += "?scalar_token=" + encodeURIComponent(this.scalarToken);
         url += "&room_id=" + encodeURIComponent(roomId);
         url += "&room_name=" + encodeURIComponent(roomName);
@@ -264,5 +287,3 @@ class ScalarAuthClient {
         return starterLinkUrl + "?scalar_token=" + encodeURIComponent(this.scalarToken);
     }
 }
-
-module.exports = ScalarAuthClient;
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
@@ -22,7 +22,6 @@ import qs from 'querystring';
 import React from 'react';
 import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import ScalarAuthClient from '../../../ScalarAuthClient';
 import WidgetMessaging from '../../../WidgetMessaging';
 import AccessibleButton from './AccessibleButton';
 import Modal from '../../../Modal';
@@ -35,7 +34,7 @@ import WidgetUtils from '../../../utils/WidgetUtils';
 import dis from '../../../dispatcher';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import classNames from 'classnames';
-import { showIntegrationsManager } from '../../../integrations/integrations';
+import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
 const ENABLE_REACT_PERF = false;
@@ -178,9 +177,22 @@ export default class AppTile extends React.Component {
             return;
         }
 
+        const managers = IntegrationManagers.sharedInstance();
+        if (!managers.hasManager()) {
+            console.warn("No integration manager - not setting scalar token", url);
+            this.setState({
+                error: null,
+                widgetUrl: this._addWurlParams(this.props.url),
+                initialising: false,
+            });
+            return;
+        }
+
+        // TODO: Pick the right manager for the widget
+
         // Fetch the token before loading the iframe as we need it to mangle the URL
         if (!this._scalarClient) {
-            this._scalarClient = new ScalarAuthClient();
+            this._scalarClient = managers.getPrimaryManager().getScalarClient();
         }
         this._scalarClient.getScalarToken().done((token) => {
             // Append scalar_token as a query param if not already present
@@ -189,7 +201,7 @@ export default class AppTile extends React.Component {
             const params = qs.parse(u.query);
             if (!params.scalar_token) {
                 params.scalar_token = encodeURIComponent(token);
-                // u.search must be set to undefined, so that u.format() uses query paramerters - https://nodejs.org/docs/latest/api/url.html#url_url_format_url_options
+                // u.search must be set to undefined, so that u.format() uses query parameters - https://nodejs.org/docs/latest/api/url.html#url_url_format_url_options
                 u.search = undefined;
                 u.query = params;
             }
@@ -251,11 +263,12 @@ export default class AppTile extends React.Component {
         if (this.props.onEditClick) {
             this.props.onEditClick();
         } else {
-            showIntegrationsManager({
-                room: this.props.room,
-                screen: 'type_' + this.props.type,
-                integrationId: this.props.id,
-            });
+            // TODO: Open the right manager for the widget
+            IntegrationManagers.sharedInstance().getPrimaryManager().open(
+                this.props.room,
+                this.props.type,
+                this.props.id,
+            );
         }
     }
 

diff --git a/src/components/views/elements/ManageIntegsButton.js b/src/components/views/elements/ManageIntegsButton.js
@@ -18,9 +18,8 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import sdk from '../../../index';
-import ScalarAuthClient from '../../../ScalarAuthClient';
 import { _t } from '../../../languageHandler';
-import { showIntegrationsManager } from '../../../integrations/integrations';
+import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 
 export default class ManageIntegsButton extends React.Component {
     constructor(props) {
@@ -30,12 +29,17 @@ export default class ManageIntegsButton extends React.Component {
     onManageIntegrations = (ev) => {
         ev.preventDefault();
 
-        showIntegrationsManager({ room: this.props.room });
+        const managers = IntegrationManagers.sharedInstance();
+        if (!managers.hasManager()) {
+            managers.openNoManagerDialog();
+        } else {
+            managers.getPrimaryManager().open(this.props.room);
+        }
     };
 
     render() {
         let integrationsButton = <div />;
-        if (ScalarAuthClient.isPossible()) {
+        if (IntegrationManagers.sharedInstance().hasManager()) {
             const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
             integrationsButton = (
                 <AccessibleButton

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
@@ -25,7 +25,6 @@ import highlight from 'highlight.js';
 import * as HtmlUtils from '../../../HtmlUtils';
 import {formatDate} from '../../../DateUtils';
 import sdk from '../../../index';
-import ScalarAuthClient from '../../../ScalarAuthClient';
 import Modal from '../../../Modal';
 import SdkConfig from '../../../SdkConfig';
 import dis from '../../../dispatcher';
@@ -35,6 +34,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import ReplyThread from "../elements/ReplyThread";
 import {host as matrixtoHost} from '../../../matrix-to';
 import {pillifyLinks} from '../../../utils/pillify';
+import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 
 module.exports = React.createClass({
     displayName: 'TextualBody',
@@ -318,12 +318,19 @@ module.exports = React.createClass({
         // which requires the user to click through and THEN we can open the link in a new tab because
         // the window.open command occurs in the same stack frame as the onClick callback.
 
+        const managers = IntegrationManagers.sharedInstance();
+        if (!managers.hasManager()) {
+            managers.openNoManagerDialog();
+            return;
+        }
+
         // Go fetch a scalar token
-        const scalarClient = new ScalarAuthClient();
+        const integrationManager = managers.getPrimaryManager();
+        const scalarClient = integrationManager.getScalarClient();
         scalarClient.connect().then(() => {
             const completeUrl = scalarClient.getStarterLink(starterLink);
             const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-            const integrationsUrl = SdkConfig.get().integrations_ui_url;
+            const integrationsUrl = integrationManager.uiUrl;
             Modal.createTrackedDialog('Add an integration', '', QuestionDialog, {
                 title: _t("Add an Integration"),
                 description:

diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js
@@ -29,7 +29,7 @@ import { _t } from '../../../languageHandler';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import WidgetEchoStore from "../../../stores/WidgetEchoStore";
 import AccessibleButton from '../elements/AccessibleButton';
-import { showIntegrationsManager } from '../../../integrations/integrations';
+import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 
 // The maximum number of widgets that can be added in a room
 const MAX_WIDGETS = 2;
@@ -128,10 +128,7 @@ module.exports = React.createClass({
     },
 
     _launchManageIntegrations: function() {
-        showIntegrationsManager({
-            room: this.props.room,
-            screen: 'add_integ',
-        });
+        IntegrationManagers.sharedInstance().getPrimaryManager().open(this.props.room, 'add_integ');
     },
 
     onClickAddWidget: function(e) {