Merge pull request #6354 from vector-im/luke/reword-BugReportDialog

Reword the BugReportDialog.js as per @lampholder

src/components/views/dialogs/BugReportDialog.js

@@ -27,6 +27,7 @@ export default class BugReportDialog extends React.Component {
             sendLogs: true,
             busy: false,
             err: null,
+            issueUrl: "",
             text: "",
             progress: null,
         };
@@ -34,6 +35,7 @@ export default class BugReportDialog extends React.Component {
         this._onSubmit = this._onSubmit.bind(this);
         this._onCancel = this._onCancel.bind(this);
         this._onTextChange = this._onTextChange.bind(this);
+        this._onIssueUrlChange = this._onIssueUrlChange.bind(this);
         this._onSendLogsChange = this._onSendLogsChange.bind(this);
         this._sendProgressCallback = this._sendProgressCallback.bind(this);
     }
@@ -47,28 +49,24 @@ export default class BugReportDialog extends React.Component {
     }
 
     _onSubmit(ev) {
-        const sendLogs = this.state.sendLogs;
+        const userText =
-        const userText = this.state.text;
+            (this.state.text.length > 0 ? this.state.text + '\n\n': '') + 'Issue: ' +
-        if (!sendLogs && userText.trim().length === 0) {
+            (this.state.issueUrl.length > 0 ? this.state.issueUrl : 'No issue link given');
-            this.setState({
+
-                err: _t("Please describe the bug and/or send logs."),
-            });
-            return;
-        }
         this.setState({ busy: true, progress: null, err: null });
-        this._sendProgressCallback(_t("Loading bug report module"));
+        this._sendProgressCallback(_t("Preparing to send logs"));
 
         require(['../../../vector/submit-rageshake'], (s) => {
             s(SdkConfig.get().bug_report_endpoint_url, {
-                userText: userText,
+                userText,
-                sendLogs: sendLogs,
+                sendLogs: true,
                 progressCallback: this._sendProgressCallback,
             }).then(() => {
                 if (!this._unmounted) {
                     this.props.onFinished(false);
                     const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                     Modal.createTrackedDialog('Bug report sent', '', QuestionDialog, {
-                        title: _t('Bug report sent'),
+                        title: _t('Logs sent'),
                         description: _t('Thank you!'),
                         hasCancelButton: false,
                     });
@@ -78,7 +76,7 @@ export default class BugReportDialog extends React.Component {
                     this.setState({
                         busy: false,
                         progress: null,
-                        err: _t("Failed to send report: ") + `${err.message}`,
+                        err: _t("Failed to send logs: ") + `${err.message}`,
                     });
                 }
             });
@@ -89,6 +87,10 @@ export default class BugReportDialog extends React.Component {
         this.setState({ text: ev.target.value });
     }
 
+    _onIssueUrlChange(ev) {
+        this.setState({ issueUrl: ev.target.value });
+    }
+
    _onSendLogsChange(ev) {
         this.setState({ sendLogs: ev.target.checked });
     }
@@ -130,27 +132,61 @@ export default class BugReportDialog extends React.Component {
         return (
             <div className="mx_BugReportDialog">
                 <div className="mx_Dialog_title">
-                    { _t("Report a bug") }
+                    { _t("Submit debug logs") }
                 </div>
                 <div className="mx_Dialog_content">
                     <p>
-                    { _t("Please describe the bug. What did you do? What did you expect to happen? What actually happened?") }
+                        { _t(
+                            "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.",
+                        ) }
                     </p>
+                    <p>
+                        { _t(
+                            "<a>Click here</a> to create a GitHub issue.",
+                            {},
+                            {
+                                a: (sub) => <a
+                                    target="_blank"
+                                    href="https://github.com/vector-im/riot-web/issues/new"
+                                >
+                                    { sub }
+                                </a>,
+                            },
+                        ) }
+                    </p>
+                    <div className="mx_BugReportDialog_field_container">
+                        <label
+                            htmlFor="mx_BugReportDialog_issueUrl"
+                            className="mx_BugReportDialog_field_label"
+                        >
+                            { _t("GitHub issue link:") }
+                        </label>
+                        <input
+                            id="mx_BugReportDialog_issueUrl"
+                            type="text"
+                            className="mx_BugReportDialog_field_input"
+                            onChange={this._onIssueUrlChange}
+                            value={this.state.issueUrl}
+                            placeholder="https://github.com/vector-im/riot-web/issues/1337"
+                        />
+                    </div>
+                    <div className="mx_BugReportDialog_field_container">
+                        <label
+                            htmlFor="mx_BugReportDialog_notes_label"
+                            className="mx_BugReportDialog_field_label"
+                        >
+                            { _t("Notes:") }
+                        </label>
                         <textarea
-                        className="mx_BugReportDialog_input"
+                            className="mx_BugReportDialog_field_input"
                             rows={5}
                             onChange={this._onTextChange}
                             value={this.state.text}
-                        placeholder={_t("Describe your problem here.")}
                         />
-                    <p>
+                    </div>
-                    { _t("In order to diagnose problems, logs from this client will be sent with this bug report. If you would prefer to only send the text above, please untick:") }
-                    </p>
-                    <input type="checkbox" checked={this.state.sendLogs}
-                        onChange={this._onSendLogsChange} id="mx_BugReportDialog_logs"/>
-                    <label htmlFor="mx_BugReportDialog_logs">
-                        { _t("Send logs") }
-                    </label>
                     {progress}
                     {error}
                 </div>
@@ -161,7 +197,7 @@ export default class BugReportDialog extends React.Component {
                         autoFocus={true}
                         disabled={this.state.busy}
                     >
-                        { _t("Send") }
+                        { _t("Send logs") }
                     </button>
 
                     {cancelButton}

src/i18n/strings/en_EN.json

@@ -79,21 +79,21 @@
     "Remove": "Remove",
     "Close": "Close",
     "Download this file": "Download this file",
-    "Please describe the bug and/or send logs.": "Please describe the bug and/or send logs.",
+    "Preparing to send logs": "Preparing to send logs",
-    "Loading bug report module": "Loading bug report module",
+    "Logs sent": "Logs sent",
-    "Bug report sent": "Bug report sent",
     "Thank you!": "Thank you!",
-    "Failed to send report: ": "Failed to send report: ",
+    "Failed to send logs: ": "Failed to send logs: ",
     "Cancel": "Cancel",
-    "Report a bug": "Report a bug",
+    "Submit debug logs": "Submit debug logs",
-    "Please describe the bug. What did you do? What did you expect to happen? What actually happened?": "Please describe the bug. What did you do? What did you expect to happen? What actually happened?",
+    "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.",
-    "Describe your problem here.": "Describe your problem here.",
+    "<a>Click here</a> to create a GitHub issue.": "<a>Click here</a> to create a GitHub issue.",
-    "In order to diagnose problems, logs from this client will be sent with this bug report. If you would prefer to only send the text above, please untick:": "In order to diagnose problems, logs from this client will be sent with this bug report. If you would prefer to only send the text above, please untick:",
+    "GitHub issue link:": "GitHub issue link:",
+    "Notes:": "Notes:",
     "Send logs": "Send logs",
-    "Send": "Send",
     "Unavailable": "Unavailable",
     "Changelog": "Changelog",
     "Back": "Back",
+    "Send": "Send",
     "Send Custom Event": "Send Custom Event",
     "You must specify an event type!": "You must specify an event type!",
     "Event sent!": "Event sent!",

src/skins/vector/css/matrix-react-sdk/views/dialogs/_BugReportDialog.scss

@@ -14,7 +14,39 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_BugReportDialog_input {
+.mx_BugReportDialog_field_container {
-    width: 100%;
+    display: flex;
-    box-sizing: border-box;
+}
+
+.mx_BugReportDialog_field_label {
+    flex-basis: 150px;
+
+    text-align: right;
+
+    padding-top: 9px;
+    padding-right: 4px;
+
+    line-height: 18px;
+}
+
+.mx_BugReportDialog_field_input {
+    flex-grow: 1;
+
+    /* taken from mx_ChatInviteDialog_inputContainer */
+    border-radius: 3px;
+    border: solid 1px $input-border-color;
+
+    font-size: 14px;
+
+    padding-left: 4px;
+    padding-right: 4px;
+    padding-top: 7px;
+    padding-bottom: 7px;
+
+    margin-bottom: 4px;
+}
+
+.mx_BugReportDialog_field_input[type="text" i] {
+    padding-top: 9px;
+    padding-bottom: 9px;
 }