From 41f294db7ba5cae2111c416845c3d95d4fbc3771 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Mon, 18 Mar 2024 18:29:15 +0530
Subject: [PATCH] Revert "feat(nc-gui): new share ui (#7845)"

This reverts commit f3c626abc3a401c0123970bb7745155f99b2223c.
---
 .../dlg/share-and-collaborate/ShareBase.vue   | 489 ++----------------
 .../dlg/share-and-collaborate/SharePage.vue   | 376 ++++++--------
 .../dlg/share-and-collaborate/View.vue        | 248 +++++----
 .../nc-gui/components/general/CopyUrl.vue     |   4 +-
 .../components/general/ShareProject.vue       |   3 +-
 packages/nc-gui/components/nc/Modal.vue       |   4 +-
 packages/nc-gui/components/nc/Switch.vue      |  23 +-
 packages/nc-gui/components/nc/Tabs.vue        |   2 +-
 .../components/project/ShareBaseDlg.vue       |   9 +-
 packages/nc-gui/components/roles/Badge.vue    |   2 +-
 .../components/workspace/InviteSection.vue    |   4 +
 packages/nc-gui/lang/en.json                  |   8 +-
 .../pages/Dashboard/common/Topbar/Share.ts    |  38 +-
 .../pages/Dashboard/common/Topbar/index.ts    |   5 +-
 .../tests/db/features/baseShare.spec.ts       |   5 +-
 15 files changed, 401 insertions(+), 819 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/ShareBase.vue b/packages/nc-gui/components/dlg/share-and-collaborate/ShareBase.vue
index f05f5313d4..3bd06fe17e 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/ShareBase.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/ShareBase.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { OrderedProjectRoles, ProjectRoles } from 'nocodb-sdk'
-import { onKeyStroke } from '@vueuse/core'
 import {
-  type User,
   extractSdkResponseErrorMsg,
   message,
   onMounted,
@@ -12,7 +9,6 @@ import {
   useGlobal,
   useNuxtApp,
   useWorkspace,
-  validateEmail,
 } from '#imports'
 
 interface ShareBase {
@@ -21,13 +17,6 @@ interface ShareBase {
   role?: string
 }
 
-const props = defineProps({
-  isView: {
-    type: Boolean,
-    default: false,
-  },
-})
-
 enum ShareBaseRole {
   Editor = 'editor',
   Viewer = 'viewer',
@@ -37,27 +26,13 @@ const { dashboardUrl } = useDashboard()
 
 const { $api, $e } = useNuxtApp()
 
-const { getBaseUrl, appInfo } = useGlobal()
-
-const workspaceStore = useWorkspace()
-
-const baseStore = useBase()
-
-const basesStore = useBases()
-
-const { activeProjectId } = storeToRefs(basesStore)
+const sharedBase = ref<null | ShareBase>(null)
 
 const { base } = storeToRefs(useBase())
 
-const { navigateToProjectPage } = baseStore
-
-const { createProjectUser } = basesStore
-
-const { baseRoles } = useRoles()
-
-const sharedBase = ref<null | ShareBase>(null)
+const { getBaseUrl, appInfo } = useGlobal()
 
-const { showShareModal } = storeToRefs(useShare())
+const workspaceStore = useWorkspace()
 
 const url = computed(() => {
   if (!sharedBase.value || !sharedBase.value.uuid) return ''
@@ -73,6 +48,22 @@ const url = computed(() => {
   return encodeURI(`${dashboardUrl1}#/base/${sharedBase.value.uuid}`)
 })
 
+const loadBase = async () => {
+  try {
+    if (!base.value.id) return
+
+    const res = await $api.base.sharedBaseGet(base.value.id)
+
+    sharedBase.value = {
+      uuid: res.uuid,
+      url: res.url,
+      role: res.roles,
+    }
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
 const createShareBase = async (role = ShareBaseRole.Viewer) => {
   try {
     if (!base.value.id) return
@@ -107,6 +98,12 @@ const disableSharedBase = async () => {
   $e('a:shared-base:disable')
 }
 
+onMounted(() => {
+  if (!sharedBase.value) {
+    loadBase()
+  }
+})
+
 const isSharedBaseEnabled = computed(() => !!sharedBase.value?.uuid)
 const isToggleBaseLoading = ref(false)
 const isRoleToggleLoading = ref(false)
@@ -128,113 +125,10 @@ const toggleSharedBase = async () => {
   }
 }
 
-const openedBaseShareTab = ref<'members' | 'public'>('members')
-
-const allowedRoles = ref<ProjectRoles[]>([])
-
-const inviteData = reactive({
-  email: '',
-  roles: ProjectRoles.VIEWER,
-})
-
-const focusRef = ref<HTMLInputElement>()
-const isDivFocused = ref(false)
-const divRef = ref<HTMLDivElement>()
-
-const emailBadges = ref<Array<string>>([])
-
-const emailValidation = reactive({
-  isError: true,
-  message: '',
-})
-const singleEmailValue = ref('')
-
-const focusOnDiv = () => {
-  focusRef.value?.focus()
-  isDivFocused.value = true
-}
-
-const isInviteButtonDisabled = computed(() => {
-  if (!emailBadges.value.length && !singleEmailValue.value.length) {
-    return true
-  }
-  if (emailBadges.value.length && inviteData.email) {
-    return true
-  }
-})
-
-// remove one email per backspace
-onKeyStroke('Backspace', () => {
-  if (isDivFocused.value && inviteData.email.length < 1) {
-    emailBadges.value.pop()
-  }
-})
-
-onMounted(async () => {
-  try {
-    const currentRoleIndex = OrderedProjectRoles.findIndex(
-      (role) => baseRoles.value && Object.keys(baseRoles.value).includes(role),
-    )
-    if (currentRoleIndex !== -1) {
-      allowedRoles.value = OrderedProjectRoles.slice(currentRoleIndex + 1).filter((r) => r)
-    }
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-})
-
-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)
-}
-
-const emailInputValidation = (input: string): boolean => {
-  if (!input.length) {
-    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
-}
-const handleEnter = () => {
-  const isEmailIsValid = emailInputValidation(inviteData.email)
-  if (!isEmailIsValid) return
-
-  inviteData.email += ' '
-  emailValidation.isError = false
-  emailValidation.message = ''
-}
-
-const loadBase = async () => {
-  try {
-    if (!base.value.id) return
-    const res = await $api.base.sharedBaseGet(base.value.id)
-    sharedBase.value = {
-      uuid: res.uuid,
-      url: res.url,
-      role: res.roles,
-    }
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-}
-
 const onRoleToggle = async () => {
   if (!sharedBase.value) return
   if (isRoleToggleLoading.value) return
+
   isRoleToggleLoading.value = true
   try {
     if (sharedBase.value.role === ShareBaseRole.Viewer) {
@@ -248,317 +142,34 @@ const onRoleToggle = async () => {
     isRoleToggleLoading.value = false
   }
 }
-
-const inviteProjectCollaborator = async () => {
-  try {
-    const payloadData = singleEmailValue.value || emailBadges.value.join(',')
-    if (!payloadData.includes(',')) {
-      const validationStatus = validateEmail(payloadData)
-      if (!validationStatus) {
-        emailValidation.isError = true
-        emailValidation.message = 'invalid email'
-      }
-    }
-    await createProjectUser(activeProjectId.value!, {
-      email: payloadData,
-      roles: inviteData.roles,
-    } as unknown as User)
-
-    message.success('Invitation sent successfully')
-    inviteData.email = ''
-    emailBadges.value = []
-    showShareModal.value = false
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  } finally {
-    singleEmailValue.value = ''
-  }
-}
-
-const onPaste = (e: ClipboardEvent) => {
-  const pastedText = e.clipboardData?.getData('text')
-
-  if (!pastedText) return
-
-  let inputArray
-
-  if (pastedText?.includes(',')) {
-    inputArray = pastedText?.split(',')
-  } else if (pastedText?.includes(' ')) {
-    inputArray = pastedText?.split(' ')
-  } else {
-    inputArray = pastedText?.split('\n')
-  }
-
-  // if data is pasted to a already existing text in input
-  // we add existingInput + pasted data
-  if (inputArray?.length === 1 && inviteData.email.length) {
-    inputArray[0] = inviteData.email += inputArray[0]
-  }
-
-  inputArray?.forEach((el) => {
-    const isEmailIsValid = emailInputValidation(el)
-
-    if (!isEmailIsValid) return
-
-    /**
-     if email is already enterd we delete the already
-     existing email and add new one
-     **/
-    if (emailBadges.value.includes(el)) {
-      insertOrUpdateString(el)
-      return
-    }
-    emailBadges.value.push(el)
-
-    inviteData.email = ''
-  })
-  inviteData.email = ''
-}
-
-watch(inviteData, (newVal) => {
-  // when user only want to enter a single email
-  // we dont convert that as badge
-
-  const isSingleEmailValid = validateEmail(newVal.email)
-  if (isSingleEmailValid && !emailBadges.value.length) {
-    singleEmailValue.value = newVal.email
-    emailValidation.isError = false
-    return
-  }
-  singleEmailValue.value = ''
-
-  // when user enters multiple emails comma sepearted or space sepearted
-  const isNewEmail = newVal.email.charAt(newVal.email.length - 1) === ',' || newVal.email.charAt(newVal.email.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
-      emailValidation.message = 'Invalid Email'
-      return
-    }
-    /**
-     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
-    }
-    emailBadges.value.push(emailToAdd)
-    inviteData.email = ''
-    singleEmailValue.value = ''
-  }
-  if (!newVal.email.length && emailValidation.isError) {
-    emailValidation.isError = false
-  }
-})
-
-const openManageAccess = async () => {
-  try {
-    await navigateToProjectPage({ page: 'collaborator' })
-    showShareModal.value = false
-  } catch (e) {
-    console.error(e)
-    message.error('Failed to open manage access')
-  }
-}
-
-onMounted(() => {
-  if (!sharedBase.value) {
-    loadBase()
-  }
-})
 </script>
 
 <template>
-  <div class="flex flex-col !h-80 gap-2" data-testid="nc-share-base-sub-modal">
-    <NcTabs v-model:activeKey="openedBaseShareTab" class="nc-base-share-tab h-full" size="medium">
-      <a-tab-pane key="members">
-        <template #tab>
-          <div class="tab" data-testid="nc-base-share-member">
-            <GeneralIcon :class="{}" class="tab-icon" icon="user" />
-            <div>Add Members</div>
-          </div>
-        </template>
-
-        <div class="my-4 space-y-3">
-          <div class="flex justify-between items-center">
-            <div class="gap-2 flex items-center text-gray-500">
-              <span> {{ $t('activity.inviteAs') }} </span>
-              <RolesSelector
-                :description="false"
-                :on-role-change="(role: ProjectRoles) => (inviteData.roles = role)"
-                :role="inviteData.roles"
-                :roles="allowedRoles"
-                class="px-1 !min-w-[152px] nc-invite-role-selector"
-                size="md"
-              />
-              <span>
-                {{ $t('activity.toBase') }}
-              </span>
-              <span class="flex text-gray-600 items-center py-1 px-2 h-[1.75rem] gap-2 bg-gray-100 rounded-lg text-md">
-                <GeneralProjectIcon
-                  :color="parseProp(base.meta).iconColor"
-                  :type="base.type"
-                  class="nc-view-icon w-4 h-4 group-hover"
-                />
-                <span class="max-w-72 truncate">
-                  <NcTooltip show-on-truncate-only>
-                    <template #title> {{ base.title }} </template>
-                    <span class="ellipsis max-w-64">
-                      {{ base.title }}
-                    </span>
-                  </NcTooltip>
-                </span>
-              </span>
-            </div>
-            <NcTooltip>
-              <template #title>{{ $t('labels.enterMultipleEmails') }} </template>
-              <component :is="iconMap.info" class="text-gray-500" />
-            </NcTooltip>
-          </div>
-          <div class="flex flex-col">
-            <div
-              ref="divRef"
-              :class="{
-                'border-gray-200': isDivFocused,
-              }"
-              class="flex py-2 px-2 border-1 gap-1 items-center max-h-46 flex-wrap rounded-lg nc-scrollbar-md"
-              tabindex="0"
-              @blur="isDivFocused = false"
-              @click="focusOnDiv"
-            >
-              <span
-                v-for="(email, index) in emailBadges"
-                :key="email"
-                class="leading-4 border-1 text-gray-800 bg-gray-100 rounded-md ml-1 px-2 py-1"
-              >
-                {{ 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-60 outline-0 ml-2 mr-3 flex-grow-1"
-                data-testid="email-input"
-                @blur="isDivFocused = false"
-                @keyup.enter="handleEnter"
-                @paste.prevent="onPaste"
-              />
-            </div>
-            <span v-if="emailValidation.isError && emailValidation.message" class="ml-2 text-red-500 text-[10px] mt-1.5">{{
-              emailValidation.message
-            }}</span>
-          </div>
+  <div class="flex flex-col py-2 px-3 gap-2 w-full" data-testid="nc-share-base-sub-modal">
+    <div class="flex flex-col w-full p-3 border-1 border-gray-100 rounded-md">
+      <div class="flex flex-row w-full justify-between">
+        <div class="text-gray-900 font-medium">{{ $t('activity.enablePublicAccess') }}</div>
+        <a-switch
+          v-e="['c:share:base:enable:toggle']"
+          :checked="isSharedBaseEnabled"
+          :loading="isToggleBaseLoading"
+          class="ml-2"
+          @click="toggleSharedBase"
+        />
+      </div>
+      <div v-if="isSharedBaseEnabled" class="flex flex-col w-full mt-3 border-t-1 pt-3 border-gray-100">
+        <GeneralCopyUrl v-model:url="url" />
+        <div v-if="!appInfo.ee" class="flex flex-row justify-between mt-3 bg-gray-50 px-3 py-2 rounded-md">
+          <div class="text-black">{{ $t('activity.editingAccess') }}</div>
+          <a-switch
+            v-e="['c:share:base:role:toggle']"
+            :loading="isRoleToggleLoading"
+            :checked="sharedBase?.role === ShareBaseRole.Editor"
+            class="ml-2"
+            @click="onRoleToggle"
+          />
         </div>
-      </a-tab-pane>
-
-      <a-tab-pane key="public">
-        <template #tab>
-          <div class="tab" data-testid="nc-base-share-public">
-            <MaterialSymbolsPublic />
-            <div>Share Publicly</div>
-          </div>
-        </template>
-        <div class="border-1 my-4 p-3 border-1 space-y-3 border-gray-200 rounded-lg">
-          <div class="flex flex-row items-center w-full">
-            <div class="flex text-gray-700 !w-full items-center gap-2 px-2">
-              <span class="font-medium">
-                {{ $t('activity.enablePublicAccess') }}
-              </span>
-
-              <span class="flex items-center py-1 px-2 h-[1.75rem] gap-2 rounded-lg bg-gray-100 text-md">
-                <GeneralProjectIcon
-                  :color="parseProp(base.meta).iconColor"
-                  :type="base.type"
-                  class="nc-view-icon w-4 h-4 group-hover"
-                />
-                <span class="max-w-72 truncate">
-                  <NcTooltip show-on-truncate-only>
-                    <template #title> {{ base.title }} </template>
-                    <span class="ellipsis max-w-64">
-                      {{ base.title }}
-                    </span>
-                  </NcTooltip>
-                </span>
-              </span>
-            </div>
-            <NcSwitch
-              v-e="['c:share:base:enable:toggle']"
-              :checked="isSharedBaseEnabled"
-              class="ml-2"
-              @change="toggleSharedBase"
-            />
-          </div>
-          <div v-if="isSharedBaseEnabled" class="space-y-3">
-            <GeneralCopyUrl
-              v-model:url="url"
-              :class="{
-                'w-[34.625rem]': props.isView,
-              }"
-            />
-            <div v-if="!appInfo.ee" class="flex flex-row gap-3 items-center">
-              <a-switch
-                v-e="['c:share:base:role:toggle']"
-                :checked="sharedBase?.role === ShareBaseRole.Editor"
-                :loading="isRoleToggleLoading"
-                class="share-editor-toggle !mt-0.25"
-                data-testid="share-password-toggle"
-                size="small"
-                @click="onRoleToggle"
-              />
-              <div class="flex text-black">{{ $t('activity.editingAccess') }}</div>
-            </div>
-          </div>
-        </div>
-      </a-tab-pane>
-    </NcTabs>
-    <div class="flex gap-2 items-end justify-end">
-      <NcButton v-if="openedBaseShareTab === 'members'" type="secondary" @click="showShareModal = false">
-        {{ $t('general.cancel') }}
-      </NcButton>
-      <NcButton type="secondary" @click="openManageAccess">
-        {{ $t('activity.manageAccess') }}
-      </NcButton>
-      <NcButton v-if="openedBaseShareTab === 'members'" :disabled="isInviteButtonDisabled" @click="inviteProjectCollaborator">
-        {{ $t('activity.inviteMembers') }}
-      </NcButton>
-      <NcButton v-else-if="openedBaseShareTab === 'public'" type="secondary" @click="showShareModal = false">
-        {{ $t('general.finish') }}
-      </NcButton>
+      </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-:deep(.nc-invite-role-selector .nc-role-badge) {
-  @apply w-full;
-}
-.tab {
-  @apply flex flex-row items-center gap-x-2;
-}
-
-:deep(.ant-tabs-nav-list) {
-  @apply !gap-5;
-}
-
-:deep(.ant-tabs-tab) {
-  @apply !pt-0 !pb-2.5 !ml-0;
-}
-
-.ant-tabs-content {
-  @apply !h-full;
-}
-
-.ant-tabs-content-top {
-  @apply !h-full;
-}
-</style>
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index e53e15f81c..fafadd37ba 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ColumnType, KanbanType, ViewType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
-import { PreFilledMode, iconMap, message, storeToRefs, useBase, useMetas } from '#imports'
+import { PreFilledMode, useMetas } from '#imports'
 
 const { view: _view, $api } = useSmartsheetStoreOrThrow()
 const { $e } = useNuxtApp()
@@ -11,14 +11,6 @@ const { dashboardUrl } = useDashboard()
 
 const viewStore = useViewsStore()
 
-const { viewsByTable } = storeToRefs(viewStore)
-
-const { showShareModal } = storeToRefs(useShare())
-
-const baseStore = useBase()
-
-const { navigateToProjectPage } = baseStore
-
 const { metas } = useMetas()
 
 const workspaceStore = useWorkspace()
@@ -52,34 +44,8 @@ const activeView = computed<(ViewType & { meta: object & Record<string, any> })
   },
 })
 
-const viewsInTable = computed({
-  get: () => {
-    if (!activeView.value) return []
-    return viewsByTable.value.get(activeView.value?.fk_model_id) || []
-  },
-  set: (val) => {
-    viewsByTable.value.set(activeView.value?.fk_model_id, val)
-  },
-})
-
-const selectedViewId = ref<string | undefined>(activeView.value?.id)
-
-watch(activeView, (val) => {
-  selectedViewId.value = val?.id
-})
-
-const selectedView = computed<(ViewType & { meta: object & Record<string, any> }) | undefined>({
-  get: () => {
-    if (!selectedViewId.value) return
-    return viewsInTable.value.find((v) => v.id === selectedViewId.value)
-  },
-  set: (val) => {
-    viewsInTable.value = viewsInTable.value.map((v) => (v.id === selectedViewId.value ? val : v))
-  },
-})
-
 const isPublicShared = computed(() => {
-  return !!selectedView.value?.uuid
+  return !!activeView.value?.uuid
 })
 
 const url = computed(() => {
@@ -89,27 +55,27 @@ const url = computed(() => {
 const passwordProtectedLocal = ref(false)
 
 const passwordProtected = computed(() => {
-  return !!selectedView.value?.password || passwordProtectedLocal.value
+  return !!activeView.value?.password || passwordProtectedLocal.value
 })
 
 const password = computed({
-  get: () => (passwordProtected.value ? selectedView.value?.password ?? '' : ''),
+  get: () => (passwordProtected.value ? activeView.value?.password ?? '' : ''),
   set: async (value) => {
-    if (!selectedView.value) return
+    if (!activeView.value) return
 
-    selectedView.value = { ...(selectedView.value as any), password: passwordProtected.value ? value : null }
+    activeView.value = { ...(activeView.value as any), password: passwordProtected.value ? value : null }
 
     updateSharedView()
   },
 })
 
 const viewTheme = computed({
-  get: () => !!selectedView.value?.meta.withTheme,
+  get: () => !!activeView.value?.meta.withTheme,
   set: (withTheme) => {
-    if (!selectedView.value?.meta) return
+    if (!activeView.value?.meta) return
 
-    selectedView.value.meta = {
-      ...selectedView.value.meta,
+    activeView.value.meta = {
+      ...activeView.value.meta,
       withTheme,
     }
     saveTheme()
@@ -118,15 +84,15 @@ const viewTheme = computed({
 
 const togglePasswordProtected = async () => {
   passwordProtectedLocal.value = !passwordProtected.value
-  if (!selectedView.value) return
+  if (!activeView.value) return
   if (isUpdating.value.password) return
 
   isUpdating.value.password = true
   try {
     if (passwordProtected.value) {
-      selectedView.value = { ...(selectedView.value as any), password: null }
+      activeView.value = { ...(activeView.value as any), password: null }
     } else {
-      selectedView.value = { ...(selectedView.value as any), password: '' }
+      activeView.value = { ...(activeView.value as any), password: '' }
     }
 
     await updateSharedView()
@@ -137,35 +103,35 @@ const togglePasswordProtected = async () => {
 
 const withRTL = computed({
   get: () => {
-    if (!selectedView.value?.meta) return false
+    if (!activeView.value?.meta) return false
 
-    if (typeof selectedView.value?.meta === 'string') {
-      selectedView.value.meta = JSON.parse(selectedView.value.meta)
+    if (typeof activeView.value?.meta === 'string') {
+      activeView.value.meta = JSON.parse(activeView.value.meta)
     }
 
-    return !!(selectedView.value?.meta as any)?.rtl
+    return !!(activeView.value?.meta as any)?.rtl
   },
   set: (rtl) => {
-    if (!selectedView.value?.meta) return
+    if (!activeView.value?.meta) return
 
-    if (typeof selectedView.value?.meta === 'string') {
-      selectedView.value.meta = JSON.parse(selectedView.value.meta)
+    if (typeof activeView.value?.meta === 'string') {
+      activeView.value.meta = JSON.parse(activeView.value.meta)
     }
 
-    selectedView.value.meta = { ...(selectedView.value.meta as any), rtl }
+    activeView.value.meta = { ...(activeView.value.meta as any), rtl }
     updateSharedView()
   },
 })
 
 const allowCSVDownload = computed({
-  get: () => !!(selectedView.value?.meta as any)?.allowCSVDownload,
+  get: () => !!(activeView.value?.meta as any)?.allowCSVDownload,
   set: async (allow) => {
-    if (!selectedView.value?.meta) return
+    if (!activeView.value?.meta) return
 
     isUpdating.value.download = true
 
     try {
-      selectedView.value.meta = { ...selectedView.value.meta, allowCSVDownload: allow }
+      activeView.value.meta = { ...activeView.value.meta, allowCSVDownload: allow }
       await saveAllowCSVDownload()
     } finally {
       isUpdating.value.download = false
@@ -174,22 +140,22 @@ const allowCSVDownload = computed({
 })
 
 const surveyMode = computed({
-  get: () => !!selectedView.value?.meta.surveyMode,
+  get: () => !!activeView.value?.meta.surveyMode,
   set: (survey) => {
-    if (!selectedView.value?.meta) return
+    if (!activeView.value?.meta) return
 
-    selectedView.value.meta = { ...selectedView.value.meta, surveyMode: survey }
+    activeView.value.meta = { ...activeView.value.meta, surveyMode: survey }
     saveSurveyMode()
   },
 })
 
 const formPreFill = computed({
   get: () => ({
-    preFillEnabled: parseProp(selectedView.value?.meta)?.preFillEnabled ?? false,
-    preFilledMode: parseProp(selectedView.value?.meta)?.preFilledMode || PreFilledMode.Default,
+    preFillEnabled: parseProp(activeView.value?.meta)?.preFillEnabled ?? false,
+    preFilledMode: parseProp(activeView.value?.meta)?.preFilledMode || PreFilledMode.Default,
   }),
   set: (value) => {
-    if (!selectedView.value?.meta) return
+    if (!activeView.value?.meta) return
 
     if (formPreFill.value.preFillEnabled !== value.preFillEnabled) {
       $e(`a:view:share:prefilled-mode-${value.preFillEnabled ? 'enabled' : 'disabled'}`)
@@ -199,8 +165,8 @@ const formPreFill = computed({
       $e(`a:view:share:${value.preFilledMode}-prefilled-mode`)
     }
 
-    selectedView.value.meta = {
-      ...selectedView.value.meta,
+    activeView.value.meta = {
+      ...activeView.value.meta,
       ...value,
     }
     savePreFilledMode()
@@ -215,10 +181,10 @@ const handleChangeFormPreFill = (value: { preFillEnabled?: boolean; preFilledMod
 }
 
 function sharedViewUrl() {
-  if (!selectedView.value) return
+  if (!activeView.value) return
 
   let viewType
-  switch (selectedView.value.type) {
+  switch (activeView.value.type) {
     case ViewTypes.FORM:
       viewType = 'form'
       break
@@ -247,30 +213,30 @@ function sharedViewUrl() {
   }
 
   return encodeURI(
-    `${dashboardUrl1}#/nc/${viewType}/${selectedView.value.uuid}${surveyMode.value ? '/survey' : ''}${
+    `${dashboardUrl1}#/nc/${viewType}/${activeView.value.uuid}${surveyMode.value ? '/survey' : ''}${
       viewStore.preFillFormSearchParams && formPreFill.value.preFillEnabled ? `?${viewStore.preFillFormSearchParams}` : ''
     }`,
   )
 }
 
 const toggleViewShare = async () => {
-  if (!selectedView.value?.id) return
+  if (!activeView.value?.id) return
 
-  if (selectedView.value?.uuid) {
-    await $api.dbViewShare.delete(selectedView.value.id)
+  if (activeView.value?.uuid) {
+    await $api.dbViewShare.delete(activeView.value.id)
 
-    selectedView.value = { ...selectedView.value, uuid: undefined, password: undefined }
+    activeView.value = { ...activeView.value, uuid: undefined, password: undefined }
   } else {
-    const response = await $api.dbViewShare.create(selectedView.value.id)
-    selectedView.value = { ...selectedView.value, ...(response as any) }
+    const response = await $api.dbViewShare.create(activeView.value.id)
+    activeView.value = { ...activeView.value, ...(response as any) }
 
-    if (selectedView.value!.type === ViewTypes.KANBAN) {
+    if (activeView.value!.type === ViewTypes.KANBAN) {
       // extract grouping column meta
-      const groupingFieldColumn = metas.value[selectedView.value!.fk_model_id].columns!.find(
-        (col: ColumnType) => col.id === ((selectedView.value.view! as KanbanType).fk_grp_col_id! as string),
+      const groupingFieldColumn = metas.value[viewStore.activeView!.fk_model_id].columns!.find(
+        (col: ColumnType) => col.id === ((viewStore.activeView!.view! as KanbanType).fk_grp_col_id! as string),
       )
 
-      selectedView.value!.meta = { ...selectedView.value!.meta, groupingFieldColumn }
+      activeView.value!.meta = { ...activeView.value!.meta, groupingFieldColumn }
 
       await updateSharedView()
     }
@@ -313,12 +279,12 @@ async function saveTheme() {
 
 async function updateSharedView() {
   try {
-    if (!selectedView.value?.meta) return
-    const meta = selectedView.value.meta
+    if (!activeView.value?.meta) return
+    const meta = activeView.value.meta
 
-    await $api.dbViewShare.update(selectedView.value.id!, {
+    await $api.dbViewShare.update(activeView.value.id!, {
       meta,
-      password: selectedView.value.password,
+      password: activeView.value.password,
     })
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
@@ -331,55 +297,31 @@ async function savePreFilledMode() {
   await updateSharedView()
 }
 
-const openManageAccess = async () => {
-  try {
-    await navigateToProjectPage({ page: 'collaborator' })
-    showShareModal.value = false
-  } catch (e) {
-    console.error(e)
-    message.error('Failed to open manage access')
-  }
-}
+watchEffect(() => {})
 </script>
 
 <template>
-  <div class="flex flex-col !h-80 justify-between">
-    <div class="flex flex-col p-3 border-gray-200 border-1 rounded-lg gap-y-2">
-      <div class="flex flex-row items-center justify-between">
-        <div class="flex items-center gap-3">
-          <span class="text-gray-900 font-medium">{{ $t('activity.enabledPublicViewing') }}</span>
-
-          <NcSelect v-model:value="selectedViewId" class="w-48" size="medium">
-            <a-select-option v-for="view in viewsInTable" :key="view.id" :value="view.id">
-              <div class="flex items-center w-full justify-between w-full gap-2">
-                <GeneralViewIcon :meta="view" class="!text-md mt-0.5" />
-                <span class="truncate !w-36 flex-1 capitalize">{{ view.title }}</span>
-                <component
-                  :is="iconMap.check"
-                  v-if="view.id === selectedViewId"
-                  id="nc-selected-item-icon"
-                  class="text-primary w-4 h-4"
-                />
-              </div>
-            </a-select-option>
-          </NcSelect>
-        </div>
+  <div class="flex flex-col py-2 px-3 mb-1">
+    <div class="flex flex-col w-full mt-2.5 px-3 py-2.5 border-gray-200 border-1 rounded-md gap-y-2">
+      <div class="flex flex-row w-full justify-between py-0.5">
+        <div class="text-gray-900 font-medium">{{ $t('activity.enabledPublicViewing') }}</div>
         <a-switch
           v-e="['c:share:view:enable:toggle']"
-          size="small"
           :checked="isPublicShared"
           :disabled="isLocked"
           :loading="isUpdating.public"
           class="share-view-toggle !mt-0.25"
           data-testid="share-view-toggle"
-          @change="toggleShare"
+          @click="toggleShare"
         />
       </div>
-
-      <div v-if="isPublicShared" class="space-y-3">
-        <GeneralCopyUrl v-model:url="url" class="w-[34.625rem]" />
-        <div class="flex items-center gap-3 h-8 justify-between">
-          <div class="flex flex-row gap-3 items-center">
+      <template v-if="isPublicShared">
+        <div class="mt-0.5 border-t-1 border-gray-100 pt-3">
+          <GeneralCopyUrl v-model:url="url" />
+        </div>
+        <div class="flex flex-col justify-between mt-1 py-2 px-3 bg-gray-50 rounded-md">
+          <div class="flex flex-row items-center justify-between">
+            <div class="flex text-black">{{ $t('activity.restrictAccessWithPassword') }}</div>
             <a-switch
               v-e="['c:share:view:password:toggle']"
               :checked="passwordProtected"
@@ -387,42 +329,52 @@ const openManageAccess = async () => {
               class="share-password-toggle !mt-0.25"
               data-testid="share-password-toggle"
               size="small"
-              @change="togglePasswordProtected"
+              @click="togglePasswordProtected"
             />
-            <div class="flex text-black">{{ $t('activity.restrictAccessWithPassword') }}</div>
           </div>
-          <a-input-password
-            v-if="passwordProtected"
-            v-model:value="password"
-            :placeholder="$t('placeholder.password.enter')"
-            class="!rounded-lg flex-1 !focus:border-brand-500 !w-72 !focus:ring-0 !focus:shadow-none !border-gray-200 !py-1 !bg-white"
-            data-testid="nc-modal-share-view__password"
-            size="small"
-            type="password"
-          />
-        </div>
-
-        <div
-          v-if="
-            selectedView &&
-            [ViewTypes.GRID, ViewTypes.KANBAN, ViewTypes.GALLERY, ViewTypes.MAP, ViewTypes.CALENDAR].includes(selectedView.type)
-          "
-          class="flex flex-row items-center gap-3"
-        >
-          <a-switch
-            v-model:checked="allowCSVDownload"
-            v-e="['c:share:view:allow-csv-download:toggle']"
-            :loading="isUpdating.download"
-            class="public-password-toggle !mt-0.25"
-            data-testid="share-download-toggle"
-            size="small"
-          />
-          <div class="flex text-black">{{ $t('activity.allowDownload') }}</div>
+          <Transition mode="out-in" name="layout">
+            <div v-if="passwordProtected" class="flex gap-2 mt-2 w-2/3">
+              <a-input-password
+                v-model:value="password"
+                :placeholder="$t('placeholder.password.enter')"
+                class="!rounded-lg !py-1 !bg-white"
+                data-testid="nc-modal-share-view__password"
+                size="small"
+                type="password"
+              />
+            </div>
+          </Transition>
         </div>
+        <div class="flex flex-col justify-between gap-y-3 mt-1 py-2 px-3 bg-gray-50 rounded-md">
+          <div
+            v-if="
+              activeView &&
+              [ViewTypes.GRID, ViewTypes.KANBAN, ViewTypes.GALLERY, ViewTypes.MAP, ViewTypes.CALENDAR].includes(activeView.type)
+            "
+            class="flex flex-row items-center justify-between"
+          >
+            <div class="flex text-black">{{ $t('activity.allowDownload') }}</div>
+            <a-switch
+              v-model:checked="allowCSVDownload"
+              v-e="['c:share:view:allow-csv-download:toggle']"
+              :loading="isUpdating.download"
+              class="public-password-toggle !mt-0.25"
+              data-testid="share-download-toggle"
+              size="small"
+            />
+          </div>
 
-        <template v-if="selectedView?.type === ViewTypes.FORM">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-3">
+          <template v-if="activeView?.type === ViewTypes.FORM">
+            <div class="flex flex-row items-center justify-between">
+              <div class="text-black flex items-center space-x-1">
+                <div>
+                  {{ $t('activity.surveyMode') }}
+                </div>
+                <NcTooltip>
+                  <template #title> {{ $t('tooltip.surveyFormInfo') }}</template>
+                  <GeneralIcon icon="info" class="text-gray-600 cursor-pointer"></GeneralIcon>
+                </NcTooltip>
+              </div>
               <a-switch
                 v-model:checked="surveyMode"
                 v-e="['c:share:view:surver-mode:toggle']"
@@ -430,77 +382,61 @@ const openManageAccess = async () => {
                 size="small"
               >
               </a-switch>
-              {{ $t('activity.surveyMode') }}
             </div>
-            <NcTooltip>
-              <template #title>{{ $t('tooltip.surveyFormInfo') }} </template>
-              <component :is="iconMap.info" class="text-gray-500" />
-            </NcTooltip>
-          </div>
-
-          <div v-if="!isEeUI" class="flex flex-row items-center gap-3">
-            <a-switch
-              v-model:checked="withRTL"
-              v-e="['c:share:view:rtl-orientation:toggle']"
-              data-testid="nc-modal-share-view__RTL"
-              size="small"
-            >
-            </a-switch>
-            <div class="text-black">{{ $t('activity.rtlOrientation') }}</div>
-          </div>
-          <div class="flex items-center h-8 justify-between">
-            <div class="flex items-center gap-3">
+            <div v-if="!isEeUI" class="flex flex-row items-center justify-between">
+              <div class="text-black">{{ $t('activity.rtlOrientation') }}</div>
               <a-switch
-                v-e="['c:share:view:surver-mode:toggle']"
-                :checked="formPreFill.preFillEnabled"
-                data-testid="nc-modal-share-view__preFill"
+                v-model:checked="withRTL"
+                v-e="['c:share:view:rtl-orientation:toggle']"
+                data-testid="nc-modal-share-view__RTL"
                 size="small"
-                @update:checked="handleChangeFormPreFill({ preFillEnabled: $event as boolean })"
               >
               </a-switch>
-              {{ $t('activity.preFilledFields.title') }}
+            </div>
+          </template>
+        </div>
+        <div
+          v-if="activeView?.type === ViewTypes.FORM"
+          class="nc-pre-filled-mode-wrapper flex flex-col justify-between gap-y-3 mt-1 py-2 px-3 bg-gray-50 rounded-md"
+        >
+          <div class="flex flex-row items-center justify-between">
+            <div class="text-black flex items-center space-x-1">
+              <div>
+                {{ $t('activity.preFilledFields.title') }}
+              </div>
 
-              <NcSelect
-                v-if="formPreFill.preFillEnabled"
-                v-model:value="formPreFill.preFilledMode"
-                class="w-48"
-                @change="handleChangeFormPreFill"
-              >
-                <a-select-option
-                  v-for="op of Object.values(PreFilledMode).map((v) => {
-                    return { label: $t(`activity.preFilledFields.${v}`), value: v }
-                  })"
-                  :key="op.value"
-                  :value="op.value"
-                >
-                  <div class="flex items-center w-full justify-between w-full gap-2">
-                    <div class="truncate flex-1 capitalize">{{ op.label }}</div>
-                    <component
-                      :is="iconMap.check"
-                      v-if="formPreFill.preFilledMode === op.value"
-                      id="nc-selected-item-icon"
-                      class="text-primary w-4 h-4"
-                    />
+              <NcTooltip>
+                <template #title>
+                  <div class="text-center">
+                    {{ $t('tooltip.preFillFormInfo') }}
                   </div>
-                </a-select-option>
-              </NcSelect>
+                </template>
+                <GeneralIcon icon="info" class="text-gray-600 cursor-pointer"></GeneralIcon>
+              </NcTooltip>
             </div>
-            <NcTooltip>
-              <template #title>{{ $t('tooltip.preFillFormInfo') }} </template>
-              <component :is="iconMap.info" class="text-gray-500" />
-            </NcTooltip>
+            <a-switch
+              v-e="['c:share:view:surver-mode:toggle']"
+              :checked="formPreFill.preFillEnabled"
+              data-testid="nc-modal-share-view__preFill"
+              size="small"
+              @update:checked="handleChangeFormPreFill({ preFillEnabled: $event as boolean })"
+            >
+            </a-switch>
           </div>
-        </template>
-      </div>
-    </div>
 
-    <div class="flex gap-2 items-end justify-end">
-      <NcButton type="secondary" @click="openManageAccess">
-        {{ $t('activity.manageAccess') }}
-      </NcButton>
-      <NcButton type="secondary" @click="showShareModal = false">
-        {{ $t('general.finish') }}
-      </NcButton>
+          <a-radio-group
+            v-if="formPreFill.preFillEnabled"
+            :value="formPreFill.preFilledMode"
+            class="nc-modal-share-view-preFillMode"
+            data-testid="nc-modal-share-view__preFillMode"
+            @update:value="handleChangeFormPreFill({ preFilledMode: $event })"
+          >
+            <a-radio v-for="mode of Object.values(PreFilledMode)" :key="mode" :value="mode">
+              <div class="flex-1">{{ $t(`activity.preFilledFields.${mode}`) }}</div>
+            </a-radio>
+          </a-radio-group>
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -523,4 +459,18 @@ const openManageAccess = async () => {
     line-height: 1rem !important;
   }
 }
+
+.nc-modal-share-view-preFillMode {
+  @apply flex flex-col;
+
+  .ant-radio-wrapper {
+    @apply !m-0 !flex !items-center w-full px-2 py-1 rounded-lg hover:bg-gray-100;
+    .ant-radio {
+      @apply !top-0;
+    }
+    .ant-radio + span {
+      @apply !flex !pl-4;
+    }
+  }
+}
 </style>
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 e3ee76d5db..dd2742470a 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
@@ -1,12 +1,19 @@
 <script lang="ts" setup>
 import type { ViewType } from 'nocodb-sdk'
+import { LoadingOutlined } from '@ant-design/icons-vue'
+import ManageUsers from './ManageUsers.vue'
+import { useViewsStore } from '~/store/views'
 
 const { isViewToolbar } = defineProps<{
   isViewToolbar?: boolean
 }>()
 
+const { copy } = useCopy()
+const { dashboardUrl } = useDashboard()
 const baseStore = useBase()
 const { base } = storeToRefs(baseStore)
+const { navigateToProjectPage } = baseStore
+const { activeView } = storeToRefs(useViewsStore())
 
 let view: Ref<ViewType | undefined>
 if (isViewToolbar) {
@@ -18,126 +25,175 @@ if (isViewToolbar) {
   }
 }
 
-const activeTab = ref<'base' | 'view'>('base')
-
-const { formStatus, showShareModal } = storeToRefs(useShare())
+const { formStatus, showShareModal, invitationUsersData, isInvitationLinkCopied } = storeToRefs(useShare())
 const { resetData } = useShare()
+// const { inviteUser } = useManageUsers()
 
-const highlightStyle = ref({ top: isViewToolbar ? '160px' : '4px' })
+// const expandedSharedType = ref<'none' | 'base' | 'view'>('view')
+const isOpeningManageAccess = ref(false)
 
-watch(showShareModal, (val) => {
-  if (!val) {
-    setTimeout(() => {
-      resetData()
-    }, 500)
-  }
-})
+const inviteUrl = computed(() =>
+  invitationUsersData.value.invitationToken ? `${dashboardUrl.value}#/signup/${invitationUsersData.value.invitationToken}` : null,
+)
 
-watch(showShareModal, () => {
-  if (isViewToolbar && view.value) {
-    activeTab.value = 'view'
-  }
+const indicator = h(LoadingOutlined, {
+  style: {
+    fontSize: '24px',
+  },
+  spin: true,
 })
 
-const updateHighlightPosition = () => {
-  nextTick(() => {
-    const activeTab = document.querySelector('.nc-share-active') as HTMLElement
-    if (activeTab) {
-      highlightStyle.value.top = `${activeTab.offsetTop}px`
-    }
+/*
+const onShare = async () => {
+  if (!invitationValid) return
+
+  await inviteUser({
+    email: invitationUsersData.value.emails!,
+    roles: invitationUsersData.value.role!,
   })
 }
+*/
+
+const copyInvitationLink = async () => {
+  await copy(inviteUrl.value!)
 
-watch(activeTab, () => {
-  updateHighlightPosition()
+  isInvitationLinkCopied.value = true
+}
+
+const openManageAccess = async () => {
+  isOpeningManageAccess.value = true
+  try {
+    await navigateToProjectPage({ page: 'collaborator' })
+    showShareModal.value = false
+  } catch (e) {
+    console.error(e)
+    message.error('Failed to open manage access')
+  } finally {
+    isOpeningManageAccess.value = false
+  }
+}
+
+watch(showShareModal, (val) => {
+  if (!val) {
+    setTimeout(() => {
+      resetData()
+    }, 500)
+  }
 })
 </script>
 
 <template>
-  <NcModal
+  <a-modal
     v-model:visible="showShareModal"
-    :centered="false"
+    class="!top-[1%]"
     :class="{ active: showShareModal }"
     wrap-class-name="nc-modal-share-collaborate"
-    :mask-closable="formStatus !== 'base-collaborateSaving'"
-    :width="formStatus === 'manageCollaborators' ? '60rem' : '48rem'"
+    :closable="false"
+    :mask-closable="formStatus === 'base-collaborateSaving' ? false : true"
+    :ok-button-props="{ hidden: true } as any"
+    :cancel-button-props="{ hidden: true } as any"
+    :footer="null"
+    :width="formStatus === 'manageCollaborators' ? '60rem' : '40rem'"
   >
-    <div class="flex flex-col gap-6">
-      <div class="flex text-xl font-bold">{{ $t('activity.share') }}</div>
-      <div class="flex flex-1 gap-3">
-        <div
-          v-if="isViewToolbar"
-          class="flex relative flex-col flex-grow-1 cursor-pointer p-1 w-32 rounded-[10px] h-80 bg-gray-200"
-        >
-          <div :style="highlightStyle" class="highlight"></div>
-
+    <div v-if="formStatus === 'base-collaborateSaving'" class="flex flex-row w-full px-5 justify-between items-center py-1">
+      <div class="flex text-base font-bold">Adding Members</div>
+      <a-spin :indicator="indicator" />
+    </div>
+    <template v-else-if="formStatus === 'base-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 font-medium">Members added</div>
+          <div class="flex">
+            <MdiCheck />
+          </div>
+        </div>
+        <div class="flex flex-row mx-3 mt-2.5 pt-3.5 border-t-1 border-gray-100 justify-end gap-x-2">
+          <a-button type="text" class="!border-1 !border-gray-200 !rounded-md" @click="showShareModal = false">Close </a-button>
+          <a-button
+            type="text"
+            class="!border-1 !border-gray-200 !rounded-md"
+            data-testid="docs-share-invitation-copy"
+            :data-invite-link="inviteUrl"
+            @click="copyInvitationLink"
+          >
+            <div v-if="isInvitationLinkCopied" class="flex flex-row items-center gap-x-1">
+              <MdiTick class="h-3.5" />
+              {{ $t('activity.copiedInviteLink') }}
+            </div>
+            <div v-else class="flex flex-row items-center gap-x-1">
+              <MdiContentCopy class="h-3.3" />
+              {{ $t('activity.copyInviteLink') }}
+            </div>
+          </a-button>
+        </div>
+      </div>
+    </template>
+    <div v-else-if="formStatus === 'manageCollaborators'">
+      <ManageUsers v-if="formStatus === 'manageCollaborators'" @close="formStatus = 'collaborate'" />
+    </div>
+    <div v-else class="flex flex-col px-1">
+      <div class="flex flex-row justify-between items-center pb-1 mx-4 mt-3">
+        <div class="flex text-base font-medium">{{ $t('activity.share') }}</div>
+      </div>
+      <div v-if="isViewToolbar && activeView" class="share-view">
+        <div class="flex flex-row items-center gap-x-2 px-4 pt-3 pb-3 select-none">
+          <component
+            :is="viewIcons[view?.type]?.icon"
+            class="nc-view-icon group-hover"
+            :style="{ color: viewIcons[view?.type]?.color }"
+          />
+          <div>{{ $t('activity.shareView') }}</div>
           <div
-            data-testid="nc-share-base-tab"
-            :class="{ 'nc-share-active': activeTab === 'base' }"
-            class="flex flex-col z-1 text-gray-600 items-center rounded-lg w-full justify-center h-1/2"
-            @click="activeTab = 'base'"
+            class="max-w-79/100 ml-2 px-2 py-0.5 rounded-md bg-gray-100 capitalize text-ellipsis overflow-hidden"
+            :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap' }"
           >
-            <GeneralProjectIcon
-              :color="parseProp(base.meta).iconColor"
-              :type="base.type"
-              :class="{
-                '!grayscale ': activeTab !== 'base',
-              }"
-              :style="{
-                filter: activeTab !== 'base' ? 'grayscale(100%) brightness(115%)' : '',
-              }"
-              class="nc-view-icon transition-all w-6 h-6 group-hover"
-            />
-            <span
-              :class="{
-                'font-semibold': activeTab === 'base',
-              }"
-            >
-              Base
-            </span>
+            {{ activeView.title }}
           </div>
+        </div>
+        <DlgShareAndCollaborateSharePage />
+      </div>
+      <div class="share-base">
+        <div class="flex flex-row items-center gap-x-2 px-4 pt-3 pb-3 select-none">
+          <GeneralProjectIcon :color="parseProp(base.meta).iconColor" :type="base.type" class="nc-view-icon group-hover" />
+
+          <div>{{ $t('activity.shareBase.label') }}</div>
           <div
-            :class="{ 'nc-share-active': activeTab === 'view' }"
-            data-testid="nc-share-view-tab"
-            class="flex flex-col items-center text-gray-600 z-1 w-full cursor-pointer rounded-lg justify-center h-1/2"
-            @click="activeTab = 'view'"
+            class="max-w-79/100 ml-2 px-2 py-0.5 rounded-md bg-gray-100 capitalize text-ellipsis overflow-hidden"
+            :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap' }"
           >
-            <component
-              :is="viewIcons[view?.type]?.icon"
-              :class="{
-                'text-gray-500': activeTab !== 'view',
-              }"
-              :style="{ color: activeTab === 'view' ? viewIcons[view?.type]?.color : '' }"
-              class="nc-view-icon transition-all !text-2xl group-hover"
-            />
-            <span
-              :class="{
-                'font-semibold': activeTab === 'view',
-              }"
-            >
-              View
-            </span>
+            {{ base.title }}
           </div>
         </div>
-        <div class="flex flex-1 h-full flex-col">
-          <LazyDlgShareAndCollaborateShareBase v-if="activeTab === 'base'" :is-view="isViewToolbar" />
-          <LazyDlgShareAndCollaborateSharePage v-else-if="activeTab === 'view'" />
-        </div>
+        <LazyDlgShareAndCollaborateShareBase />
+      </div>
+      <div class="flex flex-row justify-end mx-3 mt-1 mb-2 pt-4 gap-x-2">
+        <NcButton type="secondary" data-testid="docs-cancel-btn" @click="showShareModal = false">
+          {{ $t('general.close') }}
+        </NcButton>
+        <NcButton
+          data-testid="docs-share-manage-access"
+          type="secondary"
+          :loading="isOpeningManageAccess"
+          @click="openManageAccess"
+          >{{ $t('activity.manageProjectAccess') }}</NcButton
+        >
+
+        <!-- <a-button
+          v-if="formStatus === 'base-collaborate'"
+          data-testid="docs-share-btn"
+          class="!border-0 !rounded-md"
+          type="primary"
+          :disabled="!invitationValid"
+          @click="onShare"
+        >
+          Share
+        </a-button> -->
       </div>
     </div>
-  </NcModal>
+  </a-modal>
 </template>
 
 <style lang="scss" scoped>
-.nc-share-active {
-  @apply bg-transparent !text-gray-900;
-}
-
-.highlight {
-  @apply absolute h-[calc(50%-4px)] w-[calc(8rem-8px)] shadow bg-white rounded-lg transition-all duration-300;
-  z-index: 0;
-}
-
 .share-collapse-item {
   @apply !rounded-lg !mb-2 !mt-4 !border-0;
 }
@@ -145,12 +201,10 @@ watch(activeTab, () => {
 .ant-collapse {
   @apply !bg-white !border-0;
 }
+</style>
 
+<style lang="scss">
 .nc-modal-share-collaborate {
-  .ant-modal-content {
-    @apply !rounded-2xl;
-  }
-
   .ant-modal {
     top: 10vh !important;
   }
@@ -172,6 +226,10 @@ watch(activeTab, () => {
     @apply !p-0;
   }
 
+  .ant-modal-content {
+    @apply !rounded-lg !px-1 !py-2;
+  }
+
   .ant-select-selector {
     @apply !rounded-md !border-gray-200 !border-1;
   }
diff --git a/packages/nc-gui/components/general/CopyUrl.vue b/packages/nc-gui/components/general/CopyUrl.vue
index 5f8fd7ec44..c51f6a037e 100644
--- a/packages/nc-gui/components/general/CopyUrl.vue
+++ b/packages/nc-gui/components/general/CopyUrl.vue
@@ -37,9 +37,9 @@ const copyUrl = async () => {
     class="flex flex-row items-center justify-end text-gray-600 gap-x-1.5 py-1.5 px-1.5 bg-gray-50 rounded-md border-1 border-gray-200"
   >
     <div class="flex flex-row block flex-1 overflow-hidden pl-3 cursor-pointer" @click="copyUrl">
-      <div class="overflow-hidden whitespace-nowrap truncate text-gray-500">{{ url }}</div>
+      <div class="overflow-hidden whitespace-nowrap text-gray-500">{{ url }}</div>
     </div>
-    <div class="flex !text-gray-700 flex-row gap-x-1">
+    <div class="flex flex-row gap-x-1">
       <NcTooltip>
         <template #title>
           {{ $t('activity.openInANewTab') }}
diff --git a/packages/nc-gui/components/general/ShareProject.vue b/packages/nc-gui/components/general/ShareProject.vue
index f4a75b96c8..17c75aa057 100644
--- a/packages/nc-gui/components/general/ShareProject.vue
+++ b/packages/nc-gui/components/general/ShareProject.vue
@@ -64,7 +64,8 @@ const copySharedBase = async () => {
       @click="showShareModal = true"
     >
       <div v-if="!isMobileMode" class="flex flex-row items-center w-full gap-x-1">
-        <component :is="iconMap.mobileShare" class="h-3.5" />
+        <MaterialSymbolsPublic v-if="visibility === 'public'" class="h-3.5" />
+        <MaterialSymbolsLockOutline v-else-if="visibility === 'private'" class="h-3.5" />
         <div class="flex">{{ $t('activity.share') }}</div>
       </div>
       <GeneralIcon v-else icon="mobileShare" />
diff --git a/packages/nc-gui/components/nc/Modal.vue b/packages/nc-gui/components/nc/Modal.vue
index f1c5d8ff82..f85dc9824f 100644
--- a/packages/nc-gui/components/nc/Modal.vue
+++ b/packages/nc-gui/components/nc/Modal.vue
@@ -8,7 +8,6 @@ const props = withDefaults(
     maskClosable?: boolean
     showSeparator?: boolean
     wrapClassName?: string
-    centered?: boolean
   }>(),
   {
     size: 'medium',
@@ -16,7 +15,6 @@ const props = withDefaults(
     maskClosable: true,
     showSeparator: true,
     wrapClassName: '',
-    centered: true,
   },
 )
 
@@ -88,7 +86,7 @@ const slots = useSlots()
     v-model:visible="visible"
     :class="{ active: visible }"
     :width="width"
-    :centered="centered"
+    :centered="true"
     :closable="false"
     :wrap-class-name="newWrapClassName"
     :footer="null"
diff --git a/packages/nc-gui/components/nc/Switch.vue b/packages/nc-gui/components/nc/Switch.vue
index b83784d4d2..f5d9af077e 100644
--- a/packages/nc-gui/components/nc/Switch.vue
+++ b/packages/nc-gui/components/nc/Switch.vue
@@ -1,14 +1,11 @@
 <script lang="ts" setup>
-const props = withDefaults(
-  defineProps<{ checked: boolean; disabled?: boolean; size?: 'default' | 'small'; loading?: boolean }>(),
-  {
-    size: 'small',
-  },
-)
+const props = withDefaults(defineProps<{ checked: boolean; disabled?: boolean; size?: 'default' | 'small' }>(), {
+  size: 'small',
+})
+
 const emit = defineEmits(['change', 'update:checked'])
-const checked = useVModel(props, 'checked', emit)
 
-const loading = computed(() => props.loading)
+const checked = useVModel(props, 'checked', emit)
 
 const onChange = (e: boolean) => {
   emit('change', e)
@@ -16,15 +13,7 @@ const onChange = (e: boolean) => {
 </script>
 
 <template>
-  <a-switch
-    v-model:checked="checked"
-    :disabled="disabled"
-    :loading="loading"
-    :size="size"
-    class="nc-switch"
-    v-bind="$attrs"
-    @change="onChange"
-  >
+  <a-switch v-model:checked="checked" :disabled="disabled" class="nc-switch" v-bind="$attrs" :size="size" @change="onChange">
   </a-switch>
   <span v-if="$slots.default" class="cursor-pointer pl-2" @click="checked = !checked">
     <slot />
diff --git a/packages/nc-gui/components/nc/Tabs.vue b/packages/nc-gui/components/nc/Tabs.vue
index 5c0e420c65..08647e7dc9 100644
--- a/packages/nc-gui/components/nc/Tabs.vue
+++ b/packages/nc-gui/components/nc/Tabs.vue
@@ -43,7 +43,7 @@ const props = defineProps<{
   }
 
   .ant-tabs-nav {
-    @apply mb-0;
+    @apply pl-2.5 mb-0;
   }
 
   .ant-tabs-ink-bar {
diff --git a/packages/nc-gui/components/project/ShareBaseDlg.vue b/packages/nc-gui/components/project/ShareBaseDlg.vue
index e0f56f623e..7ab942402a 100644
--- a/packages/nc-gui/components/project/ShareBaseDlg.vue
+++ b/packages/nc-gui/components/project/ShareBaseDlg.vue
@@ -2,7 +2,6 @@
 import type { RoleLabels } from 'nocodb-sdk'
 import { OrderedProjectRoles, ProjectRoles } from 'nocodb-sdk'
 import type { User } from '#imports'
-
 const props = defineProps<{
   modelValue: boolean
   baseId?: string
@@ -270,7 +269,7 @@ const onRoleChange = (role: keyof typeof RoleLabels) => (inviteData.roles = role
           </div>
           <RolesSelector
             size="lg"
-            class="!min-w-[152px] nc-invite-role-selector"
+            class="nc-invite-role-selector"
             :role="inviteData.roles"
             :roles="allowedRoles"
             :on-role-change="onRoleChange"
@@ -298,9 +297,3 @@ const onRoleChange = (role: keyof typeof RoleLabels) => (inviteData.roles = role
     </div>
   </NcModal>
 </template>
-
-<style lang="scss" scoped>
-:deep(.nc-invite-role-selector .nc-role-badge) {
-  @apply w-full;
-}
-</style>
diff --git a/packages/nc-gui/components/roles/Badge.vue b/packages/nc-gui/components/roles/Badge.vue
index 35da2f77f3..8da82c3c19 100644
--- a/packages/nc-gui/components/roles/Badge.vue
+++ b/packages/nc-gui/components/roles/Badge.vue
@@ -13,7 +13,7 @@ const props = withDefaults(
   {
     clickable: false,
     inherit: false,
-    border: false,
+    border: true,
     size: 'sm',
   },
 )
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index bc01590197..48b2fbe87a 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -268,6 +268,10 @@ const onRoleChange = (role: keyof typeof RoleLabels) => (inviteData.roles = role
   @apply rounded;
 }
 
+.badge-text {
+  @apply text-[14px] pt-1 text-center;
+}
+
 :deep(.ant-select-selection-item) {
   @apply mt-0.75;
 }
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index ce4c83be21..00857cae81 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -433,7 +433,6 @@
     "surveyFormSubmitConfirmMsg": "Are you sure you want to submit this form?"
   },
   "labels": {
-    "enterMultipleEmails": "Enter multiple E-mails by using commas to separate them",
     "selectYear": "Select Year",
     "save": "Save",
     "cancel": "Cancel",
@@ -704,9 +703,6 @@
     "clearSelection": "Clear selection"
   },
   "activity": {
-    "inviteAs": "Invite as",
-    "toBase": "to base",
-    "manageAccess": "Manage Access",
     "addMembers": "Add Members",
     "enterEmail": "Enter email addresses",
     "inviteToBase": "Invite to Base",
@@ -741,7 +737,7 @@
     "outOfSync": "Out of sync",
     "newSource": "New Data Source",
     "newWebhook": "New Webhook",
-    "enablePublicAccess": "Enable Public Viewing",
+    "enablePublicAccess": "Enable Public Access",
     "doYouWantToSaveTheChanges": "Do you want to save the changes ?",
     "editingAccess": "Editing access",
     "enabledPublicViewing": "Enable Public Viewing",
@@ -805,8 +801,6 @@
     "invite": "Invite",
     "inviteMore": "Invite more",
     "inviteTeam": "Invite Team",
-    "inviteMembers": "Invite Member(s)",
-    "inviteUsers": "Invite User(s)",
     "inviteUser": "Invite User",
     "inviteToken": "Invite Token",
     "linkedRecords": "Linked Records",
diff --git a/tests/playwright/pages/Dashboard/common/Topbar/Share.ts b/tests/playwright/pages/Dashboard/common/Topbar/Share.ts
index 1bc668e9c6..bfcfdbfe53 100644
--- a/tests/playwright/pages/Dashboard/common/Topbar/Share.ts
+++ b/tests/playwright/pages/Dashboard/common/Topbar/Share.ts
@@ -11,21 +11,22 @@ export class TopbarSharePage extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator(`.nc-modal-share-collaborate`);
+    return this.rootPage.locator(`.nc-modal-share-collaborate`).locator('.ant-modal-content');
   }
 
-  async clickShareProject() {
-    await this.get().locator(`[data-testid="docs-share-dlg-share-base"]`).click();
+  async clickShareView() {
+    await this.get().waitFor();
+    // collapse header 0: Share Base, 1: Share View
+    await this.get().locator(`.ant-collapse-header`).nth(1).click();
   }
 
-  async switchBaseShareTab({ tab }: { tab: 'public' | 'member' }) {
-    await this.get().getByTestId(`nc-base-share-${tab}`).waitFor({ state: 'visible' });
-    await this.get().getByTestId(`nc-base-share-${tab}`).click();
+  async clickShareProject() {
+    await this.get().locator(`[data-testid="docs-share-dlg-share-base"]`).click();
   }
 
   async clickShareViewPublicAccess() {
-    await expect(this.get().getByTestId('share-view-toggle')).toHaveCount(1);
-    await this.get().getByTestId('share-view-toggle').click();
+    await expect(this.get().locator(`[data-testid="share-view-toggle"]`)).toHaveCount(1);
+    await this.get().locator(`[data-testid="share-view-toggle"]`).click();
   }
 
   async clickCopyLink() {
@@ -34,7 +35,7 @@ export class TopbarSharePage extends BasePage {
 
   async closeModal() {
     // await this.rootPage.keyboard.press('Escape');
-    await this.get().locator('.ant-btn.ant-btn-secondary:has-text("Finish")').click();
+    await this.get().locator('.ant-btn.ant-btn-secondary:has-text("Close")').click();
   }
 
   async clickShareViewWithPassword({ password }: { password: string }) {
@@ -47,22 +48,7 @@ export class TopbarSharePage extends BasePage {
   }
 
   async clickShareBase() {
-    await this.get().waitFor();
-    const shareBase = this.get().getByTestId('nc-share-base-tab');
-
-    if (await shareBase.isVisible()) {
-      await shareBase.click();
-    }
-  }
-
-  async clickShareView() {
-    await this.get().waitFor();
-
-    const shareView = this.get().getByTestId('nc-share-view-tab');
-
-    if (await shareView.isVisible()) {
-      await shareView.click();
-    }
+    await this.get().locator(`[data-testid="db-share-base"]`).click();
   }
 
   async clickShareBasePublicAccess() {
@@ -86,8 +72,6 @@ export class TopbarSharePage extends BasePage {
   async clickShareBaseEditorAccess() {
     await this.rootPage.waitForTimeout(1000);
 
-    await this.switchBaseShareTab({ tab: 'public' });
-
     const shareBaseSwitch = this.get().locator(`[data-testid="nc-share-base-sub-modal"]`).locator('.ant-switch');
     const count = await shareBaseSwitch.count();
 
diff --git a/tests/playwright/pages/Dashboard/common/Topbar/index.ts b/tests/playwright/pages/Dashboard/common/Topbar/index.ts
index 1b2981d8ed..d02fd3bddb 100644
--- a/tests/playwright/pages/Dashboard/common/Topbar/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Topbar/index.ts
@@ -36,7 +36,7 @@ export class TopbarPage extends BasePage {
 
   async getSharedViewUrl(surveyMode = false, password = '', download = false) {
     await this.clickShare();
-    await this.share.clickShareView();
+    // await this.share.clickShareView();
     await this.share.clickShareViewPublicAccess();
     await this.share.clickCopyLink();
     if (surveyMode) {
@@ -57,9 +57,6 @@ export class TopbarPage extends BasePage {
 
   async getSharedBaseUrl({ role, enableSharedBase }: { role: string; enableSharedBase: boolean }) {
     await this.clickShare();
-    await this.share.clickShareBase();
-    await this.share.switchBaseShareTab({ tab: 'public' });
-
     if (enableSharedBase) await this.share.clickShareBasePublicAccess();
 
     if (role === 'editor' && enableSharedBase) {
diff --git a/tests/playwright/tests/db/features/baseShare.spec.ts b/tests/playwright/tests/db/features/baseShare.spec.ts
index 8879106d08..a7426caa17 100644
--- a/tests/playwright/tests/db/features/baseShare.spec.ts
+++ b/tests/playwright/tests/db/features/baseShare.spec.ts
@@ -3,7 +3,7 @@ import { DashboardPage } from '../../../pages/Dashboard';
 import setup, { NcContext, unsetup } from '../../../setup';
 import { ToolbarPage } from '../../../pages/Dashboard/common/Toolbar';
 import { LoginPage } from '../../../pages/LoginPage';
-import { getDefaultPwd } from '../../utils/general';
+import { getDefaultPwd } from '../../../tests/utils/general';
 import { isEE } from '../../../setup/db';
 
 // To be enabled after shared base is implemented
@@ -62,6 +62,9 @@ test.describe('Shared base', () => {
   });
 
   test('#1', async () => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: 'Team & Auth' });
+
     let url = '';
     // share button visible only if a table is opened
     await dashboard.treeView.openTable({ title: 'Country' });