web/satellite: update upload text and UX

This change changes the file browser empty state text to inform that clicking it will open the upload dialog. Issue: #6853 Change-Id: I7aeafccf262522975bd354966e71995e5a022081
storj · Mar 29, 2024 · 491175c · 491175c
1 parent dab2464
commit 491175c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/web/satellite/src/components/BrowserCardViewComponent.vue b/web/satellite/src/components/BrowserCardViewComponent.vue
@@ -73,7 +73,9 @@
     >
         <template #no-data>
             <div class="d-flex justify-center">
-                <p class="text-body-2">{{ search ? 'No data found.' : 'Drag and drop files to upload' }}</p>
+                <p class="text-body-2 cursor-pointer" @click="emit('uploadClick')">
+                    {{ search ? 'No data found' : 'Drag and drop files or click here to upload' }}
+                </p>
             </div>
         </template>
 
@@ -218,7 +220,6 @@ const props = defineProps<{
 
 const emit = defineEmits<{
     uploadClick: [];
-    newFolderClick: [];
 }>();
 
 const analyticsStore = useAnalyticsStore();

diff --git a/web/satellite/src/components/BrowserTableComponent.vue b/web/satellite/src/components/BrowserTableComponent.vue
@@ -26,7 +26,6 @@
             :items="tableFiles"
             :search="search"
             :item-value="(item: BrowserObjectWrapper) => item.browserObject.path + item.browserObject.Key"
-            :no-data-text="search ? 'No data found' : 'Drag and drop files to upload'"
             :page="cursor.page"
             hover
             must-sort
@@ -38,6 +37,11 @@
             @update:page="onPageChange"
             @update:itemsPerPage="onLimitChange"
         >
+            <template #no-data>
+                <p class="text-body-2 cursor-pointer" @click="emit('uploadClick')">
+                    {{ search ? 'No data found' : 'Drag and drop files or click here to upload' }}
+                </p>
+            </template>
             <template #item="{ props: rowProps }">
                 <v-data-table-row v-bind="rowProps">
                     <template #item.name="{ item }: ItemSlotProps">
@@ -171,7 +175,6 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
 import { useBucketsStore } from '@/store/modules/bucketsStore';
 import { useConfigStore } from '@/store/modules/configStore';
 import { tableSizeOptions } from '@/types/common';
-import { useAppStore } from '@/store/modules/appStore';
 import { BrowserObjectTypeInfo, BrowserObjectWrapper, EXTENSION_INFOS, FILE_INFO, FOLDER_INFO } from '@/types/browser';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { useUsersStore } from '@/store/modules/usersStore';
@@ -201,12 +204,15 @@ const props = defineProps<{
     loading?: boolean;
 }>();
 
+const emit = defineEmits<{
+    uploadClick: [];
+}>();
+
 const analyticsStore = useAnalyticsStore();
 const config = useConfigStore();
 const obStore = useObjectBrowserStore();
 const projectsStore = useProjectsStore();
 const bucketsStore = useBucketsStore();
-const appStore = useAppStore();
 const userStore = useUsersStore();
 
 const notify = useNotify();

diff --git a/web/satellite/src/views/Bucket.vue b/web/satellite/src/views/Bucket.vue
@@ -189,8 +189,8 @@
             </v-row>
         </v-col>
 
-        <browser-card-view-component v-if="isCardView" :force-empty="!isInitialized" @new-folder-click="isNewFolderDialogOpen = true" @upload-click="menu = true" />
-        <browser-table-component v-else :loading="isFetching" :force-empty="!isInitialized" />
+        <browser-card-view-component v-if="isCardView" :force-empty="!isInitialized" @upload-click="buttonFileUpload" />
+        <browser-table-component v-else :loading="isFetching" :force-empty="!isInitialized" @upload-click="buttonFileUpload" />
     </v-container>
 
     <browser-new-folder-dialog v-model="isNewFolderDialogOpen" />