Add redesign feedback dialog + button in tag panel

src/components/structures/TagPanel.js

@@ -23,6 +23,7 @@ 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';
@@ -47,6 +48,8 @@ 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;
@@ -67,6 +70,9 @@ const TagPanel = React.createClass({
         if (this._filterStoreToken) {
             this._filterStoreToken.remove();
         }
+        if (this._dispatcherRef) {
+            dis.unregister(this._dispatcherRef);
+        }
     },
 
     _onGroupMyMembership() {
@@ -100,13 +106,21 @@ 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
@@ -162,7 +176,10 @@ const TagPanel = React.createClass({
             </GeminiScrollbarWrapper>
             <div className="mx_TagPanel_divider" />
             <div className="mx_TagPanel_groupsButton">
-                <GroupsButton tooltip={true} />
+                <GroupsButton />
+                <ActionButton
+                    className="mx_TagPanel_report" action="show_redesign_feedback_dialog"
+                    label={_t("Report bugs & give feedback")} tooltip={true} />
             </div>
         </div>;
     },

src/components/views/dialogs/RedesignFeedbackDialog.js

@@ -0,0 +1,52 @@
+/*
+Copyright 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 QuestionDialog from './QuestionDialog';
+import { _t } from '../../../languageHandler';
+
+export default (props) => {
+
+    const existingIssuesUrl = "https://github.com/vector-im/riot-web/issues" +
+        "?q=is%3Aopen+is%3Aissue+label%3Aredesign+sort%3Areactions-%2B1-desc";
+    const newIssueUrl = "https://github.com/vector-im/riot-web/issues/new" +
+        "?assignees=&labels=redesign&template=redesign_issue.md&title=";
+
+    const description1 =
+        _t("Thanks for testing the Riot Redesign. " +
+            "If you run into any bugs or visual issues, " +
+            "please let us know on GitHub.");
+    const description2 = _t("To help avoid duplicate issues, " +
+        "please <existingIssuesLink>view existing issues</existingIssuesLink> " +
+        "first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> " +
+        "if you can't find it.", {},
+        {
+            existingIssuesLink: (sub) => {
+                return <a target="_blank" rel="noreferrer noopener" href={existingIssuesUrl}>{ sub }</a>;
+            },
+            newIssueLink: (sub) => {
+                return <a target="_blank" rel="noreferrer noopener" href={newIssueUrl}>{ sub }</a>;
+            },
+        });
+
+    return (<QuestionDialog
+        hasCancelButton={false}
+        title={_t("Report bugs & give feedback")}
+        description={<div><p>{description1}</p><p>{description2}</p></div>}
+        button={_t("Go back")}
+        onFinished={props.onFinished}
+    />);
+};

src/components/views/elements/ActionButton.js

@@ -31,6 +31,7 @@ export default React.createClass({
         mouseOverAction: PropTypes.string,
         label: PropTypes.string.isRequired,
         iconPath: PropTypes.string,
+        className: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -76,8 +77,13 @@ export default React.createClass({
                 (<TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />) :
                 undefined;
 
+        const classNames = ["mx_RoleButton"];
+        if (this.props.className) {
+            classNames.push(this.props.className);
+        }
+
         return (
-            <AccessibleButton className="mx_RoleButton"
+            <AccessibleButton className={classNames.join(" ")}
                 onClick={this._onClick}
                 onMouseEnter={this._onMouseEnter}
                 onMouseLeave={this._onMouseLeave}

src/components/views/elements/GroupsButton.js

@@ -22,17 +22,16 @@ import { _t } from '../../../languageHandler';
 const GroupsButton = function(props) {
     const ActionButton = sdk.getComponent('elements.ActionButton');
     return (
-        <ActionButton action="view_my_groups"
+        <ActionButton className="mx_GroupsButton" action="view_my_groups"
             label={_t("Communities")}
             size={props.size}
-            tooltip={props.tooltip}
+            tooltip={true}
         />
     );
 };
 
 GroupsButton.propTypes = {
     size: PropTypes.string,
-    tooltip: PropTypes.bool,
 };
 
 export default GroupsButton;

src/i18n/strings/en_EN.json

@@ -1348,5 +1348,9 @@
     "Import": "Import",
     "Failed to set direct chat tag": "Failed to set direct chat tag",
     "Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room",
-    "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room"
+    "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room",
+    "Report bugs & give feedback": "Report bugs & give feedback",
+    "Thanks for testing the Riot Redesign. If you run into any bugs or visual issues, please let us know on GitHub.": "Thanks for testing the Riot Redesign. If you run into any bugs or visual issues, please let us know on GitHub.",
+    "To help avoid duplicate issues, please <existingIssuesLink>view existing issues</existingIssuesLink> first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> if you can't find it.": "To help avoid duplicate issues, please <existingIssuesLink>view existing issues</existingIssuesLink> first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> if you can't find it.",
+    "Go back": "Go back"
 }