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 element-hq/element-web#6622
matrix-org · Apr 27, 2018 · efd2919 · efd2919
1 parent dc06c52
commit efd2919
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",