From 043fe292196632c8c666f63d36fe3f79984a00a8 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 18 Aug 2022 19:49:39 +0530
Subject: [PATCH 01/11] fix/Fixed table column toggle while table creation

---
 .../nc-gui-v2/components/dlg/TableCreate.vue  |  8 ++---
 packages/nc-gui-v2/composables/useTable.ts    | 29 ++++++++++++-------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index d1963b552d..dbc3841767 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -106,20 +106,20 @@ onMounted(() => {
                   <template #title>
                     <span>ID column is required, you can rename this later if required.</span>
                   </template>
-                  <a-checkbox v-model:checked="table.columns.id" disabled>ID</a-checkbox>
+                  <a-checkbox v-model:checked="table.columnsToggleInfo.id" disabled>ID</a-checkbox>
                 </a-tooltip>
               </a-col>
 
               <a-col :span="6">
-                <a-checkbox v-model:checked="table.columns.title"> title </a-checkbox>
+                <a-checkbox v-model:checked="table.columnsToggleInfo.title"> title </a-checkbox>
               </a-col>
 
               <a-col :span="6">
-                <a-checkbox v-model:checked="table.columns.created_at"> created_at </a-checkbox>
+                <a-checkbox v-model:checked="table.columnsToggleInfo.created_at"> created_at </a-checkbox>
               </a-col>
 
               <a-col :span="6">
-                <a-checkbox v-model:checked="table.columns.updated_at"> updated_at </a-checkbox>
+                <a-checkbox v-model:checked="table.columnsToggleInfo.updated_at"> updated_at </a-checkbox>
               </a-col>
             </a-row>
           </div>
diff --git a/packages/nc-gui-v2/composables/useTable.ts b/packages/nc-gui-v2/composables/useTable.ts
index 63ba8a2ce6..a52802a8e8 100644
--- a/packages/nc-gui-v2/composables/useTable.ts
+++ b/packages/nc-gui-v2/composables/useTable.ts
@@ -7,10 +7,16 @@ import { extractSdkResponseErrorMsg } from '~/utils'
 import { useNuxtApp } from '#app'
 
 export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
-  const table = reactive<{ title: string; table_name: string; columns: string[] }>({
+  const table = reactive<{ title: string; table_name: string; columns: string[]; columnsToggleInfo: Record<string, boolean> }>({
     title: '',
     table_name: '',
     columns: ['id', 'title', 'created_at', 'updated_at'],
+    columnsToggleInfo: {
+      id: true,
+      title: true,
+      created_at: true,
+      updated_at: true,
+    },
   })
 
   const { $e, $api } = useNuxtApp()
@@ -21,15 +27,18 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
 
   const createTable = async () => {
     if (!sqlUi?.value) return
-    const columns = sqlUi?.value?.getNewTableColumns().filter((col) => {
-      if (col.column_name === 'id' && table.columns.includes('id_ag')) {
-        Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
-        col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
-        col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
-        return true
-      }
-      return table.columns.includes(col.column_name)
-    })
+    const columns = sqlUi?.value
+      ?.getNewTableColumns()
+      .filter((col) => {
+        if (col.column_name === 'id' && table.columns.includes('id_ag')) {
+          Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
+          col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
+          col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
+          return true
+        }
+        return table.columns.includes(col.column_name)
+      })
+      .filter((col) => table.columnsToggleInfo[col.column_name])
 
     const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
       ...table,

From 68f8f58ae526d4a4ea24dbdca3cd336efe696fef Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 19 Aug 2022 10:54:14 +0530
Subject: [PATCH 02/11] fix/Fixed table column toggle while table creation

---
 packages/nc-gui-v2/components.d.ts            |  1 +
 .../nc-gui-v2/components/dlg/TableCreate.vue  | 48 ++++++++++---------
 packages/nc-gui-v2/composables/useTable.ts    | 34 +++++--------
 packages/nc-gui-v2/lib/constants.ts           |  1 +
 4 files changed, 39 insertions(+), 45 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index c738bd809c..7221df51f7 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     ACardMeta: typeof import('ant-design-vue/es')['CardMeta']
     ACarousel: typeof import('ant-design-vue/es')['Carousel']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
     ACol: typeof import('ant-design-vue/es')['Col']
     ACollapse: typeof import('ant-design-vue/es')['Collapse']
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index dbc3841767..8c0349777c 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -45,6 +45,11 @@ const validators = computed(() => {
 })
 const { validateInfos } = useForm(table, validators)
 
+const systemColumnsCheckboxInfo = SYSTEM_COLUMNS.map((c, index) => ({
+  value: c,
+  disabled: index === 0,
+}))
+
 onMounted(() => {
   generateUniqueTitle()
 
@@ -78,8 +83,8 @@ onMounted(() => {
           />
         </a-form-item>
 
-        <div class="flex justify-end">
-          <div class="pointer" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
+        <div class="flex justify-end items-center">
+          <div class="pointer flex flex-row items-center gap-x-1" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
             {{ isAdvanceOptVisible ? 'Hide' : 'Show' }} more
 
             <MdiMinusCircleOutline v-if="isAdvanceOptVisible" class="text-gray-500" />
@@ -95,32 +100,29 @@ onMounted(() => {
           </a-form-item>
 
           <div>
-            <div class="mb-5">
+            <div class="mb-1">
               <!-- Add Default Columns -->
               {{ $t('msg.info.addDefaultColumns') }}
             </div>
 
             <a-row>
-              <a-col :span="6">
-                <a-tooltip placement="top">
-                  <template #title>
-                    <span>ID column is required, you can rename this later if required.</span>
-                  </template>
-                  <a-checkbox v-model:checked="table.columnsToggleInfo.id" disabled>ID</a-checkbox>
-                </a-tooltip>
-              </a-col>
-
-              <a-col :span="6">
-                <a-checkbox v-model:checked="table.columnsToggleInfo.title"> title </a-checkbox>
-              </a-col>
-
-              <a-col :span="6">
-                <a-checkbox v-model:checked="table.columnsToggleInfo.created_at"> created_at </a-checkbox>
-              </a-col>
-
-              <a-col :span="6">
-                <a-checkbox v-model:checked="table.columnsToggleInfo.updated_at"> updated_at </a-checkbox>
-              </a-col>
+              <a-checkbox-group
+                v-model:value="table.columns"
+                :options="systemColumnsCheckboxInfo"
+                class="!flex flex-row justify-between w-full"
+              >
+                <template #label="{ value }">
+                  <a-tooltip v-if="value === 'id'" placement="top" class="!flex">
+                    <template #title>
+                      <span>ID column is required, you can rename this later if required.</span>
+                    </template>
+                    ID
+                  </a-tooltip>
+                  <div v-else class="flex">
+                    {{ value }}
+                  </div>
+                </template>
+              </a-checkbox-group>
             </a-row>
           </div>
         </div>
diff --git a/packages/nc-gui-v2/composables/useTable.ts b/packages/nc-gui-v2/composables/useTable.ts
index a52802a8e8..47962c99c2 100644
--- a/packages/nc-gui-v2/composables/useTable.ts
+++ b/packages/nc-gui-v2/composables/useTable.ts
@@ -1,22 +1,15 @@
 import { Modal, message } from 'ant-design-vue'
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
-import { useProject } from './useProject'
-import { TabType } from '~/composables/useTabs'
-import { extractSdkResponseErrorMsg } from '~/utils'
 import { useNuxtApp } from '#app'
+import { TabType } from '~/composables/useTabs'
+import { SYSTEM_COLUMNS, extractSdkResponseErrorMsg, useProject } from '#imports'
 
 export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
   const table = reactive<{ title: string; table_name: string; columns: string[]; columnsToggleInfo: Record<string, boolean> }>({
     title: '',
     table_name: '',
-    columns: ['id', 'title', 'created_at', 'updated_at'],
-    columnsToggleInfo: {
-      id: true,
-      title: true,
-      created_at: true,
-      updated_at: true,
-    },
+    columns: [...SYSTEM_COLUMNS],
   })
 
   const { $e, $api } = useNuxtApp()
@@ -27,18 +20,15 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
 
   const createTable = async () => {
     if (!sqlUi?.value) return
-    const columns = sqlUi?.value
-      ?.getNewTableColumns()
-      .filter((col) => {
-        if (col.column_name === 'id' && table.columns.includes('id_ag')) {
-          Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
-          col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
-          col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
-          return true
-        }
-        return table.columns.includes(col.column_name)
-      })
-      .filter((col) => table.columnsToggleInfo[col.column_name])
+    const columns = sqlUi?.value?.getNewTableColumns().filter((col) => {
+      if (col.column_name === 'id' && table.columns.includes('id_ag')) {
+        Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
+        col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
+        col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
+        return true
+      }
+      return table.columns.includes(col.column_name)
+    })
 
     const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
       ...table,
diff --git a/packages/nc-gui-v2/lib/constants.ts b/packages/nc-gui-v2/lib/constants.ts
index 21806b0541..7b6465b2aa 100644
--- a/packages/nc-gui-v2/lib/constants.ts
+++ b/packages/nc-gui-v2/lib/constants.ts
@@ -1,2 +1,3 @@
 export const NOCO = 'noco'
 export const USER_PROJECT_ROLES = 'user_project_roles'
+export const SYSTEM_COLUMNS = ['id', 'title', 'created_at', 'updated_at']

From d089e7cca3222fed3cd0829e4bf5b36fb077a63f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 19 Aug 2022 13:18:22 +0530
Subject: [PATCH 03/11] refactor(gui-v2): move account menu item to end

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/[projectType]/[projectId]/index.vue | 72 +++++++++----------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index b3c7b5b3db..0206bde42a 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -238,6 +238,42 @@ definePageMeta({
 
                   <a-menu-divider />
 
+                  <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as" v-t="['c:navdraw:preview-as']">
+                    <template #title>
+                      <div class="nc-project-menu-item group">
+                        <MdiFileEyeOutline class="group-hover:text-pink-500 nc-project-preview" />
+                        Preview Project As
+
+                        <div class="flex-1" />
+
+                        <MaterialSymbolsChevronRightRounded
+                          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                        />
+                      </div>
+                    </template>
+
+                    <template #expandIcon></template>
+
+                    <GeneralPreviewAs />
+                  </a-sub-menu>
+
+                  <a-sub-menu v-if="isUIAllowed('previewAs')" key="language">
+                    <template #title>
+                      <div class="nc-project-menu-item group">
+                        <MaterialSymbolsTranslate class="group-hover:text-pink-500 nc-language" />
+                        Language
+                        <div class="flex-1" />
+
+                        <MaterialSymbolsChevronRightRounded
+                          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                        />
+                      </div>
+                    </template>
+
+                    <template #expandIcon></template>
+                    <GeneralLanguage sub-menu />
+                  </a-sub-menu>
+
                   <template v-if="signedIn && !isSharedBase">
                     <a-sub-menu v-if="isUIAllowed('previewAs')" key="account">
                       <template #title>
@@ -275,42 +311,6 @@ definePageMeta({
                       </a-menu>
                     </a-sub-menu>
                   </template>
-
-                  <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as" v-t="['c:navdraw:preview-as']">
-                    <template #title>
-                      <div class="nc-project-menu-item group">
-                        <MdiFileEyeOutline class="group-hover:text-pink-500 nc-project-preview" />
-                        Preview Project As
-
-                        <div class="flex-1" />
-
-                        <MaterialSymbolsChevronRightRounded
-                          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
-                        />
-                      </div>
-                    </template>
-
-                    <template #expandIcon></template>
-
-                    <GeneralPreviewAs />
-                  </a-sub-menu>
-
-                  <a-sub-menu v-if="isUIAllowed('previewAs')" key="language">
-                    <template #title>
-                      <div class="nc-project-menu-item group">
-                        <MaterialSymbolsTranslate class="group-hover:text-pink-500 nc-language" />
-                        Language
-                        <div class="flex-1" />
-
-                        <MaterialSymbolsChevronRightRounded
-                          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
-                        />
-                      </div>
-                    </template>
-
-                    <template #expandIcon></template>
-                    <GeneralLanguage sub-menu />
-                  </a-sub-menu>
                 </a-menu-item-group>
               </a-menu>
             </template>

From 7128895fc12764e931bec9eeeedc3f63629b565a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 19 Aug 2022 13:31:08 +0530
Subject: [PATCH 04/11] refactor(gui-v2): use language menu component directly

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/general/language/index.vue  | 8 +-------
 .../nc-gui-v2/pages/[projectType]/[projectId]/index.vue   | 2 +-
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/general/language/index.vue b/packages/nc-gui-v2/components/general/language/index.vue
index 6fca3230b5..bfb59af7a5 100644
--- a/packages/nc-gui-v2/components/general/language/index.vue
+++ b/packages/nc-gui-v2/components/general/language/index.vue
@@ -1,11 +1,5 @@
-<script lang="ts" setup>
-const { subMenu } = defineProps<{ subMenu?: boolean }>()
-</script>
-
 <template>
-  <GeneralLanguageMenu v-if="subMenu" />
-
-  <a-dropdown v-else class="select-none color-transition" :trigger="['click']">
+  <a-dropdown class="select-none color-transition" :trigger="['click']">
     <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
 
     <template #overlay>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 0206bde42a..fd0dcd94c1 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -271,7 +271,7 @@ definePageMeta({
                     </template>
 
                     <template #expandIcon></template>
-                    <GeneralLanguage sub-menu />
+                    <GeneralLanguageMenu />
                   </a-sub-menu>
 
                   <template v-if="signedIn && !isSharedBase">

From dbdcc1c63c73f8eacc6ff0ff3f04c5d7e4c97815 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 19 Aug 2022 13:39:27 +0530
Subject: [PATCH 05/11] fix: cypress markers

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/components/general/MiniSidebar.vue           | 2 +-
 packages/nc-gui-v2/components/general/ShareBaseButton.vue       | 2 +-
 .../nc-gui-v2/components/smartsheet/expanded-form/Comments.vue  | 2 +-
 .../nc-gui-v2/components/smartsheet/expanded-form/Header.vue    | 2 +-
 packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue | 2 +-
 packages/nc-gui-v2/components/smartsheet/sidebar/index.vue      | 2 +-
 packages/nc-gui-v2/layouts/base.vue                             | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/general/MiniSidebar.vue b/packages/nc-gui-v2/components/general/MiniSidebar.vue
index 81fb2589f6..ee3ba911e9 100644
--- a/packages/nc-gui-v2/components/general/MiniSidebar.vue
+++ b/packages/nc-gui-v2/components/general/MiniSidebar.vue
@@ -34,7 +34,7 @@ const logout = () => {
       </div>
 
       <template v-if="signedIn" #overlay>
-        <a-menu class="ml-2 !py-0 min-w-32 leading-8 !rounded">
+        <a-menu class="ml-2 !py-0 min-w-32 leading-8 !rounded nc-menu-account">
           <a-menu-item-group title="User Settings">
             <a-menu-item key="email" class="!rounded-t">
               <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
diff --git a/packages/nc-gui-v2/components/general/ShareBaseButton.vue b/packages/nc-gui-v2/components/general/ShareBaseButton.vue
index 1cb5531f04..5861ee1996 100644
--- a/packages/nc-gui-v2/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui-v2/components/general/ShareBaseButton.vue
@@ -24,7 +24,7 @@ const { isUIAllowed } = useUIPermission()
       @click="showUserModal = true"
     >
       <div class="flex items-center space-x-1">
-        <mdi-account-supervisor-outline class="mr-1" />
+        <mdi-account-supervisor-outline class="mr-1 nc-share-base" />
         <div>{{ $t('activity.share') }}</div>
       </div>
     </a-button>
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
index 5bd9ce2745..26f8074539 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -62,7 +62,7 @@ watch(
       <div class="flex-shrink-1 mt-2 d-flex">
         <a-input
           v-model:value="comment"
-          class="!text-xs"
+          class="!text-xs nc-comment-box"
           ghost
           :class="{ focus: showborder }"
           @focusin="showborder = true"
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
index eb082778de..ec4fe294c5 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -58,7 +58,7 @@ const iconColor = '#1890ff'
     <component
       :is="drawerToggleIcon"
       v-if="isUIAllowed('rowComments')"
-      class="cursor-pointer select-none"
+      class="cursor-pointer select-none nc-toggle-comments"
       @click="commentsDrawer = !commentsDrawer"
     />
 
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index e0558071d8..53608f516a 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -114,7 +114,7 @@ function onOpenModal(type: ViewTypes, title = '') {
     <div class="flex-auto justify-end flex flex-col gap-3 mt-3">
       <button
         v-if="isUIAllowed('virtualViewsCreateOrEdit')"
-        class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease !text-xs"
+        class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease !text-xs nc-webhook-btn"
         @click="onWebhooks"
       >
         <mdi-hook />{{ $t('objects.webhooks') }}
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 1f60a3e46f..896ad62a4a 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -110,7 +110,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
         <a-tooltip v-if="isUIAllowed('virtualViewsCreateOrEdit')" placement="left">
           <template #title> {{ $t('objects.webhooks') }}</template>
 
-          <div class="nc-sidebar-right-item hover:after:bg-gray-300">
+          <div class="nc-sidebar-right-item hover:after:bg-gray-300 nc-webhook-icon">
             <MdiHook @click.stop />
           </div>
         </a-tooltip>
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index d86bde1fdf..b225c31eee 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -60,7 +60,7 @@ const logout = () => {
 
           <template v-if="signedIn && !isSharedBase">
             <a-dropdown :trigger="['click']">
-              <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-pink-500" @click.prevent />
+              <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-pink-500 nc-menu-accounts" @click.prevent />
 
               <template #overlay>
                 <a-menu class="!py-0 dark:(!bg-gray-800) leading-8 !rounded">

From aa87e3c2efe1e788ec0b611162ebe01eea50e35f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 19 Aug 2022 10:33:54 +0200
Subject: [PATCH 06/11] chore(gui-v2): fix menu style spacings and colorings

---
 packages/nc-gui-v2/assets/style-v2.scss       |  23 ++-
 .../components/dashboard/TreeView.vue         | 171 ++++++++++++------
 .../components/general/MiniSidebar.vue        |   8 -
 .../components/general/PreviewAs.vue          |  10 +-
 .../components/general/language/Menu.vue      |  55 +++---
 .../components/general/language/index.vue     |  22 +--
 packages/nc-gui-v2/layouts/base.vue           |  20 --
 packages/nc-gui-v2/layouts/shared-view.vue    |  10 -
 .../pages/[projectType]/[projectId]/index.vue |  67 +++----
 .../[projectType]/[projectId]/index/index.vue |  18 --
 10 files changed, 201 insertions(+), 203 deletions(-)

diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index 786e47c17b..2ff1b5e33b 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -213,11 +213,25 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
   }
 }
 
-.ant-tabs-dropdown-menu-title-content{
-  @apply flex items-center;
+.ant-dropdown-menu-submenu {
+  @apply !py-0;
+
+  .ant-dropdown-menu, .ant-menu {
+    @apply m-0 p-0;
+  }
+
+  .ant-menu-item {
+    @apply !m-0 !px-2;
+  }
 }
 
+.ant-dropdown-menu-submenu-popup {
+  @apply scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !shadow !rounded;
+}
 
+.ant-tabs-dropdown-menu-title-content {
+  @apply flex items-center;
+}
 
 .ant-dropdown-menu-item-group-list {
   @apply !mx-0;
@@ -231,10 +245,11 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
   @apply m-0;
 }
 
-.ant-dropdown-menu-item {
+.ant-dropdown-menu-item, .ant-menu-item {
   @apply !py-0 active:(ring ring-pink-500);
 }
 
-.ant-dropdown-menu-title-conten{
+.ant-dropdown-menu-title-content,
+.ant-menu-title-content {
   @apply !py-0;
 }
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 56726c523c..82d0d95619 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -2,11 +2,23 @@
 import type { TableType } from 'nocodb-sdk'
 import Sortable from 'sortablejs'
 import { Empty } from 'ant-design-vue'
-import { useNuxtApp } from '#app'
-import { computed, useProject, useTable, useTabs, useUIPermission, watchEffect } from '#imports'
+import {
+  computed,
+  inject,
+  reactive,
+  ref,
+  useDialog,
+  useNuxtApp,
+  useProject,
+  useTable,
+  useTabs,
+  useUIPermission,
+  watchEffect,
+} from '#imports'
 import DlgAirtableImport from '~/components/dlg/AirtableImport.vue'
 import DlgQuickImport from '~/components/dlg/QuickImport.vue'
 import DlgTableCreate from '~/components/dlg/TableCreate.vue'
+import DlgTableRename from '~/components/dlg/TableRename.vue'
 import { TabType } from '~/composables'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
@@ -27,16 +39,25 @@ const { isUIAllowed } = useUIPermission()
 
 const isLocked = inject('TreeViewIsLockedInj')
 
-const tablesById = $computed<Record<string, TableType>>(() =>
-  tables?.value?.reduce((acc: Record<string, TableType>, table: TableType) => {
-    acc[table.id as string] = table
+let key = $ref(0)
+
+const menuRef = $ref<HTMLLIElement>()
+
+const filterQuery = $ref('')
+
+const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.title : null))
+
+const tablesById = $computed(() =>
+  tables.value?.reduce((acc: Record<string, TableType>, table) => {
+    acc[table.id!] = table
+
     return acc
   }, {}),
 )
 
-let key = $ref(0)
-
-const menuRef = $ref<HTMLLIElement>()
+const filteredTables = $computed(() =>
+  tables.value?.filter((table) => !filterQuery || table.title.toLowerCase().includes(filterQuery.toLowerCase())),
+)
 
 let sortable: Sortable
 
@@ -104,37 +125,44 @@ const icon = (table: TableType) => {
   }
 }
 
-const filterQuery = $ref('')
-const filteredTables = $computed(() => {
-  return tables?.value?.filter((table) => !filterQuery || table?.title.toLowerCase()?.includes(filterQuery.toLowerCase()))
-})
-
 const contextMenuTarget = reactive<{ type?: 'table' | 'main'; value?: any }>({})
+
 const setMenuContext = (type: 'table' | 'main', value?: any) => {
   contextMenuTarget.type = type
   contextMenuTarget.value = value
+
   $e('c:table:create:navdraw:right-click')
 }
 
-const renameTableDlg = ref(false)
-const renameTableMeta = ref()
-const showRenameTableDlg = (table: TableType, rightClick = false) => {
-  $e(rightClick ? 'c:table:rename:navdraw:right-click' : 'c:table:rename:navdraw:options')
-  renameTableMeta.value = table
-  renameTableDlg.value = true
-}
 const reloadTables = async () => {
   $e('a:table:refresh:navdraw')
+
   await loadTables()
 }
+
 const addTableTab = (table: TableType) => {
   $e('a:table:open')
+
   addTab({ title: table.title, id: table.id, type: table.type as any })
 }
 
-const activeTable = computed(() => {
-  return [TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.title : null
-})
+function openRenameTableDialog(table: TableType, rightClick = false) {
+  $e(rightClick ? 'c:table:rename:navdraw:right-click' : 'c:table:rename:navdraw:options')
+
+  const isOpen = ref(true)
+
+  const { close } = useDialog(DlgTableRename, {
+    'modelValue': isOpen,
+    'tableMeta': table,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
 
 function openQuickImportDialog(type: string) {
   $e(`a:actions:import-${type}`)
@@ -195,30 +223,29 @@ function openTableCreateDialog() {
       <div
         class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-column scrollbar-thin-dull"
         :class="{ 'mb-[20px]': isSharedBase }"
-        style="direction: rtl"
       >
-        <div
-          style="direction: ltr"
-          class="py-1 px-3 flex w-full align-center gap-1 cursor-pointer"
-          @contextmenu="setMenuContext('main')"
-        >
+        <div class="py-1 px-3 flex w-full align-center gap-1 cursor-pointer" @contextmenu="setMenuContext('main')">
           <span class="flex-grow text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
             {{ $t('objects.tables') }}
 
             <template v-if="tables?.length"> ({{ tables.length }}) </template>
           </span>
         </div>
-        <div style="direction: ltr" class="flex-1">
+
+        <div class="flex-1">
           <div
             class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
             @click="openTableCreateDialog"
           >
             <MdiPlus />
+
             <span class="text-gray-500 group-hover:(text-primary/100) flex-1">{{ $t('tooltip.addTable') }}</span>
+
             <a-dropdown :trigger="['click']" @click.stop>
               <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100" />
+
               <template #overlay>
-                <a-menu class="nc-add-project-menu !py-0 ml-6 rounded text-sm">
+                <a-menu class="!py-0 rounded text-sm">
                   <a-menu-item-group title="QUICK IMPORT FROM" class="!px-0 !mx-0">
                     <a-menu-item
                       v-if="isUIAllowed('airtableImport')"
@@ -321,23 +348,22 @@ function openTableCreateDialog() {
                     <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
 
                     <template #overlay>
-                      <a-menu class="cursor-pointer">
+                      <a-menu class="!py-0 rounded text-sm">
                         <a-menu-item
                           v-if="isUIAllowed('table-rename')"
                           v-t="['c:table:rename']"
-                          class="!text-xs"
-                          @click="showRenameTableDlg(table)"
-                          ><div>{{ $t('general.rename') }}</div></a-menu-item
-                        >
-
-                        <a-menu-item
-                          v-if="isUIAllowed('table-delete')"
-                          v-t="['c:table:delete']"
-                          class="!text-xs"
-                          @click="deleteTable(table)"
-                        >
-                          {{ $t('general.delete') }}</a-menu-item
+                          @click="openRenameTableDialog(table)"
                         >
+                          <div class="nc-project-menu-item">
+                            {{ $t('general.rename') }}
+                          </div>
+                        </a-menu-item>
+
+                        <a-menu-item v-if="isUIAllowed('table-delete')" v-t="['c:table:delete']" @click="deleteTable(table)">
+                          <div class="nc-project-menu-item">
+                            {{ $t('general.delete') }}
+                          </div>
+                        </a-menu-item>
                       </a-menu>
                     </template>
                   </a-dropdown>
@@ -350,35 +376,43 @@ function openTableCreateDialog() {
             <div class="flex flex-col align-center">
               <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
 
-              <a-button type="primary" @click.stop="openTableCreateDialog">{{ $t('tooltip.addTable') }}</a-button>
+              <a-button type="primary" @click.stop="openTableCreateDialog">
+                {{ $t('tooltip.addTable') }}
+              </a-button>
             </div>
           </a-card>
         </div>
       </div>
 
       <template v-if="!isLocked" #overlay>
-        <a-menu class="cursor-pointer">
+        <a-menu class="!py-0 rounded text-sm">
           <template v-if="contextMenuTarget.type === 'table'">
             <a-menu-item
               v-if="isUIAllowed('table-rename')"
               v-t="['c:table:rename']"
-              class="!text-xs"
-              @click="showRenameTableDlg(contextMenuTarget.value)"
+              @click="openRenameTableDialog(contextMenuTarget.value)"
             >
-              {{ $t('general.rename') }}
+              <div class="nc-project-menu-item">
+                {{ $t('general.rename') }}
+              </div>
             </a-menu-item>
+
             <a-menu-item
               v-if="isUIAllowed('table-delete')"
               v-t="['c:table:delete']"
-              class="!text-xs"
               @click="deleteTable(contextMenuTarget.value)"
             >
-              {{ $t('general.delete') }}
+              <div class="nc-project-menu-item">
+                {{ $t('general.delete') }}
+              </div>
             </a-menu-item>
           </template>
+
           <template v-else>
-            <a-menu-item v-t="['c:table:reload']" class="!text-xs" @click="reloadTables">
-              {{ $t('general.reload') }}
+            <a-menu-item v-t="['c:table:reload']" @click="reloadTables">
+              <div class="nc-project-menu-item">
+                {{ $t('general.reload') }}
+              </div>
             </a-menu-item>
           </template>
         </a-menu>
@@ -388,15 +422,8 @@ function openTableCreateDialog() {
     <a-divider class="mt-0 mb-0" />
 
     <div class="items-center flex justify-center p-2">
-      <!--
-     Todo : move the component
-     <GithubStarButton />
-     -->
-
       <GeneralShareBaseButton class="!mr-0" />
     </div>
-
-    <DlgTableRename v-if="renameTableMeta" v-model="renameTableDlg" :table-meta="renameTableMeta" />
   </div>
 </template>
 
@@ -472,4 +499,28 @@ function openTableCreateDialog() {
     @apply pr-6 !border-0;
   }
 }
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply !mx-0;
+}
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+
+:deep(.ant-dropdown-menu-item) {
+  @apply !py-0 active:(ring ring-pink-500);
+}
+
+:deep(.ant-dropdown-menu-title-content) {
+  @apply !p-0;
+}
 </style>
diff --git a/packages/nc-gui-v2/components/general/MiniSidebar.vue b/packages/nc-gui-v2/components/general/MiniSidebar.vue
index 81fb2589f6..3cb3fb1621 100644
--- a/packages/nc-gui-v2/components/general/MiniSidebar.vue
+++ b/packages/nc-gui-v2/components/general/MiniSidebar.vue
@@ -129,12 +129,4 @@ const logout = () => {
     }
   }
 }
-
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
 </style>
diff --git a/packages/nc-gui-v2/components/general/PreviewAs.vue b/packages/nc-gui-v2/components/general/PreviewAs.vue
index 8214054b49..c64a053bdb 100644
--- a/packages/nc-gui-v2/components/general/PreviewAs.vue
+++ b/packages/nc-gui-v2/components/general/PreviewAs.vue
@@ -77,11 +77,13 @@ watch(previewAs, () => window.location.reload())
 
   <template v-else>
     <template v-for="role of roleList" :key="role.title">
-      <a-menu-item :class="`pointer nc-preview-${role.title}`" @click="previewAs = role.title">
+      <a-menu-item @click="previewAs = role.title">
         <div class="nc-project-menu-item group">
           <component :is="roleIcon[role.title]" class="group-hover:text-pink-500" />
 
-          <span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }">{{ role.title }}</span>
+          <span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }">
+            {{ role.title }}
+          </span>
         </div>
       </a-menu-item>
     </template>
@@ -91,7 +93,9 @@ watch(previewAs, () => window.location.reload())
         <div class="nc-project-menu-item group">
           <MdiClose class="group-hover:text-pink-500" />
           <!-- Reset Preview -->
-          <span class="text-capitalize text-xs whitespace-nowrap">{{ $t('activity.resetReview') }}</span>
+          <span class="text-capitalize text-xs whitespace-nowrap">
+            {{ $t('activity.resetReview') }}
+          </span>
         </div>
       </a-menu-item>
     </template>
diff --git a/packages/nc-gui-v2/components/general/language/Menu.vue b/packages/nc-gui-v2/components/general/language/Menu.vue
index ded2f9096f..7bbf6208f9 100644
--- a/packages/nc-gui-v2/components/general/language/Menu.vue
+++ b/packages/nc-gui-v2/components/general/language/Menu.vue
@@ -1,52 +1,61 @@
 <script lang="ts" setup>
 import { Language } from '~/lib'
 import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
+
 const { $e } = useNuxtApp()
+
 const { lang: currentLang } = useGlobal()
+
 const { availableLocales = ['en'], locale } = useI18n()
+
 const languages = $computed(() => availableLocales.sort())
+
 const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
+
 function applyDirection() {
   const targetDirection = isRtlLang ? 'rtl' : 'ltr'
   const oppositeDirection = targetDirection === 'ltr' ? 'rtl' : 'ltr'
+
   document.body.classList.remove(oppositeDirection)
   document.body.classList.add(targetDirection)
   document.body.style.direction = targetDirection
 }
+
 function changeLanguage(lang: string) {
   currentLang.value = lang
   locale.value = lang
+
   applyDirection()
+
   $e('c:navbar:lang', { lang })
 }
+
 onMounted(() => {
   applyDirection()
 })
 </script>
 
 <template>
-  <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">
-    <a-menu-item
-      v-for="lang of languages"
-      :key="lang"
-      :class="lang === locale ? '!bg-primary/10 text-primary' : ''"
-      class="group"
-      :value="lang"
-      @click="changeLanguage(lang)"
+  <a-menu-item
+    v-for="lang of languages"
+    :key="lang"
+    :class="lang === locale ? '!bg-primary/10 text-primary' : ''"
+    class="group"
+    :value="lang"
+    @click="changeLanguage(lang)"
+  >
+    <div :class="lang === locale ? '!font-semibold !text-primary' : ''" class="nc-project-menu-item capitalize">
+      {{ Language[lang] || lang }}
+    </div>
+  </a-menu-item>
+
+  <a-menu-item class="mt-1">
+    <a
+      href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
+      target="_blank"
+      class="caption py-2 text-primary underline hover:opacity-75"
     >
-      <div :class="lang === locale ? '!font-semibold !text-primary' : ''" class="nc-project-menu-item capitalize">
-        {{ Language[lang] || lang }}
-      </div>
-    </a-menu-item>
-
-    <a-menu-item class="mt-1">
-      <a
-        href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
-        target="_blank"
-        class="caption py-2 text-primary underline hover:opacity-75"
-      >
-        {{ $t('activity.translate') }}
-      </a>
-    </a-menu-item>
-  </a-menu>
+      {{ $t('activity.translate') }}
+    </a>
+  </a-menu-item>
 </template>
diff --git a/packages/nc-gui-v2/components/general/language/index.vue b/packages/nc-gui-v2/components/general/language/index.vue
index bfb59af7a5..e27077091a 100644
--- a/packages/nc-gui-v2/components/general/language/index.vue
+++ b/packages/nc-gui-v2/components/general/language/index.vue
@@ -3,25 +3,9 @@
     <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
 
     <template #overlay>
-      <GeneralLanguageMenu />
+      <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">
+        <GeneralLanguageMenu />
+      </a-menu>
     </template>
   </a-dropdown>
 </template>
-
-<style scoped>
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply !mx-0;
-}
-
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
-
-:deep(.ant-dropdown-menu-item) {
-  @apply !py-0 active:(ring ring-pink-500);
-}
-</style>
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index d86bde1fdf..5ffb93ea82 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -108,26 +108,6 @@ const logout = () => {
 </template>
 
 <style lang="scss" scoped>
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply !mx-0;
-}
-
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
-
-:deep(.ant-dropdown-menu-item) {
-  @apply !py-0 active:(ring ring-pink-500);
-}
-
 .nc-lang-btn {
   @apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-pink-500) hover:(ring ring-pink-500);
 
diff --git a/packages/nc-gui-v2/layouts/shared-view.vue b/packages/nc-gui-v2/layouts/shared-view.vue
index b18c242f92..edd38499c3 100644
--- a/packages/nc-gui-v2/layouts/shared-view.vue
+++ b/packages/nc-gui-v2/layouts/shared-view.vue
@@ -40,13 +40,3 @@ export default {
     </a-layout>
   </a-layout>
 </template>
-
-<style lang="scss" scoped>
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
-</style>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index fd0dcd94c1..e22603198c 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -196,7 +196,7 @@ definePageMeta({
 
                   <a-menu-item key="copy">
                     <div class="nc-project-menu-item group" @click.stop="copyProjectInfo">
-                      <MdiContentCopy class="group-hover:text-pink-500 nc-copy-project-info" />
+                      <MdiContentCopy class="group-hover:text-pink-500" />
                       Copy Project Info
                     </div>
                   </a-menu-item>
@@ -210,14 +210,14 @@ definePageMeta({
                       class="nc-project-menu-item group"
                       @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
                     >
-                      <MdiApi class="group-hover:text-pink-500 nc-swagger-api-docs" />
+                      <MdiApi class="group-hover:text-pink-500" />
                       Swagger: Rest APIs
                     </div>
                   </a-menu-item>
 
                   <a-menu-item key="copy">
                     <div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
-                      <MdiScriptTextKeyOutline class="group-hover:text-pink-500 nc-copy-project-info" />
+                      <MdiScriptTextKeyOutline class="group-hover:text-pink-500" />
                       Copy Auth Token
                     </div>
                   </a-menu-item>
@@ -231,7 +231,7 @@ definePageMeta({
                       class="nc-project-menu-item group"
                       @click="toggleDialog(true, 'teamAndAuth')"
                     >
-                      <MdiCog class="group-hover:text-pink-500 nc-team-settings" />
+                      <MdiCog class="group-hover:text-pink-500" />
                       Team & Settings
                     </div>
                   </a-menu-item>
@@ -241,7 +241,7 @@ definePageMeta({
                   <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as" v-t="['c:navdraw:preview-as']">
                     <template #title>
                       <div class="nc-project-menu-item group">
-                        <MdiFileEyeOutline class="group-hover:text-pink-500 nc-project-preview" />
+                        <MdiFileEyeOutline class="group-hover:text-pink-500" />
                         Preview Project As
 
                         <div class="flex-1" />
@@ -257,7 +257,10 @@ definePageMeta({
                     <GeneralPreviewAs />
                   </a-sub-menu>
 
-                  <a-sub-menu v-if="isUIAllowed('previewAs')" key="language">
+                  <a-sub-menu
+                    key="language"
+                    class="lang-menu scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded-b"
+                  >
                     <template #title>
                       <div class="nc-project-menu-item group">
                         <MaterialSymbolsTranslate class="group-hover:text-pink-500 nc-language" />
@@ -278,7 +281,7 @@ definePageMeta({
                     <a-sub-menu v-if="isUIAllowed('previewAs')" key="account">
                       <template #title>
                         <div class="nc-project-menu-item group">
-                          <MdiAccount class="group-hover:text-pink-500 nc-project-preview" />
+                          <MdiAccount class="group-hover:text-pink-500" />
                           Account
                           <div class="flex-1" />
 
@@ -290,31 +293,30 @@ definePageMeta({
 
                       <template #expandIcon></template>
 
-                      <a-menu class="!py-0 dark:(!bg-gray-800) leading-8 !rounded">
-                        <a-menu-item key="0" class="!rounded-t">
-                          <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user">
-                            <MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp;
-
-                            <span class="prose">{{ email }}</span>
-                          </nuxt-link>
-                        </a-menu-item>
-
-                        <a-menu-item key="1" class="!rounded-b">
-                          <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
-                            <MdiLogout class="group-hover:(!text-pink-500)" />&nbsp;
-
-                            <span class="prose">
-                              {{ $t('general.signOut') }}
-                            </span>
-                          </div>
-                        </a-menu-item>
-                      </a-menu>
+                      <a-menu-item key="0" class="!rounded-t">
+                        <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user">
+                          <MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp;
+
+                          <span class="prose-sm">{{ email }}</span>
+                        </nuxt-link>
+                      </a-menu-item>
+
+                      <a-menu-item key="1" class="!rounded-b">
+                        <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
+                          <MdiLogout class="group-hover:(!text-pink-500)" />&nbsp;
+
+                          <span class="prose-sm">
+                            {{ $t('general.signOut') }}
+                          </span>
+                        </div>
+                      </a-menu-item>
                     </a-sub-menu>
                   </template>
                 </a-menu-item-group>
               </a-menu>
             </template>
           </a-dropdown>
+
           <div class="nc-sidebar-left-toggle-icon hover:after:bg-primary/75 group nc-sidebar-add-row flex align-center px-2">
             <MdiBackburger
               class="cursor-pointer transform transition-transform duration-500"
@@ -337,18 +339,6 @@ definePageMeta({
 </template>
 
 <style lang="scss" scoped>
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
-
-:deep(.ant-dropdown-menu-item) {
-  @apply !py-0 active:(ring ring-pink-500);
-}
-
 :global(#nc-sidebar-left .ant-layout-sider-collapsed) {
   @apply !w-0 !max-w-0 !min-w-0 overflow-x-hidden;
 }
@@ -356,6 +346,7 @@ definePageMeta({
 .nc-left-sidebar {
   .nc-sidebar-left-toggle-icon {
     @apply opacity-0 transition-opactity duration-200 transition-color text-white/80 hover:text-white/100;
+
     .nc-left-sidebar {
       @apply !border-r-0;
     }
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 7025e3b581..08f55d3505 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -106,24 +106,6 @@ const { isOpen, toggle } = useSidebar()
   }
 }
 
-.nc-add-project-menu {
-  :deep(.ant-dropdown-menu-item-group-list) {
-    @apply !mx-0;
-  }
-
-  :deep(.ant-dropdown-menu-item-group-title) {
-    @apply border-b-1;
-  }
-
-  :deep(.ant-dropdown-menu-item-group-list) {
-    @apply m-0;
-  }
-
-  :deep(.ant-dropdown-menu-item) {
-    @apply !py-0 active:(ring ring-pink-500);
-  }
-}
-
 :deep(.ant-menu-item-selected) {
   @apply text-inherit !bg-inherit;
 }

From d6ec29abe7d5e107cb64b23e8e8019830d8f55dc Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 19 Aug 2022 10:39:54 +0200
Subject: [PATCH 07/11] chore(gui-v2): remove rounded from language tab

---
 packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue | 5 +----
 .../pages/[projectType]/[projectId]/index/index.vue          | 1 +
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index e22603198c..5e546b1030 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -257,10 +257,7 @@ definePageMeta({
                     <GeneralPreviewAs />
                   </a-sub-menu>
 
-                  <a-sub-menu
-                    key="language"
-                    class="lang-menu scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded-b"
-                  >
+                  <a-sub-menu key="language" class="lang-menu scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0">
                     <template #title>
                       <div class="nc-project-menu-item group">
                         <MaterialSymbolsTranslate class="group-hover:text-pink-500 nc-language" />
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 08f55d3505..c8e8805a4f 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -75,6 +75,7 @@ const { isOpen, toggle } = useSidebar()
 :deep(.nc-root-tabs) {
   & > .ant-tabs-nav {
     @apply !mb-0 before:(!border-b-0);
+
     .ant-tabs-extra-content {
       @apply !bg-white/0;
     }

From f48664ab4c4e419a9dc9bc7a7ff10afbed22f468 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 19 Aug 2022 10:44:22 +0200
Subject: [PATCH 08/11] fix(gui-v2): telemetry directive warnings

---
 .../components/dashboard/TreeView.vue         | 19 +++++--------------
 .../pages/[projectType]/[projectId]/index.vue |  4 ++--
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 82d0d95619..4e2827f107 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -349,17 +349,13 @@ function openTableCreateDialog() {
 
                     <template #overlay>
                       <a-menu class="!py-0 rounded text-sm">
-                        <a-menu-item
-                          v-if="isUIAllowed('table-rename')"
-                          v-t="['c:table:rename']"
-                          @click="openRenameTableDialog(table)"
-                        >
+                        <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table)">
                           <div class="nc-project-menu-item">
                             {{ $t('general.rename') }}
                           </div>
                         </a-menu-item>
 
-                        <a-menu-item v-if="isUIAllowed('table-delete')" v-t="['c:table:delete']" @click="deleteTable(table)">
+                        <a-menu-item v-if="isUIAllowed('table-delete')" @click="() => $e('c:table:delete') && deleteTable(table)">
                           <div class="nc-project-menu-item">
                             {{ $t('general.delete') }}
                           </div>
@@ -387,11 +383,7 @@ function openTableCreateDialog() {
       <template v-if="!isLocked" #overlay>
         <a-menu class="!py-0 rounded text-sm">
           <template v-if="contextMenuTarget.type === 'table'">
-            <a-menu-item
-              v-if="isUIAllowed('table-rename')"
-              v-t="['c:table:rename']"
-              @click="openRenameTableDialog(contextMenuTarget.value)"
-            >
+            <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(contextMenuTarget.value)">
               <div class="nc-project-menu-item">
                 {{ $t('general.rename') }}
               </div>
@@ -399,8 +391,7 @@ function openTableCreateDialog() {
 
             <a-menu-item
               v-if="isUIAllowed('table-delete')"
-              v-t="['c:table:delete']"
-              @click="deleteTable(contextMenuTarget.value)"
+              @click="() => $e('c:table:delete') && deleteTable(contextMenuTarget.value)"
             >
               <div class="nc-project-menu-item">
                 {{ $t('general.delete') }}
@@ -409,7 +400,7 @@ function openTableCreateDialog() {
           </template>
 
           <template v-else>
-            <a-menu-item v-t="['c:table:reload']" @click="reloadTables">
+            <a-menu-item @click="reloadTables">
               <div class="nc-project-menu-item">
                 {{ $t('general.reload') }}
               </div>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 5e546b1030..5d7fbe927d 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -238,9 +238,9 @@ definePageMeta({
 
                   <a-menu-divider />
 
-                  <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as" v-t="['c:navdraw:preview-as']">
+                  <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as">
                     <template #title>
-                      <div class="nc-project-menu-item group">
+                      <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
                         <MdiFileEyeOutline class="group-hover:text-pink-500" />
                         Preview Project As
 

From e978a59656b85ca309333f272dcf3c50ea3da36c Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 19 Aug 2022 12:29:47 +0300
Subject: [PATCH 09/11] fix: trailing space issue for enum/set options

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nocodb/src/lib/meta/api/columnApis.ts     | 44 ++++++++++++-------
 packages/nocodb/src/lib/models/Column.ts      |  8 ++++
 2 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/columnApis.ts b/packages/nocodb/src/lib/meta/api/columnApis.ts
index 82cd920b63..1ff79397cb 100644
--- a/packages/nocodb/src/lib/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/meta/api/columnApis.ts
@@ -557,6 +557,13 @@ export async function columnAdd(req: Request, res: Response<TableType>) {
               colBody.colOptions.options.push({ title: '' });
             }
           }
+
+          // Trim end of enum/set
+          if (colBody.dt === 'enum' || colBody.dt === 'set') {
+            for (const opt of colBody.colOptions.options) {
+              opt.title = opt.title.trimEnd()
+            }
+          }
           
           if (colBody.uidt === UITypes.SingleSelect) {
             colBody.dtxp = (colBody.colOptions?.options.length)
@@ -720,21 +727,6 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
   ) {
     colBody = getColumnPropsFromUIDT(colBody, base);
     
-    if (colBody.uidt === UITypes.SingleSelect) {
-      colBody.dtxp = (colBody.colOptions?.options.length)
-        ? `${colBody.colOptions.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
-        : '';
-    } else if (colBody.uidt === UITypes.MultiSelect){
-      colBody.dtxp = (colBody.colOptions?.options.length)
-        ? `${colBody.colOptions.options.map((o) => {
-            if(o.title.includes(',')) {
-              NcError.badRequest('Illegal char(\',\') for MultiSelect');
-            }
-            return `'${o.title.replace(/'/gi, '\'\'')}'`;
-          }).join(',')}`
-        : '';
-    }
-
     const baseModel = await Model.getBaseModelSQL({
       id: table.id,
       dbDriver: NcConnectionMgrv2.get(base)
@@ -809,6 +801,28 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
         }
       }
 
+      // Trim end of enum/set
+      if (colBody.dt === 'enum' || colBody.dt === 'set') {
+        for (const opt of colBody.colOptions.options) {
+          opt.title = opt.title.trimEnd()
+        }
+      }
+
+      if (colBody.uidt === UITypes.SingleSelect) {
+        colBody.dtxp = (colBody.colOptions?.options.length)
+          ? `${colBody.colOptions.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
+          : '';
+      } else if (colBody.uidt === UITypes.MultiSelect){
+        colBody.dtxp = (colBody.colOptions?.options.length)
+          ? `${colBody.colOptions.options.map((o) => {
+              if(o.title.includes(',')) {
+                NcError.badRequest('Illegal char(\',\') for MultiSelect');
+              }
+              return `'${o.title.replace(/'/gi, '\'\'')}'`;
+            }).join(',')}`
+          : '';
+      }
+
       // Handle option delete
       for (const option of column.colOptions.options.filter(oldOp => colBody.colOptions.options.find(newOp => newOp.id === oldOp.id) ? false : true)) {
         if (!supportedDrivers.includes(driverType) && column.uidt === UITypes.MultiSelect) {
diff --git a/packages/nocodb/src/lib/models/Column.ts b/packages/nocodb/src/lib/models/Column.ts
index 4a0f2afc9f..cba7f2322f 100644
--- a/packages/nocodb/src/lib/models/Column.ts
+++ b/packages/nocodb/src/lib/models/Column.ts
@@ -246,6 +246,10 @@ export default class Column<T = any> implements ColumnType {
           }
         } else {
           for (const [i, option] of column.colOptions.options.entries() || [].entries()) {
+            // Trim end of enum/set
+            if (column.dt === 'enum' || column.dt === 'set') {
+              option.title = option.title.trimEnd();
+            }
             await SelectOption.insert(
               {
                 ...option,
@@ -274,6 +278,10 @@ export default class Column<T = any> implements ColumnType {
           }
         } else {
           for (const [i, option] of column.colOptions.options.entries() || [].entries()) {
+            // Trim end of enum/set
+            if (column.dt === 'enum' || column.dt === 'set') {
+              option.title = option.title.trimEnd();
+            }
             await SelectOption.insert(
               {
                 ...option,

From 129ba9268f7320c52cd49fc81bb4ccfda72433c6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 19 Aug 2022 15:00:21 +0530
Subject: [PATCH 10/11] chore(api): type correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nocodb/src/lib/models/Model.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nocodb/src/lib/models/Model.ts b/packages/nocodb/src/lib/models/Model.ts
index 4e0a8578a8..ef0bbc439b 100644
--- a/packages/nocodb/src/lib/models/Model.ts
+++ b/packages/nocodb/src/lib/models/Model.ts
@@ -94,7 +94,7 @@ export default class Model implements TableType {
   public static async insert(
     projectId,
     baseId,
-    model: TableReqType & {
+    model: Partial<TableReqType> & {
       mm?: boolean;
       created_at?: any;
       updated_at?: any;

From 086a9adbd8e8c3216d7f5cca5b3d10b28ca8988f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 19 Aug 2022 15:03:30 +0530
Subject: [PATCH 11/11] chore/pr comments included

---
 packages/nc-gui-v2/composables/useTable.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useTable.ts b/packages/nc-gui-v2/composables/useTable.ts
index 47962c99c2..3da3c15639 100644
--- a/packages/nc-gui-v2/composables/useTable.ts
+++ b/packages/nc-gui-v2/composables/useTable.ts
@@ -6,10 +6,10 @@ import { TabType } from '~/composables/useTabs'
 import { SYSTEM_COLUMNS, extractSdkResponseErrorMsg, useProject } from '#imports'
 
 export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
-  const table = reactive<{ title: string; table_name: string; columns: string[]; columnsToggleInfo: Record<string, boolean> }>({
+  const table = reactive<{ title: string; table_name: string; columns: string[] }>({
     title: '',
     table_name: '',
-    columns: [...SYSTEM_COLUMNS],
+    columns: SYSTEM_COLUMNS,
   })
 
   const { $e, $api } = useNuxtApp()