From c06798bf854331a9d0c07e7b44cc0f4dc2bf3dcb Mon Sep 17 00:00:00 2001
From: Igor Zinken <igor.zinken@igorski.nl>
Date: Mon, 11 Apr 2022 16:47:16 +0200
Subject: [PATCH] Save dialog now auto selects last used storage provider

---
 .../cloud-file-selector.vue                   |  6 ++++-
 .../dropbox/dropbox-file-selector.vue         |  5 ++--
 .../dropbox/dropbox-image-preview.vue         |  9 ++++---
 .../google-drive-file-selector.vue            |  7 ++---
 .../cloud-file-selector/messages.json         |  2 +-
 .../dropbox-connector/messages.json           |  2 +-
 .../google-drive-connector/messages.json      |  2 +-
 .../file-menu/save-document/save-document.vue | 25 +++++++++--------
 src/definitions/image-types.js                |  3 ++-
 src/definitions/storage-types.js              | 27 +++++++++++++++++++
 src/services/google-drive-service.js          |  6 +----
 src/store/index.js                            |  5 ++++
 tests/unit/definitions/image-types.spec.js    |  3 ++-
 tests/unit/store/store.spec.js                |  6 +++++
 14 files changed, 77 insertions(+), 31 deletions(-)
 create mode 100644 src/definitions/storage-types.js

diff --git a/src/components/cloud-file-selector/cloud-file-selector.vue b/src/components/cloud-file-selector/cloud-file-selector.vue
index ccc793a..4675349 100644
--- a/src/components/cloud-file-selector/cloud-file-selector.vue
+++ b/src/components/cloud-file-selector/cloud-file-selector.vue
@@ -211,6 +211,7 @@ export default {
         ...mapMutations([
             "openDialog",
             "closeModal",
+            "setStorageType",
             "showNotification",
             "setLoading",
             "unsetLoading",
@@ -275,6 +276,7 @@ export default {
                     const blob = await this._downloadFile( node );
                     blob.name = node.name;
                     this.loadDocument( blob );
+                    this.setStorageType( this.STORAGE_PROVIDER );
                     this.closeModal();
                     break;
                 case "file":
@@ -286,6 +288,7 @@ export default {
                             await this.loadThirdPartyDocuments([ blob ]);
                         } else {
                             const { image, size } = await loader.loadImage( url );
+                            this.setStorageType( this.STORAGE_PROVIDER );
                             await this.addLoadedFile({ type: this.STORAGE_PROVIDER, name: node.name }, { image, size });
                         }
                         disposeResource( url ); // Blob has been converted to internal resource
@@ -490,7 +493,8 @@ $actionsHeight: 74px;
     }
 
     &:hover {
-        .entry__icon {
+        .entry__icon--folder,
+        .entry__icon--document {
             background-color: $color-1;
             color: #FFF;
         }
diff --git a/src/components/cloud-file-selector/dropbox/dropbox-file-selector.vue b/src/components/cloud-file-selector/dropbox/dropbox-file-selector.vue
index 3357433..a44bd6e 100644
--- a/src/components/cloud-file-selector/dropbox/dropbox-file-selector.vue
+++ b/src/components/cloud-file-selector/dropbox/dropbox-file-selector.vue
@@ -22,8 +22,9 @@
  */
 <script>
 import CloudFileSelector from "../cloud-file-selector";
-import DropboxImagePreview from "./dropbox-image-preview";
 import { mapMutations } from "vuex";
+import { STORAGE_TYPES } from "@/definitions/storage-types";
+import DropboxImagePreview from "./dropbox-image-preview";
 import { listFolder, createFolder, downloadFileAsBlob, deleteEntry } from "@/services/dropbox-service";
 import { PROJECT_FILE_EXTENSION } from "@/definitions/file-types";
 
@@ -34,7 +35,7 @@ export default {
     },
     data: () => ({
         LAST_FOLDER_STORAGE_KEY: "bpy_dropboxDb",
-        STORAGE_PROVIDER : "dropbox",
+        STORAGE_PROVIDER : STORAGE_TYPES.DROPBOX,
     }),
     computed: {
         imagePreviewComponent() {
diff --git a/src/components/cloud-file-selector/dropbox/dropbox-image-preview.vue b/src/components/cloud-file-selector/dropbox/dropbox-image-preview.vue
index 55ba522..9b779fb 100644
--- a/src/components/cloud-file-selector/dropbox/dropbox-image-preview.vue
+++ b/src/components/cloud-file-selector/dropbox/dropbox-image-preview.vue
@@ -90,10 +90,6 @@ export default {
     cursor: pointer;
     vertical-align: middle;
 
-    &:hover {
-        transform: scale(1.05);
-    }
-
     &__loader {
         width: $spacing-xxlarge;
         height: $spacing-xxlarge;
@@ -104,6 +100,11 @@ export default {
         object-fit: cover;
         width: calc(100% - #{$spacing-small});
         height: calc(100% - #{$spacing-small});
+
+        &:hover {
+            transform: scale(1.05);
+            transform-origin: center;
+        }
     }
 }
 </style>
diff --git a/src/components/cloud-file-selector/google-drive/google-drive-file-selector.vue b/src/components/cloud-file-selector/google-drive/google-drive-file-selector.vue
index 79054ae..0be5412 100644
--- a/src/components/cloud-file-selector/google-drive/google-drive-file-selector.vue
+++ b/src/components/cloud-file-selector/google-drive/google-drive-file-selector.vue
@@ -22,9 +22,10 @@
  */
  <script>
  import CloudFileSelector from "../cloud-file-selector";
- import GoogleDriveImagePreview from "./google-drive-image-preview";
- import { PROJECT_FILE_EXTENSION } from "@/definitions/file-types";
  import { mapMutations } from "vuex";
+ import { PROJECT_FILE_EXTENSION } from "@/definitions/file-types";
+ import { STORAGE_TYPES } from "@/definitions/storage-types";
+ import GoogleDriveImagePreview from "./google-drive-image-preview";
  import {
      ROOT_FOLDER, listFolder, createFolder, downloadFileAsBlob, deleteEntry
  } from "@/services/google-drive-service";
@@ -33,7 +34,7 @@
      extends: CloudFileSelector,
      data: () => ({
          LAST_FOLDER_STORAGE_KEY: "bpy_driveDb",
-         STORAGE_PROVIDER: "drive",
+         STORAGE_PROVIDER: STORAGE_TYPES.DRIVE,
      }),
      computed: {
          imagePreviewComponent() {
diff --git a/src/components/cloud-file-selector/messages.json b/src/components/cloud-file-selector/messages.json
index cda5d03..807bb6e 100644
--- a/src/components/cloud-file-selector/messages.json
+++ b/src/components/cloud-file-selector/messages.json
@@ -6,7 +6,7 @@
         "importedFileSuccessfully": "Imported \"{file}\" successfully.",
         "errorImportingFile": "An error occurred while trying to import \"{file}\"",
         "delete": "Delete",
-        "deleteEntryWarning": "Are you sure you wish to delete \"{entry}\" ? You can recover files and folders deleted from your cloud storage, but only through the cloud providers app or site.",
+        "deleteEntryWarning": "Are you sure you wish to delete \"{entry}\" ? You can recover files and folders deleted from your cloud storage through the cloud providers app or site.",
         "entryDeletedSuccessfully": "\"{entry}\" deleted successfully",
         "couldNotDeleteEntry": "An error occurred while attempting to delete \"{entry}\"",
         "newFolderName": "New folder name",
diff --git a/src/components/file-import/dropbox-connector/messages.json b/src/components/file-import/dropbox-connector/messages.json
index 79d52ed..3958e21 100644
--- a/src/components/file-import/dropbox-connector/messages.json
+++ b/src/components/file-import/dropbox-connector/messages.json
@@ -3,7 +3,7 @@
         "connectingToDropbox": "Connecting to Dropbox",
         "connectedToDropbox": "Connected to Dropbox",
         "establishConnection": "Establish connection",
-        "connectionExpl": "In order to import files from Dropbox you must first connect BitMappery to Dropbox. Dropbox connects directly to your machine without middleware, keeping your data private.",
+        "connectionExpl": "In order to import files from or save projects to Dropbox you must first connect BitMappery to Dropbox and grant read and write permissions. Dropbox connects directly to your machine without middleware, keeping your data private.",
         "loginToDropbox": "Log into Dropbox",
         "login": "Login",
         "importFromDropbox": "Import from Dropbox"
diff --git a/src/components/file-import/google-drive-connector/messages.json b/src/components/file-import/google-drive-connector/messages.json
index d0d6722..d66675b 100644
--- a/src/components/file-import/google-drive-connector/messages.json
+++ b/src/components/file-import/google-drive-connector/messages.json
@@ -3,7 +3,7 @@
         "connectingToDrive": "Connecting to Google Drive",
         "connectedToDrive": "Connected to Google Drive",
         "establishConnection": "Establish connection",
-        "connectionExpl": "In order to import files from Google Drive you must first connect BitMappery to Google Drive. Google Drive connects directly to your machine without middleware, keeping your data private.",
+        "connectionExpl": "In order to import files from or save projects to Google Drive you must first connect BitMappery to Google Drive and grant read and write permissions. Google Drive connects directly to your machine without middleware, keeping your data private.",
         "loginToDrive": "Log into Google Drive",
         "login": "Login",
         "importFromDrive": "Import from Google Drive",
diff --git a/src/components/file-menu/save-document/save-document.vue b/src/components/file-menu/save-document/save-document.vue
index 3d66330..5c77c52 100644
--- a/src/components/file-menu/save-document/save-document.vue
+++ b/src/components/file-menu/save-document/save-document.vue
@@ -75,10 +75,9 @@
 import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
 import Modal from "@/components/modal/modal";
 import SelectBox from "@/components/ui/select-box/select-box";
+import { STORAGE_TYPES } from "@/definitions/storage-types";
 import { focus } from "@/utils/environment-util";
 
-const STORAGE_TYPES = [ "local", "dropbox", "drive" ];
-
 import messages from "./messages.json";
 export default {
     i18n: { messages },
@@ -87,13 +86,14 @@ export default {
         SelectBox,
     },
     data: () => ({
-        name        : "",
-        storageLocation : STORAGE_TYPES[ 0 ] // TODO: set to whatever original document source is ?
+        name : "",
+        storageLocation : STORAGE_TYPES.LOCAL
     }),
     computed: {
         ...mapState([
             "dropboxConnected",
             "driveConnected",
+            "storageType",
         ]),
         ...mapGetters([
             "activeDocument",
@@ -103,28 +103,31 @@ export default {
             return this.name.length > 0;
         },
         storageLocations() {
-            const out = [{ label: this.$t( "local" ), value: STORAGE_TYPES[ 0 ] }];
+            const out = [{ label: this.$t( "local" ), value: STORAGE_TYPES.LOCAL }];
             if ( this.dropboxConnected ) {
-                out.push({ label: this.$t( "dropbox" ), value: STORAGE_TYPES[ 1 ] });
+                out.push({ label: this.$t( "dropbox" ), value: STORAGE_TYPES.DROPBOX });
             }
             if ( this.driveConnected ) {
-                out.push({ label: this.$t( "drive" ), value: STORAGE_TYPES[ 2 ] });
+                out.push({ label: this.$t( "drive" ), value: STORAGE_TYPES.DRIVE });
             }
             return out;
         },
         dropboxSaveComponent() {
-            if ( this.storageLocation === "dropbox" ) {
+            if ( this.storageLocation === STORAGE_TYPES.DROPBOX ) {
                 return () => import( "./dropbox/save-dropbox-document" );
             }
             return null;
         },
         driveSaveComponent() {
-            if ( this.storageLocation === "drive" ) {
+            if ( this.storageLocation === STORAGE_TYPES.DRIVE ) {
                 return () => import( "./google-drive/save-google-drive-document" );
             }
             return null;
         },
     },
+    created() {
+        this.storageLocation = this.storageType;
+    },
     mounted() {
         this.name = this.activeDocument.name.split( "." )[ 0 ];
         focus( this.$refs.nameInput );
@@ -155,11 +158,11 @@ export default {
                 // by using refs we have tightly coupled these components
                 // this however ensures we can separate the necessary SDK code
                 // from the core bundle and minimize file size
-                case "dropbox":
+                case STORAGE_TYPES.DROPBOX:
                     this.$refs.dropboxComponent.requestSave();
                     break;
 
-                case "drive":
+                case STORAGE_TYPES.DRIVE:
                     this.$refs.driveComponent.requestSave();
                     break;
             }
diff --git a/src/definitions/image-types.js b/src/definitions/image-types.js
index 5471796..212fdb9 100644
--- a/src/definitions/image-types.js
+++ b/src/definitions/image-types.js
@@ -20,6 +20,7 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
+import { STORAGE_TYPES } from "@/definitions/storage-types";
 import { isSafari } from "@/utils/environment-util";
 
 // 1. all image formats supported by BitMappery
@@ -57,7 +58,7 @@ if ( !isSafari() ) {
 export const isCompressableFileType = type => COMPRESSABLE_TYPES.some(({ mime }) => mime === type );
 
 export const isTransparent = ({ name, type }) => {
-    if ( type === "dropbox" ) {
+    if ( type === STORAGE_TYPES.DROPBOX ) {
         // files imported from Dropbox don't list their mime type, derive from filename instead
         return TRANSPARENT_TYPES.some(({ ext }) => name.includes( ext ));
     }
diff --git a/src/definitions/storage-types.js b/src/definitions/storage-types.js
new file mode 100644
index 0000000..97b6840
--- /dev/null
+++ b/src/definitions/storage-types.js
@@ -0,0 +1,27 @@
+/**
+ * The MIT License (MIT)
+ *
+ * Igor Zinken 2022 - https://www.igorski.nl
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+export const STORAGE_TYPES = {
+    LOCAL   : "local",
+    DROPBOX : "dropbox",
+    DRIVE   : "drive"
+};
diff --git a/src/services/google-drive-service.js b/src/services/google-drive-service.js
index 6eab719..c5746e2 100644
--- a/src/services/google-drive-service.js
+++ b/src/services/google-drive-service.js
@@ -98,11 +98,7 @@ export const requestLogout = () => {
     gapi.auth2.getAuthInstance().signOut();
 };
 
-export const validateScopes = grantedScopes => {
-    const hasRequiredScopes = ACCESS_SCOPES.split( "," ).every( scope => grantedScopes.includes( scope ));
-    console.warn("heb ik die scopes ?"+hasRequiredScopes, grantedScopes);
-    return hasRequiredScopes;
-};
+export const validateScopes = grantedScopes => ACCESS_SCOPES.split( "," ).every( scope => grantedScopes.includes( scope ));
 
 export const disconnect = () => gapi.auth2.getAuthInstance().disconnect();
 
diff --git a/src/store/index.js b/src/store/index.js
index 497ab81..12ec4e5 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -28,6 +28,7 @@ import { getCanvasInstance, getSpriteForLayer } from "@/factories/sprite-factory
 import { PROJECT_FILE_EXTENSION } from "@/definitions/file-types";
 import { LAYER_GRAPHIC } from "@/definitions/layer-types";
 import { PANEL_TOOL_OPTIONS, PANEL_LAYERS } from "@/definitions/panel-types";
+import { STORAGE_TYPES } from "@/definitions/storage-types";
 import { runSpriteFn }   from "@/factories/sprite-factory";
 import canvasModule      from "./modules/canvas-module";
 import documentModule    from "./modules/document-module";
@@ -69,6 +70,7 @@ export default {
         modal: null,            // currently opened modal
         loadingStates: [],      // wether one or more long running operations are running
         notifications: [],      // notification message queue
+        storageType: STORAGE_TYPES.LOCAL,
         dropboxConnected: false,
         driveConnected: false,
         windowSize: {
@@ -163,6 +165,9 @@ export default {
         setWindowSize( state, { width, height }) {
             state.windowSize = { width, height };
         },
+        setStorageType( state, value ) {
+            state.storageType = value;
+        },
         setDropboxConnected( state, value ) {
             state.dropboxConnected = value;
         },
diff --git a/tests/unit/definitions/image-types.spec.js b/tests/unit/definitions/image-types.spec.js
index 507b653..d1eb679 100644
--- a/tests/unit/definitions/image-types.spec.js
+++ b/tests/unit/definitions/image-types.spec.js
@@ -1,4 +1,5 @@
 import { JPEG, PNG, GIF, WEBP, isCompressableFileType, isTransparent } from "@/definitions/image-types";
+import { STORAGE_TYPES } from "@/definitions/storage-types";
 
 describe( "image types", () => {
     it( "should recognize the compressable file types", () => {
@@ -16,7 +17,7 @@ describe( "image types", () => {
     });
 
     it( "should recognize the file types supporting transparency by their extension, for Dropbox import", () => {
-        const type = "dropbox"; // Dropbox imports have no MIME type associated with the file
+        const type = STORAGE_TYPES.DROPBOX; // Dropbox imports have no MIME type associated with the file
 
         expect( isTransparent({ name: `file_${PNG.ext}`, type })).toBe( true );
         expect( isTransparent({ name: `file_${GIF.ext}`, type })).toBe( true );
diff --git a/tests/unit/store/store.spec.js b/tests/unit/store/store.spec.js
index 75e2013..f3de319 100644
--- a/tests/unit/store/store.spec.js
+++ b/tests/unit/store/store.spec.js
@@ -217,6 +217,12 @@ describe( "Vuex store", () => {
             expect( state.windowSize ).toEqual({ width, height });
         });
 
+        it( "should be able to set the storage type", () => {
+            const state = { storageType: "foo" };
+            mutations.setStorageType( state, "bar" );
+            expect( state.storageType ).toEqual( "bar" );
+        });
+
         it( "should be able to set the Dropbox connection status", () => {
             const state = { dropboxConnected: false };
             mutations.setDropboxConnected( state, true );