From 9b20269d08857eec30281c111ca4cae8f3affc7d Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 6 Sep 2023 16:41:50 +0300
Subject: [PATCH] fix: warnings in ui

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/settings/DataSources.vue  | 5 ++---
 .../dashboard/settings/data-sources/CreateBase.vue        | 4 ++--
 packages/nc-gui/components/dlg/ViewCreate.vue             | 8 +++++++-
 packages/nc-gui/components/nc/Button.vue                  | 8 +++++++-
 packages/nc-gui/components/nc/Tabs.vue                    | 7 -------
 packages/nc-gui/components/project/AccessSettings.vue     | 2 +-
 packages/nc-gui/components/project/AllTables.vue          | 5 ++++-
 .../components/project/InviteProjectCollabSection.vue     | 8 ++++++++
 .../nc-gui/components/smartsheet/toolbar/GroupByMenu.vue  | 1 -
 .../nc-gui/components/workspace/CollaboratorsList.vue     | 2 +-
 10 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 3319fc36a6..fba38d7856 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -52,6 +52,7 @@ async function loadBases(changed?: boolean) {
   try {
     if (changed) refreshCommandPalette()
 
+    await until(() => !!project.value.id).toBeTruthy()
     isReloading.value = true
     vReload.value = true
     const baseList = await $api.base.list(project.value.id as string)
@@ -164,8 +165,7 @@ const forceAwaken = () => {
 
 onMounted(async () => {
   if (sources.value.length === 0) {
-    await loadBases()
-    await loadMetaDiff()
+    loadBases()
   }
 })
 
@@ -174,7 +174,6 @@ watch(
   async (reload) => {
     if (reload && !isReloading.value) {
       await loadBases()
-      await loadMetaDiff()
     }
   },
 )
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
index 6bb55c0941..9c6e5e5ae2 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -350,8 +350,8 @@ onMounted(async () => {
     // todo: replace setTimeout and follow better approach
     setTimeout(() => {
       const input = form.value?.$el?.querySelector('input[type=text]')
-      input.setSelectionRange(0, formState.value.title.length)
-      input.focus()
+      input?.setSelectionRange(0, formState.value.title.length)
+      input?.focus()
     }, 500)
   })
 })
diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 86557e85c5..185d5bb2e2 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -156,7 +156,13 @@ function init() {
 }
 
 async function onSubmit() {
-  const isValid = await formValidator.value?.validateFields()
+  let isValid = null
+
+  try {
+    isValid = await formValidator.value?.validateFields()
+  } catch (e) {
+    console.error(e)
+  }
 
   if (isValid && form.type) {
     const _meta = unref(meta)
diff --git a/packages/nc-gui/components/nc/Button.vue b/packages/nc-gui/components/nc/Button.vue
index b6d594faa1..70cf2ebaee 100644
--- a/packages/nc-gui/components/nc/Button.vue
+++ b/packages/nc-gui/components/nc/Button.vue
@@ -33,6 +33,8 @@ const emits = defineEmits(['update:loading'])
 
 const slots = useSlots()
 
+const NcButton = ref<HTMLElement | null>(null)
+
 const size = computed(() => props.size)
 
 const type = computed(() => props.type)
@@ -63,10 +65,15 @@ const onBlur = () => {
   isFocused.value = false
   isClicked.value = false
 }
+
+useEventListener(NcButton, 'mousedown', () => {
+  isClicked.value = true
+})
 </script>
 
 <template>
   <a-button
+    ref="NcButton"
     :disabled="props.disabled"
     :loading="loading"
     :type="type"
@@ -80,7 +87,6 @@ const onBlur = () => {
     }"
     @focus="onFocus"
     @blur="onBlur"
-    @mousedown="isClicked = true"
   >
     <div
       class="flex flex-row gap-x-2.5 w-full"
diff --git a/packages/nc-gui/components/nc/Tabs.vue b/packages/nc-gui/components/nc/Tabs.vue
index eff2e2ce02..de6d432d98 100644
--- a/packages/nc-gui/components/nc/Tabs.vue
+++ b/packages/nc-gui/components/nc/Tabs.vue
@@ -3,17 +3,10 @@ const props = defineProps<{
   modelValue?: string
   centered?: boolean
 }>()
-
-const emits = defineEmits<{
-  (event: 'update:modelValue', data: string): void
-}>()
-
-const vModel = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
   <a-tabs
-    v-model:activeKey="vModel"
     class="nc-tabs"
     :class="{
       centered: props.centered,
diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index c2b2624630..94975a96b1 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -154,7 +154,7 @@ const accessibleRoles = computed<(typeof ProjectRoles)[keyof typeof ProjectRoles
         v-else-if="!collaborators?.length"
         class="nc-collaborators-list w-full h-full flex flex-col items-center justify-center mt-36"
       >
-        <Empty description="No collaborators found" />
+        <a-empty description="No collaborators found" />
       </div>
       <div v-else class="nc-collaborators-list nc-scrollbar-md">
         <div class="nc-collaborators-list-header">
diff --git a/packages/nc-gui/components/project/AllTables.vue b/packages/nc-gui/components/project/AllTables.vue
index 392c523512..d0aa000a48 100644
--- a/packages/nc-gui/components/project/AllTables.vue
+++ b/packages/nc-gui/components/project/AllTables.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { stringifyRolesObj } from 'nocodb-sdk'
 import type { BaseType, TableType } from 'nocodb-sdk'
 import dayjs from 'dayjs'
 
@@ -8,6 +9,8 @@ const { openedProject } = storeToRefs(useProjects())
 
 const { isUIAllowed } = useUIPermission()
 
+const { allRoles } = useRoles()
+
 const { $e } = useNuxtApp()
 
 const isImportModalOpen = ref(false)
@@ -71,7 +74,7 @@ function openTableCreateDialog(baseIndex?: number | undefined) {
 
 <template>
   <div class="nc-all-tables-view">
-    <div v-if="isUIAllowed('tableCreate', false, roles)" class="flex flex-row gap-x-6 pb-3 pt-6">
+    <div v-if="isUIAllowed('tableCreate', false, stringifyRolesObj(allRoles))" class="flex flex-row gap-x-6 pb-3 pt-6">
       <div class="nc-project-view-all-table-btn" data-testid="proj-view-btn__add-new-table" @click="openTableCreateDialog()">
         <GeneralIcon icon="addOutlineBox" />
         <div class="label">{{ $t('general.new') }} {{ $t('objects.table') }}</div>
diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
index 386d9f34da..7b33eb7242 100644
--- a/packages/nc-gui/components/project/InviteProjectCollabSection.vue
+++ b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
@@ -23,7 +23,13 @@ const usersData = ref<{
   roles?: string
 }>()
 
+const isInvitingCollaborators = ref(false)
+
 const inviteCollaborator = async () => {
+  isInvitingCollaborators.value = true
+
+  if (isInvitingCollaborators.value) return
+
   try {
     usersData.value = await inviteUser(inviteData)
     usersData.roles = inviteData.roles
@@ -35,6 +41,8 @@ const inviteCollaborator = async () => {
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
+
+  isInvitingCollaborators.value = false
 }
 
 const inviteUrl = computed(() =>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index ca0cae4ba3..822b7e7a4d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -145,7 +145,6 @@ watch(open, () => {
   <NcDropdown
     v-model:visible="open"
     offset-y
-    class=""
     :trigger="['click']"
     overlay-class-name="nc-dropdown-group-by-menu nc-toolbar-dropdown"
   >
diff --git a/packages/nc-gui/components/workspace/CollaboratorsList.vue b/packages/nc-gui/components/workspace/CollaboratorsList.vue
index 5233b70030..ba442379e0 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -48,7 +48,7 @@ const accessibleRoles = computed<WorkspaceUserRoles[]>(() => {
       </a-input>
     </div>
     <div v-if="!filterCollaborators?.length" class="w-full h-full flex flex-col items-center justify-center mt-36">
-      <Empty description="No collaborators found" />
+      <a-empty description="No collaborators found" />
     </div>
     <table v-else class="nc-collaborators-list-table !nc-scrollbar-md">
       <thead>