From 61a0f1ef6721ae353d1a05c1cb445b0597ec1432 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 19 Sep 2017 11:57:23 +0100
Subject: [PATCH] Fix ugly integration button, use hover to show error

This simplifies the implementation of the button but also adjusts the appeareance such that a warning triangle appears in the top-right of button if an error has occured. The error popup will now appear when hovering over the button (with related CSS).
---
 .../views/elements/ManageIntegsButton.js      | 54 ++++++++-----------
 1 file changed, 22 insertions(+), 32 deletions(-)

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 = <div />;
-        let integrationsError;
+        let integrationsWarningTriangle = <div />;
+        let integrationsErrorPopup = <div />;
         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 = <img src="img/warning.svg" title={_t('Integrations Error')} width="17"/>;
+                // Popup shown when hovering over integrationsButton_error (via CSS)
+                integrationsErrorPopup = (
                     <span className="mx_RoomSettings_integrationsButton_errorPopup">
                         { _t('Could not connect to the integration server') }
                     </span>
                 );
             }
 
-            if (this.scalarClient.hasCredentials()) {
-                integrationsButton = (
-                    <AccessibleButton className="mx_RoomHeader_button" onClick={this.onManageIntegrations} title={ _t('Manage Integrations') }>
-                        <TintableSvg src="img/icons-apps.svg" width="35" height="35"/>
-                    </AccessibleButton>
-                );
-            } else if (this.state.scalarError) {
-                integrationsButton = (
-                    <div className="mx_RoomSettings_integrationsButton_error" onClick={ this.onShowIntegrationsError }>
-                        <img src="img/warning.svg" title={_t('Integrations Error')} width="17"/>
-                        { integrationsError }
-                    </div>
-                );
-            } else {
-                integrationsButton = (
-                    <AccessibleButton className="mx_RoomHeader_button" onClick={this.onManageIntegrations} title={ _t('Manage Integrations') }>
-                        <TintableSvg src="img/icons-apps.svg" width="35" height="35"/>
-                    </AccessibleButton>
-                );
-            }
+            integrationsButton = (
+                <AccessibleButton className={integrationsButtonClasses} onClick={this.onManageIntegrations} title={ _t('Manage Integrations') }>
+                    <TintableSvg src="img/icons-apps.svg" width="35" height="35"/>
+                    { integrationsWarningTriangle }
+                    { integrationsErrorPopup }
+                </AccessibleButton>
+            );
         }
 
         return integrationsButton;