fix: Added front end validation for import csv and added back client side validation for column name and table name

packages/nc-gui/components/dlg/QuickImport.vue

@@ -172,7 +172,9 @@ const disablePreImportButton = computed(() => {
   }
 })
 
-const disableImportButton = computed(() => !templateEditorRef.value?.isValid)
+const isError = ref(false)
+
+const disableImportButton = computed(() => !templateEditorRef.value?.isValid || isError.value)
 
 const disableFormatJsonButton = computed(() => !jsonEditorRef.value?.isValid)
 
@@ -530,6 +532,14 @@ async function parseAndExtractData(val: UploadFile[] | ArrayBuffer | string) {
     preImportLoading.value = false
   }
 }
+
+const onError = () => {
+  isError.value = true
+}
+
+const onChange = () => {
+  isError.value = false
+}
 </script>
 
 <template>
@@ -558,6 +568,8 @@ async function parseAndExtractData(val: UploadFile[] | ArrayBuffer | string) {
             :import-worker="importWorker"
             class="nc-quick-import-template-editor"
             @import="handleImport"
+            @error="onError"
+            @change="onChange"
           />
 
           <a-tabs v-else v-model:activeKey="activeKey" hide-add type="editable-card" tab-position="top">

packages/nc-gui/components/template/Editor.vue

@@ -34,12 +34,13 @@ import {
   useI18n,
   useNuxtApp,
   useTabs,
+  validateTableName,
 } from '#imports'
 
 const { quickImportType, baseTemplate, importData, importColumns, importDataOnly, maxRowsToParse, sourceId, importWorker } =
   defineProps<Props>()
 
-const emit = defineEmits(['import'])
+const emit = defineEmits(['import', 'error', 'change'])
 
 dayjs.extend(utc)
 
@@ -95,6 +96,8 @@ const importingTips = ref<Record<string, string>>({})
 
 const checkAllRecord = ref<boolean[]>([])
 
+const formError = ref()
+
 const uiTypeOptions = ref<Option[]>(
   (Object.keys(UITypes) as (keyof typeof UITypes)[])
     .filter(
@@ -124,11 +127,14 @@ const data = reactive<{
 
 const validators = computed(() =>
   data.tables.reduce<Record<string, [ReturnType<typeof fieldRequiredValidator>]>>((acc: Record<string, any>, table, tableIdx) => {
-    acc[`tables.${tableIdx}.table_name`] = [fieldRequiredValidator()]
+    acc[`tables.${tableIdx}.table_name`] = [validateTableName]
     hasSelectColumn.value[tableIdx] = false
 
     table.columns?.forEach((column, columnIdx) => {
-      acc[`tables.${tableIdx}.columns.${columnIdx}.column_name`] = [fieldRequiredValidator(), fieldLengthValidator()]
+      acc[`tables.${tableIdx}.columns.${columnIdx}.column_name`] = [
+        fieldRequiredValidator(),
+        fieldLengthValidator(base.value?.sources?.[0].type || ClientType.MYSQL),
+      ]
       acc[`tables.${tableIdx}.columns.${columnIdx}.uidt`] = [fieldRequiredValidator()]
       if (isSelect(column)) {
         hasSelectColumn.value[tableIdx] = true
@@ -139,10 +145,12 @@ const validators = computed(() =>
   }, {}),
 )
 
-const { validate, validateInfos } = useForm(data, validators)
+const { validate, validateInfos, modelRef } = useForm(data, validators)
 
 const isValid = ref(!importDataOnly)
 
+const formRef = ref()
+
 watch(
   () => srcDestMapping.value,
   () => {
@@ -476,19 +484,6 @@ async function importTemplate() {
   } else {
     // check if form is valid
     try {
-      // Truncate and its column names
-      const MAX_COLUMN_LEN = 255
-      // Truncate table name which less as we need to add prefix to it
-      const MAX_TABLE_LEN = 52
-      for (const table of data.tables) {
-        table.table_name = table.table_name?.slice(0, MAX_TABLE_LEN)
-        for (const column of table.columns) {
-          column.column_name = column.column_name?.slice(0, MAX_COLUMN_LEN)
-        }
-      }
-
-      await nextTick()
-
       await validate()
     } catch (errorInfo) {
       isImporting.value = false
@@ -687,6 +682,43 @@ function handleUIDTChange(column, table) {
     ])
   }
 }
+
+const setErrorState = (errorsFields: any[]) => {
+  const errorMap: any = {}
+  for (const error of errorsFields) {
+    errorMap[error.name] = error.errors
+  }
+
+  formError.value = errorMap
+}
+
+watch(formRef, () => {
+  setTimeout(async () => {
+    try {
+      await validate()
+      emit('change')
+      formError.value = null
+    } catch (e: any) {
+      emit('error', e)
+      setErrorState(e.errorFields)
+    }
+  }, 500)
+})
+
+watch(modelRef, async () => {
+  try {
+    await validate()
+    emit('change')
+    formError.value = null
+  } catch (e: any) {
+    emit('error', e)
+    setErrorState(e.errorFields)
+  }
+})
+
+watch(formError, () => {
+  console.log('formError', formError)
+})
 </script>
 
 <template>
@@ -707,7 +739,7 @@ function handleUIDTChange(column, table) {
       <a-collapse v-if="data.tables && data.tables.length" v-model:activeKey="expansionPanel" class="template-collapse" accordion>
         <a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx">
           <template #header>
-            <span class="font-weight-bold text-lg flex items-center gap-2">
+            <span class="font-weight-bold text-lg flex items-center gap-2 truncate">
               <component :is="iconMap.table" class="text-primary" />
               {{ table.table_name }}
             </span>
@@ -782,7 +814,7 @@ function handleUIDTChange(column, table) {
     </a-card>
 
     <a-card v-else>
-      <a-form :model="data" name="template-editor-form" @keydown.enter="emit('import')">
+      <a-form ref="formRef" :model="data" name="template-editor-form" @keydown.enter="emit('import')">
         <p v-if="data.tables && quickImportType === 'excel'" class="text-center">
           {{ data.tables.length }} sheet{{ data.tables.length > 1 ? 's' : '' }}
           available for import
@@ -796,22 +828,24 @@ function handleUIDTChange(column, table) {
         >
           <a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx">
             <template #header>
-              <a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" no-style>
-                <a-input
-                  v-model:value.lazy="table.table_name"
-                  class="max-w-xs font-weight-bold text-lg"
-                  size="large"
-                  hide-details
-                  :bordered="false"
-                  @click.stop
-                  @blur="handleEditableTnChange(tableIdx)"
-                  @keydown.enter="handleEditableTnChange(tableIdx)"
-                />
+              <a-form-item v-bind="validateInfos[`tables.${tableIdx}.table_name`]" no-style>
+                <div class="flex flex-col w-full">
+                  <a-input
+                    v-model:value="table.table_name"
+                    class="font-weight-bold text-lg"
+                    size="large"
+                    hide-details
+                    :bordered="false"
+                    @click.stop
+                    @blur="handleEditableTnChange(tableIdx)"
+                    @keydown.enter="handleEditableTnChange(tableIdx)"
+                    @dblclick="setEditableTn(tableIdx, true)"
+                  />
+                  <div v-if="formError?.[`tables.${tableIdx}.table_name`]" class="text-red-500 ml-3">
+                    {{ formError?.[`tables.${tableIdx}.table_name`].join('\n') }}
+                  </div>
+                </div>
               </a-form-item>
-              <span v-else class="font-weight-bold text-lg flex items-center gap-2" @click="setEditableTn(tableIdx, true)">
-                <component :is="iconMap.table" class="text-primary" />
-                {{ table.table_name }}
-              </span>
             </template>
 
             <template #extra>

packages/nc-gui/composables/useColumnCreateStore.ts

@@ -40,6 +40,8 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
     const { sqlUis } = storeToRefs(baseStore)
 
+    const { bases } = storeToRefs(useBases())
+
     const { $api } = useNuxtApp()
 
     const { getMeta } = useMetas()
@@ -64,6 +66,12 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       isXcdbBaseFunc(meta.value?.source_id ? meta.value?.source_id : Object.keys(sqlUis.value)[0]),
     )
 
+    const source = computed(() =>
+      meta.value && meta.value.source_id && meta.value.base_id
+        ? bases.value.get(meta.value?.base_id as string)?.sources?.find((s) => s.id === meta.value!.source_id)
+        : undefined,
+    )
+
     const idType = null
 
     const additionalValidations = ref<ValidationsObj>({})
@@ -128,7 +136,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
               })
             },
           },
-          fieldLengthValidator(),
+          fieldLengthValidator(source.value?.type || ClientType.MYSQL),
         ],
         uidt: [
           {

packages/nc-gui/utils/validation.ts

@@ -13,6 +13,10 @@ export const validateTableName = {
         return reject(new Error(t('msg.error.tableNameRequired')))
       }
 
+      if (value.length > 52) {
+        return reject(new Error(t('msg.error.columnNameExceedsCharacters', { value: 52 })))
+      }
+
       // exclude . / \
       // rest all characters allowed
       // https://documentation.sas.com/doc/en/pgmsascdc/9.4_3.5/acreldb/n0rfg6x1shw0ppn1cwhco6yn09f7.htm#:~:text=By%20default%2C%20MySQL%20encloses%20column,not%20truncate%20a%20longer%20name.
@@ -98,17 +102,21 @@ export const fieldRequiredValidator = () => {
   }
 }
 
-export const fieldLengthValidator = () => {
+export const fieldLengthValidator = (sqlClientType: string) => {
   return {
     validator: (rule: any, value: any) => {
       const { t } = getI18n().global
 
-      // mysql allows 64 characters for column_name
-      // postgres allows 59 characters for column_name
-      // mssql allows 128 characters for column_name
-      // sqlite allows any number of characters for column_name
-      // We allow 255 for all databases, truncate will be handled by backend for column_name
-      const fieldLengthLimit = 255
+      // no limit for sqlite but set as 255
+      let fieldLengthLimit = 255
+
+      if (sqlClientType === 'mysql2' || sqlClientType === 'mysql') {
+        fieldLengthLimit = 64
+      } else if (sqlClientType === 'pg') {
+        fieldLengthLimit = 59
+      } else if (sqlClientType === 'mssql') {
+        fieldLengthLimit = 128
+      }
 
       return new Promise((resolve, reject) => {
         if (value?.length > fieldLengthLimit) {