wip: project create improvements

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -0,0 +1,170 @@
+const testDataBaseNames = {
+  mysql2: null,
+  mysql: null,
+  pg: 'postgres',
+  oracledb: 'xe',
+  mssql: undefined,
+  sqlite3: 'a.sqlite',
+}
+
+export type ClientType = 'mysql2' | 'mssql' | 'pg' | 'sqlite3' | 'vitess'
+
+export const getTestDatabaseName = (db: { client: ClientType; connection?: { database?: string } }) => {
+  if (db.client === 'pg')
+    return db.connection?.database
+  return testDataBaseNames[db.client]
+}
+
+export const clientTypes = [{
+  text: 'MySql',
+  value: 'mysql2',
+}, {
+  text: 'MSSQL',
+  value: 'mssql',
+}, {
+  text: 'PostgreSQL',
+  value: 'pg',
+}, {
+  text: 'SQLite',
+  value: 'sqlite',
+},
+]
+
+const homeDir = ''
+const sampleConnectionData = {
+  pg: {
+    host: 'localhost',
+    port: '5432',
+    user: 'postgres',
+    password: 'password',
+    database: '_test',
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
+  },
+  mysql2: {
+    host: 'localhost',
+    port: '3306',
+    user: 'root',
+    password: 'password',
+    database: '_test',
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
+  },
+  vitess: {
+    host: 'localhost',
+    port: '15306',
+    user: 'root',
+    password: 'password',
+    database: '_test',
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
+  },
+  tidb: {
+    host: 'localhost',
+    port: '4000',
+    user: 'root',
+    password: '',
+    database: '_test',
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
+  },
+  yugabyte: {
+    host: 'localhost',
+    port: '5432',
+    user: 'postgres',
+    password: '',
+    database: '_test',
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
+  },
+  citusdb: {
+    host: 'localhost',
+    port: '5432',
+    user: 'postgres',
+    password: '',
+    database: '_test',
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
+  },
+  cockroachdb: {
+    host: 'localhost',
+    port: '5432',
+    user: 'postgres',
+    password: '',
+    database: '_test',
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
+  },
+  greenplum: {
+    host: 'localhost',
+    port: '5432',
+    user: 'postgres',
+    password: '',
+    database: '_test',
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
+  },
+  mssql: {
+    host: 'localhost',
+    port: 1433,
+    user: 'sa',
+    password: 'Password123.',
+    database: '_test',
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
+  },
+  oracledb: {
+    host: 'localhost',
+    port: '1521',
+    user: 'system',
+    password: 'Oracle18',
+    database: '_test',
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
+  },
+  sqlite3: {
+    client: 'sqlite3',
+    database: homeDir,
+    connection: {
+      filename: homeDir,
+    },
+    useNullAsDefault: true,
+  },
+}
+
+export const getDefaultConnectionConfig = (client: ClientType): { client: ClientType; connection: any } => {
+  return {
+    client,
+    connection: sampleConnectionData[client],
+  }
+}

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

@@ -1,48 +1,26 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { useToast } from 'vue-toastification'
 import { useI18n } from 'vue-i18n'
+import { useToast } from 'vue-toastification'
 import { useNuxtApp, useRouter } from '#app'
 import { extractSdkResponseErrorMsg } from '~/helpers/errorUtils'
-
-const clientTypes = [
-  {
-    text: 'MySql',
-    value: 'mysql2',
-  }, {
-    text: 'MSSQL',
-    value: 'mssql',
-  }, {
-    text: 'PostgreSQL',
-    value: 'pg',
-  }, {
-    text: 'SQLite',
-    value: 'sqlite',
-  },
-]
+import { clientTypes, getDefaultConnectionConfig, getTestDatabaseName } from '~/helpers/projectCreateUtils'
 
 const name = ref('')
 const loading = ref(false)
 const valid = ref(false)
-const projectDatasource = reactive({
-  client: 'mysql2',
-  connection: {
-    user: 'root',
-    password: 'password',
-    port: 3306,
-    host: 'localhost',
-    database: '',
-  },
-})
+const testSuccess = ref(false)
+const projectDatasource = ref(getDefaultConnectionConfig('mysql2'))
 const inflection = reactive({
   tableName: 'camelize',
   columnName: 'camelize',
 })
 
 const $router = useRouter()
-const { $api } = useNuxtApp()
+const { $api, $e } = useNuxtApp()
 const { user } = useUser()
 const toast = useToast()
+const { t: $t } = useI18n()
 
 const titleValidationRule = [
   v => !!v || 'Title is required',
@@ -56,8 +34,8 @@ const createProject = async () => {
       title: name.value,
       bases: [
         {
-          type: projectDatasource.client,
-          config: projectDatasource,
+          type: projectDatasource.value.client,
+          config: projectDatasource.value,
           inflection_column: inflection.columnName,
           inflection_table: inflection.tableName,
         },
@@ -73,6 +51,40 @@ const createProject = async () => {
   }
   loading.value = false
 }
+
+const testConnection = async () => {
+  $e('a:project:create:extdb:test-connection')
+  try {
+    // this.handleSSL(projectDatasource)
+
+    if (projectDatasource.value.client === 'sqlite3') {
+      testSuccess.value = true
+    }
+    else {
+      const testConnectionConfig = {
+        ...projectDatasource,
+        connection: {
+          ...projectDatasource.value.connection,
+          database: getTestDatabaseName(projectDatasource.value),
+        },
+      }
+
+      const result = await $api.utils.testConnection(testConnectionConfig)
+
+      if (result.code === 0) {
+        testSuccess.value = true
+      }
+      else {
+        testSuccess.value = false
+        toast.error($t('msg.error.dbConnectionFailed') + result.message)
+      }
+    }
+  }
+  catch (e) {
+    testSuccess.value = false
+    toast.error(await extractSdkResponseErrorMsg(e))
+  }
+}
 </script>
 
 <template>
@@ -167,9 +179,10 @@ const createProject = async () => {
               </v-row>
             </v-container>
 
-            <div class="text-center">
+            <div class=" d-flex justify-center" style="gap: 4px">
               <v-btn
-                class="mt-3 mx-auto"
+                :disabled="!testSuccess"
+                class=""
                 large
                 :loading="loading"
                 color="primary"
@@ -181,6 +194,11 @@ const createProject = async () => {
                 <!-- Create -->
                 <span class="mr-1">{{ $t("general.create") }} </span>
               </v-btn>
+
+              <v-btn size="sm" class="text-sm text-capitalize">
+                <!-- Test Database Connection -->
+                {{ $t("activity.testDbConn") }}
+              </v-btn>
             </div>
           </v-container>
         </v-card>