diff --git a/.eslintrc.js b/.eslintrc.js index 2eb86f64..3c6c4baf 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -16,9 +16,7 @@ module.exports = { ], globals: { "NODE_ENV": false, - "VERSION": false, - "GOOGLE_CLIENT_ID": false, - "GITHUB_CLIENT_ID": false + "VERSION": false }, // check if imports actually resolve 'settings': { diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js index fbebcecd..6ec2eef5 100644 --- a/build/webpack.dev.conf.js +++ b/build/webpack.dev.conf.js @@ -19,9 +19,7 @@ module.exports = merge(baseWebpackConfig, { devtool: 'source-map', plugins: [ new webpack.DefinePlugin({ - NODE_ENV: config.dev.env.NODE_ENV, - GOOGLE_CLIENT_ID: config.dev.env.GOOGLE_CLIENT_ID, - GITHUB_CLIENT_ID: config.dev.env.GITHUB_CLIENT_ID + NODE_ENV: config.dev.env.NODE_ENV }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), diff --git a/config/dev.env.js b/config/dev.env.js index 6b882aa6..efead7c8 100644 --- a/config/dev.env.js +++ b/config/dev.env.js @@ -2,7 +2,5 @@ var merge = require('webpack-merge') var prodEnv = require('./prod.env') module.exports = merge(prodEnv, { - NODE_ENV: '"development"', - GOOGLE_CLIENT_ID: '"241271498917-c3loeet001r90q6u79q484bsh5clg4fr.apps.googleusercontent.com"', - GITHUB_CLIENT_ID: '"cbf0cf25cfd026be23e1"' + NODE_ENV: '"development"' }) diff --git a/config/index.js b/config/index.js index b5211e47..9fecd843 100644 --- a/config/index.js +++ b/config/index.js @@ -24,7 +24,7 @@ module.exports = { dev: { env: require('./dev.env'), port: 8080, - autoOpenBrowser: true, + autoOpenBrowser: false, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, diff --git a/config/prod.env.js b/config/prod.env.js index ee5d146f..773d263d 100644 --- a/config/prod.env.js +++ b/config/prod.env.js @@ -1,5 +1,3 @@ module.exports = { - NODE_ENV: '"production"', - GOOGLE_CLIENT_ID: '"241271498917-t4t7d07qis7oc0ahaskbif3ft6tk63cd.apps.googleusercontent.com"', - GITHUB_CLIENT_ID: '"30c1491057c9ad4dbd56"' + NODE_ENV: '"production"' } diff --git a/server/conf.js b/server/conf.js new file mode 100644 index 00000000..0394803f --- /dev/null +++ b/server/conf.js @@ -0,0 +1,37 @@ +const pandocPath = process.env.PANDOC_PATH || 'pandoc'; +const wkhtmltopdfPath = process.env.WKHTMLTOPDF_PATH || 'wkhtmltopdf'; +const userBucketName = process.env.USER_BUCKET_NAME || 'stackedit-users'; +const paypalUri = process.env.PAYPAL_URI || 'https://www.paypal.com/cgi-bin/webscr'; +const paypalReceiverEmail = process.env.PAYPAL_RECEIVER_EMAIL; + +const dropboxAppKey = process.env.DROPBOX_APP_KEY; +const dropboxAppKeyFull = process.env.DROPBOX_APP_KEY_FULL; +const githubClientId = process.env.GITHUB_CLIENT_ID; +const githubClientSecret = process.env.GITHUB_CLIENT_SECRET; +const googleClientId = process.env.GOOGLE_CLIENT_ID; +const googleApiKey = process.env.GOOGLE_API_KEY; +const wordpressClientId = process.env.WORDPRESS_CLIENT_ID; + +exports.values = { + pandocPath, + wkhtmltopdfPath, + userBucketName, + paypalUri, + paypalReceiverEmail, + dropboxAppKey, + dropboxAppKeyFull, + githubClientId, + githubClientSecret, + googleClientId, + googleApiKey, + wordpressClientId, +}; + +exports.publicValues = { + dropboxAppKey, + dropboxAppKeyFull, + githubClientId, + googleClientId, + googleApiKey, + wordpressClientId, +}; diff --git a/server/github.js b/server/github.js index eadb340c..83aff9e3 100644 --- a/server/github.js +++ b/server/github.js @@ -1,5 +1,6 @@ const qs = require('qs'); // eslint-disable-line import/no-extraneous-dependencies const request = require('request'); +const conf = require('./conf'); function githubToken(clientId, code) { return new Promise((resolve, reject) => { @@ -8,7 +9,7 @@ function githubToken(clientId, code) { url: 'https://github.com/login/oauth/access_token', qs: { client_id: clientId, - client_secret: process.env.GITHUB_SECRET, + client_secret: conf.values.githubClientSecret, code, }, }, (err, res, body) => { diff --git a/server/index.js b/server/index.js index 289d8519..0f116eee 100644 --- a/server/index.js +++ b/server/index.js @@ -6,6 +6,7 @@ const user = require('./user'); const github = require('./github'); const pdf = require('./pdf'); const pandoc = require('./pandoc'); +const conf = require('./conf'); const resolvePath = pathToResolve => path.join(__dirname, '..', pathToResolve); @@ -24,6 +25,7 @@ module.exports = (app, serveV4) => { } app.get('/oauth2/githubToken', github.githubToken); + app.get('/conf', (req, res) => res.send(conf.publicValues)); app.get('/userInfo', user.userInfo); app.post('/pdfExport', pdf.generate); app.post('/pandocExport', pandoc.generate); diff --git a/server/pandoc.js b/server/pandoc.js index 79b1505f..8ac0f3d3 100644 --- a/server/pandoc.js +++ b/server/pandoc.js @@ -3,6 +3,7 @@ const { spawn } = require('child_process'); const fs = require('fs'); const tmp = require('tmp'); const user = require('./user'); +const conf = require('./conf'); const outputFormats = { asciidoc: 'text/plain', @@ -90,10 +91,9 @@ exports.generate = (req, res) => { reject(error); } - const binPath = process.env.PANDOC_PATH || 'pandoc'; const format = outputFormat === 'pdf' ? 'latex' : outputFormat; params.push('-f', 'json', '-t', format, '-o', filePath); - const pandoc = spawn(binPath, params, { + const pandoc = spawn(conf.values.pandocPath, params, { stdio: [ 'pipe', 'ignore', diff --git a/server/pdf.js b/server/pdf.js index 7b849732..0fe4337a 100644 --- a/server/pdf.js +++ b/server/pdf.js @@ -3,6 +3,7 @@ const { spawn } = require('child_process'); const fs = require('fs'); const tmp = require('tmp'); const user = require('./user'); +const conf = require('./conf'); /* eslint-disable no-var, prefer-arrow-callback, func-names */ function waitForJavaScript() { @@ -127,10 +128,9 @@ exports.generate = (req, res) => { params.push('--page-size', !authorizedPageSizes.includes(options.pageSize) ? 'A4' : options.pageSize); // Use a temp file as wkhtmltopdf can't access /dev/stdout on Amazon EC2 for some reason - const binPath = process.env.WKHTMLTOPDF_PATH || 'wkhtmltopdf'; params.push('--run-script', `${waitForJavaScript.toString()}waitForJavaScript()`); params.push('--window-status', 'done'); - const wkhtmltopdf = spawn(binPath, params.concat('-', filePath), { + const wkhtmltopdf = spawn(conf.values.wkhtmltopdfPath, params.concat('-', filePath), { stdio: [ 'pipe', 'ignore', diff --git a/server/user.js b/server/user.js index 9ff126d7..6f94411e 100644 --- a/server/user.js +++ b/server/user.js @@ -1,13 +1,8 @@ const request = require('request'); const AWS = require('aws-sdk'); const verifier = require('google-id-token-verifier'); +const conf = require('./conf'); -const { - USER_BUCKET_NAME = 'stackedit-users', - PAYPAL_URI = 'https://www.paypal.com/cgi-bin/webscr', - PAYPAL_RECEIVER_EMAIL = 'stackedit.project@gmail.com', - GOOGLE_CLIENT_ID, -} = process.env; const s3Client = new AWS.S3(); const cb = (resolve, reject) => (err, res) => { @@ -20,7 +15,7 @@ const cb = (resolve, reject) => (err, res) => { exports.getUser = id => new Promise((resolve, reject) => { s3Client.getObject({ - Bucket: USER_BUCKET_NAME, + Bucket: conf.values.userBucketName, Key: id, }, cb(resolve, reject)); }) @@ -35,7 +30,7 @@ exports.getUser = id => new Promise((resolve, reject) => { exports.putUser = (id, user) => new Promise((resolve, reject) => { s3Client.putObject({ - Bucket: USER_BUCKET_NAME, + Bucket: conf.values.userBucketName, Key: id, Body: JSON.stringify(user), }, cb(resolve, reject)); @@ -43,13 +38,13 @@ exports.putUser = (id, user) => new Promise((resolve, reject) => { exports.removeUser = id => new Promise((resolve, reject) => { s3Client.deleteObject({ - Bucket: USER_BUCKET_NAME, + Bucket: conf.values.userBucketName, Key: id, }, cb(resolve, reject)); }); exports.getUserFromToken = idToken => new Promise((resolve, reject) => verifier - .verify(idToken, GOOGLE_CLIENT_ID, cb(resolve, reject))) + .verify(idToken, conf.values.googleClientId, cb(resolve, reject))) .then(tokenInfo => exports.getUser(tokenInfo.sub)); exports.userInfo = (req, res) => exports.getUserFromToken(req.query.idToken) @@ -78,7 +73,7 @@ exports.paypalIpn = (req, res, next) => Promise.resolve() sponsorUntil = Date.now() + (5 * 366 * 24 * 60 * 60 * 1000); // 5 years } if ( - req.body.receiver_email !== PAYPAL_RECEIVER_EMAIL || + req.body.receiver_email !== conf.values.paypalReceiverEmail || req.body.payment_status !== 'Completed' || req.body.mc_currency !== 'USD' || (req.body.txn_type !== 'web_accept' && req.body.txn_type !== 'subscr_payment') || @@ -90,7 +85,7 @@ exports.paypalIpn = (req, res, next) => Promise.resolve() // Processing PayPal IPN req.body.cmd = '_notify-validate'; return new Promise((resolve, reject) => request.post({ - uri: PAYPAL_URI, + uri: conf.values.paypalUri, form: req.body, }, (err, response, body) => { if (err) { diff --git a/src/components/ExplorerNode.vue b/src/components/ExplorerNode.vue index 092979f1..e3771a3f 100644 --- a/src/components/ExplorerNode.vue +++ b/src/components/ExplorerNode.vue @@ -156,7 +156,7 @@ export default { ...sourceNode.item, parentId: targetNode.item.id, }); - badgeSvc.addBadge('moveFiles'); + badgeSvc.addBadge(sourceNode.isFolder ? 'moveFolder' : 'moveFile'); } }, async onContextMenu(evt) { diff --git a/src/components/Notification.vue b/src/components/Notification.vue index 2ed2ac4c..d60a5ce6 100644 --- a/src/components/Notification.vue +++ b/src/components/Notification.vue @@ -3,7 +3,7 @@
- +
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue index 99819cb2..bf4019f9 100644 --- a/src/components/SideBar.vue +++ b/src/components/SideBar.vue @@ -175,8 +175,9 @@ export default { p { margin: 10px 15px; - line-height: 1.5; - font-style: italic; + font-size: 0.9rem; + opacity: 0.67; + line-height: 1.3; } } diff --git a/src/components/menus/MainMenu.vue b/src/components/menus/MainMenu.vue index a5a8ef84..85f2260a 100644 --- a/src/components/menus/MainMenu.vue +++ b/src/components/menus/MainMenu.vue @@ -84,25 +84,25 @@ Print
- - -
Settings
- Tweak application and keyboard shortcuts. + + +
{{badgeCount}}/{{featureCount}}
Badges
+ List application features and earned badges. + + + +
{{accountCount}}
Accounts
+ Manage access to your external accounts.
{{templateCount}}
Templates
Configure Handlebars templates for your exports. - - -
{{accountCount}}
User accounts
- Manage access to your external accounts. - - - -
{{badgeCount}}/{{featureCount}}
Badges
- List application features and earned badges. + + +
Settings
+ Tweak application and keyboard shortcuts.
@@ -111,10 +111,8 @@ -
Reset application
- Sign out and clean all workspace data. + Reset application -
About StackEdit @@ -218,7 +216,7 @@ export default { async reset() { try { await store.dispatch('modal/open', 'reset'); - window.location.href = '#reset=true'; + localStorage.setItem('resetStackEdit', '1'); window.location.reload(); } catch (e) { /* Cancel */ } }, diff --git a/src/components/menus/PublishMenu.vue b/src/components/menus/PublishMenu.vue index 4c959045..8655a107 100644 --- a/src/components/menus/PublishMenu.vue +++ b/src/components/menus/PublishMenu.vue @@ -4,9 +4,6 @@

{{currentFileName}} can't be published as it's a temporary file.

-
-

You have to link an account to start publishing files.

-

{{currentFileName}} is already published.

@@ -20,6 +17,9 @@ Manage publication locations for {{currentFileName}}.
+
+

You have to link an account to start publishing files.

+
@@ -181,8 +181,13 @@ export default { return tokensToArray(store.getters['data/zendeskTokensBySub']); }, noToken() { - return Object.values(store.getters['data/tokensByType']) - .every(tokens => !Object.keys(tokens).length); + return !this.bloggerTokens.length + && !this.dropboxTokens.length + && !this.githubTokens.length + && !this.gitlabTokens.length + && !this.googleDriveTokens.length + && !this.wordpressTokens.length + && !this.zendeskTokens.length; }, }, methods: { diff --git a/src/components/menus/SyncMenu.vue b/src/components/menus/SyncMenu.vue index 6c5451e4..e76e9889 100644 --- a/src/components/menus/SyncMenu.vue +++ b/src/components/menus/SyncMenu.vue @@ -4,9 +4,6 @@

{{currentFileName}} can't be synced as it's a temporary file.

-
-

You have to link an account to start syncing files.

-

{{currentFileName}} is already synchronized.

@@ -20,6 +17,9 @@ Manage synchronized locations for {{currentFileName}}.
+
+

You have to link an account to start syncing files.

+
diff --git a/src/components/menus/WorkspaceBackupMenu.vue b/src/components/menus/WorkspaceBackupMenu.vue index 309f107c..d5281fc0 100644 --- a/src/components/menus/WorkspaceBackupMenu.vue +++ b/src/components/menus/WorkspaceBackupMenu.vue @@ -17,15 +17,19 @@ @@ -76,19 +86,24 @@ export default { .badge-entry { font-size: 0.8em; - margin: 0.75rem 0 0; - } - - svg { - width: 1.67em; - height: 1.67em; - margin-right: 0.25em; - opacity: 0.33; - flex: none; + margin: 0.75rem 0; } } -.badge-entry--earned svg { +.badge-entry__icon { + width: 1.67em; + height: 1.67em; + margin-right: 0.25em; + opacity: 0.3; + flex: none; +} + +.badge-entry__icon--some-earned { + opacity: 0.5; + color: goldenrod; +} + +.badge-entry__icon--earned { opacity: 1; color: goldenrod; } @@ -100,10 +115,10 @@ export default { .badge-entry__name { font-size: 1.2em; font-weight: bold; - opacity: 0.5; + opacity: 0.4; +} - .badge-entry--earned & { - opacity: 1; - } +.badge-entry__name--earned { + opacity: 1; } diff --git a/src/components/modals/WorkspaceManagementModal.vue b/src/components/modals/WorkspaceManagementModal.vue index 52120d58..3e9b49ac 100644 --- a/src/components/modals/WorkspaceManagementModal.vue +++ b/src/components/modals/WorkspaceManagementModal.vue @@ -4,7 +4,7 @@
-

The following workspaces are locally available:

+

The following workspaces are accessible:

@@ -48,11 +48,13 @@
+
+ + available offline + +
-
- ProTip: Workspaces are accessible offline, try it! -
@@ -61,11 +63,13 @@ @@ -208,4 +221,13 @@ $small-button-size: 22px; background-color: rgba(0, 0, 0, 0.1); } } + +.workspace-entry__offline { + font-size: 0.8rem; + line-height: 1; + padding: 0.15em 0.35em; + border-radius: 3px; + color: #fff; + background-color: darken($error-color, 10); +} diff --git a/src/data/constants.js b/src/data/constants.js index 187c76c6..fbf94c92 100644 --- a/src/data/constants.js +++ b/src/data/constants.js @@ -19,7 +19,8 @@ export default { 'settings', 'layoutSettings', 'tokens', - 'badges', + 'badgeCreations', + 'serverConf', ], textMaxLength: 250000, defaultName: 'Untitled', diff --git a/src/data/features.js b/src/data/features.js index e478fd29..3457ef42 100644 --- a/src/data/features.js +++ b/src/data/features.js @@ -1,13 +1,3 @@ -class Badge { - constructor(featureId, name, description, children, isEarned) { - this.featureId = featureId; - this.name = name; - this.description = description; - this.children = children; - this.isEarned = isEarned; - } -} - class Feature { constructor(id, badgeName, description, children = null) { this.id = id; @@ -16,13 +6,20 @@ class Feature { this.children = children; } - toBadge(earnings) { + toBadge(badgeCreations) { const children = this.children - ? this.children.map(child => child.toBadge(earnings)) + ? this.children.map(child => child.toBadge(badgeCreations)) : null; - return new Badge(this.id, this.badgeName, this.description, children, children - ? children.every(child => child.isEarned) - : !!earnings[this.id]); + return { + featureId: this.id, + name: this.badgeName, + description: this.description, + children, + isEarned: children + ? children.every(child => child.isEarned) + : !!badgeCreations[this.id], + hasSomeEarned: children && children.some(child => child.isEarned), + }; } } @@ -42,6 +39,16 @@ export default [ 'Renamer', 'Use the name field in the navigation bar to rename the current file.', ), + new Feature( + 'toggleExplorer', + 'Explorer toggler', + 'Use the navigation bar to toggle the explorer.', + ), + new Feature( + 'toggleSideBar', + 'Side bar toggler', + 'Use the navigation bar to toggle the side bar.', + ), ], ), new Feature( @@ -65,9 +72,14 @@ export default [ 'Use the file explorer to create a new folder in your workspace.', ), new Feature( - 'moveFiles', + 'moveFile', 'File mover', - 'Drag files in the file explorer to move them around.', + 'Drag a file in the file explorer to move it in another folder.', + ), + new Feature( + 'moveFolder', + 'Folder mover', + 'Drag a folder in the file explorer to move it in another folder.', ), new Feature( 'renameFile', @@ -80,15 +92,57 @@ export default [ 'Use the file explorer to rename a folder in your workspace.', ), new Feature( - 'removeFiles', + 'removeFile', 'File remover', - 'Use the file explorer to remove files in your workspace.', + 'Use the file explorer to remove a file in your workspace.', + ), + new Feature( + 'removeFolder', + 'Folder remover', + 'Use the file explorer to remove a folder in your workspace.', + ), + ], + ), + new Feature( + 'buttonBar', + 'Button bar expert', + 'Use the button bar to customize the editor layout and to toggle features.', + [ + new Feature( + 'toggleNavigationBar', + 'Navigation bar toggler', + 'Use the button bar to toggle the navigation bar.', + ), + new Feature( + 'toggleSidePreview', + 'Side preview toggler', + 'Use the button bar to toggle the side preview.', + ), + new Feature( + 'toggleEditor', + 'Editor toggler', + 'Use the button bar to toggle the editor.', + ), + new Feature( + 'toggleFocusMode', + 'Focused', + 'Use the button bar to toggle the focus mode. This mode keeps the caret vertically centered while typing.', + ), + new Feature( + 'toggleScrollSync', + 'Scroll sync toggler', + 'Use the button bar to toggle the scroll sync feature. This feature links the editor and the preview scrollbars.', + ), + new Feature( + 'toggleStatusBar', + 'Status bar toggler', + 'Use the button bar to toggle the status bar.', ), ], ), new Feature( 'signIn', - 'Logged in', + 'Signed in', 'Sign in with Google, sync your main workspace and unlock functionalities.', [ new Feature( @@ -143,7 +197,7 @@ export default [ new Feature( 'manageAccounts', 'Account manager', - 'Link all kinds of external accounts and use the "User accounts" dialog to manage them.', + 'Link all kinds of external accounts and use the "Accounts" dialog to manage them.', [ new Feature( 'addBloggerAccount', @@ -188,7 +242,7 @@ export default [ new Feature( 'removeAccount', 'Revoker', - 'Use the "User accounts" dialog to remove access to an external account.', + 'Use the "Accounts" dialog to remove access to an external account.', ), ], ), diff --git a/src/data/welcomeFile.md b/src/data/welcomeFile.md index 1a2b147e..9de422a2 100644 --- a/src/data/welcomeFile.md +++ b/src/data/welcomeFile.md @@ -13,7 +13,7 @@ The file explorer is accessible using the button in left corner of the navigatio ## Switch to another file -All your files are listed in the file explorer. You can switch from one to another by clicking a file in the list. +All your files and folders are presented as a tree in the file explorer. You can switch from one to another by clicking a file in the tree. ## Rename a file diff --git a/src/services/badgeSvc.js b/src/services/badgeSvc.js index a0b27171..d627d349 100644 --- a/src/services/badgeSvc.js +++ b/src/services/badgeSvc.js @@ -16,7 +16,7 @@ const showInfo = () => { export default { addBadge(featureId) { - if (!store.getters['data/badges'][featureId]) { + if (!store.getters['data/badgeCreations'][featureId]) { if (!lastEarnedFeatureIds) { const earnedFeatureIds = store.getters['data/allBadges'] .filter(badge => badge.isEarned) @@ -24,7 +24,7 @@ export default { lastEarnedFeatureIds = new Set(earnedFeatureIds); } - store.dispatch('data/patchBadges', { + store.dispatch('data/patchBadgeCreations', { [featureId]: { created: Date.now(), }, diff --git a/src/services/explorerSvc.js b/src/services/explorerSvc.js index 109c582e..0735f73f 100644 --- a/src/services/explorerSvc.js +++ b/src/services/explorerSvc.js @@ -62,7 +62,6 @@ export default { } else { workspaceSvc.deleteFile(id); } - badgeSvc.addBadge('removeFiles'); }; if (selectedNode === store.getters['explorer/selectedNode']) { @@ -78,8 +77,10 @@ export default { store.commit('folder/deleteItem', folderNode.item.id); }; recursiveDelete(selectedNode); + badgeSvc.addBadge('removeFolder'); } else { deleteFile(selectedNode.item.id); + badgeSvc.addBadge('removeFile'); } if (doClose) { // Close the current file by opening the last opened, not deleted one diff --git a/src/services/localDbSvc.js b/src/services/localDbSvc.js index cab9beb8..855e3f7d 100644 --- a/src/services/localDbSvc.js +++ b/src/services/localDbSvc.js @@ -1,23 +1,23 @@ -import FileSaver from 'file-saver'; import utils from './utils'; import store from '../store'; import welcomeFile from '../data/welcomeFile.md'; import workspaceSvc from './workspaceSvc'; import constants from '../data/constants'; +const deleteMarkerMaxAge = 1000; const dbVersion = 1; const dbStoreName = 'objects'; -const { exportWorkspace } = utils.queryParams; const { silent } = utils.queryParams; -const resetApp = utils.queryParams.reset; -const deleteMarkerMaxAge = 1000; +const resetApp = localStorage.getItem('resetStackEdit'); +if (resetApp) { + localStorage.removeItem('resetStackEdit'); +} class Connection { - constructor() { + constructor(workspaceId = store.getters['workspace/currentWorkspace'].id) { this.getTxCbs = []; // Make the DB name - const workspaceId = store.getters['workspace/currentWorkspace'].id; this.dbName = utils.getDbName(workspaceId); // Init connection @@ -264,7 +264,7 @@ const localDbSvc = { // DB item is different from the corresponding store item this.hashMap[dbItem.type][dbItem.id] = dbItem.hash; // Update content only if it exists in the store - if (storeItem || !contentTypes[dbItem.type] || exportWorkspace) { + if (storeItem || !contentTypes[dbItem.type]) { // Put item in the store dbItem.tx = undefined; store.commit(`${dbItem.type}/setItem`, dbItem); @@ -327,7 +327,7 @@ const localDbSvc = { * Create the connection and start syncing. */ async init() { - // Reset the app if reset flag was passed + // Reset the app if the reset flag was passed if (resetApp) { await Promise.all(Object.keys(store.getters['workspace/workspacesById']) .map(workspaceId => workspaceSvc.removeWorkspace(workspaceId))); @@ -344,16 +344,6 @@ const localDbSvc = { // Load the DB await localDbSvc.sync(); - // If exportWorkspace parameter was provided - if (exportWorkspace) { - const backup = JSON.stringify(store.getters.allItemsById); - const blob = new Blob([backup], { - type: 'text/plain;charset=utf-8', - }); - FileSaver.saveAs(blob, 'StackEdit workspace.json'); - throw new Error('RELOAD'); - } - // Watch workspace deletions and persist them as soon as possible // to make the changes available to reloading workspace tabs. store.watch( @@ -438,6 +428,27 @@ const localDbSvc = { { immediate: true }, ); }, + + getWorkspaceItems(workspaceId, onItem, onFinish = () => {}) { + const connection = new Connection(workspaceId); + connection.createTx((tx) => { + const dbStore = tx.objectStore(dbStoreName); + const index = dbStore.index('tx'); + index.openCursor().onsuccess = (event) => { + const cursor = event.target.result; + if (cursor) { + onItem(cursor.value); + cursor.continue(); + } else { + connection.db.close(); + onFinish(); + } + }; + }); + + // Return a cancel function + return () => connection.db.close(); + }, }; const loader = type => fileId => localDbSvc.loadItem(`${fileId}/${type}`) diff --git a/src/services/networkSvc.js b/src/services/networkSvc.js index 377a4d66..06f24b37 100644 --- a/src/services/networkSvc.js +++ b/src/services/networkSvc.js @@ -8,7 +8,10 @@ const silentAuthorizeTimeout = 15 * 1000; // 15 secondes (which will be reattemp const networkTimeout = 30 * 1000; // 30 sec let isConnectionDown = false; const userInactiveAfter = 3 * 60 * 1000; // 3 minutes (twice the default sync period) - +let lastActivity = 0; +let lastFocus = 0; +let isConfLoading = false; +let isConfLoaded = false; function parseHeaders(xhr) { const pairs = xhr.getAllResponseHeaders().trim().split('\n'); @@ -31,21 +34,20 @@ function isRetriable(err) { } export default { - init() { + async init() { // Keep track of the last user activity - this.lastActivity = 0; const setLastActivity = () => { - this.lastActivity = Date.now(); + lastActivity = Date.now(); }; window.document.addEventListener('mousedown', setLastActivity); window.document.addEventListener('keydown', setLastActivity); window.document.addEventListener('touchstart', setLastActivity); // Keep track of the last window focus - this.lastFocus = 0; + lastFocus = 0; const setLastFocus = () => { - this.lastFocus = Date.now(); - localStorage.setItem(store.getters['workspace/lastFocusKey'], this.lastFocus); + lastFocus = Date.now(); + localStorage.setItem(store.getters['workspace/lastFocusKey'], lastFocus); setLastActivity(); }; if (document.hasFocus()) { @@ -53,7 +55,7 @@ export default { } window.addEventListener('focus', setLastFocus); - // Check browser is online periodically + // Check that browser is online periodically const checkOffline = async () => { const isBrowserOffline = window.navigator.onLine === false; if (!isBrowserOffline @@ -90,23 +92,42 @@ export default { store.dispatch('notification/error', 'You are offline.'); } else { store.dispatch('notification/info', 'You are back online!'); + this.getServerConf(); } } }; + utils.setInterval(checkOffline, 1000); window.addEventListener('online', () => { isConnectionDown = false; checkOffline(); }); window.addEventListener('offline', checkOffline); + await checkOffline(); + this.getServerConf(); + }, + async getServerConf() { + if (!store.state.offline && !isConfLoading && !isConfLoaded) { + try { + isConfLoading = true; + const res = await this.request({ url: 'conf' }); + await store.dispatch('data/setServerConf', res.body); + isConfLoaded = true; + } finally { + isConfLoading = false; + } + } }, isWindowFocused() { // We don't use state.workspace.lastFocus as it's not reactive const storedLastFocus = localStorage.getItem(store.getters['workspace/lastFocusKey']); - return parseInt(storedLastFocus, 10) === this.lastFocus; + return parseInt(storedLastFocus, 10) === lastFocus; }, isUserActive() { - return this.lastActivity > Date.now() - userInactiveAfter && this.isWindowFocused(); + return lastActivity > Date.now() - userInactiveAfter && this.isWindowFocused(); + }, + isConfLoaded() { + return !!Object.keys(store.getters['data/serverConf']).length; }, async loadScript(url) { if (!scriptLoadingPromises[url]) { @@ -217,15 +238,15 @@ export default { throw e; } }, - async request(configParam, offlineCheck = false) { + async request(config, offlineCheck = false) { let retryAfter = 500; // 500 ms const maxRetryAfter = 10 * 1000; // 10 sec - const config = Object.assign({}, configParam); - config.timeout = config.timeout || networkTimeout; - config.headers = Object.assign({}, config.headers); - if (config.body && typeof config.body === 'object') { - config.body = JSON.stringify(config.body); - config.headers['Content-Type'] = 'application/json'; + const sanitizedConfig = Object.assign({}, config); + sanitizedConfig.timeout = sanitizedConfig.timeout || networkTimeout; + sanitizedConfig.headers = Object.assign({}, sanitizedConfig.headers); + if (sanitizedConfig.body && typeof sanitizedConfig.body === 'object') { + sanitizedConfig.body = JSON.stringify(sanitizedConfig.body); + sanitizedConfig.headers['Content-Type'] = 'application/json'; } const attempt = async () => { @@ -236,7 +257,7 @@ export default { } const xhr = new window.XMLHttpRequest(); - xhr.withCredentials = config.withCredentials || false; + xhr.withCredentials = sanitizedConfig.withCredentials || false; const timeoutId = setTimeout(() => { xhr.abort(); @@ -247,7 +268,7 @@ export default { } else { reject(new Error('Network request timeout.')); } - }, config.timeout); + }, sanitizedConfig.timeout); xhr.onload = () => { if (offlineCheck) { @@ -257,9 +278,9 @@ export default { const result = { status: xhr.status, headers: parseHeaders(xhr), - body: config.blob ? xhr.response : xhr.responseText, + body: sanitizedConfig.blob ? xhr.response : xhr.responseText, }; - if (!config.raw && !config.blob) { + if (!sanitizedConfig.raw && !sanitizedConfig.blob) { try { result.body = JSON.parse(result.body); } catch (e) { @@ -284,17 +305,17 @@ export default { } }; - const url = utils.addQueryParams(config.url, config.params); - xhr.open(config.method || 'GET', url); - Object.entries(config.headers).forEach(([key, value]) => { + const url = utils.addQueryParams(sanitizedConfig.url, sanitizedConfig.params); + xhr.open(sanitizedConfig.method || 'GET', url); + Object.entries(sanitizedConfig.headers).forEach(([key, value]) => { if (value) { xhr.setRequestHeader(key, `${value}`); } }); - if (config.blob) { + if (sanitizedConfig.blob) { xhr.responseType = 'blob'; } - xhr.send(config.body || null); + xhr.send(sanitizedConfig.body || null); }); } catch (err) { // Try again later in case of retriable error diff --git a/src/services/providers/dropboxProvider.js b/src/services/providers/dropboxProvider.js index 8e8016ed..3bdb8ec1 100644 --- a/src/services/providers/dropboxProvider.js +++ b/src/services/providers/dropboxProvider.js @@ -124,7 +124,11 @@ export default new Provider({ }; }, async listFileRevisions({ token, syncLocation }) { - const entries = await dropboxHelper.listRevisions(token, syncLocation.dropboxFileId); + const entries = await dropboxHelper.listRevisions({ + token, + path: makePathRelative(token, syncLocation.path), + fileId: syncLocation.dropboxFileId, + }); return entries.map(entry => ({ id: entry.rev, sub: `${dropboxHelper.subPrefix}:${(entry.sharing_info || {}).modified_by || token.sub}`, diff --git a/src/services/providers/helpers/dropboxHelper.js b/src/services/providers/helpers/dropboxHelper.js index b2937ff0..f9082c24 100644 --- a/src/services/providers/helpers/dropboxHelper.js +++ b/src/services/providers/helpers/dropboxHelper.js @@ -5,9 +5,9 @@ import badgeSvc from '../../badgeSvc'; const getAppKey = (fullAccess) => { if (fullAccess) { - return 'lq6mwopab8wskas'; + return store.getters['data/serverConf'].dropboxAppKeyFull; } - return 'sw0hlixhr8q1xk0'; + return store.getters['data/serverConf'].dropboxAppKey; }; const httpHeaderSafeJson = args => args && JSON.stringify(args) @@ -60,6 +60,7 @@ export default { * https://www.dropbox.com/developers/documentation/http/documentation#users-get_current_account */ async startOauth2(fullAccess, sub = null, silent = false) { + // Get an OAuth2 code const { accessToken } = await networkSvc.startOauth2( 'https://www.dropbox.com/oauth2/authorize', { @@ -146,14 +147,21 @@ export default { /** * https://www.dropbox.com/developers/documentation/http/documentation#list-revisions */ - async listRevisions(token, fileId) { + async listRevisions({ + token, + path, + fileId, + }) { const res = await request(token, { method: 'POST', url: 'https://api.dropboxapi.com/2/files/list_revisions', - body: { + body: fileId ? { path: fileId, mode: 'id', limit: 100, + } : { + path, + limit: 100, }, }); return res.body.entries; diff --git a/src/services/providers/helpers/githubHelper.js b/src/services/providers/helpers/githubHelper.js index 435884af..2f10a5bc 100644 --- a/src/services/providers/helpers/githubHelper.js +++ b/src/services/providers/helpers/githubHelper.js @@ -4,7 +4,6 @@ import store from '../../../store'; import userSvc from '../../userSvc'; import badgeSvc from '../../badgeSvc'; -const clientId = GITHUB_CLIENT_ID; const getScopes = token => [token.repoFullAccess ? 'repo' : 'public_repo', 'gist']; const request = (token, options) => networkSvc.request({ @@ -64,6 +63,9 @@ export default { * https://developer.github.com/apps/building-oauth-apps/authorization-options-for-oauth-apps/ */ async startOauth2(scopes, sub = null, silent = false) { + const clientId = store.getters['data/serverConf'].githubClientId; + + // Get an OAuth2 code const { code } = await networkSvc.startOauth2( 'https://github.com/login/oauth/authorize', { diff --git a/src/services/providers/helpers/gitlabHelper.js b/src/services/providers/helpers/gitlabHelper.js index 5a1ec746..03312e61 100644 --- a/src/services/providers/helpers/gitlabHelper.js +++ b/src/services/providers/helpers/gitlabHelper.js @@ -51,6 +51,7 @@ export default { * https://docs.gitlab.com/ee/api/oauth2.html */ async startOauth2(serverUrl, applicationId, sub = null, silent = false) { + // Get an OAuth2 code const { accessToken } = await networkSvc.startOauth2( `${serverUrl}/oauth/authorize`, { diff --git a/src/services/providers/helpers/googleHelper.js b/src/services/providers/helpers/googleHelper.js index 2764488e..84934fe8 100644 --- a/src/services/providers/helpers/googleHelper.js +++ b/src/services/providers/helpers/googleHelper.js @@ -4,8 +4,6 @@ import store from '../../../store'; import userSvc from '../../userSvc'; import badgeSvc from '../../badgeSvc'; -const clientId = GOOGLE_CLIENT_ID; -const apiKey = 'AIzaSyC_M4RA9pY6XmM9pmFxlT59UPMO7aHr9kk'; const appsDomain = null; const tokenExpirationMargin = 5 * 60 * 1000; // 5 min (tokens expire after 1h) @@ -21,6 +19,7 @@ const checkIdToken = (idToken) => { try { const token = idToken.split('.'); const payload = JSON.parse(utils.decodeBase64(token[1])); + const clientId = store.getters['data/serverConf'].googleClientId; return payload.aud === clientId && Date.now() + tokenExpirationMargin < payload.exp * 1000; } catch (e) { return false; @@ -40,6 +39,7 @@ if (utils.queryParams.providerId === 'googleDrive') { * https://developers.google.com/people/api/rest/v1/people/get */ const getUser = async (sub, token) => { + const apiKey = store.getters['data/serverConf'].googleApiKey; const url = `https://people.googleapis.com/v1/people/${sub}?personFields=names,photos&key=${apiKey}`; const { body } = await networkSvc.request(sub === 'me' && token ? { @@ -111,6 +111,9 @@ export default { * https://developers.google.com/identity/protocols/OpenIDConnect */ async startOauth2(scopes, sub = null, silent = false) { + const clientId = store.getters['data/serverConf'].googleClientId; + + // Get an OAuth2 code const { accessToken, expiresIn, idToken } = await networkSvc.startOauth2( 'https://accounts.google.com/o/oauth2/v2/auth', { @@ -265,16 +268,6 @@ export default { badgeSvc.addBadge('addGooglePhotosAccount'); return token; }, - async getSponsorship(token) { - const refreshedToken = await this.refreshToken(token); - return networkSvc.request({ - method: 'GET', - url: 'userInfo', - params: { - idToken: refreshedToken.idToken, - }, - }, true); - }, /** * https://developers.google.com/drive/v3/reference/files/create diff --git a/src/services/providers/helpers/wordpressHelper.js b/src/services/providers/helpers/wordpressHelper.js index 3fb66144..6d77d7ee 100644 --- a/src/services/providers/helpers/wordpressHelper.js +++ b/src/services/providers/helpers/wordpressHelper.js @@ -2,7 +2,6 @@ import networkSvc from '../../networkSvc'; import store from '../../../store'; import badgeSvc from '../../badgeSvc'; -const clientId = '23361'; const tokenExpirationMargin = 5 * 60 * 1000; // 5 min (WordPress tokens expire after 2 weeks) const request = (token, options) => networkSvc.request({ @@ -19,6 +18,9 @@ export default { * https://developer.wordpress.com/docs/oauth2/ */ async startOauth2(sub = null, silent = false) { + const clientId = store.getters['data/serverConf'].wordpressClientId; + + // Get an OAuth2 code const { accessToken, expiresIn } = await networkSvc.startOauth2( 'https://public-api.wordpress.com/oauth2/authorize', { diff --git a/src/services/providers/helpers/zendeskHelper.js b/src/services/providers/helpers/zendeskHelper.js index b909ca91..2d50d086 100644 --- a/src/services/providers/helpers/zendeskHelper.js +++ b/src/services/providers/helpers/zendeskHelper.js @@ -17,6 +17,7 @@ export default { * https://support.zendesk.com/hc/en-us/articles/203663836-Using-OAuth-authentication-with-your-application */ async startOauth2(subdomain, clientId, sub = null, silent = false) { + // Get an OAuth2 code const { accessToken } = await networkSvc.startOauth2( `https://${subdomain}.zendesk.com/oauth/authorizations/new`, { diff --git a/src/services/syncSvc.js b/src/services/syncSvc.js index f51f5f69..b8a72bda 100644 --- a/src/services/syncSvc.js +++ b/src/services/syncSvc.js @@ -728,7 +728,7 @@ const syncWorkspace = async (skipContents = false) => { if (workspace.id === 'main') { await syncDataItem('settings'); await syncDataItem('workspaces'); - await syncDataItem('badges'); + await syncDataItem('badgeCreations'); } await syncDataItem('templates'); diff --git a/src/store/data.js b/src/store/data.js index 8f80a1a4..0831f9a6 100644 --- a/src/store/data.js +++ b/src/store/data.js @@ -11,6 +11,7 @@ import styledHtmlWithTocTemplate from '../data/templates/styledHtmlWithTocTempla import jekyllSiteTemplate from '../data/templates/jekyllSiteTemplate.html'; import constants from '../data/constants'; import features from '../data/features'; +import badgeSvc from '../services/badgeSvc'; const itemTemplate = (id, data = {}) => ({ id, @@ -63,9 +64,12 @@ const patcher = id => ({ state, commit }, data) => { }; // For layoutSettings -const layoutSettingsToggler = propertyName => ({ getters, dispatch }, value) => dispatch('patchLayoutSettings', { - [propertyName]: value === undefined ? !getters.layoutSettings[propertyName] : value, -}); +const layoutSettingsToggler = (propertyName, featureId) => ({ getters, dispatch }, value) => { + dispatch('patchLayoutSettings', { + [propertyName]: value === undefined ? !getters.layoutSettings[propertyName] : value, + }); + badgeSvc.addBadge(featureId); +}; const notEnoughSpace = (getters) => { const layoutConstants = getters['layout/constants']; const showGutter = getters['discussion/currentDiscussion']; @@ -132,6 +136,7 @@ export default { }, }, getters: { + serverConf: getter('serverConf'), workspaces: getter('workspaces'), // Not to be used, prefer workspace/workspacesById settings: getter('settings'), computedSettings: (state, { settings }) => { @@ -204,8 +209,9 @@ export default { gitlabTokensBySub: (state, { tokensByType }) => tokensByType.gitlab || {}, wordpressTokensBySub: (state, { tokensByType }) => tokensByType.wordpress || {}, zendeskTokensBySub: (state, { tokensByType }) => tokensByType.zendesk || {}, - badges: getter('badges'), - badgeTree: (state, { badges }) => features.map(feature => feature.toBadge(badges)), + badgeCreations: getter('badgeCreations'), + badgeTree: (state, { badgeCreations }) => features + .map(feature => feature.toBadge(badgeCreations)), allBadges: (state, { badgeTree }) => { const result = []; const processBadgeNodes = nodes => nodes.forEach((node) => { @@ -219,15 +225,16 @@ export default { }, }, actions: { + setServerConf: setter('serverConf'), setSettings: setter('settings'), patchLocalSettings: patcher('localSettings'), patchLayoutSettings: patcher('layoutSettings'), - toggleNavigationBar: layoutSettingsToggler('showNavigationBar'), - toggleEditor: layoutSettingsToggler('showEditor'), - toggleSidePreview: layoutSettingsToggler('showSidePreview'), - toggleStatusBar: layoutSettingsToggler('showStatusBar'), - toggleScrollSync: layoutSettingsToggler('scrollSync'), - toggleFocusMode: layoutSettingsToggler('focusMode'), + toggleNavigationBar: layoutSettingsToggler('showNavigationBar', 'toggleNavigationBar'), + toggleEditor: layoutSettingsToggler('showEditor', 'toggleEditor'), + toggleSidePreview: layoutSettingsToggler('showSidePreview', 'toggleSidePreview'), + toggleStatusBar: layoutSettingsToggler('showStatusBar', 'toggleStatusBar'), + toggleScrollSync: layoutSettingsToggler('scrollSync', 'toggleScrollSync'), + toggleFocusMode: layoutSettingsToggler('focusMode', 'toggleFocusMode'), toggleSideBar: ({ getters, dispatch, rootGetters }, value) => { // Reset side bar dispatch('setSideBarPanel'); @@ -240,6 +247,7 @@ export default { patch.showExplorer = false; } dispatch('patchLayoutSettings', patch); + badgeSvc.addBadge('toggleSideBar'); }, toggleExplorer: ({ getters, dispatch, rootGetters }, value) => { // Close side bar if not enough space @@ -250,6 +258,7 @@ export default { patch.showSideBar = false; } dispatch('patchLayoutSettings', patch); + badgeSvc.addBadge('toggleExplorer'); }, setSideBarPanel: ({ dispatch }, value) => dispatch('patchLayoutSettings', { sideBarPanel: value === undefined ? 'menu' : value, @@ -288,6 +297,6 @@ export default { addGitlabToken: tokenAdder('gitlab'), addWordpressToken: tokenAdder('wordpress'), addZendeskToken: tokenAdder('zendesk'), - patchBadges: patcher('badges'), + patchBadgeCreations: patcher('badgeCreations'), }, }; diff --git a/test/unit/jest.conf.js b/test/unit/jest.conf.js index a73d98d1..1420d115 100644 --- a/test/unit/jest.conf.js +++ b/test/unit/jest.conf.js @@ -28,8 +28,6 @@ module.exports = { '!**/node_modules/**', ], globals: { - GOOGLE_CLIENT_ID: 'GOOGLE_CLIENT_ID', - GITHUB_CLIENT_ID: 'GITHUB_CLIENT_ID', NODE_ENV: 'production', }, }; diff --git a/test/unit/specs/components/ButtonBar.spec.js b/test/unit/specs/components/ButtonBar.spec.js index 5c9bf60c..a8900ee5 100644 --- a/test/unit/specs/components/ButtonBar.spec.js +++ b/test/unit/specs/components/ButtonBar.spec.js @@ -3,39 +3,45 @@ import store from '../../../../src/store'; import specUtils from '../specUtils'; describe('ButtonBar.vue', () => { - it('should toggle the navigation bar', () => specUtils.checkToggler( + it('should toggle the navigation bar', async () => specUtils.checkToggler( ButtonBar, wrapper => wrapper.find('.button-bar__button--navigation-bar-toggler').trigger('click'), () => store.getters['data/layoutSettings'].showNavigationBar, + 'toggleNavigationBar', )); - it('should toggle the side preview', () => specUtils.checkToggler( + it('should toggle the side preview', async () => specUtils.checkToggler( ButtonBar, wrapper => wrapper.find('.button-bar__button--side-preview-toggler').trigger('click'), () => store.getters['data/layoutSettings'].showSidePreview, + 'toggleSidePreview', )); - it('should toggle the editor', () => specUtils.checkToggler( + it('should toggle the editor', async () => specUtils.checkToggler( ButtonBar, wrapper => wrapper.find('.button-bar__button--editor-toggler').trigger('click'), () => store.getters['data/layoutSettings'].showEditor, + 'toggleEditor', )); - it('should toggle the focus mode', () => specUtils.checkToggler( + it('should toggle the focus mode', async () => specUtils.checkToggler( ButtonBar, wrapper => wrapper.find('.button-bar__button--focus-mode-toggler').trigger('click'), () => store.getters['data/layoutSettings'].focusMode, + 'toggleFocusMode', )); - it('should toggle the scroll sync', () => specUtils.checkToggler( + it('should toggle the scroll sync', async () => specUtils.checkToggler( ButtonBar, wrapper => wrapper.find('.button-bar__button--scroll-sync-toggler').trigger('click'), () => store.getters['data/layoutSettings'].scrollSync, + 'toggleScrollSync', )); - it('should toggle the status bar', () => specUtils.checkToggler( + it('should toggle the status bar', async () => specUtils.checkToggler( ButtonBar, wrapper => wrapper.find('.button-bar__button--status-bar-toggler').trigger('click'), () => store.getters['data/layoutSettings'].showStatusBar, + 'toggleStatusBar', )); }); diff --git a/test/unit/specs/components/Explorer.spec.js b/test/unit/specs/components/Explorer.spec.js index 8bb88a2f..1cd1099e 100644 --- a/test/unit/specs/components/Explorer.spec.js +++ b/test/unit/specs/components/Explorer.spec.js @@ -14,7 +14,7 @@ const ensureNotExists = file => expect(store.getters.allItemsById).not.toHavePro const refreshItem = item => store.getters.allItemsById[item.id]; describe('Explorer.vue', () => { - it('should create new files in the root folder', () => { + it('should create new file in the root folder', async () => { expect(store.state.explorer.newChildNode.isNil).toBeTruthy(); const wrapper = mount(); wrapper.find('.side-title__button--new-file').trigger('click'); @@ -25,7 +25,7 @@ describe('Explorer.vue', () => { }); }); - it('should create new files in a folder', async () => { + it('should create new file in a folder', async () => { const folder = await workspaceSvc.storeItem({ type: 'folder' }); const wrapper = mount(); select(folder.id); @@ -36,7 +36,7 @@ describe('Explorer.vue', () => { }); }); - it('should not create new files in the trash folder', () => { + it('should not create new files in the trash folder', async () => { const wrapper = mount(); select('trash'); wrapper.find('.side-title__button--new-file').trigger('click'); @@ -46,7 +46,7 @@ describe('Explorer.vue', () => { }); }); - it('should create new folders in the root folder', () => { + it('should create new folders in the root folder', async () => { expect(store.state.explorer.newChildNode.isNil).toBeTruthy(); const wrapper = mount(); wrapper.find('.side-title__button--new-folder').trigger('click'); @@ -68,7 +68,7 @@ describe('Explorer.vue', () => { }); }); - it('should not create new folders in the trash folder', () => { + it('should not create new folders in the trash folder', async () => { const wrapper = mount(); select('trash'); wrapper.find('.side-title__button--new-folder').trigger('click'); @@ -78,7 +78,7 @@ describe('Explorer.vue', () => { }); }); - it('should not create new folders in the temp folder', () => { + it('should not create new folders in the temp folder', async () => { const wrapper = mount(); select('temp'); wrapper.find('.side-title__button--new-folder').trigger('click'); @@ -96,6 +96,7 @@ describe('Explorer.vue', () => { wrapper.find('.side-title__button--delete').trigger('click'); ensureExists(file); expect(refreshItem(file).parentId).toEqual('trash'); + await specUtils.expectBadge('removeFile'); }); it('should not delete the trash folder', async () => { @@ -103,15 +104,17 @@ describe('Explorer.vue', () => { select('trash'); wrapper.find('.side-title__button--delete').trigger('click'); await specUtils.resolveModal('trashDeletion'); + await specUtils.expectBadge('removeFile', false); }); - it('should not delete files in the trash folder', async () => { + it('should not delete file in the trash folder', async () => { const file = await workspaceSvc.createFile({ parentId: 'trash' }, true); const wrapper = mount(); select(file.id); wrapper.find('.side-title__button--delete').trigger('click'); await specUtils.resolveModal('trashDeletion'); ensureExists(file); + await specUtils.expectBadge('removeFile', false); }); it('should delete the temp folder after confirmation', async () => { @@ -121,9 +124,10 @@ describe('Explorer.vue', () => { wrapper.find('.side-title__button--delete').trigger('click'); await specUtils.resolveModal('tempFolderDeletion'); ensureNotExists(file); + await specUtils.expectBadge('removeFolder'); }); - it('should delete temp files after confirmation', async () => { + it('should delete temp file after confirmation', async () => { const file = await workspaceSvc.createFile({ parentId: 'temp' }, true); const wrapper = mount(); select(file.id); @@ -131,6 +135,7 @@ describe('Explorer.vue', () => { ensureExists(file); await specUtils.resolveModal('tempFileDeletion'); ensureNotExists(file); + await specUtils.expectBadge('removeFile'); }); it('should delete folder after confirmation', async () => { @@ -144,9 +149,10 @@ describe('Explorer.vue', () => { // Make sure file has been moved to Trash ensureExists(file); expect(refreshItem(file).parentId).toEqual('trash'); + await specUtils.expectBadge('removeFolder'); }); - it('should rename files', async () => { + it('should rename file', async () => { const file = await workspaceSvc.createFile({}, true); const wrapper = mount(); select(file.id); @@ -154,7 +160,7 @@ describe('Explorer.vue', () => { expect(store.getters['explorer/editingNode'].item.id).toEqual(file.id); }); - it('should rename folders', async () => { + it('should rename folder', async () => { const folder = await workspaceSvc.storeItem({ type: 'folder' }); const wrapper = mount(); select(folder.id); @@ -182,6 +188,7 @@ describe('Explorer.vue', () => { Explorer, wrapper => wrapper.find('.side-title__button--close').trigger('click'), () => store.getters['data/layoutSettings'].showExplorer, + 'toggleExplorer', ); }); }); diff --git a/test/unit/specs/components/ExplorerNode.spec.js b/test/unit/specs/components/ExplorerNode.spec.js index beb5827b..5793bfc4 100644 --- a/test/unit/specs/components/ExplorerNode.spec.js +++ b/test/unit/specs/components/ExplorerNode.spec.js @@ -49,15 +49,25 @@ const dragAndDrop = (sourceItem, targetItem) => { describe('ExplorerNode.vue', () => { const modifiedName = 'Name'; - it('should open files on select after a timeout', async () => { + it('should open file on select after a timeout', async () => { const node = await makeFileNode(); mountAndSelect(node); expect(store.getters['file/current'].id).not.toEqual(node.item.id); await new Promise(resolve => setTimeout(resolve, 10)); expect(store.getters['file/current'].id).toEqual(node.item.id); + await specUtils.expectBadge('switchFile'); }); - it('should open folders on select after a timeout', async () => { + it('should not open already open file', async () => { + const node = await makeFileNode(); + store.commit('file/setCurrentId', node.item.id); + mountAndSelect(node); + await new Promise(resolve => setTimeout(resolve, 10)); + expect(store.getters['file/current'].id).toEqual(node.item.id); + await specUtils.expectBadge('switchFile', false); + }); + + it('should open folder on select after a timeout', async () => { const node = await makeFolderNode(); const wrapper = mountAndSelect(node); expect(wrapper.classes()).not.toContain('explorer-node--open'); @@ -65,7 +75,7 @@ describe('ExplorerNode.vue', () => { expect(wrapper.classes()).toContain('explorer-node--open'); }); - it('should open folders on new child', async () => { + it('should open folder on new child', async () => { const node = await makeFolderNode(); const wrapper = mountAndSelect(node); // Close the folder @@ -76,7 +86,7 @@ describe('ExplorerNode.vue', () => { expect(wrapper.classes()).toContain('explorer-node--open'); }); - it('should create new files in a folder', async () => { + it('should create new file in a folder', async () => { const node = await makeFolderNode(); const wrapper = mount(node); wrapper.trigger('contextmenu'); @@ -91,9 +101,10 @@ describe('ExplorerNode.vue', () => { parentId: node.item.id, }); expect(wrapper.contains('.explorer-node__new-child')).toBe(false); + await specUtils.expectBadge('createFile'); }); - it('should cancel a file creation on escape', async () => { + it('should cancel file creation on escape', async () => { const node = await makeFolderNode(); const wrapper = mount(node); wrapper.trigger('contextmenu'); @@ -110,15 +121,16 @@ describe('ExplorerNode.vue', () => { parentId: node.item.id, }); expect(wrapper.contains('.explorer-node__new-child')).toBe(false); + await specUtils.expectBadge('createFile', false); }); - it('should not create new files in a file', async () => { + it('should not create new file in a file', async () => { const node = await makeFileNode(); mount(node).trigger('contextmenu'); expect(specUtils.getContextMenuItem('New file').disabled).toBe(true); }); - it('should not create new files in the trash folder', async () => { + it('should not create new file in the trash folder', async () => { const node = store.getters['explorer/nodeMap'].trash; mount(node).trigger('contextmenu'); expect(specUtils.getContextMenuItem('New file').disabled).toBe(true); @@ -139,9 +151,10 @@ describe('ExplorerNode.vue', () => { parentId: node.item.id, }); expect(wrapper.contains('.explorer-node__new-child--folder')).toBe(false); + await specUtils.expectBadge('createFolder'); }); - it('should cancel a folder creation on escape', async () => { + it('should cancel folder creation on escape', async () => { const node = await makeFolderNode(); const wrapper = mount(node); wrapper.trigger('contextmenu'); @@ -158,27 +171,28 @@ describe('ExplorerNode.vue', () => { parentId: node.item.id, }); expect(wrapper.contains('.explorer-node__new-child--folder')).toBe(false); + await specUtils.expectBadge('createFolder', false); }); - it('should not create new folders in a file', async () => { + it('should not create new folder in a file', async () => { const node = await makeFileNode(); mount(node).trigger('contextmenu'); expect(specUtils.getContextMenuItem('New folder').disabled).toBe(true); }); - it('should not create new folders in the trash folder', async () => { + it('should not create new folder in the trash folder', async () => { const node = store.getters['explorer/nodeMap'].trash; mount(node).trigger('contextmenu'); expect(specUtils.getContextMenuItem('New folder').disabled).toBe(true); }); - it('should not create new folders in the temp folder', async () => { + it('should not create new folder in the temp folder', async () => { const node = store.getters['explorer/nodeMap'].temp; mount(node).trigger('contextmenu'); expect(specUtils.getContextMenuItem('New folder').disabled).toBe(true); }); - it('should rename files', async () => { + it('should rename file', async () => { const node = await makeFileNode(); const wrapper = mount(node); wrapper.trigger('contextmenu'); @@ -187,20 +201,10 @@ describe('ExplorerNode.vue', () => { wrapper.setData({ editingValue: modifiedName }); wrapper.find('.explorer-node__item-editor .text-input').trigger('blur'); expect(store.getters['explorer/selectedNode'].item.name).toEqual(modifiedName); + await specUtils.expectBadge('renameFile'); }); - it('should rename folders', async () => { - const node = await makeFolderNode(); - const wrapper = mount(node); - wrapper.trigger('contextmenu'); - await specUtils.resolveContextMenu('Rename'); - expect(wrapper.contains('.explorer-node__item-editor')).toBe(true); - wrapper.setData({ editingValue: modifiedName }); - wrapper.find('.explorer-node__item-editor .text-input').trigger('blur'); - expect(store.getters['explorer/selectedNode'].item.name).toEqual(modifiedName); - }); - - it('should cancel rename on escape', async () => { + it('should cancel rename file on escape', async () => { const node = await makeFileNode(); const wrapper = mount(node); wrapper.trigger('contextmenu'); @@ -211,6 +215,33 @@ describe('ExplorerNode.vue', () => { keyCode: 27, }); expect(store.getters['explorer/selectedNode'].item.name).not.toEqual(modifiedName); + await specUtils.expectBadge('renameFile', false); + }); + + it('should rename folder', async () => { + const node = await makeFolderNode(); + const wrapper = mount(node); + wrapper.trigger('contextmenu'); + await specUtils.resolveContextMenu('Rename'); + expect(wrapper.contains('.explorer-node__item-editor')).toBe(true); + wrapper.setData({ editingValue: modifiedName }); + wrapper.find('.explorer-node__item-editor .text-input').trigger('blur'); + expect(store.getters['explorer/selectedNode'].item.name).toEqual(modifiedName); + await specUtils.expectBadge('renameFolder'); + }); + + it('should cancel rename folder on escape', async () => { + const node = await makeFolderNode(); + const wrapper = mount(node); + wrapper.trigger('contextmenu'); + await specUtils.resolveContextMenu('Rename'); + expect(wrapper.contains('.explorer-node__item-editor')).toBe(true); + wrapper.setData({ editingValue: modifiedName }); + wrapper.find('.explorer-node__item-editor .text-input').trigger('keydown', { + keyCode: 27, + }); + expect(store.getters['explorer/selectedNode'].item.name).not.toEqual(modifiedName); + await specUtils.expectBadge('renameFolder', false); }); it('should not rename the trash folder', async () => { @@ -225,23 +256,26 @@ describe('ExplorerNode.vue', () => { expect(specUtils.getContextMenuItem('Rename').disabled).toBe(true); }); - it('should move a file into a folder', async () => { + it('should move file into a folder', async () => { const sourceItem = await workspaceSvc.createFile({}, true); const targetItem = await workspaceSvc.storeItem({ type: 'folder' }); dragAndDrop(sourceItem, targetItem); + await specUtils.expectBadge('moveFile'); }); - it('should move a folder into a folder', async () => { + it('should move folder into a folder', async () => { const sourceItem = await workspaceSvc.storeItem({ type: 'folder' }); const targetItem = await workspaceSvc.storeItem({ type: 'folder' }); dragAndDrop(sourceItem, targetItem); + await specUtils.expectBadge('moveFolder'); }); - it('should move a file into a file parent folder', async () => { + it('should move file into a file parent folder', async () => { const targetItem = await workspaceSvc.storeItem({ type: 'folder' }); const file = await workspaceSvc.createFile({ parentId: targetItem.id }, true); const sourceItem = await workspaceSvc.createFile({}, true); dragAndDrop(sourceItem, file); + await specUtils.expectBadge('moveFile'); }); it('should not move the trash folder', async () => { @@ -256,14 +290,14 @@ describe('ExplorerNode.vue', () => { expect(store.state.explorer.dragSourceId).not.toEqual('temp'); }); - it('should not move a file to the temp folder', async () => { + it('should not move file to the temp folder', async () => { const targetNode = store.getters['explorer/nodeMap'].temp; const wrapper = mount(targetNode); wrapper.trigger('dragenter'); expect(store.state.explorer.dragTargetId).not.toEqual('temp'); }); - it('should not move a file to a file in the temp folder', async () => { + it('should not move file to a file in the temp folder', async () => { const file = await workspaceSvc.createFile({ parentId: 'temp' }, true); const targetNode = store.getters['explorer/nodeMap'][file.id]; const wrapper = mount(targetNode); diff --git a/test/unit/specs/components/NavigationBar.spec.js b/test/unit/specs/components/NavigationBar.spec.js index 94c2216a..5573df0f 100644 --- a/test/unit/specs/components/NavigationBar.spec.js +++ b/test/unit/specs/components/NavigationBar.spec.js @@ -3,15 +3,17 @@ import store from '../../../../src/store'; import specUtils from '../specUtils'; describe('NavigationBar.vue', () => { - it('should toggle the explorer', () => specUtils.checkToggler( + it('should toggle the explorer', async () => specUtils.checkToggler( NavigationBar, wrapper => wrapper.find('.navigation-bar__button--explorer-toggler').trigger('click'), () => store.getters['data/layoutSettings'].showExplorer, + 'toggleExplorer', )); - it('should toggle the side bar', () => specUtils.checkToggler( + it('should toggle the side bar', async () => specUtils.checkToggler( NavigationBar, wrapper => wrapper.find('.navigation-bar__button--stackedit').trigger('click'), () => store.getters['data/layoutSettings'].showSideBar, + 'toggleSideBar', )); }); diff --git a/test/unit/specs/specUtils.js b/test/unit/specs/specUtils.js index f47ff7c1..fbf308c0 100644 --- a/test/unit/specs/specUtils.js +++ b/test/unit/specs/specUtils.js @@ -25,12 +25,13 @@ beforeEach(() => { }); export default { - checkToggler(Component, toggler, checker) { + async checkToggler(Component, toggler, checker, featureId) { const wrapper = shallowMount(Component, { store }); const valueBefore = checker(); toggler(wrapper); const valueAfter = checker(); expect(valueAfter).toEqual(!valueBefore); + await this.expectBadge(featureId); }, async resolveModal(type) { const config = store.getters['modal/config']; @@ -47,5 +48,11 @@ export default { expect(item).toBeTruthy(); store.state.contextMenu.resolve(item); await new Promise(resolve => setTimeout(resolve, 1)); - } + }, + async expectBadge(featureId, isEarned = true) { + await new Promise(resolve => setTimeout(resolve, 1)); + expect(store.getters['data/allBadges'].filter(badge => badge.featureId === featureId)[0]).toMatchObject({ + isEarned, + }); + }, };