diff --git a/src/components/views/elements/ManageIntegsButton.js b/src/components/views/elements/ManageIntegsButton.js index 4434d1368d..68f67cfad5 100644 --- a/src/components/views/elements/ManageIntegsButton.js +++ b/src/components/views/elements/ManageIntegsButton.js @@ -17,6 +17,7 @@ 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'; @@ -31,11 +32,9 @@ export default class ManageIntegsButton extends React.Component { this.state = { scalarError: null, - showIntegrationsError: false, }; this.onManageIntegrations = this.onManageIntegrations.bind(this); - this.onShowIntegrationsError = this.onShowIntegrationsError.bind(this); } componentWillMount() { @@ -59,6 +58,9 @@ export default class ManageIntegsButton extends React.Component { onManageIntegrations(ev) { ev.preventDefault(); + if (this.state.scalarError && !this.scalarClient.hasCredentials()) { + return; + } const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager"); Modal.createDialog(IntegrationsManager, { src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ? @@ -67,45 +69,33 @@ export default class ManageIntegsButton extends React.Component { }, "mx_IntegrationsManager"); } - onShowIntegrationsError(ev) { - ev.preventDefault(); - this.setState({ - showIntegrationsError: !this.state.showIntegrationsError, - }); - } - render() { let integrationsButton =
; - let integrationsError; + let integrationsWarningTriangle =
; + let integrationsErrorPopup =
; if (this.scalarClient !== null) { - if (this.state.showIntegrationsError && this.state.scalarError) { - integrationsError = ( + const integrationsButtonClasses = classNames({ + mx_RoomHeader_button: true, + mx_RoomSettings_integrationsButton_error: !!this.state.scalarError, + }); + + if (this.state.scalarError && !this.scalarClient.hasCredentials()) { + integrationsWarningTriangle = ; + // Popup shown when hovering over integrationsButton_error (via CSS) + integrationsErrorPopup = ( { _t('Could not connect to the integration server') } ); } - if (this.scalarClient.hasCredentials()) { - integrationsButton = ( - - - - ); - } else if (this.state.scalarError) { - integrationsButton = ( -
- - { integrationsError } -
- ); - } else { - integrationsButton = ( - - - - ); - } + integrationsButton = ( + + + { integrationsWarningTriangle } + { integrationsErrorPopup } + + ); } return integrationsButton;