From a449588c1cd225548a006bc0aaf8a41c6f635486 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Tue, 20 Jun 2017 10:54:41 +0100 Subject: [PATCH] Replace add app dialog with scalar interface --- src/components/views/dialogs/AddAppDialog.js | 91 ---------- src/components/views/rooms/AppsDrawer.js | 180 +++++++++++-------- 2 files changed, 109 insertions(+), 162 deletions(-) delete mode 100644 src/components/views/dialogs/AddAppDialog.js diff --git a/src/components/views/dialogs/AddAppDialog.js b/src/components/views/dialogs/AddAppDialog.js deleted file mode 100644 index 35372009fc..0000000000 --- a/src/components/views/dialogs/AddAppDialog.js +++ /dev/null @@ -1,91 +0,0 @@ -/* -Copyright 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 sdk from '../../../index'; -import AppIconTile from '../elements/AppIconTile'; -import ModularWidgets from '../../structures/ModularWidgets'; - -/** - * Prompt the user for address of iframe widget - * - * On success, `onFinished(true, newAppWidget)` is called. - */ -export default React.createClass({ - displayName: 'AddAppDialog', - propTypes: { - onFinished: React.PropTypes.func.isRequired, - }, - - getInitialState: function() { - return { - value: "", - }; - }, - - componentDidMount: function() { - this.refs.input_value.select(); - }, - - onValueChange: function(ev) { - this.setState({ value: ev.target.value}); - }, - - onFormSubmit: function(ev) { - ev.preventDefault(); - this.props.onFinished(true, 'custom', this.state.value); - return false; - }, - - onTileClick: function(value) { - this.props.onFinished(true, value, null); - }, - - render: function() { - const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); - const appCards = ModularWidgets.widgetTypes.map((widgetType, index) => - , - ); - - return ( - -
- {appCards} -
-
-
Or enter the URL of the widget to add.
- -
- -
-
-
- - ); - }, -}); diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js index 6daa4d98cf..3a9b456c99 100644 --- a/src/components/views/rooms/AppsDrawer.js +++ b/src/components/views/rooms/AppsDrawer.js @@ -16,12 +16,14 @@ limitations under the License. 'use strict'; -const React = require('react'); -const MatrixClientPeg = require('../../../MatrixClientPeg'); -const AddAppDialog = require('../dialogs/AddAppDialog'); -const AppTile = require('../elements/AppTile'); -const Modal = require("../../../Modal"); -const dis = require('../../../dispatcher'); +import React from 'react'; +import MatrixClientPeg from '../../../MatrixClientPeg'; +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'; module.exports = React.createClass({ displayName: 'AppsDrawer', @@ -35,8 +37,20 @@ module.exports = React.createClass({ }, componentDidMount: function() { - if (this.state.apps && this.state.apps.length < 1) { - this.onClickAddWidget(); + this.scalarClient = null; + const appsDrawer = this; + if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) { + this.scalarClient = new ScalarAuthClient(); + this.scalarClient.connect().done(() => { + this.forceUpdate(); + if (appsDrawer.state.apps && appsDrawer.state.apps.length < 1) { + appsDrawer.onClickAddWidget(); + } + }, (err) => { + this.setState({ + scalar_error: err, + }); + }); } }, @@ -117,72 +131,96 @@ module.exports = React.createClass({ }); }, - onClickAddWidget: function() { - Modal.createDialog(AddAppDialog, { - onFinished: (proceed, type, value) => { - if (!proceed || !type) return; - if (type === 'custom' && !value) return; + onClickAddWidget: function(e) { + // Modal.createDialog(AddAppDialog, { + // onFinished: (proceed, type, value) => { + // if (!proceed || !type) return; + // if (type === 'custom' && !value) return; + // + // const appsStateEvents = this.props.room.currentState.getStateEvents('im.vector.modular.widgets', ''); + // let appsStateEvent = {}; + // if (appsStateEvents) { + // appsStateEvent = appsStateEvents.getContent(); + // } + // + // if (appsStateEvent[type]) { + // return; + // } + // + // switch (type) { + // case 'etherpad': + // appsStateEvent.etherpad = { + // type: type, + // url: 'http://localhost:8000/etherpad.html', + // }; + // break; + // case 'grafana': + // appsStateEvent.grafana = { + // type: type, + // url: 'http://localhost:8000/grafana.html', + // }; + // break; + // case 'jitsi': + // appsStateEvent.videoConf = { + // type: type, + // url: 'http://localhost:8000/jitsi.html', + // data: { + // confId: this.props.room.roomId.replace(/[^A-Za-z0-9]/g, '_') + Date.now(), + // }, + // }; + // break; + // case 'vrdemo': + // appsStateEvent.vrDemo = { + // type: type, + // url: 'http://localhost:8000/vrdemo.html', + // data: { + // roomAlias: '#vrvc' + this.props.room.roomId.replace(/[^A-Za-z0-9]/g, '_') + Date.now(), + // }, + // }; + // break; + // case 'custom': + // appsStateEvent.custom = { + // type: type, + // url: value, + // }; + // break; + // default: + // console.warn('Unsupported app type:', type); + // return; + // } + // + // MatrixClientPeg.get().sendStateEvent( + // this.props.room.roomId, + // 'im.vector.modular.widgets', + // appsStateEvent, + // '', + // ); + // }, + // }); - const appsStateEvents = this.props.room.currentState.getStateEvents('im.vector.modular.widgets', ''); - let appsStateEvent = {}; - if (appsStateEvents) { - appsStateEvent = appsStateEvents.getContent(); + if (e) { + e.preventDefault(); + } + + const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager"); + console.warn("scalarClient: ", this.scalarClient); + console.warn("hasCredentials: ", this.scalarClient.hasCredentials()); + console.warn("roomId: ", this.props.room.roomId); + console.warn("Scalar interface: ", this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId)); + const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ? + this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId) : + null; + console.warn("src: ", src); + Modal.createDialog(IntegrationsManager, { + src: src, + onFinished: ()=>{ + if (this._calcSavePromises().length === 0) { + if (e) { + this.props.onCancelClick(e); + } } - - if (appsStateEvent[type]) { - return; - } - - switch (type) { - case 'etherpad': - appsStateEvent.etherpad = { - type: type, - url: 'http://localhost:8000/etherpad.html', - }; - break; - case 'grafana': - appsStateEvent.grafana = { - type: type, - url: 'http://localhost:8000/grafana.html', - }; - break; - case 'jitsi': - appsStateEvent.videoConf = { - type: type, - url: 'http://localhost:8000/jitsi.html', - data: { - confId: this.props.room.roomId.replace(/[^A-Za-z0-9]/g, '_') + Date.now(), - }, - }; - break; - case 'vrdemo': - appsStateEvent.vrDemo = { - type: type, - url: 'http://localhost:8000/vrdemo.html', - data: { - roomAlias: '#vrvc' + this.props.room.roomId.replace(/[^A-Za-z0-9]/g, '_') + Date.now(), - }, - }; - break; - case 'custom': - appsStateEvent.custom = { - type: type, - url: value, - }; - break; - default: - console.warn('Unsupported app type:', type); - return; - } - - MatrixClientPeg.get().sendStateEvent( - this.props.room.roomId, - 'im.vector.modular.widgets', - appsStateEvent, - '', - ); }, - }); + }, "mx_IntegrationsManager"); }, render: function() {