From 5274cf59a0ed8fb8c03bb728b7c8045b9dce85c6 Mon Sep 17 00:00:00 2001
From: Kegsay <kegsay@gmail.com>
Date: Fri, 14 Jul 2017 11:17:59 +0100
Subject: [PATCH] Hook up the edit widget button (#1218)

* Hook up the edit widget button

* Review comments
---
 src/ScalarMessaging.js                   |  2 +-
 src/components/views/elements/AppTile.js | 24 ++++++++++++++++++------
 src/components/views/rooms/AppsDrawer.js |  1 +
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/ScalarMessaging.js b/src/ScalarMessaging.js
index 88a78595d6..d14d439d66 100644
--- a/src/ScalarMessaging.js
+++ b/src/ScalarMessaging.js
@@ -491,7 +491,7 @@ function canSendEvent(event, roomId) {
     }
 
     if (!canSend) {
-        sendError(event, _t('You do not have permission in this room.'));
+        sendError(event, _t('You do not have permission to do that in this room.'));
         return;
     }
 
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 3c3f01c1cd..effe50643c 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -21,7 +21,9 @@ import React from 'react';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import ScalarAuthClient from '../../../ScalarAuthClient';
 import SdkConfig from '../../../SdkConfig';
+import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
 
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
 
@@ -33,6 +35,7 @@ export default React.createClass({
         url: React.PropTypes.string.isRequired,
         name: React.PropTypes.string.isRequired,
         room: React.PropTypes.object.isRequired,
+        type: React.PropTypes.string.isRequired,
     },
 
     getDefaultProps: function() {
@@ -86,8 +89,13 @@ export default React.createClass({
         });
     },
 
-    _onEditClick: function() {
-        console.log("Edit widget %s", this.props.id);
+    _onEditClick: function(e) {
+        console.log("Edit widget ID ", this.props.id);
+        const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
+        const src = this._scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId, 'type_' + this.props.type);
+        Modal.createDialog(IntegrationsManager, {
+            src: src,
+        }, "mx_IntegrationsManager");
     },
 
     _onDeleteClick: function() {
@@ -120,10 +128,10 @@ export default React.createClass({
                 <div> Loading... </div>
             );
         } else {
-            // Note that there is advice saying allow-scripts shouldn;t be used with allow-same-origin
+            // Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin
             // because that would allow the iframe to prgramatically remove the sandbox attribute, but
             // this would only be for content hosted on the same origin as the riot client: anything
-            // hosted on the same origin as the client will get the same access access as if you clicked
+            // hosted on the same origin as the client will get the same access as if you clicked
             // a link to it.
             const sandboxFlags = "allow-forms allow-popups allow-popups-to-escape-sandbox "+
                 "allow-same-origin allow-scripts";
@@ -140,18 +148,22 @@ export default React.createClass({
                 </div>
             );
         }
+
+        // editing is done in scalar
+        const showEditButton = Boolean(this._scalarClient);
+
         return (
             <div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}>
                 <div className="mx_AppTileMenuBar">
                     {this.formatAppTileName()}
                     <span className="mx_AppTileMenuBarWidgets">
                         {/* Edit widget */}
-                        {/* <img
+                        {showEditButton && <img
                             src="img/edit.svg"
                             className="mx_filterFlipColor mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
                             width="8" height="8" alt="Edit"
                             onClick={this._onEditClick}
-                        /> */}
+                        />}
 
                         {/* Delete widget */}
                         <img src="img/cancel.svg"
diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js
index c95a473db8..3b8acc3f40 100644
--- a/src/components/views/rooms/AppsDrawer.js
+++ b/src/components/views/rooms/AppsDrawer.js
@@ -169,6 +169,7 @@ module.exports = React.createClass({
                     id={app.id}
                     url={app.url}
                     name={app.name}
+                    type={app.type}
                     fullWidth={arr.length<2 ? true : false}
                     room={this.props.room}
                     userId={this.props.userId}