mirror of
https://github.com/element-hq/element-web
synced 2024-10-26 04:35:55 +03:00
Merge pull request #642 from matrix-org/kegan/rageshake-ui
Add bug report UI
This commit is contained in:
commit
e5fde759e6
4 changed files with 152 additions and 0 deletions
|
@ -19,6 +19,8 @@ var DEFAULTS = {
|
||||||
integrations_ui_url: "https://scalar.vector.im/",
|
integrations_ui_url: "https://scalar.vector.im/",
|
||||||
// Base URL to the REST interface of the integrations server
|
// Base URL to the REST interface of the integrations server
|
||||||
integrations_rest_url: "https://scalar.vector.im/api",
|
integrations_rest_url: "https://scalar.vector.im/api",
|
||||||
|
// Where to send bug reports. If not specified, bugs cannot be sent.
|
||||||
|
bug_report_endpoint_url: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
class SdkConfig {
|
class SdkConfig {
|
||||||
|
|
|
@ -71,6 +71,8 @@ import views$create_room$Presets from './components/views/create_room/Presets';
|
||||||
views$create_room$Presets && (module.exports.components['views.create_room.Presets'] = views$create_room$Presets);
|
views$create_room$Presets && (module.exports.components['views.create_room.Presets'] = views$create_room$Presets);
|
||||||
import views$create_room$RoomAlias from './components/views/create_room/RoomAlias';
|
import views$create_room$RoomAlias from './components/views/create_room/RoomAlias';
|
||||||
views$create_room$RoomAlias && (module.exports.components['views.create_room.RoomAlias'] = views$create_room$RoomAlias);
|
views$create_room$RoomAlias && (module.exports.components['views.create_room.RoomAlias'] = views$create_room$RoomAlias);
|
||||||
|
import views$dialogs$BugReportDialog from './components/views/dialogs/BugReportDialog';
|
||||||
|
views$dialogs$BugReportDialog && (module.exports.components['views.dialogs.BugReportDialog'] = views$dialogs$BugReportDialog);
|
||||||
import views$dialogs$BaseDialog from './components/views/dialogs/BaseDialog';
|
import views$dialogs$BaseDialog from './components/views/dialogs/BaseDialog';
|
||||||
views$dialogs$BaseDialog && (module.exports.components['views.dialogs.BaseDialog'] = views$dialogs$BaseDialog);
|
views$dialogs$BaseDialog && (module.exports.components['views.dialogs.BaseDialog'] = views$dialogs$BaseDialog);
|
||||||
import views$dialogs$ChatInviteDialog from './components/views/dialogs/ChatInviteDialog';
|
import views$dialogs$ChatInviteDialog from './components/views/dialogs/ChatInviteDialog';
|
||||||
|
|
|
@ -26,6 +26,7 @@ var UserSettingsStore = require('../../UserSettingsStore');
|
||||||
var GeminiScrollbar = require('react-gemini-scrollbar');
|
var GeminiScrollbar = require('react-gemini-scrollbar');
|
||||||
var Email = require('../../email');
|
var Email = require('../../email');
|
||||||
var AddThreepid = require('../../AddThreepid');
|
var AddThreepid = require('../../AddThreepid');
|
||||||
|
var SdkConfig = require('../../SdkConfig');
|
||||||
import AccessibleButton from '../views/elements/AccessibleButton';
|
import AccessibleButton from '../views/elements/AccessibleButton';
|
||||||
|
|
||||||
// if this looks like a release, use the 'version' from package.json; else use
|
// if this looks like a release, use the 'version' from package.json; else use
|
||||||
|
@ -388,6 +389,11 @@ module.exports = React.createClass({
|
||||||
Modal.createDialog(DeactivateAccountDialog, {});
|
Modal.createDialog(DeactivateAccountDialog, {});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_onBugReportClicked: function() {
|
||||||
|
const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
|
||||||
|
Modal.createDialog(BugReportDialog, {});
|
||||||
|
},
|
||||||
|
|
||||||
_onInviteStateChange: function(event, member, oldMembership) {
|
_onInviteStateChange: function(event, member, oldMembership) {
|
||||||
if (member.userId === this._me && oldMembership === "invite") {
|
if (member.userId === this._me && oldMembership === "invite") {
|
||||||
this.forceUpdate();
|
this.forceUpdate();
|
||||||
|
@ -547,6 +553,23 @@ module.exports = React.createClass({
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_renderBugReport: function() {
|
||||||
|
if (!SdkConfig.get().bug_report_endpoint_url) {
|
||||||
|
return <div />
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h3>Bug Report</h3>
|
||||||
|
<div className="mx_UserSettings_section">
|
||||||
|
<p>Found a bug?</p>
|
||||||
|
<button className="mx_UserSettings_button danger"
|
||||||
|
onClick={this._onBugReportClicked}>Report it
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
_renderLabs: function() {
|
_renderLabs: function() {
|
||||||
// default to enabled if undefined
|
// default to enabled if undefined
|
||||||
if (this.props.enableLabs === false) return null;
|
if (this.props.enableLabs === false) return null;
|
||||||
|
@ -800,6 +823,7 @@ module.exports = React.createClass({
|
||||||
{this._renderDevicesPanel()}
|
{this._renderDevicesPanel()}
|
||||||
{this._renderCryptoInfo()}
|
{this._renderCryptoInfo()}
|
||||||
{this._renderBulkOptions()}
|
{this._renderBulkOptions()}
|
||||||
|
{this._renderBugReport()}
|
||||||
|
|
||||||
<h3>Advanced</h3>
|
<h3>Advanced</h3>
|
||||||
|
|
||||||
|
|
124
src/components/views/dialogs/BugReportDialog.js
Normal file
124
src/components/views/dialogs/BugReportDialog.js
Normal file
|
@ -0,0 +1,124 @@
|
||||||
|
/*
|
||||||
|
Copyright 2017 OpenMarket Ltd
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import sdk from '../../../index';
|
||||||
|
|
||||||
|
export default class BugReportDialog extends React.Component {
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
this.state = {
|
||||||
|
sendLogs: true,
|
||||||
|
busy: false,
|
||||||
|
err: null,
|
||||||
|
text: "",
|
||||||
|
};
|
||||||
|
this._onSubmit = this._onSubmit.bind(this);
|
||||||
|
this._onCancel = this._onCancel.bind(this);
|
||||||
|
this._onTextChange = this._onTextChange.bind(this);
|
||||||
|
this._onSendLogsChange = this._onSendLogsChange.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
_onCancel(ev) {
|
||||||
|
this.props.onFinished(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
_onSubmit(ev) {
|
||||||
|
const sendLogs = this.state.sendLogs;
|
||||||
|
const userText = this.state.text;
|
||||||
|
if (!sendLogs && userText.trim().length === 0) {
|
||||||
|
this.setState({
|
||||||
|
err: "Please describe the bug and/or send logs.",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// TODO: Make the HTTP hit
|
||||||
|
this.setState({ busy: true, err: null });
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setState({ busy: false, err: "No bug report endpoint." });
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
_onTextChange(ev) {
|
||||||
|
this.setState({ text: ev.target.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
_onSendLogsChange(ev) {
|
||||||
|
this.setState({ sendLogs: ev.target.checked });
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const Loader = sdk.getComponent("elements.Spinner");
|
||||||
|
|
||||||
|
let error = null;
|
||||||
|
if (this.state.err) {
|
||||||
|
error = <div className="error">
|
||||||
|
{this.state.err}
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const okLabel = this.state.busy ? <Loader /> : 'Send';
|
||||||
|
|
||||||
|
let cancelButton = null;
|
||||||
|
if (!this.state.busy) {
|
||||||
|
cancelButton = <button onClick={this._onCancel}>
|
||||||
|
Cancel
|
||||||
|
</button>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mx_BugReportDialog">
|
||||||
|
<div className="mx_Dialog_title">
|
||||||
|
Report a bug
|
||||||
|
</div>
|
||||||
|
<div className="mx_Dialog_content">
|
||||||
|
<p>Please describe the bug. What did you do?
|
||||||
|
What did you expect to happen?
|
||||||
|
What actually happened?</p>
|
||||||
|
<textarea
|
||||||
|
className="mx_BugReportDialog_input"
|
||||||
|
rows={5}
|
||||||
|
onChange={this._onTextChange}
|
||||||
|
value={this.state.text}
|
||||||
|
placeholder="Describe your problem here."
|
||||||
|
/>
|
||||||
|
<p>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">Send logs</label>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
<div className="mx_Dialog_buttons">
|
||||||
|
<button
|
||||||
|
className="mx_Dialog_primary danger"
|
||||||
|
onClick={this._onSubmit}
|
||||||
|
autoFocus={true}
|
||||||
|
>
|
||||||
|
{okLabel}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{cancelButton}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
BugReportDialog.propTypes = {
|
||||||
|
onFinished: React.PropTypes.func.isRequired,
|
||||||
|
};
|
Loading…
Reference in a new issue