feat: Improved UI (#6222)

* feat: Improved ui (#6156) * refactor: revert Signed-off-by: Pranav C <pranavxc@gmail.com> feat: shared base Signed-off-by: Pranav C <pranavxc@gmail.com> fix: remove duplicate import statement Signed-off-by: Pranav C <pranavxc@gmail.com> fix: disable starred & license menu Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix airtable wait issue Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable mysql in ci Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix checkbox order for sqlite Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: disable quick tests Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix dbType env variable for CI Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: workspace API access error fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable SQLite CI CD Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: use DB_TYPE env variable Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable SQLite UT Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: isHub cleanup Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: add check for EE Timezone spec Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: cleanup Signed-off-by: Pranav C <pranavxc@gmail.com> chore: cleanup Signed-off-by: Pranav C <pranavxc@gmail.com> test: EE check fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: test correction Signed-off-by: Pranav C <pranavxc@gmail.com> chore: sync latest changes Signed-off-by: Pranav C <pranavxc@gmail.com> test: set EE=false Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: set NC Edition to community in workflow file Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: update sdk build command Signed-off-by: Pranav C <pranavxc@gmail.com> refactor: i18n and other changes Signed-off-by: Pranav C <pranavxc@gmail.com> feat: new ui Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: sync tests Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: lint Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: shared view/base related bugs Signed-off-by: Pranav C <pranavxc@gmail.com> * test: checkbox verification sort order fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix sqlite reset Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable selfhosted runners Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: table ops (draft) Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * Docs: screenshots for table-operations.md * refactor: introduce missing buttons Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: get all fields Signed-off-by: Pranav C <pranavxc@gmail.com> * test: UT fix- new data API response Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: EE is false Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: webhook lookup as string in CE Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: include created_at and updated_at Signed-off-by: Pranav C <pranavxc@gmail.com> * test: fix UT newDataAPI response for PG Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: separate api for webhook related plugins Signed-off-by: Pranav C <pranavxc@gmail.com> * test: msyql filter corrections Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: mysql group by test corrections Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix datatype for rating field in groupby spec for pg Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: kanban datatype correction Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: column edit for mysql- rating field Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: misc fixes Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable 4 workers Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable 2 workers per shard only Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: table CRUD * Rename table-operations.md to table-crud.md * Create column-crud.md * docs: row CRUD * Rename row.md to row-crud.md * docs: project crud * docs: toolbar (skeleton) * refactor: single page UI and bug fixes Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: sync tests playwright Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: add missing dependency Signed-off-by: Pranav C <pranavxc@gmail.com> * feat: single page ui, test corrections Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: tests Signed-off-by: Pranav C <pranavxc@gmail.com> * test: project rename test correction Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: remove only Signed-off-by: Pranav C <pranavxc@gmail.com> * test: remove wrong import statement Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: delete option not visible in project context menu Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: move ws access within isEE() Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix groupby * test: groupby fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: signup & landing page * docs: project crud * docs: project-crud misc * docs: toolbar fields * docs: toolbar / filters * docs: toolbar / group by * docs: toolbar / sort * docs: toolbar / row height * docs: filters additional options * docs: file re-order Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: add links to column types * docs: code snippets * docs: links * docs: lookup * docs: rollup * docs: formula * docs: primary key * docs: display value * docs: development setup * docs: swagger * fix(nc-gui): encodeURIComponent for row id - closes: #6202 * docs: language * docs: expanded record * docs: import airtable * docs: airtable * docs: webhook * docs: revert file rename Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: account settings * docs: audit * docs: meta management * docs: project settings * docs: shared base * docs: shared view * docs: meta sync * docs: team-auth * docs: views * docs: fix URL * docs: URL corrections * fix: shared base, view related bugs Signed-off-by: Pranav C <pranavxc@gmail.com> * test: EE check for WSaccess Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: exclude EE tests Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: missing project delete closes #6215 Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: merge existing project meta if found closes #6216 Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: merge existing project meta if found closes #6216 Signed-off-by: Pranav C <pranavxc@gmail.com> --------- Signed-off-by: Pranav C <pranavxc@gmail.com> Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: DarkPhoenix2704 <anbarasun123@gmail.com> Co-authored-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refactor: docs and other bug fixes Signed-off-by: Pranav C <pranavxc@gmail.com> * feat: populate default project on super admin signup Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: include created project details in signup response if avail, missing Dockerfile Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: use custom function for resolving ts path aliases Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: add missing generate script Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: webpack build correction - ts path resolve Signed-off-by: Pranav C <pranavxc@gmail.com> --------- Signed-off-by: Pranav C <pranavxc@gmail.com> Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: mertmit <mertmit99@gmail.com> Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: DarkPhoenix2704 <anbarasun123@gmail.com> Co-authored-by: Wing-Kam Wong <wingkwong.code@gmail.com>
2026-05-02 03:56:58 +00:00 · 2023-08-24 02:58:19 +05:30
parent a1ca4f370c
commit 33ee9bfa62
1191 changed files with 75874 additions and 31803 deletions
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -5,6 +5,7 @@ import type { DefaultConnection, ProjectCreateForm, SQLiteConnection } from '#im
 import {
  CertTypes,
  ClientType,
+  ProjectIdInj,
  SSLUsage,
  clientTypes as _clientTypes,
  computed,
@@ -21,7 +22,6 @@ import {
  ref,
  storeToRefs,
  useApi,
-  useGlobal,
  useI18n,
  useNuxtApp,
  watch,
@@ -29,14 +29,17 @@ import {

 const { connectionType } = defineProps<{ connectionType: ClientType }>()

-const emit = defineEmits(['baseCreated'])
-
-const { appInfo } = useGlobal()
+const emit = defineEmits(['baseCreated', 'close'])

 const projectStore = useProject()
-const { loadProject } = projectStore
+const { loadProject } = useProjects()
 const { project } = storeToRefs(projectStore)

+const { loadProjectTables } = useTablesStore()
+
+const _projectId = inject(ProjectIdInj, undefined)
+const projectId = computed(() => _projectId?.value ?? project.value?.id)
+
 const useForm = Form.useForm

 const testSuccess = ref(false)
@@ -49,9 +52,7 @@ const { $e } = useNuxtApp()

 const { t } = useI18n()

-const toggleDialog = inject(ToggleDialogInj, () => {})
-
-let formState = $ref<ProjectCreateForm>({
+const formState = ref<ProjectCreateForm>({
  title: '',
  dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
  inflection: {
@@ -75,7 +76,8 @@ const customFormState = ref<ProjectCreateForm>({

 const clientTypes = computed(() => {
  return _clientTypes.filter((type) => {
-    return appInfo.value?.ee || type.value !== ClientType.SNOWFLAKE
+    // return appInfo.value?.ee || type.value !== ClientType.SNOWFLAKE
+    return type.value !== ClientType.SNOWFLAKE
  })
 })

@@ -88,7 +90,7 @@ const validators = computed(() => {
    'dataSource.connection.database': [fieldRequiredValidator()],
  }

-  switch (formState.dataSource.client) {
+  switch (formState.value.dataSource.client) {
    case ClientType.SQLITE:
      clientValidations = {
        'dataSource.connection.connection.filename': [fieldRequiredValidator()],
@@ -124,20 +126,20 @@ const validators = computed(() => {
  }
 })

-const { validate, validateInfos } = useForm(formState, validators)
+const { validate, validateInfos } = useForm(formState.value, validators)

 const populateName = (v: string) => {
-  formState.dataSource.connection.database = `${v.trim()}_noco`
+  formState.value.dataSource.connection.database = `${v.trim()}_noco`
 }

 const onClientChange = () => {
-  formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) }
-  populateName(formState.title)
+  formState.value.dataSource = { ...getDefaultConnectionConfig(formState.value.dataSource.client) }
+  populateName(formState.value.title)
 }

 const onSSLModeChange = ((mode: SSLUsage) => {
-  if (formState.dataSource.client !== ClientType.SQLITE) {
-    const connection = formState.dataSource.connection as DefaultConnection
+  if (formState.value.dataSource.client !== ClientType.SQLITE) {
+    const connection = formState.value.dataSource.connection as DefaultConnection
    switch (mode) {
      case SSLUsage.No:
        delete connection.ssl
@@ -157,26 +159,26 @@ const onSSLModeChange = ((mode: SSLUsage) => {
 }) as SelectHandler

 const updateSSLUse = () => {
-  if (formState.dataSource.client !== ClientType.SQLITE) {
-    const connection = formState.dataSource.connection as DefaultConnection
+  if (formState.value.dataSource.client !== ClientType.SQLITE) {
+    const connection = formState.value.dataSource.connection as DefaultConnection
    if (connection.ssl) {
      if (typeof connection.ssl === 'string') {
-        formState.sslUse = SSLUsage.Allowed
+        formState.value.sslUse = SSLUsage.Allowed
      } else {
-        formState.sslUse = SSLUsage.Preferred
+        formState.value.sslUse = SSLUsage.Preferred
      }
    } else {
-      formState.sslUse = SSLUsage.No
+      formState.value.sslUse = SSLUsage.No
    }
  }
 }

 const addNewParam = () => {
-  formState.extraParameters.push({ key: '', value: '' })
+  formState.value.extraParameters.push({ key: '', value: '' })
 }

 const removeParam = (index: number) => {
-  formState.extraParameters.splice(index, 1)
+  formState.value.extraParameters.splice(index, 1)
 }

 const inflectionTypes = ['camelize', 'none']
@@ -192,26 +194,26 @@ const onFileSelect = (key: CertTypes, el?: HTMLInputElement) => {
  if (!el) return

  readFile(el, (content) => {
-    if ('ssl' in formState.dataSource.connection && typeof formState.dataSource.connection.ssl === 'object')
-      formState.dataSource.connection.ssl[key] = content ?? ''
+    if ('ssl' in formState.value.dataSource.connection && typeof formState.value.dataSource.connection.ssl === 'object')
+      formState.value.dataSource.connection.ssl[key] = content ?? ''
  })
 }

 const sslFilesRequired = computed(
-  () => !!formState.sslUse && formState.sslUse !== SSLUsage.No && formState.sslUse !== SSLUsage.Allowed,
+  () => !!formState.value.sslUse && formState.value.sslUse !== SSLUsage.No && formState.value.sslUse !== SSLUsage.Allowed,
 )

 function getConnectionConfig() {
-  const extraParameters = Object.fromEntries(new Map(formState.extraParameters.map((object) => [object.key, object.value])))
+  const extraParameters = Object.fromEntries(new Map(formState.value.extraParameters.map((object) => [object.key, object.value])))

  const connection = {
-    ...formState.dataSource.connection,
+    ...formState.value.dataSource.connection,
    ...extraParameters,
  }

  if ('ssl' in connection && connection.ssl) {
    if (
-      formState.sslUse === SSLUsage.No ||
+      formState.value.sslUse === SSLUsage.No ||
      (typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => v === null || v === undefined))
    ) {
      delete connection.ssl
@@ -233,26 +235,26 @@ const createBase = async () => {
  }

  try {
-    if (!project.value?.id) return
+    if (!projectId.value) return

    const connection = getConnectionConfig()

-    const config = { ...formState.dataSource, connection }
+    const config = { ...formState.value.dataSource, connection }

-    await api.base.create(project.value?.id, {
-      alias: formState.title,
-      type: formState.dataSource.client,
+    await api.base.create(projectId.value, {
+      alias: formState.value.title,
+      type: formState.value.dataSource.client,
      config,
-      inflection_column: formState.inflection.inflectionColumn,
-      inflection_table: formState.inflection.inflectionTable,
+      inflection_column: formState.value.inflection.inflectionColumn,
+      inflection_table: formState.value.inflection.inflectionTable,
    })

    $e('a:base:create:extdb')

-    await loadProject()
+    await loadProject(projectId.value, true)
+    await loadProjectTables(projectId.value, true)
    emit('baseCreated')
-    message.success('Base created!')
-    toggleDialog(true, 'dataSources', '')
+    emit('close')
  } catch (e: any) {
    message.error(await extractSdkResponseErrorMsg(e))
  }
@@ -269,15 +271,15 @@ const testConnection = async () => {
  $e('a:base:create:extdb:test-connection', [])

  try {
-    if (formState.dataSource.client === ClientType.SQLITE) {
+    if (formState.value.dataSource.client === ClientType.SQLITE) {
      testSuccess.value = true
    } else {
      const connection = getConnectionConfig()

-      connection.database = getTestDatabaseName(formState.dataSource)!
+      connection.database = getTestDatabaseName(formState.value.dataSource)!

      const testConnectionConfig = {
-        ...formState.dataSource,
+        ...formState.value.dataSource,
        connection,
      }

@@ -315,8 +317,8 @@ const handleImportURL = async () => {
  const connectionConfig = await api.utils.urlToConfig({ url: importURL.value })

  if (connectionConfig) {
-    formState.dataSource.client = connectionConfig.client
-    formState.dataSource.connection = { ...connectionConfig.connection }
+    formState.value.dataSource.client = connectionConfig.client
+    formState.value.dataSource.connection = { ...connectionConfig.connection }
  } else {
    message.error(t('msg.error.invalidURL'))
  }
@@ -325,37 +327,37 @@ const handleImportURL = async () => {
 }

 const handleEditJSON = () => {
-  customFormState.value = { ...formState }
+  customFormState.value = { ...formState.value }
  configEditDlg.value = true
 }

 const handleOk = () => {
-  formState = { ...customFormState.value }
+  formState.value = { ...customFormState.value }
  configEditDlg.value = false
  updateSSLUse()
 }

 // reset test status on config change
 watch(
-  () => formState.dataSource,
+  () => formState.value.dataSource,
  () => (testSuccess.value = false),
  { deep: true },
 )

 // populate database name based on title
 watch(
-  () => formState.title,
+  () => formState.value.title,
  (v) => populateName(v),
 )

 // select and focus title field on load
 onMounted(async () => {
-  formState.title = await generateUniqueName()
+  formState.value.title = await generateUniqueName()
  nextTick(() => {
    // todo: replace setTimeout and follow better approach
    setTimeout(() => {
      const input = form.value?.$el?.querySelector('input[type=text]')
-      input.setSelectionRange(0, formState.title.length)
+      input.setSelectionRange(0, formState.value.title.length)
      input.focus()
    }, 500)
  })
@@ -364,7 +366,7 @@ onMounted(async () => {
 watch(
  () => connectionType,
  (v) => {
-    formState.dataSource.client = v
+    formState.value.dataSource.client = v
    onClientChange()
  },
  { immediate: true },
@@ -372,8 +374,11 @@ watch(
 </script>

 <template>
-  <div class="create-base max-w-800px bg-white relative flex flex-col justify-center gap-2 w-full p-8">
-    <h1 class="prose-2xl font-bold self-start my-4">New Base</h1>
+  <div class="create-base bg-white relative flex flex-col justify-center gap-2 w-full">
+    <h1 class="prose-2xl font-bold self-start mb-4 flex items-center gap-2">
+      New Base
+      <span class="flex-grow"></span>
+    </h1>

    <a-form
      ref="form"
@@ -383,229 +388,238 @@ watch(
      no-style
      :label-col="{ span: 8 }"
    >
-      <a-form-item label="Base Name" v-bind="validateInfos.title">
-        <a-input v-model:value="formState.title" class="nc-extdb-proj-name" />
-      </a-form-item>
-
-      <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
-        <a-select
-          v-model:value="formState.dataSource.client"
-          class="nc-extdb-db-type"
-          dropdown-class-name="nc-dropdown-ext-db-type"
-          @change="onClientChange"
-        >
-          <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
-            >{{ client.text }}
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-
-      <!-- SQLite File -->
-      <a-form-item
-        v-if="formState.dataSource.client === ClientType.SQLITE"
-        :label="$t('labels.sqliteFile')"
-        v-bind="validateInfos['dataSource.connection.connection.filename']"
+      <div
+        class="nc-scrollbar-md"
+        :style="{
+          maxHeight: '60vh',
+        }"
      >
-        <a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" />
-      </a-form-item>
-
-      <template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE">
-        <!-- Account -->
-        <a-form-item label="Account" v-bind="validateInfos['dataSource.connection.account']">
-          <a-input v-model:value="formState.dataSource.connection.account" class="nc-extdb-account" />
+        <a-form-item label="Base Name" v-bind="validateInfos.title">
+          <a-input v-model:value="formState.title" class="nc-extdb-proj-name" />
        </a-form-item>

-        <!-- Username -->
-        <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.username']">
-          <a-input v-model:value="formState.dataSource.connection.username" class="nc-extdb-host-user" />
+        <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
+          <a-select
+            v-model:value="formState.dataSource.client"
+            class="nc-extdb-db-type"
+            dropdown-class-name="nc-dropdown-ext-db-type"
+            @change="onClientChange"
+          >
+            <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
+              >{{ client.text }}
+            </a-select-option>
+          </a-select>
        </a-form-item>

-        <!-- Password -->
-        <a-form-item :label="$t('labels.password')" v-bind="validateInfos['dataSource.connection.password']">
-          <a-input-password v-model:value="formState.dataSource.connection.password" class="nc-extdb-host-password" />
-        </a-form-item>
-
-        <!-- Warehouse -->
-        <a-form-item label="Warehouse" v-bind="validateInfos['dataSource.connection.warehouse']">
-          <a-input v-model:value="formState.dataSource.connection.warehouse" />
-        </a-form-item>
-
-        <!-- Database -->
-        <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
-          <!-- Database : create if not exists -->
-          <a-input
-            v-model:value="formState.dataSource.connection.database"
-            :placeholder="$t('labels.dbCreateIfNotExists')"
-            class="nc-extdb-host-database"
-          />
-        </a-form-item>
-
-        <!-- Schema name -->
-        <a-form-item :label="$t('labels.schemaName')" v-bind="validateInfos['dataSource.connection.schema']">
-          <a-input v-model:value="formState.dataSource.connection.schema" />
-        </a-form-item>
-      </template>
-
-      <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 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 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 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 as DefaultConnection).password"
-            class="nc-extdb-host-password"
-          />
-        </a-form-item>
-
-        <!-- Database -->
-        <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
-          <!-- Database : create if not exists -->
-          <a-input
-            v-model:value="formState.dataSource.connection.database"
-            :placeholder="$t('labels.dbCreateIfNotExists')"
-            class="nc-extdb-host-database"
-          />
-        </a-form-item>
-
-        <!-- Schema name -->
+        <!-- SQLite File -->
        <a-form-item
-          v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath"
-          :label="$t('labels.schemaName')"
-          v-bind="validateInfos['dataSource.searchPath.0']"
+          v-if="formState.dataSource.client === ClientType.SQLITE"
+          :label="$t('labels.sqliteFile')"
+          v-bind="validateInfos['dataSource.connection.connection.filename']"
        >
-          <a-input v-model:value="formState.dataSource.searchPath[0]" />
+          <a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" />
        </a-form-item>
-        <div class="flex items-right justify-end gap-2">
-          <!--                Use Connection URL -->
-          <a-button class="nc-extdb-btn-import-url !rounded-md" @click.stop="importURLDlg = true">
-            {{ $t('activity.useConnectionUrl') }}
-          </a-button>
-        </div>

-        <a-collapse ghost expand-icon-position="right" class="!mt-6">
-          <a-collapse-panel key="1">
-            <template #header>
-              <span>{{ $t('title.advancedParameters') }}</span>
-            </template>
-            <a-form-item label="SSL mode">
-              <a-select v-model:value="formState.sslUse" dropdown-class-name="nc-dropdown-ssl-mode" @select="onSSLModeChange">
-                <a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option>
-              </a-select>
-            </a-form-item>
+        <template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE && false">
+          <!-- Account -->
+          <a-form-item label="Account" v-bind="validateInfos['dataSource.connection.account']">
+            <a-input v-model:value="formState.dataSource.connection.account" class="nc-extdb-account" />
+          </a-form-item>

-            <a-form-item label="SSL keys">
-              <div class="flex gap-2">
-                <a-tooltip placement="top">
-                  <!-- Select .cert file -->
-                  <template #title>
-                    <span>{{ $t('tooltip.clientCert') }}</span>
-                  </template>
+          <!-- Username -->
+          <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.username']">
+            <a-input v-model:value="formState.dataSource.connection.username" class="nc-extdb-host-user" />
+          </a-form-item>

-                  <a-button :disabled="!sslFilesRequired" class="shadow" @click="certFileInput?.click()">
-                    {{ $t('labels.clientCert') }}
-                  </a-button>
-                </a-tooltip>
+          <!-- Password -->
+          <a-form-item :label="$t('labels.password')" v-bind="validateInfos['dataSource.connection.password']">
+            <a-input-password v-model:value="formState.dataSource.connection.password" class="nc-extdb-host-password" />
+          </a-form-item>

-                <a-tooltip placement="top">
-                  <!-- Select .key file -->
-                  <template #title>
-                    <span>{{ $t('tooltip.clientKey') }}</span>
-                  </template>
-                  <a-button :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput?.click()">
-                    {{ $t('labels.clientKey') }}
-                  </a-button>
-                </a-tooltip>
+          <!-- Warehouse -->
+          <a-form-item label="Warehouse" v-bind="validateInfos['dataSource.connection.warehouse']">
+            <a-input v-model:value="formState.dataSource.connection.warehouse" />
+          </a-form-item>

-                <a-tooltip placement="top">
-                  <!-- Select CA file -->
-                  <template #title>
-                    <span>{{ $t('tooltip.clientCA') }}</span>
-                  </template>
+          <!-- Database -->
+          <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
+            <!-- Database : create if not exists -->
+            <a-input
+              v-model:value="formState.dataSource.connection.database"
+              :placeholder="$t('labels.dbCreateIfNotExists')"
+              class="nc-extdb-host-database"
+            />
+          </a-form-item>

-                  <a-button :disabled="!sslFilesRequired" class="shadow" @click="caFileInput?.click()">
-                    {{ $t('labels.serverCA') }}
-                  </a-button>
-                </a-tooltip>
-              </div>
-            </a-form-item>
+          <!-- Schema name -->
+          <a-form-item :label="$t('labels.schemaName')" v-bind="validateInfos['dataSource.connection.schema']">
+            <a-input v-model:value="formState.dataSource.connection.schema" />
+          </a-form-item>
+        </template>

-            <input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.ca, caFileInput)" />
+        <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 as DefaultConnection).host" class="nc-extdb-host-address" />
+          </a-form-item>

-            <input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.cert, certFileInput)" />
+          <!-- Port Number -->
+          <a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']">
+            <a-input-number
+              v-model:value="(formState.dataSource.connection as DefaultConnection).port"
+              class="!w-full nc-extdb-host-port"
+            />
+          </a-form-item>

-            <input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.key, keyFileInput)" />
+          <!-- Username -->
+          <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
+            <a-input v-model:value="(formState.dataSource.connection as DefaultConnection).user" class="nc-extdb-host-user" />
+          </a-form-item>

-            <a-divider />
+          <!-- Password -->
+          <a-form-item :label="$t('labels.password')">
+            <a-input-password
+              v-model:value="(formState.dataSource.connection as DefaultConnection).password"
+              class="nc-extdb-host-password"
+            />
+          </a-form-item>

-            <!--            Extra connection parameters -->
-            <a-form-item class="mb-2" :label="$t('labels.extraConnectionParameters')" v-bind="validateInfos.extraParameters">
-              <a-card>
-                <div v-for="(item, index) of formState.extraParameters" :key="index">
-                  <div class="flex py-1 items-center gap-1">
-                    <a-input v-model:value="item.key" />
+          <!-- Database -->
+          <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
+            <!-- Database : create if not exists -->
+            <a-input
+              v-model:value="formState.dataSource.connection.database"
+              :placeholder="$t('labels.dbCreateIfNotExists')"
+              class="nc-extdb-host-database"
+            />
+          </a-form-item>

-                    <span>:</span>
+          <!-- Schema name -->
+          <a-form-item
+            v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath"
+            :label="$t('labels.schemaName')"
+            v-bind="validateInfos['dataSource.searchPath.0']"
+          >
+            <a-input v-model:value="formState.dataSource.searchPath[0]" />
+          </a-form-item>
+          <div class="flex items-right justify-end gap-2">
+            <!--                Use Connection URL -->
+            <a-button class="nc-extdb-btn-import-url !rounded-md" @click.stop="importURLDlg = true">
+              {{ $t('activity.useConnectionUrl') }}
+            </a-button>
+          </div>

-                    <a-input v-model:value="item.value" />
+          <a-collapse ghost expand-icon-position="right" class="!mt-6">
+            <a-collapse-panel key="1">
+              <template #header>
+                <span>{{ $t('title.advancedParameters') }}</span>
+              </template>
+              <a-form-item label="SSL mode">
+                <a-select v-model:value="formState.sslUse" dropdown-class-name="nc-dropdown-ssl-mode" @select="onSSLModeChange">
+                  <a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }} </a-select-option>
+                </a-select>
+              </a-form-item>

-                    <component
-                      :is="iconMap.close"
-                      :style="{ 'font-size': '1.5em', 'color': 'red' }"
-                      @click="removeParam(index)"
-                    />
-                  </div>
+              <a-form-item label="SSL keys">
+                <div class="flex gap-2">
+                  <a-tooltip placement="top">
+                    <!-- Select .cert file -->
+                    <template #title>
+                      <span>{{ $t('tooltip.clientCert') }}</span>
+                    </template>
+
+                    <a-button :disabled="!sslFilesRequired" class="shadow" @click="certFileInput?.click()">
+                      {{ $t('labels.clientCert') }}
+                    </a-button>
+                  </a-tooltip>
+
+                  <a-tooltip placement="top">
+                    <!-- Select .key file -->
+                    <template #title>
+                      <span>{{ $t('tooltip.clientKey') }}</span>
+                    </template>
+                    <a-button :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput?.click()">
+                      {{ $t('labels.clientKey') }}
+                    </a-button>
+                  </a-tooltip>
+
+                  <a-tooltip placement="top">
+                    <!-- Select CA file -->
+                    <template #title>
+                      <span>{{ $t('tooltip.clientCA') }}</span>
+                    </template>
+
+                    <a-button :disabled="!sslFilesRequired" class="shadow" @click="caFileInput?.click()">
+                      {{ $t('labels.serverCA') }}
+                    </a-button>
+                  </a-tooltip>
                </div>
-                <a-button type="dashed" class="w-full caption mt-2" @click="addNewParam">
-                  <div class="flex items-center justify-center"><component :is="iconMap.plus" /></div>
+              </a-form-item>
+
+              <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="keyFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.key, keyFileInput)" />
+
+              <a-divider />
+
+              <!--            Extra connection parameters -->
+              <a-form-item class="mb-2" :label="$t('labels.extraConnectionParameters')" v-bind="validateInfos.extraParameters">
+                <a-card>
+                  <div v-for="(item, index) of formState.extraParameters" :key="index">
+                    <div class="flex py-1 items-center gap-1">
+                      <a-input v-model:value="item.key" />
+
+                      <span>:</span>
+
+                      <a-input v-model:value="item.value" />
+
+                      <component
+                        :is="iconMap.close"
+                        :style="{ 'font-size': '1.5em', 'color': 'red' }"
+                        @click="removeParam(index)"
+                      />
+                    </div>
+                  </div>
+                  <a-button type="dashed" class="w-full caption mt-2" @click="addNewParam">
+                    <div class="flex items-center justify-center">
+                      <component :is="iconMap.plus" />
+                    </div>
+                  </a-button>
+                </a-card>
+              </a-form-item>
+
+              <a-divider />
+
+              <a-form-item :label="$t('labels.inflection.tableName')">
+                <a-select
+                  v-model:value="formState.inflection.inflectionTable"
+                  dropdown-class-name="nc-dropdown-inflection-table-name"
+                >
+                  <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }} </a-select-option>
+                </a-select>
+              </a-form-item>
+
+              <a-form-item :label="$t('labels.inflection.columnName')">
+                <a-select
+                  v-model:value="formState.inflection.inflectionColumn"
+                  dropdown-class-name="nc-dropdown-inflection-column-name"
+                >
+                  <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }} </a-select-option>
+                </a-select>
+              </a-form-item>
+
+              <div class="flex justify-end">
+                <a-button type="primary" class="!rounded-md" @click="handleEditJSON()">
+                  <!-- Edit connection JSON -->
+                  {{ $t('activity.editConnJson') }}
                </a-button>
-              </a-card>
-            </a-form-item>
-
-            <a-divider />
-
-            <a-form-item :label="$t('labels.inflection.tableName')">
-              <a-select
-                v-model:value="formState.inflection.inflectionTable"
-                dropdown-class-name="nc-dropdown-inflection-table-name"
-              >
-                <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
-              </a-select>
-            </a-form-item>
-
-            <a-form-item :label="$t('labels.inflection.columnName')">
-              <a-select
-                v-model:value="formState.inflection.inflectionColumn"
-                dropdown-class-name="nc-dropdown-inflection-column-name"
-              >
-                <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
-              </a-select>
-            </a-form-item>
-
-            <div class="flex justify-end">
-              <a-button type="primary" class="!rounded-md" @click="handleEditJSON()">
-                <!-- Edit connection JSON -->
-                {{ $t('activity.editConnJson') }}
-              </a-button>
-            </div>
-          </a-collapse-panel>
-        </a-collapse>
-      </template>
+              </div>
+            </a-collapse-panel>
+          </a-collapse>
+        </template>
+      </div>

      <a-form-item class="flex justify-end !mt-5">
        <div class="flex justify-end gap-2">
@@ -670,7 +684,7 @@ watch(
  :deep(.ant-input-affix-wrapper),
  :deep(.ant-input),
  :deep(.ant-select) {
-    @apply !appearance-none border-1 border-solid rounded;
+    @apply !appearance-none border-solid rounded-md;
  }

  :deep(.ant-input-password) {