From 327b35324ea3a9ac2e80a403d8cb0e267ef1f8be Mon Sep 17 00:00:00 2001
From: ruoxijiang <rjiang@lazycakestudios.net>
Date: Thu, 31 Dec 2020 09:54:20 +0800
Subject: [PATCH] DC-2647 UI user debugger window

---
 .../report-bug/lib/bug-report-root.jsx        |  83 +++---
 .../report-bug/lib/bug-report-sql-query.jsx   |  95 +++++++
 .../report-bug/lib/bug-report-store.es6       |  49 ++++
 .../report-bug/styles/bug-report.less         | 252 ++++++++++++------
 app/src/flux/stores/database-store.es6        |  24 +-
 5 files changed, 378 insertions(+), 125 deletions(-)
 create mode 100644 app/internal_packages/report-bug/lib/bug-report-sql-query.jsx
 create mode 100644 app/internal_packages/report-bug/lib/bug-report-store.es6

diff --git a/app/internal_packages/report-bug/lib/bug-report-root.jsx b/app/internal_packages/report-bug/lib/bug-report-root.jsx
index 04a5353ca9..8e49d73214 100644
--- a/app/internal_packages/report-bug/lib/bug-report-root.jsx
+++ b/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>
     );
diff --git a/app/internal_packages/report-bug/lib/bug-report-sql-query.jsx b/app/internal_packages/report-bug/lib/bug-report-sql-query.jsx
new file mode 100644
index 0000000000..d87bbb9ba5
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/app/internal_packages/report-bug/lib/bug-report-store.es6 b/app/internal_packages/report-bug/lib/bug-report-store.es6
new file mode 100644
index 0000000000..b3a316f547
--- /dev/null
+++ b/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();
diff --git a/app/internal_packages/report-bug/styles/bug-report.less b/app/internal_packages/report-bug/styles/bug-report.less
index 7a308f3b90..6643ccbc7e 100644
--- a/app/internal_packages/report-bug/styles/bug-report.less
+++ b/app/internal_packages/report-bug/styles/bug-report.less
@@ -5,103 +5,185 @@
   flex: 1;
   height: 100%;
   padding: 24px;
-
-  &.bug-report {
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  h2 {
-    line-height: 1.3em;
-    font-size: 30pt;
-    font-weight: 200;
-  }
-  .item-description {
+  &.bug-report-container {
     display: flex;
     flex-direction: column;
-    label {
-      padding-bottom: 14px;
+    justify-content: space-between;
+    background: @background-primary;
+    .bug-report {
+      overflow-y: auto;
+      overflow-x: hidden;
+      .sql-query-container {
+        width: 100%;
+        height: fit-content;
+        max-height: 200px;
+        overflow-y: auto;
+        padding-top: 6px;
+        .results-container {
+          max-height: 170px;
+          height: fit-content;
+          width: 100%;
+          overflow-y: auto;
+          display: flex;
+          flex-direction: column;
+          color: @text-color;
+          padding-top: 4px;
+
+          .result-container {
+            padding-bottom: 4px;
+            height: 50px;
+            width: 100%;
+            max-width: 100%;
+            overflow: hidden;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+
+            .query {
+              flex-basis: 20%;
+              flex-grow: 0;
+              flex-wrap: nowrap;
+              text-wrap: none;
+              overflow-x: auto;
+            }
+
+            .elapse-time {
+              flex-basis: 20px;
+              flex-grow: 1;
+              min-width: 20px;
+              max-width: 100px;
+            }
+
+            .result {
+              flex-basis: 100px;
+              flex-grow: 1;
+              flex-wrap: nowrap;
+              overflow-x: auto;
+              user-select: all;
+            }
+          }
+        }
+
+        .new-query-container {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          height: 50px;
+
+          label {
+            flex-basis: 30px;
+            padding-right: 4px;
+          }
+
+          input {
+            color: @text-color;
+            flex-grow: 1;
+          }
+        }
+      }
     }
-  }
-  .item-checkbox {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    label {
-      flex: 1;
-      height: 50px;
+
+    h2 {
+      line-height: 1.3em;
+      font-size: 30pt;
+      font-weight: 200;
+    }
+
+    .item-description {
+      display: flex;
+      flex-direction: column;
+
+      label {
+        padding-bottom: 14px;
+      }
+    }
+
+    .item-checkbox {
       display: flex;
       flex-direction: row;
-      align-items: center;
-      padding: unset;
-      white-space: normal;
+      justify-content: flex-start;
+
+      label {
+        flex: 1;
+        height: 50px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: unset;
+        white-space: normal;
+      }
     }
-  }
-  textarea {
-    resize: none;
-    box-sizing: border-box;
-    height: 250px;
-    width: 100%;
-    color: @text-color;
-    border-radius: 10px;
-    background-color: @background-primary;
-    border: 2px solid #e8ebed;
-    padding: 8px 20px;
-
-    &::-webkit-input-placeholder {
-      color: @gray-light;
+
+    textarea {
+      resize: none;
+      box-sizing: border-box;
+      height: 180px;
+      width: 100%;
+      color: @text-color;
+      border-radius: 10px;
+      background-color: @background-primary;
+      border: 2px solid #e8ebed;
+      padding: 8px 20px;
+
+      &::-webkit-input-placeholder {
+        color: @gray-light;
+      }
     }
-  }
-  input {
-    box-sizing: border-box;
-    height: 50px;
-    width: 100%;
-    border-radius: 10px;
-    background-color: @background-primary;
-    border: 2px solid #e8ebed;
-    padding: 0 20px;
-
-    &::-webkit-input-placeholder {
-      color: @gray-light;
+
+    input {
+      box-sizing: border-box;
+      height: 50px;
+      width: 100%;
+      border-radius: 10px;
+      background-color: @background-primary;
+      border: 2px solid #e8ebed;
+      padding: 0 20px;
+
+      &::-webkit-input-placeholder {
+        color: @gray-light;
+      }
+
+      &[type='checkbox'] {
+        margin-right: 5px;
+        width: 20px;
+      }
     }
 
-    &[type='checkbox'] {
-      margin-right: 5px;
-      width: 20px;
+    label {
+      display: inline-block;
+      white-space: nowrap;
+      width: 100%;
+      color: @text-color;
+      text-align: left;
+      padding-bottom: 12px;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 18px;
+      height: 16px;
     }
-  }
 
-  label {
-    display: inline-block;
-    white-space: nowrap;
-    width: 100%;
-    color: @text-color;
-    text-align: left;
-    padding-bottom: 12px;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 18px;
-    height: 16px;
-  }
+    label.checkbox {
+      width: inherit;
+    }
 
-  label.checkbox {
-    width: inherit;
-  }
-  button.btn-report-bug {
-    width: 350px;
-    height: 50px;
-    background: @blue;
-    border-radius: 25px;
-    margin: 50px auto 0 auto;
-    color: @text-color-inverse;
-    transition: width 150ms ease-in-out;
-    font-size: 17px;
-    font-weight: 700;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    &:hover {
-      background: #0f72d1;
+    button.btn-report-bug {
+      width: 350px;
+      height: 50px;
+      background: @blue;
+      border-radius: 25px;
+      margin: 50px auto 0 auto;
+      color: @text-color-inverse;
+      transition: width 150ms ease-in-out;
+      font-size: 17px;
+      font-weight: 700;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+
+      &:hover {
+        background: #0f72d1;
+      }
     }
   }
 }
diff --git a/app/src/flux/stores/database-store.es6 b/app/src/flux/stores/database-store.es6
index 4a0f4cb3f6..f4dc733165 100644
--- a/app/src/flux/stores/database-store.es6
+++ b/app/src/flux/stores/database-store.es6
@@ -7,11 +7,11 @@ import LRU from 'lru-cache';
 import Sqlite3 from 'better-sqlite3';
 import { remote } from 'electron';
 import { ExponentialBackoffScheduler } from '../../backoff-schedulers';
-import Actions from '../actions';
+// import Actions from '../actions';
 import MailspringStore from '../../global/mailspring-store';
 import Utils from '../models/utils';
 import Query from '../models/query';
-import AppMessage from '../models/app-message';
+// import AppMessage from '../models/app-message';
 import DatabaseChangeRecord from './database-change-record';
 import { QUERY_TYPE } from '../../constant';
 
@@ -34,14 +34,14 @@ const promptSlowQuery = slowQueryCache => {
       return;
     }
     if (slowQueryCache.length + 1 > NUM_SLOW_QUERY_THRESH_HOLD) {
-      const message = new AppMessage({
-        allowClose: true,
-        level: 0,
-        id: 'database-slow-query',
-        accountIds: [],
-        description: 'Edison Mail need to do some housekeeping in order to improve performance.',
-        actions: [{ text: 'Proceed', onClick: () => Actions.askVacuum() }],
-      });
+      // const message = new AppMessage({
+      //   allowClose: true,
+      //   level: 0,
+      //   id: 'database-slow-query',
+      //   accountIds: [],
+      //   description: 'Edison Mail need to do some housekeeping in order to improve performance.',
+      //   actions: [{ text: 'Proceed', onClick: () => Actions.askVacuum() }],
+      // });
       // Actions.pushAppMessage(message);
       slowQueryCache.length = 0;
       return;
@@ -313,6 +313,7 @@ class DatabaseStore extends MailspringStore {
   // If a query is made before the database has been opened, the query will be
   // held in a queue and run / resolved when the database is ready.
   _query(query, values = [], background = false, dbKey = 'main', queryType) {
+    // eslint-disable-next-line no-async-promise-executor
     return new Promise(async (resolve, reject) => {
       if (!this._open) {
         console.log(`db conections not ready ${dbKey}`);
@@ -375,6 +376,9 @@ class DatabaseStore extends MailspringStore {
       }
     });
   }
+  sendArbitrarySqlQuery(query, dbKey = 'main') {
+    return this._query(query, [], true, dbKey, 'SQL_DEBUG');
+  }
 
   async _executeLocally(query, values, dbKey = 'main') {
     if (AppEnv.enabledLocalQueryLog) {