CSV import error

src/lib/components/csvImportBox.svelte

@@ -27,37 +27,42 @@
     const importItems: Writable<ImportItemsMap> = writable(new Map());
 
     async function showCompletionNotification(
-        databaseId: string,
-        collectionId: string,
-        importData: Payload
+        database: string,
+        collection: string,
+        payload: Payload
     ) {
-        await invalidate(Dependencies.DOCUMENTS);
-        const url = `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}`;
+        const isSuccess = payload.status === 'completed';
+        const isError = !isSuccess && !!payload.errors;
 
-        // extract clean message from nested backend error.
-        const match = importData.errors.join('').match(/message: '(.*)' Message:/i);
-        const errorMessage = match?.[1];
+        if (!isSuccess && !isError) return;
 
-        const type = importData.status === 'completed' ? 'success' : 'error';
-        const message =
-            importData.status === 'completed'
-                ? 'CSV import finished successfully.'
-                : `${errorMessage}`;
+        let errorMessage = 'Import failed. Check your CSV for correct fields and required values.';
+        if (isError && Array.isArray(payload.errors)) {
+            try {
+                // the `errors` is a list of json encoded string.
+                errorMessage = JSON.parse(payload.errors[0]).message;
+            } catch {
+                // do nothing, fallback to default message.
+            }
+        }
+
+        const type = isSuccess ? 'success' : 'error';
+        const message = isError ? errorMessage : 'CSV import finished successfully.';
+        const url = `${base}/project-${page.params.region}-${page.params.project}/databases/database-${database}/collection-${collection}`;
 
         addNotification({
             type,
             message,
             isHtml: true,
             buttons:
-                collectionId === page.params.collection || type === 'error'
-                    ? undefined
-                    : [
-                          {
-                              name: 'View documents',
-                              method: () => goto(url)
-                          }
-                      ]
+                isSuccess && collection !== page.params.collection
+                    ? [{ name: 'View documents', method: () => goto(url) }]
+                    : undefined
         });
+
+        if (isSuccess) {
+            await invalidate(Dependencies.DOCUMENTS);
+        }
     }
 
     async function updateOrAddItem(importData: Payload | Models.Migration) {

src/lib/stores/preferences.ts

@@ -107,7 +107,6 @@ function createPreferences() {
                 }
             );
         },
-
         getCustomCollectionColumns: (collectionId: string): Preferences['columns'] => {
             return preferences?.collections?.[collectionId] ?? [];
         },

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte

@@ -33,6 +33,7 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
     import { flags } from '$lib/flags';
+
     export let data: PageData;
 
     const databaseId = page.params.database;
@@ -255,12 +256,13 @@
                             {@const datetime = document[id]}
                             {@const formatted = formatColumn(document[id])}
                             {@const isDatetimeAttribute = attr.type === 'datetime'}
+                            {@const isEncryptedAttribute = isString(attr) && attr.encrypt}
                             {#if isDatetimeAttribute}
                                 <DualTimeView time={datetime}>
                                     <span slot="title">Timestamp</span>
                                     {toLocaleDateTime(datetime, true)}
                                 </DualTimeView>
-                            {:else if isString(attr) && attr.encrypt && showEncrypt}
+                            {:else if isEncryptedAttribute && showEncrypt}
                                 <button on:click={(e) => e.preventDefault()}>
                                     <InteractiveText
                                         copy={false}

src/routes/(console)/project-[region]-[project]/settings/migrations/details.svelte

@@ -20,8 +20,17 @@
     } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
 
-    export let migration: Models.Migration = null;
     export let show = false;
+    export let migration: Models.Migration = null;
+
+    // convert to proper json objects from string!
+    migration.errors = migration.errors.map((err) => {
+        try {
+            return JSON.parse(err);
+        } catch {
+            return err;
+        }
+    });
 
     type StatusCounters = {
         [resource in 'Database' | 'Collection' | 'Function' | 'Users']?: StatusCounter;
@@ -55,7 +64,7 @@
     };
 
     let tab = 'details' as 'details' | 'logs';
-    let logs = JSON.stringify(migration, null, 2);
+    const logs = JSON.stringify(migration, null, 2);
 </script>
 
 <Modal