feat(mongodb): allow editing inferred CSV import column types

apps/desktop/src/components/document/MongoImportDialog.vue

@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import LightDropdown, { type LightDropdownItem } from "@/components/ui/LightDropdown.vue";
 import { AlertTriangle, ArrowLeft, ArrowRight, FileUp, Loader2, Square, Upload, X } from "@lucide/vue";
 import { useConnectionStore } from "@/stores/connectionStore";
 import { connectionIsEffectivelyReadOnly } from "@/lib/database/readOnlyWriteAccess";
@@ -42,6 +43,7 @@ const hasHeader = ref(true);
 const trim = ref(false);
 const emptyAsNull = ref(true);
 const typeMode = ref<api.MongoImportTypeMode>("auto");
+const columnTypeOverrides = ref<Record<string, api.MongoImportInferredType>>({});
 const recognizeObjectIdHex = ref(false);
 const skipErrorRows = ref(false);
 const batchSize = ref(500);
@@ -66,8 +68,18 @@ const fileLabel = computed(() => sourceName.value || t("tableImport.noFileSelect
 const encodingOptions = TABLE_IMPORT_ENCODING_OPTIONS;
 const targetLabel = computed(() => `${props.database}.${props.collection}`);
 
-const parseOptions = computed(
-  (): api.MongoImportParseOptions => ({
+const columnTypeOptions: api.MongoImportInferredType[] = ["string", "boolean", "integer", "decimal", "date", "objectId", "object", "array", "mixed"];
+const columnTypeItems = computed<LightDropdownItem[]>(() =>
+  columnTypeOptions.map((value) => ({
+    value,
+    label: t(`mongo.import.inferredType.${value}`),
+  })),
+);
+const showColumnTypeEditors = computed(() => format.value === "csv" && typeMode.value !== "extendedJson");
+
+const parseOptions = computed((): api.MongoImportParseOptions => {
+  const overrides = columnTypeOverrides.value;
+  return {
     encoding: encoding.value,
     delimiter: delimiter.value,
     hasHeader: hasHeader.value,
@@ -76,8 +88,9 @@ const parseOptions = computed(
     typeMode: typeMode.value,
     recognizeObjectIdHex: recognizeObjectIdHex.value,
     skipErrorRows: skipErrorRows.value,
-  }),
-);
+    columnTypes: Object.keys(overrides).length ? { ...overrides } : null,
+  };
+});
 
 function formatFromName(name: string): api.MongoImportFormat {
   const lower = name.toLowerCase();
@@ -99,6 +112,7 @@ function assignSource(source: string | File) {
   sourceName.value = importSourceDisplayName(source);
   format.value = formatFromName(sourceName.value);
   typeMode.value = format.value === "csv" ? "auto" : "extendedJson";
+  columnTypeOverrides.value = {};
   delimiter.value = importTextDelimiterForName(sourceName.value);
   wizardStep.value = "source";
   queuePreview();
@@ -137,8 +151,11 @@ async function loadPreview() {
   const source = selectedSource.value;
   if (!source) return;
   const requestId = ++previewRequestId;
-  loadingPreview.value = true;
-  previewError.value = "";
+  const keepExistingPreview = !!preview.value;
+  if (!keepExistingPreview) {
+    loadingPreview.value = true;
+    previewError.value = "";
+  }
   try {
     const input = importPreviewInput(uploadedSource, source);
     const next = await api.previewMongodbImportFile(input.fileOrPath, {
@@ -149,6 +166,7 @@ async function loadPreview() {
     });
     if (requestId !== previewRequestId) return;
     preview.value = next;
+    previewError.value = "";
     uploadedSource = uploadedImportSourceFromPreview(next) ?? uploadedSource;
   } catch (error) {
     if (requestId !== previewRequestId) return;
@@ -159,7 +177,11 @@ async function loadPreview() {
   }
 }
 
-watch([format, encoding, delimiter, hasHeader, trim, emptyAsNull, typeMode, recognizeObjectIdHex, previewLimit], () => {
+watch([format, hasHeader, typeMode], () => {
+  if (Object.keys(columnTypeOverrides.value).length) columnTypeOverrides.value = {};
+});
+
+watch([format, encoding, delimiter, hasHeader, trim, emptyAsNull, typeMode, recognizeObjectIdHex, previewLimit, columnTypeOverrides], () => {
   if (selectedSource.value) queuePreview();
 });
 
@@ -178,6 +200,7 @@ function reset() {
   selectedSource.value = null;
   sourceName.value = "";
   previewError.value = "";
+  columnTypeOverrides.value = {};
   wizardStep.value = "source";
   running.value = false;
   cancelling.value = false;
@@ -274,6 +297,23 @@ function setTypeMode(value: unknown) {
   if (value === "string" || value === "auto" || value === "extendedJson") typeMode.value = value;
 }
 
+function isImportInferredType(value: unknown): value is api.MongoImportInferredType {
+  return columnTypeOptions.includes(value as api.MongoImportInferredType);
+}
+
+function columnType(column: api.MongoImportColumn): api.MongoImportInferredType {
+  return columnTypeOverrides.value[column.name] ?? column.inferredType;
+}
+
+function setColumnType(name: string, value: unknown) {
+  if (!isImportInferredType(value)) return;
+  const inferred = preview.value?.columns.find((column) => column.name === name)?.inferredType;
+  const next = { ...columnTypeOverrides.value };
+  if (value === inferred) delete next[name];
+  else next[name] = value;
+  columnTypeOverrides.value = next;
+}
+
 function requestClose() {
   if (running.value) {
     closeBlocked.value = true;
@@ -319,7 +359,7 @@ function requestClose() {
           <div class="grid grid-cols-3 gap-3 rounded-md border p-3">
             <div class="space-y-1.5">
               <Label class="text-xs">{{ t("tableImport.sourceFormat") }}</Label>
-              <Select :model-value="format" @update:model-value="setFormat">
+              <Select :model-value="format" :aria-label="t('tableImport.sourceFormat')" @update:model-value="setFormat">
                 <SelectTrigger class="h-8 text-xs"><SelectValue /></SelectTrigger>
                 <SelectContent>
                   <SelectItem value="csv">CSV</SelectItem>
@@ -339,11 +379,11 @@ function requestClose() {
             </div>
             <div v-if="format === 'csv'" class="space-y-1.5">
               <Label class="text-xs">{{ t("tableImport.delimiter") }}</Label>
-              <Input v-model="delimiter" class="h-8 text-xs font-mono" />
+              <Input v-model="delimiter" class="h-8 text-xs font-mono" :aria-label="t('tableImport.delimiter')" />
             </div>
             <div class="space-y-1.5">
               <Label class="text-xs">{{ t("mongo.import.typeMode") }}</Label>
-              <Select :model-value="typeMode" @update:model-value="setTypeMode">
+              <Select :model-value="typeMode" :aria-label="t('mongo.import.typeMode')" @update:model-value="setTypeMode">
                 <SelectTrigger class="h-8 text-xs"><SelectValue /></SelectTrigger>
                 <SelectContent>
                   <SelectItem value="string">{{ t("mongo.import.typeString") }}</SelectItem>
@@ -365,28 +405,39 @@ function requestClose() {
           </div>
 
           <div class="grid grid-cols-2 gap-x-4 gap-y-2 rounded-md border p-3">
-            <label class="flex items-center gap-2 text-xs"><input v-model="hasHeader" type="checkbox" class="h-3.5 w-3.5 accent-primary" /> {{ t("tableImport.hasHeader") }}</label>
+            <label class="flex items-center gap-2 text-xs"><input v-model="hasHeader" type="checkbox" class="h-3.5 w-3.5 accent-primary" :aria-label="t('tableImport.hasHeader')" /> {{ t("tableImport.hasHeader") }}</label>
             <label class="flex items-center gap-2 text-xs"><input v-model="trim" type="checkbox" class="h-3.5 w-3.5 accent-primary" /> {{ t("tableImport.trimValues") }}</label>
             <label class="flex items-center gap-2 text-xs"><input v-model="emptyAsNull" type="checkbox" class="h-3.5 w-3.5 accent-primary" /> {{ t("mongo.import.emptyAsNull") }}</label>
             <label class="flex items-center gap-2 text-xs"><input v-model="recognizeObjectIdHex" type="checkbox" class="h-3.5 w-3.5 accent-primary" /> {{ t("mongo.import.recognizeObjectIdHex") }}</label>
             <label class="flex items-center gap-2 text-xs"><input v-model="skipErrorRows" type="checkbox" class="h-3.5 w-3.5 accent-primary" /> {{ t("mongo.import.skipErrorRows") }}</label>
           </div>
 
-          <div v-if="loadingPreview" class="flex items-center gap-2 text-xs text-muted-foreground">
+          <div v-if="loadingPreview && !preview" class="flex items-center gap-2 text-xs text-muted-foreground">
             <Loader2 class="h-3.5 w-3.5 animate-spin" />
             {{ t("mongo.import.previewing") }}
           </div>
-          <div v-else-if="previewError" class="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">{{ previewError }}</div>
-          <div v-else-if="preview" class="space-y-2">
+          <div v-if="previewError" class="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">{{ previewError }}</div>
+          <div v-if="preview" class="space-y-2">
             <div class="text-xs text-muted-foreground">{{ t("mongo.import.estimatedRows", { count: preview.estimatedRows ?? 0 }) }}</div>
             <div class="max-h-56 overflow-auto rounded-md border">
               <table class="w-full text-xs">
                 <thead>
                   <tr>
                     <th class="border-b px-2 py-1 text-left">#</th>
-                    <th v-for="column in preview.columns" :key="column.name" class="border-b px-2 py-1 text-left">
-                      {{ column.name }}
-                      <span class="text-muted-foreground">({{ column.inferredType }})</span>
+                    <th v-for="column in preview.columns" :key="column.name" class="border-b px-2 py-1 text-left align-top">
+                      <div class="font-medium">{{ column.name }}</div>
+                      <LightDropdown
+                        v-if="showColumnTypeEditors"
+                        :model-value="columnType(column)"
+                        :items="columnTypeItems"
+                        :aria-label="t('mongo.import.columnType', { name: column.name })"
+                        :disabled="running"
+                        trigger-class="mt-1 inline-flex h-6 w-full min-w-[6.5rem] max-w-[8.5rem] items-center justify-between gap-1 rounded-md border bg-background px-1.5 text-[11px] font-normal hover:bg-muted/30 disabled:cursor-not-allowed disabled:opacity-50"
+                        content-class="pointer-events-auto !z-[80] ring-1 ring-foreground/10"
+                        check-position="right"
+                        @update:model-value="(value) => setColumnType(column.name, value)"
+                      />
+                      <span v-else-if="format !== 'csv'" class="text-muted-foreground">({{ column.inferredType }})</span>
                     </th>
                   </tr>
                 </thead>