From 3b9a1121369e48630af8a1879af5991a8cdee180 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Tue, 24 Jan 2017 14:47:11 +0000 Subject: [PATCH 1/3] Add bug report UI --- src/component-index.js | 2 + src/components/structures/UserSettings.js | 21 +++ .../views/dialogs/BugReportDialog.js | 122 ++++++++++++++++++ 3 files changed, 145 insertions(+) create mode 100644 src/components/views/dialogs/BugReportDialog.js diff --git a/src/component-index.js b/src/component-index.js index e83de8739d..f03a3e39ff 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -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); 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); +import views$dialogs$BugReportDialog from './components/views/dialogs/BugReportDialog'; +views$dialogs$BugReportDialog && (module.exports.components['views.dialogs.BugReportDialog'] = views$dialogs$BugReportDialog); import views$dialogs$ChatInviteDialog from './components/views/dialogs/ChatInviteDialog'; views$dialogs$ChatInviteDialog && (module.exports.components['views.dialogs.ChatInviteDialog'] = views$dialogs$ChatInviteDialog); import views$dialogs$DeactivateAccountDialog from './components/views/dialogs/DeactivateAccountDialog'; diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index 4a1332be8c..8294eee6df 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -369,6 +369,11 @@ module.exports = React.createClass({ Modal.createDialog(DeactivateAccountDialog, {}); }, + _onBugReportClicked: function() { + const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog"); + Modal.createDialog(BugReportDialog, {}); + }, + _onInviteStateChange: function(event, member, oldMembership) { if (member.userId === this._me && oldMembership === "invite") { this.forceUpdate(); @@ -485,6 +490,21 @@ module.exports = React.createClass({ ); }, + _renderBugReport: function() { + // TODO: If there is no bug report endpoint, hide this. + return ( +
+

Bug Report

+
+

Found a bug?

+ +
+
+ ); + }, + _renderLabs: function() { // default to enabled if undefined if (this.props.enableLabs === false) return null; @@ -738,6 +758,7 @@ module.exports = React.createClass({ {this._renderDevicesPanel()} {this._renderCryptoInfo()} {this._renderBulkOptions()} + {this._renderBugReport()}

Advanced

diff --git a/src/components/views/dialogs/BugReportDialog.js b/src/components/views/dialogs/BugReportDialog.js new file mode 100644 index 0000000000..eafafb56c6 --- /dev/null +++ b/src/components/views/dialogs/BugReportDialog.js @@ -0,0 +1,122 @@ +/* +Copyright 2016 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 =
+ {this.state.err} +
; + } + + const okLabel = this.state.busy ? : 'Send'; + + let cancelButton = null; + if (!this.state.busy) { + cancelButton = ; + } + + return ( +
+
+ Report a bug +
+
+

Please describe the bug. What did you do? What did you expect to happen? + What actually happened?

+