From 014e4a2ccf2bf1010e694020563f323613600c6f Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Fri, 22 Feb 2019 11:31:17 -0700
Subject: [PATCH] Remove DragDropContext from FlairSettings

This also fixes a technical bug where one could drag a community from the settings to the LLP
---
 .../views/groups/GroupPublicityToggle.js      |  4 +-
 src/components/views/groups/GroupTile.js      | 92 ++++++++++---------
 .../tabs/user/FlairUserSettingsTab.js         |  5 +-
 3 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/src/components/views/groups/GroupPublicityToggle.js b/src/components/views/groups/GroupPublicityToggle.js
index e27bf9a9d5..98fa598e20 100644
--- a/src/components/views/groups/GroupPublicityToggle.js
+++ b/src/components/views/groups/GroupPublicityToggle.js
@@ -68,7 +68,9 @@ export default React.createClass({
     render() {
         const GroupTile = sdk.getComponent('groups.GroupTile');
         return <div className="mx_GroupPublicity_toggle">
-            <GroupTile groupId={this.props.groupId} showDescription={false} avatarHeight={40} />
+            <GroupTile groupId={this.props.groupId} showDescription={false}
+                       avatarHeight={40} draggable={false}
+            />
             <ToggleSwitch checked={this.state.isGroupPublicised}
                           disabled={!this.state.ready || this.state.busy}
                           onChange={this._onPublicityToggle} />
diff --git a/src/components/views/groups/GroupTile.js b/src/components/views/groups/GroupTile.js
index 509c209baa..18ef5a5637 100644
--- a/src/components/views/groups/GroupTile.js
+++ b/src/components/views/groups/GroupTile.js
@@ -33,6 +33,7 @@ const GroupTile = React.createClass({
         showDescription: PropTypes.bool,
         // Height of the group avatar in pixels
         avatarHeight: PropTypes.number,
+        draggable: PropTypes.bool,
     },
 
     contextTypes: {
@@ -49,6 +50,7 @@ const GroupTile = React.createClass({
         return {
             showDescription: true,
             avatarHeight: 50,
+            draggable: true,
         };
     },
 
@@ -78,54 +80,54 @@ const GroupTile = React.createClass({
             <div className="mx_GroupTile_desc">{ profile.shortDescription }</div> :
             <div />;
         const httpUrl = profile.avatarUrl ? this.context.matrixClient.mxcUrlToHttp(
-            profile.avatarUrl, avatarHeight, avatarHeight, "crop",
-        ) : null;
+            profile.avatarUrl, avatarHeight, avatarHeight, "crop") : null;
+
+        let avatarElement = (
+            <div className="mx_GroupTile_avatar">
+                <BaseAvatar
+                    name={name}
+                    idName={this.props.groupId}
+                    url={httpUrl}
+                    width={avatarHeight}
+                    height={avatarHeight} />
+            </div>
+        );
+        if (this.props.draggable) {
+            const avatarClone = avatarElement;
+            avatarElement = (
+                <Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
+                    { (droppableProvided, droppableSnapshot) => (
+                        <div ref={droppableProvided.innerRef}>
+                            <Draggable
+                                key={"GroupTile " + this.props.groupId}
+                                draggableId={"GroupTile " + this.props.groupId}
+                                index={this.props.groupId}
+                                type="draggable-TagTile"
+                            >
+                                { (provided, snapshot) => (
+                                    <div>
+                                        <div
+                                            ref={provided.innerRef}
+                                            {...provided.draggableProps}
+                                            {...provided.dragHandleProps}
+                                        >
+                                            {avatarClone}
+                                        </div>
+                                        { /* Instead of a blank placeholder, use a copy of the avatar itself. */ }
+                                        { provided.placeholder ? avatarClone : <div /> }
+                                    </div>
+                                ) }
+                            </Draggable>
+                        </div>
+                    ) }
+                </Droppable>
+            );
+        }
+
         // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
         // instead of onClick. Otherwise we experience https://github.com/vector-im/riot-web/issues/6156
         return <AccessibleButton className="mx_GroupTile" onMouseDown={this.onMouseDown} onClick={nop}>
-            <Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
-                { (droppableProvided, droppableSnapshot) => (
-                    <div ref={droppableProvided.innerRef}>
-                        <Draggable
-                            key={"GroupTile " + this.props.groupId}
-                            draggableId={"GroupTile " + this.props.groupId}
-                            index={this.props.groupId}
-                            type="draggable-TagTile"
-                        >
-                            { (provided, snapshot) => (
-                                <div>
-                                    <div
-                                        ref={provided.innerRef}
-                                        {...provided.draggableProps}
-                                        {...provided.dragHandleProps}
-                                    >
-                                        <div className="mx_GroupTile_avatar">
-                                            <BaseAvatar
-                                                name={name}
-                                                idName={this.props.groupId}
-                                                url={httpUrl}
-                                                width={avatarHeight}
-                                                height={avatarHeight} />
-                                        </div>
-                                    </div>
-                                    { /* Instead of a blank placeholder, use a copy of the avatar itself. */ }
-                                    { provided.placeholder ?
-                                        <div className="mx_GroupTile_avatar">
-                                            <BaseAvatar
-                                                name={name}
-                                                idName={this.props.groupId}
-                                                url={httpUrl}
-                                                width={avatarHeight}
-                                                height={avatarHeight} />
-                                        </div> :
-                                        <div />
-                                    }
-                                </div>
-                            ) }
-                        </Draggable>
-                    </div>
-                ) }
-            </Droppable>
+            { avatarElement }
             <div className="mx_GroupTile_profile">
                 <div className="mx_GroupTile_name">{ name }</div>
                 { descElement }
diff --git a/src/components/views/settings/tabs/user/FlairUserSettingsTab.js b/src/components/views/settings/tabs/user/FlairUserSettingsTab.js
index 0daa20b8b3..0063a9a981 100644
--- a/src/components/views/settings/tabs/user/FlairUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/FlairUserSettingsTab.js
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import {_t} from "../../../../../languageHandler";
-import {DragDropContext} from "react-beautiful-dnd";
 import GroupUserSettings from "../../../groups/GroupUserSettings";
 import MatrixClientPeg from "../../../../../MatrixClientPeg";
 import PropTypes from "prop-types";
@@ -42,9 +41,7 @@ export default class FlairUserSettingsTab extends React.Component {
             <div className="mx_SettingsTab">
                 <span className="mx_SettingsTab_heading">{_t("Flair")}</span>
                 <div className="mx_SettingsTab_section">
-                    <DragDropContext>
-                        <GroupUserSettings />
-                    </DragDropContext>
+                    <GroupUserSettings />
                 </div>
             </div>
         );