From 251c10d6de6fbff9637fa0004b939f8689bf7a2a Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Tue, 19 Mar 2019 11:40:04 +0800 Subject: [PATCH 01/42] Add integrations button to toolbar --- templates/bot.mustache | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/templates/bot.mustache b/templates/bot.mustache index 339b21e47d..5c29c8d3c4 100644 --- a/templates/bot.mustache +++ b/templates/bot.mustache @@ -14,7 +14,9 @@
+ + @@ -109,8 +111,9 @@
- + + From ff1d3691627dd0b677ca65f9af8215f8bb71c3ee Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Tue, 19 Mar 2019 11:41:23 +0800 Subject: [PATCH 02/42] Add icon and create rules for integrations icon --- static/css/_fontello.scss | 6 ++++++ static/image/integrations.svg | 1 + 2 files changed, 7 insertions(+) create mode 100644 static/image/integrations.svg diff --git a/static/css/_fontello.scss b/static/css/_fontello.scss index 01fa493b74..055d26307e 100755 --- a/static/css/_fontello.scss +++ b/static/css/_fontello.scss @@ -89,3 +89,9 @@ background: url("../image/clear-disabled.svg") no-repeat center; } } +.icon-integrations { + &:before { + content: ' '; + } + background: url("../image/integrations.svg") no-repeat center; +} diff --git a/static/image/integrations.svg b/static/image/integrations.svg new file mode 100644 index 0000000000..7bf82226a1 --- /dev/null +++ b/static/image/integrations.svg @@ -0,0 +1 @@ + \ No newline at end of file From 4a406073f1f89b3c6d8ad1e502e03afc1995593d Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Tue, 19 Mar 2019 11:42:34 +0800 Subject: [PATCH 03/42] Export loadWorkspace & loadBlocks functions and create common cleanBeforeExport function --- src/botPage/view/blockly/index.js | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/botPage/view/blockly/index.js b/src/botPage/view/blockly/index.js index a4fc3583d5..f464a78d63 100644 --- a/src/botPage/view/blockly/index.js +++ b/src/botPage/view/blockly/index.js @@ -13,6 +13,7 @@ import { fixArgumentAttribute, removeUnavailableMarkets, strategyHasValidTradeTypeCategory, + cleanBeforeExport, } from './utils'; import Interpreter from '../../bot/Interpreter'; import createError from '../../common/error'; @@ -75,7 +76,7 @@ const marketsWereRemoved = xml => { } return false; }; -const loadWorkspace = xml => { +export const loadWorkspace = xml => { if (!strategyHasValidTradeTypeCategory(xml)) return; if (marketsWereRemoved(xml)) return; @@ -101,7 +102,7 @@ const loadWorkspace = xml => { ); }; -const loadBlocks = (xml, dropEvent = {}) => { +export const loadBlocks = (xml, dropEvent = {}) => { if (!strategyHasValidTradeTypeCategory(xml)) return; if (marketsWereRemoved(xml)) return; @@ -293,7 +294,7 @@ export default class _Blockly { try { xml = Blockly.Xml.textToDom(blockStr); } catch (e) { - throw createError('FileLoad', translate('Unrecognized file format.')); + throw createError('FileLoad', translate('Unrecognized file format')); } try { @@ -303,7 +304,7 @@ export default class _Blockly { loadWorkspace(xml); } } catch (e) { - throw createError('FileLoad', translate('Unable to load the block file.')); + throw createError('FileLoad', translate('Unable to load the block file')); } } /* eslint-disable class-methods-use-this */ @@ -311,15 +312,10 @@ export default class _Blockly { const { filename, collection } = arg; setBeforeUnload(true); + const xml = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace); - Array.from(xml.children).forEach(blockDom => { - const blockId = blockDom.getAttribute('id'); - if (!blockId) return; - const block = Blockly.mainWorkspace.getBlockById(blockId); - if ('loaderId' in block) { - blockDom.remove(); - } - }); + cleanBeforeExport(xml); + save(filename, collection, xml); } run(limitations = {}) { From b39b9e5230a0d183c47d9b39bfde92261de74dc2 Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Tue, 19 Mar 2019 11:43:09 +0800 Subject: [PATCH 04/42] Create logic for cleanBeforeExport function --- src/botPage/view/blockly/utils.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/botPage/view/blockly/utils.js b/src/botPage/view/blockly/utils.js index 237b7af0c9..cacb8aa752 100644 --- a/src/botPage/view/blockly/utils.js +++ b/src/botPage/view/blockly/utils.js @@ -495,3 +495,14 @@ export const hideInteractionsFromBlockly = callback => { callback(); Blockly.Events.recordUndo = true; }; + +export const cleanBeforeExport = xml => { + Array.from(xml.children).forEach(blockDom => { + const blockId = blockDom.getAttribute('id'); + if (!blockId) return; + const block = Blockly.mainWorkspace.getBlockById(blockId); + if ('loaderId' in block) { + blockDom.remove(); + } + }); +}; From 66b55144f0885e6dbce038bbda6f55753b24bf75 Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Tue, 19 Mar 2019 11:44:56 +0800 Subject: [PATCH 05/42] Rename Save to SaveDialog, add LoadDialog + IntegrationsDialog --- .../view/Dialogs/IntegrationsDialog.js | 42 +++++ src/botPage/view/Dialogs/LoadDialog.js | 90 +++++++++ src/botPage/view/Dialogs/Save.js | 95 ---------- src/botPage/view/Dialogs/SaveDialog.js | 176 ++++++++++++++++++ 4 files changed, 308 insertions(+), 95 deletions(-) create mode 100644 src/botPage/view/Dialogs/IntegrationsDialog.js create mode 100644 src/botPage/view/Dialogs/LoadDialog.js delete mode 100644 src/botPage/view/Dialogs/Save.js create mode 100644 src/botPage/view/Dialogs/SaveDialog.js diff --git a/src/botPage/view/Dialogs/IntegrationsDialog.js b/src/botPage/view/Dialogs/IntegrationsDialog.js new file mode 100644 index 0000000000..812919f2fd --- /dev/null +++ b/src/botPage/view/Dialogs/IntegrationsDialog.js @@ -0,0 +1,42 @@ +import React, { PureComponent } from 'react'; +import Dialog from './Dialog'; +import { translate } from '../../../common/i18n'; +import GoogleDriveIntegration from '../react-components/Integrations/GoogleDriveIntegration'; +import * as style from '../style'; +import { observer as globalObserver } from '../../../common/utils/observer'; + +class IntegrationsContent extends PureComponent { + constructor() { + super(); + } + + componentDidMount() { + globalObserver.register('dialog.load.opened', this.props.closeDialog); + globalObserver.register('dialog.save.opened', this.props.closeDialog); + } + + render() { + return ( +
+ +
+ ); + } +} + +export default class IntegrationsDialog extends Dialog { + constructor() { + const closeDialog = () => { + this.close(); + }; + super('integrations-dialog', translate('Integrations'), , { + width : 500, + height: 'auto', + }); + } + + open() { + super.open(); + globalObserver.emit('dialog.integrations.opened'); + } +} diff --git a/src/botPage/view/Dialogs/LoadDialog.js b/src/botPage/view/Dialogs/LoadDialog.js new file mode 100644 index 0000000000..934faf701e --- /dev/null +++ b/src/botPage/view/Dialogs/LoadDialog.js @@ -0,0 +1,90 @@ +import React, { PureComponent } from 'react'; +import Dialog from './Dialog'; +import { translate } from '../../../common/i18n'; +import * as style from '../style'; +import googleDrive from '../../../common/integrations/gdrive'; +import { observer as globalObserver } from '../../../common/utils/observer'; + +class LoadContent extends PureComponent { + constructor() { + super(); + this.state = { loadType: 'local' }; + } + + componentDidMount() { + globalObserver.register('dialog.save.opened', this.props.closeDialog); + globalObserver.register('dialog.integrations.opened', this.props.closeDialog); + } + + onChange(event) { + this.setState({ loadType: event.target.value }); + } + + submit() { + switch (this.state.loadType) { + case 'google-drive': + googleDrive.createFolderPicker().then(() => this.props.closeDialog()); + break; + default: + $('#files').click(); + this.props.closeDialog(); + break; + } + } + + render() { + return ( +
this.submit()} + > +
+ + this.onChange(e)} + /> + + + + this.onChange(e)} + /> + + +
+
+ +
+
+ ); + } + static props: { closeDialog: PropTypes.func }; +} + +export default class LoadDialog extends Dialog { + constructor() { + const closeDialog = () => { + this.close(); + }; + super('load-dialog', translate('Load blocks'), , style.dialogLayout); + } + + open() { + super.open(); + globalObserver.emit('dialog.load.opened'); + } +} diff --git a/src/botPage/view/Dialogs/Save.js b/src/botPage/view/Dialogs/Save.js deleted file mode 100644 index 43343851fa..0000000000 --- a/src/botPage/view/Dialogs/Save.js +++ /dev/null @@ -1,95 +0,0 @@ -import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; -import { translate } from '../../../common/i18n'; -import * as style from '../style'; -import Dialog from './Dialog'; - -class SaveContent extends PureComponent { - constructor() { - super(); - this.state = { - error: null, - }; - } - submit() { - const filename = $(this.filename).val(); - const collection = $(this.isCollection).prop('checked'); - - this.props.onSave({ - filename, - collection, - }); - } - render() { - return ( -
this.submit()} - className="dialog-content" - style={style.content} - > -
-
- -
-
- { - this.isCollection = el; - }} - style={style.checkbox} - /> - -
-
-
- -
-
- ); - } - static props: { - onSave: PropTypes.func, - }; -} - -export default class Save extends Dialog { - constructor() { - const onSave = arg => { - this.limitsPromise(arg); - this.close(); - }; - super('save-dialog', translate('Save blocks as'), , style.dialogLayout); - } - save() { - this.open(); - return new Promise(resolve => { - this.limitsPromise = resolve; - }); - } -} diff --git a/src/botPage/view/Dialogs/SaveDialog.js b/src/botPage/view/Dialogs/SaveDialog.js new file mode 100644 index 0000000000..ce2def9314 --- /dev/null +++ b/src/botPage/view/Dialogs/SaveDialog.js @@ -0,0 +1,176 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { translate } from '../../../common/i18n'; +import * as style from '../style'; +import Dialog from './Dialog'; +import googleDrive from '../../../common/integrations/gdrive'; +import { cleanBeforeExport } from '../blockly/utils'; +import { observer as globalObserver } from '../../../common/utils/observer'; + +class SaveContent extends PureComponent { + constructor() { + super(); + this.state = { + error : null, + saveType: 'local', + }; + } + + componentDidMount() { + globalObserver.register('dialog.load.opened', this.props.closeDialog); + globalObserver.register('dialog.integrations.opened', this.props.closeDialog); + } + + submit() { + const filename = $(this.filename).val() || 'binary-bot'; + const collection = $(this.isCollection).prop('checked'); + + switch (this.state.saveType) { + case 'google-drive': + const xml = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace); + cleanBeforeExport(xml); + + xml.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'); + xml.setAttribute('collection', collection); + + googleDrive + .saveFile({ + name : filename, + content : Blockly.Xml.domToPrettyText(xml), + mimeType: 'application/xml', + }) + .then(() => { + globalObserver.emit('ui.log.success', translate('Successfully uploaded to Google Drive')); + this.props.closeDialog(); + }) + .catch(e => { + globalObserver.emit('ui.log.warn', e.message); + }); + break; + + default: + this.props.onSave({ + filename, + collection, + }); + break; + } + } + + onChange(event) { + this.setState({ saveType: event.target.value }); + } + + render() { + return ( +
this.submit()} + className="dialog-content" + style={style.content} + > +
+ { + this.filename = el; + }} + defaultValue="binary-bot" + data-lpignore="true" + autoComplete="false" + /> +
+
+ + this.onChange(e)} + /> + + + + this.onChange(e)} + /> + + +
+
+ { + this.isCollection = el; + }} + style={style.checkbox} + /> + +
+ {translate('Save your blocks and settings for re-use in other strategies')} +
+
+
+ +
+
+ ); + } + + static props: { + onSave: PropTypes.func, + closeDialog: PropTypes.func, + }; +} + +export default class SaveDialog extends Dialog { + constructor() { + const closeDialog = () => { + this.close(); + }; + const onSave = arg => { + this.limitsPromise(arg); + closeDialog(); + }; + super( + 'save-dialog', + translate('Save blocks'), + , + style.dialogLayout + ); + } + + save() { + this.open(); + return new Promise(resolve => { + this.limitsPromise = resolve; + }); + } + + open() { + super.open(); + globalObserver.emit('dialog.save.opened'); + } +} From 2597c220e872d00cac2bd014ce4c4267288ce8de Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Tue, 19 Mar 2019 11:46:43 +0800 Subject: [PATCH 06/42] Update import paths --- src/botPage/view/Dialogs/LoadDialog.js | 2 +- src/botPage/view/Dialogs/SaveDialog.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/botPage/view/Dialogs/LoadDialog.js b/src/botPage/view/Dialogs/LoadDialog.js index 934faf701e..956108161c 100644 --- a/src/botPage/view/Dialogs/LoadDialog.js +++ b/src/botPage/view/Dialogs/LoadDialog.js @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; import Dialog from './Dialog'; import { translate } from '../../../common/i18n'; import * as style from '../style'; -import googleDrive from '../../../common/integrations/gdrive'; +import googleDrive from '../../../common/integrations/GoogleDrive'; import { observer as globalObserver } from '../../../common/utils/observer'; class LoadContent extends PureComponent { diff --git a/src/botPage/view/Dialogs/SaveDialog.js b/src/botPage/view/Dialogs/SaveDialog.js index ce2def9314..090036682c 100644 --- a/src/botPage/view/Dialogs/SaveDialog.js +++ b/src/botPage/view/Dialogs/SaveDialog.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { translate } from '../../../common/i18n'; import * as style from '../style'; import Dialog from './Dialog'; -import googleDrive from '../../../common/integrations/gdrive'; +import googleDrive from '../../../common/integrations/GoogleDrive'; import { cleanBeforeExport } from '../blockly/utils'; import { observer as globalObserver } from '../../../common/utils/observer'; From 2a97b7cbd9aaa9c85ceeeec71b401e697204d039 Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Tue, 19 Mar 2019 11:47:02 +0800 Subject: [PATCH 07/42] Create GoogleDriveIntegration component --- .../Integrations/GoogleDriveIntegration.js | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 src/botPage/view/react-components/Integrations/GoogleDriveIntegration.js diff --git a/src/botPage/view/react-components/Integrations/GoogleDriveIntegration.js b/src/botPage/view/react-components/Integrations/GoogleDriveIntegration.js new file mode 100644 index 0000000000..ac145e9666 --- /dev/null +++ b/src/botPage/view/react-components/Integrations/GoogleDriveIntegration.js @@ -0,0 +1,45 @@ +import React, { PureComponent } from 'react'; +import { translate } from '../../../../common/i18n'; +import googleDrive from '../../../../common/integrations/GoogleDrive'; +import { observer as globalObserver } from '../../../../common/utils/observer'; + +export default class GoogleDriveIntegration extends PureComponent { + constructor() { + super(); + this.state = { isAuthorised: false }; + } + + componentDidMount() { + globalObserver.register('integrations.googledrive', data => this.setState(data)); + } + + render() { + return ( +
+
+

Google Drive

+
{translate('Save blocks and strategies to')} Google Drive
+ {googleDrive.isAuthorised && ( +
+ {`${translate('You are logged in as')} ${googleDrive.profile.getEmail()}`} +
+ )} +
+ +
+ ); + } +} From cdcadb4fcbbe1ec6895dfa80620accdfb602e77e Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Tue, 19 Mar 2019 11:47:46 +0800 Subject: [PATCH 08/42] Create styling rules for load-dialog, save-dialog, integrations-dialog --- static/css/_panel.scss | 68 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/static/css/_panel.scss b/static/css/_panel.scss index b0c85397ad..bb4f27cddc 100644 --- a/static/css/_panel.scss +++ b/static/css/_panel.scss @@ -321,3 +321,71 @@ $disabled-color: #F2F2F2; .ui-dialog-content { padding: 0px !important; } + +#load-dialog, #save-dialog { + .integration-option { + margin: 0.5em; + } +} + +#load-dialog, #save-dialog, #integrations-dialog { + .input-row { + margin: 1em 0; + } + .input-row.last { + margin-bottom: 0; + } + & .description { + font-size: 75%; + } +} + +#save-dialog { + #save-filename { + width: 100%; + height: 40px; + } + #collection { + padding: 1.2em; + border: 1px solid $brand-gray; + border-radius: 10px; + & .description { + margin-left: 21px; + margin-top: 0.5em; + margin-bottom: 0; + } + } +} + +#integrations-dialog { + .integration { + display: table; + width: 100%; + + h2 { + color: $black; + font-size: 20px; + margin: 0 0 0.1em 0; + } + .description { + margin: 0 0 0.1em 0; + } + .left { + width: 60%; + display: table-cell; + vertical-align: top; + } + .right { + width: 39%; + display: table-cell; + text-align: right; + & > a { + display: block; + } + } + .integration-user { + color: $brand-dark-gray; + font-size: 75%; + } + } +} From 6524861015b3c7cdfab10e81762897c9a90e7d9f Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Tue, 19 Mar 2019 11:51:35 +0800 Subject: [PATCH 09/42] Logout Google account on logout, add binds for toolbox buttons --- src/botPage/view/View.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/botPage/view/View.js b/src/botPage/view/View.js index be027629c8..ef8ce478c3 100644 --- a/src/botPage/view/View.js +++ b/src/botPage/view/View.js @@ -4,7 +4,9 @@ import 'jquery-ui/ui/widgets/dialog'; import _Blockly from './blockly'; import Chart from './Dialogs/Chart'; import Limits from './Dialogs/Limits'; -import Save from './Dialogs/Save'; +import IntegrationsDialog from './Dialogs/IntegrationsDialog'; +import LoadDialog from './Dialogs/LoadDialog'; +import SaveDialog from './Dialogs/SaveDialog'; import TradingView from './Dialogs/TradingView'; import logHandler from './logger'; import LogTable from './LogTable'; @@ -26,6 +28,7 @@ import { addTokenIfValid, } from '../../common/appId'; import { translate } from '../../common/i18n'; +import googleDrive from '../../common/integrations/GoogleDrive'; import { getLanguage } from '../../common/lang'; import { observer as globalObserver } from '../../common/utils/observer'; import { @@ -139,7 +142,9 @@ const clearRealityCheck = () => { }; const limits = new Limits(); -const saveDialog = new Save(); +const integrationsDialog = new IntegrationsDialog(); +const loadDialog = new LoadDialog(); +const saveDialog = new SaveDialog(); const getLandingCompanyForToken = id => { let landingCompany; @@ -346,6 +351,7 @@ export default class View { .then(() => { this.stop(); Elevio.logoutUser(); + googleDrive.signOut(); removeTokens(); }) .catch(() => {}); @@ -382,6 +388,10 @@ export default class View { classes : { 'ui-dialog-titlebar-close': 'icon-close' }, }); + $('#integrations').click(() => integrationsDialog.open()); + + $('#load-xml').click(() => loadDialog.open()); + $('#save-xml').click(() => saveDialog.save().then(arg => this.blockly.save(arg))); $('#undo').click(() => { @@ -449,10 +459,6 @@ export default class View { $('#toggleHeaderButton').click(() => this.showHeader($('#header').is(':hidden'))); - $('#loadXml').click(() => { - $('#files').click(); - }); - $('#logout, #toolbox-logout').click(() => { setBeforeUnload(true); logout(); From 43c4a7ba2c402b594c4f2d436e3c9f7c1fbbcddc Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Tue, 19 Mar 2019 11:52:00 +0800 Subject: [PATCH 10/42] Rename class method --- src/botPage/view/Dialogs/LoadDialog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/botPage/view/Dialogs/LoadDialog.js b/src/botPage/view/Dialogs/LoadDialog.js index 956108161c..f35c4a93b3 100644 --- a/src/botPage/view/Dialogs/LoadDialog.js +++ b/src/botPage/view/Dialogs/LoadDialog.js @@ -23,7 +23,7 @@ class LoadContent extends PureComponent { submit() { switch (this.state.loadType) { case 'google-drive': - googleDrive.createFolderPicker().then(() => this.props.closeDialog()); + googleDrive.createFilePicker().then(() => this.props.closeDialog()); break; default: $('#files').click(); From 9aff00163ebd0656560d697d6627a21f2d7bbc61 Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Tue, 19 Mar 2019 13:58:18 +0800 Subject: [PATCH 11/42] Increase/decrease spacing for consistency --- static/css/_panel.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/static/css/_panel.scss b/static/css/_panel.scss index bb4f27cddc..27cc5c61ca 100644 --- a/static/css/_panel.scss +++ b/static/css/_panel.scss @@ -351,7 +351,7 @@ $disabled-color: #F2F2F2; border-radius: 10px; & .description { margin-left: 21px; - margin-top: 0.5em; + margin-top: 0.2em; margin-bottom: 0; } } @@ -365,10 +365,10 @@ $disabled-color: #F2F2F2; h2 { color: $black; font-size: 20px; - margin: 0 0 0.1em 0; + margin: 0 0 0.2em 0; } .description { - margin: 0 0 0.1em 0; + margin: 0 0 0.2em 0; } .left { width: 60%; @@ -384,7 +384,7 @@ $disabled-color: #F2F2F2; } } .integration-user { - color: $brand-dark-gray; + color: #b9b9b9; font-size: 75%; } } From 7c423f01e5cae25156f2753199430cce5418243b Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Tue, 19 Mar 2019 14:02:11 +0800 Subject: [PATCH 12/42] Re-order imports --- src/botPage/view/Dialogs/IntegrationsDialog.js | 2 +- src/botPage/view/Dialogs/LoadDialog.js | 2 +- src/botPage/view/Dialogs/SaveDialog.js | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/botPage/view/Dialogs/IntegrationsDialog.js b/src/botPage/view/Dialogs/IntegrationsDialog.js index 812919f2fd..e4e9aa4b31 100644 --- a/src/botPage/view/Dialogs/IntegrationsDialog.js +++ b/src/botPage/view/Dialogs/IntegrationsDialog.js @@ -1,8 +1,8 @@ import React, { PureComponent } from 'react'; import Dialog from './Dialog'; -import { translate } from '../../../common/i18n'; import GoogleDriveIntegration from '../react-components/Integrations/GoogleDriveIntegration'; import * as style from '../style'; +import { translate } from '../../../common/i18n'; import { observer as globalObserver } from '../../../common/utils/observer'; class IntegrationsContent extends PureComponent { diff --git a/src/botPage/view/Dialogs/LoadDialog.js b/src/botPage/view/Dialogs/LoadDialog.js index f35c4a93b3..1ef4e6c6c2 100644 --- a/src/botPage/view/Dialogs/LoadDialog.js +++ b/src/botPage/view/Dialogs/LoadDialog.js @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import Dialog from './Dialog'; -import { translate } from '../../../common/i18n'; import * as style from '../style'; +import { translate } from '../../../common/i18n'; import googleDrive from '../../../common/integrations/GoogleDrive'; import { observer as globalObserver } from '../../../common/utils/observer'; diff --git a/src/botPage/view/Dialogs/SaveDialog.js b/src/botPage/view/Dialogs/SaveDialog.js index 090036682c..3cf3c4abd9 100644 --- a/src/botPage/view/Dialogs/SaveDialog.js +++ b/src/botPage/view/Dialogs/SaveDialog.js @@ -1,10 +1,10 @@ -import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; -import { translate } from '../../../common/i18n'; -import * as style from '../style'; +import React, { PureComponent } from 'react'; import Dialog from './Dialog'; -import googleDrive from '../../../common/integrations/GoogleDrive'; import { cleanBeforeExport } from '../blockly/utils'; +import * as style from '../style'; +import { translate } from '../../../common/i18n'; +import googleDrive from '../../../common/integrations/GoogleDrive'; import { observer as globalObserver } from '../../../common/utils/observer'; class SaveContent extends PureComponent { From 2facd4dc493b77fdc1f82e4ae2011d17ba00911e Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Wed, 20 Mar 2019 11:27:28 +0800 Subject: [PATCH 13/42] Catch rejected promise, do nothing --- src/botPage/view/Dialogs/LoadDialog.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/botPage/view/Dialogs/LoadDialog.js b/src/botPage/view/Dialogs/LoadDialog.js index 1ef4e6c6c2..1084f886ae 100644 --- a/src/botPage/view/Dialogs/LoadDialog.js +++ b/src/botPage/view/Dialogs/LoadDialog.js @@ -23,7 +23,10 @@ class LoadContent extends PureComponent { submit() { switch (this.state.loadType) { case 'google-drive': - googleDrive.createFilePicker().then(() => this.props.closeDialog()); + googleDrive + .createFilePicker() + .then(() => this.props.closeDialog()) + .catch(() => {}); break; default: $('#files').click(); From e404cb3746390f2d46fcd8b4a4f821fdcda1d1ed Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Wed, 20 Mar 2019 11:30:58 +0800 Subject: [PATCH 14/42] Update observer event name --- src/botPage/view/index.js | 2 +- .../react-components/Integrations/GoogleDriveIntegration.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/botPage/view/index.js b/src/botPage/view/index.js index 2dbf151553..f0b04e60e8 100644 --- a/src/botPage/view/index.js +++ b/src/botPage/view/index.js @@ -2,9 +2,9 @@ import 'babel-polyfill'; import 'jquery-ui/ui/widgets/dialog'; import 'notifyjs-browser'; +import View from './View'; import '../../common/binary-ui/dropdown'; import Elevio from '../../common/elevio'; -import View from './View'; $.ajaxSetup({ cache: false, diff --git a/src/botPage/view/react-components/Integrations/GoogleDriveIntegration.js b/src/botPage/view/react-components/Integrations/GoogleDriveIntegration.js index ac145e9666..a40bedd99a 100644 --- a/src/botPage/view/react-components/Integrations/GoogleDriveIntegration.js +++ b/src/botPage/view/react-components/Integrations/GoogleDriveIntegration.js @@ -10,7 +10,7 @@ export default class GoogleDriveIntegration extends PureComponent { } componentDidMount() { - globalObserver.register('integrations.googledrive', data => this.setState(data)); + globalObserver.register('googledrive.authorise', data => this.setState(data)); } render() { From a2e3f405833507a3150a8544832ff0d868218174 Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Wed, 20 Mar 2019 15:58:11 +0800 Subject: [PATCH 15/42] Create styling rules for barspinner in button --- static/css/_toolbox.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/static/css/_toolbox.scss b/static/css/_toolbox.scss index ec1dd85849..79daa64c74 100644 --- a/static/css/_toolbox.scss +++ b/static/css/_toolbox.scss @@ -110,3 +110,13 @@ } } } + +button { + & > .barspinner.white { + position: relative; + margin: 3px auto; + height: 13px; + top: initial; + left: initial; + } +} From 6694d8cecb50276c0ba5b4a5b9946d5202fbd1ce Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Wed, 20 Mar 2019 16:10:50 +0800 Subject: [PATCH 16/42] Show barspinner when making requests to Google Drive --- src/botPage/view/Dialogs/LoadDialog.js | 19 ++++++++++++++++--- src/botPage/view/Dialogs/SaveDialog.js | 22 ++++++++++++++++++---- src/common/utils/tools.js | 17 +++++++++++++++++ 3 files changed, 51 insertions(+), 7 deletions(-) diff --git a/src/botPage/view/Dialogs/LoadDialog.js b/src/botPage/view/Dialogs/LoadDialog.js index 1084f886ae..a8dfa7e7d5 100644 --- a/src/botPage/view/Dialogs/LoadDialog.js +++ b/src/botPage/view/Dialogs/LoadDialog.js @@ -4,6 +4,7 @@ import * as style from '../style'; import { translate } from '../../../common/i18n'; import googleDrive from '../../../common/integrations/GoogleDrive'; import { observer as globalObserver } from '../../../common/utils/observer'; +import { showSpinnerInButton, removeSpinnerInButton } from '../../../common/utils/tools'; class LoadContent extends PureComponent { constructor() { @@ -23,10 +24,16 @@ class LoadContent extends PureComponent { submit() { switch (this.state.loadType) { case 'google-drive': + showSpinnerInButton($(this.submitButton)); googleDrive .createFilePicker() - .then(() => this.props.closeDialog()) - .catch(() => {}); + .then(() => { + this.props.closeDialog(); + removeSpinnerInButton($(this.submitButton), translate('Load')); + }) + .catch(() => { + removeSpinnerInButton($(this.submitButton), translate('Load')); + }); break; default: $('#files').click(); @@ -68,7 +75,13 @@ class LoadContent extends PureComponent {
-
diff --git a/src/botPage/view/Dialogs/SaveDialog.js b/src/botPage/view/Dialogs/SaveDialog.js index 3cf3c4abd9..bb0bda5ecf 100644 --- a/src/botPage/view/Dialogs/SaveDialog.js +++ b/src/botPage/view/Dialogs/SaveDialog.js @@ -6,6 +6,7 @@ import * as style from '../style'; import { translate } from '../../../common/i18n'; import googleDrive from '../../../common/integrations/GoogleDrive'; import { observer as globalObserver } from '../../../common/utils/observer'; +import { showSpinnerInButton, removeSpinnerInButton } from '../../../common/utils/tools'; class SaveContent extends PureComponent { constructor() { @@ -27,6 +28,8 @@ class SaveContent extends PureComponent { switch (this.state.saveType) { case 'google-drive': + showSpinnerInButton($(this.submitButton)); + const xml = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace); cleanBeforeExport(xml); @@ -42,9 +45,13 @@ class SaveContent extends PureComponent { .then(() => { globalObserver.emit('ui.log.success', translate('Successfully uploaded to Google Drive')); this.props.closeDialog(); + removeSpinnerInButton($(this.submitButton), translate('Save')); }) - .catch(e => { - globalObserver.emit('ui.log.warn', e.message); + .catch(error => { + if (error !== google.picker.Action.CANCEL) { + globalObserver.emit('ui.log.warn', error.message); + } + removeSpinnerInButton($(this.submitButton), translate('Save')); }); break; @@ -132,8 +139,15 @@ class SaveContent extends PureComponent { {translate('Save your blocks and settings for re-use in other strategies')} -
- +
+
); diff --git a/src/common/utils/tools.js b/src/common/utils/tools.js index 6d61978926..64da2c3b69 100644 --- a/src/common/utils/tools.js +++ b/src/common/utils/tools.js @@ -94,3 +94,20 @@ export const getExtension = () => { const extension = host.split('.').slice(-1)[0]; return host !== extension ? extension : ''; }; + +export const showSpinnerInButton = $buttonElement => { + $buttonElement + .html(() => { + const barspinner = $('