web/satellite/vuetify-poc: show file delete confirmation dialog

This change extends the folder deletion modal to work for objects as
well.

Issue: https://github.com/storj/storj/issues/6299

Change-Id: I13e9ffa508c802480c0e3ed2ac630fa693b66fc7

web/satellite/vuetify-poc/src/components/BrowserRowActions.vue

@@ -70,7 +70,7 @@
 
                     <v-divider class="my-2" />
 
-                    <v-list-item density="comfortable" link rounded="lg" base-color="error" @click="onDeleteClick">
+                    <v-list-item density="comfortable" link rounded="lg" base-color="error" @click="emit('deleteFileClick')">
                         <template #prepend>
                             <icon-trash bold />
                         </template>
@@ -82,20 +82,6 @@
             </v-menu>
         </v-btn>
     </div>
-
-    <v-overlay
-        v-model="isDeleting"
-        scrim="surface"
-        contained
-        persistent
-        no-click-animation
-        class="align-center justify-center browser-table__loader-overlay"
-    >
-        <div class="d-flex align-center">
-            <v-progress-circular size="23" width="2" color="error" indeterminate />
-            <p class="ml-3 text-subtitle-1 font-weight-medium text-error">Deleting...</p>
-        </div>
-    </v-overlay>
 </template>
 
 <script setup lang="ts">
@@ -133,7 +119,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    deleteFolderClick: [];
+    deleteFileClick: [];
     shareClick: [];
 }>();
 
@@ -141,12 +127,6 @@ const isDownloading = ref<boolean>(false);
 
 const filePath = computed<string>(() => bucketsStore.state.fileComponentPath);
 
-const isDeleting = computed((): boolean => {
-    return obStore.state.filesToBeDeleted.some(
-        file => file.Key === props.file.Key && file.path === props.file.path,
-    );
-});
-
 async function onDownloadClick(): Promise<void> {
     if (isDownloading.value) {
         return;
@@ -162,20 +142,6 @@ async function onDownloadClick(): Promise<void> {
     }
     isDownloading.value = false;
 }
-
-async function onDeleteClick(): Promise<void> {
-    if (props.file.type === 'folder') {
-        emit('deleteFolderClick');
-        return;
-    }
-
-    obStore.addFileToBeDeleted(props.file);
-    await obStore.deleteObject(filePath.value ? filePath.value + '/' : '', props.file).catch((err: Error) => {
-        err.message = `Error deleting ${props.file.type}. ${err.message}`;
-        notify.notifyError(err, AnalyticsErrorEventSource.FILE_BROWSER_ENTRY);
-    });
-    obStore.removeFileFromToBeDeleted(props.file);
-}
 </script>
 
 <style scoped lang="scss">

web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue

@@ -66,7 +66,7 @@
                     <template #item.actions="{ item }: ItemSlotProps">
                         <browser-row-actions
                             :file="item.raw.browserObject"
-                            @delete-folder-click="() => onDeleteFolderClick(item.raw.browserObject)"
+                            @delete-file-click="() => onDeleteFileClick(item.raw.browserObject)"
                             @share-click="() => onShareClick(item.raw.browserObject)"
                         />
                     </template>
@@ -77,11 +77,11 @@
         <file-preview-dialog v-model="previewDialog" />
     </v-card>
 
-    <delete-folder-dialog
-        v-if="folderToDelete"
-        v-model="isDeleteFolderDialogShown"
-        :folder="folderToDelete"
-        @content-removed="folderToDelete = null"
+    <delete-file-dialog
+        v-if="fileToDelete"
+        v-model="isDeleteFileDialogShown"
+        :file="fileToDelete"
+        @content-removed="fileToDelete = null"
     />
     <share-dialog
         v-model="isShareDialogShown"
@@ -118,7 +118,7 @@ import { tableSizeOptions } from '@/types/common';
 
 import BrowserRowActions from '@poc/components/BrowserRowActions.vue';
 import FilePreviewDialog from '@poc/components/dialogs/FilePreviewDialog.vue';
-import DeleteFolderDialog from '@poc/components/dialogs/DeleteFolderDialog.vue';
+import DeleteFileDialog from '@poc/components/dialogs/DeleteFileDialog.vue';
 import ShareDialog from '@poc/components/dialogs/ShareDialog.vue';
 
 import folderIcon from '@poc/assets/icon-folder-tonal.svg';
@@ -177,8 +177,8 @@ const search = ref<string>('');
 const selected = ref([]);
 const previewDialog = ref<boolean>(false);
 const options = ref<TableOptions>();
-const folderToDelete = ref<BrowserObject | null>(null);
-const isDeleteFolderDialogShown = ref<boolean>(false);
+const fileToDelete = ref<BrowserObject | null>(null);
+const isDeleteFileDialogShown = ref<boolean>(false);
 const fileToShare = ref<BrowserObject | null>(null);
 const isShareDialogShown = ref<boolean>(false);
 
@@ -413,11 +413,11 @@ async function fetchFiles(): Promise<void> {
 }
 
 /**
- * Handles delete button click event for folder rows.
+ * Handles delete button click event for files.
  */
-function onDeleteFolderClick(folder: BrowserObject): void {
-    folderToDelete.value = folder;
-    isDeleteFolderDialogShown.value = true;
+function onDeleteFileClick(file: BrowserObject): void {
+    fileToDelete.value = file;
+    isDeleteFileDialogShown.value = true;
 }
 
 /**

web/satellite/vuetify-poc/src/components/dialogs/DeleteFileDialog.vue

@@ -20,7 +20,7 @@
                         <icon-trash />
                     </v-sheet>
                 </template>
-                <v-card-title class="font-weight-bold">Delete Folder</v-card-title>
+                <v-card-title class="font-weight-bold text-capitalize">Delete {{ fileType }}</v-card-title>
                 <template #append>
                     <v-btn
                         icon="$close"
@@ -36,9 +36,9 @@
             <v-divider />
 
             <div class="pa-7">
-                The following folder and all of its data will be deleted. This action cannot be undone.
+                The following {{ fileType }} <template v-if="isFolder">and all of its data</template> will be deleted. This action cannot be undone.
                 <br><br>
-                <span class="font-weight-bold">{{ folder.Key }}</span>
+                <span class="font-weight-bold">{{ file.path + file.Key }}</span>
             </div>
 
             <v-divider />
@@ -86,7 +86,7 @@ import IconTrash from '@poc/components/icons/IconTrash.vue';
 
 const props = defineProps<{
     modelValue: boolean,
-    folder: BrowserObject,
+    file: BrowserObject,
 }>();
 
 const emit = defineEmits<{
@@ -109,17 +109,29 @@ const innerContent = ref<Component | null>(null);
 
 const filePath = computed<string>(() => bucketsStore.state.fileComponentPath);
 
+const fileType = computed<string>(() => {
+    return props.file.type ?? 'file';
+});
+
+const isFolder = computed<boolean>(() => {
+    return fileType.value === 'folder';
+});
+
 async function onDeleteClick(): Promise<void> {
     await withLoading(async () => {
         try {
-            await obStore.deleteFolder(props.folder, filePath.value ? filePath.value + '/' : '');
+            if (isFolder.value) {
+                await obStore.deleteFolder(props.file, filePath.value ? filePath.value + '/' : '');
+            } else {
+                await obStore.deleteObject(filePath.value ? filePath.value + '/' : '', props.file);
+            }
         } catch (error) {
-            error.message = `Error deleting folder. ${error.message}`;
+            error.message = `Error deleting ${fileType.value}. ${error.message}`;
             notify.notifyError(error, AnalyticsErrorEventSource.FILE_BROWSER_ENTRY);
             return;
         }
 
-        notify.success('Folder deleted.');
+        notify.success(`${fileType.value.charAt(0).toUpperCase() + fileType.value.slice(1)} deleted.`);
         model.value = false;
     });
 }