Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reword the BugReportDialog.js as per @lampholder #6354

Merged
merged 1 commit into from
Mar 20, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 66 additions & 30 deletions src/components/views/dialogs/BugReportDialog.js
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
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
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;
}