From 133e22f702b7a855042ad67b8eec1f5ebede1073 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:12 +0000
Subject: [PATCH 01/34] fix: renamed all collabs to members

---
 .../components/dlg/share-and-collaborate/ManageUsers.vue      | 2 +-
 packages/nc-gui/components/dlg/share-and-collaborate/View.vue | 4 ++--
 packages/nc-gui/components/project/AccessSettings.vue         | 2 +-
 packages/nc-gui/components/project/View.vue                   | 2 +-
 packages/nc-gui/components/workspace/CollaboratorsList.vue    | 4 ++--
 packages/nc-gui/components/workspace/View.vue                 | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/ManageUsers.vue b/packages/nc-gui/components/dlg/share-and-collaborate/ManageUsers.vue
index 9e9216ba70..5be614a071 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/ManageUsers.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/ManageUsers.vue
@@ -72,7 +72,7 @@ const rolesTypes = [
 
 <template>
   <div class="flex flex-col mx-4 h-112">
-    <div class="flex mt-2.5 mb-2.5 border-b-1 border-gray-50 pb-1.5" :style="{ fontWeight: 500 }">Manage Collaborators</div>
+    <div class="flex mt-2.5 mb-2.5 border-b-1 border-gray-50 pb-1.5" :style="{ fontWeight: 500 }">Manage Members</div>
     <div class="flex mt-2.5 mb-2.5 text-xs" :style="{ fontWeight: 500 }">Project Owner</div>
     <div v-if="owner" class="flex flex-row px-2 py-2 items-center gap-x-2 border-1 border-gray-100 rounded-md">
       <a-avatar></a-avatar>
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
index c0eaec9ee5..15df9e2b0d 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
@@ -95,13 +95,13 @@ watch(showShareModal, (val) => {
     :width="formStatus === 'manageCollaborators' ? '60rem' : '40rem'"
   >
     <div v-if="formStatus === 'project-collaborateSaving'" class="flex flex-row w-full px-5 justify-between items-center py-1">
-      <div class="flex text-base" :style="{ fontWeight: 500 }">Adding Collaborators</div>
+      <div class="flex text-base" :style="{ fontWeight: 500 }">Adding Members</div>
       <a-spin :indicator="indicator" />
     </div>
     <template v-else-if="formStatus === 'project-collaborateSaved'">
       <div class="flex flex-col py-1.5">
         <div class="flex flex-row w-full px-5 justify-between items-center py-0.5">
-          <div class="flex text-base" :style="{ fontWeight: 500 }">Collaborators added</div>
+          <div class="flex text-base" :style="{ fontWeight: 500 }">Members added</div>
           <div class="flex">
             <MdiCheck />
           </div>
diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index 8094e1f309..38192a3644 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -176,7 +176,7 @@ onMounted(async () => {
         v-else-if="!collaborators?.length"
         class="nc-collaborators-list w-full h-full flex flex-col items-center justify-center mt-36"
       >
-        <a-empty description="No collaborators found" />
+        <Empty description="No Members 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/View.vue b/packages/nc-gui/components/project/View.vue
index 2183a6fab9..555f21c59a 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -101,7 +101,7 @@ watch(
           <template #tab>
             <div class="tab-title" data-testid="proj-view-tab__access-settings">
               <GeneralIcon icon="users" class="!h-3.5 !w-3.5" />
-              <div>Collaborator</div>
+              <div>Members</div>
             </div>
           </template>
           <ProjectAccessSettings />
diff --git a/packages/nc-gui/components/workspace/CollaboratorsList.vue b/packages/nc-gui/components/workspace/CollaboratorsList.vue
index b5e3bcc9cb..514d5c79f3 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -47,7 +47,7 @@ onMounted(async () => {
     <WorkspaceInviteSection v-if="workspaceRoles !== WorkspaceUserRoles.VIEWER" />
     <div class="w-full h-1 border-t-1 border-gray-100 opacity-50 mt-6"></div>
     <div class="w-full flex flex-row justify-between items-baseline mt-6.5 mb-2 pr-0.25 ml-2">
-      <div class="text-xl">Collaborators</div>
+      <div class="text-xl">Members</div>
       <a-input v-model:value="userSearchText" class="!max-w-90 !rounded-md mr-4" placeholder="Search collaborators">
         <template #prefix>
           <PhMagnifyingGlassBold class="!h-3.5 text-gray-500" />
@@ -55,7 +55,7 @@ onMounted(async () => {
       </a-input>
     </div>
     <div v-if="!filterCollaborators?.length" class="w-full h-full flex flex-col items-center justify-center mt-36">
-      <a-empty description="No collaborators found" />
+      <Empty description="No Members found" />
     </div>
     <table v-else class="nc-collaborators-list-table !nc-scrollbar-md">
       <thead>
diff --git a/packages/nc-gui/components/workspace/View.vue b/packages/nc-gui/components/workspace/View.vue
index ef61615333..15226e09c3 100644
--- a/packages/nc-gui/components/workspace/View.vue
+++ b/packages/nc-gui/components/workspace/View.vue
@@ -67,7 +67,7 @@ onMounted(() => {
           <template #tab>
             <div class="flex flex-row items-center px-2 pb-1 gap-x-1.5">
               <PhUsersBold />
-              Collaborators
+              Members
             </div>
           </template>
           <WorkspaceCollaboratorsList />

From 47544a77e2c0fd9e4a4df53810a712654a12de76 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:12 +0000
Subject: [PATCH 02/34] fix: renamed Users/ with User(s)

---
 .../nc-gui/components/project/InviteProjectCollabSection.vue    | 2 +-
 packages/nc-gui/components/workspace/InviteSection.vue          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
index e913e3e52f..35f85c8a05 100644
--- a/packages/nc-gui/components/project/InviteProjectCollabSection.vue
+++ b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
@@ -152,7 +152,7 @@ const copyUrl = async () => {
             <div class="flex flex-row items-center gap-x-2 pr-1">
               <GeneralLoader v-if="isInvitingCollaborators" class="flex" />
               <MdiPlus v-else />
-              {{ isInvitingCollaborators ? 'Adding' : 'Add' }} User/s
+              {{ isInvitingCollaborators ? 'Adding' : 'Add' }} User(s)
             </div>
           </a-button>
         </div>
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 4d87aa572b..ec7bdca84f 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -69,7 +69,7 @@ onMounted(async () => {
           <div class="flex flex-row items-center gap-x-2 pr-1">
             <GeneralLoader v-if="isInvitingCollaborators" class="flex" />
             <MdiPlus v-else />
-            {{ isInvitingCollaborators ? 'Adding' : 'Add' }} User/s
+            {{ isInvitingCollaborators ? 'Adding' : 'Add' }} User(s)
           </div>
         </a-button>
       </div>

From 4ac3288a6d13531178870ce0ecdb87dac6da457a Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:12 +0000
Subject: [PATCH 03/34] fix: added members to the input label

---
 packages/nc-gui/components/project/AccessSettings.vue      | 2 +-
 packages/nc-gui/components/workspace/CollaboratorsList.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index 38192a3644..a59be618d7 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -162,7 +162,7 @@ onMounted(async () => {
     </div>
     <template v-else>
       <div class="w-full flex flex-row justify-between items-baseline mt-6.5 mb-2 pr-0.25 ml-2">
-        <a-input v-model:value="userSearchText" class="!max-w-90 !rounded-md" placeholder="Search collaborators">
+        <a-input v-model:value="userSearchText" class="!max-w-90 !rounded-md" placeholder="Search members">
           <template #prefix>
             <PhMagnifyingGlassBold class="!h-3.5 text-gray-500" />
           </template>
diff --git a/packages/nc-gui/components/workspace/CollaboratorsList.vue b/packages/nc-gui/components/workspace/CollaboratorsList.vue
index 514d5c79f3..197ce7771e 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -48,7 +48,7 @@ onMounted(async () => {
     <div class="w-full h-1 border-t-1 border-gray-100 opacity-50 mt-6"></div>
     <div class="w-full flex flex-row justify-between items-baseline mt-6.5 mb-2 pr-0.25 ml-2">
       <div class="text-xl">Members</div>
-      <a-input v-model:value="userSearchText" class="!max-w-90 !rounded-md mr-4" placeholder="Search collaborators">
+      <a-input v-model:value="userSearchText" class="!max-w-90 !rounded-md mr-4" placeholder="Search members">
         <template #prefix>
           <PhMagnifyingGlassBold class="!h-3.5 text-gray-500" />
         </template>

From 3a529ea5c472e008f9c5b8a429f93e768b3becd6 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:12 +0000
Subject: [PATCH 04/34] fix: input watchers

---
 packages/nc-gui/components/project/AccessSettings.vue      | 2 +-
 packages/nc-gui/components/workspace/CollaboratorsList.vue | 2 +-
 packages/nc-gui/components/workspace/InviteSection.vue     | 7 +++++++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index a59be618d7..f3f77a4c31 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -176,7 +176,7 @@ onMounted(async () => {
         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 Members found" />
+        <Empty description="No members 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/workspace/CollaboratorsList.vue b/packages/nc-gui/components/workspace/CollaboratorsList.vue
index 197ce7771e..2d1da65ab6 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -55,7 +55,7 @@ onMounted(async () => {
       </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 Members found" />
+      <Empty description="No members found" />
     </div>
     <table v-else class="nc-collaborators-list-table !nc-scrollbar-md">
       <thead>
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index ec7bdca84f..684013ca6e 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -23,6 +23,13 @@ const inviteCollaborator = async () => {
   }
 }
 
+watch(inviteData, (newVal) => {
+  console.log(newVal.email)
+  if (newVal.email[-1] === ',') {
+    console.log(newVal.email)
+  }
+})
+
 // allow only lower roles to be assigned
 const allowedRoles = ref<WorkspaceUserRoles[]>([])
 

From 8892dd329da9054ba454f31c19f160036ac98d3a Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:12 +0000
Subject: [PATCH 05/34] feat: email badge on enter

---
 .../components/workspace/InviteSection.vue     | 18 ++++++++++++++----
 .../pages/WorkspacePage/ContainerPage.ts       |  2 +-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 684013ca6e..0fae0eb521 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -22,11 +22,12 @@ const inviteCollaborator = async () => {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
-
+// all user input emails are stored here
+const emailBadges = ref<Array<string>>([])
 watch(inviteData, (newVal) => {
-  console.log(newVal.email)
-  if (newVal.email[-1] === ',') {
-    console.log(newVal.email)
+  if (newVal.email.includes(',')) {
+    emailBadges.value.push(newVal.email.split(',')[0])
+    inviteData.email = ''
   }
 })
 
@@ -52,11 +53,20 @@ onMounted(async () => {
     <div class="text-xl mb-4">Invite</div>
     <a-form>
       <div class="flex gap-2">
+        <span
+          v-for="(email, index) in emailBadges"
+          :key="email"
+          class="p-1 border-1 border-grey rounded-2xl flex items-center justify-between"
+        >
+          {{ email }}
+          <component :is="iconMap.close" class="ml-1.5 hover:cursor-pointer" @click="emailBadges.splice(index, 1)" />
+        </span>
         <a-input
           id="email"
           v-model:value="inviteData.email"
           placeholder="Enter emails to send invitation"
           class="!max-w-130 !rounded"
+          @press-enter="inviteData.email += ','"
         />
 
         <RolesSelector
diff --git a/tests/playwright/pages/WorkspacePage/ContainerPage.ts b/tests/playwright/pages/WorkspacePage/ContainerPage.ts
index 0e9eb62dfe..72b8988afd 100644
--- a/tests/playwright/pages/WorkspacePage/ContainerPage.ts
+++ b/tests/playwright/pages/WorkspacePage/ContainerPage.ts
@@ -55,7 +55,7 @@ export class ContainerPage extends BasePage {
 
     // tabs
     this.projects = this.get().locator('.ant-tabs-tab:has-text("Projects")');
-    this.collaborators = this.get().locator('.ant-tabs-tab:has-text("Collaborators")');
+    this.collaborators = this.get().locator('.ant-tabs-tab:has-text("Members")');
     this.billing = this.get().locator('.ant-tabs-tab:has-text("Billing")');
     this.settings = this.get().locator('.ant-tabs-tab:has-text("Settings")');
 

From 9bb534dd7842a2c31728b613566157fe7505a005 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:12 +0000
Subject: [PATCH 06/34] fix: api payload of email

---
 .../components/workspace/InviteSection.vue    | 67 +++++++++++--------
 1 file changed, 39 insertions(+), 28 deletions(-)

diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 0fae0eb521..7b9612b059 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -13,15 +13,6 @@ const { inviteCollaborator: _inviteCollaborator } = workspaceStore
 const { isInvitingCollaborators } = storeToRefs(workspaceStore)
 const { workspaceRoles } = useRoles()
 
-const inviteCollaborator = async () => {
-  try {
-    await _inviteCollaborator(inviteData.email, inviteData.roles)
-    message.success('Invitation sent successfully')
-    inviteData.email = ''
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-}
 // all user input emails are stored here
 const emailBadges = ref<Array<string>>([])
 watch(inviteData, (newVal) => {
@@ -31,6 +22,22 @@ watch(inviteData, (newVal) => {
   }
 })
 
+const inviteCollaborator = async () => {
+  try {
+    let inviteEmails = ''
+    emailBadges.value.forEach((el) => {
+      inviteEmails += `${el},`
+    })
+
+    await _inviteCollaborator(inviteEmails, inviteData.roles)
+    message.success('Invitation sent successfully')
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    inviteData.email = ''
+    emailBadges.value = []
+  }
+}
 // allow only lower roles to be assigned
 const allowedRoles = ref<WorkspaceUserRoles[]>([])
 
@@ -53,6 +60,13 @@ onMounted(async () => {
     <div class="text-xl mb-4">Invite</div>
     <a-form>
       <div class="flex gap-2">
+        <a-input
+          id="email"
+          v-model:value="inviteData.email"
+          placeholder="Enter emails to send invitation"
+          class="!max-w-130 !rounded"
+          @press-enter="inviteData.email += ','"
+        />
         <span
           v-for="(email, index) in emailBadges"
           :key="email"
@@ -61,26 +75,23 @@ onMounted(async () => {
           {{ email }}
           <component :is="iconMap.close" class="ml-1.5 hover:cursor-pointer" @click="emailBadges.splice(index, 1)" />
         </span>
-        <a-input
-          id="email"
-          v-model:value="inviteData.email"
-          placeholder="Enter emails to send invitation"
-          class="!max-w-130 !rounded"
-          @press-enter="inviteData.email += ','"
-        />
-
-        <RolesSelector
-          class="px-1"
-          :role="inviteData.roles"
-          :roles="allowedRoles"
-          :on-role-change="(role: WorkspaceUserRoles) => (inviteData.roles = role)"
-          :description="true"
-        />
+        <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
+          <template #suffixIcon>
+            <MdiChevronDown />
+          </template>
+          <template v-for="role of allowedRoles" :key="`role-option-${role}`">
+            <a-select-option v-if="role" :value="role">
+              <NcBadge :color="RoleColors[role]">
+                <p class="badge-text">{{ RoleLabels[role] }}</p>
+              </NcBadge>
+            </a-select-option>
+          </template>
+        </NcSelect>
 
-        <a-button
+        <NcButton
           type="primary"
-          class="!rounded-md"
-          :disabled="!inviteData.email?.length || isInvitingCollaborators"
+          :disabled="!emailBadges.length || isInvitingCollaborators"
+          size="small"
           @click="inviteCollaborator"
         >
           <div class="flex flex-row items-center gap-x-2 pr-1">
@@ -88,7 +99,7 @@ onMounted(async () => {
             <MdiPlus v-else />
             {{ isInvitingCollaborators ? 'Adding' : 'Add' }} User(s)
           </div>
-        </a-button>
+        </NcButton>
       </div>
     </a-form>
   </div>

From c041d221bf9af845a2f74d436f9d25942bc05102 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:12 +0000
Subject: [PATCH 07/34] feat: scroll to end on overflow

---
 .../components/workspace/InviteSection.vue    | 98 +++++++++++--------
 1 file changed, 59 insertions(+), 39 deletions(-)

diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 7b9612b059..040e825c06 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -7,6 +7,10 @@ const inviteData = reactive({
   roles: WorkspaceUserRoles.VIEWER,
 })
 
+const focusRef = ref<HTMLInputElement>()
+
+const divRef = ref<HTMLDivElement>()
+
 const workspaceStore = useWorkspace()
 
 const { inviteCollaborator: _inviteCollaborator } = workspaceStore
@@ -22,6 +26,18 @@ watch(inviteData, (newVal) => {
   }
 })
 
+const scrollToEnd = () => {
+  if (divRef.value) {
+    const maxScrollLeft = divRef.value.scrollWidth - divRef.value.clientWidth
+    divRef.value.scrollLeft = maxScrollLeft
+  }
+}
+
+const handleEnter = () => {
+  inviteData.email += ','
+  scrollToEnd()
+}
+
 const inviteCollaborator = async () => {
   try {
     let inviteEmails = ''
@@ -31,11 +47,10 @@ const inviteCollaborator = async () => {
 
     await _inviteCollaborator(inviteEmails, inviteData.roles)
     message.success('Invitation sent successfully')
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  } finally {
     inviteData.email = ''
     emailBadges.value = []
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 // allow only lower roles to be assigned
@@ -58,50 +73,55 @@ onMounted(async () => {
 <template>
   <div class="my-2 pt-3 ml-2" data-testid="invite">
     <div class="text-xl mb-4">Invite</div>
-    <a-form>
-      <div class="flex gap-2">
-        <a-input
-          id="email"
-          v-model:value="inviteData.email"
-          placeholder="Enter emails to send invitation"
-          class="!max-w-130 !rounded"
-          @press-enter="inviteData.email += ','"
-        />
+    <div class="flex gap-2">
+      <div
+        ref="divRef"
+        class="flex w-130 gap-1 overflow-x-scroll border-1 border-blue items-center rounded-lg nc-scrollbar-x-md overflow-hidden"
+        @click="focusRef?.focus"
+      >
         <span
           v-for="(email, index) in emailBadges"
           :key="email"
-          class="p-1 border-1 border-grey rounded-2xl flex items-center justify-between"
+          class="text-[14px] p-0.2 border-1 color-[#4A5268] bg-[#E7E7E9] rounded-md flex items-center justify-between ml-1"
         >
           {{ email }}
           <component :is="iconMap.close" class="ml-1.5 hover:cursor-pointer" @click="emailBadges.splice(index, 1)" />
         </span>
-        <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
-          <template #suffixIcon>
-            <MdiChevronDown />
-          </template>
-          <template v-for="role of allowedRoles" :key="`role-option-${role}`">
-            <a-select-option v-if="role" :value="role">
-              <NcBadge :color="RoleColors[role]">
-                <p class="badge-text">{{ RoleLabels[role] }}</p>
-              </NcBadge>
-            </a-select-option>
-          </template>
-        </NcSelect>
-
-        <NcButton
-          type="primary"
-          :disabled="!emailBadges.length || isInvitingCollaborators"
-          size="small"
-          @click="inviteCollaborator"
-        >
-          <div class="flex flex-row items-center gap-x-2 pr-1">
-            <GeneralLoader v-if="isInvitingCollaborators" class="flex" />
-            <MdiPlus v-else />
-            {{ isInvitingCollaborators ? 'Adding' : 'Add' }} User(s)
-          </div>
-        </NcButton>
+        <input
+          id="email"
+          ref="focusRef"
+          v-model="inviteData.email"
+          :placeholder="emailBadges.length < 1 ? 'Enter emails to send invitation' : ''"
+          class="!border-none !focus:border-none !outline-0 !focus:outline-0 !bg-[white] ml-2 mr-3 w-full"
+          @keyup.enter="handleEnter"
+        />
       </div>
-    </a-form>
+      <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
+        <template #suffixIcon>
+          <MdiChevronDown />
+        </template>
+        <template v-for="role of allowedRoles" :key="`role-option-${role}`">
+          <a-select-option v-if="role" :value="role">
+            <NcBadge :color="RoleColors[role]">
+              <p class="badge-text">{{ RoleLabels[role] }}</p>
+            </NcBadge>
+          </a-select-option>
+        </template>
+      </NcSelect>
+
+      <NcButton
+        type="primary"
+        :disabled="!emailBadges.length || isInvitingCollaborators"
+        size="small"
+        @click="inviteCollaborator"
+      >
+        <div class="flex flex-row items-center gap-x-2 pr-1">
+          <GeneralLoader v-if="isInvitingCollaborators" class="flex" />
+          <MdiPlus v-else />
+          {{ isInvitingCollaborators ? 'Adding' : 'Add' }} User(s)
+        </div>
+      </NcButton>
+    </div>
   </div>
 </template>
 

From ed6a4c64a3bb0c144b19095b67612a84011aa28e Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:13 +0000
Subject: [PATCH 08/34] fix: div focus stuff

---
 .../components/workspace/InviteSection.vue     | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 040e825c06..1cd5b74e88 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -8,7 +8,7 @@ const inviteData = reactive({
 })
 
 const focusRef = ref<HTMLInputElement>()
-
+const isDivFocused = ref(false)
 const divRef = ref<HTMLDivElement>()
 
 const workspaceStore = useWorkspace()
@@ -77,12 +77,22 @@ onMounted(async () => {
       <div
         ref="divRef"
         class="flex w-130 gap-1 overflow-x-scroll border-1 border-blue items-center rounded-lg nc-scrollbar-x-md overflow-hidden"
-        @click="focusRef?.focus"
+        tabindex="0"
+        :class="{
+          'border-[#3366FF]': isDivFocused,
+        }"
+        @click="
+          () => {
+            focusRef?.focus
+            isDivFocused = true
+          }
+        "
+        @blur="isDivFocused = false"
       >
         <span
           v-for="(email, index) in emailBadges"
           :key="email"
-          class="text-[14px] p-0.2 border-1 color-[#4A5268] bg-[#E7E7E9] rounded-md flex items-center justify-between ml-1"
+          class="text-[14px] p-0.2 border-1 color-[#4A5268] bg-[#E7E7E9] rounded-md flex items-center justify-between ml-1 mt-1"
         >
           {{ email }}
           <component :is="iconMap.close" class="ml-1.5 hover:cursor-pointer" @click="emailBadges.splice(index, 1)" />
@@ -92,7 +102,7 @@ onMounted(async () => {
           ref="focusRef"
           v-model="inviteData.email"
           :placeholder="emailBadges.length < 1 ? 'Enter emails to send invitation' : ''"
-          class="!border-none !focus:border-none !outline-0 !focus:outline-0 !bg-[white] ml-2 mr-3 w-full"
+          class="!border-none !focus:border-none !outline-0 !focus:outline-0 !bg-[white] ml-2 mr-3 w-full mt-1"
           @keyup.enter="handleEnter"
         />
       </div>

From 1f447e3a85030824f6c47324fe190e9868db6586 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:13 +0000
Subject: [PATCH 09/34] feat: email validation

---
 .../components/workspace/InviteSection.vue    | 101 ++++++++++++------
 1 file changed, 66 insertions(+), 35 deletions(-)

diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 1cd5b74e88..4da7b2247b 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -11,6 +11,15 @@ const focusRef = ref<HTMLInputElement>()
 const isDivFocused = ref(false)
 const divRef = ref<HTMLDivElement>()
 
+const emailValidation = reactive({
+  isError: false,
+  message: '',
+})
+
+const validateEmail = (email: string): boolean => {
+  const regEx = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return regEx.test(email)
+}
 const workspaceStore = useWorkspace()
 
 const { inviteCollaborator: _inviteCollaborator } = workspaceStore
@@ -24,25 +33,44 @@ watch(inviteData, (newVal) => {
     emailBadges.value.push(newVal.email.split(',')[0])
     inviteData.email = ''
   }
+  if (newVal.email.length < 1 && emailValidation.isError) {
+    emailValidation.isError = false
+  }
 })
 
 const scrollToEnd = () => {
   if (divRef.value) {
-    const maxScrollLeft = divRef.value.scrollWidth - divRef.value.clientWidth
-    divRef.value.scrollLeft = maxScrollLeft
+    divRef.value.scrollLeft = divRef.value.scrollWidth
   }
 }
 
 const handleEnter = () => {
+  if (inviteData.email.length < 1) {
+    emailValidation.isError = true
+    emailValidation.message = 'email should not be empty'
+    return
+  }
+  if (!validateEmail(inviteData.email)) {
+    emailValidation.isError = true
+    emailValidation.message = 'invalid emamil'
+    return
+  }
   inviteData.email += ','
+  emailValidation.isError = false
+  emailValidation.message = ''
   scrollToEnd()
 }
 
 const inviteCollaborator = async () => {
   try {
     let inviteEmails = ''
-    emailBadges.value.forEach((el) => {
-      inviteEmails += `${el},`
+    emailBadges.value.forEach((el, index) => {
+      // prevent the last email from getting the ","
+      if (index === emailBadges.value.length - 1) {
+        inviteEmails += el
+      } else {
+        inviteEmails += `${el},`
+      }
     })
 
     await _inviteCollaborator(inviteEmails, inviteData.roles)
@@ -74,37 +102,40 @@ onMounted(async () => {
   <div class="my-2 pt-3 ml-2" data-testid="invite">
     <div class="text-xl mb-4">Invite</div>
     <div class="flex gap-2">
-      <div
-        ref="divRef"
-        class="flex w-130 gap-1 overflow-x-scroll border-1 border-blue items-center rounded-lg nc-scrollbar-x-md overflow-hidden"
-        tabindex="0"
-        :class="{
-          'border-[#3366FF]': isDivFocused,
-        }"
-        @click="
-          () => {
-            focusRef?.focus
-            isDivFocused = true
-          }
-        "
-        @blur="isDivFocused = false"
-      >
-        <span
-          v-for="(email, index) in emailBadges"
-          :key="email"
-          class="text-[14px] p-0.2 border-1 color-[#4A5268] bg-[#E7E7E9] rounded-md flex items-center justify-between ml-1 mt-1"
+      <div class="flex flex-col">
+        <div
+          ref="divRef"
+          class="flex w-130 gap-1 overflow-x-scroll border-1 border-blue items-center rounded-lg nc-scrollbar-x-md"
+          tabindex="0"
+          :class="{
+            'border-[#3366FF]': isDivFocused,
+          }"
+          @click="
+            () => {
+              focusRef?.focus
+              isDivFocused = true
+            }
+          "
+          @blur="isDivFocused = false"
         >
-          {{ email }}
-          <component :is="iconMap.close" class="ml-1.5 hover:cursor-pointer" @click="emailBadges.splice(index, 1)" />
-        </span>
-        <input
-          id="email"
-          ref="focusRef"
-          v-model="inviteData.email"
-          :placeholder="emailBadges.length < 1 ? 'Enter emails to send invitation' : ''"
-          class="!border-none !focus:border-none !outline-0 !focus:outline-0 !bg-[white] ml-2 mr-3 w-full mt-1"
-          @keyup.enter="handleEnter"
-        />
+          <span
+            v-for="(email, index) in emailBadges"
+            :key="email"
+            class="text-[14px] p-0.2 border-1 color-[#4A5268] bg-[#E7E7E9] rounded-md flex items-center justify-between ml-1 mt-1"
+          >
+            {{ email }}
+            <component :is="iconMap.close" class="ml-1.5 hover:cursor-pointer" @click="emailBadges.splice(index, 1)" />
+          </span>
+          <input
+            id="email"
+            ref="focusRef"
+            v-model="inviteData.email"
+            :placeholder="emailBadges.length < 1 ? 'Enter emails to send invitation' : ''"
+            class="min-w-30 !focus:border-none !outline-0 !focus:outline-0 !bg-[white] ml-2 mr-3 w-full mt-1"
+            @keyup.enter="handleEnter"
+          />
+        </div>
+        <span v-if="emailValidation.isError" class="ml-2 text-[red] text-[12px] mt-1">{{ emailValidation.message }}</span>
       </div>
       <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
         <template #suffixIcon>
@@ -121,7 +152,7 @@ onMounted(async () => {
 
       <NcButton
         type="primary"
-        :disabled="!emailBadges.length || isInvitingCollaborators"
+        :disabled="!emailBadges.length || isInvitingCollaborators || emailValidation.isError"
         size="small"
         @click="inviteCollaborator"
       >

From 12a0cfc32f955da055a2efc7f95ac1e9f7781fdb Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:13 +0000
Subject: [PATCH 10/34] fix: pop badge on empty backspace

---
 .../components/workspace/InviteSection.vue    | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 4da7b2247b..b2e29c70d3 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { OrderedWorkspaceRoles, WorkspaceUserRoles } from 'nocodb-sdk'
+import { onKeyStroke } from '@vueuse/core'
+import { OrderedWorkspaceRoles, RoleColors, RoleLabels, WorkspaceUserRoles } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg, useWorkspace } from '#imports'
 
 const inviteData = reactive({
@@ -38,12 +39,6 @@ watch(inviteData, (newVal) => {
   }
 })
 
-const scrollToEnd = () => {
-  if (divRef.value) {
-    divRef.value.scrollLeft = divRef.value.scrollWidth
-  }
-}
-
 const handleEnter = () => {
   if (inviteData.email.length < 1) {
     emailValidation.isError = true
@@ -58,7 +53,6 @@ const handleEnter = () => {
   inviteData.email += ','
   emailValidation.isError = false
   emailValidation.message = ''
-  scrollToEnd()
 }
 
 const inviteCollaborator = async () => {
@@ -96,6 +90,13 @@ onMounted(async () => {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 })
+
+// remove one email per backspace
+onKeyStroke('Backspace', () => {
+  if (isDivFocused.value && inviteData.email.length < 1) {
+    emailBadges.value.pop()
+  }
+})
 </script>
 
 <template>
@@ -105,10 +106,11 @@ onMounted(async () => {
       <div class="flex flex-col">
         <div
           ref="divRef"
-          class="flex w-130 gap-1 overflow-x-scroll border-1 border-blue items-center rounded-lg nc-scrollbar-x-md"
+          class="flex w-130 border-1 gap-1 items-center rounded-lg nc-scrollbar-x-md flex-wrap"
           tabindex="0"
           :class="{
-            'border-[#3366FF]': isDivFocused,
+            'border-primary/100': isDivFocused,
+            'p-1': emailBadges.length > 1,
           }"
           @click="
             () => {
@@ -121,21 +123,22 @@ onMounted(async () => {
           <span
             v-for="(email, index) in emailBadges"
             :key="email"
-            class="text-[14px] p-0.2 border-1 color-[#4A5268] bg-[#E7E7E9] rounded-md flex items-center justify-between ml-1 mt-1"
+            class="text-[14px] border-1 text-primary/500 bg-primary/100 rounded-md ml-1 mt-1 p-0.5"
           >
             {{ email }}
-            <component :is="iconMap.close" class="ml-1.5 hover:cursor-pointer" @click="emailBadges.splice(index, 1)" />
+            <component :is="iconMap.close" class="ml-0.5 hover:cursor-pointer w-4 h-4" @click="emailBadges.splice(index, 1)" />
           </span>
           <input
             id="email"
             ref="focusRef"
             v-model="inviteData.email"
             :placeholder="emailBadges.length < 1 ? 'Enter emails to send invitation' : ''"
-            class="min-w-30 !focus:border-none !outline-0 !focus:outline-0 !bg-[white] ml-2 mr-3 w-full mt-1"
+            class="min-w-50 !outline-0 !focus:outline-0 ml-2 mr-3 mt-1"
             @keyup.enter="handleEnter"
+            @blur="isDivFocused = false"
           />
         </div>
-        <span v-if="emailValidation.isError" class="ml-2 text-[red] text-[12px] mt-1">{{ emailValidation.message }}</span>
+        <span v-if="emailValidation.isError" class="ml-2 text-red/100 text-[12px] mt-1">{{ emailValidation.message }}</span>
       </div>
       <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
         <template #suffixIcon>

From ee73d4c6e6422bf30c6f9d317982efc8aa9fa1bd Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:13 +0000
Subject: [PATCH 11/34] fix:color codes

---
 .../components/workspace/InviteSection.vue    | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index b2e29c70d3..85c1508504 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -31,6 +31,16 @@ const { workspaceRoles } = useRoles()
 const emailBadges = ref<Array<string>>([])
 watch(inviteData, (newVal) => {
   if (newVal.email.includes(',')) {
+    if (inviteData.email.length < 1) {
+      emailValidation.isError = true
+      emailValidation.message = 'email should not be empty'
+      return
+    }
+    if (!validateEmail(inviteData.email)) {
+      emailValidation.isError = true
+      emailValidation.message = 'invalid emamil'
+      return
+    }
     emailBadges.value.push(newVal.email.split(',')[0])
     inviteData.email = ''
   }
@@ -106,7 +116,7 @@ onKeyStroke('Backspace', () => {
       <div class="flex flex-col">
         <div
           ref="divRef"
-          class="flex w-130 border-1 gap-1 items-center rounded-lg nc-scrollbar-x-md flex-wrap"
+          class="flex w-130 border-1 gap-1 items-center rounded-lg nc-scrollbar-x-md flex-wrap max-h-30 overflow-y-scroll"
           tabindex="0"
           :class="{
             'border-primary/100': isDivFocused,
@@ -123,10 +133,14 @@ onKeyStroke('Backspace', () => {
           <span
             v-for="(email, index) in emailBadges"
             :key="email"
-            class="text-[14px] border-1 text-primary/500 bg-primary/100 rounded-md ml-1 mt-1 p-0.5"
+            class="text-[14px] border-1 text-brand-500 bg-brand-50 rounded-md ml-1 mt-1 p-0.5"
           >
             {{ email }}
-            <component :is="iconMap.close" class="ml-0.5 hover:cursor-pointer w-4 h-4" @click="emailBadges.splice(index, 1)" />
+            <component
+              :is="iconMap.close"
+              class="ml-0.5 hover:cursor-pointer w-3.5 h-3.5"
+              @click="emailBadges.splice(index, 1)"
+            />
           </span>
           <input
             id="email"
@@ -138,7 +152,7 @@ onKeyStroke('Backspace', () => {
             @blur="isDivFocused = false"
           />
         </div>
-        <span v-if="emailValidation.isError" class="ml-2 text-red/100 text-[12px] mt-1">{{ emailValidation.message }}</span>
+        <span v-if="emailValidation.isError" class="ml-2 text-red-500 text-[12px] mt-1">{{ emailValidation.message }}</span>
       </div>
       <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
         <template #suffixIcon>

From b3e612626ad146924d154837f712033486d8f6b5 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:13 +0000
Subject: [PATCH 12/34] fix: typo of email

---
 packages/nc-gui/components/nc/Select.vue               | 3 +++
 packages/nc-gui/components/workspace/InviteSection.vue | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/nc/Select.vue b/packages/nc-gui/components/nc/Select.vue
index 84dc75d985..e978c717dc 100644
--- a/packages/nc-gui/components/nc/Select.vue
+++ b/packages/nc-gui/components/nc/Select.vue
@@ -103,4 +103,7 @@ const onChange = (value: string) => {
     }
   }
 }
+.nc-select .ant-select {
+  height: fit-content;
+}
 </style>
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 85c1508504..75ac58cce8 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -38,7 +38,7 @@ watch(inviteData, (newVal) => {
     }
     if (!validateEmail(inviteData.email)) {
       emailValidation.isError = true
-      emailValidation.message = 'invalid emamil'
+      emailValidation.message = 'invalid email'
       return
     }
     emailBadges.value.push(newVal.email.split(',')[0])
@@ -57,7 +57,7 @@ const handleEnter = () => {
   }
   if (!validateEmail(inviteData.email)) {
     emailValidation.isError = true
-    emailValidation.message = 'invalid emamil'
+    emailValidation.message = 'invalid email'
     return
   }
   inviteData.email += ','

From aabf1038982aa966fc71b6e72900ec72aecf5e6e Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:14 +0000
Subject: [PATCH 13/34] fix(test): added  enter keyboard trigger

---
 .../nc-gui/components/workspace/InviteSection.vue   | 13 +++++++------
 .../pages/WorkspacePage/CollaborationPage.ts        |  1 +
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 75ac58cce8..22cffdf042 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -101,6 +101,11 @@ onMounted(async () => {
   }
 })
 
+const focusOnDiv = () => {
+  focusRef.value?.focus()
+  isDivFocused.value = true
+}
+
 // remove one email per backspace
 onKeyStroke('Backspace', () => {
   if (isDivFocused.value && inviteData.email.length < 1) {
@@ -122,12 +127,7 @@ onKeyStroke('Backspace', () => {
             'border-primary/100': isDivFocused,
             'p-1': emailBadges.length > 1,
           }"
-          @click="
-            () => {
-              focusRef?.focus
-              isDivFocused = true
-            }
-          "
+          @click="focusOnDiv"
           @blur="isDivFocused = false"
         >
           <span
@@ -148,6 +148,7 @@ onKeyStroke('Backspace', () => {
             v-model="inviteData.email"
             :placeholder="emailBadges.length < 1 ? 'Enter emails to send invitation' : ''"
             class="min-w-50 !outline-0 !focus:outline-0 ml-2 mr-3 mt-1"
+            data-testid="email-input"
             @keyup.enter="handleEnter"
             @blur="isDivFocused = false"
           />
diff --git a/tests/playwright/pages/WorkspacePage/CollaborationPage.ts b/tests/playwright/pages/WorkspacePage/CollaborationPage.ts
index f58db52028..e9dc9e321d 100644
--- a/tests/playwright/pages/WorkspacePage/CollaborationPage.ts
+++ b/tests/playwright/pages/WorkspacePage/CollaborationPage.ts
@@ -36,6 +36,7 @@ export class CollaborationPage extends BasePage {
 
     // email
     await this.input_email.fill(email);
+    await this.rootPage.keyboard.press('Enter');
 
     // role
     await this.selector_role.click();

From 2037dc301e606253ec8fe37ef7eccd123abbcac9 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:14 +0000
Subject: [PATCH 14/34] fix: select icon

---
 packages/nc-gui/components/nc/Select.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/components/nc/Select.vue b/packages/nc-gui/components/nc/Select.vue
index e978c717dc..9858902ef3 100644
--- a/packages/nc-gui/components/nc/Select.vue
+++ b/packages/nc-gui/components/nc/Select.vue
@@ -50,6 +50,7 @@ const onChange = (value: string) => {
 
 <style lang="scss">
 .nc-select.ant-select {
+  height: fit-content;
   .ant-select-selector {
     box-shadow: 0px 5px 3px -2px rgba(0, 0, 0, 0.02), 0px 3px 1px -2px rgba(0, 0, 0, 0.06);
     @apply border-1 border-gray-200 !rounded-lg;

From b747dbe275d37f2e036b6a7151094ea34a50d169 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:14 +0000
Subject: [PATCH 15/34] fix: duplicate email on input

---
 packages/nc-gui/components/workspace/InviteSection.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 22cffdf042..7c9f1373dd 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -41,6 +41,12 @@ watch(inviteData, (newVal) => {
       emailValidation.message = 'invalid email'
       return
     }
+    // if email is already enterd we just ignore the input
+    // no error is thrown
+    if (emailBadges.value.includes(newVal.email.split(',')[0])) {
+      inviteData.email = ''
+      return
+    }
     emailBadges.value.push(newVal.email.split(',')[0])
     inviteData.email = ''
   }

From 866e73d1394c3f87e3fbd011dc48c1a46ecd3fcd Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:14 +0000
Subject: [PATCH 16/34] test: fixed ant modal

---
 tests/playwright/pages/Dashboard/BulkUpdate/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/pages/Dashboard/BulkUpdate/index.ts b/tests/playwright/pages/Dashboard/BulkUpdate/index.ts
index 241125a8a8..922f88ebaa 100644
--- a/tests/playwright/pages/Dashboard/BulkUpdate/index.ts
+++ b/tests/playwright/pages/Dashboard/BulkUpdate/index.ts
@@ -173,7 +173,7 @@ export class BulkUpdatePage extends BasePage {
     awaitResponse?: boolean;
   } = {}) {
     await this.bulkUpdateButton.click();
-    const confirmModal = this.rootPage.locator('.ant-modal-content');
+    const confirmModal = this.rootPage.locator('.ant-modal');
 
     const saveRowAction = () => confirmModal.locator('.ant-btn-primary').click();
     if (!awaitResponse) {

From 7c217b812d32deb0e700a18ce57663908bdfb50b Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:14 +0000
Subject: [PATCH 17/34] feat: invite project collab

---
 .../project/InviteProjectCollabSection.vue    | 117 +++++++++++++++++-
 .../components/workspace/InviteSection.vue    |   9 +-
 2 files changed, 116 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
index 35f85c8a05..dd67518176 100644
--- a/packages/nc-gui/components/project/InviteProjectCollabSection.vue
+++ b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
@@ -9,6 +9,65 @@ const inviteData = reactive({
   roles: ProjectRoles.VIEWER,
 })
 
+const focusRef = ref<HTMLInputElement>()
+const isDivFocused = ref(false)
+const divRef = ref<HTMLDivElement>()
+
+const emailValidation = reactive({
+  isError: false,
+  message: '',
+})
+
+const validateEmail = (email: string): boolean => {
+  const regEx = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return regEx.test(email)
+}
+
+// all user input emails are stored here
+const emailBadges = ref<Array<string>>([])
+watch(inviteData, (newVal) => {
+  if (newVal.email.includes(',')) {
+    if (inviteData.email.length < 1) {
+      emailValidation.isError = true
+      emailValidation.message = 'email should not be empty'
+      return
+    }
+    if (!validateEmail(inviteData.email.trim())) {
+      emailValidation.isError = true
+      emailValidation.message = 'invalid email'
+      return
+    }
+    // if email is already enterd we just ignore the input
+    // no error is thrown
+    if (emailBadges.value.includes(newVal.email.split(',')[0])) {
+      inviteData.email = ''
+      return
+    }
+    const emailToAdd = newVal.email.split(',')[0].trim()
+    emailBadges.value.push(emailToAdd)
+    inviteData.email = ''
+  }
+  if (newVal.email.length < 1 && emailValidation.isError) {
+    emailValidation.isError = false
+  }
+})
+
+const handleEnter = () => {
+  if (inviteData.email.length < 1) {
+    emailValidation.isError = true
+    emailValidation.message = 'email should not be empty'
+    return
+  }
+  if (!validateEmail(inviteData.email.trim())) {
+    emailValidation.isError = true
+    emailValidation.message = 'invalid email'
+    return
+  }
+  inviteData.email += ','
+  emailValidation.isError = false
+  emailValidation.message = ''
+}
+
 const { dashboardUrl } = useDashboard()
 
 const { inviteUser } = useManageUsers()
@@ -36,6 +95,7 @@ const inviteCollaborator = async () => {
     if (usersData.value) {
       message.success('Invitation sent successfully')
       inviteData.email = ''
+      emailBadges.value = []
       emit('invited')
     }
   } catch (e: any) {
@@ -76,11 +136,25 @@ const copyUrl = async () => {
 
     // Copied shareable base url to clipboard!
     message.success(t('msg.success.shareableURLCopied'))
+    inviteData.email = ''
+    emailBadges.value = []
   } catch (e: any) {
     message.error(e.message)
   }
   $e('c:shared-base:copy-url')
 }
+
+const focusOnDiv = () => {
+  focusRef.value?.focus()
+  isDivFocused.value = true
+}
+
+// remove one email per backspace
+onKeyStroke('Backspace', () => {
+  if (isDivFocused.value && inviteData.email.length < 1) {
+    emailBadges.value.pop()
+  }
+})
 </script>
 
 <template>
@@ -128,12 +202,43 @@ const copyUrl = async () => {
       <div class="text-xl mb-4">Invite</div>
       <a-form>
         <div class="flex gap-2">
-          <a-input
-            id="email"
-            v-model:value="inviteData.email"
-            placeholder="Enter emails to send invitation"
-            class="!max-w-130 !rounded"
-          />
+          <div class="flex flex-col">
+            <div
+              ref="divRef"
+              class="flex w-130 border-1 gap-1 items-center min-h-8 flex-wrap max-h-30 overflow-y-scroll rounded-lg nc-scrollbar-md"
+              tabindex="0"
+              :class="{
+                'border-primary/100': isDivFocused,
+                'p-1': emailBadges.length > 1,
+              }"
+              @click="focusOnDiv"
+              @blur="isDivFocused = false"
+            >
+              <span
+                v-for="(email, index) in emailBadges"
+                :key="email"
+                class="text-[14px] border-1 text-brand-500 bg-brand-50 rounded-md ml-1 mt-1 p-0.5"
+              >
+                {{ email }}
+                <component
+                  :is="iconMap.close"
+                  class="ml-0.5 hover:cursor-pointer w-3.5 h-3.5"
+                  @click="emailBadges.splice(index, 1)"
+                />
+              </span>
+              <input
+                id="email"
+                ref="focusRef"
+                v-model="inviteData.email"
+                :placeholder="emailBadges.length < 1 ? 'Enter emails to send invitation' : ''"
+                class="min-w-50 !outline-0 !focus:outline-0 ml-2 mr-3 mt-1"
+                data-testid="email-input"
+                @keyup.enter="handleEnter"
+                @blur="isDivFocused = false"
+              />
+            </div>
+            <span v-if="emailValidation.isError" class="ml-2 text-red-500 text-[12px] mt-1">{{ emailValidation.message }}</span>
+          </div>
 
           <RolesSelector
             class="px-1"
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 7c9f1373dd..a9c1112033 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -36,7 +36,7 @@ watch(inviteData, (newVal) => {
       emailValidation.message = 'email should not be empty'
       return
     }
-    if (!validateEmail(inviteData.email)) {
+    if (!validateEmail(inviteData.email.trim())) {
       emailValidation.isError = true
       emailValidation.message = 'invalid email'
       return
@@ -47,7 +47,8 @@ watch(inviteData, (newVal) => {
       inviteData.email = ''
       return
     }
-    emailBadges.value.push(newVal.email.split(',')[0])
+    const emailToAdd = newVal.email.split(',')[0].trim()
+    emailBadges.value.push(emailToAdd)
     inviteData.email = ''
   }
   if (newVal.email.length < 1 && emailValidation.isError) {
@@ -61,7 +62,7 @@ const handleEnter = () => {
     emailValidation.message = 'email should not be empty'
     return
   }
-  if (!validateEmail(inviteData.email)) {
+  if (!validateEmail(inviteData.email.trim())) {
     emailValidation.isError = true
     emailValidation.message = 'invalid email'
     return
@@ -127,7 +128,7 @@ onKeyStroke('Backspace', () => {
       <div class="flex flex-col">
         <div
           ref="divRef"
-          class="flex w-130 border-1 gap-1 items-center rounded-lg nc-scrollbar-x-md flex-wrap max-h-30 overflow-y-scroll"
+          class="flex w-130 border-1 gap-1 items-center flex-wrap min-h-8 max-h-30 overflow-y-scroll rounded-lg nc-scrollbar-md"
           tabindex="0"
           :class="{
             'border-primary/100': isDivFocused,

From aaf069be4074866f760b21691a5dae63abb05c76 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:14 +0000
Subject: [PATCH 18/34] feat: added missing icon

---
 packages/nc-gui/utils/iconUtils.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index ec6987cfee..9c80868964 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -233,6 +233,7 @@ import MaterialSymbolsBlock from '~icons/material-symbols/block'
 export const iconMap = {
   workspaceDefault: MsGroup,
   search: NcSearch,
+  error: h('span', { class: 'material-symbols' }, 'error'),
   info: h(MsInfo, {}, () => 'info'),
   inbox: h('span', { class: 'material-symbols' }, 'inbox'),
   addOutlineBox: MsAddBoxOutline,

From e695a39302ae2c3b700e87fc5b3c9bebd9bfd5e3 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:15 +0000
Subject: [PATCH 19/34] feat: added paste email support

---
 .../project/InviteProjectCollabSection.vue    | 32 +++++++++-
 .../components/workspace/InviteSection.vue    | 61 ++++++++++++++-----
 2 files changed, 77 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
index dd67518176..9c232409f4 100644
--- a/packages/nc-gui/components/project/InviteProjectCollabSection.vue
+++ b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
@@ -155,6 +155,33 @@ onKeyStroke('Backspace', () => {
     emailBadges.value.pop()
   }
 })
+
+// when bulk email is pasted
+const onPaste = (e: ClipboardEvent) => {
+  const pastedText = e.clipboardData?.getData('text')
+  const inputArray = pastedText?.split(',')
+  inputArray?.forEach((el) => {
+    if (el.length < 1) {
+      emailValidation.isError = true
+      emailValidation.message = 'EMAIL SHOULD NOT BE EMPTY'
+      return
+    }
+    if (!validateEmail(el.trim())) {
+      emailValidation.isError = true
+      emailValidation.message = 'INVALID EMAIL'
+      return
+    }
+    // if email is already enterd we just ignore the input
+    // no error is thrown
+    if (emailBadges.value.includes(el)) {
+      return
+    }
+
+    emailBadges.value.push(el)
+    inviteData.email = ''
+  })
+  inviteData.email = ''
+}
 </script>
 
 <template>
@@ -217,7 +244,7 @@ onKeyStroke('Backspace', () => {
               <span
                 v-for="(email, index) in emailBadges"
                 :key="email"
-                class="text-[14px] border-1 text-brand-500 bg-brand-50 rounded-md ml-1 mt-1 p-0.5"
+                class="text-[14px] border-1 text-brand-500 bg-brand-50 rounded-md ml-1 p-0.5"
               >
                 {{ email }}
                 <component
@@ -231,9 +258,10 @@ onKeyStroke('Backspace', () => {
                 ref="focusRef"
                 v-model="inviteData.email"
                 :placeholder="emailBadges.length < 1 ? 'Enter emails to send invitation' : ''"
-                class="min-w-50 !outline-0 !focus:outline-0 ml-2 mr-3 mt-1"
+                class="min-w-50 !outline-0 !focus:outline-0 ml-2 mr-3"
                 data-testid="email-input"
                 @keyup.enter="handleEnter"
+                @paste.prevent="onPaste"
                 @blur="isDivFocused = false"
               />
             </div>
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index a9c1112033..7e67a6a862 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -21,6 +21,7 @@ const validateEmail = (email: string): boolean => {
   const regEx = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
   return regEx.test(email)
 }
+
 const workspaceStore = useWorkspace()
 
 const { inviteCollaborator: _inviteCollaborator } = workspaceStore
@@ -29,27 +30,31 @@ const { workspaceRoles } = useRoles()
 
 // all user input emails are stored here
 const emailBadges = ref<Array<string>>([])
+
 watch(inviteData, (newVal) => {
   if (newVal.email.includes(',')) {
-    if (inviteData.email.length < 1) {
+    if (newVal.email.length < 1) {
       emailValidation.isError = true
-      emailValidation.message = 'email should not be empty'
+      emailValidation.message = 'EMAIL SHOULD NOT BE EMPTY'
       return
     }
-    if (!validateEmail(inviteData.email.trim())) {
+    if (!validateEmail(newVal.email.trim())) {
       emailValidation.isError = true
-      emailValidation.message = 'invalid email'
+      emailValidation.message = 'INVALID EMAIL'
       return
     }
     // if email is already enterd we just ignore the input
     // no error is thrown
-    if (emailBadges.value.includes(newVal.email.split(',')[0])) {
+    if (emailBadges.value.includes(inviteData.email.split(',')[0])) {
       inviteData.email = ''
       return
     }
-    const emailToAdd = newVal.email.split(',')[0].trim()
-    emailBadges.value.push(emailToAdd)
-    inviteData.email = ''
+
+    if (newVal.email.includes(',')) {
+      const emailToAdd = newVal.email.split(',')[0].trim()
+      emailBadges.value.push(emailToAdd)
+      inviteData.email = ''
+    }
   }
   if (newVal.email.length < 1 && emailValidation.isError) {
     emailValidation.isError = false
@@ -59,12 +64,12 @@ watch(inviteData, (newVal) => {
 const handleEnter = () => {
   if (inviteData.email.length < 1) {
     emailValidation.isError = true
-    emailValidation.message = 'email should not be empty'
+    emailValidation.message = 'EMAIL SHOULD NOT BE EMPTY'
     return
   }
   if (!validateEmail(inviteData.email.trim())) {
     emailValidation.isError = true
-    emailValidation.message = 'invalid email'
+    emailValidation.message = 'INVALID EMAIL'
     return
   }
   inviteData.email += ','
@@ -119,13 +124,40 @@ onKeyStroke('Backspace', () => {
     emailBadges.value.pop()
   }
 })
+
+// when bulk email is pasted
+const onPaste = (e: ClipboardEvent) => {
+  const pastedText = e.clipboardData?.getData('text')
+  const inputArray = pastedText?.split(',')
+  inputArray?.forEach((el) => {
+    if (el.length < 1) {
+      emailValidation.isError = true
+      emailValidation.message = 'EMAIL SHOULD NOT BE EMPTY'
+      return
+    }
+    if (!validateEmail(el.trim())) {
+      emailValidation.isError = true
+      emailValidation.message = 'INVALID EMAIL'
+      return
+    }
+    // if email is already enterd we just ignore the input
+    // no error is thrown
+    if (emailBadges.value.includes(el)) {
+      return
+    }
+
+    emailBadges.value.push(el)
+    inviteData.email = ''
+  })
+  inviteData.email = ''
+}
 </script>
 
 <template>
   <div class="my-2 pt-3 ml-2" data-testid="invite">
     <div class="text-xl mb-4">Invite</div>
     <div class="flex gap-2">
-      <div class="flex flex-col">
+      <div class="flex flex-col items-cenyet">
         <div
           ref="divRef"
           class="flex w-130 border-1 gap-1 items-center flex-wrap min-h-8 max-h-30 overflow-y-scroll rounded-lg nc-scrollbar-md"
@@ -140,7 +172,7 @@ onKeyStroke('Backspace', () => {
           <span
             v-for="(email, index) in emailBadges"
             :key="email"
-            class="text-[14px] border-1 text-brand-500 bg-brand-50 rounded-md ml-1 mt-1 p-0.5"
+            class="text-[14px] border-1 text-brand-500 bg-brand-50 rounded-md ml-1 p-0.5"
           >
             {{ email }}
             <component
@@ -154,13 +186,14 @@ onKeyStroke('Backspace', () => {
             ref="focusRef"
             v-model="inviteData.email"
             :placeholder="emailBadges.length < 1 ? 'Enter emails to send invitation' : ''"
-            class="min-w-50 !outline-0 !focus:outline-0 ml-2 mr-3 mt-1"
+            class="min-w-50 !outline-0 !focus:outline-0 ml-2 mr-3"
             data-testid="email-input"
             @keyup.enter="handleEnter"
             @blur="isDivFocused = false"
+            @paste.prevent="onPaste"
           />
         </div>
-        <span v-if="emailValidation.isError" class="ml-2 text-red-500 text-[12px] mt-1">{{ emailValidation.message }}</span>
+        <span v-if="emailValidation.isError" class="ml-2 text-red-500 text-[10px] mt-1.5">{{ emailValidation.message }}</span>
       </div>
       <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
         <template #suffixIcon>

From 41ff11f03721309b6a0293e01a96cfdafd38bcf6 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:15 +0000
Subject: [PATCH 20/34] feat: added badge creation on space

---
 .../components/project/InviteProjectCollabSection.vue |  8 ++++----
 .../nc-gui/components/workspace/InviteSection.vue     | 11 ++++++-----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
index 9c232409f4..6efedf9f69 100644
--- a/packages/nc-gui/components/project/InviteProjectCollabSection.vue
+++ b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
@@ -26,7 +26,7 @@ const validateEmail = (email: string): boolean => {
 // all user input emails are stored here
 const emailBadges = ref<Array<string>>([])
 watch(inviteData, (newVal) => {
-  if (newVal.email.includes(',')) {
+  if (newVal.email.includes(' ' || ',')) {
     if (inviteData.email.length < 1) {
       emailValidation.isError = true
       emailValidation.message = 'email should not be empty'
@@ -39,11 +39,11 @@ watch(inviteData, (newVal) => {
     }
     // if email is already enterd we just ignore the input
     // no error is thrown
-    if (emailBadges.value.includes(newVal.email.split(',')[0])) {
+    if (emailBadges.value.includes(newVal.email.split(' ' || ',')[0])) {
       inviteData.email = ''
       return
     }
-    const emailToAdd = newVal.email.split(',')[0].trim()
+    const emailToAdd = newVal.email.split(' ' || ',')[0].trim()
     emailBadges.value.push(emailToAdd)
     inviteData.email = ''
   }
@@ -159,7 +159,7 @@ onKeyStroke('Backspace', () => {
 // when bulk email is pasted
 const onPaste = (e: ClipboardEvent) => {
   const pastedText = e.clipboardData?.getData('text')
-  const inputArray = pastedText?.split(',')
+  const inputArray = pastedText?.split(' ' || ',')
   inputArray?.forEach((el) => {
     if (el.length < 1) {
       emailValidation.isError = true
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 7e67a6a862..b22e2f97d6 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -32,7 +32,7 @@ const { workspaceRoles } = useRoles()
 const emailBadges = ref<Array<string>>([])
 
 watch(inviteData, (newVal) => {
-  if (newVal.email.includes(',')) {
+  if (newVal.email.includes(' ' || ',')) {
     if (newVal.email.length < 1) {
       emailValidation.isError = true
       emailValidation.message = 'EMAIL SHOULD NOT BE EMPTY'
@@ -45,13 +45,14 @@ watch(inviteData, (newVal) => {
     }
     // if email is already enterd we just ignore the input
     // no error is thrown
-    if (emailBadges.value.includes(inviteData.email.split(',')[0])) {
+    if (emailBadges.value.includes(inviteData.email.split(' ' || ',')[0])) {
       inviteData.email = ''
       return
     }
 
-    if (newVal.email.includes(',')) {
-      const emailToAdd = newVal.email.split(',')[0].trim()
+    if (newVal.email.includes(' ' || ',')) {
+      const emailToAdd = newVal.email.split(' ' || ',')[0].trim()
+      console.log(emailToAdd)
       emailBadges.value.push(emailToAdd)
       inviteData.email = ''
     }
@@ -128,7 +129,7 @@ onKeyStroke('Backspace', () => {
 // when bulk email is pasted
 const onPaste = (e: ClipboardEvent) => {
   const pastedText = e.clipboardData?.getData('text')
-  const inputArray = pastedText?.split(',')
+  const inputArray = pastedText?.split(' ' || ',')
   inputArray?.forEach((el) => {
     if (el.length < 1) {
       emailValidation.isError = true

From 797d93f308c62fa49a46f107ce3c9c3c7d980b4b Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:15 +0000
Subject: [PATCH 21/34] fix: test collab

---
 tests/playwright/pages/WorkspacePage/CollaborationPage.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/pages/WorkspacePage/CollaborationPage.ts b/tests/playwright/pages/WorkspacePage/CollaborationPage.ts
index e9dc9e321d..62a8c5a49a 100644
--- a/tests/playwright/pages/WorkspacePage/CollaborationPage.ts
+++ b/tests/playwright/pages/WorkspacePage/CollaborationPage.ts
@@ -47,7 +47,7 @@ export class CollaborationPage extends BasePage {
 
     // allow button to be enabled
     await this.rootPage.waitForTimeout(500);
-
+    await this.rootPage.keyboard.press('Enter');
     await this.button_addUser.click();
     await this.verifyToast({ message: 'Invitation sent successfully' });
     await this.rootPage.waitForTimeout(500);

From e83b75d884de856f98a2ed20b24b2d2715ad52fd Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:15 +0000
Subject: [PATCH 22/34] fix: test

---
 .../project/InviteProjectCollabSection.vue     | 18 +++++++++++++-----
 .../components/workspace/InviteSection.vue     | 12 ++++++------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
index 6efedf9f69..95cf2b09e4 100644
--- a/packages/nc-gui/components/project/InviteProjectCollabSection.vue
+++ b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
@@ -26,7 +26,7 @@ const validateEmail = (email: string): boolean => {
 // all user input emails are stored here
 const emailBadges = ref<Array<string>>([])
 watch(inviteData, (newVal) => {
-  if (newVal.email.includes(' ' || ',')) {
+  if (newVal.email.includes(' ')) {
     if (inviteData.email.length < 1) {
       emailValidation.isError = true
       emailValidation.message = 'email should not be empty'
@@ -39,11 +39,11 @@ watch(inviteData, (newVal) => {
     }
     // if email is already enterd we just ignore the input
     // no error is thrown
-    if (emailBadges.value.includes(newVal.email.split(' ' || ',')[0])) {
+    if (emailBadges.value.includes(newVal.email.split(' ')[0])) {
       inviteData.email = ''
       return
     }
-    const emailToAdd = newVal.email.split(' ' || ',')[0].trim()
+    const emailToAdd = newVal.email.split(' ')[0].trim()
     emailBadges.value.push(emailToAdd)
     inviteData.email = ''
   }
@@ -63,7 +63,7 @@ const handleEnter = () => {
     emailValidation.message = 'invalid email'
     return
   }
-  inviteData.email += ','
+  inviteData.email += ' '
   emailValidation.isError = false
   emailValidation.message = ''
 }
@@ -90,6 +90,14 @@ const inviteCollaborator = async () => {
   isInvitingCollaborators.value = true
 
   try {
+    emailBadges.value.forEach((el, index) => {
+      // prevent the last email from getting the ","
+      if (index === emailBadges.value.length - 1) {
+        inviteData.email += el
+      } else {
+        inviteData.email += `${el},`
+      }
+    })
     usersData.value = await inviteUser(inviteData)
     usersData.roles = inviteData.roles
     if (usersData.value) {
@@ -159,7 +167,7 @@ onKeyStroke('Backspace', () => {
 // when bulk email is pasted
 const onPaste = (e: ClipboardEvent) => {
   const pastedText = e.clipboardData?.getData('text')
-  const inputArray = pastedText?.split(' ' || ',')
+  const inputArray = pastedText?.split(' ')
   inputArray?.forEach((el) => {
     if (el.length < 1) {
       emailValidation.isError = true
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index b22e2f97d6..b876aed052 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -32,7 +32,7 @@ const { workspaceRoles } = useRoles()
 const emailBadges = ref<Array<string>>([])
 
 watch(inviteData, (newVal) => {
-  if (newVal.email.includes(' ' || ',')) {
+  if (newVal.email.includes(' ')) {
     if (newVal.email.length < 1) {
       emailValidation.isError = true
       emailValidation.message = 'EMAIL SHOULD NOT BE EMPTY'
@@ -45,13 +45,13 @@ watch(inviteData, (newVal) => {
     }
     // if email is already enterd we just ignore the input
     // no error is thrown
-    if (emailBadges.value.includes(inviteData.email.split(' ' || ',')[0])) {
+    if (emailBadges.value.includes(inviteData.email.split(' ')[0])) {
       inviteData.email = ''
       return
     }
 
-    if (newVal.email.includes(' ' || ',')) {
-      const emailToAdd = newVal.email.split(' ' || ',')[0].trim()
+    if (newVal.email.includes(' ')) {
+      const emailToAdd = newVal.email.split(' ')[0].trim()
       console.log(emailToAdd)
       emailBadges.value.push(emailToAdd)
       inviteData.email = ''
@@ -73,7 +73,7 @@ const handleEnter = () => {
     emailValidation.message = 'INVALID EMAIL'
     return
   }
-  inviteData.email += ','
+  inviteData.email += ' '
   emailValidation.isError = false
   emailValidation.message = ''
 }
@@ -129,7 +129,7 @@ onKeyStroke('Backspace', () => {
 // when bulk email is pasted
 const onPaste = (e: ClipboardEvent) => {
   const pastedText = e.clipboardData?.getData('text')
-  const inputArray = pastedText?.split(' ' || ',')
+  const inputArray = pastedText?.split(' ')
   inputArray?.forEach((el) => {
     if (el.length < 1) {
       emailValidation.isError = true

From e33cc96a15818c171b15f60f6f22501c8a3f814d Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:16 +0000
Subject: [PATCH 23/34] feat: added support for space in email invite

---
 .../project/InviteProjectCollabSection.vue     | 11 ++++++-----
 .../components/workspace/InviteSection.vue     | 18 ++++++++----------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
index 95cf2b09e4..f37ab41ddf 100644
--- a/packages/nc-gui/components/project/InviteProjectCollabSection.vue
+++ b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
@@ -26,7 +26,8 @@ const validateEmail = (email: string): boolean => {
 // all user input emails are stored here
 const emailBadges = ref<Array<string>>([])
 watch(inviteData, (newVal) => {
-  if (newVal.email.includes(' ')) {
+  const isNewEmail = newVal.email.includes(' ') || newVal.email.includes(',')
+  if (isNewEmail) {
     if (inviteData.email.length < 1) {
       emailValidation.isError = true
       emailValidation.message = 'email should not be empty'
@@ -39,11 +40,11 @@ watch(inviteData, (newVal) => {
     }
     // if email is already enterd we just ignore the input
     // no error is thrown
-    if (emailBadges.value.includes(newVal.email.split(' ')[0])) {
+    const emailToAdd = newVal.email.split(',')[0].trim() || newVal.email.split(' ')[0].trim()
+    if (emailBadges.value.includes(emailToAdd)) {
       inviteData.email = ''
       return
     }
-    const emailToAdd = newVal.email.split(' ')[0].trim()
     emailBadges.value.push(emailToAdd)
     inviteData.email = ''
   }
@@ -167,7 +168,7 @@ onKeyStroke('Backspace', () => {
 // when bulk email is pasted
 const onPaste = (e: ClipboardEvent) => {
   const pastedText = e.clipboardData?.getData('text')
-  const inputArray = pastedText?.split(' ')
+  const inputArray = pastedText?.split(',') || pastedText?.split(' ')
   inputArray?.forEach((el) => {
     if (el.length < 1) {
       emailValidation.isError = true
@@ -287,7 +288,7 @@ const onPaste = (e: ClipboardEvent) => {
           <a-button
             type="primary"
             class="!rounded-md"
-            :disabled="!inviteData.email?.length || isInvitingCollaborators"
+            :disabled="!emailBadges.length || isInvitingCollaborators || emailValidation.isErro"
             @click="inviteCollaborator"
           >
             <div class="flex flex-row items-center gap-x-2 pr-1">
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index b876aed052..f33fb6260d 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -32,7 +32,8 @@ const { workspaceRoles } = useRoles()
 const emailBadges = ref<Array<string>>([])
 
 watch(inviteData, (newVal) => {
-  if (newVal.email.includes(' ')) {
+  const isNewEmail = newVal.email.includes(' ') || newVal.email.includes(',')
+  if (isNewEmail) {
     if (newVal.email.length < 1) {
       emailValidation.isError = true
       emailValidation.message = 'EMAIL SHOULD NOT BE EMPTY'
@@ -45,17 +46,14 @@ watch(inviteData, (newVal) => {
     }
     // if email is already enterd we just ignore the input
     // no error is thrown
-    if (emailBadges.value.includes(inviteData.email.split(' ')[0])) {
-      inviteData.email = ''
-      return
-    }
+    const emailToAdd = newVal.email.split(',')[0].trim() || newVal.email.split(' ')[0].trim()
 
-    if (newVal.email.includes(' ')) {
-      const emailToAdd = newVal.email.split(' ')[0].trim()
-      console.log(emailToAdd)
-      emailBadges.value.push(emailToAdd)
+    if (emailBadges.value.includes(emailToAdd)) {
       inviteData.email = ''
+      return
     }
+    emailBadges.value.push(emailToAdd)
+    inviteData.email = ''
   }
   if (newVal.email.length < 1 && emailValidation.isError) {
     emailValidation.isError = false
@@ -129,7 +127,7 @@ onKeyStroke('Backspace', () => {
 // when bulk email is pasted
 const onPaste = (e: ClipboardEvent) => {
   const pastedText = e.clipboardData?.getData('text')
-  const inputArray = pastedText?.split(' ')
+  const inputArray = pastedText?.split(',') || pastedText?.split(' ')
   inputArray?.forEach((el) => {
     if (el.length < 1) {
       emailValidation.isError = true

From eeb74a0eec40e17cb65eba257f2012a071c1fcf0 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:16 +0000
Subject: [PATCH 24/34] fix: initial space causing errors

---
 .../project/InviteProjectCollabSection.vue    | 54 ++++++++++++-------
 .../components/workspace/InviteSection.vue    | 41 +++++++++-----
 2 files changed, 62 insertions(+), 33 deletions(-)

diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
index f37ab41ddf..332a2de80b 100644
--- a/packages/nc-gui/components/project/InviteProjectCollabSection.vue
+++ b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
@@ -25,23 +25,35 @@ const validateEmail = (email: string): boolean => {
 
 // all user input emails are stored here
 const emailBadges = ref<Array<string>>([])
+
+const insertOrUpdateString = (str: string) => {
+  // Check if the string already exists in the array
+  const index = emailBadges.value.indexOf(str)
+
+  if (index !== -1) {
+    // If the string exists, remove it
+    emailBadges.value.splice(index, 1)
+  }
+
+  // Add the new string to the array
+  emailBadges.value.push(str)
+}
+
 watch(inviteData, (newVal) => {
-  const isNewEmail = newVal.email.includes(' ') || newVal.email.includes(',')
-  if (isNewEmail) {
-    if (inviteData.email.length < 1) {
-      emailValidation.isError = true
-      emailValidation.message = 'email should not be empty'
-      return
-    }
-    if (!validateEmail(inviteData.email.trim())) {
+  const isNewEmail = newVal.email.charAt(newVal.email.length - 1) === ',' || newVal.email.charAt(newVal.email.length - 1) === ' '
+  if (isNewEmail && newVal.email.trim().length > 1) {
+    const emailToAdd = newVal.email.split(',')[0].trim() || newVal.email.split(' ')[0].trim()
+    if (!validateEmail(emailToAdd)) {
       emailValidation.isError = true
-      emailValidation.message = 'invalid email'
+      emailValidation.message = 'INVALID EMAIL'
       return
     }
-    // if email is already enterd we just ignore the input
-    // no error is thrown
-    const emailToAdd = newVal.email.split(',')[0].trim() || newVal.email.split(' ')[0].trim()
+    /** 
+     if email is already enterd we delete the already
+     existing email and add new one
+     **/
     if (emailBadges.value.includes(emailToAdd)) {
+      insertOrUpdateString(emailToAdd)
       inviteData.email = ''
       return
     }
@@ -56,12 +68,12 @@ watch(inviteData, (newVal) => {
 const handleEnter = () => {
   if (inviteData.email.length < 1) {
     emailValidation.isError = true
-    emailValidation.message = 'email should not be empty'
+    emailValidation.message = 'EMAIL SHOULD NOT BE EMPTY'
     return
   }
   if (!validateEmail(inviteData.email.trim())) {
     emailValidation.isError = true
-    emailValidation.message = 'invalid email'
+    emailValidation.message = 'INVALID EMAIL'
     return
   }
   inviteData.email += ' '
@@ -109,9 +121,10 @@ const inviteCollaborator = async () => {
     }
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    inviteData.email = ''
+    isInvitingCollaborators.value = false
   }
-
-  isInvitingCollaborators.value = false
 }
 
 const inviteUrl = computed(() =>
@@ -180,9 +193,12 @@ const onPaste = (e: ClipboardEvent) => {
       emailValidation.message = 'INVALID EMAIL'
       return
     }
-    // if email is already enterd we just ignore the input
-    // no error is thrown
+    /** 
+     if email is already enterd we delete the already
+     existing email and add new one
+     **/
     if (emailBadges.value.includes(el)) {
+      insertOrUpdateString(el)
       return
     }
 
@@ -288,7 +304,7 @@ const onPaste = (e: ClipboardEvent) => {
           <a-button
             type="primary"
             class="!rounded-md"
-            :disabled="!emailBadges.length || isInvitingCollaborators || emailValidation.isErro"
+            :disabled="!emailBadges.length || isInvitingCollaborators || emailValidation.isError"
             @click="inviteCollaborator"
           >
             <div class="flex flex-row items-center gap-x-2 pr-1">
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index f33fb6260d..6cad5dfa9e 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -31,24 +31,34 @@ const { workspaceRoles } = useRoles()
 // all user input emails are stored here
 const emailBadges = ref<Array<string>>([])
 
+const insertOrUpdateString = (str: string) => {
+  // Check if the string already exists in the array
+  const index = emailBadges.value.indexOf(str)
+
+  if (index !== -1) {
+    // If the string exists, remove it
+    emailBadges.value.splice(index, 1)
+  }
+
+  // Add the new string to the array
+  emailBadges.value.push(str)
+}
+
 watch(inviteData, (newVal) => {
-  const isNewEmail = newVal.email.includes(' ') || newVal.email.includes(',')
-  if (isNewEmail) {
-    if (newVal.email.length < 1) {
-      emailValidation.isError = true
-      emailValidation.message = 'EMAIL SHOULD NOT BE EMPTY'
-      return
-    }
-    if (!validateEmail(newVal.email.trim())) {
+  const isNewEmail = newVal.email.charAt(newVal.email.length - 1) === ',' || newVal.email.charAt(newVal.email.length - 1) === ' '
+  if (isNewEmail && newVal.email.trim().length > 1) {
+    const emailToAdd = newVal.email.split(',')[0].trim() || newVal.email.split(' ')[0].trim()
+    if (!validateEmail(emailToAdd)) {
       emailValidation.isError = true
       emailValidation.message = 'INVALID EMAIL'
       return
     }
-    // if email is already enterd we just ignore the input
-    // no error is thrown
-    const emailToAdd = newVal.email.split(',')[0].trim() || newVal.email.split(' ')[0].trim()
-
+    /** 
+     if email is already enterd we delete the already
+     existing email and add new one
+     **/
     if (emailBadges.value.includes(emailToAdd)) {
+      insertOrUpdateString(emailToAdd)
       inviteData.email = ''
       return
     }
@@ -139,9 +149,12 @@ const onPaste = (e: ClipboardEvent) => {
       emailValidation.message = 'INVALID EMAIL'
       return
     }
-    // if email is already enterd we just ignore the input
-    // no error is thrown
+    /** 
+     if email is already enterd we delete the already
+     existing email and add new one
+     **/
     if (emailBadges.value.includes(el)) {
+      insertOrUpdateString(el)
       return
     }
 

From 39b4e09aff858c71061672dbf23779e6b40fa711 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:16 +0000
Subject: [PATCH 25/34] fix: paste event on existing text

---
 .../nc-gui/components/project/InviteProjectCollabSection.vue   | 3 +++
 packages/nc-gui/components/workspace/InviteSection.vue         | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
index 332a2de80b..2fd3815c4d 100644
--- a/packages/nc-gui/components/project/InviteProjectCollabSection.vue
+++ b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
@@ -182,6 +182,9 @@ onKeyStroke('Backspace', () => {
 const onPaste = (e: ClipboardEvent) => {
   const pastedText = e.clipboardData?.getData('text')
   const inputArray = pastedText?.split(',') || pastedText?.split(' ')
+  if (inputArray?.length === 1 && inviteData.email.length > 1) {
+    inputArray[0] = inviteData.email += inputArray[0]
+  }
   inputArray?.forEach((el) => {
     if (el.length < 1) {
       emailValidation.isError = true
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 6cad5dfa9e..972b0d2378 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -138,6 +138,9 @@ onKeyStroke('Backspace', () => {
 const onPaste = (e: ClipboardEvent) => {
   const pastedText = e.clipboardData?.getData('text')
   const inputArray = pastedText?.split(',') || pastedText?.split(' ')
+  if (inputArray?.length === 1 && inviteData.email.length > 1) {
+    inputArray[0] = inviteData.email += inputArray[0]
+  }
   inputArray?.forEach((el) => {
     if (el.length < 1) {
       emailValidation.isError = true

From 6a6962602470dba49695aa7fa69735a5d9692f79 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:16 +0000
Subject: [PATCH 26/34] fix: added some comments

---
 .../nc-gui/components/project/InviteProjectCollabSection.vue    | 2 ++
 packages/nc-gui/components/workspace/InviteSection.vue          | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
index 2fd3815c4d..9121263de1 100644
--- a/packages/nc-gui/components/project/InviteProjectCollabSection.vue
+++ b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
@@ -182,6 +182,8 @@ onKeyStroke('Backspace', () => {
 const onPaste = (e: ClipboardEvent) => {
   const pastedText = e.clipboardData?.getData('text')
   const inputArray = pastedText?.split(',') || pastedText?.split(' ')
+  // if data is pasted to a already existing text in input
+  // we add existingInput + pasted data
   if (inputArray?.length === 1 && inviteData.email.length > 1) {
     inputArray[0] = inviteData.email += inputArray[0]
   }
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 972b0d2378..a7fcd34360 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -138,6 +138,8 @@ onKeyStroke('Backspace', () => {
 const onPaste = (e: ClipboardEvent) => {
   const pastedText = e.clipboardData?.getData('text')
   const inputArray = pastedText?.split(',') || pastedText?.split(' ')
+  // if data is pasted to a already existing text in input
+  // we add existingInput + pasted data
   if (inputArray?.length === 1 && inviteData.email.length > 1) {
     inputArray[0] = inviteData.email += inputArray[0]
   }

From b84720b266b0480a74bda07910cb47bace8225bb Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:16 +0000
Subject: [PATCH 27/34] fix: removed email invite from project collab

---
 packages/nc-gui/components/project/AccessSettings.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index f3f77a4c31..c21f6a5540 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -135,6 +135,11 @@ watchDebounced(
   },
 )
 
+const userProjectRole = computed<(typeof ProjectRoles)[keyof typeof ProjectRoles]>(() => {
+  const projectUser = collaborators.value?.find((collab) => collab.id === user.value?.id)
+  return projectUser?.projectRoles
+})
+
 onMounted(async () => {
   isLoading.value = true
   try {
@@ -155,8 +160,6 @@ onMounted(async () => {
 
 <template>
   <div class="nc-collaborator-table-container mt-4 nc-access-settings-view">
-    <ProjectInviteProjectCollabSection @invited="reloadCollabs" />
-
     <div v-if="isLoading" class="nc-collaborators-list items-center justify-center">
       <GeneralLoader size="xlarge" />
     </div>

From 78981607af79ef2b292a64d43dd000777210a8e3 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:17 +0000
Subject: [PATCH 28/34] fix: repeated chevron design

---
 packages/nc-gui/components/nc/Select.vue      |  3 ---
 .../components/workspace/InviteSection.vue    | 25 ++++++++-----------
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/nc/Select.vue b/packages/nc-gui/components/nc/Select.vue
index 9858902ef3..fdd2d20ea1 100644
--- a/packages/nc-gui/components/nc/Select.vue
+++ b/packages/nc-gui/components/nc/Select.vue
@@ -104,7 +104,4 @@ const onChange = (value: string) => {
     }
   }
 }
-.nc-select .ant-select {
-  height: fit-content;
-}
 </style>
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index a7fcd34360..a4d5f37de8 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -50,7 +50,7 @@ watch(inviteData, (newVal) => {
     const emailToAdd = newVal.email.split(',')[0].trim() || newVal.email.split(' ')[0].trim()
     if (!validateEmail(emailToAdd)) {
       emailValidation.isError = true
-      emailValidation.message = 'INVALID EMAIL'
+      emailValidation.message = 'Invalid Email'
       return
     }
     /** 
@@ -73,12 +73,12 @@ watch(inviteData, (newVal) => {
 const handleEnter = () => {
   if (inviteData.email.length < 1) {
     emailValidation.isError = true
-    emailValidation.message = 'EMAIL SHOULD NOT BE EMPTY'
+    emailValidation.message = 'Email Should Not Be Empty'
     return
   }
   if (!validateEmail(inviteData.email.trim())) {
     emailValidation.isError = true
-    emailValidation.message = 'INVALID EMAIL'
+    emailValidation.message = 'Invalid Email'
     return
   }
   inviteData.email += ' '
@@ -146,12 +146,12 @@ const onPaste = (e: ClipboardEvent) => {
   inputArray?.forEach((el) => {
     if (el.length < 1) {
       emailValidation.isError = true
-      emailValidation.message = 'EMAIL SHOULD NOT BE EMPTY'
+      emailValidation.message = 'Email Should Not Be Empty'
       return
     }
     if (!validateEmail(el.trim())) {
       emailValidation.isError = true
-      emailValidation.message = 'INVALID EMAIL'
+      emailValidation.message = 'Invalid Email'
       return
     }
     /** 
@@ -177,7 +177,7 @@ const onPaste = (e: ClipboardEvent) => {
       <div class="flex flex-col items-cenyet">
         <div
           ref="divRef"
-          class="flex w-130 border-1 gap-1 items-center flex-wrap min-h-8 max-h-30 overflow-y-scroll rounded-lg nc-scrollbar-md"
+          class="flex w-130 border-1 gap-1 items-center flex-wrap min-h-8 max-h-30 rounded-lg nc-scrollbar-md"
           tabindex="0"
           :class="{
             'border-primary/100': isDivFocused,
@@ -189,7 +189,7 @@ const onPaste = (e: ClipboardEvent) => {
           <span
             v-for="(email, index) in emailBadges"
             :key="email"
-            class="text-[14px] border-1 text-brand-500 bg-brand-50 rounded-md ml-1 p-0.5"
+            class="leading-4 border-1 text-brand-500 bg-brand-50 rounded-md ml-1 p-0.5"
           >
             {{ email }}
             <component
@@ -213,9 +213,6 @@ const onPaste = (e: ClipboardEvent) => {
         <span v-if="emailValidation.isError" class="ml-2 text-red-500 text-[10px] mt-1.5">{{ emailValidation.message }}</span>
       </div>
       <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
-        <template #suffixIcon>
-          <MdiChevronDown />
-        </template>
         <template v-for="role of allowedRoles" :key="`role-option-${role}`">
           <a-select-option v-if="role" :value="role">
             <NcBadge :color="RoleColors[role]">
@@ -229,13 +226,11 @@ const onPaste = (e: ClipboardEvent) => {
         type="primary"
         :disabled="!emailBadges.length || isInvitingCollaborators || emailValidation.isError"
         size="small"
+        :loading="isInvitingCollaborators"
         @click="inviteCollaborator"
       >
-        <div class="flex flex-row items-center gap-x-2 pr-1">
-          <GeneralLoader v-if="isInvitingCollaborators" class="flex" />
-          <MdiPlus v-else />
-          {{ isInvitingCollaborators ? 'Adding' : 'Add' }} User(s)
-        </div>
+        <MdiPlus />
+        {{ isInvitingCollaborators ? 'Adding' : 'Add' }} Member(s)
       </NcButton>
     </div>
   </div>

From 00dbe012b7546d7955e38d357b882d76d741433e Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:17 +0000
Subject: [PATCH 29/34] fix: reorder of input and refactor

---
 .../workspace/CollaboratorsList.vue           |  8 ++--
 .../components/workspace/InviteSection.vue    | 42 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui/components/workspace/CollaboratorsList.vue b/packages/nc-gui/components/workspace/CollaboratorsList.vue
index 2d1da65ab6..5bf89fcbe3 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -44,16 +44,16 @@ onMounted(async () => {
 
 <template>
   <div class="nc-collaborator-table-container mt-4 mx-6">
-    <WorkspaceInviteSection v-if="workspaceRoles !== WorkspaceUserRoles.VIEWER" />
-    <div class="w-full h-1 border-t-1 border-gray-100 opacity-50 mt-6"></div>
-    <div class="w-full flex flex-row justify-between items-baseline mt-6.5 mb-2 pr-0.25 ml-2">
-      <div class="text-xl">Members</div>
+    <!-- <div class="w-full h-1 border-t-1 border-gray-100 opacity-50 mt-6"></div> -->
+    <div class="w-full flex justify-between items-baseline mt-6.5 mb-2 pr-0.25 ml-2">
+      <div class="text-xl">Invite Members By Email</div>
       <a-input v-model:value="userSearchText" class="!max-w-90 !rounded-md mr-4" placeholder="Search members">
         <template #prefix>
           <PhMagnifyingGlassBold class="!h-3.5 text-gray-500" />
         </template>
       </a-input>
     </div>
+    <WorkspaceInviteSection v-if="workspaceRole !== WorkspaceUserRoles.VIEWER" />
     <div v-if="!filterCollaborators?.length" class="w-full h-full flex flex-col items-center justify-center mt-36">
       <Empty description="No members found" />
     </div>
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index a4d5f37de8..47eae89159 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -44,6 +44,20 @@ const insertOrUpdateString = (str: string) => {
   emailBadges.value.push(str)
 }
 
+const emailInputValidation = (input: string): boolean => {
+  if (input.length < 1) {
+    emailValidation.isError = true
+    emailValidation.message = 'Email Should Not Be Empty'
+    return false
+  }
+  if (!validateEmail(input.trim())) {
+    emailValidation.isError = true
+    emailValidation.message = 'Invalid Email'
+    return false
+  }
+  return true
+}
+
 watch(inviteData, (newVal) => {
   const isNewEmail = newVal.email.charAt(newVal.email.length - 1) === ',' || newVal.email.charAt(newVal.email.length - 1) === ' '
   if (isNewEmail && newVal.email.trim().length > 1) {
@@ -71,16 +85,9 @@ watch(inviteData, (newVal) => {
 })
 
 const handleEnter = () => {
-  if (inviteData.email.length < 1) {
-    emailValidation.isError = true
-    emailValidation.message = 'Email Should Not Be Empty'
-    return
-  }
-  if (!validateEmail(inviteData.email.trim())) {
-    emailValidation.isError = true
-    emailValidation.message = 'Invalid Email'
-    return
-  }
+  const isEmailIsValid = emailInputValidation(inviteData.email)
+  if (!isEmailIsValid) return
+
   inviteData.email += ' '
   emailValidation.isError = false
   emailValidation.message = ''
@@ -144,16 +151,10 @@ const onPaste = (e: ClipboardEvent) => {
     inputArray[0] = inviteData.email += inputArray[0]
   }
   inputArray?.forEach((el) => {
-    if (el.length < 1) {
-      emailValidation.isError = true
-      emailValidation.message = 'Email Should Not Be Empty'
-      return
-    }
-    if (!validateEmail(el.trim())) {
-      emailValidation.isError = true
-      emailValidation.message = 'Invalid Email'
-      return
-    }
+    const isEmailIsValid = emailInputValidation(el)
+
+    if (!isEmailIsValid) return
+
     /** 
      if email is already enterd we delete the already
      existing email and add new one
@@ -172,7 +173,6 @@ const onPaste = (e: ClipboardEvent) => {
 
 <template>
   <div class="my-2 pt-3 ml-2" data-testid="invite">
-    <div class="text-xl mb-4">Invite</div>
     <div class="flex gap-2">
       <div class="flex flex-col items-cenyet">
         <div

From 9f1a4d334ffb80ca16627bafaa1227ef2c5630be Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:17 +0000
Subject: [PATCH 30/34] fix: acces dropdown issues

---
 packages/nc-gui/components/nc/Badge.vue       |  2 +-
 packages/nc-gui/components/roles/Badge.vue    |  9 +++------
 packages/nc-gui/components/roles/Selector.vue |  8 ++++----
 .../workspace/CollaboratorsList.vue           | 20 +++++++++----------
 .../components/workspace/InviteSection.vue    | 17 ++++++++--------
 5 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/packages/nc-gui/components/nc/Badge.vue b/packages/nc-gui/components/nc/Badge.vue
index e22f94dc14..f9c5d345df 100644
--- a/packages/nc-gui/components/nc/Badge.vue
+++ b/packages/nc-gui/components/nc/Badge.vue
@@ -12,7 +12,7 @@ const props = withDefaults(
 
 <template>
   <div
-    class="h-6 rounded-md px-1"
+    class="rounded-md px-1"
     :class="{
       'border-purple-500 bg-purple-100': props.color === 'purple',
       'border-blue-500 bg-blue-100': props.color === 'blue',
diff --git a/packages/nc-gui/components/roles/Badge.vue b/packages/nc-gui/components/roles/Badge.vue
index b2775388df..8fa5b3839a 100644
--- a/packages/nc-gui/components/roles/Badge.vue
+++ b/packages/nc-gui/components/roles/Badge.vue
@@ -18,8 +18,6 @@ const props = withDefaults(
 
 const roleRef = toRef(props, 'role')
 const clickableRef = toRef(props, 'clickable')
-// const inheritRef = toRef(props, 'inherit')
-const borderRef = toRef(props, 'border')
 
 const roleProperties = computed(() => {
   const role = roleRef.value
@@ -38,15 +36,14 @@ const roleProperties = computed(() => {
 
 <template>
   <div
-    class="flex items-center !border-0"
+    class="flex items-center"
     :class="{
       'cursor-pointer': clickableRef,
     }"
-    style="width: fit-content"
   >
-    <NcBadge class="!h-auto !px-[8px]" :color="roleProperties.color" :border="borderRef">
+    <NcBadge class="!px-2" :color="roleProperties.color" :border="borderRef">
       <div
-        class="badge-text flex items-center gap-[4px]"
+        class="badge-text flex items-center gap-2 !h-7"
         :class="{
           'text-purple-500': roleProperties.color === 'purple',
           'text-blue-500': roleProperties.color === 'blue',
diff --git a/packages/nc-gui/components/roles/Selector.vue b/packages/nc-gui/components/roles/Selector.vue
index 472aea2afc..95683f74a6 100644
--- a/packages/nc-gui/components/roles/Selector.vue
+++ b/packages/nc-gui/components/roles/Selector.vue
@@ -23,13 +23,13 @@ const descriptionRef = toRef(props, 'description')
 
 <template>
   <NcDropdown>
-    <RolesBadge class="border-1" data-testid="roles" :role="roleRef" :inherit="inheritRef === role" clickable />
+    <RolesBadge data-testid="roles" :role="roleRef" :inherit="inheritRef === role" clickable />
     <template #overlay>
-      <div class="nc-role-select-dropdown flex flex-col gap-[4px] p-1">
-        <div class="flex flex-col gap-[4px]">
+      <div class="nc-role-select-dropdown flex flex-col gap-1 p-2">
+        <div class="flex flex-col gap-1">
           <div v-for="rl in props.roles" :key="rl" :value="rl" :selected="rl === roleRef" @click="props.onRoleChange(rl)">
             <div
-              class="flex flex-col py-[3px] px-[8px] gap-[4px] bg-transparent cursor-pointer"
+              class="flex flex-col py-1.5 rounded-lg px-2 gap-1 bg-transparent cursor-pointer hover:bg-gray-100"
               :class="{
                 'w-[350px]': descriptionRef,
                 'w-[200px]': !descriptionRef,
diff --git a/packages/nc-gui/components/workspace/CollaboratorsList.vue b/packages/nc-gui/components/workspace/CollaboratorsList.vue
index 5bf89fcbe3..26daccd9d5 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -98,21 +98,19 @@ onMounted(async () => {
           </td>
           <td class="w-1/5">
             <div class="-left-2.5 top-5">
-              <a-dropdown v-if="collab.roles !== WorkspaceUserRoles.OWNER" :trigger="['click']">
+              <NcDropdown v-if="collab.roles !== WorkspaceUserRoles.OWNER" :trigger="['click']">
                 <MdiDotsVertical
-                  class="h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)"
+                  class="border-1 !text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)"
                 />
                 <template #overlay>
-                  <a-menu>
-                    <a-menu-item @click="removeCollaborator(collab.id)">
-                      <div class="flex flex-row items-center py-2 text-s gap-1.5 text-red-500 cursor-pointer">
-                        <MaterialSymbolsDeleteOutlineRounded />
-                        Remove user
-                      </div>
-                    </a-menu-item>
-                  </a-menu>
+                  <NcMenu>
+                    <NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="removeCollaborator(collab.id)">
+                      <MaterialSymbolsDeleteOutlineRounded />
+                      Remove user
+                    </NcMenuItem>
+                  </NcMenu>
                 </template>
-              </a-dropdown>
+              </NcDropdown>
             </div>
           </td>
           <td class="w-1/5 padding"></td>
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 47eae89159..5bd4b45711 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -212,20 +212,19 @@ const onPaste = (e: ClipboardEvent) => {
         </div>
         <span v-if="emailValidation.isError" class="ml-2 text-red-500 text-[10px] mt-1.5">{{ emailValidation.message }}</span>
       </div>
-      <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
-        <template v-for="role of allowedRoles" :key="`role-option-${role}`">
-          <a-select-option v-if="role" :value="role">
-            <NcBadge :color="RoleColors[role]">
-              <p class="badge-text">{{ RoleLabels[role] }}</p>
-            </NcBadge>
-          </a-select-option>
-        </template>
-      </NcSelect>
+      <RolesSelector
+        class="px-1"
+        :role="inviteData.roles"
+        :roles="allowedRoles"
+        :on-role-change="(role: WorkspaceUserRoles) => (inviteData.roles = role)"
+        :description="true"
+      />
 
       <NcButton
         type="primary"
         :disabled="!emailBadges.length || isInvitingCollaborators || emailValidation.isError"
         size="small"
+        class="mt-0.5"
         :loading="isInvitingCollaborators"
         @click="inviteCollaborator"
       >

From 11131794296a172d9925405e7a1ac5b40c7ade04 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:17 +0000
Subject: [PATCH 31/34] fix: css typo

---
 packages/nc-gui/components/workspace/InviteSection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 5bd4b45711..99def98aa4 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -174,7 +174,7 @@ const onPaste = (e: ClipboardEvent) => {
 <template>
   <div class="my-2 pt-3 ml-2" data-testid="invite">
     <div class="flex gap-2">
-      <div class="flex flex-col items-cenyet">
+      <div class="flex flex-col">
         <div
           ref="divRef"
           class="flex w-130 border-1 gap-1 items-center flex-wrap min-h-8 max-h-30 rounded-lg nc-scrollbar-md"

From 4b71ee0419c9b23f32a61b166f3c39f3dcff3cb3 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:17 +0000
Subject: [PATCH 32/34] fix: badge size ds

---
 packages/nc-gui/components/nc/Badge.vue              |  7 ++++++-
 packages/nc-gui/components/roles/Badge.vue           | 12 +++++++++---
 packages/nc-gui/components/roles/Selector.vue        |  7 +++++--
 .../nc-gui/components/workspace/InviteSection.vue    |  6 +++---
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/nc/Badge.vue b/packages/nc-gui/components/nc/Badge.vue
index f9c5d345df..4a85d84919 100644
--- a/packages/nc-gui/components/nc/Badge.vue
+++ b/packages/nc-gui/components/nc/Badge.vue
@@ -3,16 +3,18 @@ const props = withDefaults(
   defineProps<{
     color: string
     border?: boolean
+    size?: 'sm' | 'md' | 'lg'
   }>(),
   {
     border: true,
+    size: 'sm',
   },
 )
 </script>
 
 <template>
   <div
-    class="rounded-md px-1"
+    class="rounded-md px-1 flex items-center"
     :class="{
       'border-purple-500 bg-purple-100': props.color === 'purple',
       'border-blue-500 bg-blue-100': props.color === 'blue',
@@ -22,6 +24,9 @@ const props = withDefaults(
       'border-red-500 bg-red-100': props.color === 'red',
       'border-gray-300': !props.color,
       'border-1': props.border,
+      '!h-6': props.size === 'sm',
+      '!h-8': props.size === 'md',
+      '!h-10': props.size === 'lg',
     }"
   >
     <slot />
diff --git a/packages/nc-gui/components/roles/Badge.vue b/packages/nc-gui/components/roles/Badge.vue
index 8fa5b3839a..c64cf8ec58 100644
--- a/packages/nc-gui/components/roles/Badge.vue
+++ b/packages/nc-gui/components/roles/Badge.vue
@@ -8,16 +8,21 @@ const props = withDefaults(
     clickable?: boolean
     inherit?: boolean
     border?: boolean
+    size?: 'sm' | 'md'
   }>(),
   {
     clickable: false,
     inherit: false,
     border: true,
+    size: 'sm',
   },
 )
 
 const roleRef = toRef(props, 'role')
 const clickableRef = toRef(props, 'clickable')
+const borderRef = toRef(props, 'border')
+
+const sizeSelect = computed(() => props.size)
 
 const roleProperties = computed(() => {
   const role = roleRef.value
@@ -36,14 +41,14 @@ const roleProperties = computed(() => {
 
 <template>
   <div
-    class="flex items-center"
+    class="flex items-start"
     :class="{
       'cursor-pointer': clickableRef,
     }"
   >
-    <NcBadge class="!px-2" :color="roleProperties.color" :border="borderRef">
+    <NcBadge class="!px-2" :color="roleProperties.color" :border="borderRef" :size="sizeSelect">
       <div
-        class="badge-text flex items-center gap-2 !h-7"
+        class="badge-text flex items-center gap-2"
         :class="{
           'text-purple-500': roleProperties.color === 'purple',
           'text-blue-500': roleProperties.color === 'blue',
@@ -52,6 +57,7 @@ const roleProperties = computed(() => {
           'text-yellow-500': roleProperties.color === 'yellow',
           'text-red-500': roleProperties.color === 'red',
           'text-gray-300': !roleProperties.color,
+          sizeSelect,
         }"
       >
         <GeneralIcon :icon="roleProperties.icon" />
diff --git a/packages/nc-gui/components/roles/Selector.vue b/packages/nc-gui/components/roles/Selector.vue
index 95683f74a6..e872b38c7c 100644
--- a/packages/nc-gui/components/roles/Selector.vue
+++ b/packages/nc-gui/components/roles/Selector.vue
@@ -10,20 +10,23 @@ const props = withDefaults(
     description?: boolean
     inherit?: string
     onRoleChange: (role: keyof typeof RoleLabels) => void
+    size: 'sm' | 'md'
   }>(),
   {
     description: true,
+    size: 'sm',
   },
 )
 
 const roleRef = toRef(props, 'role')
 const inheritRef = toRef(props, 'inherit')
 const descriptionRef = toRef(props, 'description')
+const sizeRef = toRef(props, 'size')
 </script>
 
 <template>
-  <NcDropdown>
-    <RolesBadge data-testid="roles" :role="roleRef" :inherit="inheritRef === role" clickable />
+  <NcDropdown size="lg" class="nc-roles-selector">
+    <RolesBadge data-testid="roles" :role="roleRef" :inherit="inheritRef === role" clickable :size="sizeRef" />
     <template #overlay>
       <div class="nc-role-select-dropdown flex flex-col gap-1 p-2">
         <div class="flex flex-col gap-1">
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 99def98aa4..6d0baa8bca 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { onKeyStroke } from '@vueuse/core'
-import { OrderedWorkspaceRoles, RoleColors, RoleLabels, WorkspaceUserRoles } from 'nocodb-sdk'
+import { OrderedWorkspaceRoles, WorkspaceUserRoles } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg, useWorkspace } from '#imports'
 
 const inviteData = reactive({
@@ -213,6 +213,7 @@ const onPaste = (e: ClipboardEvent) => {
         <span v-if="emailValidation.isError" class="ml-2 text-red-500 text-[10px] mt-1.5">{{ emailValidation.message }}</span>
       </div>
       <RolesSelector
+        size="md"
         class="px-1"
         :role="inviteData.roles"
         :roles="allowedRoles"
@@ -222,9 +223,8 @@ const onPaste = (e: ClipboardEvent) => {
 
       <NcButton
         type="primary"
-        :disabled="!emailBadges.length || isInvitingCollaborators || emailValidation.isError"
         size="small"
-        class="mt-0.5"
+        :disabled="!emailBadges.length || isInvitingCollaborators || emailValidation.isError"
         :loading="isInvitingCollaborators"
         @click="inviteCollaborator"
       >

From 1d1929f23acfdf3266343a9c336e2d679edf98e1 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:17 +0000
Subject: [PATCH 33/34] fix: refactor

---
 .../components/dlg/share-and-collaborate/View.vue    |  2 +-
 .../nc-gui/components/project/AccessSettings.vue     |  5 -----
 .../nc-gui/components/workspace/InviteSection.vue    | 12 ++++--------
 3 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
index 15df9e2b0d..8f5d14efa1 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
@@ -101,7 +101,7 @@ watch(showShareModal, (val) => {
     <template v-else-if="formStatus === 'project-collaborateSaved'">
       <div class="flex flex-col py-1.5">
         <div class="flex flex-row w-full px-5 justify-between items-center py-0.5">
-          <div class="flex text-base" :style="{ fontWeight: 500 }">Members added</div>
+          <div class="flex text-base font-medium">Members added</div>
           <div class="flex">
             <MdiCheck />
           </div>
diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index c21f6a5540..439e7d292a 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -135,11 +135,6 @@ watchDebounced(
   },
 )
 
-const userProjectRole = computed<(typeof ProjectRoles)[keyof typeof ProjectRoles]>(() => {
-  const projectUser = collaborators.value?.find((collab) => collab.id === user.value?.id)
-  return projectUser?.projectRoles
-})
-
 onMounted(async () => {
   isLoading.value = true
   try {
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 6d0baa8bca..9466a1122c 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -2,6 +2,7 @@
 import { onKeyStroke } from '@vueuse/core'
 import { OrderedWorkspaceRoles, WorkspaceUserRoles } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg, useWorkspace } from '#imports'
+import { validateEmail } from '~/utils/validation'
 
 const inviteData = reactive({
   email: '',
@@ -17,11 +18,6 @@ const emailValidation = reactive({
   message: '',
 })
 
-const validateEmail = (email: string): boolean => {
-  const regEx = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-  return regEx.test(email)
-}
-
 const workspaceStore = useWorkspace()
 
 const { inviteCollaborator: _inviteCollaborator } = workspaceStore
@@ -45,7 +41,7 @@ const insertOrUpdateString = (str: string) => {
 }
 
 const emailInputValidation = (input: string): boolean => {
-  if (input.length < 1) {
+  if (!input.length) {
     emailValidation.isError = true
     emailValidation.message = 'Email Should Not Be Empty'
     return false
@@ -60,7 +56,7 @@ const emailInputValidation = (input: string): boolean => {
 
 watch(inviteData, (newVal) => {
   const isNewEmail = newVal.email.charAt(newVal.email.length - 1) === ',' || newVal.email.charAt(newVal.email.length - 1) === ' '
-  if (isNewEmail && newVal.email.trim().length > 1) {
+  if (isNewEmail && !newVal.email.trim().length) {
     const emailToAdd = newVal.email.split(',')[0].trim() || newVal.email.split(' ')[0].trim()
     if (!validateEmail(emailToAdd)) {
       emailValidation.isError = true
@@ -79,7 +75,7 @@ watch(inviteData, (newVal) => {
     emailBadges.value.push(emailToAdd)
     inviteData.email = ''
   }
-  if (newVal.email.length < 1 && emailValidation.isError) {
+  if (!newVal.email.length && emailValidation.isError) {
     emailValidation.isError = false
   }
 })

From 92445941175c4fd82d92a3af7b9dc379dabb41e6 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:17 +0000
Subject: [PATCH 34/34] fix: refactor email payload

---
 .../components/workspace/InviteSection.vue     | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 9466a1122c..180d29a647 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -56,7 +56,7 @@ const emailInputValidation = (input: string): boolean => {
 
 watch(inviteData, (newVal) => {
   const isNewEmail = newVal.email.charAt(newVal.email.length - 1) === ',' || newVal.email.charAt(newVal.email.length - 1) === ' '
-  if (isNewEmail && !newVal.email.trim().length) {
+  if (isNewEmail && newVal.email.trim().length) {
     const emailToAdd = newVal.email.split(',')[0].trim() || newVal.email.split(' ')[0].trim()
     if (!validateEmail(emailToAdd)) {
       emailValidation.isError = true
@@ -91,17 +91,9 @@ const handleEnter = () => {
 
 const inviteCollaborator = async () => {
   try {
-    let inviteEmails = ''
-    emailBadges.value.forEach((el, index) => {
-      // prevent the last email from getting the ","
-      if (index === emailBadges.value.length - 1) {
-        inviteEmails += el
-      } else {
-        inviteEmails += `${el},`
-      }
-    })
-
-    await _inviteCollaborator(inviteEmails, inviteData.roles)
+    const payloadData = emailBadges.value.join(',')
+
+    await _inviteCollaborator(payloadData, inviteData.roles)
     message.success('Invitation sent successfully')
     inviteData.email = ''
     emailBadges.value = []
@@ -199,7 +191,7 @@ const onPaste = (e: ClipboardEvent) => {
             ref="focusRef"
             v-model="inviteData.email"
             :placeholder="emailBadges.length < 1 ? 'Enter emails to send invitation' : ''"
-            class="min-w-50 !outline-0 !focus:outline-0 ml-2 mr-3"
+            class="min-w-50 outline-0 ml-2 mr-3"
             data-testid="email-input"
             @keyup.enter="handleEnter"
             @blur="isDivFocused = false"