PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Reword the BugReportDialog.js as per @lampholder

Browse source 
See https://github.com/matrix-org/matrix-react-sdk/pull/1740#issuecomment-369597662
This commit is contained in:
Luke Barnard 2018-03-20 10:52:50 +00:00
parent 8853496b1b
commit 324774ec2f
3 changed files with 110 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/components/views/dialogs/BugReportDialog.js
View file

@ -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 = 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,
});
@ -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>
{ _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>
</div>
{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}

18
src/i18n/strings/en_EN.json
View file

@ -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!",

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

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