fix: connection interfaces for dataSource.connection

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui-v2/pages/index/index/create-external.vue

@@ -2,7 +2,8 @@
 import { Form, Modal, message } from 'ant-design-vue'
 import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
 import {
-  certTypes,
+  CertTypes,
+  SSLUsage,
   clientTypes,
   computed,
   extractSdkResponseErrorMsg,
@@ -16,7 +17,6 @@ import {
   projectTitleValidator,
   readFile,
   ref,
-  sslUsage,
   useApi,
   useI18n,
   useNuxtApp,
@@ -24,6 +24,7 @@ import {
   watch,
 } from '#imports'
 import { ClientType } from '~/lib'
+import { DefaultConnection, SQLiteConnection } from '~/utils'
 import type { ProjectCreateForm } from '~/utils'
 
 const useForm = Form.useForm
@@ -47,7 +48,7 @@ let formState = $ref<ProjectCreateForm>({
     inflectionColumn: 'camelize',
     inflectionTable: 'camelize',
   },
-  sslUse: sslUsage.No,
+  sslUse: SSLUsage.No,
   extraParameters: [],
 })
 
@@ -58,7 +59,7 @@ const customFormState = ref<ProjectCreateForm>({
     inflectionColumn: 'camelize',
     inflectionTable: 'camelize',
   },
-  sslUse: sslUsage.No,
+  sslUse: SSLUsage.No,
   extraParameters: [],
 })
 
@@ -103,33 +104,39 @@ const onClientChange = () => {
   populateName(formState.title)
 }
 
-const onSSLModeChange = ((mode: sslUsage) => {
+const onSSLModeChange = ((mode: SSLUsage) => {
+  if (formState.dataSource.client !== ClientType.SQLITE) {
+    const connection = formState.dataSource.connection as DefaultConnection
     switch (mode) {
-    case sslUsage.No:
-      delete formState.dataSource.connection.ssl
+      case SSLUsage.No:
+        delete connection.ssl
         break
-    case sslUsage.Allowed:
-      formState.dataSource.connection.ssl = 'true'
+      case SSLUsage.Allowed:
+        connection.ssl = 'true'
         break
       default:
-      formState.dataSource.connection.ssl = {
+        connection.ssl = {
           ca: '',
           cert: '',
           key: '',
         }
         break
     }
+  }
 }) as SelectHandler
 
 const updateSSLUse = () => {
-  if (formState.dataSource.connection.ssl) {
-    if (typeof formState.dataSource.connection.ssl === 'string') {
-      formState.sslUse = sslUsage.Allowed
+  if (formState.dataSource.client !== ClientType.SQLITE) {
+    const connection = formState.dataSource.connection as DefaultConnection
+    if (connection.ssl) {
+      if (typeof connection.ssl === 'string') {
+        formState.sslUse = SSLUsage.Allowed
       } else {
-      formState.sslUse = sslUsage.Preferred
+        formState.sslUse = SSLUsage.Preferred
       }
     } else {
-    formState.sslUse = sslUsage.No
+      formState.sslUse = SSLUsage.No
+    }
   }
 }
 
@@ -150,7 +157,7 @@ const caFileInput = ref<HTMLInputElement>()
 const keyFileInput = ref<HTMLInputElement>()
 const certFileInput = ref<HTMLInputElement>()
 
-const onFileSelect = (key: certTypes, el?: HTMLInputElement) => {
+const onFileSelect = (key: CertTypes, el?: HTMLInputElement) => {
   if (!el) return
 
   readFile(el, (content) => {
@@ -160,7 +167,7 @@ const onFileSelect = (key: certTypes, el?: HTMLInputElement) => {
 }
 
 const sslFilesRequired = computed(
-  () => !!formState.sslUse && formState.sslUse !== sslUsage.No && formState.sslUse !== sslUsage.Allowed,
+  () => !!formState.sslUse && formState.sslUse !== SSLUsage.No && formState.sslUse !== SSLUsage.Allowed,
 )
 
 function getConnectionConfig() {
@@ -173,7 +180,7 @@ function getConnectionConfig() {
 
   if ('ssl' in connection && connection.ssl) {
     if (
-      formState.sslUse === sslUsage.No ||
+      formState.sslUse === SSLUsage.No ||
       (typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => !v))
     ) {
       delete connection.ssl
@@ -365,28 +372,34 @@ onMounted(() => {
         :label="$t('labels.sqliteFile')"
         v-bind="validateInfos['dataSource.connection.connection.filename']"
       >
-        <a-input v-model:value="formState.dataSource.connection.connection.filename" />
+        <a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" />
       </a-form-item>
 
       <template v-else>
         <!-- Host Address -->
         <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
-          <a-input v-model:value="formState.dataSource.connection.host" class="nc-extdb-host-address" />
+          <a-input v-model:value="(formState.dataSource.connection as DefaultConnection).host" class="nc-extdb-host-address" />
         </a-form-item>
 
         <!-- Port Number -->
         <a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']">
-          <a-input-number v-model:value="formState.dataSource.connection.port" class="!w-full nc-extdb-host-port" />
+          <a-input-number
+            v-model:value="(formState.dataSource.connection as DefaultConnection).port"
+            class="!w-full nc-extdb-host-port"
+          />
         </a-form-item>
 
         <!-- Username -->
         <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
-          <a-input v-model:value="formState.dataSource.connection.user" class="nc-extdb-host-user" />
+          <a-input v-model:value="(formState.dataSource.connection as DefaultConnection).user" class="nc-extdb-host-user" />
         </a-form-item>
 
         <!-- Password -->
         <a-form-item :label="$t('labels.password')">
-          <a-input-password v-model:value="formState.dataSource.connection.password" class="nc-extdb-host-password" />
+          <a-input-password
+            v-model:value="(formState.dataSource.connection as DefaultConnection).password"
+            class="nc-extdb-host-password"
+          />
         </a-form-item>
 
         <!-- Database -->
@@ -421,7 +434,7 @@ onMounted(() => {
             <!--            todo:  add in i18n -->
             <a-form-item label="SSL mode">
               <a-select v-model:value="formState.sslUse" @select="onSSLModeChange">
-                <a-select-option v-for="opt in Object.values(sslUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option>
+                <a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option>
               </a-select>
             </a-form-item>
 
@@ -461,11 +474,11 @@ onMounted(() => {
               </div>
             </a-form-item>
 
-            <input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect(certTypes.ca, caFileInput)" />
+            <input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.ca, caFileInput)" />
 
-            <input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect(certTypes.cert, certFileInput)" />
+            <input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.cert, certFileInput)" />
 
-            <input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect(certTypes.key, keyFileInput)" />
+            <input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.key, keyFileInput)" />
 
             <a-divider />
 

packages/nc-gui-v2/utils/projectCreateUtils.ts

@@ -4,17 +4,35 @@ export interface ProjectCreateForm {
   title: string
   dataSource: {
     client: ClientType
-    connection: Record<string, any>
+    connection: DefaultConnection | SQLiteConnection
     searchPath?: string[]
   }
   inflection: {
     inflectionColumn?: string
     inflectionTable?: string
   }
-  sslUse?: sslUsage
+  sslUse?: SSLUsage
   extraParameters: Record<string, string>[]
 }
 
+export interface DefaultConnection {
+  host: string
+  database: string
+  user: string
+  password: string
+  port: number | string
+  ssl?: Record<CertTypes, string> | 'true'
+}
+
+export interface SQLiteConnection {
+  client: ClientType.SQLITE
+  database: string
+  connection: {
+    filename?: string
+  }
+  useNullAsDefault?: boolean
+}
+
 const defaultHost = 'localhost'
 
 const testDataBaseNames = {
@@ -58,28 +76,28 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
     user: 'postgres',
     password: 'password',
     database: '_test',
-  },
+  } as DefaultConnection,
   [ClientType.MYSQL]: {
     host: defaultHost,
     port: '3306',
     user: 'root',
     password: 'password',
     database: '_test',
-  },
+  } as DefaultConnection,
   [ClientType.VITESS]: {
     host: defaultHost,
     port: '15306',
     user: 'root',
     password: 'password',
     database: '_test',
-  },
+  } as DefaultConnection,
   [ClientType.MSSQL]: {
     host: defaultHost,
     port: 1433,
     user: 'sa',
     password: 'Password123.',
     database: '_test',
-  },
+  } as DefaultConnection,
   [ClientType.SQLITE]: {
     client: ClientType.SQLITE,
     database: homeDir,
@@ -94,42 +112,42 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
     user: 'root',
     password: '',
     database: '_test',
-  },
+  } as DefaultConnection,
   yugabyte: {
     host: defaultHost,
     port: '5432',
     user: 'postgres',
     password: '',
     database: '_test',
-  },
+  } as DefaultConnection,
   citusdb: {
     host: defaultHost,
     port: '5432',
     user: 'postgres',
     password: '',
     database: '_test',
-  },
+  } as DefaultConnection,
   cockroachdb: {
     host: defaultHost,
     port: '5432',
     user: 'postgres',
     password: '',
     database: '_test',
-  },
+  } as DefaultConnection,
   greenplum: {
     host: defaultHost,
     port: '5432',
     user: 'postgres',
     password: '',
     database: '_test',
-  },
+  } as DefaultConnection,
   oracledb: {
     host: defaultHost,
     port: '1521',
     user: 'system',
     password: 'Oracle18',
     database: '_test',
-  },
+  } as DefaultConnection,
 }
 
 export const getDefaultConnectionConfig = (client: ClientType): ProjectCreateForm['dataSource'] => {
@@ -144,7 +162,7 @@ export const getDefaultConnectionConfig = (client: ClientType): ProjectCreateFor
   }
 }
 
-enum sslUsage {
+enum SSLUsage {
   No = 'No',
   Allowed = 'Allowed',
   Preferred = 'Preferred',
@@ -153,10 +171,10 @@ enum sslUsage {
   RequiredWithIdentity = 'Required-Identity',
 }
 
-enum certTypes {
+enum CertTypes {
   ca = 'ca',
   cert = 'cert',
   key = 'key',
 }
 
-export { sslUsage, certTypes }
+export { SSLUsage, CertTypes }

packages/nc-gui-v2/utils/validation.ts

@@ -129,7 +129,7 @@ export const importExcelUrlValidator = {
 }
 
 export const extraParameterValidator = {
-  validator: (rule: any, value: any) => {
+  validator: (_: unknown, value: any) => {
     return new Promise((resolve, reject) => {
       for (const param of value) {
         if (param.key === '') {