Merge pull request #2830 from nocodb/feat/nav-drawer-cleanup

refactor(gui-v2): cleanup project create utils
2 years ago · 0e19216412
7 changed files with 133 additions and 126 deletions
--- a/packages/nc-gui-v2/lib/enums.ts
+++ b/packages/nc-gui-v2/lib/enums.ts
@ -4,7 +4,13 @@ export enum Role {
  User = 'user',
 }

-export type Roles = Record<Role, boolean>
+export enum ClientType {
+  MYSQL = 'mysql2',
+  MSSQL = 'mssql',
+  PG = 'pg',
+  SQLITE = 'sqlite3',
+  VITESS = 'vitess',
+}

 export enum Language {
  de = 'Deutsch',
--- a/packages/nc-gui-v2/lib/types.ts
+++ b/packages/nc-gui-v2/lib/types.ts
@ -1,5 +1,5 @@
 import type { ComputedRef, ToRefs } from 'vue'
-import type { Roles } from '~/lib/enums'
+import type { Role } from './enums'

 export interface User {
  id: string
@ -33,40 +33,4 @@ export type ReadonlyState = Readonly<Pick<State, 'token' | 'user'>> & Omit<State

 export type GlobalState = Getters & Actions & ToRefs<ReadonlyState>

-export enum ClientType {
-  MYSQL = 'mysql2',
-  MSSQL = 'mssql',
-  PG = 'pg',
-  SQLITE = 'sqlite3',
-  VITESS = 'vitess',
-}
-
-export interface ProjectCreateForm {
-  title: string
-  dataSource: {
-    client: ClientType
-    connection:
-      | {
-          host: string
-          database: string
-          user: string
-          password: string
-          port: number | string
-          ssl?: Record<string, string>
-          searchPath?: string[]
-        }
-      | {
-          client?: 'sqlite3'
-          database: string
-          connection?: {
-            filename?: string
-          }
-          useNullAsDefault?: boolean
-        }
-  }
-  inflection: {
-    inflectionColumn?: string
-    inflectionTable?: string
-  }
-  sslUse?: any
-}
+export type Roles = Record<Role, boolean>
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@ -133,8 +133,7 @@ $state.sidebarOpen.value = false
        <!--        Title -->
        <a-table-column key="title" :title="$t('general.title')" data-index="title">
          <template #default="{ text }">
-            <div class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap nc-project-row"
-                 :title="text">
+            <div class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap nc-project-row" :title="text">
              {{ text }}
            </div>
          </template>
--- a/packages/nc-gui-v2/pages/project/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@ -310,7 +310,7 @@ onMounted(() => {
                  <template #title>
                    <span>{{ $t('tooltip.clientCert') }}</span>
                  </template>
-                  <a-button :disabled="!sslFilesRequired" size="small" @click="certFileInput.click()" class="shadow">
+                  <a-button :disabled="!sslFilesRequired" size="small" class="shadow" @click="certFileInput.click()">
                    {{ $t('labels.clientCert') }}
                  </a-button>
                </a-tooltip>
@ -319,7 +319,7 @@ onMounted(() => {
                  <template #title>
                    <span>{{ $t('tooltip.clientKey') }}</span>
                  </template>
-                  <a-button :disabled="!sslFilesRequired" size="small" @click="keyFileInput.click()" class="shadow">
+                  <a-button :disabled="!sslFilesRequired" size="small" class="shadow" @click="keyFileInput.click()">
                    {{ $t('labels.clientKey') }}
                  </a-button>
                </a-tooltip>
@ -328,7 +328,7 @@ onMounted(() => {
                  <template #title>
                    <span>{{ $t('tooltip.clientCA') }}</span>
                  </template>
-                  <a-button :disabled="!sslFilesRequired" size="small" @click="caFileInput.click()" class="shadow">
+                  <a-button :disabled="!sslFilesRequired" size="small" class="shadow" @click="caFileInput.click()">
                    {{ $t('labels.serverCA') }}
                  </a-button>
                </a-tooltip>
@ -364,7 +364,9 @@ onMounted(() => {
          <a-button type="primary" ghost class="nc-extdb-btn-test-connection" @click="testConnection">
            {{ $t('activity.testDbConn') }}
          </a-button>
-          <a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit !shadow" @click="createProject"> Submit </a-button>
+          <a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit !shadow" @click="createProject">
+            Submit
+          </a-button>
        </div>
      </a-form-item>
    </a-form>
@ -399,6 +401,6 @@ onMounted(() => {
 }

 :deep(.ant-card-head-title) {
-  @apply !text-3xl
+  @apply !text-3xl;
 }
 </style>
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@ -111,7 +111,9 @@ const resetError = () => {
            </nuxt-link>
          </div>

-          <div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
+          <div
+            class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full"
+          >
            <button class="submit" type="submit">
              <span class="flex items-center gap-2"><MdiLogin /> {{ $t('general.signIn') }}</span>
            </button>
--- a/packages/nc-gui-v2/pages/signup.vue
+++ b/packages/nc-gui-v2/pages/signup.vue
@ -19,7 +19,7 @@ let error = $ref<string | null>(null)

 const form = reactive({
  email: '',
-  password: ''
+  password: '',
 })

 const formRules = {
@ -102,7 +102,9 @@ const resetError = () => {
            />
          </a-form-item>

-          <div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
+          <div
+            class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full"
+          >
            <button class="submit" type="submit">
              <span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('general.signUp') }}</span>
            </button>
--- a/packages/nc-gui-v2/utils/projectCreateUtils.ts
+++ b/packages/nc-gui-v2/utils/projectCreateUtils.ts
@ -1,43 +1,75 @@
 import { adjectives, animals, starWars, uniqueNamesGenerator } from 'unique-names-generator'
-import type { ClientType, ProjectCreateForm } from '~/lib/types'
+import { ClientType } from '~/lib/enums'
+
+export interface ProjectCreateForm {
+  title: string
+  dataSource: {
+    client: ClientType
+    connection:
+      | {
+          host: string
+          database: string
+          user: string
+          password: string
+          port: number | string
+          ssl?: Record<string, string>
+          searchPath?: string[]
+        }
+      | {
+          client?: ClientType.SQLITE
+          database: string
+          connection?: {
+            filename?: string
+          }
+          useNullAsDefault?: boolean
+        }
+  }
+  inflection: {
+    inflectionColumn?: string
+    inflectionTable?: string
+  }
+  sslUse?: any
+}
+
+const defaultHost = 'localhost'

 const testDataBaseNames = {
-  mysql2: null,
+  [ClientType.MYSQL]: null,
  mysql: null,
-  pg: 'postgres',
+  [ClientType.PG]: 'postgres',
  oracledb: 'xe',
-  mssql: undefined,
-  sqlite3: 'a.sqlite',
+  [ClientType.MSSQL]: undefined,
+  [ClientType.SQLITE]: 'a.sqlite',
 }

 export const getTestDatabaseName = (db: { client: ClientType; connection?: { database?: string } }) => {
-  if (db.client === 'pg') return db.connection?.database
+  if (db.client === ClientType.PG) return db.connection?.database
  return testDataBaseNames[db.client as keyof typeof testDataBaseNames]
 }

 export const clientTypes = [
  {
    text: 'MySql',
-    value: 'mysql2',
+    value: ClientType.MYSQL,
  },
  {
    text: 'MSSQL',
-    value: 'mssql',
+    value: ClientType.MSSQL,
  },
  {
    text: 'PostgreSQL',
-    value: 'pg',
+    value: ClientType.PG,
  },
  {
    text: 'SQLite',
-    value: 'sqlite3',
+    value: ClientType.SQLITE,
  },
 ]

 const homeDir = ''
 const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataSource']['connection']> = {
-  pg: {
-    host: 'localhost',
+  [ClientType.PG]: {
+    host: defaultHost,
    port: '5432',
    user: 'postgres',
    password: 'password',
@ -49,8 +81,8 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
      cert: '',
    },
  },
-  mysql2: {
-    host: 'localhost',
+  [ClientType.MYSQL]: {
+    host: defaultHost,
    port: '3306',
    user: 'root',
    password: 'password',
@ -61,8 +93,8 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
      cert: '',
    },
  },
-  vitess: {
-    host: 'localhost',
+  [ClientType.VITESS]: {
+    host: defaultHost,
    port: '15306',
    user: 'root',
    password: 'password',
@ -73,8 +105,29 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
      cert: '',
    },
  },
+  [ClientType.MSSQL]: {
+    host: defaultHost,
+    port: 1433,
+    user: 'sa',
+    password: 'Password123.',
+    database: '_test',
+    searchPath: ['dbo'],
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
+  },
+  [ClientType.SQLITE]: {
+    client: ClientType.SQLITE,
+    database: homeDir,
+    connection: {
+      filename: homeDir,
+    },
+    useNullAsDefault: true,
+  },
  tidb: {
-    host: 'localhost',
+    host: defaultHost,
    port: '4000',
    user: 'root',
    password: '',
@ -86,7 +139,7 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
    },
  },
  yugabyte: {
-    host: 'localhost',
+    host: defaultHost,
    port: '5432',
    user: 'postgres',
    password: '',
@ -98,7 +151,7 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
    },
  },
  citusdb: {
-    host: 'localhost',
+    host: defaultHost,
    port: '5432',
    user: 'postgres',
    password: '',
@ -110,7 +163,7 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
    },
  },
  cockroachdb: {
-    host: 'localhost',
+    host: defaultHost,
    port: '5432',
    user: 'postgres',
    password: '',
@ -122,7 +175,7 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
    },
  },
  greenplum: {
-    host: 'localhost',
+    host: defaultHost,
    port: '5432',
    user: 'postgres',
    password: '',
@ -133,21 +186,8 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
      cert: '',
    },
  },
-  mssql: {
-    host: 'localhost',
-    port: 1433,
-    user: 'sa',
-    password: 'Password123.',
-    database: '_test',
-    searchPath: ['dbo'],
-    ssl: {
-      ca: '',
-      key: '',
-      cert: '',
-    },
-  },
  oracledb: {
-    host: 'localhost',
+    host: defaultHost,
    port: '1521',
    user: 'system',
    password: 'Oracle18',
@ -158,14 +198,6 @@ const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataS
      cert: '',
    },
  },
-  sqlite3: {
-    client: 'sqlite3',
-    database: homeDir,
-    connection: {
-      filename: homeDir,
-    },
-    useNullAsDefault: true,
-  },
 }

 export const getDefaultConnectionConfig = (client: ClientType): ProjectCreateForm['dataSource'] => {