web/satellite: integrate browser

* create `isInitalized` property to check S3 client exists
* hide FileBrowser until `isInitialized === true`
* change broken reference from `buttonUpload` to `buttonFileUpload`
* add feature flag `new-browser` to switch between external and internal browser
* fix handling of `webkitRelativePath` for folder upload feature
* only load external styles when using external browser via contingent `file-browser` class

Change-Id: Ibdbfa45d8dbe3c6d828473c16e4cdb8694562c1a

web/satellite/src/components/browser/FileBrowser.vue

@@ -4,7 +4,8 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="row" @click="closeModalDropdown">
+	<div class="file-browser">
+    <div v-if="isInitialized" class="row white-background p-4 p-lg-5" @click="closeModalDropdown">
         <div class="col-sm-12">
             <div
                 v-cloak
@@ -273,7 +274,7 @@
                 <div
                     v-if="displayUpload"
                     class="upload-help"
-                    @click="buttonUpload"
+                    @click="buttonFileUpload"
                 >
                     <svg
                         width="300"
@@ -434,6 +435,7 @@
             <file-share-modal v-if="showFileShareModal" />
         </div>
     </div>
+    </div>
 </template>
 
 <script>
@@ -458,6 +460,10 @@ export default {
         fetchingFilesSpinner: false
     }),
     computed: {
+        isInitialized() {
+            return this.$store.getters["files/isInitialized"];
+        },
+
         path: fromFilesStore("path"),
 
         filesUploading() {
@@ -687,9 +693,12 @@ export default {
 
 <style scoped>
 /* stylelint-disable */
-
 @import './scoped-bootstrap.css';
 
+.white-background {
+    background-color: #fff;
+}
+
 .file-browser {
     min-height: 500px;
 }

web/satellite/src/components/objects/UploadFile.vue

@@ -4,7 +4,7 @@
 <template>
     <div>
         <p class="back" @click="goToBuckets">&lt;- Back to Buckets</p>
-        <div class="file-browser">
+        <div :class="{ 'file-browser': !newBrowser }">
             <FileBrowser />
         </div>
         <UploadCancelPopup v-if="isCancelUploadPopupVisible" />
@@ -16,6 +16,7 @@ import * as browser from 'browser';
 import { Component, Vue } from 'vue-property-decorator';
 
 import UploadCancelPopup from '@/components/objects/UploadCancelPopup.vue';
+import InternalFileBrowser from '@/components/browser/FileBrowser.vue';
 
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { RouteConfig } from '@/router';
@@ -23,8 +24,8 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
 import { AccessGrant, GatewayCredentials } from '@/types/accessGrants';
 import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { MetaUtils } from '@/utils/meta';
-
-const FileBrowser = MetaUtils.getMetaContent('new-browser') === "true" ? Vue : browser.FileBrowser;
+const newBrowser = MetaUtils.getMetaContent('new-browser') === "true";
+const FileBrowser = newBrowser ? InternalFileBrowser : browser.FileBrowser;
 
 // @vue/component
 @Component({
@@ -37,6 +38,7 @@ export default class UploadFile extends Vue {
     private linksharingURL = '';
     private worker: Worker;
     private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+    private readonly newBrowser: boolean = newBrowser;
 
     /**
      * Lifecycle hook after initial render.

web/satellite/src/store/index.ts

@@ -23,6 +23,11 @@ import { makeProjectsModule, PROJECTS_MUTATIONS, ProjectsState } from '@/store/m
 import { makeUsersModule } from '@/store/modules/users';
 import { User } from '@/types/users';
 
+import { MetaUtils } from '@/utils/meta';
+import internalFiles from '@/store/modules/files';
+import * as externalBrowser from 'browser';
+const files = MetaUtils.getMetaContent('new-browser') === "true" ? internalFiles : externalBrowser.files;
+
 Vue.use(Vuex);
 
 type Mutation<State> =
@@ -61,7 +66,7 @@ export interface ModulesState {
     usersModule: User;
     projectsModule: ProjectsState;
     objectsModule: ObjectsState;
-    files: typeof files.state;
+    files: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 // Satellite store (vuex)

web/satellite/src/store/modules/files.ts

@@ -1,8 +1,8 @@
-/* eslint-disable */
-
 // Copyright (C) 2021 Storj Labs, Inc.
 // See LICENSE for copying information.
 
+/* eslint-disable */
+
 import S3 from "aws-sdk/clients/s3";
 import * as R from "ramda";
 
@@ -73,7 +73,9 @@ export default {
                 Bucket: state.bucket,
                 Key: url
             });
-        }
+        },
+
+        isInitialized: (state) => state.s3 !== null
     },
     mutations: {
         init(
@@ -281,20 +283,25 @@ export default {
             const items = e.dataTransfer
                 ? e.dataTransfer.items
                 : e.target.files;
-				
+
             async function* traverse(item, path = "") {
                 if (item.isFile) {
                     const file = await new Promise(item.file.bind(item));
                     yield { path, file };
                 } else if (item instanceof File) {
-                    yield { path: (item as any).webkitRelativePath, file: item };
+                    let relativePath = (item as any).webkitRelativePath.split("/").slice(0, -1).join("/");
+
+                    if (relativePath.length) {
+                        relativePath += "/";
+                    }
+
+                    yield { path: relativePath, file: item };
                 } else if (item.isDirectory) {
                     const dirReader = item.createReader();
 
                     const entries = await new Promise(
                         dirReader.readEntries.bind(dirReader)
                     ) as any[];
-
                     for (const entry of entries) {
                         yield* traverse(entry, path + item.name + "/");
                     }