From edad796ab4ef4c001a16118d49b81ee7e8e7ade1 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 19 Jul 2022 00:42:27 +0530
Subject: [PATCH 01/46] feat: move project create pages to subpages

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |   3 +
 packages/nc-gui-v2/pages/index/index.vue      |   4 +-
 .../nc-gui-v2/pages/index/index/index.vue     |   7 +-
 packages/nc-gui-v2/pages/index/index/list.vue |   2 +-
 packages/nc-gui-v2/pages/projects/index.vue   | 155 +-----------------
 .../projects/{ => index}/create-external.vue  |   0
 .../pages/projects/{ => index}/create.vue     |  60 +++++--
 7 files changed, 62 insertions(+), 169 deletions(-)
 rename packages/nc-gui-v2/pages/projects/{ => index}/create-external.vue (100%)
 rename packages/nc-gui-v2/pages/projects/{ => index}/create.vue (58%)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 49767446cb..47dd2cd544 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -7,6 +7,9 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AButton: typeof import('ant-design-vue/es')['Button']
+    ACard: typeof import('ant-design-vue/es')['Card']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index efda169de5..a0812c0ace 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -81,14 +81,14 @@ const visible = ref(true)
             <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
               <div
                 class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                @click="navigateTo('/create')"
+                @click="navigateTo('/project/create')"
               >
                 <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
                 <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
               </div>
               <div
                 class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                @click="navigateTo('/create-external')"
+                @click="navigateTo('/project/create-external')"
               >
                 <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
                 <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue
index 7f09818aef..461e825a2f 100644
--- a/packages/nc-gui-v2/pages/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index/index.vue
@@ -50,13 +50,16 @@ const formatTitle = (title: string) =>
           </div>
         </template>
         <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
-          <div class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2" @click="navigateTo('/create')">
+          <div
+            class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
+            @click="navigateTo('/projects/create')"
+          >
             <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
             <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
           </div>
           <div
             class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-            @click="navigateTo('/create-external')"
+            @click="navigateTo('/projects/create-external')"
           >
             <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
             <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
diff --git a/packages/nc-gui-v2/pages/index/index/list.vue b/packages/nc-gui-v2/pages/index/index/list.vue
index d69159b566..4d2fe80da0 100644
--- a/packages/nc-gui-v2/pages/index/index/list.vue
+++ b/packages/nc-gui-v2/pages/index/index/list.vue
@@ -13,7 +13,7 @@ const { projects = [] } = defineProps<Props>()
 
 const emit = defineEmits(['delete-project'])
 
-const { $e } = useNuxtApp()
+const { $e } = useNxuxtApp()
 
 const openProject = async (project: ProjectType) => {
   await navigateTo(`/nc/${project.id}`)
diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index e26a1ef829..ea14b8a330 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index.vue
@@ -1,150 +1,13 @@
-<script lang="ts" setup>
-import { createVNode } from '@vue/runtime-core'
-import { Modal } from 'ant-design-vue'
-import type { ProjectType } from 'nocodb-sdk'
-import { useToast } from 'vue-toastification'
-import { navigateTo } from '#app'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded'
-import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
-import MdiPlus from '~icons/mdi/plus'
-import MdiDatabaseOutline from '~icons/mdi/database-outline'
-import MdiFolderOutline from '~icons/mdi/folder-outline'
-import ExclamationCircleOutlined from '~icons/mdi/information-outline'
-
-const navDrawerOptions = [
-  {
-    title: 'My NocoDB',
-    icon: MdiFolderOutline,
-  },
-  /* todo: implement the api and bring back the options below
-   {
-    title: "Shared With Me",
-    icon: MdiAccountGroup
-  },
-  {
-    title: "Recent",
-    icon: MdiClockOutline
-  },
-  {
-    title: "Starred",
-    icon: MdiStar
-  } */
-]
-
-const route = useRoute()
-
-const { $api, $state } = useNuxtApp()
-const toast = useToast()
-
-const response = await $api.project.list({})
-const projects = $ref(response.list)
-const activePage = $ref(navDrawerOptions[0].title)
-const deleteProject = (project: ProjectType) => {
-  Modal.confirm({
-    title: 'Do you want to delete the project?',
-    // icon: createVNode(ExclamationCircleOutlined),
-    content: 'Some descriptions',
-    okText: 'Yes',
-    okType: 'danger',
-    cancelText: 'No',
-    async onOk() {
-      try {
-        await $api.project.delete(project.id as string)
-        projects.splice(projects.indexOf(project), 1)
-      } catch (e) {
-        toast.error(await extractSdkResponseErrorMsg(e))
-      }
-    },
-  })
-}
-
-const visible = ref(true)
-</script>
-
 <template>
   <NuxtLayout>
-    <template #sidebar>
-      <div class="flex flex-col h-full">
-        <div class="flex p-4">
-          <v-menu class="select-none">
-            <template #activator="{ props }">
-              <div
-                class="color-transition hover:(bg-gray-100 dark:bg-secondary/25) dark:(bg-secondary/50 !text-white shadow-gray-600) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
-                @click="props.onClick"
-              >
-                <MdiPlus class="text-primary dark:(!text-white) text-2xl" />
-                {{ $t('title.newProj') }}
-              </div>
-            </template>
-
-            <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
-              <div
-                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                @click="navigateTo('/create')"
-              >
-                <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
-                <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
-              </div>
-              <div
-                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                @click="navigateTo('/create-external')"
-              >
-                <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
-                <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
-              </div>
-            </v-list>
-          </v-menu>
-        </div>
-
-        <a-menu class="mx-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
-          <a-menu-item
-            v-for="(option, index) in navDrawerOptions"
-            :key="index"
-            class="f!rounded-r-lg"
-            @click="activePage = option.title"
-          >
-            <div class="flex items-center gap-4">
-              <component :is="option.icon" />
-
-              <span class="font-semibold">
-                {{ option.title }}
-              </span>
-            </div>
-          </a-menu-item>
-        </a-menu>
-
-        <general-social />
-
-        <general-sponsors :nav="true" />
-      </div>
-    </template>
-
-    <v-container class="flex-1 mb-12">
-      <div class="flex">
-        <div class="flex-1 text-2xl md:text-4xl font-bold text-gray-500 dark:text-white p-4">
-          {{ activePage }}
-        </div>
-
-        <div class="self-end flex text-4xl mb-1">
-          <MaterialSymbolsGridView
-            :class="route.name === 'projects-index' ? 'text-primary dark:(!text-secondary/75)' : ''"
-            class="color-transition cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
-            @click="navigateTo('/projects')"
-          />
-          <MaterialSymbolsFormatListBulletedRounded
-            :class="route.name === 'projects-index-list' ? 'text-primary dark:(!text-secondary/75)' : ''"
-            class="color-transition cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
-            @click="navigateTo('/projects/list')"
-          />
-        </div>
-      </div>
-
-      <a-divider class="!mb-4 lg:(!mb-8)" />
-
-      <NuxtPage :projects="projects" @delete-project="deleteProject" />
-    </v-container>
-
-    <a-modal></a-modal>
+    <div class="w-full nc-container">
+      <NuxtPage />
+    </div>
   </NuxtLayout>
 </template>
+
+<style scoped>
+.nc-container {
+  height: calc(100vh - var(--header-height));
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/projects/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
similarity index 100%
rename from packages/nc-gui-v2/pages/projects/create-external.vue
rename to packages/nc-gui-v2/pages/projects/index/create-external.vue
diff --git a/packages/nc-gui-v2/pages/projects/create.vue b/packages/nc-gui-v2/pages/projects/index/create.vue
similarity index 58%
rename from packages/nc-gui-v2/pages/projects/create.vue
rename to packages/nc-gui-v2/pages/projects/index/create.vue
index f552bf1b62..c96f548e7f 100644
--- a/packages/nc-gui-v2/pages/projects/create.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create.vue
@@ -28,11 +28,50 @@ const createProject = async () => {
   }
   loading.value = false
 }
+
+const formState = reactive({
+  username: '',
+  password: '',
+  remember: true,
+})
+const onFinish = (values: any) => {
+  console.log('Success:', values)
+}
+
+const onFinishFailed = (errorInfo: any) => {
+  console.log('Failed:', errorInfo)
+}
 </script>
 
 <template>
-  <NuxtLayout>
-    <v-form ref="formValidator" v-model="valid" class="h-full" @submit.prevent="createProject">
+  <a-card class="w-[500px] mx-auto mt-10">
+
+    <h3 class="text-3xl text-center"> {{ $t('activity.createProject') }}</h3>
+
+    <a-form
+      :model="formState"
+      name="basic"
+      layout="vertical"
+      autocomplete="off"
+      @finish="onFinish"
+      @finishFailed="onFinishFailed"
+    >
+      <a-form-item
+        :label="$t('labels.projName')"
+        name="title"
+        :rules="[{ required: true, message: 'Please input your username!' }]"
+      >
+        <a-input  class="nc-metadb-project-name" v-model:value="formState.username" />
+      </a-form-item>
+
+      <a-form-item style="text-align: center">
+        <a-button type="primary" html-type="submit" class="mx-auto flex justify-self-center">
+          <MaterialSymbolsRocketLaunchOutline class="mr-1" /> <span> {{ $t('general.create') }} </span></a-button
+        >
+      </a-form-item>
+    </a-form>
+  </a-card>
+  <!--    <v-form ref="formValidator" v-model="valid" class="h-full" @submit.prevent="createProject">
       <v-container fluid class="flex justify-center items-center h-3/4">
         <v-card max-width="500">
           <v-container class="pb-10 px-12">
@@ -55,20 +94,5 @@ const createProject = async () => {
         </v-card>
       </v-container>
     </v-form>
-  </NuxtLayout>
+  </NuxtLayout> -->
 </template>
-
-<style scoped>
-:deep(label) {
-  font-size: 0.75rem;
-}
-
-.wrapper {
-  border: 2px solid var(--v-backgroundColor-base);
-  border-radius: 4px;
-}
-
-.main {
-  height: calc(100vh - 48px);
-}
-</style>

From 5552b564b4bb2a1576bee53e074032d9afa70275 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 19 Jul 2022 12:43:18 +0530
Subject: [PATCH 02/46] feat(gui-v2): add crete project form validation

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/pages/projects/index/create.vue | 84 ++++++-------------
 1 file changed, 25 insertions(+), 59 deletions(-)

diff --git a/packages/nc-gui-v2/pages/projects/index/create.vue b/packages/nc-gui-v2/pages/projects/index/create.vue
index c96f548e7f..a9ef83c2a0 100644
--- a/packages/nc-gui-v2/pages/projects/index/create.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create.vue
@@ -11,15 +11,29 @@ const valid = ref(false)
 const { $api, $toast } = useNuxtApp()
 
 const nameValidationRules = [
-  (v: string) => !!v || 'Title is required',
-  (v: string) => v.length <= 50 || 'Project name exceeds 50 characters',
+  {
+    required: true,
+    message: 'Title is required',
+  },
+  {
+    validator(rule: any, value: any, callback: (errMsg?: string) => void) {
+      if (value?.length > 50) {
+        callback('Project name exceeds 50 characters')
+      }
+      callback()
+    },
+  },
 ]
 
+const formState = reactive({
+  title: '',
+})
+
 const createProject = async () => {
   loading.value = true
   try {
     const result = await $api.project.create({
-      title: name.value,
+      title: formState.title,
     })
 
     await navigateTo(`/nc/${result.id}`)
@@ -28,71 +42,23 @@ const createProject = async () => {
   }
   loading.value = false
 }
-
-const formState = reactive({
-  username: '',
-  password: '',
-  remember: true,
-})
-const onFinish = (values: any) => {
-  console.log('Success:', values)
-}
-
-const onFinishFailed = (errorInfo: any) => {
-  console.log('Failed:', errorInfo)
-}
 </script>
 
 <template>
-  <a-card class="w-[500px] mx-auto mt-10">
-
-    <h3 class="text-3xl text-center"> {{ $t('activity.createProject') }}</h3>
+  <a-card class="w-[500px] mx-auto !mt-100px">
+    <h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.createProject') }}</h3>
 
-    <a-form
-      :model="formState"
-      name="basic"
-      layout="vertical"
-      autocomplete="off"
-      @finish="onFinish"
-      @finishFailed="onFinishFailed"
-    >
-      <a-form-item
-        :label="$t('labels.projName')"
-        name="title"
-        :rules="[{ required: true, message: 'Please input your username!' }]"
-      >
-        <a-input  class="nc-metadb-project-name" v-model:value="formState.username" />
+    <a-form :model="formState" name="basic" layout="vertical" autocomplete="off">
+      <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10">
+        <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>
 
-      <a-form-item style="text-align: center">
+      <a-form-item style="text-align: center" class="mt-2">
         <a-button type="primary" html-type="submit" class="mx-auto flex justify-self-center">
-          <MaterialSymbolsRocketLaunchOutline class="mr-1" /> <span> {{ $t('general.create') }} </span></a-button
+          <MaterialSymbolsRocketLaunchOutline class="mr-1" />
+          <span> {{ $t('general.create') }} </span></a-button
         >
       </a-form-item>
     </a-form>
   </a-card>
-  <!--    <v-form ref="formValidator" v-model="valid" class="h-full" @submit.prevent="createProject">
-      <v-container fluid class="flex justify-center items-center h-3/4">
-        <v-card max-width="500">
-          <v-container class="pb-10 px-12">
-            <h1 class="my-4 prose-lg text-center">
-              {{ $t('activity.createProject') }}
-            </h1>
-            <div class="mx-auto" style="width: 350px">
-              <v-text-field
-                v-model="name"
-                class="nc-metadb-project-name"
-                :rules="nameValidationRules"
-                :label="$t('labels.projName')"
-              />
-            </div>
-            <v-btn class="mx-auto" large :loading="loading" color="primary" @click="createProject">
-              <MaterialSymbolsRocketLaunchOutline class="mr-1" />
-              <span> {{ $t('general.create') }} </span>
-            </v-btn>
-          </v-container>
-        </v-card>
-      </v-container>
-    </v-form>
-  </NuxtLayout> -->
 </template>

From a362a14d568a5eb1691c9f22d905fb4e83a7cd7e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 19 Jul 2022 12:48:08 +0530
Subject: [PATCH 03/46] feat(gui-v2): project create api invoke

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/projects/index/create.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/projects/index/create.vue b/packages/nc-gui-v2/pages/projects/index/create.vue
index a9ef83c2a0..1cf5e7dba1 100644
--- a/packages/nc-gui-v2/pages/projects/index/create.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create.vue
@@ -48,7 +48,7 @@ const createProject = async () => {
   <a-card class="w-[500px] mx-auto !mt-100px">
     <h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.createProject') }}</h3>
 
-    <a-form :model="formState" name="basic" layout="vertical" autocomplete="off">
+    <a-form :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="createProject">
       <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10">
         <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>

From 2fca8f921037381634a0f782bfc8aebc5f10cc94 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 19 Jul 2022 13:21:30 +0530
Subject: [PATCH 04/46] refactor(gui-v2): add box shadow

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts                 | 5 +++++
 packages/nc-gui-v2/pages/projects/index/create.vue | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 47dd2cd544..49b2967468 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -10,11 +10,13 @@ declare module '@vue/runtime-core' {
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ACol: typeof import('ant-design-vue/es')['Col']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
+    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
@@ -24,6 +26,9 @@ declare module '@vue/runtime-core' {
     AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    ARow: typeof import('ant-design-vue/es')['Row']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ATable: typeof import('ant-design-vue/es')['Table']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/packages/nc-gui-v2/pages/projects/index/create.vue b/packages/nc-gui-v2/pages/projects/index/create.vue
index 1cf5e7dba1..924f37a41f 100644
--- a/packages/nc-gui-v2/pages/projects/index/create.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create.vue
@@ -45,11 +45,11 @@ const createProject = async () => {
 </script>
 
 <template>
-  <a-card class="w-[500px] mx-auto !mt-100px">
+  <a-card class="w-[500px] mx-auto !mt-100px shadow-md">
     <h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.createProject') }}</h3>
 
     <a-form :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="createProject">
-      <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10">
+      <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10">
         <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>
 

From 61dd082839f5e9a6cd05e1155e4325ccbe545602 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 19 Jul 2022 15:14:34 +0530
Subject: [PATCH 05/46] feat(gui-v2): external project create - form validation

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/projects/index/create-external.vue  | 208 ++++++++++++++++--
 .../nc-gui-v2/pages/projects/index/create.vue |  10 +-
 .../nc-gui-v2/utils/projectCreateUtils.ts     |  13 ++
 3 files changed, 206 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index 4a38de1f46..efb9bd60d7 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -2,11 +2,19 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useToast } from 'vue-toastification'
+import { Form } from 'ant-design-vue'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { clientTypes, getDefaultConnectionConfig, getTestDatabaseName } from '~/utils/projectCreateUtils'
+import {
+  clientTypes,
+  fieldRequiredValidator,
+  getDefaultConnectionConfig,
+  getTestDatabaseName,
+  projectTitleValidator,
+} from '~/utils/projectCreateUtils'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 
+const useForm = Form.useForm
 const name = ref('')
 const loading = ref(false)
 const valid = ref(false)
@@ -17,15 +25,12 @@ const inflection = reactive({
   columnName: 'camelize',
 })
 
+const formState = reactive<Record<string, any>>({ dataSource: {} })
+
 const { $api, $e } = useNuxtApp()
 const toast = useToast()
 const { t } = useI18n()
 
-const titleValidationRule = [
-  (v: string) => !!v || 'Title is required',
-  (v: string) => v.length <= 50 || 'Project name exceeds 50 characters',
-]
-
 const createProject = async () => {
   loading.value = true
   try {
@@ -80,14 +85,184 @@ const testConnection = async () => {
     toast.error(await extractSdkResponseErrorMsg(e))
   }
 }
+
+const validators = reactive({
+  'title': [
+    {
+      required: true,
+      message: 'Please input project title',
+    },
+    projectTitleValidator,
+  ],
+  'dataSource.client': [fieldRequiredValidator],
+  'dataSource.port': [fieldRequiredValidator],
+  'dataSource.host': [fieldRequiredValidator],
+  'dataSource.user': [fieldRequiredValidator],
+  'dataSource.database': [fieldRequiredValidator],
+})
+
+const { resetFields, validate, validateInfos } = useForm(formState, validators)
 </script>
 
 <template>
-  <NuxtLayout>
-    <v-form ref="formValidator" v-model="valid" class="h-full" @submit.prevent="createProject">
+  <a-card class="max-w-[800px] mx-auto !mt-100px" :title="$t('activity.createProject')">
+    <a-form :model="formState" name="validate_other" layout="vertical">
+      <a-row :gutter="24">
+        <a-col span="24">
+          <!-- Enter Project Name -->
+          <a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title">
+            <a-input v-model:value="formState.title" size="large" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24" class="text-center text-md font-medium mb-3 mt-1">
+          {{ $t('title.dbCredentials') }}
+        </a-col>
+        <a-col :span="8">
+          <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
+            <a-select v-model:value="formState.dataSource.client">
+              <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
+                >{{ client.text }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.host']">
+            <a-input v-model:value="formState.dataSource.host" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.port']">
+            <a-input-number v-model:value="formState.dataSource.port" class="!w-full" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.user']">
+            <a-input v-model:value="formState.dataSource.user" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item :label="$t('labels.password')">
+            <a-input-password v-model:value="formState.dataSource.password" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item :label="$t('labels.dbCreateIfNotExists')" v-bind="validateInfos['dataSource.database']">
+            <a-input v-model:value="formState.dataSource.database" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <!--
+    <a-form-item label="InputNumber">
+      <a-form-item name="input-number" no-style>
+        <a-input-number v-model:value="formState['input-number']" />
+      </a-form-item>
+      <span class="ant-form-text">machines</span>
+    </a-form-item>
+
+    <a-form-item name="switch" label="Switch">
+      <a-switch v-model:checked="formState.switch" />
+    </a-form-item>
+
+    <a-form-item name="slider" label="Slider">
+      <a-slider
+        v-model:value="formState.slider"
+        :marks="{
+          0: 'A',
+          20: 'B',
+          40: 'C',
+          60: 'D',
+          80: 'E',
+          100: 'F',
+        }"
+      />
+    </a-form-item>
+
+    <a-form-item name="radio-group" label="Radio.Group">
+      <a-radio-group v-model:value="formState['radio-group']">
+        <a-radio value="a">item 1</a-radio>
+        <a-radio value="b">item 2</a-radio>
+        <a-radio value="c">item 3</a-radio>
+      </a-radio-group>
+    </a-form-item>
+
+    <a-form-item
+      name="radio-button"
+      label="Radio.Button"
+      :rules="[{ required: true, message: 'Please pick an item!' }]"
+    >
+      <a-radio-group v-model:value="formState['radio-button']">
+        <a-radio-button value="a">item 1</a-radio-button>
+        <a-radio-button value="b">item 2</a-radio-button>
+        <a-radio-button value="c">item 3</a-radio-button>
+      </a-radio-group>
+    </a-form-item>
+
+    <a-form-item name="checkbox-group" label="Checkbox.Group">
+      <a-checkbox-group v-model:value="formState['checkbox-group']">
+        <a-row>
+          <a-col :span="8">
+            <a-checkbox value="A" style="line-height: 32px">A</a-checkbox>
+          </a-col>
+          <a-col :span="8">
+            <a-checkbox value="B" style="line-height: 32px" disabled>B</a-checkbox>
+          </a-col>
+          <a-col :span="8">
+            <a-checkbox value="C" style="line-height: 32px">C</a-checkbox>
+          </a-col>
+          <a-col :span="8">
+            <a-checkbox value="D" style="line-height: 32px">D</a-checkbox>
+          </a-col>
+          <a-col :span="8">
+            <a-checkbox value="E" style="line-height: 32px">E</a-checkbox>
+          </a-col>
+          <a-col :span="8">
+            <a-checkbox value="F" style="line-height: 32px">F</a-checkbox>
+          </a-col>
+        </a-row>
+      </a-checkbox-group>
+    </a-form-item>
+
+    <a-form-item name="rate" label="Rate">
+      <a-rate v-model:value="formState.rate" allow-half />
+    </a-form-item>
+
+    <a-form-item name="upload" label="Upload" extra="longgggggggggggggggggggggggggggggggggg">
+      <a-upload
+        v-model:fileList="formState.upload"
+        name="logo"
+        action="/upload.do"
+        list-type="picture"
+      >
+        <a-button>
+          <template #icon><UploadOutlined /></template>
+          Click to upload
+        </a-button>
+      </a-upload>
+    </a-form-item>
+
+    <a-form-item label="Dragger">
+      <a-form-item name="dragger" no-style>
+        <a-upload-dragger v-model:fileList="formState.dragger" name="files" action="/upload.do">
+          <p class="ant-upload-drag-icon">
+            <InboxOutlined />
+          </p>
+          <p class="ant-upload-text">Click or drag file to this area to upload</p>
+          <p class="ant-upload-hint">Support for a single or bulk upload.</p>
+        </a-upload-dragger>
+      </a-form-item>
+    </a-form-item> -->
+
+      <a-form-item class="text-center">
+        <a-button type="primary" html-type="submit">Submit</a-button>
+      </a-form-item>
+    </a-form>
+  </a-card>
+
+  <!--  <v-form ref="formValidator" v-model="valid" class="h-full" @submit.prevent="createProject">
       <v-container fluid class="flex justify-center items-center h-5/6">
         <v-card max-width="600">
-          <!-- Create Project -->
+          &lt;!&ndash; Create Project &ndash;&gt;
           <v-container class="pb-10 px-12">
             <h1 class="my-4 prose-lg text-center">
               {{ $t('activity.createProject') }}
@@ -147,18 +322,17 @@ const testConnection = async () => {
                 <span> {{ $t('general.create') }} </span>
               </v-btn>
 
-              <!--              <v-btn small class="px-2"> -->
-              <!--     todo:implement test connection -->
-              <!--         <v-btn size="sm" class="text-sm text-capitalize">
-                  &lt;!&ndash; Test Database Connection &ndash;&gt;
-                  {{ $t('activity.testDbConn') }}
-                </v-btn> -->
+              &lt;!&ndash;              <v-btn small class="px-2"> &ndash;&gt;
+              &lt;!&ndash;     todo:implement test connection &ndash;&gt;
+              &lt;!&ndash;         <v-btn size="sm" class="text-sm text-capitalize">
+                    &lt;!&ndash; Test Database Connection &ndash;&gt;
+                    {{ $t('activity.testDbConn') }}
+                  </v-btn> &ndash;&gt;
             </div>
           </v-container>
         </v-card>
       </v-container>
-    </v-form>
-  </NuxtLayout>
+    </v-form> -->
 </template>
 
 <style scoped></style>
diff --git a/packages/nc-gui-v2/pages/projects/index/create.vue b/packages/nc-gui-v2/pages/projects/index/create.vue
index 924f37a41f..de8868fd4d 100644
--- a/packages/nc-gui-v2/pages/projects/index/create.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { projectTitleValidator } from '~/utils/projectCreateUtils'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 
 const name = ref('')
@@ -15,14 +16,7 @@ const nameValidationRules = [
     required: true,
     message: 'Title is required',
   },
-  {
-    validator(rule: any, value: any, callback: (errMsg?: string) => void) {
-      if (value?.length > 50) {
-        callback('Project name exceeds 50 characters')
-      }
-      callback()
-    },
-  },
+  projectTitleValidator,
 ]
 
 const formState = reactive({
diff --git a/packages/nc-gui-v2/utils/projectCreateUtils.ts b/packages/nc-gui-v2/utils/projectCreateUtils.ts
index dc69601e64..a10cce1623 100644
--- a/packages/nc-gui-v2/utils/projectCreateUtils.ts
+++ b/packages/nc-gui-v2/utils/projectCreateUtils.ts
@@ -171,3 +171,16 @@ export const getDefaultConnectionConfig = (client: ClientType): { client: Client
     connection: sampleConnectionData[client],
   }
 }
+
+export const projectTitleValidator = {
+  validator: (rule: any, value: any, callback: (errMsg?: string) => void) => {
+    if (value?.length > 50) {
+      callback('Project name exceeds 50 characters')
+    }
+    callback()
+  },
+}
+export const fieldRequiredValidator = {
+  required: true,
+  message: 'Field is required',
+}

From f59dea011a1f54b67f77b660e29ec208d4528130 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 19 Jul 2022 15:20:40 +0530
Subject: [PATCH 06/46] feat(gui-v2): prefill with default connection config on
 client change

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/projects/index/create-external.vue  | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index efb9bd60d7..53db82dd0f 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -19,14 +19,12 @@ const name = ref('')
 const loading = ref(false)
 const valid = ref(false)
 const testSuccess = ref(true)
-const projectDatasource = ref(getDefaultConnectionConfig('mysql2'))
+const projectDatasource = ref()
 const inflection = reactive({
   tableName: 'camelize',
   columnName: 'camelize',
 })
 
-const formState = reactive<Record<string, any>>({ dataSource: {} })
-
 const { $api, $e } = useNuxtApp()
 const toast = useToast()
 const { t } = useI18n()
@@ -86,6 +84,8 @@ const testConnection = async () => {
   }
 }
 
+const formState = reactive<Record<string, any>>({ dataSource: { ...getDefaultConnectionConfig('mysql2') } })
+
 const validators = reactive({
   'title': [
     {
@@ -95,13 +95,17 @@ const validators = reactive({
     projectTitleValidator,
   ],
   'dataSource.client': [fieldRequiredValidator],
-  'dataSource.port': [fieldRequiredValidator],
-  'dataSource.host': [fieldRequiredValidator],
-  'dataSource.user': [fieldRequiredValidator],
-  'dataSource.database': [fieldRequiredValidator],
+  'dataSource.connection.port': [fieldRequiredValidator],
+  'dataSource.connection.host': [fieldRequiredValidator],
+  'dataSource.connection.user': [fieldRequiredValidator],
+  'dataSource.connection.database': [fieldRequiredValidator],
 })
 
 const { resetFields, validate, validateInfos } = useForm(formState, validators)
+
+const onClientChange = () => {
+  formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) }
+}
 </script>
 
 <template>
@@ -119,7 +123,7 @@ const { resetFields, validate, validateInfos } = useForm(formState, validators)
         </a-col>
         <a-col :span="8">
           <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
-            <a-select v-model:value="formState.dataSource.client">
+            <a-select v-model:value="formState.dataSource.client" @change="onClientChange">
               <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
                 >{{ client.text }}
               </a-select-option>
@@ -127,28 +131,28 @@ const { resetFields, validate, validateInfos } = useForm(formState, validators)
           </a-form-item>
         </a-col>
         <a-col :span="8">
-          <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.host']">
-            <a-input v-model:value="formState.dataSource.host" />
+          <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
+            <a-input v-model:value="formState.dataSource.connection.host" />
           </a-form-item>
         </a-col>
         <a-col :span="8">
-          <a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.port']">
-            <a-input-number v-model:value="formState.dataSource.port" class="!w-full" />
+          <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" />
           </a-form-item>
         </a-col>
         <a-col :span="8">
-          <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.user']">
-            <a-input v-model:value="formState.dataSource.user" />
+          <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
+            <a-input v-model:value="formState.dataSource.connection.user" />
           </a-form-item>
         </a-col>
         <a-col :span="8">
           <a-form-item :label="$t('labels.password')">
-            <a-input-password v-model:value="formState.dataSource.password" />
+            <a-input-password v-model:value="formState.dataSource.connection.password" />
           </a-form-item>
         </a-col>
         <a-col :span="8">
-          <a-form-item :label="$t('labels.dbCreateIfNotExists')" v-bind="validateInfos['dataSource.database']">
-            <a-input v-model:value="formState.dataSource.database" />
+          <a-form-item :label="$t('labels.dbCreateIfNotExists')" v-bind="validateInfos['dataSource.connection.database']">
+            <a-input v-model:value="formState.dataSource.connection.database" />
           </a-form-item>
         </a-col>
       </a-row>

From c49d0dd8bee95289bc8dd9f91aa805ab9065d623 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 19 Jul 2022 15:37:07 +0530
Subject: [PATCH 07/46] refactor(gui-v2): use horizontal layout

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/projects/index/create-external.vue  | 98 ++++++++++---------
 1 file changed, 51 insertions(+), 47 deletions(-)

diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index 53db82dd0f..253a39ad0f 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useToast } from 'vue-toastification'
 import { Form } from 'ant-design-vue'
+import form from '../../../../nc-gui/components/project/spreadsheet/mixins/form'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import {
@@ -106,56 +107,59 @@ const { resetFields, validate, validateInfos } = useForm(formState, validators)
 const onClientChange = () => {
   formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) }
 }
+
+// populate database name based on title
+// watch(()=>formStat)
 </script>
 
 <template>
-  <a-card class="max-w-[800px] mx-auto !mt-100px" :title="$t('activity.createProject')">
-    <a-form :model="formState" name="validate_other" layout="vertical">
-      <a-row :gutter="24">
-        <a-col span="24">
-          <!-- Enter Project Name -->
-          <a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title">
-            <a-input v-model:value="formState.title" size="large" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="24" class="text-center text-md font-medium mb-3 mt-1">
-          {{ $t('title.dbCredentials') }}
-        </a-col>
-        <a-col :span="8">
-          <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
-            <a-select v-model:value="formState.dataSource.client" @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>
-        </a-col>
-        <a-col :span="8">
-          <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
-            <a-input v-model:value="formState.dataSource.connection.host" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="8">
-          <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" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="8">
-          <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
-            <a-input v-model:value="formState.dataSource.connection.user" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="8">
-          <a-form-item :label="$t('labels.password')">
-            <a-input-password v-model:value="formState.dataSource.connection.password" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="8">
-          <a-form-item :label="$t('labels.dbCreateIfNotExists')" v-bind="validateInfos['dataSource.connection.database']">
-            <a-input v-model:value="formState.dataSource.connection.database" />
-          </a-form-item>
-        </a-col>
-      </a-row>
+  <a-card class="max-w-[600px] mx-auto !mt-100px" :title="$t('activity.createProject')">
+    <a-form :model="formState" name="validate_other" layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 18 }">
+      <!--      <a-row :gutter="24"> -->
+      <!--        <a-col span="24"> -->
+      <!-- Enter Project Name -->
+      <a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title">
+        <a-input v-model:value="formState.title" size="small" />
+      </a-form-item>
+      <!--        </a-col> -->
+      <!--        <a-col :span="24" class="text-center text-md font-medium mb-3 mt-1"> -->
+      <!--          {{ $t('title.dbCredentials') }} -->
+      <!--        </a-col> -->
+      <!--        <a-col :span="8"> -->
+      <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
+        <a-select v-model:value="formState.dataSource.client" size="small" @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>
+      <!--        </a-col> -->
+      <!--        <a-col :span="8"> -->
+      <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
+        <a-input v-model:value="formState.dataSource.connection.host" size="small" />
+      </a-form-item>
+      <!--        </a-col> -->
+      <!--        <a-col :span="8"> -->
+      <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" size="small" />
+      </a-form-item>
+      <!--        </a-col> -->
+      <!--        <a-col :span="8"> -->
+      <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
+        <a-input v-model:value="formState.dataSource.connection.user" size="small" />
+      </a-form-item>
+      <!--        </a-col> -->
+      <!--        <a-col :span="8"> -->
+      <a-form-item :label="$t('labels.password')">
+        <a-input-password v-model:value="formState.dataSource.connection.password" size="small" />
+      </a-form-item>
+      <!--        </a-col> -->
+      <!--        <a-col :span="8"> -->
+      <a-form-item :label="$t('labels.dbCreateIfNotExists')" v-bind="validateInfos['dataSource.connection.database']">
+        <a-input v-model:value="formState.dataSource.connection.database" size="small" />
+      </a-form-item>
+      <!--        </a-col> -->
+      <!--      </a-row> -->
       <!--
     <a-form-item label="InputNumber">
       <a-form-item name="input-number" no-style>

From b3c2a56cbc05aee7bca23ca23e00405031257442 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 19 Jul 2022 17:24:54 +0530
Subject: [PATCH 08/46] feat(gui-v2): add all inputs and buttons in project
 create page

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |   3 +
 .../pages/projects/index/create-external.vue  | 250 ++++++------------
 .../nc-gui-v2/pages/projects/index/create.vue |   9 +-
 .../nc-gui-v2/utils/projectCreateUtils.ts     |   8 +
 4 files changed, 107 insertions(+), 163 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 49b2967468..6aac211ad0 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -11,6 +11,8 @@ declare module '@vue/runtime-core' {
     ACard: typeof import('ant-design-vue/es')['Card']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACol: typeof import('ant-design-vue/es')['Col']
+    ACollapse: typeof import('ant-design-vue/es')['Collapse']
+    ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
@@ -31,6 +33,7 @@ declare module '@vue/runtime-core' {
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ATable: typeof import('ant-design-vue/es')['Table']
+    ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index 253a39ad0f..7550f9af14 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -12,6 +12,7 @@ import {
   getDefaultConnectionConfig,
   getTestDatabaseName,
   projectTitleValidator,
+  sslUsage,
 } from '~/utils/projectCreateUtils'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 
@@ -68,6 +69,10 @@ const testConnection = async () => {
           ...projectDatasource.value.connection,
           database: getTestDatabaseName(projectDatasource.value),
         },
+        inflection: {
+          tableName: 'camelize',
+          columnName: 'camelize',
+        },
       }
 
       const result = await $api.utils.testConnection(testConnectionConfig)
@@ -108,6 +113,8 @@ const onClientChange = () => {
   formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) }
 }
 
+const inflectionTypes = ['camelize', 'none']
+
 // populate database name based on title
 // watch(()=>formStat)
 </script>
@@ -161,79 +168,6 @@ const onClientChange = () => {
       <!--        </a-col> -->
       <!--      </a-row> -->
       <!--
-    <a-form-item label="InputNumber">
-      <a-form-item name="input-number" no-style>
-        <a-input-number v-model:value="formState['input-number']" />
-      </a-form-item>
-      <span class="ant-form-text">machines</span>
-    </a-form-item>
-
-    <a-form-item name="switch" label="Switch">
-      <a-switch v-model:checked="formState.switch" />
-    </a-form-item>
-
-    <a-form-item name="slider" label="Slider">
-      <a-slider
-        v-model:value="formState.slider"
-        :marks="{
-          0: 'A',
-          20: 'B',
-          40: 'C',
-          60: 'D',
-          80: 'E',
-          100: 'F',
-        }"
-      />
-    </a-form-item>
-
-    <a-form-item name="radio-group" label="Radio.Group">
-      <a-radio-group v-model:value="formState['radio-group']">
-        <a-radio value="a">item 1</a-radio>
-        <a-radio value="b">item 2</a-radio>
-        <a-radio value="c">item 3</a-radio>
-      </a-radio-group>
-    </a-form-item>
-
-    <a-form-item
-      name="radio-button"
-      label="Radio.Button"
-      :rules="[{ required: true, message: 'Please pick an item!' }]"
-    >
-      <a-radio-group v-model:value="formState['radio-button']">
-        <a-radio-button value="a">item 1</a-radio-button>
-        <a-radio-button value="b">item 2</a-radio-button>
-        <a-radio-button value="c">item 3</a-radio-button>
-      </a-radio-group>
-    </a-form-item>
-
-    <a-form-item name="checkbox-group" label="Checkbox.Group">
-      <a-checkbox-group v-model:value="formState['checkbox-group']">
-        <a-row>
-          <a-col :span="8">
-            <a-checkbox value="A" style="line-height: 32px">A</a-checkbox>
-          </a-col>
-          <a-col :span="8">
-            <a-checkbox value="B" style="line-height: 32px" disabled>B</a-checkbox>
-          </a-col>
-          <a-col :span="8">
-            <a-checkbox value="C" style="line-height: 32px">C</a-checkbox>
-          </a-col>
-          <a-col :span="8">
-            <a-checkbox value="D" style="line-height: 32px">D</a-checkbox>
-          </a-col>
-          <a-col :span="8">
-            <a-checkbox value="E" style="line-height: 32px">E</a-checkbox>
-          </a-col>
-          <a-col :span="8">
-            <a-checkbox value="F" style="line-height: 32px">F</a-checkbox>
-          </a-col>
-        </a-row>
-      </a-checkbox-group>
-    </a-form-item>
-
-    <a-form-item name="rate" label="Rate">
-      <a-rate v-model:value="formState.rate" allow-half />
-    </a-form-item>
 
     <a-form-item name="upload" label="Upload" extra="longgggggggggggggggggggggggggggggggggg">
       <a-upload
@@ -248,99 +182,91 @@ const onClientChange = () => {
         </a-button>
       </a-upload>
     </a-form-item>
+ -->
 
-    <a-form-item label="Dragger">
-      <a-form-item name="dragger" no-style>
-        <a-upload-dragger v-model:fileList="formState.dragger" name="files" action="/upload.do">
-          <p class="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
-          <p class="ant-upload-text">Click or drag file to this area to upload</p>
-          <p class="ant-upload-hint">Support for a single or bulk upload.</p>
-        </a-upload-dragger>
-      </a-form-item>
-    </a-form-item> -->
-
-      <a-form-item class="text-center">
-        <a-button type="primary" html-type="submit">Submit</a-button>
-      </a-form-item>
-    </a-form>
-  </a-card>
-
-  <!--  <v-form ref="formValidator" v-model="valid" class="h-full" @submit.prevent="createProject">
-      <v-container fluid class="flex justify-center items-center h-5/6">
-        <v-card max-width="600">
-          &lt;!&ndash; Create Project &ndash;&gt;
-          <v-container class="pb-10 px-12">
-            <h1 class="my-4 prose-lg text-center">
-              {{ $t('activity.createProject') }}
-            </h1>
+      <a-collapse ghost>
+        <a-collapse-panel key="1" header="Advance options">
+          <a-form-item :label="$t('lables.ssl')" v-bind="validateInfos['dataSource.ssl']">
+            <a-select v-model:value="formState.dataSource.ssl" size="small" @change="onClientChange">
+              <a-select-option v-for="opt in Object.keys(sslUsage)" :key="opt" :value="opt">{{ opt }} </a-select-option>
+            </a-select>
+          </a-form-item>
 
-            <v-row>
-              <v-col offset="2" cols="8">
-                <v-text-field
-                  v-model="name"
-                  :rules="titleValidationRule"
-                  class="nc-metadb-project-name"
-                  :label="$t('labels.projName')"
-                />
-              </v-col>
+          <a-form-item :label="$t('labels.dbCredentials')">
+            <!--            <a-input v-model:value="formState.dataSource.connection.database" size="small" /> -->
 
-              <v-col cols="6">
-                <v-select
-                  v-model="projectDatasource.client"
-                  density="compact"
-                  :items="clientTypes"
-                  item-title="text"
-                  item-value="value"
-                  class="nc-metadb-project-name"
-                  label="Database client"
-                />
-              </v-col>
-              <v-col cols="6">
-                <v-text-field v-model="projectDatasource.connection.host" density="compact" :label="$t('labels.hostAddress')" />
-              </v-col>
-              <v-col cols="6">
-                <v-text-field
-                  v-model="projectDatasource.connection.port"
-                  density="compact"
-                  :label="$t('labels.port')"
-                  type="number"
-                />
-              </v-col>
-              <v-col cols="6">
-                <v-text-field v-model="projectDatasource.connection.user" density="compact" :label="$t('labels.username')" />
-              </v-col>
-              <v-col cols="6">
-                <v-text-field
-                  v-model="projectDatasource.connection.password"
-                  density="compact"
-                  type="password"
-                  :label="$t('labels.password')"
-                />
-              </v-col>
-              <v-col cols="6">
-                <v-text-field v-model="projectDatasource.connection.database" density="compact" label="Database name" />
-              </v-col>
-            </v-row>
+            <div class="flex gap-2">
+              <a-tooltip placement="top">
+                <template #title>
+                  <span>{{ $t('tooltip.clientCert') }}</span>
+                </template>
+                <a-button size="small">
+                  {{ $t('labels.clientCert') }}
+                </a-button>
+              </a-tooltip>
+              <a-tooltip placement="top">
+                <template #title>
+                  <span>{{ $t('tooltip.clientKey') }}</span>
+                </template>
+                <a-button size="small">
+                  {{ $t('labels.clientKey') }}
+                </a-button>
+              </a-tooltip>
+              <a-tooltip placement="top">
+                <template #title>
+                  <span>{{ $t('tooltip.clientCA') }}</span>
+                </template>
+                <a-button size="small">
+                  {{ $t('labels.serverCA') }}
+                </a-button>
+              </a-tooltip>
+            </div>
+          </a-form-item>
 
-            <div class="d-flex justify-center" style="gap: 4px">
-              <v-btn :disabled="!testSuccess" large :loading="loading" color="primary" @click="createProject">
-                <MaterialSymbolsRocketLaunchOutline class="mr-1" />
-                <span> {{ $t('general.create') }} </span>
-              </v-btn>
+          <!-- <v-row> -->
+          <!--  <v-col> -->
+          <a-form-item :label="$t('labels.inflection.tableName')" v-bind="validateInfos['dataSource.client']">
+            <a-select v-model:value="formState.dataSource.client" size="small" @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>
+          <!--  </v-col> -->
+          <!--  <v-col> -->
+          <a-form-item :label="$t('labels.inflection.columnName')" v-bind="validateInfos['dataSource.client']">
+            <a-select v-model:value="formState.dataSource.client" size="small" @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>
+          <!--  </v-col> -->
+          <!-- </v-row> -->
+          <div class="flex justify-end">
+            <a-button size="small">
+              <!-- Edit connection JSON -->
+              {{ $t('activity.editConnJson') }}
+            </a-button>
+          </div>
+        </a-collapse-panel>
+      </a-collapse>
 
-              &lt;!&ndash;              <v-btn small class="px-2"> &ndash;&gt;
-              &lt;!&ndash;     todo:implement test connection &ndash;&gt;
-              &lt;!&ndash;         <v-btn size="sm" class="text-sm text-capitalize">
-                    &lt;!&ndash; Test Database Connection &ndash;&gt;
-                    {{ $t('activity.testDbConn') }}
-                  </v-btn> &ndash;&gt;
-            </div>
-          </v-container>
-        </v-card>
-      </v-container>
-    </v-form> -->
+      <a-form-item class="flex justify-center">
+        <div class="flex justify-center gap-2">
+          <a-button type="primary" html-type="submit">Submit</a-button>
+          <a-button type="primary" html-type="submit">Test Connection</a-button>
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-card>
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.ant-collapse-header) {
+  @apply !px-0;
+}
+:deep(.ant-collapse-content-box) {
+  @apply !pr-0;
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/projects/index/create.vue b/packages/nc-gui-v2/pages/projects/index/create.vue
index de8868fd4d..b6f313ecae 100644
--- a/packages/nc-gui-v2/pages/projects/index/create.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { onMounted } from '@vue/runtime-core'
 import { ref } from 'vue'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -36,6 +37,12 @@ const createProject = async () => {
   }
   loading.value = false
 }
+
+const input = ref()
+
+onMounted(() => {
+  input.value.input.focus()
+})
 </script>
 
 <template>
@@ -44,7 +51,7 @@ const createProject = async () => {
 
     <a-form :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="createProject">
       <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10">
-        <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
+        <a-input ref="input" v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>
 
       <a-form-item style="text-align: center" class="mt-2">
diff --git a/packages/nc-gui-v2/utils/projectCreateUtils.ts b/packages/nc-gui-v2/utils/projectCreateUtils.ts
index a10cce1623..005deaabcc 100644
--- a/packages/nc-gui-v2/utils/projectCreateUtils.ts
+++ b/packages/nc-gui-v2/utils/projectCreateUtils.ts
@@ -184,3 +184,11 @@ export const fieldRequiredValidator = {
   required: true,
   message: 'Field is required',
 }
+
+export const sslUsage = {
+  'No': 'No',
+  'Preferred': 'Preferred',
+  'Required': 'pg',
+  'Required-CA': 'Required-CA',
+  'Required-IDENTITY': 'Required-IDENTITY',
+}

From dd91f672d67a7425afbcfc046885b8b3af20718a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 19 Jul 2022 17:36:20 +0530
Subject: [PATCH 09/46] chore(gui-v2): add monaco package

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/nuxt.config.ts    |  2 ++
 packages/nc-gui-v2/package-lock.json | 31 ++++++++++++++++++++++++++++
 packages/nc-gui-v2/package.json      |  1 +
 3 files changed, 34 insertions(+)

diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index acd2f3b05d..2b4c589bd4 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -4,6 +4,7 @@ import vueI18n from '@intlify/vite-plugin-vue-i18n'
 import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
+import monacoEditorPlugin from 'vite-plugin-monaco-editor'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
@@ -70,6 +71,7 @@ export default defineNuxtConfig({
           }),
         ],
       }),
+      monacoEditorPlugin({}),
     ],
     define: {
       'process.env.DEBUG': 'false',
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 281a6a0d37..84aba4bc92 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -40,6 +40,7 @@
         "sass": "^1.53.0",
         "unplugin-icons": "^0.14.7",
         "unplugin-vue-components": "^0.21.1",
+        "vite-plugin-monaco-editor": "^1.1.0",
         "vitest": "^0.18.0",
         "windicss": "^3.5.6"
       }
@@ -9315,6 +9316,13 @@
       "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
       "dev": true
     },
+    "node_modules/monaco-editor": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
+      "integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -13397,6 +13405,15 @@
         "node": ">= 12"
       }
     },
+    "node_modules/vite-plugin-monaco-editor": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.1.0.tgz",
+      "integrity": "sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==",
+      "dev": true,
+      "peerDependencies": {
+        "monaco-editor": ">=0.33.0"
+      }
+    },
     "node_modules/vite-plugin-vuetify": {
       "version": "1.0.0-alpha.12",
       "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-1.0.0-alpha.12.tgz",
@@ -21072,6 +21089,13 @@
         }
       }
     },
+    "monaco-editor": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
+      "integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw==",
+      "dev": true,
+      "peer": true
+    },
     "mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -24096,6 +24120,13 @@
         }
       }
     },
+    "vite-plugin-monaco-editor": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.1.0.tgz",
+      "integrity": "sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==",
+      "dev": true,
+      "requires": {}
+    },
     "vite-plugin-vuetify": {
       "version": "1.0.0-alpha.12",
       "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-1.0.0-alpha.12.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 2bd72d2fe1..b1569bf160 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -46,6 +46,7 @@
     "sass": "^1.53.0",
     "unplugin-icons": "^0.14.7",
     "unplugin-vue-components": "^0.21.1",
+    "vite-plugin-monaco-editor": "^1.1.0",
     "vitest": "^0.18.0",
     "windicss": "^3.5.6"
   }

From 00622f799e96a2b2d9bf12fe38e283b4f7c79d90 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 19 Jul 2022 19:14:25 +0530
Subject: [PATCH 10/46] wip(gui-v2): add monaco editor for config edit

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/monaco/json.vue | 20 +++++++++
 packages/nc-gui-v2/lang/en.json               |  1 +
 .../pages/projects/index/create-external.vue  | 43 +++++++++----------
 .../nc-gui-v2/utils/projectCreateUtils.ts     |  2 +
 4 files changed, 43 insertions(+), 23 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/monaco/json.vue

diff --git a/packages/nc-gui-v2/components/monaco/json.vue b/packages/nc-gui-v2/components/monaco/json.vue
new file mode 100644
index 0000000000..b813065307
--- /dev/null
+++ b/packages/nc-gui-v2/components/monaco/json.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import * as monaco from 'monaco-editor'
+import { onMounted } from '#imports'
+
+const root = ref<HTMLDivElement>()
+
+onMounted(() => {
+  if (root.value)
+    monaco.editor.create(root?.value, {
+      value: 'console.log("Hello, world")',
+      language: 'json',
+    })
+})
+</script>
+
+<template>
+  <div ref="root"></div>
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/lang/en.json b/packages/nc-gui-v2/lang/en.json
index 363d371b3a..830768cf64 100644
--- a/packages/nc-gui-v2/lang/en.json
+++ b/packages/nc-gui-v2/lang/en.json
@@ -213,6 +213,7 @@
     "sqlOutput": "SQL Output",
     "addOption": "Add option",
     "aggregateFunction": "Aggregate function",
+    "database": "Database",
     "dbCreateIfNotExists": "Database : create if not exists",
     "clientKey": "Client Key",
     "clientCert": "Client Cert",
diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index 7550f9af14..a669ea132a 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -114,9 +114,13 @@ const onClientChange = () => {
 }
 
 const inflectionTypes = ['camelize', 'none']
+const configEditDlg = ref(false)
 
 // populate database name based on title
-// watch(()=>formStat)
+watch(
+  () => formState.title,
+  (v) => (formState.dataSource.connection.database = `${v}_noco`),
+)
 </script>
 
 <template>
@@ -162,33 +166,21 @@ const inflectionTypes = ['camelize', 'none']
       </a-form-item>
       <!--        </a-col> -->
       <!--        <a-col :span="8"> -->
-      <a-form-item :label="$t('labels.dbCreateIfNotExists')" v-bind="validateInfos['dataSource.connection.database']">
-        <a-input v-model:value="formState.dataSource.connection.database" size="small" />
+      <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
+        <a-input
+          v-model:value="formState.dataSource.connection.database"
+          :placeholder="$t('labels.dbCreateIfNotExists')"
+          size="small"
+        />
       </a-form-item>
       <!--        </a-col> -->
       <!--      </a-row> -->
-      <!--
 
-    <a-form-item name="upload" label="Upload" extra="longgggggggggggggggggggggggggggggggggg">
-      <a-upload
-        v-model:fileList="formState.upload"
-        name="logo"
-        action="/upload.do"
-        list-type="picture"
-      >
-        <a-button>
-          <template #icon><UploadOutlined /></template>
-          Click to upload
-        </a-button>
-      </a-upload>
-    </a-form-item>
- -->
-
-      <a-collapse ghost>
+      <a-collapse ghost expand-icon-position="right">
         <a-collapse-panel key="1" header="Advance options">
           <a-form-item :label="$t('lables.ssl')" v-bind="validateInfos['dataSource.ssl']">
             <a-select v-model:value="formState.dataSource.ssl" size="small" @change="onClientChange">
-              <a-select-option v-for="opt in Object.keys(sslUsage)" :key="opt" :value="opt">{{ opt }} </a-select-option>
+              <a-select-option v-for="opt in Object.keys(sslUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option>
             </a-select>
           </a-form-item>
 
@@ -244,7 +236,7 @@ const inflectionTypes = ['camelize', 'none']
           <!--  </v-col> -->
           <!-- </v-row> -->
           <div class="flex justify-end">
-            <a-button size="small">
+            <a-button size="small" @click="configEditDlg = true">
               <!-- Edit connection JSON -->
               {{ $t('activity.editConnJson') }}
             </a-button>
@@ -259,13 +251,18 @@ const inflectionTypes = ['camelize', 'none']
         </div>
       </a-form-item>
     </a-form>
+
+    <v-dialog v-model="configEditDlg">
+      <MonacoJson v-if="configEditDlg" class="h-[320px] w-[600px]"></MonacoJson>
+    </v-dialog>
   </a-card>
 </template>
 
 <style scoped>
 :deep(.ant-collapse-header) {
-  @apply !px-0;
+  @apply !pr-10 !-mt-4 text-right;
 }
+
 :deep(.ant-collapse-content-box) {
   @apply !pr-0;
 }
diff --git a/packages/nc-gui-v2/utils/projectCreateUtils.ts b/packages/nc-gui-v2/utils/projectCreateUtils.ts
index 005deaabcc..a1b597d984 100644
--- a/packages/nc-gui-v2/utils/projectCreateUtils.ts
+++ b/packages/nc-gui-v2/utils/projectCreateUtils.ts
@@ -41,6 +41,7 @@ const sampleConnectionData = {
     user: 'postgres',
     password: 'password',
     database: '_test',
+    searchPath: ['public'],
     // ssl: {
     //   ca: '',
     //   key: '',
@@ -137,6 +138,7 @@ const sampleConnectionData = {
     user: 'sa',
     password: 'Password123.',
     database: '_test',
+    searchPath: ['dbo'],
     // ssl: {
     //   ca: '',
     //   key: '',

From 7ebdd6b840020925853107d179ac85c855c096a3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 19 Jul 2022 22:04:17 +0530
Subject: [PATCH 11/46] refactor(gui-v2): code cleanup

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/projects/index/create-external.vue  | 31 ++-----------------
 1 file changed, 2 insertions(+), 29 deletions(-)

diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index a669ea132a..e579930582 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -126,17 +126,10 @@ watch(
 <template>
   <a-card class="max-w-[600px] mx-auto !mt-100px" :title="$t('activity.createProject')">
     <a-form :model="formState" name="validate_other" layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 18 }">
-      <!--      <a-row :gutter="24"> -->
-      <!--        <a-col span="24"> -->
-      <!-- Enter Project Name -->
+
       <a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title">
         <a-input v-model:value="formState.title" size="small" />
       </a-form-item>
-      <!--        </a-col> -->
-      <!--        <a-col :span="24" class="text-center text-md font-medium mb-3 mt-1"> -->
-      <!--          {{ $t('title.dbCredentials') }} -->
-      <!--        </a-col> -->
-      <!--        <a-col :span="8"> -->
       <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
         <a-select v-model:value="formState.dataSource.client" size="small" @change="onClientChange">
           <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
@@ -144,28 +137,18 @@ watch(
           </a-select-option>
         </a-select>
       </a-form-item>
-      <!--        </a-col> -->
-      <!--        <a-col :span="8"> -->
       <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
         <a-input v-model:value="formState.dataSource.connection.host" size="small" />
       </a-form-item>
-      <!--        </a-col> -->
-      <!--        <a-col :span="8"> -->
       <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" size="small" />
       </a-form-item>
-      <!--        </a-col> -->
-      <!--        <a-col :span="8"> -->
       <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
         <a-input v-model:value="formState.dataSource.connection.user" size="small" />
       </a-form-item>
-      <!--        </a-col> -->
-      <!--        <a-col :span="8"> -->
       <a-form-item :label="$t('labels.password')">
         <a-input-password v-model:value="formState.dataSource.connection.password" size="small" />
       </a-form-item>
-      <!--        </a-col> -->
-      <!--        <a-col :span="8"> -->
       <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
         <a-input
           v-model:value="formState.dataSource.connection.database"
@@ -173,9 +156,6 @@ watch(
           size="small"
         />
       </a-form-item>
-      <!--        </a-col> -->
-      <!--      </a-row> -->
-
       <a-collapse ghost expand-icon-position="right">
         <a-collapse-panel key="1" header="Advance options">
           <a-form-item :label="$t('lables.ssl')" v-bind="validateInfos['dataSource.ssl']">
@@ -185,8 +165,6 @@ watch(
           </a-form-item>
 
           <a-form-item :label="$t('labels.dbCredentials')">
-            <!--            <a-input v-model:value="formState.dataSource.connection.database" size="small" /> -->
-
             <div class="flex gap-2">
               <a-tooltip placement="top">
                 <template #title>
@@ -215,8 +193,7 @@ watch(
             </div>
           </a-form-item>
 
-          <!-- <v-row> -->
-          <!--  <v-col> -->
+
           <a-form-item :label="$t('labels.inflection.tableName')" v-bind="validateInfos['dataSource.client']">
             <a-select v-model:value="formState.dataSource.client" size="small" @change="onClientChange">
               <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
@@ -224,8 +201,6 @@ watch(
               </a-select-option>
             </a-select>
           </a-form-item>
-          <!--  </v-col> -->
-          <!--  <v-col> -->
           <a-form-item :label="$t('labels.inflection.columnName')" v-bind="validateInfos['dataSource.client']">
             <a-select v-model:value="formState.dataSource.client" size="small" @change="onClientChange">
               <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
@@ -233,8 +208,6 @@ watch(
               </a-select-option>
             </a-select>
           </a-form-item>
-          <!--  </v-col> -->
-          <!-- </v-row> -->
           <div class="flex justify-end">
             <a-button size="small" @click="configEditDlg = true">
               <!-- Edit connection JSON -->

From 313f77eefe9c75541cd9c8f30987a47ddff6ad1d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 19 Jul 2022 23:33:41 +0530
Subject: [PATCH 12/46] feat(gui-v2): add ssl file select option, show monaco
 editor for config edit

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/monaco/index.vue     |  40 ++++
 packages/nc-gui-v2/components/monaco/json.vue |  20 --
 .../pages/projects/index/create-external.vue  | 215 +++++++++++-------
 packages/nc-gui-v2/utils/fileUtils.ts         |  42 ++++
 .../nc-gui-v2/utils/projectCreateUtils.ts     | 110 +++++----
 5 files changed, 263 insertions(+), 164 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/monaco/index.vue
 delete mode 100644 packages/nc-gui-v2/components/monaco/json.vue

diff --git a/packages/nc-gui-v2/components/monaco/index.vue b/packages/nc-gui-v2/components/monaco/index.vue
new file mode 100644
index 0000000000..3fc97e7325
--- /dev/null
+++ b/packages/nc-gui-v2/components/monaco/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import * as monaco from 'monaco-editor'
+import { onMounted } from '#imports'
+
+const { modelValue } = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue'])
+
+const root = ref<HTMLDivElement>()
+const editor = ref<monaco.editor.IStandaloneCodeEditor>()
+
+onMounted(() => {
+  if (root.value) {
+    editor.value = monaco.editor.create(root?.value, {
+      value: JSON.stringify(modelValue, null, 2),
+      language: 'json',
+    })
+
+    editor.value.onDidChangeModelContent((e) => {
+      try {
+        emit('update:modelValue', JSON.parse(editor?.value?.getValue() as string))
+      } catch {}
+    })
+  }
+})
+
+watch(
+  () => modelValue && JSON.stringify(modelValue, null, 2),
+  (v) => {
+    if (editor?.value && v) {
+      editor.value.setValue(v)
+    }
+  },
+)
+</script>
+
+<template>
+  <div ref="root"></div>
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/monaco/json.vue b/packages/nc-gui-v2/components/monaco/json.vue
deleted file mode 100644
index b813065307..0000000000
--- a/packages/nc-gui-v2/components/monaco/json.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import * as monaco from 'monaco-editor'
-import { onMounted } from '#imports'
-
-const root = ref<HTMLDivElement>()
-
-onMounted(() => {
-  if (root.value)
-    monaco.editor.create(root?.value, {
-      value: 'console.log("Hello, world")',
-      language: 'json',
-    })
-})
-</script>
-
-<template>
-  <div ref="root"></div>
-</template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index e579930582..31ffe7e0b8 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -3,7 +3,6 @@ import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useToast } from 'vue-toastification'
 import { Form } from 'ant-design-vue'
-import form from '../../../../nc-gui/components/project/spreadsheet/mixins/form'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import {
@@ -14,7 +13,8 @@ import {
   projectTitleValidator,
   sslUsage,
 } from '~/utils/projectCreateUtils'
-import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
+
+import { readFile } from '~/utils/fileUtils'
 
 const useForm = Form.useForm
 const name = ref('')
@@ -69,10 +69,6 @@ const testConnection = async () => {
           ...projectDatasource.value.connection,
           database: getTestDatabaseName(projectDatasource.value),
         },
-        inflection: {
-          tableName: 'camelize',
-          columnName: 'camelize',
-        },
       }
 
       const result = await $api.utils.testConnection(testConnectionConfig)
@@ -90,7 +86,13 @@ const testConnection = async () => {
   }
 }
 
-const formState = reactive<Record<string, any>>({ dataSource: { ...getDefaultConnectionConfig('mysql2') } })
+const formState = reactive<Record<string, any>>({
+  dataSource: { ...getDefaultConnectionConfig('mysql2') },
+  inflection: {
+    tableName: 'camelize',
+    columnName: 'camelize',
+  },
+})
 
 const validators = reactive({
   'title': [
@@ -121,12 +123,21 @@ watch(
   () => formState.title,
   (v) => (formState.dataSource.connection.database = `${v}_noco`),
 )
+
+const caFileInput = ref<HTMLInputElement>()
+const keyFileInput = ref<HTMLInputElement>()
+const certFileInput = ref<HTMLInputElement>()
+
+const onFileSelect = (key: 'ca' | 'cert' | 'key', el: HTMLInputElement) => {
+  readFile(el, (content) => {
+    formState.dataSource.connection.ssl[key] = content ?? ''
+  })
+}
 </script>
 
 <template>
   <a-card class="max-w-[600px] mx-auto !mt-100px" :title="$t('activity.createProject')">
     <a-form :model="formState" name="validate_other" layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 18 }">
-
       <a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title">
         <a-input v-model:value="formState.title" size="small" />
       </a-form-item>
@@ -137,85 +148,115 @@ watch(
           </a-select-option>
         </a-select>
       </a-form-item>
-      <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
-        <a-input v-model:value="formState.dataSource.connection.host" size="small" />
-      </a-form-item>
-      <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" size="small" />
-      </a-form-item>
-      <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
-        <a-input v-model:value="formState.dataSource.connection.user" size="small" />
-      </a-form-item>
-      <a-form-item :label="$t('labels.password')">
-        <a-input-password v-model:value="formState.dataSource.connection.password" size="small" />
-      </a-form-item>
-      <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
-        <a-input
-          v-model:value="formState.dataSource.connection.database"
-          :placeholder="$t('labels.dbCreateIfNotExists')"
-          size="small"
-        />
+
+      <!-- SQLite File -->
+      <a-form-item
+        v-if="formState.dataSource.client === 'sqlite3'"
+        :label="$t('labels.sqliteFile')"
+        v-bind="validateInfos['dataSource.connection.host']"
+      >
+        <a-input v-model:value="formState.dataSource.connection.connection.filename" size="small" />
       </a-form-item>
-      <a-collapse ghost expand-icon-position="right">
-        <a-collapse-panel key="1" header="Advance options">
-          <a-form-item :label="$t('lables.ssl')" v-bind="validateInfos['dataSource.ssl']">
-            <a-select v-model:value="formState.dataSource.ssl" size="small" @change="onClientChange">
-              <a-select-option v-for="opt in Object.keys(sslUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option>
-            </a-select>
-          </a-form-item>
-
-          <a-form-item :label="$t('labels.dbCredentials')">
-            <div class="flex gap-2">
-              <a-tooltip placement="top">
-                <template #title>
-                  <span>{{ $t('tooltip.clientCert') }}</span>
-                </template>
-                <a-button size="small">
-                  {{ $t('labels.clientCert') }}
-                </a-button>
-              </a-tooltip>
-              <a-tooltip placement="top">
-                <template #title>
-                  <span>{{ $t('tooltip.clientKey') }}</span>
-                </template>
-                <a-button size="small">
-                  {{ $t('labels.clientKey') }}
-                </a-button>
-              </a-tooltip>
-              <a-tooltip placement="top">
-                <template #title>
-                  <span>{{ $t('tooltip.clientCA') }}</span>
-                </template>
-                <a-button size="small">
-                  {{ $t('labels.serverCA') }}
-                </a-button>
-              </a-tooltip>
+
+      <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" size="small" />
+        </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" size="small" />
+        </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" size="small" />
+        </a-form-item>
+
+        <!-- Password -->
+        <a-form-item :label="$t('labels.password')">
+          <a-input-password v-model:value="formState.dataSource.connection.password" size="small" />
+        </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')"
+            size="small"
+          />
+        </a-form-item>
+        <!-- Schema name -->
+        <a-form-item v-if="['mssql', 'pg'].includes(formState.dataSource.client)" :label="$t('labels.schemaName')">
+          <a-input v-model:value="formState.dataSource.connection.searchPath[0]" size="small" />
+        </a-form-item>
+
+        <a-collapse ghost expand-icon-position="right">
+          <a-collapse-panel key="1" :header="$t('title.advancedParameters')">
+            <!--            todo:  add in i18n -->
+            <a-form-item label="SSL Mode" v-bind="validateInfos['dataSource.ssl']">
+              <a-select v-model:value="formState.dataSource.sslUse" size="small" @change="onClientChange">
+                <a-select-option v-for="opt in sslUsage" :key="opt" :value="opt">{{ opt }}</a-select-option>
+              </a-select>
+            </a-form-item>
+
+            <a-form-item :label="$t('labels.dbCredentials')">
+              <div class="flex gap-2">
+                <a-tooltip placement="top">
+                  <!-- Select .cert file -->
+                  <template #title>
+                    <span>{{ $t('tooltip.clientCert') }}</span>
+                  </template>
+                  <a-button size="small" @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 size="small" @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 size="small" @click="caFileInput.click()">
+                    {{ $t('labels.serverCA') }}
+                  </a-button>
+                </a-tooltip>
+              </div>
+            </a-form-item>
+
+            <input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect('ca', caFileInput)" />
+            <input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect('cert', certFileInput)" />
+            <input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect('key', keyFileInput)" />
+
+            <a-form-item :label="$t('labels.inflection.tableName')" v-bind="validateInfos['dataSource.client']">
+              <a-select v-model:value="formState.inflection.tableName" size="small" @change="onClientChange">
+                <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')" v-bind="validateInfos['dataSource.type']">
+              <a-select v-model:value="formState.inflection.columnName" size="small" @change="onClientChange">
+                <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 size="small" @click="configEditDlg = true">
+                <!-- Edit connection JSON -->
+                {{ $t('activity.editConnJson') }}
+              </a-button>
             </div>
-          </a-form-item>
-
-
-          <a-form-item :label="$t('labels.inflection.tableName')" v-bind="validateInfos['dataSource.client']">
-            <a-select v-model:value="formState.dataSource.client" size="small" @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>
-          <a-form-item :label="$t('labels.inflection.columnName')" v-bind="validateInfos['dataSource.client']">
-            <a-select v-model:value="formState.dataSource.client" size="small" @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>
-          <div class="flex justify-end">
-            <a-button size="small" @click="configEditDlg = true">
-              <!-- Edit connection JSON -->
-              {{ $t('activity.editConnJson') }}
-            </a-button>
-          </div>
-        </a-collapse-panel>
-      </a-collapse>
+          </a-collapse-panel>
+        </a-collapse>
+      </template>
 
       <a-form-item class="flex justify-center">
         <div class="flex justify-center gap-2">
@@ -226,8 +267,10 @@ watch(
     </a-form>
 
     <v-dialog v-model="configEditDlg">
-      <MonacoJson v-if="configEditDlg" class="h-[320px] w-[600px]"></MonacoJson>
+      <Monaco v-if="configEditDlg" v-model="formState" class="h-[320px] w-[600px]"></Monaco>
     </v-dialog>
+
+    {{ formState }}
   </a-card>
 </template>
 
diff --git a/packages/nc-gui-v2/utils/fileUtils.ts b/packages/nc-gui-v2/utils/fileUtils.ts
index c18edc0c68..7bc2de0d2d 100644
--- a/packages/nc-gui-v2/utils/fileUtils.ts
+++ b/packages/nc-gui-v2/utils/fileUtils.ts
@@ -5,3 +5,45 @@ const isImage = (name: string, mimetype?: string) => {
 }
 
 export { isImage, imageExt }
+// Ref : https://stackoverflow.com/a/12002275
+
+// Tested in Mozilla Firefox browser, Chrome
+export function readFile(FileElement: HTMLInputElement, CallBackFunction: (content?: any) => void) {
+  try {
+    if (!FileElement.files || !FileElement.files.length) {
+      return CallBackFunction()
+    }
+
+    const file = FileElement.files[0]
+
+    if (file) {
+      const reader = new FileReader()
+      reader.readAsText(file, 'UTF-8')
+      reader.onload = function (evt) {
+        CallBackFunction(evt.target?.result)
+      }
+      reader.onerror = function () {
+        CallBackFunction()
+      }
+    }
+  } catch (Exception) {
+    const fallBack = ieReadFile(FileElement.value)
+    // eslint-disable-next-line eqeqeq
+    if (fallBack != false) {
+      CallBackFunction(fallBack)
+    }
+  }
+}
+
+/// Reading files with Internet Explorer
+function ieReadFile(filename: string) {
+  try {
+    const fso = new ActiveXObject('Scripting.FileSystemObject')
+    const fh = fso.OpenTextFile(filename, 1)
+    const contents = fh.ReadAll()
+    fh.Close()
+    return contents
+  } catch (Exception) {
+    return false
+  }
+}
diff --git a/packages/nc-gui-v2/utils/projectCreateUtils.ts b/packages/nc-gui-v2/utils/projectCreateUtils.ts
index a1b597d984..8e6514e931 100644
--- a/packages/nc-gui-v2/utils/projectCreateUtils.ts
+++ b/packages/nc-gui-v2/utils/projectCreateUtils.ts
@@ -29,7 +29,7 @@ export const clientTypes = [
   },
   {
     text: 'SQLite',
-    value: 'sqlite',
+    value: 'sqlite3',
   },
 ]
 
@@ -42,11 +42,11 @@ const sampleConnectionData = {
     password: 'password',
     database: '_test',
     searchPath: ['public'],
-    // ssl: {
-    //   ca: '',
-    //   key: '',
-    //   cert: '',
-    // },
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
   },
   mysql2: {
     host: 'localhost',
@@ -54,11 +54,11 @@ const sampleConnectionData = {
     user: 'root',
     password: 'password',
     database: '_test',
-    // ssl: {
-    //   ca: '',
-    //   key: '',
-    //   cert: '',
-    // },
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
   },
   vitess: {
     host: 'localhost',
@@ -66,11 +66,11 @@ const sampleConnectionData = {
     user: 'root',
     password: 'password',
     database: '_test',
-    // ssl: {
-    //   ca: '',
-    //   key: '',
-    //   cert: '',
-    // },
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
   },
   tidb: {
     host: 'localhost',
@@ -78,11 +78,11 @@ const sampleConnectionData = {
     user: 'root',
     password: '',
     database: '_test',
-    // ssl: {
-    //   ca: '',
-    //   key: '',
-    //   cert: '',
-    // },
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
   },
   yugabyte: {
     host: 'localhost',
@@ -90,11 +90,11 @@ const sampleConnectionData = {
     user: 'postgres',
     password: '',
     database: '_test',
-    // ssl: {
-    //   ca: '',
-    //   key: '',
-    //   cert: '',
-    // },
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
   },
   citusdb: {
     host: 'localhost',
@@ -102,11 +102,11 @@ const sampleConnectionData = {
     user: 'postgres',
     password: '',
     database: '_test',
-    // ssl: {
-    //   ca: '',
-    //   key: '',
-    //   cert: '',
-    // },
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
   },
   cockroachdb: {
     host: 'localhost',
@@ -114,11 +114,11 @@ const sampleConnectionData = {
     user: 'postgres',
     password: '',
     database: '_test',
-    // ssl: {
-    //   ca: '',
-    //   key: '',
-    //   cert: '',
-    // },
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
   },
   greenplum: {
     host: 'localhost',
@@ -126,11 +126,11 @@ const sampleConnectionData = {
     user: 'postgres',
     password: '',
     database: '_test',
-    // ssl: {
-    //   ca: '',
-    //   key: '',
-    //   cert: '',
-    // },
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
   },
   mssql: {
     host: 'localhost',
@@ -139,11 +139,11 @@ const sampleConnectionData = {
     password: 'Password123.',
     database: '_test',
     searchPath: ['dbo'],
-    // ssl: {
-    //   ca: '',
-    //   key: '',
-    //   cert: '',
-    // },
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
   },
   oracledb: {
     host: 'localhost',
@@ -151,11 +151,11 @@ const sampleConnectionData = {
     user: 'system',
     password: 'Oracle18',
     database: '_test',
-    // ssl: {
-    //   ca: '',
-    //   key: '',
-    //   cert: '',
-    // },
+    ssl: {
+      ca: '',
+      key: '',
+      cert: '',
+    },
   },
   sqlite3: {
     client: 'sqlite3',
@@ -187,10 +187,4 @@ export const fieldRequiredValidator = {
   message: 'Field is required',
 }
 
-export const sslUsage = {
-  'No': 'No',
-  'Preferred': 'Preferred',
-  'Required': 'pg',
-  'Required-CA': 'Required-CA',
-  'Required-IDENTITY': 'Required-IDENTITY',
-}
+export const sslUsage = ['No', 'Preferred', 'Required', 'Required-CA', 'Required-IDENTITY']

From f93ca9df18be6b2b0a868ad3972d35bfb76c9dfb Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 01:25:32 +0530
Subject: [PATCH 13/46] feat(gui-v2): test connection, project create
 integration

- show dialog after test connection
- use certificate values

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/monaco/index.vue     |  42 +++--
 packages/nc-gui-v2/lib/types.ts               |  31 ++++
 .../pages/projects/index/create-external.vue  | 172 ++++++++++--------
 packages/nc-gui-v2/utils/deepCompare.ts       |  13 ++
 .../nc-gui-v2/utils/projectCreateUtils.ts     |   8 +-
 5 files changed, 172 insertions(+), 94 deletions(-)
 create mode 100644 packages/nc-gui-v2/utils/deepCompare.ts

diff --git a/packages/nc-gui-v2/components/monaco/index.vue b/packages/nc-gui-v2/components/monaco/index.vue
index 3fc97e7325..256c4b5bdb 100644
--- a/packages/nc-gui-v2/components/monaco/index.vue
+++ b/packages/nc-gui-v2/components/monaco/index.vue
@@ -6,31 +6,43 @@ const { modelValue } = defineProps<{ modelValue: any }>()
 const emit = defineEmits(['update:modelValue'])
 
 const root = ref<HTMLDivElement>()
-const editor = ref<monaco.editor.IStandaloneCodeEditor>()
+let editor = $ref<monaco.editor.IStandaloneCodeEditor>()
 
 onMounted(() => {
   if (root.value) {
-    editor.value = monaco.editor.create(root?.value, {
-      value: JSON.stringify(modelValue, null, 2),
-      language: 'json',
+    const model = monaco.editor.createModel(JSON.stringify(modelValue, null, 2), 'json')
+
+    // configure the JSON language support with schemas and schema associations
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+    })
+
+    editor = monaco.editor.create(root.value, {
+      model,
+      theme: 'dark',
     })
 
-    editor.value.onDidChangeModelContent((e) => {
+    editor.onDidChangeModelContent(async (e) => {
       try {
-        emit('update:modelValue', JSON.parse(editor?.value?.getValue() as string))
-      } catch {}
+        // console.log(e)
+        // const obj = JSON.parse(editor.value.getValue())
+        // if (!deepCompare(modelValue, obj)) emit('update:modelValue', obj)
+      } catch (e) {
+        console.log(e)
+      }
     })
   }
 })
 
-watch(
-  () => modelValue && JSON.stringify(modelValue, null, 2),
-  (v) => {
-    if (editor?.value && v) {
-      editor.value.setValue(v)
-    }
-  },
-)
+// watch(
+//   () => modelValue,
+//   (v) => {
+//     if (editor?.value && v && !deepCompare(v, JSON.parse(editor?.value?.getValue() as string))) {
+//       debugger
+//       editor.value.setValue(JSON.stringify(v, null, 2))
+//     }
+//   },
+// )
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/lib/types.ts b/packages/nc-gui-v2/lib/types.ts
index e9b38a4351..bfaabf0c17 100644
--- a/packages/nc-gui-v2/lib/types.ts
+++ b/packages/nc-gui-v2/lib/types.ts
@@ -32,3 +32,34 @@ export interface Actions {
 export type ReadonlyState = Readonly<Pick<State, 'token' | 'user'>> & Omit<State, 'token' | 'user'>
 
 export type GlobalState = Getters & Actions & ToRefs<ReadonlyState>
+
+export type ClientType = 'mysql2' | 'mssql' | 'pg' | 'sqlite3' | '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: {
+    inflection_column?: string
+    inflection_table?: string
+  }
+}
diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index 31ffe7e0b8..d996e57222 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -2,8 +2,9 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useToast } from 'vue-toastification'
-import { Form } from 'ant-design-vue'
+import { Form, Modal } from 'ant-design-vue'
 import { navigateTo, useNuxtApp } from '#app'
+import type { ProjectCreateForm } from '~/lib/types'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import {
   clientTypes,
@@ -13,84 +14,28 @@ import {
   projectTitleValidator,
   sslUsage,
 } from '~/utils/projectCreateUtils'
+import MdiCheckIcon from '~icons/mdi/check-circle'
 
 import { readFile } from '~/utils/fileUtils'
 
+const onVal = (v) => {
+  console.log(v)
+}
 const useForm = Form.useForm
-const name = ref('')
 const loading = ref(false)
 const valid = ref(false)
 const testSuccess = ref(true)
-const projectDatasource = ref()
-const inflection = reactive({
-  tableName: 'camelize',
-  columnName: 'camelize',
-})
 
 const { $api, $e } = useNuxtApp()
 const toast = useToast()
 const { t } = useI18n()
 
-const createProject = async () => {
-  loading.value = true
-  try {
-    const result = await $api.project.create({
-      title: name.value,
-      bases: [
-        {
-          type: projectDatasource.value.client,
-          config: projectDatasource.value,
-          inflection_column: inflection.columnName,
-          inflection_table: inflection.tableName,
-        },
-      ],
-      external: true,
-    })
-
-    await navigateTo(`/nc/${result.id}`)
-  } catch (e: any) {
-    // todo: toast
-    toast.error(await extractSdkResponseErrorMsg(e))
-  }
-  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: any) {
-    testSuccess.value = false
-    toast.error(await extractSdkResponseErrorMsg(e))
-  }
-}
-
-const formState = reactive<Record<string, any>>({
+const formState = reactive<ProjectCreateForm>({
+  title: '',
   dataSource: { ...getDefaultConnectionConfig('mysql2') },
   inflection: {
-    tableName: 'camelize',
-    columnName: 'camelize',
+    inflection_column: 'camelize',
+    inflection_table: 'camelize',
   },
 })
 
@@ -130,9 +75,88 @@ const certFileInput = ref<HTMLInputElement>()
 
 const onFileSelect = (key: 'ca' | 'cert' | 'key', el: HTMLInputElement) => {
   readFile(el, (content) => {
-    formState.dataSource.connection.ssl[key] = content ?? ''
+    if ('ssl' in formState.dataSource.connection && formState.dataSource.connection.ssl)
+      formState.dataSource.connection.ssl[key] = content ?? ''
   })
 }
+
+function getConnectionConfig() {
+  const connection = {
+    ...formState.dataSource.connection,
+  }
+
+  if ('ssl' in connection && connection.ssl && Object.values(connection.ssl).every((v) => !v)) {
+    delete connection.ssl
+  }
+  return connection
+}
+
+const createProject = async () => {
+  loading.value = true
+  try {
+    const connection = getConnectionConfig()
+    const config = { ...formState.dataSource, connection }
+    const result = await $api.project.create({
+      title: formState.title,
+      bases: [
+        {
+          type: formState.dataSource.client,
+          config,
+          inflection_column: formState.inflection.inflection_column,
+          inflection_table: formState.inflection.inflection_table,
+        },
+      ],
+      external: true,
+    })
+
+    await navigateTo(`/nc/${result.id}`)
+  } catch (e: any) {
+    // todo: toast
+    toast.error(await extractSdkResponseErrorMsg(e))
+  }
+  loading.value = false
+}
+
+const testConnection = async () => {
+  $e('a:project:create:extdb:test-connection', [])
+  try {
+    // this.handleSSL(projectDatasource)
+
+    if (formState.dataSource.client === 'sqlite3') {
+      testSuccess.value = true
+    } else {
+      const connection: any = getConnectionConfig()
+      connection.database = getTestDatabaseName(formState.dataSource)
+      const testConnectionConfig = {
+        ...formState.dataSource,
+        connection,
+      }
+
+      const result = await $api.utils.testConnection(testConnectionConfig)
+
+      if (result.code === 0) {
+        testSuccess.value = true
+
+        Modal.confirm({
+          title: t('msg.info.dbConnected'),
+          icon: null,
+          type: 'success',
+
+          okText: t('activity.OkSaveProject'),
+          okType: 'primary',
+          cancelText: 'Cancel',
+          onOk: createProject,
+        })
+      } else {
+        testSuccess.value = false
+        toast.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`)
+      }
+    }
+  } catch (e: any) {
+    testSuccess.value = false
+    toast.error(await extractSdkResponseErrorMsg(e))
+  }
+}
 </script>
 
 <template>
@@ -238,13 +262,13 @@ const onFileSelect = (key: 'ca' | 'cert' | 'key', el: HTMLInputElement) => {
             <input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect('cert', certFileInput)" />
             <input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect('key', keyFileInput)" />
 
-            <a-form-item :label="$t('labels.inflection.tableName')" v-bind="validateInfos['dataSource.client']">
-              <a-select v-model:value="formState.inflection.tableName" size="small" @change="onClientChange">
+            <a-form-item :label="$t('labels.inflection.inflection_column')" v-bind="validateInfos['dataSource.client']">
+              <a-select v-model:value="formState.inflection.inflection_table" size="small" @change="onClientChange">
                 <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')" v-bind="validateInfos['dataSource.type']">
-              <a-select v-model:value="formState.inflection.columnName" size="small" @change="onClientChange">
+            <a-form-item :label="$t('labels.inflection.inflection_column')" v-bind="validateInfos['dataSource.type']">
+              <a-select v-model:value="formState.inflection.inflection_column" size="small" @change="onClientChange">
                 <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
               </a-select>
             </a-form-item>
@@ -260,17 +284,15 @@ const onFileSelect = (key: 'ca' | 'cert' | 'key', el: HTMLInputElement) => {
 
       <a-form-item class="flex justify-center">
         <div class="flex justify-center gap-2">
-          <a-button type="primary" html-type="submit">Submit</a-button>
-          <a-button type="primary" html-type="submit">Test Connection</a-button>
+          <a-button type="primary" @click="createProject">Submit</a-button>
+          <a-button type="primary" @click="testConnection">Test Connection</a-button>
         </div>
       </a-form-item>
     </a-form>
 
     <v-dialog v-model="configEditDlg">
-      <Monaco v-if="configEditDlg" v-model="formState" class="h-[320px] w-[600px]"></Monaco>
+      <Monaco v-if="configEditDlg" :model-value="formState" class="h-[320px] w-[600px]" @update:modelValue="onVal"></Monaco>
     </v-dialog>
-
-    {{ formState }}
   </a-card>
 </template>
 
diff --git a/packages/nc-gui-v2/utils/deepCompare.ts b/packages/nc-gui-v2/utils/deepCompare.ts
new file mode 100644
index 0000000000..d06c1afcce
--- /dev/null
+++ b/packages/nc-gui-v2/utils/deepCompare.ts
@@ -0,0 +1,13 @@
+export const deepCompare = (a: any, b: any) => {
+  if (a === b) return true
+  if (a == null || b === null) return false
+  if (typeof a !== typeof b) return false
+  if (typeof a !== 'object') return a === b
+  if (Object.keys(a).length !== Object.keys(b).length) return false
+
+  for (const k in a) {
+    if (!(k in b)) return false
+    if (!deepCompare(a[k], b[k])) return false
+  }
+  return true
+}
diff --git a/packages/nc-gui-v2/utils/projectCreateUtils.ts b/packages/nc-gui-v2/utils/projectCreateUtils.ts
index 8e6514e931..a9a5817197 100644
--- a/packages/nc-gui-v2/utils/projectCreateUtils.ts
+++ b/packages/nc-gui-v2/utils/projectCreateUtils.ts
@@ -1,3 +1,5 @@
+import type { ClientType, ProjectCreateForm } from '~/lib/types'
+
 const testDataBaseNames = {
   mysql2: null,
   mysql: null,
@@ -7,8 +9,6 @@ const testDataBaseNames = {
   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 as keyof typeof testDataBaseNames]
@@ -34,7 +34,7 @@ export const clientTypes = [
 ]
 
 const homeDir = ''
-const sampleConnectionData = {
+const sampleConnectionData: Record<ClientType | string, ProjectCreateForm['dataSource']['connection']> = {
   pg: {
     host: 'localhost',
     port: '5432',
@@ -167,7 +167,7 @@ const sampleConnectionData = {
   },
 }
 
-export const getDefaultConnectionConfig = (client: ClientType): { client: ClientType; connection: any } => {
+export const getDefaultConnectionConfig = (client: ClientType): ProjectCreateForm['dataSource'] => {
   return {
     client,
     connection: sampleConnectionData[client],

From 060ad724fb7700dae8963cffd6abe74fb40cd994 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 12:04:48 +0530
Subject: [PATCH 14/46] feat(gui-v2): validation and label correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/lib/types.ts               |  1 +
 .../pages/projects/index/create-external.vue  | 88 ++++++++++++-------
 2 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/packages/nc-gui-v2/lib/types.ts b/packages/nc-gui-v2/lib/types.ts
index bfaabf0c17..1dee9b2827 100644
--- a/packages/nc-gui-v2/lib/types.ts
+++ b/packages/nc-gui-v2/lib/types.ts
@@ -62,4 +62,5 @@ export interface ProjectCreateForm {
     inflection_column?: string
     inflection_table?: string
   }
+  sslUse?: any
 }
diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index d996e57222..522fffa0c3 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useToast } from 'vue-toastification'
 import { Form, Modal } from 'ant-design-vue'
+import { ref } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
 import type { ProjectCreateForm } from '~/lib/types'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -14,17 +14,11 @@ import {
   projectTitleValidator,
   sslUsage,
 } from '~/utils/projectCreateUtils'
-import MdiCheckIcon from '~icons/mdi/check-circle'
-
 import { readFile } from '~/utils/fileUtils'
 
-const onVal = (v) => {
-  console.log(v)
-}
 const useForm = Form.useForm
 const loading = ref(false)
-const valid = ref(false)
-const testSuccess = ref(true)
+const testSuccess = ref(false)
 
 const { $api, $e } = useNuxtApp()
 const toast = useToast()
@@ -39,19 +33,33 @@ const formState = reactive<ProjectCreateForm>({
   },
 })
 
-const validators = reactive({
-  'title': [
-    {
-      required: true,
-      message: 'Please input project title',
-    },
-    projectTitleValidator,
-  ],
-  'dataSource.client': [fieldRequiredValidator],
-  'dataSource.connection.port': [fieldRequiredValidator],
-  'dataSource.connection.host': [fieldRequiredValidator],
-  'dataSource.connection.user': [fieldRequiredValidator],
-  'dataSource.connection.database': [fieldRequiredValidator],
+const validators = computed(() => {
+  return {
+    'title': [
+      {
+        required: true,
+        message: 'Please input project title',
+      },
+      projectTitleValidator,
+    ],
+    'dataSource.client': [fieldRequiredValidator],
+    ...(formState.dataSource.client === 'sqlite3'
+      ? {
+          'dataSource.connection.connection.filename': [fieldRequiredValidator],
+        }
+      : {
+          'dataSource.connection.host': [fieldRequiredValidator],
+          'dataSource.connection.port': [fieldRequiredValidator],
+          'dataSource.connection.username': [fieldRequiredValidator],
+          'dataSource.connection.password': [fieldRequiredValidator],
+          'dataSource.connection.database': [fieldRequiredValidator],
+          ...(['pg', 'mssql'].includes(formState.dataSource.client)
+            ? {
+                'dataSource.connection.searchPath.0': [fieldRequiredValidator],
+              }
+            : {}),
+        }),
+  }
 })
 
 const { resetFields, validate, validateInfos } = useForm(formState, validators)
@@ -80,18 +88,25 @@ const onFileSelect = (key: 'ca' | 'cert' | 'key', el: HTMLInputElement) => {
   })
 }
 
+const sslFilesRequired = computed<boolean>(() => {
+  return formState?.sslUse && formState.sslUse !== 'No'
+})
+
 function getConnectionConfig() {
   const connection = {
     ...formState.dataSource.connection,
   }
 
-  if ('ssl' in connection && connection.ssl && Object.values(connection.ssl).every((v) => !v)) {
+  if ('ssl' in connection && connection.ssl && (!sslFilesRequired || Object.values(connection.ssl).every((v) => !v))) {
     delete connection.ssl
   }
   return connection
 }
 
 const createProject = async () => {
+  if (!(await validate())) {
+    return
+  }
   loading.value = true
   try {
     const connection = getConnectionConfig()
@@ -118,6 +133,9 @@ const createProject = async () => {
 }
 
 const testConnection = async () => {
+  if (!(await validate())) {
+    return
+  }
   $e('a:project:create:extdb:test-connection', [])
   try {
     // this.handleSSL(projectDatasource)
@@ -177,7 +195,7 @@ const testConnection = async () => {
       <a-form-item
         v-if="formState.dataSource.client === 'sqlite3'"
         :label="$t('labels.sqliteFile')"
-        v-bind="validateInfos['dataSource.connection.host']"
+        v-bind="validateInfos['dataSource.connection.connection.filename']"
       >
         <a-input v-model:value="formState.dataSource.connection.connection.filename" size="small" />
       </a-form-item>
@@ -213,27 +231,31 @@ const testConnection = async () => {
           />
         </a-form-item>
         <!-- Schema name -->
-        <a-form-item v-if="['mssql', 'pg'].includes(formState.dataSource.client)" :label="$t('labels.schemaName')">
+        <a-form-item
+          v-if="['mssql', 'pg'].includes(formState.dataSource.client)"
+          :label="$t('labels.schemaName')"
+          v-bind="validateInfos['dataSource.connection.searchPath.0']"
+        >
           <a-input v-model:value="formState.dataSource.connection.searchPath[0]" size="small" />
         </a-form-item>
 
         <a-collapse ghost expand-icon-position="right">
           <a-collapse-panel key="1" :header="$t('title.advancedParameters')">
             <!--            todo:  add in i18n -->
-            <a-form-item label="SSL Mode" v-bind="validateInfos['dataSource.ssl']">
-              <a-select v-model:value="formState.dataSource.sslUse" size="small" @change="onClientChange">
+            <a-form-item label="SSL mode">
+              <a-select v-model:value="formState.sslUse" size="small" @change="onClientChange">
                 <a-select-option v-for="opt in sslUsage" :key="opt" :value="opt">{{ opt }}</a-select-option>
               </a-select>
             </a-form-item>
 
-            <a-form-item :label="$t('labels.dbCredentials')">
+            <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 size="small" @click="certFileInput.click()">
+                  <a-button :disabled="!sslFilesRequired" size="small" @click="certFileInput.click()">
                     {{ $t('labels.clientCert') }}
                   </a-button>
                 </a-tooltip>
@@ -242,7 +264,7 @@ const testConnection = async () => {
                   <template #title>
                     <span>{{ $t('tooltip.clientKey') }}</span>
                   </template>
-                  <a-button size="small" @click="keyFileInput.click()">
+                  <a-button :disabled="!sslFilesRequired" size="small" @click="keyFileInput.click()">
                     {{ $t('labels.clientKey') }}
                   </a-button>
                 </a-tooltip>
@@ -251,7 +273,7 @@ const testConnection = async () => {
                   <template #title>
                     <span>{{ $t('tooltip.clientCA') }}</span>
                   </template>
-                  <a-button size="small" @click="caFileInput.click()">
+                  <a-button :disabled="!sslFilesRequired" size="small" @click="caFileInput.click()">
                     {{ $t('labels.serverCA') }}
                   </a-button>
                 </a-tooltip>
@@ -262,12 +284,12 @@ const testConnection = async () => {
             <input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect('cert', certFileInput)" />
             <input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect('key', keyFileInput)" />
 
-            <a-form-item :label="$t('labels.inflection.inflection_column')" v-bind="validateInfos['dataSource.client']">
+            <a-form-item :label="$t('labels.inflection.tableName')" v-bind="validateInfos['dataSource.client']">
               <a-select v-model:value="formState.inflection.inflection_table" size="small" @change="onClientChange">
                 <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.inflection_column')" v-bind="validateInfos['dataSource.type']">
+            <a-form-item :label="$t('labels.inflection.columnName')" v-bind="validateInfos['dataSource.type']">
               <a-select v-model:value="formState.inflection.inflection_column" size="small" @change="onClientChange">
                 <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
               </a-select>
@@ -284,7 +306,7 @@ const testConnection = async () => {
 
       <a-form-item class="flex justify-center">
         <div class="flex justify-center gap-2">
-          <a-button type="primary" @click="createProject">Submit</a-button>
+          <a-button type="primary" :disabled="!testSuccess" @click="createProject">Submit</a-button>
           <a-button type="primary" @click="testConnection">Test Connection</a-button>
         </div>
       </a-form-item>

From c5748fa26c99592b23e9421b5c7a6d8e3a45117d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 12:27:10 +0530
Subject: [PATCH 15/46] feat(gui-v2): monaco editor integration for config edit

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/monaco/index.vue     |  24 +-
 packages/nc-gui-v2/nuxt.config.ts             |   4 +-
 .../pages/projects/index/create-external.vue  | 227 +++++++++---------
 3 files changed, 129 insertions(+), 126 deletions(-)

diff --git a/packages/nc-gui-v2/components/monaco/index.vue b/packages/nc-gui-v2/components/monaco/index.vue
index 256c4b5bdb..462916a1fd 100644
--- a/packages/nc-gui-v2/components/monaco/index.vue
+++ b/packages/nc-gui-v2/components/monaco/index.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import * as monaco from 'monaco-editor'
 import { onMounted } from '#imports'
+import { deepCompare } from "~/utils/deepCompare";
 
 const { modelValue } = defineProps<{ modelValue: any }>()
 const emit = defineEmits(['update:modelValue'])
 
 const root = ref<HTMLDivElement>()
-let editor = $ref<monaco.editor.IStandaloneCodeEditor>()
+let editor: monaco.editor.IStandaloneCodeEditor
 
 onMounted(() => {
   if (root.value) {
@@ -25,8 +26,8 @@ onMounted(() => {
     editor.onDidChangeModelContent(async (e) => {
       try {
         // console.log(e)
-        // const obj = JSON.parse(editor.value.getValue())
-        // if (!deepCompare(modelValue, obj)) emit('update:modelValue', obj)
+        const obj = JSON.parse(editor.getValue())
+        if (!deepCompare(modelValue, obj)) emit('update:modelValue', obj)
       } catch (e) {
         console.log(e)
       }
@@ -34,15 +35,14 @@ onMounted(() => {
   }
 })
 
-// watch(
-//   () => modelValue,
-//   (v) => {
-//     if (editor?.value && v && !deepCompare(v, JSON.parse(editor?.value?.getValue() as string))) {
-//       debugger
-//       editor.value.setValue(JSON.stringify(v, null, 2))
-//     }
-//   },
-// )
+watch(
+  () => modelValue,
+  (v) => {
+    if (editor && v && !deepCompare(v, JSON.parse(editor?.getValue() as string))) {
+      editor.setValue(JSON.stringify(v, null, 2))
+    }
+  },
+)
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index 2b4c589bd4..df1f24e8cf 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -71,7 +71,9 @@ export default defineNuxtConfig({
           }),
         ],
       }),
-      monacoEditorPlugin({}),
+      monacoEditorPlugin({
+        languageWorkers: ['json'],
+      }),
     ],
     define: {
       'process.env.DEBUG': 'false',
diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index 522fffa0c3..681858c34f 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -1,116 +1,116 @@
 <script lang="ts" setup>
-import { useI18n } from 'vue-i18n'
-import { useToast } from 'vue-toastification'
-import { Form, Modal } from 'ant-design-vue'
-import { ref } from '#imports'
-import { navigateTo, useNuxtApp } from '#app'
-import type { ProjectCreateForm } from '~/lib/types'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { useI18n } from "vue-i18n";
+import { useToast } from "vue-toastification";
+import { Form, Modal } from "ant-design-vue";
+import { ref } from "#imports";
+import { navigateTo, useNuxtApp } from "#app";
+import type { ProjectCreateForm } from "~/lib/types";
+import { extractSdkResponseErrorMsg } from "~/utils/errorUtils";
 import {
   clientTypes,
   fieldRequiredValidator,
   getDefaultConnectionConfig,
   getTestDatabaseName,
   projectTitleValidator,
-  sslUsage,
-} from '~/utils/projectCreateUtils'
-import { readFile } from '~/utils/fileUtils'
+  sslUsage
+} from "~/utils/projectCreateUtils";
+import { readFile } from "~/utils/fileUtils";
 
-const useForm = Form.useForm
-const loading = ref(false)
-const testSuccess = ref(false)
+const useForm = Form.useForm;
+const loading = ref(false);
+const testSuccess = ref(false);
 
-const { $api, $e } = useNuxtApp()
-const toast = useToast()
-const { t } = useI18n()
+const { $api, $e } = useNuxtApp();
+const toast = useToast();
+const { t } = useI18n();
 
-const formState = reactive<ProjectCreateForm>({
-  title: '',
-  dataSource: { ...getDefaultConnectionConfig('mysql2') },
+const formState = $ref<ProjectCreateForm>({
+  title: "",
+  dataSource: { ...getDefaultConnectionConfig("mysql2") },
   inflection: {
-    inflection_column: 'camelize',
-    inflection_table: 'camelize',
-  },
-})
+    inflection_column: "camelize",
+    inflection_table: "camelize"
+  }
+});
 
 const validators = computed(() => {
   return {
-    'title': [
+    "title": [
       {
         required: true,
-        message: 'Please input project title',
+        message: "Please input project title"
       },
-      projectTitleValidator,
+      projectTitleValidator
     ],
-    'dataSource.client': [fieldRequiredValidator],
-    ...(formState.dataSource.client === 'sqlite3'
+    "dataSource.client": [fieldRequiredValidator],
+    ...(formState.dataSource.client === "sqlite3"
       ? {
-          'dataSource.connection.connection.filename': [fieldRequiredValidator],
-        }
+        "dataSource.connection.connection.filename": [fieldRequiredValidator]
+      }
       : {
-          'dataSource.connection.host': [fieldRequiredValidator],
-          'dataSource.connection.port': [fieldRequiredValidator],
-          'dataSource.connection.username': [fieldRequiredValidator],
-          'dataSource.connection.password': [fieldRequiredValidator],
-          'dataSource.connection.database': [fieldRequiredValidator],
-          ...(['pg', 'mssql'].includes(formState.dataSource.client)
-            ? {
-                'dataSource.connection.searchPath.0': [fieldRequiredValidator],
-              }
-            : {}),
-        }),
-  }
-})
-
-const { resetFields, validate, validateInfos } = useForm(formState, validators)
+        "dataSource.connection.host": [fieldRequiredValidator],
+        "dataSource.connection.port": [fieldRequiredValidator],
+        "dataSource.connection.user": [fieldRequiredValidator],
+        "dataSource.connection.password": [fieldRequiredValidator],
+        "dataSource.connection.database": [fieldRequiredValidator],
+        ...(["pg", "mssql"].includes(formState.dataSource.client)
+          ? {
+            "dataSource.connection.searchPath.0": [fieldRequiredValidator]
+          }
+          : {})
+      })
+  };
+});
+
+const { resetFields, validate, validateInfos } = useForm(formState, validators);
 
 const onClientChange = () => {
-  formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) }
-}
+  formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) };
+};
 
-const inflectionTypes = ['camelize', 'none']
-const configEditDlg = ref(false)
+const inflectionTypes = ["camelize", "none"];
+const configEditDlg = ref(false);
 
 // populate database name based on title
 watch(
   () => formState.title,
-  (v) => (formState.dataSource.connection.database = `${v}_noco`),
-)
+  (v) => (formState.dataSource.connection.database = `${v}_noco`)
+);
 
-const caFileInput = ref<HTMLInputElement>()
-const keyFileInput = ref<HTMLInputElement>()
-const certFileInput = ref<HTMLInputElement>()
+const caFileInput = ref<HTMLInputElement>();
+const keyFileInput = ref<HTMLInputElement>();
+const certFileInput = ref<HTMLInputElement>();
 
-const onFileSelect = (key: 'ca' | 'cert' | 'key', el: HTMLInputElement) => {
+const onFileSelect = (key: "ca" | "cert" | "key", el: HTMLInputElement) => {
   readFile(el, (content) => {
-    if ('ssl' in formState.dataSource.connection && formState.dataSource.connection.ssl)
-      formState.dataSource.connection.ssl[key] = content ?? ''
-  })
-}
+    if ("ssl" in formState.dataSource.connection && formState.dataSource.connection.ssl)
+      formState.dataSource.connection.ssl[key] = content ?? "";
+  });
+};
 
 const sslFilesRequired = computed<boolean>(() => {
-  return formState?.sslUse && formState.sslUse !== 'No'
-})
+  return formState?.sslUse && formState.sslUse !== "No";
+});
 
 function getConnectionConfig() {
   const connection = {
-    ...formState.dataSource.connection,
-  }
+    ...formState.dataSource.connection
+  };
 
-  if ('ssl' in connection && connection.ssl && (!sslFilesRequired || Object.values(connection.ssl).every((v) => !v))) {
-    delete connection.ssl
+  if ("ssl" in connection && connection.ssl && (!sslFilesRequired || Object.values(connection.ssl).every((v) => !v))) {
+    delete connection.ssl;
   }
-  return connection
+  return connection;
 }
 
 const createProject = async () => {
   if (!(await validate())) {
-    return
+    return;
   }
-  loading.value = true
+  loading.value = true;
   try {
-    const connection = getConnectionConfig()
-    const config = { ...formState.dataSource, connection }
+    const connection = getConnectionConfig();
+    const config = { ...formState.dataSource, connection };
     const result = await $api.project.create({
       title: formState.title,
       bases: [
@@ -118,75 +118,74 @@ const createProject = async () => {
           type: formState.dataSource.client,
           config,
           inflection_column: formState.inflection.inflection_column,
-          inflection_table: formState.inflection.inflection_table,
-        },
+          inflection_table: formState.inflection.inflection_table
+        }
       ],
-      external: true,
-    })
-
-    await navigateTo(`/nc/${result.id}`)
+      external: true
+    });
+    $e("a:project:create:extdb");
+    await navigateTo(`/nc/${result.id}`);
   } catch (e: any) {
     // todo: toast
-    toast.error(await extractSdkResponseErrorMsg(e))
+    toast.error(await extractSdkResponseErrorMsg(e));
   }
-  loading.value = false
-}
+  loading.value = false;
+};
 
 const testConnection = async () => {
   if (!(await validate())) {
-    return
+    return;
   }
-  $e('a:project:create:extdb:test-connection', [])
+  $e("a:project:create:extdb:test-connection", []);
   try {
-    // this.handleSSL(projectDatasource)
-
-    if (formState.dataSource.client === 'sqlite3') {
-      testSuccess.value = true
+    if (formState.dataSource.client === "sqlite3") {
+      testSuccess.value = true;
     } else {
-      const connection: any = getConnectionConfig()
-      connection.database = getTestDatabaseName(formState.dataSource)
+      const connection: any = getConnectionConfig();
+      connection.database = getTestDatabaseName(formState.dataSource);
       const testConnectionConfig = {
         ...formState.dataSource,
-        connection,
-      }
+        connection
+      };
 
-      const result = await $api.utils.testConnection(testConnectionConfig)
+      const result = await $api.utils.testConnection(testConnectionConfig);
 
       if (result.code === 0) {
-        testSuccess.value = true
+        testSuccess.value = true;
 
         Modal.confirm({
-          title: t('msg.info.dbConnected'),
+          title: t("msg.info.dbConnected"),
           icon: null,
-          type: 'success',
+          type: "success",
 
-          okText: t('activity.OkSaveProject'),
-          okType: 'primary',
-          cancelText: 'Cancel',
-          onOk: createProject,
-        })
+          okText: t("activity.OkSaveProject"),
+          okType: "primary",
+          cancelText: "Cancel",
+          onOk: createProject
+        });
       } else {
-        testSuccess.value = false
-        toast.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`)
+        testSuccess.value = false;
+        toast.error(`${t("msg.error.dbConnectionFailed")} ${result.message}`);
       }
     }
   } catch (e: any) {
-    testSuccess.value = false
-    toast.error(await extractSdkResponseErrorMsg(e))
+    testSuccess.value = false;
+    toast.error(await extractSdkResponseErrorMsg(e));
   }
-}
+};
 </script>
 
 <template>
   <a-card class="max-w-[600px] mx-auto !mt-100px" :title="$t('activity.createProject')">
-    <a-form :model="formState" name="validate_other" layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 18 }">
+    <a-form :model="formState" name="validate_other" layout="horizontal" :label-col="{ span: 8 }"
+            :wrapper-col="{ span: 18 }">
       <a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title">
         <a-input v-model:value="formState.title" size="small" />
       </a-form-item>
       <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
         <a-select v-model:value="formState.dataSource.client" size="small" @change="onClientChange">
           <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
-            >{{ client.text }}
+          >{{ client.text }}
           </a-select-option>
         </a-select>
       </a-form-item>
@@ -253,28 +252,28 @@ const testConnection = async () => {
                 <a-tooltip placement="top">
                   <!-- Select .cert file -->
                   <template #title>
-                    <span>{{ $t('tooltip.clientCert') }}</span>
+                    <span>{{ $t("tooltip.clientCert") }}</span>
                   </template>
                   <a-button :disabled="!sslFilesRequired" size="small" @click="certFileInput.click()">
-                    {{ $t('labels.clientCert') }}
+                    {{ $t("labels.clientCert") }}
                   </a-button>
                 </a-tooltip>
                 <a-tooltip placement="top">
                   <!-- Select .key file -->
                   <template #title>
-                    <span>{{ $t('tooltip.clientKey') }}</span>
+                    <span>{{ $t("tooltip.clientKey") }}</span>
                   </template>
                   <a-button :disabled="!sslFilesRequired" size="small" @click="keyFileInput.click()">
-                    {{ $t('labels.clientKey') }}
+                    {{ $t("labels.clientKey") }}
                   </a-button>
                 </a-tooltip>
                 <a-tooltip placement="top">
                   <!-- Select CA file -->
                   <template #title>
-                    <span>{{ $t('tooltip.clientCA') }}</span>
+                    <span>{{ $t("tooltip.clientCA") }}</span>
                   </template>
                   <a-button :disabled="!sslFilesRequired" size="small" @click="caFileInput.click()">
-                    {{ $t('labels.serverCA') }}
+                    {{ $t("labels.serverCA") }}
                   </a-button>
                 </a-tooltip>
               </div>
@@ -297,7 +296,7 @@ const testConnection = async () => {
             <div class="flex justify-end">
               <a-button size="small" @click="configEditDlg = true">
                 <!-- Edit connection JSON -->
-                {{ $t('activity.editConnJson') }}
+                {{ $t("activity.editConnJson") }}
               </a-button>
             </div>
           </a-collapse-panel>
@@ -313,7 +312,9 @@ const testConnection = async () => {
     </a-form>
 
     <v-dialog v-model="configEditDlg">
-      <Monaco v-if="configEditDlg" :model-value="formState" class="h-[320px] w-[600px]" @update:modelValue="onVal"></Monaco>
+      <a-card>
+        <Monaco v-if="configEditDlg" v-model="formState" class="h-[400px] w-[600px]"></Monaco>
+      </a-card>
     </v-dialog>
   </a-card>
 </template>

From 3c5237d821ee5be4c9d67ec66bb6777171432db3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 12:57:16 +0530
Subject: [PATCH 16/46] refactor(gui-v2): ui improvements

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/monaco/index.vue     |   2 +-
 .../pages/projects/index/create-external.vue  | 231 +++++++++---------
 2 files changed, 120 insertions(+), 113 deletions(-)

diff --git a/packages/nc-gui-v2/components/monaco/index.vue b/packages/nc-gui-v2/components/monaco/index.vue
index 462916a1fd..5f1ed4411f 100644
--- a/packages/nc-gui-v2/components/monaco/index.vue
+++ b/packages/nc-gui-v2/components/monaco/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import * as monaco from 'monaco-editor'
 import { onMounted } from '#imports'
-import { deepCompare } from "~/utils/deepCompare";
+import { deepCompare } from '~/utils/deepCompare'
 
 const { modelValue } = defineProps<{ modelValue: any }>()
 const emit = defineEmits(['update:modelValue'])
diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index 681858c34f..bc7cdd0e49 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -1,116 +1,116 @@
 <script lang="ts" setup>
-import { useI18n } from "vue-i18n";
-import { useToast } from "vue-toastification";
-import { Form, Modal } from "ant-design-vue";
-import { ref } from "#imports";
-import { navigateTo, useNuxtApp } from "#app";
-import type { ProjectCreateForm } from "~/lib/types";
-import { extractSdkResponseErrorMsg } from "~/utils/errorUtils";
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'vue-toastification'
+import { Form, Modal } from 'ant-design-vue'
+import { ref } from '#imports'
+import { navigateTo, useNuxtApp } from '#app'
+import type { ProjectCreateForm } from '~/lib/types'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import {
   clientTypes,
   fieldRequiredValidator,
   getDefaultConnectionConfig,
   getTestDatabaseName,
   projectTitleValidator,
-  sslUsage
-} from "~/utils/projectCreateUtils";
-import { readFile } from "~/utils/fileUtils";
+  sslUsage,
+} from '~/utils/projectCreateUtils'
+import { readFile } from '~/utils/fileUtils'
 
-const useForm = Form.useForm;
-const loading = ref(false);
-const testSuccess = ref(false);
+const useForm = Form.useForm
+const loading = ref(false)
+const testSuccess = ref(false)
 
-const { $api, $e } = useNuxtApp();
-const toast = useToast();
-const { t } = useI18n();
+const { $api, $e } = useNuxtApp()
+const toast = useToast()
+const { t } = useI18n()
 
 const formState = $ref<ProjectCreateForm>({
-  title: "",
-  dataSource: { ...getDefaultConnectionConfig("mysql2") },
+  title: '',
+  dataSource: { ...getDefaultConnectionConfig('mysql2') },
   inflection: {
-    inflection_column: "camelize",
-    inflection_table: "camelize"
-  }
-});
+    inflection_column: 'camelize',
+    inflection_table: 'camelize',
+  },
+})
 
 const validators = computed(() => {
   return {
-    "title": [
+    'title': [
       {
         required: true,
-        message: "Please input project title"
+        message: 'Please input project title',
       },
-      projectTitleValidator
+      projectTitleValidator,
     ],
-    "dataSource.client": [fieldRequiredValidator],
-    ...(formState.dataSource.client === "sqlite3"
+    'dataSource.client': [fieldRequiredValidator],
+    ...(formState.dataSource.client === 'sqlite3'
       ? {
-        "dataSource.connection.connection.filename": [fieldRequiredValidator]
-      }
+          'dataSource.connection.connection.filename': [fieldRequiredValidator],
+        }
       : {
-        "dataSource.connection.host": [fieldRequiredValidator],
-        "dataSource.connection.port": [fieldRequiredValidator],
-        "dataSource.connection.user": [fieldRequiredValidator],
-        "dataSource.connection.password": [fieldRequiredValidator],
-        "dataSource.connection.database": [fieldRequiredValidator],
-        ...(["pg", "mssql"].includes(formState.dataSource.client)
-          ? {
-            "dataSource.connection.searchPath.0": [fieldRequiredValidator]
-          }
-          : {})
-      })
-  };
-});
-
-const { resetFields, validate, validateInfos } = useForm(formState, validators);
+          'dataSource.connection.host': [fieldRequiredValidator],
+          'dataSource.connection.port': [fieldRequiredValidator],
+          'dataSource.connection.user': [fieldRequiredValidator],
+          'dataSource.connection.password': [fieldRequiredValidator],
+          'dataSource.connection.database': [fieldRequiredValidator],
+          ...(['pg', 'mssql'].includes(formState.dataSource.client)
+            ? {
+                'dataSource.connection.searchPath.0': [fieldRequiredValidator],
+              }
+            : {}),
+        }),
+  }
+})
+
+const { resetFields, validate, validateInfos } = useForm(formState, validators)
 
 const onClientChange = () => {
-  formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) };
-};
+  formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) }
+}
 
-const inflectionTypes = ["camelize", "none"];
-const configEditDlg = ref(false);
+const inflectionTypes = ['camelize', 'none']
+const configEditDlg = ref(false)
 
 // populate database name based on title
 watch(
   () => formState.title,
-  (v) => (formState.dataSource.connection.database = `${v}_noco`)
-);
+  (v) => (formState.dataSource.connection.database = `${v}_noco`),
+)
 
-const caFileInput = ref<HTMLInputElement>();
-const keyFileInput = ref<HTMLInputElement>();
-const certFileInput = ref<HTMLInputElement>();
+const caFileInput = ref<HTMLInputElement>()
+const keyFileInput = ref<HTMLInputElement>()
+const certFileInput = ref<HTMLInputElement>()
 
-const onFileSelect = (key: "ca" | "cert" | "key", el: HTMLInputElement) => {
+const onFileSelect = (key: 'ca' | 'cert' | 'key', el: HTMLInputElement) => {
   readFile(el, (content) => {
-    if ("ssl" in formState.dataSource.connection && formState.dataSource.connection.ssl)
-      formState.dataSource.connection.ssl[key] = content ?? "";
-  });
-};
+    if ('ssl' in formState.dataSource.connection && formState.dataSource.connection.ssl)
+      formState.dataSource.connection.ssl[key] = content ?? ''
+  })
+}
 
 const sslFilesRequired = computed<boolean>(() => {
-  return formState?.sslUse && formState.sslUse !== "No";
-});
+  return formState?.sslUse && formState.sslUse !== 'No'
+})
 
 function getConnectionConfig() {
   const connection = {
-    ...formState.dataSource.connection
-  };
+    ...formState.dataSource.connection,
+  }
 
-  if ("ssl" in connection && connection.ssl && (!sslFilesRequired || Object.values(connection.ssl).every((v) => !v))) {
-    delete connection.ssl;
+  if ('ssl' in connection && connection.ssl && (!sslFilesRequired || Object.values(connection.ssl).every((v) => !v))) {
+    delete connection.ssl
   }
-  return connection;
+  return connection
 }
 
 const createProject = async () => {
   if (!(await validate())) {
-    return;
+    return
   }
-  loading.value = true;
+  loading.value = true
   try {
-    const connection = getConnectionConfig();
-    const config = { ...formState.dataSource, connection };
+    const connection = getConnectionConfig()
+    const config = { ...formState.dataSource, connection }
     const result = await $api.project.create({
       title: formState.title,
       bases: [
@@ -118,74 +118,77 @@ const createProject = async () => {
           type: formState.dataSource.client,
           config,
           inflection_column: formState.inflection.inflection_column,
-          inflection_table: formState.inflection.inflection_table
-        }
+          inflection_table: formState.inflection.inflection_table,
+        },
       ],
-      external: true
-    });
-    $e("a:project:create:extdb");
-    await navigateTo(`/nc/${result.id}`);
+      external: true,
+    })
+    $e('a:project:create:extdb')
+    await navigateTo(`/nc/${result.id}`)
   } catch (e: any) {
     // todo: toast
-    toast.error(await extractSdkResponseErrorMsg(e));
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
-  loading.value = false;
-};
+  loading.value = false
+}
 
 const testConnection = async () => {
   if (!(await validate())) {
-    return;
+    return
   }
-  $e("a:project:create:extdb:test-connection", []);
+  $e('a:project:create:extdb:test-connection', [])
   try {
-    if (formState.dataSource.client === "sqlite3") {
-      testSuccess.value = true;
+    if (formState.dataSource.client === 'sqlite3') {
+      testSuccess.value = true
     } else {
-      const connection: any = getConnectionConfig();
-      connection.database = getTestDatabaseName(formState.dataSource);
+      const connection: any = getConnectionConfig()
+      connection.database = getTestDatabaseName(formState.dataSource)
       const testConnectionConfig = {
         ...formState.dataSource,
-        connection
-      };
+        connection,
+      }
 
-      const result = await $api.utils.testConnection(testConnectionConfig);
+      const result = await $api.utils.testConnection(testConnectionConfig)
 
       if (result.code === 0) {
-        testSuccess.value = true;
+        testSuccess.value = true
 
         Modal.confirm({
-          title: t("msg.info.dbConnected"),
+          title: t('msg.info.dbConnected'),
           icon: null,
-          type: "success",
+          type: 'success',
 
-          okText: t("activity.OkSaveProject"),
-          okType: "primary",
-          cancelText: "Cancel",
-          onOk: createProject
-        });
+          okText: t('activity.OkSaveProject'),
+          okType: 'primary',
+          cancelText: 'Cancel',
+          onOk: createProject,
+        })
       } else {
-        testSuccess.value = false;
-        toast.error(`${t("msg.error.dbConnectionFailed")} ${result.message}`);
+        testSuccess.value = false
+        toast.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`)
       }
     }
   } catch (e: any) {
-    testSuccess.value = false;
-    toast.error(await extractSdkResponseErrorMsg(e));
+    testSuccess.value = false
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
-};
+}
 </script>
 
 <template>
-  <a-card class="max-w-[600px] mx-auto !mt-100px" :title="$t('activity.createProject')">
-    <a-form :model="formState" name="validate_other" layout="horizontal" :label-col="{ span: 8 }"
-            :wrapper-col="{ span: 18 }">
+  <a-card
+    class="max-w-[600px] mx-auto !mt-5"
+    :title="$t('activity.createProject')"
+    :head-style="{ textAlign: 'center', fontWeight: '700' }"
+  >
+    <a-form :model="formState" name="validate_other" layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 18 }">
       <a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title">
         <a-input v-model:value="formState.title" size="small" />
       </a-form-item>
       <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
         <a-select v-model:value="formState.dataSource.client" size="small" @change="onClientChange">
           <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
-          >{{ client.text }}
+            >{{ client.text }}
           </a-select-option>
         </a-select>
       </a-form-item>
@@ -252,28 +255,28 @@ const testConnection = async () => {
                 <a-tooltip placement="top">
                   <!-- Select .cert file -->
                   <template #title>
-                    <span>{{ $t("tooltip.clientCert") }}</span>
+                    <span>{{ $t('tooltip.clientCert') }}</span>
                   </template>
                   <a-button :disabled="!sslFilesRequired" size="small" @click="certFileInput.click()">
-                    {{ $t("labels.clientCert") }}
+                    {{ $t('labels.clientCert') }}
                   </a-button>
                 </a-tooltip>
                 <a-tooltip placement="top">
                   <!-- Select .key file -->
                   <template #title>
-                    <span>{{ $t("tooltip.clientKey") }}</span>
+                    <span>{{ $t('tooltip.clientKey') }}</span>
                   </template>
                   <a-button :disabled="!sslFilesRequired" size="small" @click="keyFileInput.click()">
-                    {{ $t("labels.clientKey") }}
+                    {{ $t('labels.clientKey') }}
                   </a-button>
                 </a-tooltip>
                 <a-tooltip placement="top">
                   <!-- Select CA file -->
                   <template #title>
-                    <span>{{ $t("tooltip.clientCA") }}</span>
+                    <span>{{ $t('tooltip.clientCA') }}</span>
                   </template>
                   <a-button :disabled="!sslFilesRequired" size="small" @click="caFileInput.click()">
-                    {{ $t("labels.serverCA") }}
+                    {{ $t('labels.serverCA') }}
                   </a-button>
                 </a-tooltip>
               </div>
@@ -296,14 +299,14 @@ const testConnection = async () => {
             <div class="flex justify-end">
               <a-button size="small" @click="configEditDlg = true">
                 <!-- Edit connection JSON -->
-                {{ $t("activity.editConnJson") }}
+                {{ $t('activity.editConnJson') }}
               </a-button>
             </div>
           </a-collapse-panel>
         </a-collapse>
       </template>
 
-      <a-form-item class="flex justify-center">
+      <a-form-item class="flex justify-center mt-5">
         <div class="flex justify-center gap-2">
           <a-button type="primary" :disabled="!testSuccess" @click="createProject">Submit</a-button>
           <a-button type="primary" @click="testConnection">Test Connection</a-button>
@@ -327,4 +330,8 @@ const testConnection = async () => {
 :deep(.ant-collapse-content-box) {
   @apply !pr-0;
 }
+
+:deep(.ant-form-item-explain-error) {
+  @apply !text-xs;
+}
 </style>

From e0ce002ff7320a51b6edee50757af8e21033e9cc Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 13:12:44 +0530
Subject: [PATCH 17/46] feat(gui-v2): generate random project title

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/package-lock.json               | 14 ++++++++++++++
 packages/nc-gui-v2/package.json                    |  1 +
 .../pages/projects/index/create-external.vue       |  4 ++++
 packages/nc-gui-v2/utils/projectCreateUtils.ts     |  9 +++++++++
 4 files changed, 28 insertions(+)

diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 84aba4bc92..76026dda1a 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -12,6 +12,7 @@
         "jwt-decode": "^3.1.2",
         "nocodb-sdk": "file:../nocodb-sdk",
         "socket.io-client": "^4.5.1",
+        "unique-names-generator": "^4.7.1",
         "vue-i18n": "^9.1.10",
         "vue-toastification": "^2.0.0-rc.5",
         "vuetify": "^3.0.0-alpha.13"
@@ -12986,6 +12987,14 @@
         "unplugin": "^0.6.3"
       }
     },
+    "node_modules/unique-names-generator": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/unique-names-generator/-/unique-names-generator-4.7.1.tgz",
+      "integrity": "sha512-lMx9dX+KRmG8sq6gulYYpKWZc9RlGsgBR6aoO8Qsm3qvkSJ+3rAymr+TnV8EDMrIrwuFJ4kruzMWM/OpYzPoow==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/unist-util-stringify-position": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
@@ -23859,6 +23868,11 @@
         "unplugin": "^0.6.3"
       }
     },
+    "unique-names-generator": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/unique-names-generator/-/unique-names-generator-4.7.1.tgz",
+      "integrity": "sha512-lMx9dX+KRmG8sq6gulYYpKWZc9RlGsgBR6aoO8Qsm3qvkSJ+3rAymr+TnV8EDMrIrwuFJ4kruzMWM/OpYzPoow=="
+    },
     "unist-util-stringify-position": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index b1569bf160..c234caa6bf 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -18,6 +18,7 @@
     "jwt-decode": "^3.1.2",
     "nocodb-sdk": "file:../nocodb-sdk",
     "socket.io-client": "^4.5.1",
+    "unique-names-generator": "^4.7.1",
     "vue-i18n": "^9.1.10",
     "vue-toastification": "^2.0.0-rc.5",
     "vuetify": "^3.0.0-alpha.13"
diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index bc7cdd0e49..50b3e02e3c 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -9,6 +9,7 @@ import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import {
   clientTypes,
   fieldRequiredValidator,
+  generateUniqueName,
   getDefaultConnectionConfig,
   getTestDatabaseName,
   projectTitleValidator,
@@ -77,6 +78,9 @@ watch(
   (v) => (formState.dataSource.connection.database = `${v}_noco`),
 )
 
+// generate a random project title
+formState.title = generateUniqueName()
+
 const caFileInput = ref<HTMLInputElement>()
 const keyFileInput = ref<HTMLInputElement>()
 const certFileInput = ref<HTMLInputElement>()
diff --git a/packages/nc-gui-v2/utils/projectCreateUtils.ts b/packages/nc-gui-v2/utils/projectCreateUtils.ts
index a9a5817197..a7ec2eb682 100644
--- a/packages/nc-gui-v2/utils/projectCreateUtils.ts
+++ b/packages/nc-gui-v2/utils/projectCreateUtils.ts
@@ -1,3 +1,4 @@
+import { adjectives, animals, starWars, uniqueNamesGenerator } from 'unique-names-generator'
 import type { ClientType, ProjectCreateForm } from '~/lib/types'
 
 const testDataBaseNames = {
@@ -188,3 +189,11 @@ export const fieldRequiredValidator = {
 }
 
 export const sslUsage = ['No', 'Preferred', 'Required', 'Required-CA', 'Required-IDENTITY']
+
+export const generateUniqueName = () => {
+  return uniqueNamesGenerator({
+    dictionaries: [[starWars], [adjectives, animals]][Math.floor(Math.random() * 2)],
+  })
+    .toLowerCase()
+    .replace(/[ -]/g, '_')
+}

From 0205dbc0e8346dfac9d9c2405c0b7c21ccc85cea Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 13:58:53 +0530
Subject: [PATCH 18/46] feat(gui-v2): focus field on validation error

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/projects/index/create-external.vue  | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index 50b3e02e3c..7a6009cbfc 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -21,7 +21,7 @@ const useForm = Form.useForm
 const loading = ref(false)
 const testSuccess = ref(false)
 
-const { $api, $e } = useNuxtApp()
+const { $api, $e, $state } = useNuxtApp()
 const toast = useToast()
 const { t } = useI18n()
 
@@ -107,8 +107,16 @@ function getConnectionConfig() {
   return connection
 }
 
+const form = ref<any>()
+const focusInvalidInput = () => {
+  form?.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.querySelector('input')?.focus()
+}
+
 const createProject = async () => {
-  if (!(await validate())) {
+  try {
+    await validate()
+  } catch (e) {
+    focusInvalidInput()
     return
   }
   loading.value = true
@@ -137,7 +145,10 @@ const createProject = async () => {
 }
 
 const testConnection = async () => {
-  if (!(await validate())) {
+  try {
+    await validate()
+  } catch (e) {
+    focusInvalidInput()
     return
   }
   $e('a:project:create:extdb:test-connection', [])
@@ -177,6 +188,8 @@ const testConnection = async () => {
     toast.error(await extractSdkResponseErrorMsg(e))
   }
 }
+
+$state.sidebarOpen.value = false
 </script>
 
 <template>
@@ -185,10 +198,18 @@ const testConnection = async () => {
     :title="$t('activity.createProject')"
     :head-style="{ textAlign: 'center', fontWeight: '700' }"
   >
-    <a-form :model="formState" name="validate_other" layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 18 }">
+    <a-form
+      ref="form"
+      :model="formState"
+      name="validate_other"
+      layout="horizontal"
+      :label-col="{ span: 8 }"
+      :wrapper-col="{ span: 18 }"
+    >
       <a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title">
         <a-input v-model:value="formState.title" size="small" />
       </a-form-item>
+
       <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
         <a-select v-model:value="formState.dataSource.client" size="small" @change="onClientChange">
           <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"

From bda31a16ce44858ea35d94f59a48de8d01fe108a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 14:01:59 +0530
Subject: [PATCH 19/46] feat(gui-v2): reset test status on any field update

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/pages/projects/index/create-external.vue    | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index 7a6009cbfc..bf2bf742ea 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -189,7 +189,15 @@ const testConnection = async () => {
   }
 }
 
+// hide sidebar
 $state.sidebarOpen.value = false
+
+// reset test status on config change
+watch(
+  () => formState.dataSource,
+  () => (testSuccess.value = false),
+  { deep: true },
+)
 </script>
 
 <template>

From aaa9ea15aa5008067806f92a6238f6afc0d62c99 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 14:06:06 +0530
Subject: [PATCH 20/46] feat(gui-v2): select and focus title field on load

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/pages/projects/index/create-external.vue    | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index bf2bf742ea..586e9f4df3 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { onMounted } from '@vue/runtime-core'
 import { useI18n } from 'vue-i18n'
 import { useToast } from 'vue-toastification'
 import { Form, Modal } from 'ant-design-vue'
@@ -198,6 +199,13 @@ watch(
   () => (testSuccess.value = false),
   { deep: true },
 )
+
+// select and focus title field on load
+onMounted(() => {
+  const input = form.value?.$el.querySelector('input')
+  input.setSelectionRange(0, formState.title.length)
+  input.focus()
+})
 </script>
 
 <template>

From 7c0a249477345048f7f2e061c3bc185a0e6be82f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 15:10:49 +0530
Subject: [PATCH 21/46] feat(gui-v2): focus input on load

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/projects/index/create-external.vue  |  8 +++++---
 .../nc-gui-v2/pages/projects/index/create.vue | 19 ++++++++++++++-----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/projects/index/create-external.vue
index 586e9f4df3..b719699476 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create-external.vue
@@ -202,9 +202,11 @@ watch(
 
 // select and focus title field on load
 onMounted(() => {
-  const input = form.value?.$el.querySelector('input')
-  input.setSelectionRange(0, formState.title.length)
-  input.focus()
+  const input = form.value?.$el?.querySelector('input')
+  if (input) {
+    input.setSelectionRange(0, formState.title.length)
+    input.focus()
+  }
 })
 </script>
 
diff --git a/packages/nc-gui-v2/pages/projects/index/create.vue b/packages/nc-gui-v2/pages/projects/index/create.vue
index b6f313ecae..7da8c1ace4 100644
--- a/packages/nc-gui-v2/pages/projects/index/create.vue
+++ b/packages/nc-gui-v2/pages/projects/index/create.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { onMounted } from '@vue/runtime-core'
+import type { Form } from 'ant-design-vue'
 import { ref } from 'vue'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -10,7 +11,7 @@ const name = ref('')
 const loading = ref(false)
 const valid = ref(false)
 
-const { $api, $toast } = useNuxtApp()
+const { $api, $toast, $state } = useNuxtApp()
 
 const nameValidationRules = [
   {
@@ -38,10 +39,18 @@ const createProject = async () => {
   loading.value = false
 }
 
-const input = ref()
+const form = ref<typeof Form>()
 
+// hide sidebar
+$state.sidebarOpen.value = false
+
+// select and focus title field on load
 onMounted(() => {
-  input.value.input.focus()
+  const input = form.value?.$el?.querySelector('input')
+  if (input) {
+    input.setSelectionRange(0, formState.title.length)
+    input.focus()
+  }
 })
 </script>
 
@@ -49,9 +58,9 @@ onMounted(() => {
   <a-card class="w-[500px] mx-auto !mt-100px shadow-md">
     <h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.createProject') }}</h3>
 
-    <a-form :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="createProject">
+    <a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="createProject">
       <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10">
-        <a-input ref="input" v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
+        <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>
 
       <a-form-item style="text-align: center" class="mt-2">

From f29da6a4e1c56d25dbcf56b1e605cd866c48400a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 16:00:45 +0530
Subject: [PATCH 22/46] chore(gui-v2): path correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/index/index/index.vue                | 4 ++--
 packages/nc-gui-v2/pages/index/index/list.vue                 | 2 +-
 packages/nc-gui-v2/pages/{projects => project}/index.vue      | 0
 .../pages/{projects => project}/index/create-external.vue     | 3 ++-
 .../nc-gui-v2/pages/{projects => project}/index/create.vue    | 0
 5 files changed, 5 insertions(+), 4 deletions(-)
 rename packages/nc-gui-v2/pages/{projects => project}/index.vue (100%)
 rename packages/nc-gui-v2/pages/{projects => project}/index/create-external.vue (99%)
 rename packages/nc-gui-v2/pages/{projects => project}/index/create.vue (100%)

diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue
index 461e825a2f..6818cc7188 100644
--- a/packages/nc-gui-v2/pages/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index/index.vue
@@ -52,14 +52,14 @@ const formatTitle = (title: string) =>
         <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
           <div
             class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-            @click="navigateTo('/projects/create')"
+            @click="navigateTo('/project/create')"
           >
             <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
             <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
           </div>
           <div
             class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-            @click="navigateTo('/projects/create-external')"
+            @click="navigateTo('/project/create-external')"
           >
             <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
             <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
diff --git a/packages/nc-gui-v2/pages/index/index/list.vue b/packages/nc-gui-v2/pages/index/index/list.vue
index 4d2fe80da0..d69159b566 100644
--- a/packages/nc-gui-v2/pages/index/index/list.vue
+++ b/packages/nc-gui-v2/pages/index/index/list.vue
@@ -13,7 +13,7 @@ const { projects = [] } = defineProps<Props>()
 
 const emit = defineEmits(['delete-project'])
 
-const { $e } = useNxuxtApp()
+const { $e } = useNuxtApp()
 
 const openProject = async (project: ProjectType) => {
   await navigateTo(`/nc/${project.id}`)
diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/project/index.vue
similarity index 100%
rename from packages/nc-gui-v2/pages/projects/index.vue
rename to packages/nc-gui-v2/pages/project/index.vue
diff --git a/packages/nc-gui-v2/pages/projects/index/create-external.vue b/packages/nc-gui-v2/pages/project/index/create-external.vue
similarity index 99%
rename from packages/nc-gui-v2/pages/projects/index/create-external.vue
rename to packages/nc-gui-v2/pages/project/index/create-external.vue
index b719699476..16bfb42c3c 100644
--- a/packages/nc-gui-v2/pages/projects/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@@ -33,6 +33,7 @@ const formState = $ref<ProjectCreateForm>({
     inflection_column: 'camelize',
     inflection_table: 'camelize',
   },
+  sslUse: 'No',
 })
 
 const validators = computed(() => {
@@ -212,7 +213,7 @@ onMounted(() => {
 
 <template>
   <a-card
-    class="max-w-[600px] mx-auto !mt-5"
+    class="max-w-[600px] mx-auto !mt-5 !mb-5"
     :title="$t('activity.createProject')"
     :head-style="{ textAlign: 'center', fontWeight: '700' }"
   >
diff --git a/packages/nc-gui-v2/pages/projects/index/create.vue b/packages/nc-gui-v2/pages/project/index/create.vue
similarity index 100%
rename from packages/nc-gui-v2/pages/projects/index/create.vue
rename to packages/nc-gui-v2/pages/project/index/create.vue

From ad4a92d9f0153bbb0cd2f4ba6530e71ee4567ad8 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 16:24:37 +0530
Subject: [PATCH 23/46] refactor(gui-v2): ui improvements

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/index/index/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue
index 6818cc7188..264405e16a 100644
--- a/packages/nc-gui-v2/pages/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index/index.vue
@@ -34,7 +34,7 @@ const formatTitle = (title: string) =>
 </script>
 
 <template>
-  <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 3xl:grid-cols-6 gap-6 md:(gap-y-16)">
+  <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 3xl:grid-cols-8 gap-6 md:(gap-y-16)">
     <div class="group flex flex-col items-center gap-2">
       <v-menu>
         <template #activator="{ props }">
@@ -92,7 +92,7 @@ const formatTitle = (title: string) =>
         </a-dropdown>
       </div>
 
-      <div class="prose-lg font-semibold">
+      <div class="prose-lg font-semibold overflow-ellipsis w-full overflow-hidden text-center capitalize">
         {{ project.title || 'Untitled' }}
       </div>
     </div>
@@ -101,7 +101,7 @@ const formatTitle = (title: string) =>
 
 <style scoped>
 .thumbnail {
-  @apply relative rounded-md opacity-75 font-bold text-white text-[75px] h-[150px] w-full max-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center color-transition hover:(after:opacity-100 shadow-none);
+  @apply relative rounded-md opacity-75 font-bold text-white text-[75px] h-[100px] w-full w-[100px] shadow-md cursor-pointer uppercase flex items-center justify-center color-transition hover:(after:opacity-100 shadow-none);
 }
 
 .thumbnail::after {

From ff1b345768a4b37c85580e0df8c0128343a097f2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 17:08:54 +0530
Subject: [PATCH 24/46] feat(gui-v2): add project title edit page

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/pages/index/index/index.vue     |  2 +-
 .../nc-gui-v2/pages/project/index/[id].vue    | 81 +++++++++++++++++++
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui-v2/pages/project/index/[id].vue

diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue
index 264405e16a..c690767640 100644
--- a/packages/nc-gui-v2/pages/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index/index.vue
@@ -81,7 +81,7 @@ const formatTitle = (title: string) =>
                   <div class="col-span-4 text-sm xl:text-md">{{ $t('general.delete') }}</div>
                 </div>
               </a-menu-item>
-              <a-menu-item>
+              <a-menu-item @click.stop="navigateTo(`/project/${project.id}`)">
                 <div class="grid grid-cols-6 cursor-pointer flex items-center p-2">
                   <MdiEditOutline class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
                   <div class="col-span-4 text-sm xl:text-md">{{ $t('general.edit') }}</div>
diff --git a/packages/nc-gui-v2/pages/project/index/[id].vue b/packages/nc-gui-v2/pages/project/index/[id].vue
new file mode 100644
index 0000000000..bc0602bf09
--- /dev/null
+++ b/packages/nc-gui-v2/pages/project/index/[id].vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { onMounted } from '@vue/runtime-core'
+import type { Form } from 'ant-design-vue'
+import type { ProjectType } from 'nocodb-sdk'
+import { ref } from 'vue'
+import { navigateTo, useNuxtApp, useRoute } from '#app'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { projectTitleValidator } from '~/utils/projectCreateUtils'
+import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
+
+const loading = ref(false)
+
+const { $api, $toast, $state } = useNuxtApp()
+const route = useRoute()
+
+const nameValidationRules = [
+  {
+    required: true,
+    message: 'Title is required',
+  },
+  projectTitleValidator,
+]
+
+const formState = reactive({
+  title: '',
+})
+
+const getProject = async () => {
+  try {
+    const result: ProjectType = await $api.project.read(route.params.id as string)
+    formState.title = result.title as string
+  } catch (e: any) {
+    $toast.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+const renameProject = async () => {
+  loading.value = true
+  try {
+    await $api.project.update(route.params.id as string, formState)
+
+    navigateTo(`/nc/${route.params.id}`)
+  } catch (e) {
+    $toast.error(await extractSdkResponseErrorMsg(e)).goAway(3000)
+  }
+  loading.value = false
+}
+
+const form = ref<typeof Form>()
+
+// hide sidebar
+$state.sidebarOpen.value = false
+
+// select and focus title field on load
+onMounted(async () => {
+  await getProject()
+  const input = form.value?.$el?.querySelector('input')
+  if (input) {
+    input.setSelectionRange(0, formState.title.length)
+    input.focus()
+  }
+})
+</script>
+
+<template>
+  <a-card class="w-[500px] mx-auto !mt-100px shadow-md">
+    <h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.editProject') }}</h3>
+
+    <a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="renameProject">
+      <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10">
+        <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
+      </a-form-item>
+
+      <a-form-item style="text-align: center" class="mt-2">
+        <a-button type="primary" html-type="submit" class="mx-auto flex justify-self-center">
+          <MaterialSymbolsRocketLaunchOutline class="mr-1" />
+          <span> {{ $t('general.edit') }} </span></a-button
+        >
+      </a-form-item>
+    </a-form>
+  </a-card>
+</template>

From 865e77564f62500ab4bbcd139f2d3e3119ef395d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 17:12:39 +0530
Subject: [PATCH 25/46] refactor(gui-v2): align noco icon in center and show
 pinter

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/app.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index a032e792c9..6802ad4ada 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -35,10 +35,10 @@ const sidebarOpen = computed({
 
       <div class="flex-1" />
 
-      <div class="ml-4 flex items-center flex-1">
-        <div class="flex items-center gap-2">
+      <div class="ml-4 flex justify-center flex-1">
+        <div class="flex items-center gap-2 cursor-pointer" @click="navigateTo('/')">
           <img width="35" src="~/assets/img/icons/512x512-trans.png" />
-          <span class="prose-xl" @click="navigateTo('/')">NocoDB</span>
+          <span class="prose-xl">NocoDB</span>
         </div>
 
         <!-- todo: loading is not yet supported by nuxt 3 - see https://v3.nuxtjs.org/migration/component-options#loading

From 6da271feb9cac6962b69baefaefc81020c954c05 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 17:50:41 +0530
Subject: [PATCH 26/46] fix(gui-v2): focus title field on load

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/pages/project/index/[id].vue    | 13 +++++++-----
 .../pages/project/index/create-external.vue   | 13 +++++++-----
 .../nc-gui-v2/pages/project/index/create.vue  | 21 +++++++++++--------
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui-v2/pages/project/index/[id].vue b/packages/nc-gui-v2/pages/project/index/[id].vue
index bc0602bf09..581201b845 100644
--- a/packages/nc-gui-v2/pages/project/index/[id].vue
+++ b/packages/nc-gui-v2/pages/project/index/[id].vue
@@ -53,11 +53,14 @@ $state.sidebarOpen.value = false
 // select and focus title field on load
 onMounted(async () => {
   await getProject()
-  const input = form.value?.$el?.querySelector('input')
-  if (input) {
-    input.setSelectionRange(0, formState.title.length)
-    input.focus()
-  }
+  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.focus()
+    }, 500)
+  })
 })
 </script>
 
diff --git a/packages/nc-gui-v2/pages/project/index/create-external.vue b/packages/nc-gui-v2/pages/project/index/create-external.vue
index 16bfb42c3c..7149e2cb1b 100644
--- a/packages/nc-gui-v2/pages/project/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@@ -203,11 +203,14 @@ watch(
 
 // select and focus title field on load
 onMounted(() => {
-  const input = form.value?.$el?.querySelector('input')
-  if (input) {
-    input.setSelectionRange(0, formState.title.length)
-    input.focus()
-  }
+  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.focus()
+    }, 500)
+  })
 })
 </script>
 
diff --git a/packages/nc-gui-v2/pages/project/index/create.vue b/packages/nc-gui-v2/pages/project/index/create.vue
index 7da8c1ace4..f1447d9f02 100644
--- a/packages/nc-gui-v2/pages/project/index/create.vue
+++ b/packages/nc-gui-v2/pages/project/index/create.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { onMounted } from '@vue/runtime-core'
+import { onMounted, onUpdated } from '@vue/runtime-core'
 import type { Form } from 'ant-design-vue'
-import { ref } from 'vue'
+import { nextTick, ref } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { projectTitleValidator } from '~/utils/projectCreateUtils'
@@ -42,15 +42,18 @@ const createProject = async () => {
 const form = ref<typeof Form>()
 
 // hide sidebar
-$state.sidebarOpen.value = false
+// $state.sidebarOpen.value = false
 
 // select and focus title field on load
-onMounted(() => {
-  const input = form.value?.$el?.querySelector('input')
-  if (input) {
-    input.setSelectionRange(0, formState.title.length)
-    input.focus()
-  }
+onMounted(async () => {
+  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.focus()
+    }, 500)
+  })
 })
 </script>
 

From 5a1ea4c811bed83106b611d6cbe1d8f50e40a0f5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 19:22:04 +0530
Subject: [PATCH 27/46] fix(gui-v2): focus to validation failed field

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/project/index/create-external.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/pages/project/index/create-external.vue b/packages/nc-gui-v2/pages/project/index/create-external.vue
index 7149e2cb1b..1fc60ae6bd 100644
--- a/packages/nc-gui-v2/pages/project/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@@ -111,7 +111,7 @@ function getConnectionConfig() {
 
 const form = ref<any>()
 const focusInvalidInput = () => {
-  form?.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.querySelector('input')?.focus()
+  form?.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus()
 }
 
 const createProject = async () => {
@@ -371,7 +371,7 @@ onMounted(() => {
 
 <style scoped>
 :deep(.ant-collapse-header) {
-  @apply !pr-10 !-mt-4 text-right;
+  @apply !pr-10 !-mt-4 text-right justify-end;
 }
 
 :deep(.ant-collapse-content-box) {

From fbddfba9206d61005bb2e89e98af0af6691e06b7 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 21 Jul 2022 00:16:36 +0530
Subject: [PATCH 28/46] fix(gui-v2): create external project corrections

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/project/index/create-external.vue   | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/pages/project/index/create-external.vue b/packages/nc-gui-v2/pages/project/index/create-external.vue
index 1fc60ae6bd..200a2b0fb2 100644
--- a/packages/nc-gui-v2/pages/project/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@@ -77,7 +77,7 @@ const configEditDlg = ref(false)
 // populate database name based on title
 watch(
   () => formState.title,
-  (v) => (formState.dataSource.connection.database = `${v}_noco`),
+  (v) => (formState.dataSource.connection.database = `${v?.trim()}_noco`),
 )
 
 // generate a random project title
@@ -288,7 +288,7 @@ onMounted(() => {
           <a-input v-model:value="formState.dataSource.connection.searchPath[0]" size="small" />
         </a-form-item>
 
-        <a-collapse ghost expand-icon-position="right">
+        <a-collapse ghost expand-icon-position="right" class="mt-6">
           <a-collapse-panel key="1" :header="$t('title.advancedParameters')">
             <!--            todo:  add in i18n -->
             <a-form-item label="SSL mode">
@@ -333,18 +333,18 @@ onMounted(() => {
             <input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect('cert', certFileInput)" />
             <input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect('key', keyFileInput)" />
 
-            <a-form-item :label="$t('labels.inflection.tableName')" v-bind="validateInfos['dataSource.client']">
+            <a-form-item :label="$t('labels.inflection.tableName')">
               <a-select v-model:value="formState.inflection.inflection_table" size="small" @change="onClientChange">
                 <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')" v-bind="validateInfos['dataSource.type']">
+            <a-form-item :label="$t('labels.inflection.columnName')">
               <a-select v-model:value="formState.inflection.inflection_column" size="small" @change="onClientChange">
                 <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 size="small" @click="configEditDlg = true">
+              <a-button size="small" class="!shadow-md" @click="configEditDlg = true">
                 <!-- Edit connection JSON -->
                 {{ $t('activity.editConnJson') }}
               </a-button>
@@ -355,8 +355,8 @@ onMounted(() => {
 
       <a-form-item class="flex justify-center mt-5">
         <div class="flex justify-center gap-2">
-          <a-button type="primary" :disabled="!testSuccess" @click="createProject">Submit</a-button>
           <a-button type="primary" @click="testConnection">Test Connection</a-button>
+          <a-button type="primary" :disabled="!testSuccess" @click="createProject">Submit</a-button>
         </div>
       </a-form-item>
     </a-form>
@@ -375,10 +375,18 @@ onMounted(() => {
 }
 
 :deep(.ant-collapse-content-box) {
-  @apply !pr-0;
+  @apply !px-0;
 }
 
 :deep(.ant-form-item-explain-error) {
   @apply !text-xs;
 }
+
+:deep(.ant-form-item) {
+  @apply mb-2;
+}
+
+:deep(.ant-form-item-with-help .ant-form-item-explain) {
+  @apply !min-h-0;
+}
 </style>

From bfbd8d65b80d187ee4464bf4582a79a313d71856 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 21 Jul 2022 01:31:26 +0530
Subject: [PATCH 29/46] fix(gui-v2): implement project list similar to v1

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |   5 +
 packages/nc-gui-v2/pages/index/index.vue      | 182 ++++++++----------
 packages/nc-gui-v2/pages/index/projects.vue   | 151 +++++++++++++++
 .../pages/index/{index => projects}/index.vue |   0
 .../pages/index/{index => projects}/list.vue  |   0
 5 files changed, 240 insertions(+), 98 deletions(-)
 create mode 100644 packages/nc-gui-v2/pages/index/projects.vue
 rename packages/nc-gui-v2/pages/index/{index => projects}/index.vue (100%)
 rename packages/nc-gui-v2/pages/index/{index => projects}/list.vue (100%)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 6aac211ad0..18c354d703 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -20,6 +20,7 @@ declare module '@vue/runtime-core' {
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
+    AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
@@ -31,8 +32,12 @@ declare module '@vue/runtime-core' {
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ATable: typeof import('ant-design-vue/es')['Table']
+    ATableColumn: typeof import('ant-design-vue/es')['TableColumn']
+    ATableColumnGroup: typeof import('ant-design-vue/es')['TableColumnGroup']
+    ATag: typeof import('ant-design-vue/es')['Tag']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index a0812c0ace..7d353de95e 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -2,48 +2,39 @@
 import { Modal } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
-import { navigateTo } from '#app'
+import { computed, onMounted } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded'
-import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
+
+import MdiDeleteOutline from '~icons/mdi/delete-outline'
+import MdiEditOutline from '~icons/mdi/edit-outline'
+import MdiRefresh from '~icons/mdi/refresh'
+import MdiMenuDown from '~icons/mdi/menu-down'
 import MdiPlus from '~icons/mdi/plus'
 import MdiDatabaseOutline from '~icons/mdi/database-outline'
-import MdiFolderOutline from '~icons/mdi/folder-outline'
-
-const navDrawerOptions = [
-  {
-    title: 'My NocoDB',
-    icon: MdiFolderOutline,
-  },
-  /* todo: implement the api and bring back the options below
-   {
-    title: "Shared With Me",
-    icon: MdiAccountGroup
-  },
-  {
-    title: "Recent",
-    icon: MdiClockOutline
-  },
-  {
-    title: "Starred",
-    icon: MdiStar
-  } */
-]
-
-const route = useRoute()
-
-const { $api, $state } = useNuxtApp()
+
+const { $api } = useNuxtApp()
 const toast = useToast()
 
-$state.sidebarOpen.value = false
+const filterQuery = ref('')
+const loading = ref(true)
+const projects = ref()
+
+const loadProjects = async () => {
+  loading.value = true
+  const response = await $api.project.list({})
+  projects.value = response.list
+  loading.value = false
+}
+
+const filteredProjects = computed(() => {
+  return projects.value.filter(
+    (project) => !filterQuery.value || project.title?.toLowerCase?.().includes(filterQuery.value.toLowerCase()),
+  )
+})
 
-const response = await $api.project.list({})
-const projects = $ref(response.list)
-const activePage = $ref(navDrawerOptions[0].title)
 const deleteProject = (project: ProjectType) => {
   Modal.confirm({
     title: 'Do you want to delete the project?',
-    // icon: createVNode(ExclamationCircleOutlined),
     content: 'Some descriptions',
     okText: 'Yes',
     okType: 'danger',
@@ -59,26 +50,39 @@ const deleteProject = (project: ProjectType) => {
   })
 }
 
-const visible = ref(true)
+onMounted(() => {
+  loadProjects()
+})
 </script>
 
 <template>
   <NuxtLayout>
-    <template #sidebar>
-      <div class="flex flex-col h-full">
-        <div class="flex p-4">
-          <v-menu class="select-none">
-            <template #activator="{ props }">
-              <div
-                class="color-transition hover:(bg-gray-100 dark:bg-secondary/25) dark:(bg-secondary/50 !text-white shadow-gray-600) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
-                @click="props.onClick"
-              >
-                <MdiPlus class="text-primary dark:(!text-white) text-2xl" />
-                {{ $t('title.newProj') }}
-              </div>
-            </template>
+    <a-card class="mx-auto mt-5 !max-w-[600px] shadow-lg">
+      <h1 class="text-center text-4xl pa-2 nc-project-page-title flex align-center justify-center gap-2">
+        <!-- My Projects -->
+        <b>{{ $t('title.myProject') }}</b>
+
+        <MdiRefresh class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer" @click="loadProjects"></MdiRefresh>
+      </h1>
+
+      <div class="flex mb-6">
+        <a-input-search
+          v-model:value="filterQuery"
+          class="max-w-[200px] nc-project-page-search"
+          :placeholder="$t('activity.searchProject')"
+        ></a-input-search>
+        <div class="flex-grow"></div>
+
+        <a-dropdown @click.stop>
+          <a-button
+            >
+            <div class="flex align-center" >{{ $t('title.newProj') }}
+            <MdiMenuDown class="menu-icon" />
+            </div>
+          </a-button>
 
-            <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
+          <template #overlay>
+            <a-menu>
               <div
                 class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
                 @click="navigateTo('/project/create')"
@@ -93,58 +97,40 @@ const visible = ref(true)
                 <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
                 <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
               </div>
-            </v-list>
-          </v-menu>
-        </div>
-
-        <a-menu class="pr-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
-          <a-menu-item
-            v-for="(option, index) in navDrawerOptions"
-            :key="index"
-            class="!rounded-r-lg"
-            @click="activePage = option.title"
-          >
-            <div class="flex items-center gap-4">
-              <component :is="option.icon" />
-
-              <span class="font-semibold">
-                {{ option.title }}
-              </span>
-            </div>
-          </a-menu-item>
-        </a-menu>
-
-        <general-social />
-
-        <general-sponsors :nav="true" />
-      </div>
-    </template>
-
-    <v-container class="flex-1 mb-12">
-      <div class="flex">
-        <div class="flex-1 text-2xl md:text-4xl font-bold text-gray-500 dark:text-white p-4">
-          {{ activePage }}
-        </div>
-
-        <div class="self-end flex text-4xl mb-1">
-          <MaterialSymbolsGridView
-            :class="route.name === 'index-index' ? '!text-primary dark:(!text-secondary/75)' : ''"
-            class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
-            @click="navigateTo('/')"
-          />
-          <MaterialSymbolsFormatListBulletedRounded
-            :class="route.name === 'index-index-list' ? '!text-primary dark:(!text-secondary/75)' : ''"
-            class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
-            @click="navigateTo('/list')"
-          />
-        </div>
+            </a-menu>
+          </template>
+        </a-dropdown>
       </div>
 
-      <a-divider class="!mb-4 lg:(!mb-8)" />
-
-      <NuxtPage :projects="projects" @delete-project="deleteProject" />
-    </v-container>
+      <div v-if="loading">
+        <a-skeleton />
+      </div>
 
-    <a-modal></a-modal>
+      <a-table v-else :data-source="filteredProjects" :pagination="{ position: ['bottomCenter'] }">
+        <a-table-column key="title" title="Title" data-index="title">
+          <template #default="{ text }">
+            <div class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap" :title="text">{{ text }}</div>
+          </template>
+        </a-table-column>
+        <a-table-column key="id" title="Actions" data-index="id">
+          <template #default="{ text }">
+            <div class="flex align-center">
+              <MdiEditOutline class="nc-action-btn" @click.stop="navigateTo(`/project/${text}`)" />
+              <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(text)" />
+            </div>
+          </template>
+        </a-table-column>
+      </a-table>
+    </a-card>
   </NuxtLayout>
 </template>
+
+<style scoped>
+.nc-action-btn {
+  @apply text-gray-500 hover:text-primary mr-2 cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
+}
+
+:deep(.ant-table-cell) {
+  @apply py-1;
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/index/projects.vue b/packages/nc-gui-v2/pages/index/projects.vue
new file mode 100644
index 0000000000..70543bacd2
--- /dev/null
+++ b/packages/nc-gui-v2/pages/index/projects.vue
@@ -0,0 +1,151 @@
+<script lang="ts" setup>
+import { createVNode } from '@vue/runtime-core'
+import { Modal } from 'ant-design-vue'
+import type { ProjectType } from 'nocodb-sdk'
+import { useToast } from 'vue-toastification'
+import { navigateTo } from '#app'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded'
+import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
+import MdiPlus from '~icons/mdi/plus'
+import MdiDatabaseOutline from '~icons/mdi/database-outline'
+import MdiFolderOutline from '~icons/mdi/folder-outline'
+import ExclamationCircleOutlined from '~icons/mdi/information-outline'
+
+const navDrawerOptions = [
+  {
+    title: 'My NocoDB',
+    icon: MdiFolderOutline,
+  },
+  /* todo: implement the api and bring back the options below
+   {
+    title: "Shared With Me",
+    icon: MdiAccountGroup
+  },
+  {
+    title: "Recent",
+    icon: MdiClockOutline
+  },
+  {
+    title: "Starred",
+    icon: MdiStar
+  } */
+]
+
+const route = useRoute()
+
+const { $api } = useNuxtApp()
+const toast = useToast()
+
+const response = await $api.project.list({})
+const projects = $ref(response.list)
+const activePage = $ref(navDrawerOptions[0].title)
+const deleteProject = (project: ProjectType) => {
+  Modal.confirm({
+    title: 'Do you want to delete the project?',
+    // icon: createVNode(ExclamationCircleOutlined),
+    content: 'Some descriptions',
+    okText: 'Yes',
+    okType: 'danger',
+    cancelText: 'No',
+    async onOk() {
+      try {
+        await $api.project.delete(project.id as string)
+        projects.splice(projects.indexOf(project), 1)
+      } catch (e) {
+        toast.error(await extractSdkResponseErrorMsg(e))
+      }
+    },
+  })
+}
+
+console.log(route.name)
+const visible = ref(true)
+</script>
+
+<template>
+  <NuxtLayout>
+    <template #sidebar>
+      <div class="flex flex-col h-full">
+        <div class="flex p-4">
+          <v-menu class="select-none">
+            <template #activator="{ props }">
+              <div
+                class="color-transition hover:(bg-gray-100 dark:bg-secondary/25) dark:(bg-secondary/50 !text-white shadow-gray-600) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
+                @click="props.onClick"
+              >
+                <MdiPlus class="text-primary dark:(!text-white) text-2xl" />
+                {{ $t('title.newProj') }}
+              </div>
+            </template>
+
+            <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
+              <div
+                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                @click="navigateTo('/project/create')"
+              >
+                <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
+                <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
+              </div>
+              <div
+                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                @click="navigateTo('/project/create-external')"
+              >
+                <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
+                <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
+              </div>
+            </v-list>
+          </v-menu>
+        </div>
+
+        <a-menu class="pr-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
+          <a-menu-item
+            v-for="(option, index) in navDrawerOptions"
+            :key="index"
+            class="!rounded-r-lg"
+            @click="activePage = option.title"
+          >
+            <div class="flex items-center gap-4">
+              <component :is="option.icon" />
+
+              <span class="font-semibold">
+                {{ option.title }}
+              </span>
+            </div>
+          </a-menu-item>
+        </a-menu>
+
+        <general-social />
+
+        <general-sponsors :nav="true" />
+      </div>
+    </template>
+
+    <v-container class="flex-1 mb-12">
+      <div class="flex">
+        <div class="flex-1 text-2xl md:text-4xl font-bold text-gray-500 dark:text-white p-4">
+          {{ activePage }}
+        </div>
+
+        <div class="self-end flex text-4xl mb-1">
+          <MaterialSymbolsGridView
+            :class="route.name === 'index-index' ? '!text-primary dark:(!text-secondary/75)' : ''"
+            class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
+            @click="navigateTo('/')"
+          />
+          <MaterialSymbolsFormatListBulletedRounded
+            :class="route.name === 'index-index-list' ? '!text-primary dark:(!text-secondary/75)' : ''"
+            class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
+            @click="navigateTo('/list')"
+          />
+        </div>
+      </div>
+
+      <a-divider class="!mb-4 lg:(!mb-8)" />
+
+      <NuxtPage :projects="projects" @delete-project="deleteProject" />
+    </v-container>
+
+    <a-modal></a-modal>
+  </NuxtLayout>
+</template>
diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/projects/index.vue
similarity index 100%
rename from packages/nc-gui-v2/pages/index/index/index.vue
rename to packages/nc-gui-v2/pages/index/projects/index.vue
diff --git a/packages/nc-gui-v2/pages/index/index/list.vue b/packages/nc-gui-v2/pages/index/projects/list.vue
similarity index 100%
rename from packages/nc-gui-v2/pages/index/index/list.vue
rename to packages/nc-gui-v2/pages/index/projects/list.vue

From 5006f18f9cde97b6bf64391ce7412032778090c4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 21 Jul 2022 11:47:50 +0530
Subject: [PATCH 30/46] fix(gui-v2): project create/update/list corrections

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/index/index.vue      | 38 +++++++++++++------
 .../nc-gui-v2/pages/project/index/[id].vue    | 10 +++--
 .../nc-gui-v2/pages/project/index/create.vue  | 12 ++++--
 packages/nc-gui-v2/plugins/api.ts             |  4 +-
 4 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 7d353de95e..ca01d3bd8e 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -2,6 +2,7 @@
 import { Modal } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
+import { navigateTo } from '#app'
 import { computed, onMounted } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 
@@ -12,7 +13,7 @@ import MdiMenuDown from '~icons/mdi/menu-down'
 import MdiPlus from '~icons/mdi/plus'
 import MdiDatabaseOutline from '~icons/mdi/database-outline'
 
-const { $api } = useNuxtApp()
+const { $api, $state } = useNuxtApp()
 const toast = useToast()
 
 const filterQuery = ref('')
@@ -34,15 +35,14 @@ const filteredProjects = computed(() => {
 
 const deleteProject = (project: ProjectType) => {
   Modal.confirm({
-    title: 'Do you want to delete the project?',
-    content: 'Some descriptions',
+    title: `Do you want to delete '${project.title}' project?`,
     okText: 'Yes',
     okType: 'danger',
     cancelText: 'No',
     async onOk() {
       try {
         await $api.project.delete(project.id as string)
-        projects.splice(projects.indexOf(project), 1)
+        projects.value.splice(projects.value.indexOf(project), 1)
       } catch (e) {
         toast.error(await extractSdkResponseErrorMsg(e))
       }
@@ -53,6 +53,9 @@ const deleteProject = (project: ProjectType) => {
 onMounted(() => {
   loadProjects()
 })
+
+// hide sidebar
+$state.sidebarOpen.value = false
 </script>
 
 <template>
@@ -74,10 +77,10 @@ onMounted(() => {
         <div class="flex-grow"></div>
 
         <a-dropdown @click.stop>
-          <a-button
-            >
-            <div class="flex align-center" >{{ $t('title.newProj') }}
-            <MdiMenuDown class="menu-icon" />
+          <a-button>
+            <div class="flex align-center">
+              {{ $t('title.newProj') }}
+              <MdiMenuDown class="menu-icon" />
             </div>
           </a-button>
 
@@ -106,17 +109,26 @@ onMounted(() => {
         <a-skeleton />
       </div>
 
-      <a-table v-else :data-source="filteredProjects" :pagination="{ position: ['bottomCenter'] }">
+      <a-table
+        v-else
+        :custom-row="
+          (record) => ({
+            onClick: () => navigateTo(`/nc/${record.id}`),
+          })
+        "
+        :data-source="filteredProjects"
+        :pagination="{ position: ['bottomCenter'] }"
+      >
         <a-table-column key="title" title="Title" data-index="title">
           <template #default="{ text }">
             <div class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap" :title="text">{{ text }}</div>
           </template>
         </a-table-column>
         <a-table-column key="id" title="Actions" data-index="id">
-          <template #default="{ text }">
+          <template #default="{ text, record }">
             <div class="flex align-center">
               <MdiEditOutline class="nc-action-btn" @click.stop="navigateTo(`/project/${text}`)" />
-              <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(text)" />
+              <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
             </div>
           </template>
         </a-table-column>
@@ -133,4 +145,8 @@ onMounted(() => {
 :deep(.ant-table-cell) {
   @apply py-1;
 }
+
+:deep(.ant-table-row) {
+  @apply cursor-pointer;
+}
 </style>
diff --git a/packages/nc-gui-v2/pages/project/index/[id].vue b/packages/nc-gui-v2/pages/project/index/[id].vue
index 581201b845..fca09dec64 100644
--- a/packages/nc-gui-v2/pages/project/index/[id].vue
+++ b/packages/nc-gui-v2/pages/project/index/[id].vue
@@ -3,6 +3,7 @@ import { onMounted } from '@vue/runtime-core'
 import type { Form } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { ref } from 'vue'
+import { useToast } from 'vue-toastification'
 import { navigateTo, useNuxtApp, useRoute } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { projectTitleValidator } from '~/utils/projectCreateUtils'
@@ -10,7 +11,8 @@ import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-l
 
 const loading = ref(false)
 
-const { $api, $toast, $state } = useNuxtApp()
+const { $api, $state } = useNuxtApp()
+const toast = useToast()
 const route = useRoute()
 
 const nameValidationRules = [
@@ -30,7 +32,7 @@ const getProject = async () => {
     const result: ProjectType = await $api.project.read(route.params.id as string)
     formState.title = result.title as string
   } catch (e: any) {
-    $toast.error(await extractSdkResponseErrorMsg(e))
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
 }
 const renameProject = async () => {
@@ -40,7 +42,7 @@ const renameProject = async () => {
 
     navigateTo(`/nc/${route.params.id}`)
   } catch (e) {
-    $toast.error(await extractSdkResponseErrorMsg(e)).goAway(3000)
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
   loading.value = false
 }
@@ -68,7 +70,7 @@ onMounted(async () => {
   <a-card class="w-[500px] mx-auto !mt-100px shadow-md">
     <h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.editProject') }}</h3>
 
-    <a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="renameProject">
+    <a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @finish="renameProject">
       <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10">
         <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>
diff --git a/packages/nc-gui-v2/pages/project/index/create.vue b/packages/nc-gui-v2/pages/project/index/create.vue
index f1447d9f02..564b2aeb91 100644
--- a/packages/nc-gui-v2/pages/project/index/create.vue
+++ b/packages/nc-gui-v2/pages/project/index/create.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, onUpdated } from '@vue/runtime-core'
 import type { Form } from 'ant-design-vue'
+import { useToast } from 'vue-toastification'
 import { nextTick, ref } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -11,7 +12,8 @@ const name = ref('')
 const loading = ref(false)
 const valid = ref(false)
 
-const { $api, $toast, $state } = useNuxtApp()
+const { $api, $state } = useNuxtApp()
+const toast = useToast()
 
 const nameValidationRules = [
   {
@@ -32,9 +34,11 @@ const createProject = async () => {
       title: formState.title,
     })
 
+    debugger
     await navigateTo(`/nc/${result.id}`)
   } catch (e: any) {
-    $toast.error(await extractSdkResponseErrorMsg(e)).goAway(3000)
+    debugger
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
   loading.value = false
 }
@@ -42,7 +46,7 @@ const createProject = async () => {
 const form = ref<typeof Form>()
 
 // hide sidebar
-// $state.sidebarOpen.value = false
+$state.sidebarOpen.value = false
 
 // select and focus title field on load
 onMounted(async () => {
@@ -61,7 +65,7 @@ onMounted(async () => {
   <a-card class="w-[500px] mx-auto !mt-100px shadow-md">
     <h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.createProject') }}</h3>
 
-    <a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="createProject">
+    <a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @finish="createProject">
       <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10">
         <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>
diff --git a/packages/nc-gui-v2/plugins/api.ts b/packages/nc-gui-v2/plugins/api.ts
index 16b352fbca..be280baadd 100644
--- a/packages/nc-gui-v2/plugins/api.ts
+++ b/packages/nc-gui-v2/plugins/api.ts
@@ -43,14 +43,14 @@ function addAxiosInterceptors(api: Api<any>, app: { $state: GlobalState }) {
 
       // Return any error which is not due to authentication back to the calling service
       if (!error.response || error.response.status !== 401) {
-        return error
+        return Promise.reject(error)
       }
 
       // Logout user if token refresh didn't work or user is disabled
       if (error.config.url === '/auth/refresh-token') {
         app.$state.signOut()
 
-        return error
+        return Promise.reject(error)
       }
 
       // Try request again with new token

From 5b122eebe005c7b5200622d21b051ff98fb1d72f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 21 Jul 2022 12:58:51 +0530
Subject: [PATCH 31/46] refactor(gui-v2): better form name

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/project/index/create-external.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/project/index/create-external.vue b/packages/nc-gui-v2/pages/project/index/create-external.vue
index 200a2b0fb2..c1c6c45061 100644
--- a/packages/nc-gui-v2/pages/project/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@@ -223,7 +223,7 @@ onMounted(() => {
     <a-form
       ref="form"
       :model="formState"
-      name="validate_other"
+      name="external-project-create-form"
       layout="horizontal"
       :label-col="{ span: 8 }"
       :wrapper-col="{ span: 18 }"

From 033dc774bdbe75496928f33f3280806a1a098d25 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 21 Jul 2022 13:31:05 +0530
Subject: [PATCH 32/46] refactor(gui-v2): move projects(tile and list) pages

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/pages/{index/projects.vue => projects/index.vue}    | 0
 .../nc-gui-v2/pages/{index/projects => projects/index}/index.vue  | 0
 .../nc-gui-v2/pages/{index/projects => projects/index}/list.vue   | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/nc-gui-v2/pages/{index/projects.vue => projects/index.vue} (100%)
 rename packages/nc-gui-v2/pages/{index/projects => projects/index}/index.vue (100%)
 rename packages/nc-gui-v2/pages/{index/projects => projects/index}/list.vue (100%)

diff --git a/packages/nc-gui-v2/pages/index/projects.vue b/packages/nc-gui-v2/pages/projects/index.vue
similarity index 100%
rename from packages/nc-gui-v2/pages/index/projects.vue
rename to packages/nc-gui-v2/pages/projects/index.vue
diff --git a/packages/nc-gui-v2/pages/index/projects/index.vue b/packages/nc-gui-v2/pages/projects/index/index.vue
similarity index 100%
rename from packages/nc-gui-v2/pages/index/projects/index.vue
rename to packages/nc-gui-v2/pages/projects/index/index.vue
diff --git a/packages/nc-gui-v2/pages/index/projects/list.vue b/packages/nc-gui-v2/pages/projects/index/list.vue
similarity index 100%
rename from packages/nc-gui-v2/pages/index/projects/list.vue
rename to packages/nc-gui-v2/pages/projects/index/list.vue

From 2060e04f316db73d85126d1b573e43889c793f5e Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 21 Jul 2022 15:08:20 +0530
Subject: [PATCH 33/46] refactor: i18n corrections

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/pages/index/index.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index ca01d3bd8e..2300cef20a 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -119,12 +119,14 @@ $state.sidebarOpen.value = false
         :data-source="filteredProjects"
         :pagination="{ position: ['bottomCenter'] }"
       >
-        <a-table-column key="title" title="Title" data-index="title">
+        <!--        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" :title="text">{{ text }}</div>
           </template>
         </a-table-column>
-        <a-table-column key="id" title="Actions" data-index="id">
+        <!--        Actions -->
+        <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
           <template #default="{ text, record }">
             <div class="flex align-center">
               <MdiEditOutline class="nc-action-btn" @click.stop="navigateTo(`/project/${text}`)" />

From 3ab5ff0b798addba2ea88e06aa5baa7a50f11b9b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 21 Jul 2022 15:14:15 +0530
Subject: [PATCH 34/46] refactor(gui-v2): validation message update and code
 cleanup

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/index/index.vue      | 23 +++++++++++++++----
 .../nc-gui-v2/pages/project/index/[id].vue    |  4 ++--
 .../pages/project/index/create-external.vue   |  2 +-
 .../nc-gui-v2/pages/project/index/create.vue  |  7 +++---
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 2300cef20a..f8f11a4645 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -13,7 +13,7 @@ import MdiMenuDown from '~icons/mdi/menu-down'
 import MdiPlus from '~icons/mdi/plus'
 import MdiDatabaseOutline from '~icons/mdi/database-outline'
 
-const { $api, $state } = useNuxtApp()
+const { $api, $state, $e } = useNuxtApp()
 const toast = useToast()
 
 const filterQuery = ref('')
@@ -34,6 +34,7 @@ const filteredProjects = computed(() => {
 })
 
 const deleteProject = (project: ProjectType) => {
+  $e('c:project:delete')
   Modal.confirm({
     title: `Do you want to delete '${project.title}' project?`,
     okText: 'Yes',
@@ -41,6 +42,7 @@ const deleteProject = (project: ProjectType) => {
     cancelText: 'No',
     async onOk() {
       try {
+        $e('c:project:delete')
         await $api.project.delete(project.id as string)
         projects.value.splice(projects.value.indexOf(project), 1)
       } catch (e) {
@@ -65,7 +67,11 @@ $state.sidebarOpen.value = false
         <!-- My Projects -->
         <b>{{ $t('title.myProject') }}</b>
 
-        <MdiRefresh class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer" @click="loadProjects"></MdiRefresh>
+        <MdiRefresh
+          v-t="['a:project:refresh']"
+          class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer"
+          @click="loadProjects"
+        ></MdiRefresh>
       </h1>
 
       <div class="flex mb-6">
@@ -87,6 +93,7 @@ $state.sidebarOpen.value = false
           <template #overlay>
             <a-menu>
               <div
+                v-t="['c:project:create:xcdb']"
                 class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
                 @click="navigateTo('/project/create')"
               >
@@ -94,6 +101,7 @@ $state.sidebarOpen.value = false
                 <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
               </div>
               <div
+                v-t="['c:project:create:extdb']"
                 class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
                 @click="navigateTo('/project/create-external')"
               >
@@ -113,7 +121,10 @@ $state.sidebarOpen.value = false
         v-else
         :custom-row="
           (record) => ({
-            onClick: () => navigateTo(`/nc/${record.id}`),
+            onClick: () => {
+              $e('a:project:open');
+              navigateTo(`/nc/${record.id}`),
+            }
           })
         "
         :data-source="filteredProjects"
@@ -129,7 +140,11 @@ $state.sidebarOpen.value = false
         <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
           <template #default="{ text, record }">
             <div class="flex align-center">
-              <MdiEditOutline class="nc-action-btn" @click.stop="navigateTo(`/project/${text}`)" />
+              <MdiEditOutline
+                v-t="['c:project:edit:rename']"
+                class="nc-action-btn"
+                @click.stop="navigateTo(`/project/${text}`)"
+              />
               <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
             </div>
           </template>
diff --git a/packages/nc-gui-v2/pages/project/index/[id].vue b/packages/nc-gui-v2/pages/project/index/[id].vue
index fca09dec64..275063de66 100644
--- a/packages/nc-gui-v2/pages/project/index/[id].vue
+++ b/packages/nc-gui-v2/pages/project/index/[id].vue
@@ -18,7 +18,7 @@ const route = useRoute()
 const nameValidationRules = [
   {
     required: true,
-    message: 'Title is required',
+    message: 'Project name is required',
   },
   projectTitleValidator,
 ]
@@ -76,7 +76,7 @@ onMounted(async () => {
       </a-form-item>
 
       <a-form-item style="text-align: center" class="mt-2">
-        <a-button type="primary" html-type="submit" class="mx-auto flex justify-self-center">
+        <a-button v-t="['a:project:edit:rename']" type="primary" html-type="submit" class="mx-auto flex justify-self-center">
           <MaterialSymbolsRocketLaunchOutline class="mr-1" />
           <span> {{ $t('general.edit') }} </span></a-button
         >
diff --git a/packages/nc-gui-v2/pages/project/index/create-external.vue b/packages/nc-gui-v2/pages/project/index/create-external.vue
index c1c6c45061..3b9c553356 100644
--- a/packages/nc-gui-v2/pages/project/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@@ -41,7 +41,7 @@ const validators = computed(() => {
     'title': [
       {
         required: true,
-        message: 'Please input project title',
+        message: 'Project name is required',
       },
       projectTitleValidator,
     ],
diff --git a/packages/nc-gui-v2/pages/project/index/create.vue b/packages/nc-gui-v2/pages/project/index/create.vue
index 564b2aeb91..57c2086851 100644
--- a/packages/nc-gui-v2/pages/project/index/create.vue
+++ b/packages/nc-gui-v2/pages/project/index/create.vue
@@ -12,13 +12,13 @@ const name = ref('')
 const loading = ref(false)
 const valid = ref(false)
 
-const { $api, $state } = useNuxtApp()
+const { $api, $state, $e } = useNuxtApp()
 const toast = useToast()
 
 const nameValidationRules = [
   {
     required: true,
-    message: 'Title is required',
+    message: 'Project name is required',
   },
   projectTitleValidator,
 ]
@@ -28,16 +28,15 @@ const formState = reactive({
 })
 
 const createProject = async () => {
+  $e('a:project:create:xcdb')
   loading.value = true
   try {
     const result = await $api.project.create({
       title: formState.title,
     })
 
-    debugger
     await navigateTo(`/nc/${result.id}`)
   } catch (e: any) {
-    debugger
     toast.error(await extractSdkResponseErrorMsg(e))
   }
   loading.value = false

From 70994f8ed886a5417905c022e8f945f7a15ac293 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 21 Jul 2022 15:28:47 +0530
Subject: [PATCH 35/46] fix(gui-v2): layout correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/index/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index f8f11a4645..9e32e0bc2a 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -122,9 +122,9 @@ $state.sidebarOpen.value = false
         :custom-row="
           (record) => ({
             onClick: () => {
-              $e('a:project:open');
-              navigateTo(`/nc/${record.id}`),
-            }
+              $e('a:project:open')
+              navigateTo(`/nc/${record.id}`)
+            },
           })
         "
         :data-source="filteredProjects"

From c3197f55ca5f24e902473c5a012bebf3d5e60a14 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 21 Jul 2022 15:35:17 +0530
Subject: [PATCH 36/46] fix: project name can't start with a space

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/utils/projectCreateUtils.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/nc-gui-v2/utils/projectCreateUtils.ts b/packages/nc-gui-v2/utils/projectCreateUtils.ts
index a7ec2eb682..ceb4505ccb 100644
--- a/packages/nc-gui-v2/utils/projectCreateUtils.ts
+++ b/packages/nc-gui-v2/utils/projectCreateUtils.ts
@@ -180,6 +180,10 @@ export const projectTitleValidator = {
     if (value?.length > 50) {
       callback('Project name exceeds 50 characters')
     }
+    if (value[0] === ' ') {
+      callback('Project name cannot start with space')
+    }
+
     callback()
   },
 }

From 861568d8dc4a2b9baeaba7c9c204ce6edb624d4c Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 21 Jul 2022 19:06:07 +0530
Subject: [PATCH 37/46] refactor: icon center align

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/pages/project/index/create.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/pages/project/index/create.vue b/packages/nc-gui-v2/pages/project/index/create.vue
index 57c2086851..e65b3c27a0 100644
--- a/packages/nc-gui-v2/pages/project/index/create.vue
+++ b/packages/nc-gui-v2/pages/project/index/create.vue
@@ -70,10 +70,12 @@ onMounted(async () => {
       </a-form-item>
 
       <a-form-item style="text-align: center" class="mt-2">
-        <a-button type="primary" html-type="submit" class="mx-auto flex justify-self-center">
-          <MaterialSymbolsRocketLaunchOutline class="mr-1" />
-          <span> {{ $t('general.create') }} </span></a-button
-        >
+        <a-button type="primary" html-type="submit">
+          <div class="flex items-center">
+            <MaterialSymbolsRocketLaunchOutline class="mr-1" />
+            {{ $t('general.create') }}
+          </div>
+        </a-button>
       </a-form-item>
     </a-form>
   </a-card>

From c014915aebe2153ba3f741c85a9ba7bc3e298309 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 20 Jul 2022 20:34:17 +0200
Subject: [PATCH 38/46] refactor(gui-v2): disable dark mode

# What's changed?

* remove color mode toggle from header
* set preferred color scheme to light
---
 packages/nc-gui-v2/app.vue                       | 2 --
 packages/nc-gui-v2/composables/useGlobalState.ts | 8 +++++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 6802ad4ada..e8aca25950 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -55,8 +55,6 @@ const sidebarOpen = computed({
       <div class="flex-1" />
 
       <div class="flex justify-end gap-4">
-        <general-color-mode-switcher v-model="$state.darkMode.value" />
-
         <general-language class="mr-3" />
 
         <template v-if="$state.signedIn.value">
diff --git a/packages/nc-gui-v2/composables/useGlobalState.ts b/packages/nc-gui-v2/composables/useGlobalState.ts
index fbcb9baf6f..e2620bb958 100644
--- a/packages/nc-gui-v2/composables/useGlobalState.ts
+++ b/packages/nc-gui-v2/composables/useGlobalState.ts
@@ -1,4 +1,4 @@
-import { breakpointsTailwind, usePreferredDark, usePreferredLanguages, useStorage } from '@vueuse/core'
+import { breakpointsTailwind, usePreferredLanguages, useStorage } from '@vueuse/core'
 import { useJwt } from '@vueuse/integrations/useJwt'
 import type { JwtPayload } from 'jwt-decode'
 import { computed, ref, toRefs, useBreakpoints, useNuxtApp, useTimestamp, watch } from '#imports'
@@ -25,8 +25,10 @@ const storageKey = 'nocodb-gui-v2'
 export const useGlobalState = (): GlobalState => {
   /** get the preferred languages of a user, according to browser settings */
   const preferredLanguages = $(usePreferredLanguages())
-  /** get the preferred dark mode setting, according to browser settings */
-  const prefersDarkMode = $(usePreferredDark())
+  /** todo: reimplement; get the preferred dark mode setting, according to browser settings */
+  //   const prefersDarkMode = $(usePreferredDark())
+
+  const prefersDarkMode = false
   /** get current breakpoints (for enabling sidebar) */
   const breakpoints = useBreakpoints(breakpointsTailwind)
 

From c5b99a056b5580228129d0aa7f2447f6ab285f50 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 21 Jul 2022 15:37:35 +0530
Subject: [PATCH 39/46] feat(gui-v2): load team and auth tab

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/dashboard/TabView.vue | 3 ++-
 packages/nc-gui-v2/components/tabs/Auth.vue         | 5 +++++
 packages/nc-gui-v2/composables/useTabs.ts           | 4 ++--
 packages/nc-gui-v2/pages/nc/[projectId].vue         | 3 ++-
 4 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/tabs/Auth.vue

diff --git a/packages/nc-gui-v2/components/dashboard/TabView.vue b/packages/nc-gui-v2/components/dashboard/TabView.vue
index 058e9e6067..02bc289ac9 100644
--- a/packages/nc-gui-v2/components/dashboard/TabView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TabView.vue
@@ -20,7 +20,8 @@ const tableCreateDialog = ref(false)
 
     <v-window v-model="activeTab">
       <v-window-item v-for="(tab, i) in tabs" :key="i" :value="i">
-        <TabsSmartsheet :tab-meta="tab" />
+        <TabsAuth v-if="tab.type === 'auth'" :tab-meta="tab" />
+        <TabsSmartsheet v-else :tab-meta="tab" />
       </v-window-item>
     </v-window>
   </div>
diff --git a/packages/nc-gui-v2/components/tabs/Auth.vue b/packages/nc-gui-v2/components/tabs/Auth.vue
new file mode 100644
index 0000000000..11a17bc2e2
--- /dev/null
+++ b/packages/nc-gui-v2/components/tabs/Auth.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2 class="text-3xl mt-3">Team & Auth</h2>
+  </div>
+</template>
diff --git a/packages/nc-gui-v2/composables/useTabs.ts b/packages/nc-gui-v2/composables/useTabs.ts
index a248877449..ad9f82e1ee 100644
--- a/packages/nc-gui-v2/composables/useTabs.ts
+++ b/packages/nc-gui-v2/composables/useTabs.ts
@@ -1,9 +1,9 @@
 import { useState } from '#app'
 
 export interface TabItem {
-  type: 'table' | 'view'
+  type: 'table' | 'view' | 'auth'
   title: string
-  id: string
+  id?: string
 }
 
 export default () => {
diff --git a/packages/nc-gui-v2/pages/nc/[projectId].vue b/packages/nc-gui-v2/pages/nc/[projectId].vue
index de83fdb7ec..098fd21982 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId].vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId].vue
@@ -5,11 +5,12 @@ import useTabs from '~/composables/useTabs'
 
 const route = useRoute()
 const { loadProject, loadTables } = useProject()
-const { clearTabs } = useTabs()
+const { clearTabs, addTab } = useTabs()
 
 onMounted(async () => {
   await loadProject(route.params.projectId as string)
   await loadTables()
+  addTab({ type: 'auth', title: 'Team & Auth' })
 })
 
 watch(

From 4264f8c37eee0523e55881bbf1695b021b2217af Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 16:24:37 +0530
Subject: [PATCH 40/46] refactor(gui-v2): ui improvements

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/projects/index/list.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/pages/projects/index/list.vue b/packages/nc-gui-v2/pages/projects/index/list.vue
index d69159b566..c00d0f7ffe 100644
--- a/packages/nc-gui-v2/pages/projects/index/list.vue
+++ b/packages/nc-gui-v2/pages/projects/index/list.vue
@@ -22,7 +22,7 @@ const openProject = async (project: ProjectType) => {
 </script>
 
 <template>
-  <div class="grid grid-cols-4 gap-2 prose-md p-2 font-semibold">
+  <div class="grid grid-cols-3 gap-2 prose-md p-2 font-semibold">
     <div>{{ $t('general.title') }}</div>
     <div>Updated At</div>
     <div></div>
@@ -32,12 +32,12 @@ const openProject = async (project: ProjectType) => {
 
   <template v-for="project of projects" :key="project.id">
     <div
-      class="cursor-pointer grid grid-cols-4 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 transition-color ease-in duration-100"
+      class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 transition-color ease-in duration-100"
       @click="openProject(project)"
     >
-      <div class="font-semibold">{{ project.title || 'Untitled' }}</div>
+      <div class="font-semibold capitalize">{{ project.title || 'Untitled' }}</div>
       <div>{{ project.updated_at }}</div>
-      <div>
+      <div class="flex justify-center">
         <MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop @click="emit('delete-project', project)" />
         <MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop />
       </div>

From 17955fe981d11efa971adbfffd2d844fe9810801 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 17:08:54 +0530
Subject: [PATCH 41/46] feat(gui-v2): add project title edit page

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/project/index/[id].vue  | 2 +-
 packages/nc-gui-v2/pages/projects/index/list.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/pages/project/index/[id].vue b/packages/nc-gui-v2/pages/project/index/[id].vue
index 275063de66..b3b68fbc60 100644
--- a/packages/nc-gui-v2/pages/project/index/[id].vue
+++ b/packages/nc-gui-v2/pages/project/index/[id].vue
@@ -76,7 +76,7 @@ onMounted(async () => {
       </a-form-item>
 
       <a-form-item style="text-align: center" class="mt-2">
-        <a-button v-t="['a:project:edit:rename']" type="primary" html-type="submit" class="mx-auto flex justify-self-center">
+        <a-button type="primary" html-type="submit" class="mx-auto flex justify-self-center">
           <MaterialSymbolsRocketLaunchOutline class="mr-1" />
           <span> {{ $t('general.edit') }} </span></a-button
         >
diff --git a/packages/nc-gui-v2/pages/projects/index/list.vue b/packages/nc-gui-v2/pages/projects/index/list.vue
index c00d0f7ffe..73ce75c13a 100644
--- a/packages/nc-gui-v2/pages/projects/index/list.vue
+++ b/packages/nc-gui-v2/pages/projects/index/list.vue
@@ -38,8 +38,8 @@ const openProject = async (project: ProjectType) => {
       <div class="font-semibold capitalize">{{ project.title || 'Untitled' }}</div>
       <div>{{ project.updated_at }}</div>
       <div class="flex justify-center">
-        <MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop @click="emit('delete-project', project)" />
-        <MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop />
+        <MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop="emit('delete-project', project)" />
+        <MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop="navigateTo(`/project/${project.id}`)" />
       </div>
     </div>
     <v-divider class="col-span-3" />

From a23bb3dcb2926ee85cca854d832518ddba234120 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 20 Jul 2022 18:10:32 +0530
Subject: [PATCH 42/46] refactor(gui-v2): list view dark theme improvement,
 replace v-divider

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/projects/index/list.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/pages/projects/index/list.vue b/packages/nc-gui-v2/pages/projects/index/list.vue
index 73ce75c13a..c91a629b3c 100644
--- a/packages/nc-gui-v2/pages/projects/index/list.vue
+++ b/packages/nc-gui-v2/pages/projects/index/list.vue
@@ -28,11 +28,11 @@ const openProject = async (project: ProjectType) => {
     <div></div>
   </div>
 
-  <v-divider class="col-span-3" />
+  <div class="col-span-3 w-full h-[1px] bg-gray-500/50" />
 
   <template v-for="project of projects" :key="project.id">
     <div
-      class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 transition-color ease-in duration-100"
+      class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-300/30 dark:bg-gray-500/30 shadow-sm) p-2 transition-color ease-in duration-100"
       @click="openProject(project)"
     >
       <div class="font-semibold capitalize">{{ project.title || 'Untitled' }}</div>
@@ -42,6 +42,6 @@ const openProject = async (project: ProjectType) => {
         <MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop="navigateTo(`/project/${project.id}`)" />
       </div>
     </div>
-    <v-divider class="col-span-3" />
+    <div class="col-span-3 w-full h-[1px] bg-gray-500/30" />
   </template>
 </template>

From d0342cf6e0b8ad3d67341e1168b4579096c66279 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Jul 2022 15:53:11 +0200
Subject: [PATCH 43/46] fix(gui-v2): wrap list page to avoid transition error

---
 .../nc-gui-v2/pages/projects/index/list.vue   | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui-v2/pages/projects/index/list.vue b/packages/nc-gui-v2/pages/projects/index/list.vue
index c91a629b3c..2dcb96680b 100644
--- a/packages/nc-gui-v2/pages/projects/index/list.vue
+++ b/packages/nc-gui-v2/pages/projects/index/list.vue
@@ -22,26 +22,28 @@ const openProject = async (project: ProjectType) => {
 </script>
 
 <template>
-  <div class="grid grid-cols-3 gap-2 prose-md p-2 font-semibold">
-    <div>{{ $t('general.title') }}</div>
-    <div>Updated At</div>
-    <div></div>
-  </div>
+  <div>
+    <div class="grid grid-cols-3 gap-2 prose-md p-2 font-semibold">
+      <div>{{ $t('general.title') }}</div>
+      <div>Updated At</div>
+      <div></div>
+    </div>
 
-  <div class="col-span-3 w-full h-[1px] bg-gray-500/50" />
-
-  <template v-for="project of projects" :key="project.id">
-    <div
-      class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-300/30 dark:bg-gray-500/30 shadow-sm) p-2 transition-color ease-in duration-100"
-      @click="openProject(project)"
-    >
-      <div class="font-semibold capitalize">{{ project.title || 'Untitled' }}</div>
-      <div>{{ project.updated_at }}</div>
-      <div class="flex justify-center">
-        <MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop="emit('delete-project', project)" />
-        <MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop="navigateTo(`/project/${project.id}`)" />
+    <div class="col-span-3 w-full h-[1px] bg-gray-500/50" />
+
+    <template v-for="project of projects" :key="project.id">
+      <div
+        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-300/30 dark:bg-gray-500/30 shadow-sm) p-2 transition-color ease-in duration-100"
+        @click="openProject(project)"
+      >
+        <div class="font-semibold capitalize">{{ project.title || 'Untitled' }}</div>
+        <div>{{ project.updated_at }}</div>
+        <div class="flex justify-center">
+          <MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop="emit('delete-project', project)" />
+          <MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop="navigateTo(`/project/${project.id}`)" />
+        </div>
       </div>
-    </div>
-    <div class="col-span-3 w-full h-[1px] bg-gray-500/30" />
-  </template>
+      <div class="col-span-3 w-full h-[1px] bg-gray-500/30" />
+    </template>
+  </div>
 </template>

From 2f354efb60c88da2a8330793761b4e5da7b25ac3 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 21 Jul 2022 19:41:40 +0530
Subject: [PATCH 44/46] test: class name to assist cypress

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/pages/index/index.vue      | 10 ++++----
 .../pages/project/index/create-external.vue   | 23 ++++++++++++-------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 9e32e0bc2a..a2500756da 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -83,7 +83,7 @@ $state.sidebarOpen.value = false
         <div class="flex-grow"></div>
 
         <a-dropdown @click.stop>
-          <a-button>
+          <a-button class="nc-new-project-menu">
             <div class="flex align-center">
               {{ $t('title.newProj') }}
               <MdiMenuDown class="menu-icon" />
@@ -94,7 +94,7 @@ $state.sidebarOpen.value = false
             <a-menu>
               <div
                 v-t="['c:project:create:xcdb']"
-                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-xc-db-project"
                 @click="navigateTo('/project/create')"
               >
                 <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
@@ -102,7 +102,7 @@ $state.sidebarOpen.value = false
               </div>
               <div
                 v-t="['c:project:create:extdb']"
-                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-external-db-project"
                 @click="navigateTo('/project/create-external')"
               >
                 <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
@@ -133,7 +133,9 @@ $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" :title="text">{{ text }}</div>
+            <div class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap nc-project-row" :title="text">
+              {{ text }}
+            </div>
           </template>
         </a-table-column>
         <!--        Actions -->
diff --git a/packages/nc-gui-v2/pages/project/index/create-external.vue b/packages/nc-gui-v2/pages/project/index/create-external.vue
index 3b9c553356..b9dbfe2fc6 100644
--- a/packages/nc-gui-v2/pages/project/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@@ -229,11 +229,11 @@ onMounted(() => {
       :wrapper-col="{ span: 18 }"
     >
       <a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title">
-        <a-input v-model:value="formState.title" size="small" />
+        <a-input v-model:value="formState.title" size="small" 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" size="small" @change="onClientChange">
+        <a-select v-model:value="formState.dataSource.client" size="small" class="nc-extdb-db-type" @change="onClientChange">
           <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
             >{{ client.text }}
           </a-select-option>
@@ -252,22 +252,26 @@ onMounted(() => {
       <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" size="small" />
+          <a-input v-model:value="formState.dataSource.connection.host" size="small" 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" size="small" />
+          <a-input-number v-model:value="formState.dataSource.connection.port" class="!w-full nc-extdb-host-port" size="small" />
         </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" size="small" />
+          <a-input v-model:value="formState.dataSource.connection.user" size="small" 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" size="small" />
+          <a-input-password
+            v-model:value="formState.dataSource.connection.password"
+            size="small"
+            class="nc-extdb-host-password"
+          />
         </a-form-item>
 
         <!-- Database -->
@@ -277,6 +281,7 @@ onMounted(() => {
             v-model:value="formState.dataSource.connection.database"
             :placeholder="$t('labels.dbCreateIfNotExists')"
             size="small"
+            class="nc-extdb-host-database"
           />
         </a-form-item>
         <!-- Schema name -->
@@ -355,8 +360,10 @@ onMounted(() => {
 
       <a-form-item class="flex justify-center mt-5">
         <div class="flex justify-center gap-2">
-          <a-button type="primary" @click="testConnection">Test Connection</a-button>
-          <a-button type="primary" :disabled="!testSuccess" @click="createProject">Submit</a-button>
+          <a-button type="primary" class="nc-extdb-btn-test-connection" @click="testConnection">
+            {{ $t('activity.testDbConn') }}
+          </a-button>
+          <a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit" @click="createProject"> Submit </a-button>
         </div>
       </a-form-item>
     </a-form>

From 88483a82ede5b2ddfbda27b6b960211f08c30503 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 21 Jul 2022 19:42:17 +0530
Subject: [PATCH 45/46] refactor(gui-v2): set minimum table container height to
 avoid pagination component position change

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/index/index.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index a2500756da..698b7fa9cb 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -168,4 +168,8 @@ $state.sidebarOpen.value = false
 :deep(.ant-table-row) {
   @apply cursor-pointer;
 }
+
+:deep(.ant-table) {
+  @apply min-h-[428px];
+}
 </style>

From 24f5d57fdbdd1e26fbf9117aa25170655a42127d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 21 Jul 2022 20:31:43 +0530
Subject: [PATCH 46/46] refactor(gui-v2): corrections and improvements

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../monaco/{index.vue => Editor.vue}          |  0
 packages/nc-gui-v2/lib/types.ts               | 12 +++++--
 .../nc-gui-v2/pages/project/index/[id].vue    |  2 +-
 .../pages/project/index/create-external.vue   | 34 +++++++++----------
 .../nc-gui-v2/pages/project/index/create.vue  |  2 +-
 packages/nc-gui-v2/pages/projects/index.vue   |  1 -
 .../nc-gui-v2/utils/projectCreateUtils.ts     | 17 ----------
 packages/nc-gui-v2/utils/validation.ts        | 17 ++++++++++
 8 files changed, 45 insertions(+), 40 deletions(-)
 rename packages/nc-gui-v2/components/monaco/{index.vue => Editor.vue} (100%)

diff --git a/packages/nc-gui-v2/components/monaco/index.vue b/packages/nc-gui-v2/components/monaco/Editor.vue
similarity index 100%
rename from packages/nc-gui-v2/components/monaco/index.vue
rename to packages/nc-gui-v2/components/monaco/Editor.vue
diff --git a/packages/nc-gui-v2/lib/types.ts b/packages/nc-gui-v2/lib/types.ts
index 1dee9b2827..d68e7b9c55 100644
--- a/packages/nc-gui-v2/lib/types.ts
+++ b/packages/nc-gui-v2/lib/types.ts
@@ -33,7 +33,13 @@ export type ReadonlyState = Readonly<Pick<State, 'token' | 'user'>> & Omit<State
 
 export type GlobalState = Getters & Actions & ToRefs<ReadonlyState>
 
-export type ClientType = 'mysql2' | 'mssql' | 'pg' | 'sqlite3' | 'vitess'
+export enum ClientType {
+  MYSQL = 'mysql2',
+  MSSQL = 'mssql',
+  PG = 'pg',
+  SQLITE = 'sqlite3',
+  VITESS = 'vitess',
+}
 
 export interface ProjectCreateForm {
   title: string
@@ -59,8 +65,8 @@ export interface ProjectCreateForm {
         }
   }
   inflection: {
-    inflection_column?: string
-    inflection_table?: string
+    inflectionColumn?: string
+    inflectionTable?: string
   }
   sslUse?: any
 }
diff --git a/packages/nc-gui-v2/pages/project/index/[id].vue b/packages/nc-gui-v2/pages/project/index/[id].vue
index b3b68fbc60..96851d9da5 100644
--- a/packages/nc-gui-v2/pages/project/index/[id].vue
+++ b/packages/nc-gui-v2/pages/project/index/[id].vue
@@ -6,7 +6,7 @@ import { ref } from 'vue'
 import { useToast } from 'vue-toastification'
 import { navigateTo, useNuxtApp, useRoute } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { projectTitleValidator } from '~/utils/projectCreateUtils'
+import { projectTitleValidator } from '~/utils/validation'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 
 const loading = ref(false)
diff --git a/packages/nc-gui-v2/pages/project/index/create-external.vue b/packages/nc-gui-v2/pages/project/index/create-external.vue
index b9dbfe2fc6..593b04ea70 100644
--- a/packages/nc-gui-v2/pages/project/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@@ -1,22 +1,22 @@
 <script lang="ts" setup>
 import { onMounted } from '@vue/runtime-core'
+import { Form, Modal } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
 import { useToast } from 'vue-toastification'
-import { Form, Modal } from 'ant-design-vue'
 import { ref } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
 import type { ProjectCreateForm } from '~/lib/types'
+import { ClientType } from '~/lib/types'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { readFile } from '~/utils/fileUtils'
 import {
   clientTypes,
-  fieldRequiredValidator,
   generateUniqueName,
   getDefaultConnectionConfig,
   getTestDatabaseName,
-  projectTitleValidator,
   sslUsage,
 } from '~/utils/projectCreateUtils'
-import { readFile } from '~/utils/fileUtils'
+import { fieldRequiredValidator, projectTitleValidator } from '~/utils/validation'
 
 const useForm = Form.useForm
 const loading = ref(false)
@@ -28,10 +28,10 @@ const { t } = useI18n()
 
 const formState = $ref<ProjectCreateForm>({
   title: '',
-  dataSource: { ...getDefaultConnectionConfig('mysql2') },
+  dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
   inflection: {
-    inflection_column: 'camelize',
-    inflection_table: 'camelize',
+    inflectionColumn: 'camelize',
+    inflectionTable: 'camelize',
   },
   sslUse: 'No',
 })
@@ -46,7 +46,7 @@ const validators = computed(() => {
       projectTitleValidator,
     ],
     'dataSource.client': [fieldRequiredValidator],
-    ...(formState.dataSource.client === 'sqlite3'
+    ...(formState.dataSource.client === ClientType.SQLITE
       ? {
           'dataSource.connection.connection.filename': [fieldRequiredValidator],
         }
@@ -56,7 +56,7 @@ const validators = computed(() => {
           'dataSource.connection.user': [fieldRequiredValidator],
           'dataSource.connection.password': [fieldRequiredValidator],
           'dataSource.connection.database': [fieldRequiredValidator],
-          ...(['pg', 'mssql'].includes(formState.dataSource.client)
+          ...([ClientType.PG, ClientType.MSSQL].includes(formState.dataSource.client)
             ? {
                 'dataSource.connection.searchPath.0': [fieldRequiredValidator],
               }
@@ -131,8 +131,8 @@ const createProject = async () => {
         {
           type: formState.dataSource.client,
           config,
-          inflection_column: formState.inflection.inflection_column,
-          inflection_table: formState.inflection.inflection_table,
+          inflection_column: formState.inflection.inflectionColumn,
+          inflection_table: formState.inflection.inflectionTable,
         },
       ],
       external: true,
@@ -155,7 +155,7 @@ const testConnection = async () => {
   }
   $e('a:project:create:extdb:test-connection', [])
   try {
-    if (formState.dataSource.client === 'sqlite3') {
+    if (formState.dataSource.client === ClientType.SQLITE) {
       testSuccess.value = true
     } else {
       const connection: any = getConnectionConfig()
@@ -242,7 +242,7 @@ onMounted(() => {
 
       <!-- SQLite File -->
       <a-form-item
-        v-if="formState.dataSource.client === 'sqlite3'"
+        v-if="formState.dataSource.client === ClientType.SQLITE"
         :label="$t('labels.sqliteFile')"
         v-bind="validateInfos['dataSource.connection.connection.filename']"
       >
@@ -286,7 +286,7 @@ onMounted(() => {
         </a-form-item>
         <!-- Schema name -->
         <a-form-item
-          v-if="['mssql', 'pg'].includes(formState.dataSource.client)"
+          v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client)"
           :label="$t('labels.schemaName')"
           v-bind="validateInfos['dataSource.connection.searchPath.0']"
         >
@@ -339,12 +339,12 @@ onMounted(() => {
             <input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect('key', keyFileInput)" />
 
             <a-form-item :label="$t('labels.inflection.tableName')">
-              <a-select v-model:value="formState.inflection.inflection_table" size="small" @change="onClientChange">
+              <a-select v-model:value="formState.inflection.inflectionTable" size="small" @change="onClientChange">
                 <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.inflection_column" size="small" @change="onClientChange">
+              <a-select v-model:value="formState.inflection.inflectionColumn" size="small" @change="onClientChange">
                 <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
               </a-select>
             </a-form-item>
@@ -370,7 +370,7 @@ onMounted(() => {
 
     <v-dialog v-model="configEditDlg">
       <a-card>
-        <Monaco v-if="configEditDlg" v-model="formState" class="h-[400px] w-[600px]"></Monaco>
+        <MonacoEditor v-if="configEditDlg" v-model="formState" class="h-[400px] w-[600px]" />
       </a-card>
     </v-dialog>
   </a-card>
diff --git a/packages/nc-gui-v2/pages/project/index/create.vue b/packages/nc-gui-v2/pages/project/index/create.vue
index e65b3c27a0..f98f9bcaa5 100644
--- a/packages/nc-gui-v2/pages/project/index/create.vue
+++ b/packages/nc-gui-v2/pages/project/index/create.vue
@@ -5,7 +5,7 @@ import { useToast } from 'vue-toastification'
 import { nextTick, ref } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { projectTitleValidator } from '~/utils/projectCreateUtils'
+import { projectTitleValidator } from '~/utils/validation'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 
 const name = ref('')
diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index 70543bacd2..df4a64efe7 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index.vue
@@ -59,7 +59,6 @@ const deleteProject = (project: ProjectType) => {
   })
 }
 
-console.log(route.name)
 const visible = ref(true)
 </script>
 
diff --git a/packages/nc-gui-v2/utils/projectCreateUtils.ts b/packages/nc-gui-v2/utils/projectCreateUtils.ts
index ceb4505ccb..cade101656 100644
--- a/packages/nc-gui-v2/utils/projectCreateUtils.ts
+++ b/packages/nc-gui-v2/utils/projectCreateUtils.ts
@@ -175,23 +175,6 @@ export const getDefaultConnectionConfig = (client: ClientType): ProjectCreateFor
   }
 }
 
-export const projectTitleValidator = {
-  validator: (rule: any, value: any, callback: (errMsg?: string) => void) => {
-    if (value?.length > 50) {
-      callback('Project name exceeds 50 characters')
-    }
-    if (value[0] === ' ') {
-      callback('Project name cannot start with space')
-    }
-
-    callback()
-  },
-}
-export const fieldRequiredValidator = {
-  required: true,
-  message: 'Field is required',
-}
-
 export const sslUsage = ['No', 'Preferred', 'Required', 'Required-CA', 'Required-IDENTITY']
 
 export const generateUniqueName = () => {
diff --git a/packages/nc-gui-v2/utils/validation.ts b/packages/nc-gui-v2/utils/validation.ts
index 52c6052cbb..7bd40613d2 100644
--- a/packages/nc-gui-v2/utils/validation.ts
+++ b/packages/nc-gui-v2/utils/validation.ts
@@ -65,3 +65,20 @@ export function validateColumnName(v: string, isGQL = false) {
     return true
   }
 }
+
+export const projectTitleValidator = {
+  validator: (rule: any, value: any, callback: (errMsg?: string) => void) => {
+    if (value?.length > 50) {
+      callback('Project name exceeds 50 characters')
+    }
+    if (value[0] === ' ') {
+      callback('Project name cannot start with space')
+    }
+
+    callback()
+  },
+}
+export const fieldRequiredValidator = {
+  required: true,
+  message: 'Field is required',
+}