move help & communities button out of tag panel

so we can shove the custom tag buttons between them
in the next commit

src/components/structures/LeftPanel.js

@@ -24,7 +24,7 @@ import { KeyCode } from '../../Keyboard';
 import sdk from '../../index';
 import dis from '../../dispatcher';
 import VectorConferenceHandler from '../../VectorConferenceHandler';
-
+import TagPanelButtons from './TagPanelButtons';
 import SettingsStore from '../../settings/SettingsStore';
 
 
@@ -188,7 +188,13 @@ const LeftPanel = React.createClass({
         const CallPreview = sdk.getComponent('voip.CallPreview');
 
         const tagPanelEnabled = SettingsStore.getValue("TagPanel.enableTagPanel");
-        const tagPanel = tagPanelEnabled ? <TagPanel /> : <div />;
+        let tagPanelContainer;
+        if (tagPanelEnabled) {
+            tagPanelContainer = (<div className="mx_LeftPanel_tagPanelContainer">
+                <TagPanel />
+                <TagPanelButtons />
+            </div>);
+        }
 
         const containerClasses = classNames(
             "mx_LeftPanel_container", "mx_fadable",
@@ -206,7 +212,7 @@ const LeftPanel = React.createClass({
 
         return (
             <div className={containerClasses}>
-                { tagPanel }
+                { tagPanelContainer }
                 <aside className={"mx_LeftPanel dark-panel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
                     <TopLeftMenuButton collapsed={ this.props.collapsed } />
                     { searchBox }

src/components/structures/TagPanel.js

@@ -23,7 +23,6 @@ import GroupActions from '../../actions/GroupActions';
 
 import sdk from '../../index';
 import dis from '../../dispatcher';
-import Modal from '../../Modal';
 import { _t } from '../../languageHandler';
 
 import { Droppable } from 'react-beautiful-dnd';
@@ -48,8 +47,6 @@ const TagPanel = React.createClass({
         this.context.matrixClient.on("Group.myMembership", this._onGroupMyMembership);
         this.context.matrixClient.on("sync", this._onClientSync);
 
-        this._dispatcherRef = dis.register(this._onAction);
-
         this._tagOrderStoreToken = TagOrderStore.addListener(() => {
             if (this.unmounted) {
                 return;
@@ -70,9 +67,6 @@ const TagPanel = React.createClass({
         if (this._filterStoreToken) {
             this._filterStoreToken.remove();
         }
-        if (this._dispatcherRef) {
-            dis.unregister(this._dispatcherRef);
-        }
     },
 
     _onGroupMyMembership() {
@@ -106,21 +100,11 @@ const TagPanel = React.createClass({
         dis.dispatch({action: 'deselect_tags'});
     },
 
-    _onAction(payload) {
-        if (payload.action === "show_redesign_feedback_dialog") {
-            const RedesignFeedbackDialog =
-                sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
-            Modal.createDialog(RedesignFeedbackDialog);
-        }
-    },
-
     render() {
-        const GroupsButton = sdk.getComponent('elements.GroupsButton');
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
-        const ActionButton = sdk.getComponent("elements.ActionButton");
 
         const tags = this.state.orderedTags.map((tag, index) => {
             return <DNDTagTile
@@ -174,13 +158,6 @@ const TagPanel = React.createClass({
                     ) }
                 </Droppable>
             </GeminiScrollbarWrapper>
-            <div className="mx_TagPanel_divider" />
-            <div className="mx_TagPanel_groupsButton">
-                <GroupsButton />
-                <ActionButton
-                    className="mx_TagPanel_report" action="show_redesign_feedback_dialog"
-                    label={_t("Report bugs & give feedback")} tooltip={true} />
-            </div>
         </div>;
     },
 });

src/components/structures/TagPanelButtons.js

@@ -0,0 +1,58 @@
+/*
+Copyright 2017, 2018 New Vector 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 sdk from '../../index';
+import dis from '../../dispatcher';
+import Modal from '../../Modal';
+import { _t } from '../../languageHandler';
+
+const TagPanelButtons = React.createClass({
+    displayName: 'TagPanelButtons',
+
+
+    componentWillMount: function() {
+        this._dispatcherRef = dis.register(this._onAction);
+    },
+
+    componentWillUnmount() {
+        if (this._dispatcherRef) {
+            dis.unregister(this._dispatcherRef);
+            this._dispatcherRef = null;
+        }
+    },
+
+    _onAction(payload) {
+        if (payload.action === "show_redesign_feedback_dialog") {
+            const RedesignFeedbackDialog =
+                sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
+            Modal.createDialog(RedesignFeedbackDialog);
+        }
+    },
+
+    render() {
+        const GroupsButton = sdk.getComponent('elements.GroupsButton');
+        const ActionButton = sdk.getComponent("elements.ActionButton");
+
+        return (<div className="mx_TagPanelButtons">
+            <GroupsButton />
+            <ActionButton
+                className="mx_TagPanelButtons_report" action="show_redesign_feedback_dialog"
+                label={_t("Report bugs & give feedback")} tooltip={true} />
+        </div>);
+    },
+});
+export default TagPanelButtons;