DC-2647 UI user debugger window

app/internal_packages/report-bug/lib/bug-report-root.jsx

@@ -3,6 +3,7 @@ import { ipcRenderer } from 'electron';
 import uuid from 'uuid';
 import { LottieImg } from 'mailspring-component-kit';
 import { Actions } from 'mailspring-exports';
+import BugReportSqlQuery from './bug-report-sql-query';
 export default class BugReportRoot extends React.PureComponent {
   static displayName = 'BugReportRoot';
   static containerRequired = false;
@@ -15,6 +16,7 @@ export default class BugReportRoot extends React.PureComponent {
       description: '',
       submitting: false,
       submitButtonText: 'Submit',
+      includeSqlQueryResults: false,
     };
     this.logID = uuid();
     this.mounted = false;
@@ -106,6 +108,9 @@ export default class BugReportRoot extends React.PureComponent {
   onToggleUploadLogs = () => {
     this.setState({ uploadLogs: !this.state.uploadLogs });
   };
+  onToggleSQLQuery = () => {
+    this.setState({ includeSqlQueryResults: !this.state.includeSqlQueryResults });
+  };
   onToggleUploadScreenShots = () => {
     this.setState({ uploadScreenShots: !this.state.uploadScreenShots });
   };
@@ -140,40 +145,58 @@ export default class BugReportRoot extends React.PureComponent {
       </div>
     );
   }
+  renderSqlQuery() {
+    if (this.state.includeSqlQueryResults) {
+      return <BugReportSqlQuery />;
+    }
+    return null;
+  }
 
   render() {
     return (
-      <div className="page-frame bug-report">
-        <h2>Thank you for helping Edison Mail</h2>
-        <div className="item-field">
-          <label>Please briefly describe your issue</label>
-          <textarea
-            disabled={this.state.submitting}
-            value={this.state.description}
-            placeholder="Briefly describe what you did, and what's the expected result and what was observed."
-            onChange={this.onDescriptionChange}
-          />
-        </div>
-        <div className="item-checkbox">
-          <input
-            type="checkbox"
-            disabled={this.state.submitting}
-            checked={this.state.uploadLogs}
-            onChange={this.onToggleUploadLogs}
-          />
-          <label onClick={this.onToggleUploadLogs}>Include log files</label>
+      <div className="page-frame bug-report-container">
+        <div className="bug-report">
+          <h2>Thank you for helping Edison Mail</h2>
+          <div className="item-field">
+            <label>Please briefly describe your issue</label>
+            <textarea
+              disabled={this.state.submitting}
+              value={this.state.description}
+              placeholder="Briefly describe what you did, and what's the expected result and what was observed."
+              onChange={this.onDescriptionChange}
+            />
+          </div>
+          {this.renderSqlQuery()}
+          <div className="item-checkbox">
+            <input
+              type="checkbox"
+              disabled={this.state.submitting}
+              checked={this.state.includeSqlQueryResults}
+              onChange={this.onToggleSQLQuery}
+            />
+            <label onClick={this.onToggleSQLQuery}>Run manual queries</label>
+          </div>
+          <div className="item-checkbox">
+            <input
+              type="checkbox"
+              disabled={this.state.submitting}
+              checked={this.state.uploadLogs}
+              onChange={this.onToggleUploadLogs}
+            />
+            <label onClick={this.onToggleUploadLogs}>Include log files</label>
+          </div>
+          {/*<div className="item-checkbox">*/}
+          {/*  <input*/}
+          {/*    type="checkbox"*/}
+          {/*    disabled={this.state.submitting}*/}
+          {/*    checked={this.state.uploadScreenShots}*/}
+          {/*    onChange={this.onToggleUploadScreenShots}*/}
+          {/*  />*/}
+          {/*  <label onClick={this.onToggleUploadScreenShots}>*/}
+          {/*    Include app screenshot, this will ONLY include Edison Mail app screenshots.*/}
+          {/*  </label>*/}
+          {/*</div>*/}
         </div>
-        {/*<div className="item-checkbox">*/}
-        {/*  <input*/}
-        {/*    type="checkbox"*/}
-        {/*    disabled={this.state.submitting}*/}
-        {/*    checked={this.state.uploadScreenShots}*/}
-        {/*    onChange={this.onToggleUploadScreenShots}*/}
-        {/*  />*/}
-        {/*  <label onClick={this.onToggleUploadScreenShots}>*/}
-        {/*    Include app screenshot, this will ONLY include Edison Mail app screenshots.*/}
-        {/*  </label>*/}
-        {/*</div>*/}
         {this.renderSubmitButton()}
       </div>
     );

app/internal_packages/report-bug/lib/bug-report-sql-query.jsx

@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import _ from 'underscore';
+import BugReportStore from './bug-report-store';
+import { remote } from 'electron';
+
+export default class BugReportSqlQuery extends Component {
+  static displayName = 'BugReportSqlQuery';
+  static propTypes = {};
+  static defaultProps = {};
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      results: [],
+      newQuery: '',
+    };
+    this._mounted = false;
+    this._throttledSubmit = _.throttle(this._sendQuery, 500);
+    this._unlisten = [];
+  }
+
+  componentDidMount() {
+    BugReportStore.resetSqlResults();
+    this._mounted = true;
+    this._unlisten.push(BugReportStore.listen(this._onStoreUpdate));
+  }
+
+  componentWillUnmount() {
+    this._mounted = false;
+    this._unlisten.map(unsubscribe => unsubscribe());
+  }
+  _onStoreUpdate = () => {
+    if (this._mounted) {
+      this.setState({ results: BugReportStore.getSqlResults() });
+    }
+  };
+  _sendQuery = () => {
+    BugReportStore.appendSqlQuery(this.state.newQuery.trim());
+    this.setState({ newQuery: '' });
+  };
+  _onSubmitQuery = e => {
+    e.preventDefault();
+    this._throttledSubmit();
+  };
+  _onSqlQueryChange = e => {
+    if (this._mounted) {
+      this.setState({ newQuery: e.target.value });
+    }
+  };
+  renderNewQuery() {
+    return (
+      <form className="new-query-container" onSubmit={this._onSubmitQuery}>
+        <label>Query</label>
+        <input value={this.state.newQuery} onChange={this._onSqlQueryChange} />
+      </form>
+    );
+  }
+  _onCopy = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    remote.clipboard.writeText(e.currentTarget.innerText);
+  };
+
+  renderQueryResult = result => {
+    const elapseTime = result.updateTime ? result.updateTime - result.startTime : 0;
+    return (
+      <div className="result-container">
+        <div className="result" onClick={this._onCopy}>
+          {result.result}
+        </div>
+        <div className="elapse-time">{elapseTime}ms</div>
+      </div>
+    );
+  };
+  renderResults() {
+    if (this.state.results.length > 0) {
+      return (
+        <div className="results-container">
+          {this.renderQueryResult(this.state.results[this.state.results.length - 1])}
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  render() {
+    return (
+      <div className="sql-query-container">
+        {this.renderNewQuery()}
+        {this.renderResults()}
+      </div>
+    );
+  }
+}

app/internal_packages/report-bug/lib/bug-report-store.es6

@@ -0,0 +1,49 @@
+import MailspringStore from 'mailspring-store';
+import { DatabaseStore } from 'mailspring-exports';
+import uuid from 'uuid';
+
+class BugReportStore extends MailspringStore {
+  constructor() {
+    super();
+    this._sqlResults = [];
+  }
+  _updateSqlResult(id, result) {
+    const now = Date.now();
+    for (let i = 0; i < this._sqlResults.length; i++) {
+      if (this._sqlResults[i].id === id) {
+        this._sqlResults[i].result = result;
+        this._sqlResults[i].updateTime = now;
+        AppEnv.logDebug(`--------User Manual query----------`);
+        AppEnv.logDebug(
+          `query ${this._sqlResults[i].query}, start time: ${this._sqlResults[i].startTime}, end time: ${now}`
+        );
+        AppEnv.logDebug(`result: ${result}`);
+        AppEnv.logDebug(`----------User Manual query end----------`);
+        return;
+      }
+    }
+  }
+
+  getSqlResults() {
+    return this._sqlResults.slice();
+  }
+  resetSqlResults() {
+    this._sqlResults = [];
+  }
+  appendSqlQuery(query, dbKey = 'main') {
+    const id = uuid();
+    this._sqlResults.push({ query, result: 'waiting...', id, startTime: Date.now() });
+    DatabaseStore.sendArbitrarySqlQuery(query, dbKey).then(
+      result => {
+        this._updateSqlResult(id, JSON.stringify(result));
+        this.trigger();
+      },
+      err => {
+        this._updateSqlResult(id, err.toString());
+        this.trigger();
+      }
+    );
+    this.trigger();
+  }
+}
+module.exports = new BugReportStore();