From 37cb8abf13008362875f64fd853e5e17d9b83594 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 27 Apr 2018 15:19:08 +0100
Subject: [PATCH] Fix UX issues with bug report dialog

 * Make it use BaseDialog / DialogButtons (also gives it has a top-right 'x' &
   escape to cancel works)
 * Stop misusing the 'danger' CSS class on the buttons. There is nothing dangerous
   about submitting logs.
 * Continued campaign against 'Click here' links.

Fixes https://github.com/vector-im/riot-web/issues/6622
---
 src/components/structures/UserSettings.js     |  4 +-
 .../views/dialogs/BugReportDialog.js          | 42 +++++++------------
 .../views/elements/DialogButtons.js           | 14 +++++--
 src/i18n/strings/en_EN.json                   |  2 +-
 4 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 7948f4fb5d..44e2f93d63 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
+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.
@@ -804,7 +804,7 @@ module.exports = React.createClass({
                             "other users. They do not contain messages.",
                         )
                     }</p>
-                    <button className="mx_UserSettings_button danger"
+                    <button className="mx_UserSettings_button"
                         onClick={this._onBugReportClicked}>{ _t('Submit debug logs') }
                     </button>
                 </div>
diff --git a/src/components/views/dialogs/BugReportDialog.js b/src/components/views/dialogs/BugReportDialog.js
index 2025b6fc81..83cdb1f07f 100644
--- a/src/components/views/dialogs/BugReportDialog.js
+++ b/src/components/views/dialogs/BugReportDialog.js
@@ -1,5 +1,6 @@
 /*
 Copyright 2017 OpenMarket Ltd
+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.
@@ -105,6 +106,8 @@ export default class BugReportDialog extends React.Component {
 
     render() {
         const Loader = sdk.getComponent("elements.Spinner");
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         let error = null;
         if (this.state.err) {
@@ -113,13 +116,6 @@ export default class BugReportDialog extends React.Component {
             </div>;
         }
 
-        let cancelButton = null;
-        if (!this.state.busy) {
-            cancelButton = <button onClick={this._onCancel}>
-                { _t("Cancel") }
-            </button>;
-        }
-
         let progress = null;
         if (this.state.busy) {
             progress = (
@@ -131,11 +127,11 @@ export default class BugReportDialog extends React.Component {
         }
 
         return (
-            <div className="mx_BugReportDialog">
-                <div className="mx_Dialog_title">
-                    { _t("Submit debug logs") }
-                </div>
-                <div className="mx_Dialog_content">
+            <BaseDialog className="mx_BugReportDialog" onFinished={this._onCancel}
+                    title={_t('Submit debug logs')}
+                contentId='mx_Dialog_content'
+            >
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
                     <p>
                         { _t(
                             "Debug logs contain application usage data including your " +
@@ -146,7 +142,7 @@ export default class BugReportDialog extends React.Component {
                     </p>
                     <p>
                         { _t(
-                            "<a>Click here</a> to create a GitHub issue.",
+                            "Riot bugs are tracked on GitHub: <a>create a GitHub issue</a>.",
                             {},
                             {
                                 a: (sub) => <a
@@ -191,19 +187,13 @@ export default class BugReportDialog extends React.Component {
                     {progress}
                     {error}
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button
-                        className="mx_Dialog_primary danger"
-                        onClick={this._onSubmit}
-                        autoFocus={true}
-                        disabled={this.state.busy}
-                    >
-                        { _t("Send logs") }
-                    </button>
-
-                    {cancelButton}
-                </div>
-            </div>
+                <DialogButtons primaryButton={_t("Send logs")}
+                    onPrimaryButtonClick={this._onSubmit}
+                    focus={true}
+                    onCancel={this._onCancel}
+                    disabled={this.state.busy}
+                />
+            </BaseDialog>
         );
     }
 }
diff --git a/src/components/views/elements/DialogButtons.js b/src/components/views/elements/DialogButtons.js
index 73e47cbde2..c8c90ddc47 100644
--- a/src/components/views/elements/DialogButtons.js
+++ b/src/components/views/elements/DialogButtons.js
@@ -39,11 +39,14 @@ module.exports = React.createClass({
         onCancel: PropTypes.func,
 
         focus: PropTypes.bool,
+
+        disabled: PropTypes.bool,
     },
 
     getDefaultProps: function() {
         return {
             hasCancel: true,
+            disabled: false,
         }
     },
 
@@ -56,18 +59,23 @@ module.exports = React.createClass({
         if (this.props.primaryButtonClass) {
             primaryButtonClassName += " " + this.props.primaryButtonClass;
         }
+        let cancelButton;
+        if (this.props.hasCancel) {
+            cancelButton = <button onClick={this._onCancelClick} disabled={this.props.disabled}>
+                { _t("Cancel") }
+            </button>;
+        }
         return (
             <div className="mx_Dialog_buttons">
                 <button className={primaryButtonClassName}
                     onClick={this.props.onPrimaryButtonClick}
                     autoFocus={this.props.focus}
+                    disabled={this.props.disabled}
                 >
                     { this.props.primaryButton }
                 </button>
                 { this.props.children }
-                { this.props.hasCancel ? <button onClick={this._onCancelClick}>
-                    { _t("Cancel") }
-                </button> : null }
+                { cancelButton }
             </div>
         );
     },
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3c8dd5b66f..daf0ce605d 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -745,7 +745,7 @@
     "Failed to send logs: ": "Failed to send logs: ",
     "Submit debug logs": "Submit debug logs",
     "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.": "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.",
-    "<a>Click here</a> to create a GitHub issue.": "<a>Click here</a> to create a GitHub issue.",
+    "Riot bugs are tracked on GitHub: <a>create a GitHub issue</a>.": "Riot bugs are tracked on GitHub: <a>create a GitHub issue</a>.",
     "GitHub issue link:": "GitHub issue link:",
     "Notes:": "Notes:",
     "Send logs": "Send logs",