Error toasts: show HTTP response detail + don't auto-close

frontend/src/App.vue

@@ -39,7 +39,7 @@ onBeforeUnmount(() => {
 // Top level error handler
 onErrorCaptured((e: Error) => {
   const toast = useToast();
-  toast.error('Error', e.message);
+  toast.error('Error', e.message, { life: 0 });
 });
 </script>
 

frontend/src/components/bucket/BucketConfigForm.vue

@@ -86,7 +86,7 @@ const onSubmit = async (values: any) => {
       : await bucketStore.createBucket(formBucket);
 
     // if successfully added a new configuration, do a recursive sync of this bucket
-    if(!props.bucket) await bucketStore.syncBucket(bucketModel.bucketId, true);
+    if (!props.bucket) await bucketStore.syncBucket(bucketModel.bucketId, true);
     // refresh bucket list
     await bucketStore.fetchBuckets({ userId: getUserId.value, objectPerms: true });
 
@@ -109,7 +109,7 @@ const onSubmit = async (values: any) => {
       });
     }
   } catch (error: any) {
-    toast.error('Configuring storage location source', error);
+    toast.error('Configuring storage location source', error.response?.data.detail ?? error, { life: 0 });
   }
 };
 
@@ -186,7 +186,7 @@ const onCancel = () => {
         :bucket-id="bucket?.bucketId"
         :mode="ButtonMode.BUTTON"
         :recursive="true"
-        />
+      />
     </Form>
   </div>
 </template>

frontend/src/components/common/BulkPermission.vue

@@ -220,7 +220,7 @@ const onSubmit = handleSubmit(async (values: any, { resetForm }) => {
     complete.value = true;
     resetForm();
   } catch (error: any) {
-    toast.error('Bulk permission operation failed', error.response?.data.detail, { life: 0 });
+    toast.error('Bulk permission operation failed', error.response?.data.detail ?? error, { life: 0 });
   }
   loading.value = false;
 });

frontend/src/components/common/Invite.vue

@@ -194,7 +194,7 @@ const onSubmit = handleSubmit(async (values: any, { resetForm }) => {
     complete.value = true;
     resetForm();
   } catch (error: any) {
-    toast.error('Creating Invite', error.response?.data.detail, { life: 0 });
+    toast.error('Creating Invite', error.response?.data.detail ?? error, { life: 0 });
   }
   loading.value = false;
 });

frontend/src/components/common/SyncButton.vue

@@ -51,7 +51,7 @@ const onSubmit = () => {
   } else if (props.bucketId && props.recursive) {
     bucketStore.syncBucket(props.bucketId, true);
   } else {
-    toast.error('', 'Unable to synchronize');
+    toast.error('', 'Unable to synchronize', { life: 0 });
   }
 
   displaySyncDialog.value = false;
@@ -122,8 +122,9 @@ const onClick = () => {
     <ul class="mb-4 ml-1.5">
       <!-- recursive bucket-->
       <li v-if="props.bucketId && props.recursive">
-        This will schedule a <strong>Full</strong> synchronization of all files
-        and any sub-folders with the source storage location.
+        This will schedule a
+        <strong>Full</strong>
+        synchronization of all files and any sub-folders with the source storage location.
       </li>
       <!-- flat bucket -->
       <li v-else-if="props.bucketId">
@@ -161,7 +162,6 @@ const onClick = () => {
   <span class="material-icons-outlined">sync</span>
   </Button> -->
 
-
   <Button
     v-if="props.mode === ButtonMode.ICON"
     v-tooltip.bottom="{ value: labelText }"
@@ -170,7 +170,7 @@ const onClick = () => {
     :aria-label="labelText"
     @click="onClick"
   >
-  <span class="material-icons-outlined">sync</span>
+    <span class="material-icons-outlined">sync</span>
   </Button>
   <Button
     v-else
@@ -180,7 +180,7 @@ const onClick = () => {
     :aria-label="labelText"
     @click="onClick"
   >
-  <span class="material-icons-outlined mr-1 sync-icon">sync</span>
+    <span class="material-icons-outlined mr-1 sync-icon">sync</span>
     Sync
   </Button>
 </template>

frontend/src/components/object/DeleteObjectButton.vue

@@ -2,7 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { computed, ref } from 'vue';
 
-import { Button, Dialog, useConfirm, useToast} from '@/lib/primevue';
+import { Button, Dialog, useConfirm, useToast } from '@/lib/primevue';
 import { useNavStore, useObjectStore, useVersionStore } from '@/store';
 import { ButtonMode } from '@/utils/enums';
 import { onDialogHide } from '@/utils/utils';
@@ -13,7 +13,7 @@ type Props = {
   ids: Array<string>;
   mode: ButtonMode;
   versionId?: string; // Only use this when deleting a single object
-  hardDelete?: boolean // are we doing a hardDelete delete?
+  hardDelete?: boolean; // are we doing a hardDelete delete?
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -47,7 +47,7 @@ const confirmDelete = async () => {
     // refresh version store to determine if bucketVersioningEnabled
     await versionStore.fetchVersions({ objectId: props.ids[0] });
     // if versionId provided, and versioning is enabled on bucket, delete version
-    if(props.versionId && bucketVersioningEnabled.value) {
+    if (props.versionId && bucketVersioningEnabled.value) {
       confirm.require({
         message: 'Are you sure you want to permanently delete this version?',
         header: 'Delete Version?',
@@ -58,9 +58,8 @@ const confirmDelete = async () => {
             await objectStore.deleteVersion(props.ids[0], props.versionId);
             emit('on-version-deleted', { versionId: props.versionId });
             toast.success('Version deleted');
-          }
-          catch (error) {
-            toast.error('Unable to delete version');
+          } catch (error: any) {
+            toast.error('Unable to delete version', error.response?.data.detail ?? error, { life: 0 });
           }
         },
         onHide: () => onDialogHide(),
@@ -72,13 +71,13 @@ const confirmDelete = async () => {
       const isPermanent = props.hardDelete || !bucketVersioningEnabled.value;
       const msgContext = numberOfObjects > 1 ? `the selected ${numberOfObjects} files` : 'this file';
       let header, message;
-      if(!isPermanent){
-        header =`Delete ${numberOfObjects > 1 ? 'files' : 'file'}?`,
-        message =  `Are you sure you want to delete ${msgContext}?
+      if (!isPermanent) {
+        header = `Delete ${numberOfObjects > 1 ? 'files' : 'file'}?`,
+        message = `Are you sure you want to delete ${msgContext}?
           If Versioning is enabled on the object storage server, deleted files are moved to the Recycle Bin`;
       } else {
-        header =`Permanently Delete ${numberOfObjects > 1 ? 'files' : 'file'}?`,
-        message =  `This action cannot be undone. Are you sure you want to permanently delete ${msgContext}.
+        header = `Permanently Delete ${numberOfObjects > 1 ? 'files' : 'file'}?`,
+        message = `This action cannot be undone. Are you sure you want to permanently delete ${msgContext}.
           Once deleted, these files cannot be restored`;
       }
       confirm.require({
@@ -90,31 +89,32 @@ const confirmDelete = async () => {
           try {
             for (const id of props.ids) {
               await objectStore.deleteObject(id, props.hardDelete);
-            };
+            }
             // to break on single failure (use promise.all ?)
             toast.success(`${numberOfObjects} ${numberOfObjects > 1 ? 'files' : 'file'} deleted`);
             emit('on-object-deleted', { hardDelete: props.hardDelete });
-          }
-          catch (error) {
-            toast.error('Unable to delete File(s)');
+          } catch (error: any) {
+            toast.error('Unable to delete File(s)', error.response?.data.detail ?? error, { life: 0 });
           }
         },
         onHide: () => onDialogHide(),
         reject: () => onDialogHide()
       });
     }
-  }
-
-  else {
+  } else {
     displayNoFileDialog.value = true;
   }
 };
 const buttonLabel = computed(() => {
-  return props.hardDelete ?
-    (props.versionId ?
-      'Permanently delete version' : (props.ids.length > 1 ?
-        'Permanently delete selected files' : 'Permanently delete file')) :
-    (props.versionId ? 'Delete version' : 'Delete file' );
+  return props.hardDelete
+    ? props.versionId
+      ? 'Permanently delete version'
+      : props.ids.length > 1
+        ? 'Permanently delete selected files'
+        : 'Permanently delete file'
+    : props.versionId
+      ? 'Delete version'
+      : 'Delete file';
 });
 </script>
 
@@ -142,7 +142,7 @@ const buttonLabel = computed(() => {
     :aria-label="buttonLabel"
     @click="confirmDelete()"
   >
-  <span class="material-icons-outlined">delete</span>
+    <span class="material-icons-outlined">delete</span>
   </Button>
   <Button
     v-else
@@ -152,7 +152,7 @@ const buttonLabel = computed(() => {
     :aria-label="buttonLabel"
     @click="confirmDelete()"
   >
-  <span class="material-icons-outlined mr-1">delete</span>
+    <span class="material-icons-outlined mr-1">delete</span>
     Delete
   </Button>
 </template>

frontend/src/components/object/ObjectMetadataTagForm.vue

@@ -53,7 +53,7 @@ const onSubmit = async (values: any) => {
       tagset: values.tagset
     } as ObjectMetadataTagFormType);
   } catch (error: any) {
-    toast.error('Adding metadata and tags', error);
+    toast.error('Adding metadata and tags', error.response?.data.detail ?? error, { life: 0 });
   }
 };
 

frontend/src/components/object/ObjectPublicToggle.vue

@@ -44,7 +44,7 @@ const togglePublic = async (setPublicValue: boolean) => {
           .then(() => {
             toast.success(`"${props.objectName}" set to public`);
           })
-          .catch((e) => toast.error(e));
+          .catch((e) => toast.error('Setting file to public', e.response?.data.detail, { life: 0 }));
       },
       reject: () => (isPublic.value = false),
       onHide: () => (isPublic.value = false)
@@ -55,7 +55,7 @@ const togglePublic = async (setPublicValue: boolean) => {
       .then(() => {
         toast.success(`"${props.objectName}" is no longer public`);
       })
-      .catch((e) => toast.error(e));
+      .catch((e) => toast.error('Setting file to non-public', e.response?.data.detail, { life: 0 }));
 };
 
 watch(props, () => {

frontend/src/components/object/ObjectUpload.vue

@@ -63,12 +63,11 @@ const onUpload = async (event: any) => {
           );
 
           // show toast for any object updates
-          if (response?.newVersionId) toast.info(
-            `A new version of file '${file.name}' has been created`);
+          if (response?.newVersionId) toast.info(`A new version of file '${file.name}' has been created`);
 
           successfulFiles.value.push(file);
         } catch (error: any) {
-          toast.error(`Failed to upload file ${file.name}`, error, { life: 0 });
+          toast.error(`Failed to upload file ${file.name}`, error.response?.data.detail ?? error, { life: 0 });
           failedFiles.value.push(file);
         } finally {
           appStore.endUploading();
@@ -85,7 +84,7 @@ const onUpload = async (event: any) => {
     // Update object store
     await objectStore.fetchObjects({ bucketId: bucketId, userId: getUserId.value, bucketPerms: true });
   } else {
-    toast.error('Updating file', 'Failed to acquire bucket ID');
+    toast.error('Updating file', 'Failed to acquire bucket ID', { life: 0 });
   }
 };
 

frontend/src/components/object/ObjectUploadBasic.vue

@@ -98,7 +98,7 @@ const onUpload = async () => {
     }
   } catch (error: any) {
     appStore.endUploading();
-    toast.error(`File upload: ${file.value?.name}`, error);
+    toast.error(`File upload: ${file.value?.name}`, error.response?.data.detail ?? error, { life: 0 });
   }
 };
 

frontend/src/components/object/RestoreObjectButton.vue

@@ -38,8 +38,7 @@ const confirmRestore = () => {
   focusedElement.value = document.activeElement;
   const numberOfObjects = props.ids.length;
   if (numberOfObjects) {
-
-    if(props.versionId) {
+    if (props.versionId) {
       confirm.require({
         message: 'Are you sure you want to restore the file with the this version?',
         header: 'Restore Version?',
@@ -50,26 +49,22 @@ const confirmRestore = () => {
             const newVersion = await objectStore.restoreObject(props.ids[0], props.versionId);
             emit('on-version-restored', { versionId: newVersion.data.id });
             toast.success('Version restored');
-          }
-          catch (error) {
-            toast.error('Unable to restore version');
+          } catch (error: any) {
+            toast.error('Unable to restore version', error.response?.data.detail ?? error, { life: 0 });
           }
         },
         onHide: () => onDialogHide(),
         reject: () => onDialogHide()
       });
-
-    }
-
-    else{
+    } else {
       let header: string, message: string, confirmation: string;
       const filename = getObject.value(props.ids[0])?.name;
-      if(numberOfObjects > 1) {
+      if (numberOfObjects > 1) {
         header = 'Restore Files?';
         message = `Are you sure you want to restore the selected ${numberOfObjects} files from the Recycle Bin?
           Once restored, the files will be returned to their original location.`;
         confirmation = `${numberOfObjects} have been successfully restored to their original location.`;
-      } else{
+      } else {
         header = 'Restore File?';
         message = `Are you sure you want to restore this file from the Recycle Bin?
           Once restored, the file will be returned to its original location.`;
@@ -86,18 +81,15 @@ const confirmRestore = () => {
             for (const id of props.ids) {
               await objectStore.restoreObject(id, undefined);
             }
-            toast.success(`${numberOfObjects > 1 ? 'Files' : 'File'} Restored`,
-              confirmation );
+            toast.success(`${numberOfObjects > 1 ? 'Files' : 'File'} Restored`, confirmation);
             emit('on-object-restored');
-          }
-          catch (error) {
-            toast.error('Unable to restore file');
+          } catch (error: any) {
+            toast.error('Unable to restore file', error.response?.data.detail ?? error, { life: 0 });
           }
         },
         onHide: () => onDialogHide(),
         reject: () => onDialogHide()
       });
-
     }
   } else {
     displayNoFileDialog.value = true;
@@ -129,7 +121,7 @@ const confirmRestore = () => {
     :aria-label="props.versionId ? 'Restore this version' : 'Restore latest version'"
     @click="confirmRestore()"
   >
-  <span class="material-icons-outlined">restore</span>
+    <span class="material-icons-outlined">restore</span>
   </Button>
   <Button
     v-else

frontend/src/store/bucketStore.ts

@@ -51,13 +51,13 @@ export const useBucketStore = defineStore('bucket', () => {
     }
   }
 
-  async function deleteBucket(bucketId: string, recursive: boolean){
+  async function deleteBucket(bucketId: string, recursive: boolean) {
     try {
       appStore.beginIndeterminateLoading();
-      await bucketService.deleteBucket(bucketId, recursive );
+      await bucketService.deleteBucket(bucketId, recursive);
       toast.success('', 'Folder deleted');
     } catch (error: any) {
-      toast.error('Unable to delete folder', error);
+      toast.error('Unable to delete folder', error.response?.data.detail ?? error, { life: 0 });
     } finally {
       appStore.endIndeterminateLoading();
     }
@@ -98,7 +98,7 @@ export const useBucketStore = defineStore('bucket', () => {
         return response;
       } else return [];
     } catch (error: any) {
-      toast.error('Fetching buckets', error);
+      toast.error('Fetching buckets', error.response?.data.detail ?? error, { life: 0 });
     } finally {
       appStore.endIndeterminateLoading();
     }
@@ -118,10 +118,10 @@ export const useBucketStore = defineStore('bucket', () => {
     try {
       appStore.beginIndeterminateLoading();
 
-      await bucketService.syncBucket(bucketId, recursive );
+      await bucketService.syncBucket(bucketId, recursive);
       toast.success('', 'Sync is in queue and will begin soon');
     } catch (error: any) {
-      toast.error('Unable to sync', error);
+      toast.error('Unable to sync', error.response?.data.detail ?? error, { life: 0 });
     } finally {
       appStore.endIndeterminateLoading();
     }