From 4bc25f12cb792fccd79d1598346c5c9d57ba2d10 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Wed, 9 Aug 2017 11:44:24 +0100 Subject: [PATCH] Move manage integrations button in to stand-alone component --- .../views/elements/ManageIntegsButton.js | 127 ++++++++++++++++++ src/components/views/rooms/RoomHeader.js | 87 +----------- 2 files changed, 132 insertions(+), 82 deletions(-) create mode 100644 src/components/views/elements/ManageIntegsButton.js diff --git a/src/components/views/elements/ManageIntegsButton.js b/src/components/views/elements/ManageIntegsButton.js new file mode 100644 index 0000000000..8d4c9d8b85 --- /dev/null +++ b/src/components/views/elements/ManageIntegsButton.js @@ -0,0 +1,127 @@ +/* +Copyright 2017 Vector Creations 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 PropTypes from 'prop-types'; +import sdk from '../../../index'; +import SdkConfig from '../../../SdkConfig'; +import ScalarAuthClient from '../../../ScalarAuthClient'; +import ScalarMessaging from '../../../ScalarMessaging'; +import Modal from "../../../Modal"; +import { _t } from '../../../languageHandler'; +import AccessibleButton from './AccessibleButton'; +import TintableSvg from './TintableSvg'; + +export default class ManageIntegsButton extends React.Component { + constructor(props) { + super(props); + + this.state = { + scalar_error: null, + showIntegrationsError: false, + }; + + this.onManageIntegrations = this.onManageIntegrations.bind(this); + this.onShowIntegrationsError = this.onShowIntegrationsError.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({ scalar_error: err}); + }); + } + } + + componentWillUnmount() { + ScalarMessaging.stopListening(); + } + + onManageIntegrations(ev) { + ev.preventDefault(); + const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager"); + Modal.createDialog(IntegrationsManager, { + src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ? + this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId) : + null, + onFinished: ()=>{ + if (this.props.onCancelClick) { + this.props.onCancelClick(ev); + } + }, + }, "mx_IntegrationsManager"); + } + + onShowIntegrationsError(ev) { + ev.preventDefault(); + this.setState({ + showIntegrationsError: !this.state.showIntegrationsError, + }); + } + + render() { + let integrationsButton; + let integrationsError; + if (this.scalarClient !== null) { + if (this.state.showIntegrationsError && this.state.scalar_error) { + console.error(this.state.scalar_error); + integrationsError = ( + + { _t('Could not connect to the integration server') } + + ); + } + + if (this.scalarClient.hasCredentials()) { + integrationsButton = ( + + + + ); + } else if (this.state.scalar_error) { + integrationsButton = ( +
+ + { integrationsError } +
+ ); + } else { + integrationsButton = ( + + + + ); + } + } + + return integrationsButton; + } +} + +ManageIntegsButton.propTypes = { + room: PropTypes.object.isRequired, + onCancelClick: PropTypes.func, +}; + +ManageIntegsButton.defaultProps = { + onCancelClick: function() {}, +}; diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index f26aa29d31..ed354017b2 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -29,10 +29,8 @@ import * as linkify from 'linkifyjs'; import linkifyElement from 'linkifyjs/element'; import linkifyMatrix from '../../../linkify-matrix'; import AccessibleButton from '../elements/AccessibleButton'; +import ManageIntegsButton from '../elements/ManageIntegsButton'; import {CancelButton} from './SimpleRoomHeader'; -import SdkConfig from '../../../SdkConfig'; -import ScalarAuthClient from '../../../ScalarAuthClient'; -import ScalarMessaging from '../../../ScalarMessaging'; linkifyMatrix(linkify); @@ -62,13 +60,6 @@ module.exports = React.createClass({ }; }, - getInitialState: function() { - return { - scalar_error: null, - showIntegrationsError: false, - }; - }, - componentDidMount: function() { const cli = MatrixClientPeg.get(); cli.on("RoomState.events", this._onRoomStateEvents); @@ -87,23 +78,7 @@ module.exports = React.createClass({ } }, - componentWillMount: function() { - 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({ - scalar_error: err, - }); - }); - } - }, - componentWillUnmount: function() { - ScalarMessaging.stopListening(); if (this.props.room) { this.props.room.removeListener("Room.name", this._onRoomNameChange); } @@ -113,28 +88,6 @@ module.exports = React.createClass({ } }, - onManageIntegrations(ev) { - ev.preventDefault(); - const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager"); - Modal.createDialog(IntegrationsManager, { - src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ? - this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId) : - null, - onFinished: ()=>{ - if (this.props.onCancelClick) { - this.props.onCancelClick(ev); - } - }, - }, "mx_IntegrationsManager"); - }, - - onShowIntegrationsError(ev) { - ev.preventDefault(); - this.setState({ - showIntegrationsError: !this.state.showIntegrationsError, - }); - }, - _onRoomStateEvents: function(event, state) { if (!this.props.room || event.getRoomId() !== this.props.room.roomId) { return; @@ -370,45 +323,15 @@ module.exports = React.createClass({ } let rightRow; - let integrationsButton; - let integrationsError; - if (this.scalarClient !== null) { - if (this.state.showIntegrationsError && this.state.scalar_error) { - console.error(this.state.scalar_error); - integrationsError = ( - - { _t('Could not connect to the integration server') } - - ); - } - - if (this.scalarClient.hasCredentials()) { - integrationsButton = ( - - - - ); - } else if (this.state.scalar_error) { - integrationsButton = ( -
- - { integrationsError } -
- ); - } else { - integrationsButton = ( - - - - ); - } - } if (!this.props.editing) { rightRow =
{ settingsButton } - { integrationsButton } + { forgetButton } { searchButton } { rightPanelButtons }