Skip to content

Commit

Permalink
Merge pull request #6354 from vector-im/luke/reword-BugReportDialog
Browse files Browse the repository at this point in the history 
Reword the BugReportDialog.js as per @lampholder
  • Loading branch information
@dbkr
dbkr authored Mar 20, 2018
2 parents b4020bb + 324774e commit c99ca37
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 42 deletions.
96 changes: 66 additions & 30 deletions src/components/views/dialogs/BugReportDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,15 @@ export default class BugReportDialog extends React.Component {
sendLogs: true,
busy: false,
err: null,
issueUrl: "",
text: "",
progress: null,
};
this._unmounted = false;
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);
}
Expand All @@ -47,28 +49,24 @@ export default class BugReportDialog extends React.Component {
}

_onSubmit(ev) {
const sendLogs = this.state.sendLogs;
const userText = this.state.text;
if (!sendLogs && userText.trim().length === 0) {
this.setState({
err: _t("Please describe the bug and/or send logs."),
});
return;
}
const userText =
(this.state.text.length > 0 ? this.state.text + '\n\n': '') + 'Issue: ' +
(this.state.issueUrl.length > 0 ? this.state.issueUrl : 'No issue link given');

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,
sendLogs: sendLogs,
userText,
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,
});
Expand All @@ -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}`,
});
}
});
Expand All @@ -89,7 +87,11 @@ export default class BugReportDialog extends React.Component {
this.setState({ text: ev.target.value });
}

_onSendLogsChange(ev) {
_onIssueUrlChange(ev) {
this.setState({ issueUrl: ev.target.value });
}

_onSendLogsChange(ev) {
this.setState({ sendLogs: ev.target.checked });
}

Expand Down Expand Up @@ -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>
<textarea
className="mx_BugReportDialog_input"
rows={5}
onChange={this._onTextChange}
value={this.state.text}
placeholder={_t("Describe your problem here.")}
/>
<p>
{ _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:") }
{ _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>
<input type="checkbox" checked={this.state.sendLogs}
onChange={this._onSendLogsChange} id="mx_BugReportDialog_logs"/>
<label htmlFor="mx_BugReportDialog_logs">
{ _t("Send logs") }
</label>
<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_field_input"
rows={5}
onChange={this._onTextChange}
value={this.state.text}
/>
</div>
{progress}
{error}
</div>
Expand All @@ -161,7 +197,7 @@ export default class BugReportDialog extends React.Component {
autoFocus={true}
disabled={this.state.busy}
>
{ _t("Send") }
{ _t("Send logs") }
</button>

{cancelButton}
Expand Down
18 changes: 9 additions & 9 deletions src/i18n/strings/en_EN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
"Loading bug report module": "Loading bug report module",
"Bug report sent": "Bug report sent",
"Preparing to send logs": "Preparing to send logs",
"Logs sent": "Logs 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",
"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?",
"Describe your problem here.": "Describe your problem here.",
"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:",
"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.",
"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!",
Expand Down
38 changes: 35 additions & 3 deletions src/skins/vector/css/matrix-react-sdk/views/dialogs/_BugReportDialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,39 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_BugReportDialog_input {
width: 100%;
box-sizing: border-box;
.mx_BugReportDialog_field_container {
display: flex;
}

.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;
}

0 comments on commit c99ca37

Please sign in to comment.