Merge pull request #1390 from centerofci/1307_ui_fixes_for_imports

Use column ids in API requests during import
mathesar-foundation · May 20, 2022 · 3de482e · 3de482e
2 parents a8bad82 + 873b88b
commit 3de482e
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 98 deletions.
diff --git a/mathesar_ui/src/sections/import-data/importUtils.ts b/mathesar_ui/src/sections/import-data/importUtils.ts
@@ -32,6 +32,7 @@ import type {
   FileUploadProgress,
 } from '@mathesar-component-library/types';
 import { TabularType } from '@mathesar/stores/table-data';
+import { getErrorMessage } from '@mathesar/utils/errors';
 
 function completionCallback(
   fileImportStore: FileImport,
@@ -324,106 +325,88 @@ export async function loadPreview(
   return tableCreationResult;
 }
 
-// When finish is clicked after preview
+/** When finish is clicked after preview */
 export async function finishImport(fileImportStore: FileImport): Promise<void> {
   const fileImportData = get(fileImportStore);
+  const { previewId } = fileImportData;
+  if (previewId === undefined) {
+    return;
+  }
 
-  if (fileImportData.previewId) {
-    const columns: {
-      name?: PreviewColumn['name'];
-      type?: PreviewColumn['type'];
-    }[] = [];
-    // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
-    fileImportData.previewColumns.forEach((column) => {
-      if (column.isSelected) {
-        columns.push({
-          name: column.displayName,
-          type: column.type,
-        });
-      } else {
-        columns.push({});
-      }
-    });
+  const previewColumns = fileImportData.previewColumns ?? [];
+  const columns = previewColumns.map((column) => ({
+    id: column.id,
+    name: column.displayName,
+    type: column.type,
+  }));
 
-    fileImportData.importPromise?.cancel();
+  fileImportData.importPromise?.cancel();
 
-    try {
-      // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
-      let columnChangePromise: CancellablePromise<unknown> = null;
-      // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
-      let verificationPromise: CancellablePromise<unknown> = null;
-
-      const saveTable = async () => {
-        // https://github.com/centerofci/mathesar/issues/1055
-        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        const url = `/api/db/v0/tables/${fileImportData.previewId}/`;
-        columnChangePromise = patchAPI(url, { columns });
-        await columnChangePromise;
-        const verificationRequest: Record<string, unknown> = {
-          import_verified: true,
-        };
-        if (fileImportData.name !== fileImportData.previewName) {
-          verificationRequest.name = fileImportData.name;
-        }
-        verificationPromise = patchAPI(
-          // https://github.com/centerofci/mathesar/issues/1055
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-          `/api/db/v0/tables/${fileImportData.previewId}/`,
-          verificationRequest,
-        );
-        await verificationPromise;
+  try {
+    let columnChangePromise: CancellablePromise<unknown> | undefined;
+    let verificationPromise: CancellablePromise<unknown> | undefined;
+
+    const saveTable = async () => {
+      const url = `/api/db/v0/tables/${previewId}/`;
+      columnChangePromise = patchAPI(url, { columns });
+      await columnChangePromise;
+      const verificationRequest: Record<string, unknown> = {
+        import_verified: true,
       };
+      if (fileImportData.name !== fileImportData.previewName) {
+        verificationRequest.name = fileImportData.name;
+      }
+      verificationPromise = patchAPI(url, verificationRequest);
+      await verificationPromise;
+    };
 
-      const importPromise = new CancellablePromise(
-        (resolve, reject) => {
-          void saveTable().then(
-            () => resolve(),
-            (err) => reject(err),
-          );
-        },
-        () => {
-          columnChangePromise?.cancel();
-          verificationPromise?.cancel();
-        },
-      );
-      setInFileStore(fileImportStore, {
-        importStatus: States.Loading,
-        importPromise,
-        // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
-        error: null,
-      });
-      await importPromise;
+    const importPromise = new CancellablePromise(
+      (resolve, reject) => {
+        void saveTable().then(
+          () => resolve(),
+          (err) => reject(err),
+        );
+      },
+      () => {
+        columnChangePromise?.cancel();
+        verificationPromise?.cancel();
+      },
+    );
+    setInFileStore(fileImportStore, {
+      importStatus: States.Loading,
+      importPromise,
+      error: undefined,
+    });
+    await importPromise;
 
-      void refetchTablesForSchema(fileImportData.schemaId);
+    void refetchTablesForSchema(fileImportData.schemaId);
 
-      setInFileStore(fileImportStore, {
-        importStatus: States.Done,
-      });
-      setImportStatus(fileImportData.id, {
-        status: States.Done,
-      });
-      removeImportFromView(fileImportData.schemaId, fileImportData.id);
+    setInFileStore(fileImportStore, {
+      importStatus: States.Done,
+    });
+    setImportStatus(fileImportData.id, {
+      status: States.Done,
+    });
+    removeImportFromView(fileImportData.schemaId, fileImportData.id);
 
-      const tabList = getTabsForSchema(
-        fileImportData.databaseName,
-        fileImportData.schemaId,
+    const tabList = getTabsForSchema(
+      fileImportData.databaseName,
+      fileImportData.schemaId,
+    );
+    const existingTab = tabList.getImportTabByImportID(fileImportData.id);
+    if (existingTab) {
+      const newTab = constructTabularTab(
+        TabularType.Table,
+        previewId,
+        fileImportData.name ?? 'UNKNOWN',
       );
-      const existingTab = tabList.getImportTabByImportID(fileImportData.id);
-      if (existingTab) {
-        const newTab = constructTabularTab(
-          TabularType.Table,
-          fileImportData.previewId,
-          // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
-          fileImportData.name,
-        );
-        tabList.replace(existingTab, newTab);
-      }
-    } catch (err: unknown) {
-      setInFileStore(fileImportStore, {
-        importStatus: States.Error,
-        error: (err as Error)?.message,
-      });
+      tabList.replace(existingTab, newTab);
     }
+  } catch (err: unknown) {
+    setInFileStore(fileImportStore, {
+      importStatus: States.Error,
+      error: getErrorMessage(err),
+    });
   }
 }
 

diff --git a/mathesar_ui/src/sections/import-data/preview/PreviewColumn.svelte b/mathesar_ui/src/sections/import-data/preview/PreviewColumn.svelte
@@ -16,6 +16,7 @@
     const type = e.detail;
     if (typeof type !== 'undefined') {
       dispatch('typechange', {
+        id: column.id,
         name: column.name,
         type,
       });

diff --git a/mathesar_ui/src/sections/import-data/preview/PreviewRows.svelte b/mathesar_ui/src/sections/import-data/preview/PreviewRows.svelte
@@ -6,6 +6,7 @@
   import type { FileImport, PreviewRow } from '@mathesar/stores/fileImports';
   import CellValue from '@mathesar/components/CellValue.svelte';
   import type { CancellablePromise } from '@mathesar-component-library';
+  import { getErrorMessage } from '@mathesar/utils/errors';
 
   interface Response {
     records: PreviewRow[];
@@ -18,30 +19,31 @@
     previewPromise?.cancel();
     try {
       const fileImportData = get(fileImportStore);
-      const columnInfo = fileImportData.previewColumns?.map((column) => ({
+      const { previewId } = fileImportData;
+      if (previewId === undefined) {
+        throw new Error('Missing previewId.');
+      }
+      const columns = fileImportData.previewColumns?.map((column) => ({
+        id: column.id,
         name: column.name,
         type: column.type,
       }));
+
       setInFileStore(fileImportStore, {
         previewRowsLoadStatus: States.Loading,
         error: undefined,
       });
-      previewPromise = postAPI<Response>(
-        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        `/api/db/v0/tables/${fileImportData.previewId}/previews/`,
-        {
-          columns: columnInfo,
-        },
-      );
+      const url = `/api/db/v0/tables/${previewId}/previews/`;
+      previewPromise = postAPI<Response>(url, { columns });
       const result = await previewPromise;
       setInFileStore(fileImportStore, {
         previewRowsLoadStatus: States.Done,
-        previewRows: result.records || [],
+        previewRows: result.records ?? [],
       });
     } catch (err) {
       setInFileStore(fileImportStore, {
         previewRowsLoadStatus: States.Error,
-        error: (err as Error).message,
+        error: getErrorMessage(err),
         previewRows: [],
       });
     }

diff --git a/mathesar_ui/src/stores/fileImports.ts b/mathesar_ui/src/stores/fileImports.ts
@@ -16,6 +16,7 @@ export const Stages = {
 };
 
 export interface PreviewColumn {
+  id: number;
   name: string;
   displayName: string;
   index: number;