From 161b080ca95ec8ee519f78157bf6434f2f321dfc Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 27 Jul 2022 18:31:56 +0530
Subject: [PATCH 01/26] refactor/gui-v2-user-management-added

---
 packages/nc-gui-v2/components.d.ts            |   1 +
 .../dashboard/settings/SettingsModal.vue      |   3 +-
 .../dashboard/settings/UserManagement.vue     | 247 ++++++++++++++++++
 .../settings/userManagement/ShareBase.vue     | 209 +++++++++++++++
 .../settings/userManagement/UsersModal.vue    | 215 +++++++++++++++
 packages/nc-gui-v2/lib/enums.ts               |   7 +
 packages/nc-gui-v2/package-lock.json          |  38 +++
 packages/nc-gui-v2/package.json               |   2 +
 packages/nc-gui-v2/utils/miscUtils.ts         |  56 ++++
 packages/nc-gui-v2/utils/urlUtils.ts          |   4 +
 packages/nc-gui-v2/utils/userUtils.ts         |   8 +
 11 files changed, 789 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
 create mode 100644 packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
 create mode 100644 packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
 create mode 100644 packages/nc-gui-v2/utils/miscUtils.ts
 create mode 100644 packages/nc-gui-v2/utils/userUtils.ts

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 72c980072e..f5e940f2ba 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -19,6 +19,7 @@ declare module '@vue/runtime-core' {
     ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    ADropdownButton: typeof import('ant-design-vue/es')['DropdownButton']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
diff --git a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
index b3eb076fa7..207152df00 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
@@ -4,6 +4,7 @@ import AuditTab from './AuditTab.vue'
 import AppStore from './AppStore.vue'
 import Metadata from './Metadata.vue'
 import UIAcl from './UIAcl.vue'
+import UserManagement from './UserManagement.vue'
 import StoreFrontOutline from '~icons/mdi/storefront-outline'
 import TeamFillIcon from '~icons/ri/team-fill'
 import MultipleTableIcon from '~icons/mdi/table-multiple'
@@ -39,7 +40,7 @@ const tabsInfo: TabGroup = {
     subTabs: {
       usersManagement: {
         title: 'Users Management',
-        body: () => AuditTab,
+        body: () => UserManagement,
       },
       apiTokenManagement: {
         title: 'API Token Management',
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
new file mode 100644
index 0000000000..dd7c683ac1
--- /dev/null
+++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import { useDebounce } from '@vueuse/core'
+import UsersModal from './userManagement/UsersModal.vue'
+import { projectRoleTagColors } from '~/utils/userUtils'
+import MidAccountIcon from '~icons/mdi/account-outline'
+import ReloadIcon from "~icons/mdi/reload"
+import MdiEditIcon from '~icons/ic/round-edit'
+import SearchIcon from '~icons/ic/round-search'
+import { copyTextToClipboard } from '~/utils/miscUtils'
+import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
+import EmailIcon from '~icons/eva/email-outline'
+import MdiPlusIcon from '~icons/mdi/plus'
+import MdiContentCopyIcon from '~icons/mdi/content-copy'
+import MdiEmailSendIcon from '~icons/mdi/email-arrow-right-outline'
+import RolesIcon from '~icons/mdi/drama-masks'
+import SendIcon from '~icons/material-symbols/send'
+import { User } from '~~/lib/types'
+import { useToast } from 'vue-toastification'
+const toast = useToast()
+
+const { $api, $e } = useNuxtApp()
+const { project } = useProject()
+
+let users = $ref<null | Array<User>>(null)
+let selectedUser = $ref<null | User>(null)
+let showUserModal = $ref(false)
+let showUserDeleteModal = $ref(false)
+
+let totalRows = $ref(0)
+const currentPage = $ref(1)
+const currentLimit = $ref(10)
+const searchText = ref<string>('')
+const debouncedSearchText = useDebounce(searchText, 300)
+
+const loadUsers = async (page = currentPage, limit = currentLimit) => {
+  try {
+    console.log('loadUsers', page, limit)
+    if (!project.value?.id) return
+
+    const response = await $api.auth.projectUserList(project.value?.id, <any> {
+      query: {
+        limit,
+        offset: searchText.value.length === 0 ? (page - 1) * limit : 0,
+        query: searchText.value,
+      },
+    })
+    console.log('userData', response)
+    if (!response.users) return
+
+    totalRows = response.users.pageInfo.totalRows ?? 0
+    users = response.users.list as Array<User>
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+const inviteUser = async (user) => {
+  try {
+    if (!project.value?.id) return
+
+    await $api.auth.projectUserAdd(project.id, user);
+    toast.success('Successfully added user to project');
+    await loadUsers();
+  } catch (e) {
+    toast.error(e.response.data.msg);
+  }
+
+  $e('a:user:add');
+}
+
+const deleteUser = async () => {
+  try {
+    if (!project.value?.id || !selectedUser?.id) return
+
+    await $api.auth.projectUserRemove(project.value.id, selectedUser.id);
+    toast.success('Successfully deleted user from project');
+    await loadUsers();
+  } catch (e) {
+    toast.error(e.response.data.msg);
+  }
+
+  $e('a:user:delete');
+}
+
+const onEdit = (user: User) => {
+  selectedUser = user
+  showUserModal = true
+}
+
+const onInvite = () => {
+  selectedUser = null
+  showUserModal = true
+}
+
+const onDelete = (user: User) => {
+  selectedUser = user
+  showUserDeleteModal = true
+}
+
+const resendInvite = async (user: User) => {
+  if (!project.value?.id ) return
+
+  try {
+    await $api.auth.projectUserResendInvite(project.value.id, user.id);
+    toast.success('Invite email sent successfully');
+    await loadUsers();
+  } catch (e) {
+    toast.error(e.response.data.msg);
+  }
+
+  $e('a:user:resend-invite');
+}
+
+const copyInviteUrl = (user: User) => {
+  if(!user.invite_token) return
+
+  const getInviteUrl = (token: string) => `${location.origin}${location.pathname}#/user/authentication/signup/${token}`;
+
+  copyTextToClipboard(getInviteUrl(user.invite_token) );
+  toast.success('Invite url copied to clipboard');
+}
+
+onMounted(async () => {
+  if (!users) {
+    await loadUsers()
+  }
+})
+
+watch(
+  () => debouncedSearchText.value,
+  () => loadUsers(),
+)
+</script>
+
+<template>
+  <div class="flex flex-col w-full px-6">
+    <UsersModal :key="showUserModal" :show="showUserModal" :selected-user="selectedUser" @closed="showUserModal = false" />
+      <a-modal v-model:visible="showUserDeleteModal" :closable="false" width="28rem" centered :footer="null">
+    <div class="flex flex-col h-full">
+      <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
+        This action will remove this user from this project
+      </div>
+      <div class="flex mt-6 justify-center space-x-2">
+        <a-button @click="showUserDeleteModal = false"> Cancel </a-button>
+        <a-button type="primary" danger @click="deleteUser"> Confirm </a-button>
+      </div>
+    </div>
+  </a-modal>
+    <div class="flex flex-row mb-4 mx-4 justify-between">
+      <div class="flex w-1/3" >
+        <a-input  v-model:value="searchText" placeholder="Filter by email" >
+          <template #prefix>
+            <SearchIcon class="text-gray-400"/>
+          </template>
+        </a-input>
+      </div>
+
+      <div class="flex flex-row space-x-1">
+        <a-button size="middle" type="text" @click="loadUsers()">
+          <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
+            <ReloadIcon class="text-gray-500" />
+            <div class="text-gray-500">Reload</div>
+          </div>
+        </a-button>
+        <a-button size="middle" @click="onInvite">
+          <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
+            <MidAccountIcon />
+            <div>Invite Team</div>
+          </div>
+        </a-button>
+      </div>
+    </div>
+    <div class="px-6">
+      <div class="flex flex-row border-b-1 pb-2 px-2">
+        <div class="flex flex-row w-4/6 space-x-1 items-center pl-1">
+          <EmailIcon class="flex text-gray-500 -mt-0.5" />
+
+          <div class="text-gray-600 text-xs space-x-1">E-mail</div>
+        </div>
+        <div class="flex flex-row justify-center w-1/6 space-x-1 items-center pl-1">
+          <RolesIcon class="flex text-gray-500 -mt-0.5" />
+
+          <div class="text-gray-600 text-xs">Role</div>
+        </div>
+        <div class="flex flex-row w-1/6 justify-end items-center pl-1">
+          <div class="text-gray-600 text-xs">Actions</div>
+        </div>
+      </div>
+
+      <div v-for="(user, index) in users" :key="index" class="flex flex-row items-center border-b-1 py-2 px-2">
+        <div class="flex w-4/6 flex-wrap">
+          {{ user.email }}
+        </div>
+        <div class="flex w-1/6 justify-center flex-wrap ml-4">
+          <div :class="`rounded-full  px-2 py-1 bg-[${projectRoleTagColors[user.roles]}]`">
+            {{ user.roles }}
+          </div>
+        </div>
+        <div class="flex w-1/6 flex-wrap justify-end">
+          <a-button v-if="user.project_id" type="text" class="!rounded-md" @click="onEdit(user)">
+            <template #icon>
+              <MdiEditIcon height="1rem" class="flex mx-auto" />
+            </template>
+          </a-button>
+          <a-button type="text" v-if="!user.project_id" class="!rounded-md " @click="inviteUser(user)">
+            <template #icon>
+              <MdiPlusIcon height="1.1rem" class="flex mx-auto" />
+            </template>
+          </a-button>
+          <a-button v-else type="text" class="!rounded-md" @click="onDelete(user)">
+            <template #icon>
+              <MdiDeleteOutlineIcon height="1.1rem"  class="flex mx-auto" />
+            </template>
+          </a-button>
+          <a-button type="text" class="!rounded-md" @click="resendInvite(user)">
+            <template #icon>
+              <MdiEmailSendIcon height="1.1rem"  class="flex mx-auto" />
+            </template>
+          </a-button>
+          <a-button type="text" class="!rounded-md" @click="copyInviteUrl(user)">
+            <template #icon>
+              <MdiContentCopyIcon height="1.1rem"  class="flex mx-auto" />
+            </template>
+          </a-button>
+        </div>
+      </div>
+      <a-pagination
+        hideOnSinglePage
+        v-model:current="currentPage"
+        class="mt-4"
+        :page-size="currentLimit"
+        :total="totalRows"
+        show-less-items
+        @change="loadUsers"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.users-table {
+  /* equally spaced columns in table */
+  table-layout: fixed;
+
+  width: 100%;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
new file mode 100644
index 0000000000..54cf704f0e
--- /dev/null
+++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { useToast } from 'vue-toastification'
+import OpenInNewIcon from '~icons/mdi/open-in-new'
+import { dashboardUrl } from '~/utils/urlUtils'
+
+import MdiReload from '~icons/mdi/reload'
+import DownIcon from '~icons/ic/round-keyboard-arrow-down'
+import ContentCopyIcon from '~icons/mdi/content-copy'
+import MdiXmlIcon from '~icons/mdi/xml'
+import { copyTextToClipboard } from '~/utils/miscUtils'
+const toast = useToast()
+
+interface ShareBase {
+  uuid?: string
+  url?: string
+  role?: string
+}
+
+enum Role {
+  Owner = 'owner',
+  Editor = 'editor',
+  User = 'user',
+  Guest = 'guest',
+  Viewer = 'viewer',
+}
+
+const { $api, $e } = useNuxtApp()
+let base = $ref<null | ShareBase>(null)
+const showEditBaseDropdown = $ref(false)
+const { project } = useProject()
+
+const url = $computed(() => (base && base.uuid ? `${dashboardUrl()}#/nc/base/${base.uuid}` : null))
+
+const loadBase = async () => {
+  try {
+    if (!project.value.id) return
+
+    const res = await $api.project.sharedBaseGet(project.value.id)
+    base = {
+      uuid: res.uuid,
+      url: res.url,
+      role: res.roles,
+    }
+  } catch (e) {
+    console.error(e)
+    toast.error('Something went wrong')
+  }
+}
+
+const createShareBase = async (role = Role.Viewer) => {
+  try {
+    if (!project.value.id) return
+
+    const res = await $api.project.sharedBaseUpdate(project.value.id, {
+      roles: role,
+    })
+
+    base = res || {}
+    base.role = role
+  } catch (e) {
+    console.error(e)
+    toast.error('Something went wrong')
+  }
+  $e('a:shared-base:enable', { role })
+}
+
+const disableSharedBase = async () => {
+  try {
+    if (!project.value.id) return
+
+    await $api.project.sharedBaseDisable(project.value.id)
+    base = {}
+  } catch (e) {
+    toast.error(e.message)
+  }
+
+  $e('a:shared-base:disable')
+}
+
+const recreate = async () => {
+  try {
+    if (!project.value.id) return
+
+    const sharedBase = await $api.project.sharedBaseCreate(project.value.id, {
+      roles: base?.role || 'viewer',
+    })
+    const newBase = sharedBase || {}
+    base = { ...newBase, role: base?.role }
+  } catch (e) {
+    toast.error(e.message)
+  }
+
+  $e('a:shared-base:recreate')
+}
+
+const copyUrl = async () => {
+  if (!url) return
+
+  copyTextToClipboard(url)
+  toast.success('Copied shareable base url to clipboard!')
+
+  $e('c:shared-base:copy-url')
+}
+
+const navigateToSharedBase = () => {
+  if (!url) return
+
+  window.open(url, '_blank')
+
+  $e('c:shared-base:open-url')
+}
+
+const generateEmbeddableIframe = () => {
+  if (!url) return
+
+  copyTextToClipboard(`<iframe
+class="nc-embed"
+src="${url}?embed"
+frameborder="0"
+width="100%"
+height="700"
+style="background: transparent; border: 1px solid #ddd"></iframe>`)
+  toast.success('Copied embeddable html code!')
+
+  $e('c:shared-base:copy-embed-frame')
+}
+
+onMounted(() => {
+  if (!base) {
+    loadBase()
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-row items-center space-x-0.5 pl-1.5">
+      <OpenInNewIcon height="0.8rem" class="text-gray-500" />
+      <div class="text-gray-500 text-xs">Shared Base Link</div>
+    </div>
+    <div v-if="base?.uuid" class="flex flex-row mt-2 bg-red-50 py-4 mx-1 px-2 items-center rounded-sm">
+      <span class="text-xs overflow-x-hidden overflow-ellipsis text-gray-700">{{ url }}</span>
+      <a-divider class="flex" type="vertical" />
+
+      <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="recreate">
+        <template #icon>
+          <MdiReload height="1rem" class="flex mx-auto text-gray-600" />
+        </template>
+      </a-button>
+
+      <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="copyUrl">
+        <template #icon>
+          <ContentCopyIcon height="1rem" class="flex mx-auto text-gray-600" />
+        </template>
+      </a-button>
+
+      <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="navigateToSharedBase">
+        <template #icon>
+          <OpenInNewIcon height="1rem" class="flex mx-auto text-gray-600" />
+        </template>
+      </a-button>
+      <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="generateEmbeddableIframe">
+        <template #icon>
+          <MdiXmlIcon height="1rem" class="flex mx-auto text-gray-600" />
+        </template>
+      </a-button>
+    </div>
+    <div class="flex text-xs text-gray-400 mt-2 justify-start ml-2">
+      This link can be used to signup by anyone under this project
+    </div>
+    <div class="mt-4 flex flex-row justify-between mx-1">
+      <a-dropdown v-model="showEditBaseDropdown" class="flex">
+        <a-button>
+          <div class="flex flex-row items-center space-x-2">
+            <div v-if="base?.uuid">Anyone with the link</div>
+            <div v-else>Disable shared base</div>
+            <DownIcon height="1rem" />
+          </div>
+        </a-button>
+
+        <template #overlay>
+          <a-menu>
+            <a-menu-item>
+              <div v-if="base?.uuid" @click="disableSharedBase">Disable shared base</div>
+
+              <div v-else @click="createShareBase(Role.Viewer)">Anyone with the link</div>
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+
+      <a-select v-if="base?.uuid" v-model:value="base.role" class="flex">
+        <a-select-option
+          v-for="(role, index) in [Role.Editor, Role.Viewer]"
+          :key="index"
+          :value="role"
+          dropdown-class-name="capitalize"
+          @click="createShareBase(role)"
+        >
+          <div class="w-full px-2 capitalize">
+            {{ role }}
+          </div>
+        </a-select-option>
+      </a-select>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
new file mode 100644
index 0000000000..3f14d324b0
--- /dev/null
+++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { useToast } from 'vue-toastification'
+import { Form } from 'ant-design-vue'
+import ShareBase from './ShareBase.vue'
+import SendIcon from '~icons/material-symbols/send-outline'
+import CloseIcon from '~icons/material-symbols/close-rounded'
+import MidAccountIcon from '~icons/mdi/account-outline'
+import ContentCopyIcon from '~icons/mdi/content-copy'
+import type { User } from '~~/lib/types'
+import { ProjectRole } from '~/lib/enums'
+import { projectRoleTagColors } from '~/utils/userUtils'
+import { copyTextToClipboard } from '~/utils/miscUtils'
+import { extractSdkResponseErrorMsg } from '~~/utils/errorUtils'
+import { isEmail } from '~~/utils/validation'
+const { show, selectedUser } = defineProps<Props>()
+const emits = defineEmits(['closed'])
+const toast = useToast()
+interface Props {
+  show: boolean
+  selectedUser?: User
+}
+interface Users {
+  emails: string
+  role: ProjectRole
+  invitationToken?: string
+}
+
+const { project } = useProject()
+const { $api, $e } = useNuxtApp()
+
+const usersData = $ref<Users>({ emails: '', role: ProjectRole.Guest, invitationToken: undefined })
+let isFirstRender = $ref(true)
+const inviteToken = $ref(null)
+const formRef = ref()
+
+const useForm = Form.useForm
+const validators = computed(() => {
+  return {
+    emails: [
+      {
+        validator: (rule: any, value: string, callback: (errMsg?: string) => void) => {
+          if (value.length === 0) {
+            callback('Email is required')
+            return
+          }
+          const invalidEmails = (value || '').split(/\s*,\s*/).filter((e: string) => !isEmail(e))
+          if (invalidEmails.length > 0) {
+            callback(`${invalidEmails.length > 1 ? ' Invalid emails:' : 'Invalid email:'} ${invalidEmails.join(', ')} `)
+          } else {
+            callback()
+          }
+        },
+      },
+    ],
+  }
+})
+
+const { validateInfos } = useForm(usersData, validators)
+
+onMounted(() => {
+  if (isFirstRender && selectedUser) {
+    usersData.emails = selectedUser.email
+    usersData.role = selectedUser.roles
+  }
+  if (isFirstRender) isFirstRender = false
+})
+
+const saveUser = async () => {
+  $e('a:user:invite', { role: usersData.role })
+
+  if (!project.value.id) return
+
+  await formRef.value?.validateFields()
+
+  try {
+    if (selectedUser?.id) {
+      await $api.auth.projectUserUpdate(project.value.id, selectedUser.id, {
+        roles: selectedUser.roles,
+        email: selectedUser.email,
+        project_id: project.value.id,
+        projectName: project.value.title,
+      })
+    } else {
+      const res = await $api.auth.projectUserAdd(project.value.id, {
+        roles: usersData.role,
+        email: usersData.emails,
+        project_id: project.value.id,
+        projectName: project.value.title,
+      })
+      usersData.invitationToken = res.invite_token
+    }
+    toast.success('Successfully updated the user details')
+  } catch (e) {
+    toast.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const inviteUrl = $computed(() =>
+  inviteToken ? `${location.origin}${location.pathname}#/user/authentication/signup/${inviteToken}` : null,
+)
+
+const copyUrl = async () => {
+  if (!inviteUrl) return
+
+  copyTextToClipboard(inviteUrl)
+  toast.success('Copied shareable base url to clipboard!')
+
+  $e('c:shared-base:copy-url')
+}
+
+const clickInviteMore = () => {
+  $e('c:user:invite-more')
+  usersData.invitationToken = undefined
+  usersData.role = ProjectRole.Guest
+  usersData.emails = ''
+}
+</script>
+
+<template>
+  <a-modal :footer="null" centered :visible="show" :closable="false" width="max(50vw, 44rem)" @cancel="emits('closed')">
+    <div class="flex flex-col">
+      <div class="flex flex-row justify-between items-center pb-1.5 mb-2 border-b-1 w-full">
+        <a-typography-title class="select-none" type="secondary" :level="5"> Share: {{ project.title }} </a-typography-title>
+
+        <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="emits('closed')">
+          <template #icon>
+            <CloseIcon class="flex mx-auto" />
+          </template>
+        </a-button>
+      </div>
+
+      <div class="px-3">
+        <template v-if="usersData.invitationToken">
+          <div class="flex flex-col mt-1 border-b-1 pb-5">
+            <div class="flex flex-row items-center">
+              <MidAccountIcon height="1.1rem" class="text-gray-500" />
+              <div class="text-gray-500 text-xs ml-0.5 mt-0.5">Copy Invite Token</div>
+            </div>
+
+            <a-alert class="mt-1" type="success" show-icon>
+              <template #message>
+                <div class="flex flex-row w-full justify-between items-center">
+                  <div class="flex pl-2 text-green-700">
+                    {{ inviteUrl }} http://localhost:3001/nc/p_60c3wrrzv563zq#/nc/base/2d6f72d7-b16a-40f2-951c-00b1b90f3920
+                  </div>
+                  <a-button type="text" class="!rounded-md mr-1" @click="copyUrl">
+                    <template #icon>
+                      <ContentCopyIcon height="1rem" class="flex mx-auto text-green-700" />
+                    </template>
+                  </a-button>
+                </div>
+              </template>
+            </a-alert>
+            <div class="flex text-xs text-gray-400 mt-2 justify-start ml-2">
+              Looks like you have not configured mailer yet! Please copy above invite link and send it to
+              {{ usersData.invitationToken && usersData.emails }}.
+            </div>
+            <div class="flex flex-row justify-start mt-4 ml-1">
+              <a-button size="small" outlined @click="clickInviteMore">
+                <div class="flex flex-row justify-center items-center space-x-0.5">
+                  <SendIcon height="0.8rem" class="flex mx-auto text-gray-600" />
+                  <div class="text-xs text-gray-600">Invite more</div>
+                </div>
+              </a-button>
+            </div>
+          </div>
+        </template>
+        <div v-else class="flex flex-col pb-4">
+          <div class="flex flex-row items-center pl-2">
+            <MidAccountIcon height="1rem" class="text-gray-500" />
+            <div class="text-gray-500 text-xs ml-0.5 mt-0.5">{{ selectedUser ? 'Edit User' : 'Invite Team' }}</div>
+          </div>
+          <div class="border-1 py-3 px-4 rounded-md mt-1">
+            <a-form ref="formRef" :model="usersData" @finish="saveUser">
+              <div class="flex flex-row space-x-4">
+                <div class="flex flex-col w-3/4">
+                  <a-form-item
+                    v-bind="validateInfos.emails"
+                    name="emails"
+                    :rules="[{ required: true, message: 'Please input email' }]"
+                  >
+                    <div class="ml-1 mb-1 text-xs text-gray-500">Email:</div>
+                    <a-input v-model:value="usersData.emails" placeholder="Email" :disabled="!!selectedUser" />
+                  </a-form-item>
+                </div>
+                <div class="flex flex-col w-1/4">
+                  <a-form-item name="role" :rules="[{ required: true, message: 'Role required' }]">
+                    <div class="ml-1 mb-1 text-xs text-gray-500">Select User Role:</div>
+                    <a-select v-model:value="usersData.role">
+                      <a-select-option v-for="(role, index) in Object.keys(projectRoleTagColors)" :key="index" :value="role">
+                        <div class="flex flex-row h-full justify-start items-center">
+                          <div :class="`px-2 py-1 flex rounded-full text-xs bg-[${projectRoleTagColors[role]}]`">
+                            {{ role }}
+                          </div>
+                        </div>
+                      </a-select-option>
+                    </a-select>
+                  </a-form-item>
+                </div>
+              </div>
+              <div class="flex flex-row justify-center">
+                <a-button type="primary" html-type="submit">Submit</a-button>
+              </div>
+            </a-form>
+          </div>
+        </div>
+        <div class="flex mt-4">
+          <ShareBase />
+        </div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/lib/enums.ts b/packages/nc-gui-v2/lib/enums.ts
index d2705374bc..11acd9ae1c 100644
--- a/packages/nc-gui-v2/lib/enums.ts
+++ b/packages/nc-gui-v2/lib/enums.ts
@@ -4,6 +4,13 @@ export enum Role {
   User = 'user',
 }
 
+export enum ProjectRole {
+  Owner = 'owner',
+  Editor = 'editor',
+  User = 'user',
+  Guest = 'guest',
+}
+
 export enum ClientType {
   MYSQL = 'mysql2',
   MSSQL = 'mssql',
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index b80358c982..8a97243ea7 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -26,7 +26,9 @@
       "devDependencies": {
         "@antfu/eslint-config": "^0.25.2",
         "@iconify-json/clarity": "^1.1.4",
+        "@iconify-json/eva": "^1.1.2",
         "@iconify-json/ic": "^1.1.7",
+        "@iconify-json/lucide": "^1.1.36",
         "@iconify-json/material-symbols": "^1.1.8",
         "@iconify-json/mdi": "^1.1.25",
         "@iconify-json/ri": "^1.1.3",
@@ -10427,6 +10429,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/eva": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/eva/-/eva-1.1.2.tgz",
+      "integrity": "sha512-4n3sAzXYH4vX2ehi2+kMPP7VHM1TTZ2AKJyUrAogAdbEKWhHr891huFhOSZPRJ9F2/4D4Us8SjRxBHYyUvX80w==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/ic": {
       "version": "1.1.7",
       "dev": true,
@@ -10435,6 +10446,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/lucide": {
+      "version": "1.1.37",
+      "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.1.37.tgz",
+      "integrity": "sha512-GfeDEy61ols35CYLfNxQWCIWdVTf/V0GI29D5IT74ToxcwqjtInQ6YVeNJCfKSGsTnnuyG+M6drd6YXLEfdjvQ==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/material-symbols": {
       "version": "1.1.8",
       "dev": true,
@@ -23062,6 +23082,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/eva": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/eva/-/eva-1.1.2.tgz",
+      "integrity": "sha512-4n3sAzXYH4vX2ehi2+kMPP7VHM1TTZ2AKJyUrAogAdbEKWhHr891huFhOSZPRJ9F2/4D4Us8SjRxBHYyUvX80w==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/ic": {
       "version": "1.1.7",
       "dev": true,
@@ -23069,6 +23098,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/lucide": {
+      "version": "1.1.37",
+      "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.1.37.tgz",
+      "integrity": "sha512-GfeDEy61ols35CYLfNxQWCIWdVTf/V0GI29D5IT74ToxcwqjtInQ6YVeNJCfKSGsTnnuyG+M6drd6YXLEfdjvQ==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/material-symbols": {
       "version": "1.1.8",
       "dev": true,
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 2ade8b06ff..38f3be3d54 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -32,7 +32,9 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.25.2",
     "@iconify-json/clarity": "^1.1.4",
+    "@iconify-json/eva": "^1.1.2",
     "@iconify-json/ic": "^1.1.7",
+    "@iconify-json/lucide": "^1.1.36",
     "@iconify-json/material-symbols": "^1.1.8",
     "@iconify-json/mdi": "^1.1.25",
     "@iconify-json/ri": "^1.1.3",
diff --git a/packages/nc-gui-v2/utils/miscUtils.ts b/packages/nc-gui-v2/utils/miscUtils.ts
new file mode 100644
index 0000000000..6506fd9df7
--- /dev/null
+++ b/packages/nc-gui-v2/utils/miscUtils.ts
@@ -0,0 +1,56 @@
+export const copyTextToClipboard = (text: string) => {
+  const textArea = document.createElement('textarea')
+
+  //
+  // *** This styling is an extra step which is likely not required. ***
+  //
+  // Why is it here? To ensure:
+  // 1. the element is able to have focus and selection.
+  // 2. if element was to flash render it has minimal visual impact.
+  // 3. less flakyness with selection and copying which **might** occur if
+  //    the textarea element is not visible.
+  //
+  // The likelihood is the element won't even render, not even a
+  // flash, so some of these are just precautions. However in
+  // Internet Explorer the element is visible whilst the popup
+  // box asking the user for permission for the web page to
+  // copy to the clipboard.
+  //
+
+  // Place in top-left corner of screen regardless of scroll position.
+  textArea.style.position = 'fixed'
+  textArea.style.top = '0'
+  textArea.style.left = '0'
+
+  // Ensure it has a small width and height. Setting to 1px / 1em
+  // doesn't work as this gives a negative w/h on some browsers.
+  textArea.style.width = '2em'
+  textArea.style.height = '2em'
+
+  // We don't need padding, reducing the size if it does flash render.
+  textArea.style.padding = '0'
+
+  // Clean up any borders.
+  textArea.style.border = 'none'
+  textArea.style.outline = 'none'
+  textArea.style.boxShadow = 'none'
+
+  // Avoid flash of white box if rendered for any reason.
+  textArea.style.background = 'transparent'
+
+  textArea.addEventListener('focusin', (e) => e.stopPropagation())
+
+  textArea.value = text
+
+  document.body.appendChild(textArea)
+  textArea.focus()
+  textArea.select()
+
+  try {
+    document.execCommand('copy')
+  } catch (err) {
+    console.log('Oops, unable to copy')
+  }
+
+  document.body.removeChild(textArea)
+}
diff --git a/packages/nc-gui-v2/utils/urlUtils.ts b/packages/nc-gui-v2/utils/urlUtils.ts
index c43f9a1efc..5f71c720a1 100644
--- a/packages/nc-gui-v2/utils/urlUtils.ts
+++ b/packages/nc-gui-v2/utils/urlUtils.ts
@@ -17,6 +17,10 @@ export const replaceUrlsWithLink = (text: string): boolean | string => {
   return found && out
 }
 
+export const dashboardUrl = () => {
+  return `${location.origin}${location.pathname || ''}`
+}
+
 // ref : https://stackoverflow.com/a/5717133
 export const isValidURL = (str: string) => {
   const pattern =
diff --git a/packages/nc-gui-v2/utils/userUtils.ts b/packages/nc-gui-v2/utils/userUtils.ts
new file mode 100644
index 0000000000..27f70ef391
--- /dev/null
+++ b/packages/nc-gui-v2/utils/userUtils.ts
@@ -0,0 +1,8 @@
+import { ProjectRole } from '~/lib/enums'
+
+export const projectRoleTagColors = {
+  [ProjectRole.Owner]: '#cfdffe',
+  [ProjectRole.Editor]: '#c2f5e8',
+  [ProjectRole.User]: '#4caf50',
+  [ProjectRole.Guest]: '#9e9e9e',
+}

From c9dc180f44cc75afac4c490f40f1a4a87eb462db Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 11:39:49 +0530
Subject: [PATCH 02/26] refactor/gui-v2-user-management-tooltip-added and ui
 improvemnts

---
 .../dashboard/settings/UserManagement.vue     | 88 ++++++++++++++-----
 .../settings/userManagement/ShareBase.vue     | 82 ++++++++++-------
 .../settings/userManagement/UsersModal.vue    | 21 +++--
 3 files changed, 123 insertions(+), 68 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
index dd7c683ac1..846875bb11 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useDebounce } from '@vueuse/core'
+import KebabIcon from '~icons/ic/baseline-more-vert'
 import UsersModal from './userManagement/UsersModal.vue'
 import { projectRoleTagColors } from '~/utils/userUtils'
 import MidAccountIcon from '~icons/mdi/account-outline'
@@ -13,7 +14,6 @@ import MdiPlusIcon from '~icons/mdi/plus'
 import MdiContentCopyIcon from '~icons/mdi/content-copy'
 import MdiEmailSendIcon from '~icons/mdi/email-arrow-right-outline'
 import RolesIcon from '~icons/mdi/drama-masks'
-import SendIcon from '~icons/material-symbols/send'
 import { User } from '~~/lib/types'
 import { useToast } from 'vue-toastification'
 const toast = useToast()
@@ -170,7 +170,7 @@ watch(
         </a-button>
       </div>
     </div>
-    <div class="px-6">
+    <div class="px-5">
       <div class="flex flex-row border-b-1 pb-2 px-2">
         <div class="flex flex-row w-4/6 space-x-1 items-center pl-1">
           <EmailIcon class="flex text-gray-500 -mt-0.5" />
@@ -192,36 +192,76 @@ watch(
           {{ user.email }}
         </div>
         <div class="flex w-1/6 justify-center flex-wrap ml-4">
-          <div :class="`rounded-full  px-2 py-1 bg-[${projectRoleTagColors[user.roles]}]`">
+          <div :class="`rounded-full px-2 py-1 bg-[${projectRoleTagColors[user.roles]}]`">
             {{ user.roles }}
           </div>
         </div>
         <div class="flex w-1/6 flex-wrap justify-end">
-          <a-button v-if="user.project_id" type="text" class="!rounded-md" @click="onEdit(user)">
-            <template #icon>
-              <MdiEditIcon height="1rem" class="flex mx-auto" />
+          <a-tooltip v-if="user.project_id" placement="bottom">
+            <template #title>
+              <span>Edit user</span>
             </template>
-          </a-button>
-          <a-button type="text" v-if="!user.project_id" class="!rounded-md " @click="inviteUser(user)">
-            <template #icon>
-              <MdiPlusIcon height="1.1rem" class="flex mx-auto" />
+            <a-button  type="text" class="!rounded-md" @click="onEdit(user)">
+                <template #icon>
+                  <MdiEditIcon height="1rem" class="flex mx-auto" />
+                </template>
+              </a-button>
+          </a-tooltip>
+          <a-tooltip v-if="!user.project_id" placement="bottom">
+            <template #title>
+              <span>Add user to the project</span>
             </template>
-          </a-button>
-          <a-button v-else type="text" class="!rounded-md" @click="onDelete(user)">
-            <template #icon>
-              <MdiDeleteOutlineIcon height="1.1rem"  class="flex mx-auto" />
-            </template>
-          </a-button>
-          <a-button type="text" class="!rounded-md" @click="resendInvite(user)">
-            <template #icon>
-              <MdiEmailSendIcon height="1.1rem"  class="flex mx-auto" />
+            <a-button type="text"  class="!rounded-md " @click="inviteUser(user)">
+              <template #icon>
+                <MdiPlusIcon height="1.1rem" class="flex mx-auto" />
+              </template>
+            </a-button>
+          </a-tooltip>
+
+          <a-tooltip v-else placement="bottom">
+            <template #title>
+              <span>Remove user from the project</span>
             </template>
-          </a-button>
-          <a-button type="text" class="!rounded-md" @click="copyInviteUrl(user)">
-            <template #icon>
-              <MdiContentCopyIcon height="1.1rem"  class="flex mx-auto" />
+            <a-button  type="text" class="!rounded-md" @click="onDelete(user)">
+              <template #icon>
+                <MdiDeleteOutlineIcon height="1.1rem"  class="flex mx-auto" />
+              </template>
+            </a-button>
+          </a-tooltip>
+
+          <a-dropdown :trigger="['click']" class="flex">
+            <div class="flex flex-row items-center">
+              <a-button type="text" class="!px-0">
+                <div class="flex flex-row items-center ">
+                  <KebabIcon height="1.2rem" />
+                </div>
+              </a-button>
+            </div>
+            <template #overlay>
+              <a-menu>
+                <a-menu-item>
+                  <a-button type="text" @click="resendInvite(user)">
+                    <div class="flex flex-row items-center">
+                      <MdiEmailSendIcon height="1rem" class="flex" />
+                      <div class="text-xs pl-2">
+                        Resend invite email
+                      </div>
+                    </div>
+                  </a-button>
+                </a-menu-item>
+                <a-menu-item>
+                  <a-button class="w-full" type="text" @click="copyInviteUrl(user)">
+                    <div class="flex flex-row items-center">
+                      <MdiContentCopyIcon height="1rem" class="flex" />
+                      <div class="text-xs pl-2">
+                        Copy invite URL
+                      </div>
+                    </div>
+                  </a-button>
+                </a-menu-item>
+              </a-menu>
             </template>
-          </a-button>
+          </a-dropdown>
         </div>
       </div>
       <a-pagination
diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
index 54cf704f0e..2fae1f7204 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
@@ -133,41 +133,57 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col">
-    <div class="flex flex-row items-center space-x-0.5 pl-1.5">
-      <OpenInNewIcon height="0.8rem" class="text-gray-500" />
-      <div class="text-gray-500 text-xs">Shared Base Link</div>
+  <div class="flex flex-col w-full">
+    <div class="flex flex-row items-center space-x-0.5 pl-2">
+      <OpenInNewIcon height="0.8rem" />
+      <div class="text-xs">Shared Base Link</div>
     </div>
-    <div v-if="base?.uuid" class="flex flex-row mt-2 bg-red-50 py-4 mx-1 px-2 items-center rounded-sm">
-      <span class="text-xs overflow-x-hidden overflow-ellipsis text-gray-700">{{ url }}</span>
-      <a-divider class="flex" type="vertical" />
-
-      <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="recreate">
-        <template #icon>
-          <MdiReload height="1rem" class="flex mx-auto text-gray-600" />
-        </template>
-      </a-button>
-
-      <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="copyUrl">
-        <template #icon>
-          <ContentCopyIcon height="1rem" class="flex mx-auto text-gray-600" />
-        </template>
-      </a-button>
-
-      <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="navigateToSharedBase">
-        <template #icon>
-          <OpenInNewIcon height="1rem" class="flex mx-auto text-gray-600" />
-        </template>
-      </a-button>
-      <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="generateEmbeddableIframe">
-        <template #icon>
-          <MdiXmlIcon height="1rem" class="flex mx-auto text-gray-600" />
-        </template>
-      </a-button>
-    </div>
-    <div class="flex text-xs text-gray-400 mt-2 justify-start ml-2">
-      This link can be used to signup by anyone under this project
+    <div v-if="base?.uuid" class="flex flex-row mt-2 bg-red-50 py-4 mx-1 px-2 items-center rounded-sm w-full justify-between">
+      <span class="flex text-xs overflow-x-hidden overflow-ellipsis text-gray-700 pl-2">{{ url }}</span>
+      <div class="flex border-l-1 pt-1 pl-1">
+        <a-tooltip placement="bottom">
+          <template #title>
+            <span>Reload</span>
+          </template>
+          <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="recreate">
+            <template #icon>
+              <MdiReload height="1rem" class="flex mx-auto text-gray-600" />
+            </template>
+          </a-button>
+        </a-tooltip>
+        <a-tooltip placement="bottom">
+          <template #title>
+            <span>Copy URL</span>
+          </template>
+          <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="copyUrl">
+            <template #icon>
+              <ContentCopyIcon height="1rem" class="flex mx-auto text-gray-600" />
+            </template>
+          </a-button>
+        </a-tooltip>
+        <a-tooltip placement="bottom">
+          <template #title>
+            <span>Open new tab</span>
+          </template>
+          <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="navigateToSharedBase">
+            <template #icon>
+              <OpenInNewIcon height="1rem" class="flex mx-auto text-gray-600" />
+            </template>
+          </a-button>
+        </a-tooltip>
+        <a-tooltip placement="bottom">
+          <template #title>
+            <span>Copy embeddable HTML code</span>
+          </template>
+          <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="generateEmbeddableIframe">
+            <template #icon>
+              <MdiXmlIcon height="1rem" class="flex mx-auto text-gray-600" />
+            </template>
+          </a-button>
+        </a-tooltip>
+      </div>
     </div>
+    <div class="flex text-xs text-gray-500 mt-2 justify-start ml-2">Generate publicly shareable readonly base</div>
     <div class="mt-4 flex flex-row justify-between mx-1">
       <a-dropdown v-model="showEditBaseDropdown" class="flex">
         <a-button>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
index 3f14d324b0..50a338d7ad 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
@@ -120,8 +120,7 @@ const clickInviteMore = () => {
   <a-modal :footer="null" centered :visible="show" :closable="false" width="max(50vw, 44rem)" @cancel="emits('closed')">
     <div class="flex flex-col">
       <div class="flex flex-row justify-between items-center pb-1.5 mb-2 border-b-1 w-full">
-        <a-typography-title class="select-none" type="secondary" :level="5"> Share: {{ project.title }} </a-typography-title>
-
+        <a-typography-title class="select-none" :level="4"> Share: {{ project.title }} </a-typography-title>
         <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="emits('closed')">
           <template #icon>
             <CloseIcon class="flex mx-auto" />
@@ -129,12 +128,12 @@ const clickInviteMore = () => {
         </a-button>
       </div>
 
-      <div class="px-3">
+      <div class="px-2 mt-1.5">
         <template v-if="usersData.invitationToken">
           <div class="flex flex-col mt-1 border-b-1 pb-5">
-            <div class="flex flex-row items-center">
-              <MidAccountIcon height="1.1rem" class="text-gray-500" />
-              <div class="text-gray-500 text-xs ml-0.5 mt-0.5">Copy Invite Token</div>
+            <div class="flex flex-row items-center pl-1.5 pb-1">
+              <MidAccountIcon height="1.1rem" />
+              <div class="text-xs ml-0.5 mt-0.5">Copy Invite Token</div>
             </div>
 
             <a-alert class="mt-1" type="success" show-icon>
@@ -151,7 +150,7 @@ const clickInviteMore = () => {
                 </div>
               </template>
             </a-alert>
-            <div class="flex text-xs text-gray-400 mt-2 justify-start ml-2">
+            <div class="flex text-xs text-gray-500 mt-2 justify-start ml-2">
               Looks like you have not configured mailer yet! Please copy above invite link and send it to
               {{ usersData.invitationToken && usersData.emails }}.
             </div>
@@ -166,9 +165,9 @@ const clickInviteMore = () => {
           </div>
         </template>
         <div v-else class="flex flex-col pb-4">
-          <div class="flex flex-row items-center pl-2">
-            <MidAccountIcon height="1rem" class="text-gray-500" />
-            <div class="text-gray-500 text-xs ml-0.5 mt-0.5">{{ selectedUser ? 'Edit User' : 'Invite Team' }}</div>
+          <div class="flex flex-row items-center pl-2 pb-1">
+            <MidAccountIcon height="1rem" />
+            <div class="text-xs ml-0.5 mt-0.5">{{ selectedUser ? 'Edit User' : 'Invite Team' }}</div>
           </div>
           <div class="border-1 py-3 px-4 rounded-md mt-1">
             <a-form ref="formRef" :model="usersData" @finish="saveUser">
@@ -199,7 +198,7 @@ const clickInviteMore = () => {
                 </div>
               </div>
               <div class="flex flex-row justify-center">
-                <a-button type="primary" html-type="submit">Submit</a-button>
+                <a-button type="primary" html-type="submit">Invite</a-button>
               </div>
             </a-form>
           </div>

From f76234375824a28ca8300c423468b69093638f80 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 11:46:26 +0530
Subject: [PATCH 03/26] 
 refactor/gui-v2-user-management-invite-button-prefix-icon-added

---
 .../dashboard/settings/userManagement/UsersModal.vue       | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
index 50a338d7ad..380dd3b34c 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
@@ -198,7 +198,12 @@ const clickInviteMore = () => {
                 </div>
               </div>
               <div class="flex flex-row justify-center">
-                <a-button type="primary" html-type="submit">Invite</a-button>
+                <a-button type="primary" html-type="submit">
+                  <div class="flex flex-row justify-center items-center space-x-1.5">
+                    <SendIcon height="0.8rem" class="flex" />
+                    <div>Invite</div>
+                  </div>
+                </a-button>
               </div>
             </a-form>
           </div>

From 20f9e0afcce168dc563e863610e45f4b484f533f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 12:33:05 +0530
Subject: [PATCH 04/26] 
 refactor/gui-v2-user-management-invite-button-cleanup-and-ui-improvements

---
 .../dashboard/settings/userManagement/ShareBase.vue  | 12 ++++--------
 .../dashboard/settings/userManagement/UsersModal.vue | 11 +++++------
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
index 2fae1f7204..0f65cfe0b0 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
@@ -16,11 +16,8 @@ interface ShareBase {
   role?: string
 }
 
-enum Role {
-  Owner = 'owner',
+enum ShareBaseRole {
   Editor = 'editor',
-  User = 'user',
-  Guest = 'guest',
   Viewer = 'viewer',
 }
 
@@ -47,7 +44,7 @@ const loadBase = async () => {
   }
 }
 
-const createShareBase = async (role = Role.Viewer) => {
+const createShareBase = async (role = ShareBaseRole.Viewer) => {
   try {
     if (!project.value.id) return
 
@@ -198,8 +195,7 @@ onMounted(() => {
           <a-menu>
             <a-menu-item>
               <div v-if="base?.uuid" @click="disableSharedBase">Disable shared base</div>
-
-              <div v-else @click="createShareBase(Role.Viewer)">Anyone with the link</div>
+              <div v-else @click="createShareBase(ShareBaseRole.Viewer)">Anyone with the link</div>
             </a-menu-item>
           </a-menu>
         </template>
@@ -207,7 +203,7 @@ onMounted(() => {
 
       <a-select v-if="base?.uuid" v-model:value="base.role" class="flex">
         <a-select-option
-          v-for="(role, index) in [Role.Editor, Role.Viewer]"
+          v-for="(role, index) in [ShareBaseRole.Editor, ShareBaseRole.Viewer]"
           :key="index"
           :value="role"
           dropdown-class-name="capitalize"
diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
index 380dd3b34c..b14c554bed 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
@@ -15,12 +15,13 @@ import { isEmail } from '~~/utils/validation'
 const { show, selectedUser } = defineProps<Props>()
 const emits = defineEmits(['closed'])
 const toast = useToast()
+
 interface Props {
   show: boolean
   selectedUser?: User
 }
 interface Users {
-  emails: string
+  emails?: string
   role: ProjectRole
   invitationToken?: string
 }
@@ -28,8 +29,7 @@ interface Users {
 const { project } = useProject()
 const { $api, $e } = useNuxtApp()
 
-const usersData = $ref<Users>({ emails: '', role: ProjectRole.Guest, invitationToken: undefined })
-let isFirstRender = $ref(true)
+const usersData = $ref<Users>({ emails: undefined, role: ProjectRole.Guest, invitationToken: undefined })
 const inviteToken = $ref(null)
 const formRef = ref()
 
@@ -58,11 +58,10 @@ const validators = computed(() => {
 const { validateInfos } = useForm(usersData, validators)
 
 onMounted(() => {
-  if (isFirstRender && selectedUser) {
+  if (!usersData.emails && selectedUser?.email) {
     usersData.emails = selectedUser.email
     usersData.role = selectedUser.roles
   }
-  if (isFirstRender) isFirstRender = false
 })
 
 const saveUser = async () => {
@@ -112,7 +111,7 @@ const clickInviteMore = () => {
   $e('c:user:invite-more')
   usersData.invitationToken = undefined
   usersData.role = ProjectRole.Guest
-  usersData.emails = ''
+  usersData.emails = undefined
 }
 </script>
 

From 4be23a7b912e2aa2305cdc6c29ca1910a2e696d1 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 13:46:17 +0530
Subject: [PATCH 05/26] refactor/gui-v2-user-management-invite-ui-improvements

---
 .../dashboard/settings/userManagement/UsersModal.vue       | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
index b14c554bed..89c4f4fcd1 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
@@ -151,9 +151,9 @@ const clickInviteMore = () => {
             </a-alert>
             <div class="flex text-xs text-gray-500 mt-2 justify-start ml-2">
               Looks like you have not configured mailer yet! Please copy above invite link and send it to
-              {{ usersData.invitationToken && usersData.emails }}.
+              {{ usersData.invitationToken && usersData.emails }}
             </div>
-            <div class="flex flex-row justify-start mt-4 ml-1">
+            <div class="flex flex-row justify-start mt-4 ml-2">
               <a-button size="small" outlined @click="clickInviteMore">
                 <div class="flex flex-row justify-center items-center space-x-0.5">
                   <SendIcon height="0.8rem" class="flex mx-auto text-gray-600" />
@@ -198,7 +198,8 @@ const clickInviteMore = () => {
               </div>
               <div class="flex flex-row justify-center">
                 <a-button type="primary" html-type="submit">
-                  <div class="flex flex-row justify-center items-center space-x-1.5">
+                  <div v-if="selectedUser">Save</div>
+                  <div v-else class="flex flex-row justify-center items-center space-x-1.5">
                     <SendIcon height="0.8rem" class="flex" />
                     <div>Invite</div>
                   </div>

From 48138df979d7f72aa0a335e63695492fa0cf29e9 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 14:18:54 +0530
Subject: [PATCH 06/26] refactor/gui-v2-user-management-invite-cleanup

---
 .../dashboard/settings/UserManagement.vue     | 32 +++++++++++--------
 .../settings/userManagement/ShareBase.vue     | 20 ++++++------
 .../settings/userManagement/UsersModal.vue    | 11 ++++---
 3 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
index 846875bb11..12e89319d3 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useDebounce } from '@vueuse/core'
 import KebabIcon from '~icons/ic/baseline-more-vert'
+import { extractSdkResponseErrorMsg } from '~~/utils/errorUtils'
 import UsersModal from './userManagement/UsersModal.vue'
 import { projectRoleTagColors } from '~/utils/userUtils'
 import MidAccountIcon from '~icons/mdi/account-outline'
@@ -21,7 +22,7 @@ const toast = useToast()
 const { $api, $e } = useNuxtApp()
 const { project } = useProject()
 
-let users = $ref<null | Array<User>>(null)
+let users = $ref<null | User[]>(null)
 let selectedUser = $ref<null | User>(null)
 let showUserModal = $ref(false)
 let showUserDeleteModal = $ref(false)
@@ -34,7 +35,6 @@ const debouncedSearchText = useDebounce(searchText, 300)
 
 const loadUsers = async (page = currentPage, limit = currentLimit) => {
   try {
-    console.log('loadUsers', page, limit)
     if (!project.value?.id) return
 
     const response = await $api.auth.projectUserList(project.value?.id, <any> {
@@ -44,25 +44,26 @@ const loadUsers = async (page = currentPage, limit = currentLimit) => {
         query: searchText.value,
       },
     })
-    console.log('userData', response)
     if (!response.users) return
 
     totalRows = response.users.pageInfo.totalRows ?? 0
-    users = response.users.list as Array<User>
-  } catch (e) {
-    console.log(e)
+    users = response.users.list as User[]
+  } catch (e: any) {
+    console.error(e)
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
-const inviteUser = async (user) => {
+const inviteUser = async (user: User) => {
   try {
     if (!project.value?.id) return
 
-    await $api.auth.projectUserAdd(project.id, user);
+    await $api.auth.projectUserAdd(project.value.id, user);
     toast.success('Successfully added user to project');
     await loadUsers();
-  } catch (e) {
-    toast.error(e.response.data.msg);
+  } catch (e: any) {
+    console.error(e)
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:user:add');
@@ -75,8 +76,9 @@ const deleteUser = async () => {
     await $api.auth.projectUserRemove(project.value.id, selectedUser.id);
     toast.success('Successfully deleted user from project');
     await loadUsers();
-  } catch (e) {
-    toast.error(e.response.data.msg);
+  } catch (e: any) {
+    console.error(e)
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:user:delete');
@@ -104,8 +106,9 @@ const resendInvite = async (user: User) => {
     await $api.auth.projectUserResendInvite(project.value.id, user.id);
     toast.success('Invite email sent successfully');
     await loadUsers();
-  } catch (e) {
-    toast.error(e.response.data.msg);
+  } catch (e: any) {
+    console.error(e)
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:user:resend-invite');
@@ -130,6 +133,7 @@ watch(
   () => debouncedSearchText.value,
   () => loadUsers(),
 )
+
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
index 0f65cfe0b0..573e5d2df5 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
@@ -2,7 +2,7 @@
 import { useToast } from 'vue-toastification'
 import OpenInNewIcon from '~icons/mdi/open-in-new'
 import { dashboardUrl } from '~/utils/urlUtils'
-
+import { extractSdkResponseErrorMsg } from '~~/utils/errorUtils'
 import MdiReload from '~icons/mdi/reload'
 import DownIcon from '~icons/ic/round-keyboard-arrow-down'
 import ContentCopyIcon from '~icons/mdi/content-copy'
@@ -38,9 +38,9 @@ const loadBase = async () => {
       url: res.url,
       role: res.roles,
     }
-  } catch (e) {
+  } catch (e: any) {
     console.error(e)
-    toast.error('Something went wrong')
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
@@ -54,9 +54,9 @@ const createShareBase = async (role = ShareBaseRole.Viewer) => {
 
     base = res || {}
     base.role = role
-  } catch (e) {
+  } catch (e: any) {
     console.error(e)
-    toast.error('Something went wrong')
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
   $e('a:shared-base:enable', { role })
 }
@@ -67,8 +67,9 @@ const disableSharedBase = async () => {
 
     await $api.project.sharedBaseDisable(project.value.id)
     base = {}
-  } catch (e) {
-    toast.error(e.message)
+  } catch (e: any) {
+    console.error(e)
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:shared-base:disable')
@@ -83,8 +84,9 @@ const recreate = async () => {
     })
     const newBase = sharedBase || {}
     base = { ...newBase, role: base?.role }
-  } catch (e) {
-    toast.error(e.message)
+  } catch (e: any) {
+    console.error(e)
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:shared-base:recreate')
diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
index 89c4f4fcd1..5ecdf9dfeb 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
@@ -20,6 +20,7 @@ interface Props {
   show: boolean
   selectedUser?: User
 }
+
 interface Users {
   emails?: string
   role: ProjectRole
@@ -30,7 +31,6 @@ const { project } = useProject()
 const { $api, $e } = useNuxtApp()
 
 const usersData = $ref<Users>({ emails: undefined, role: ProjectRole.Guest, invitationToken: undefined })
-const inviteToken = $ref(null)
 const formRef = ref()
 
 const useForm = Form.useForm
@@ -89,13 +89,16 @@ const saveUser = async () => {
       usersData.invitationToken = res.invite_token
     }
     toast.success('Successfully updated the user details')
-  } catch (e) {
+  } catch (e: any) {
+    console.error(e)
     toast.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
 const inviteUrl = $computed(() =>
-  inviteToken ? `${location.origin}${location.pathname}#/user/authentication/signup/${inviteToken}` : null,
+  usersData.invitationToken
+    ? `${location.origin}${location.pathname}#/user/authentication/signup/${usersData.invitationToken}`
+    : null,
 )
 
 const copyUrl = async () => {
@@ -139,7 +142,7 @@ const clickInviteMore = () => {
               <template #message>
                 <div class="flex flex-row w-full justify-between items-center">
                   <div class="flex pl-2 text-green-700">
-                    {{ inviteUrl }} http://localhost:3001/nc/p_60c3wrrzv563zq#/nc/base/2d6f72d7-b16a-40f2-951c-00b1b90f3920
+                    {{ inviteUrl }}
                   </div>
                   <a-button type="text" class="!rounded-md mr-1" @click="copyUrl">
                     <template #icon>

From ab51fb10a1193cdeb52814f93d353b2aa056b782 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 14:21:11 +0530
Subject: [PATCH 07/26] refactor/gui-v2-user-management-invite-cleanup

---
 .../dashboard/settings/userManagement/UsersModal.vue       | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
index 5ecdf9dfeb..85a83c5c3e 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
@@ -12,9 +12,6 @@ import { projectRoleTagColors } from '~/utils/userUtils'
 import { copyTextToClipboard } from '~/utils/miscUtils'
 import { extractSdkResponseErrorMsg } from '~~/utils/errorUtils'
 import { isEmail } from '~~/utils/validation'
-const { show, selectedUser } = defineProps<Props>()
-const emits = defineEmits(['closed'])
-const toast = useToast()
 
 interface Props {
   show: boolean
@@ -27,6 +24,10 @@ interface Users {
   invitationToken?: string
 }
 
+const { show, selectedUser } = defineProps<Props>()
+const emits = defineEmits(['closed'])
+const toast = useToast()
+
 const { project } = useProject()
 const { $api, $e } = useNuxtApp()
 

From 72ba6572134c5d5d861ef0169f6f9de46e5768d1 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 16:33:14 +0530
Subject: [PATCH 08/26] 
 feat/gui-v2-user-management-invite-moved-useglobal-to-folder-added-init-plugin-which-handles-feedback-form-logic

---
 .../index.ts}                                 |  9 +++-
 .../useGlobalState/initialFeedBackForm.ts     |  5 ++
 packages/nc-gui-v2/lib/types.ts               |  8 ++++
 packages/nc-gui-v2/plugins/api.ts             |  2 +-
 packages/nc-gui-v2/plugins/init.ts            | 46 +++++++++++++++++++
 5 files changed, 68 insertions(+), 2 deletions(-)
 rename packages/nc-gui-v2/composables/{useGlobalState.ts => useGlobalState/index.ts} (95%)
 create mode 100644 packages/nc-gui-v2/composables/useGlobalState/initialFeedBackForm.ts
 create mode 100644 packages/nc-gui-v2/plugins/init.ts

diff --git a/packages/nc-gui-v2/composables/useGlobalState.ts b/packages/nc-gui-v2/composables/useGlobalState/index.ts
similarity index 95%
rename from packages/nc-gui-v2/composables/useGlobalState.ts
rename to packages/nc-gui-v2/composables/useGlobalState/index.ts
index f3392b4236..268299eb99 100644
--- a/packages/nc-gui-v2/composables/useGlobalState.ts
+++ b/packages/nc-gui-v2/composables/useGlobalState/index.ts
@@ -1,6 +1,7 @@
 import { breakpointsTailwind, usePreferredLanguages, useStorage } from '@vueuse/core'
 import { useJwt } from '@vueuse/integrations/useJwt'
 import type { JwtPayload } from 'jwt-decode'
+import initialFeedBackForm from './initialFeedBackForm'
 import { computed, ref, toRefs, useBreakpoints, useNuxtApp, useTimestamp, watch } from '#imports'
 import type { Actions, Getters, GlobalState, StoredState, User } from '~/lib/types'
 
@@ -67,7 +68,13 @@ export const useGlobalState = (): GlobalState => {
   }, 'en' /** fallback locale */)
 
   /** State */
-  const initialState: StoredState = { token: null, user: null, lang: preferredLanguage, darkMode: prefersDarkMode }
+  const initialState: StoredState = {
+    token: null,
+    user: null,
+    lang: preferredLanguage,
+    darkMode: prefersDarkMode,
+    feedbackForm: initialFeedBackForm,
+  }
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */
   const storage = $(useStorage<StoredState>(storageKey, initialState))
diff --git a/packages/nc-gui-v2/composables/useGlobalState/initialFeedBackForm.ts b/packages/nc-gui-v2/composables/useGlobalState/initialFeedBackForm.ts
new file mode 100644
index 0000000000..e351e88a9c
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useGlobalState/initialFeedBackForm.ts
@@ -0,0 +1,5 @@
+export default {
+  url: 'https://docs.google.com/forms/d/e/1FAIpQLSeTlAfZjszgr53lArz3NvUEnJGOT9JtG9NAU5d0oQwunDS2Pw/viewform?embedded=true',
+  createdAt: new Date('2020-01-01T00:00:00.000Z').toISOString(),
+  isHidden: false,
+}
diff --git a/packages/nc-gui-v2/lib/types.ts b/packages/nc-gui-v2/lib/types.ts
index a702fbd9f7..0691490864 100644
--- a/packages/nc-gui-v2/lib/types.ts
+++ b/packages/nc-gui-v2/lib/types.ts
@@ -9,11 +9,19 @@ export interface User {
   roles: Roles
 }
 
+export interface FeedbackForm {
+  url: string
+  createdAt: string
+  isHidden: boolean
+  lastFormPollDate?: string
+}
+
 export interface StoredState {
   token: string | null
   user: User | null
   lang: string
   darkMode: boolean
+  feedbackForm: FeedbackForm
 }
 
 export interface State extends StoredState {
diff --git a/packages/nc-gui-v2/plugins/api.ts b/packages/nc-gui-v2/plugins/api.ts
index be280baadd..57ef2e368f 100644
--- a/packages/nc-gui-v2/plugins/api.ts
+++ b/packages/nc-gui-v2/plugins/api.ts
@@ -21,7 +21,7 @@ function addAxiosInterceptors(api: Api<any>, app: { $state: GlobalState }) {
   api.instance.interceptors.request.use((config) => {
     config.headers['xc-gui'] = 'true'
 
-    if (app.$state.token.value) config.headers['xc-auth'] = app.$state.token.value
+    if (app.$state?.token.value) config.headers['xc-auth'] = app.$state.token.value
 
     if (!config.url?.endsWith('/user/me') && !config.url?.endsWith('/admin/roles')) {
       // config.headers['xc-preview'] = store.state.users.previewAs
diff --git a/packages/nc-gui-v2/plugins/init.ts b/packages/nc-gui-v2/plugins/init.ts
new file mode 100644
index 0000000000..c1d90253c6
--- /dev/null
+++ b/packages/nc-gui-v2/plugins/init.ts
@@ -0,0 +1,46 @@
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+import { defineNuxtPlugin } from '#app'
+
+dayjs.extend(duration)
+
+const handleFeedbackForm = async () => {
+  let { feedbackForm: currentFeedbackForm } = $(useGlobalState())
+  if (!currentFeedbackForm) return
+
+  const { $api } = useNuxtApp()
+
+  const fetchFeedbackForm = async (now: Dayjs) => {
+    try {
+      const { data: feedbackForm } = await $api.instance.get('/api/v1/feedback_form')
+      const isFetchedFormDuplicate = currentFeedbackForm.url === feedbackForm.url
+
+      currentFeedbackForm = {
+        url: feedbackForm.url,
+        lastFormPollDate: now.toISOString(),
+        createdAt: feedbackForm.created_at,
+        isHidden: isFetchedFormDuplicate ? currentFeedbackForm.isHidden : false,
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  const isFirstTimePolling = !currentFeedbackForm.lastFormPollDate
+
+  const now = dayjs()
+  const lastFormPolledDate = dayjs(currentFeedbackForm.lastFormPollDate)
+
+  if (isFirstTimePolling || dayjs.duration(now.diff(lastFormPolledDate)).days() > 0) {
+    await fetchFeedbackForm(now)
+  }
+}
+
+const handleInitFunctions = async () => {
+  await handleFeedbackForm()
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(handleInitFunctions)
+})

From 663d2ef1dea362f3c122ee07071ea909bef73c7a Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 16:33:56 +0530
Subject: [PATCH 09/26] 
 refactor/gui-v2-user-management-invite-added-feedback-form

---
 .../dashboard/settings/UserManagement.vue     |  2 ++
 .../settings/userManagement/FeedbackForm.vue  | 31 +++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/dashboard/settings/userManagement/FeedbackForm.vue

diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
index 12e89319d3..063a24c1a8 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
@@ -17,6 +17,7 @@ import MdiEmailSendIcon from '~icons/mdi/email-arrow-right-outline'
 import RolesIcon from '~icons/mdi/drama-masks'
 import { User } from '~~/lib/types'
 import { useToast } from 'vue-toastification'
+import FeedbackForm from './userManagement/FeedbackForm.vue'
 const toast = useToast()
 
 const { $api, $e } = useNuxtApp()
@@ -277,6 +278,7 @@ watch(
         show-less-items
         @change="loadUsers"
       />
+      <FeedbackForm />
     </div>
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/FeedbackForm.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/FeedbackForm.vue
new file mode 100644
index 0000000000..4fe2499175
--- /dev/null
+++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/FeedbackForm.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import CloseIcon from '~icons/material-symbols/close-rounded'
+
+const { feedbackForm } = $(useGlobalState())
+</script>
+
+<template>
+  <div v-if="feedbackForm && !feedbackForm.isHidden" class="nc-feedback-form-wrapper mt-6">
+    <CloseIcon class="nc-close-icon" @click="feedbackForm.isHidden = true" />
+
+    <iframe :src="feedbackForm.url" width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading… </iframe>
+  </div>
+  <div v-else />
+</template>
+
+<style scoped lang="scss">
+.nc-feedback-form-wrapper {
+  width: 100%;
+  position: relative;
+
+  iframe {
+    margin: 0 auto;
+  }
+
+  .nc-close-icon {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+  }
+}
+</style>

From 0e179b2b93d4976087231bccf38af353b7c3f313 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 16:37:00 +0530
Subject: [PATCH 10/26] 
 refactor/gui-v2-user-management-invite-corrected-folder-name

---
 .../settings/{userManagement => user-management}/FeedbackForm.vue | 0
 .../settings/{userManagement => user-management}/ShareBase.vue    | 0
 .../settings/{userManagement => user-management}/UsersModal.vue   | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/nc-gui-v2/components/dashboard/settings/{userManagement => user-management}/FeedbackForm.vue (100%)
 rename packages/nc-gui-v2/components/dashboard/settings/{userManagement => user-management}/ShareBase.vue (100%)
 rename packages/nc-gui-v2/components/dashboard/settings/{userManagement => user-management}/UsersModal.vue (100%)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/FeedbackForm.vue b/packages/nc-gui-v2/components/dashboard/settings/user-management/FeedbackForm.vue
similarity index 100%
rename from packages/nc-gui-v2/components/dashboard/settings/userManagement/FeedbackForm.vue
rename to packages/nc-gui-v2/components/dashboard/settings/user-management/FeedbackForm.vue
diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue b/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
similarity index 100%
rename from packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
rename to packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue b/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
similarity index 100%
rename from packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
rename to packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue

From 1606b7478031ed9a14777d713f14f2dcc6fecab2 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 16:44:30 +0530
Subject: [PATCH 11/26] 
 refactor/gui-v2-user-management-add-todo-for-improving-typing-of-the-api

---
 .../nc-gui-v2/components/dashboard/settings/UserManagement.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
index 063a24c1a8..5d7cd0e885 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
@@ -38,6 +38,7 @@ const loadUsers = async (page = currentPage, limit = currentLimit) => {
   try {
     if (!project.value?.id) return
 
+    // TODO: Types of api is not correct
     const response = await $api.auth.projectUserList(project.value?.id, <any> {
       query: {
         limit,

From fd7900449e8d3dc3402b51b4ca99a7eb719d39d1 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 16:46:16 +0530
Subject: [PATCH 12/26] 
 fix/gui-v2-user-management-add-todo-for-fixed-import-error

---
 .../components/dashboard/settings/UserManagement.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
index 5d7cd0e885..e2ed0dad3d 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
@@ -2,7 +2,7 @@
 import { useDebounce } from '@vueuse/core'
 import KebabIcon from '~icons/ic/baseline-more-vert'
 import { extractSdkResponseErrorMsg } from '~~/utils/errorUtils'
-import UsersModal from './userManagement/UsersModal.vue'
+import UsersModal from './user-management/UsersModal.vue'
 import { projectRoleTagColors } from '~/utils/userUtils'
 import MidAccountIcon from '~icons/mdi/account-outline'
 import ReloadIcon from "~icons/mdi/reload"
@@ -17,7 +17,7 @@ import MdiEmailSendIcon from '~icons/mdi/email-arrow-right-outline'
 import RolesIcon from '~icons/mdi/drama-masks'
 import { User } from '~~/lib/types'
 import { useToast } from 'vue-toastification'
-import FeedbackForm from './userManagement/FeedbackForm.vue'
+import FeedbackForm from './user-management/FeedbackForm.vue'
 const toast = useToast()
 
 const { $api, $e } = useNuxtApp()

From 215f94937c89598916ef80c8e657dbbf8bb48176 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 17:07:50 +0530
Subject: [PATCH 13/26] 
 fix/gui-v2-user-management-add-todo-for-edit-and-delete-action-closes-the-modal-and-sync-with-user-list

---
 .../components/dashboard/settings/UserManagement.vue   |  3 ++-
 .../dashboard/settings/user-management/UsersModal.vue  | 10 ++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
index e2ed0dad3d..0281022296 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
@@ -78,6 +78,7 @@ const deleteUser = async () => {
     await $api.auth.projectUserRemove(project.value.id, selectedUser.id);
     toast.success('Successfully deleted user from project');
     await loadUsers();
+    showUserDeleteModal = false;
   } catch (e: any) {
     console.error(e)
     toast.error(await extractSdkResponseErrorMsg(e))
@@ -140,7 +141,7 @@ watch(
 
 <template>
   <div class="flex flex-col w-full px-6">
-    <UsersModal :key="showUserModal" :show="showUserModal" :selected-user="selectedUser" @closed="showUserModal = false" />
+    <UsersModal :key="showUserModal" :show="showUserModal" :selected-user="selectedUser" @closed="showUserModal = false" @reload="loadUsers()"/>
       <a-modal v-model:visible="showUserDeleteModal" :closable="false" width="28rem" centered :footer="null">
     <div class="flex flex-col h-full">
       <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
diff --git a/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue b/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
index 85a83c5c3e..4044bfbd7e 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
@@ -25,7 +25,7 @@ interface Users {
 }
 
 const { show, selectedUser } = defineProps<Props>()
-const emits = defineEmits(['closed'])
+const emit = defineEmits(['closed', 'reload'])
 const toast = useToast()
 
 const { project } = useProject()
@@ -75,11 +75,13 @@ const saveUser = async () => {
   try {
     if (selectedUser?.id) {
       await $api.auth.projectUserUpdate(project.value.id, selectedUser.id, {
-        roles: selectedUser.roles,
+        roles: usersData.role,
         email: selectedUser.email,
         project_id: project.value.id,
         projectName: project.value.title,
       })
+      emit('reload')
+      emit('closed')
     } else {
       const res = await $api.auth.projectUserAdd(project.value.id, {
         roles: usersData.role,
@@ -120,11 +122,11 @@ const clickInviteMore = () => {
 </script>
 
 <template>
-  <a-modal :footer="null" centered :visible="show" :closable="false" width="max(50vw, 44rem)" @cancel="emits('closed')">
+  <a-modal :footer="null" centered :visible="show" :closable="false" width="max(50vw, 44rem)" @cancel="emit('closed')">
     <div class="flex flex-col">
       <div class="flex flex-row justify-between items-center pb-1.5 mb-2 border-b-1 w-full">
         <a-typography-title class="select-none" :level="4"> Share: {{ project.title }} </a-typography-title>
-        <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="emits('closed')">
+        <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="emit('closed')">
           <template #icon>
             <CloseIcon class="flex mx-auto" />
           </template>

From fc2e216491ec3bf02d367c5676f775bc97398e88 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 23:51:18 +0530
Subject: [PATCH 14/26] fix/gui-v2-user-management-added-api-token-management

---
 .../dashboard/settings/ApiTokenManagement.vue | 201 ++++++++++++++++++
 .../dashboard/settings/SettingsModal.vue      |   3 +-
 .../dashboard/settings/UserManagement.vue     |  20 +-
 3 files changed, 213 insertions(+), 11 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue

diff --git a/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
new file mode 100644
index 0000000000..7f6354a641
--- /dev/null
+++ b/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import type { ApiTokenType } from '~~/../nocodb-sdk/build/main'
+import { useToast } from 'vue-toastification'
+import KebabIcon from '~icons/ic/baseline-more-vert'
+import MdiPlusIcon from '~icons/mdi/plus'
+import CloseIcon from '~icons/material-symbols/close-rounded'
+import ReloadIcon from '~icons/mdi/reload'
+import VisibilityOpenIcon from '~icons/material-symbols/visibility'
+import VisibilityCloseIcon from '~icons/material-symbols/visibility-off'
+import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
+import MdiContentCopyIcon from '~icons/mdi/content-copy'
+import { extractSdkResponseErrorMsg } from '~~/utils/errorUtils'
+import { copyTextToClipboard } from '~/utils/miscUtils'
+
+const toast = useToast()
+
+interface ApiToken extends ApiTokenType {
+  show?: boolean
+}
+
+const { $api, $e } = useNuxtApp()
+const { project } = $(useProject())
+
+let tokensInfo = $ref<ApiToken[] | undefined>([])
+let showNewTokenModal = $ref(false)
+let showDeleteTokenModal = $ref(false)
+let selectedTokenData = $ref<ApiToken>({})
+
+const loadApiTokens = async () => {
+  if (!project?.id) return
+
+  tokensInfo = await $api.apiToken.list(project.id)
+}
+
+const openNewTokenModal = () => {
+  showNewTokenModal = true
+  $e('c:api-token:generate')
+}
+
+const copyToken = (token: string | undefined) => {
+  if (!token) return
+
+  copyTextToClipboard(token)
+  toast.info('Copied to clipboard')
+
+  $e('c:api-token:copy')
+}
+
+const generateToken = async () => {
+  try {
+    if (!project?.id) return
+
+    await $api.apiToken.create(project.id, selectedTokenData)
+    showNewTokenModal = false
+    toast.success('Token generated successfully')
+    selectedTokenData = {}
+    await loadApiTokens()
+  } catch (e: any) {
+    console.error(e)
+    toast.error(await extractSdkResponseErrorMsg(e))
+  }
+
+  $e('a:api-token:generate')
+}
+
+const deleteToken = async () => {
+  try {
+    if (!project?.id || !selectedTokenData.token) return
+
+    await $api.apiToken.delete(project.id, selectedTokenData.token)
+
+    toast.success('Token deleted successfully')
+    await loadApiTokens()
+    showDeleteTokenModal = false
+  } catch (e: any) {
+    console.error(e)
+    toast.error(await extractSdkResponseErrorMsg(e))
+  }
+
+  $e('a:api-token:delete')
+}
+
+const openDeleteModal = (item: ApiToken) => {
+  selectedTokenData = item
+  showDeleteTokenModal = true
+}
+
+onMounted(() => {
+  loadApiTokens()
+})
+</script>
+
+<template>
+  <a-modal v-model:visible="showNewTokenModal" :closable="false" width="28rem" centered :footer="null">
+    <div class="relative flex flex-col h-full">
+      <a-button type="text" class="!absolute top-0 right-0 rounded-md -mt-2 -mr-3" @click="showNewTokenModal = false">
+        <template #icon>
+          <CloseIcon class="flex mx-auto" />
+        </template>
+      </a-button>
+      <div class="flex flex-row justify-center w-full -mt-1">
+        <a-typography-title :level="5">Generate Token</a-typography-title>
+      </div>
+      <div class="flex flex-col mt-3 justify-center space-y-6">
+        <a-input v-model:value="selectedTokenData.description" placeholder="Description" />
+        <div class="flex flex-row justify-center">
+          <a-button type="primary" @click="generateToken"> Generate </a-button>
+        </div>
+      </div>
+    </div>
+  </a-modal>
+  <a-modal v-model:visible="showDeleteTokenModal" :closable="false" width="28rem" centered :footer="null">
+    <div class="flex flex-col h-full">
+      <div class="flex flex-row justify-center mt-2 text-center w-full text-base">This action will remove this API Token</div>
+      <div class="flex mt-6 justify-center space-x-2">
+        <a-button @click="showDeleteTokenModal = false"> Cancel </a-button>
+        <a-button type="primary" danger @click="deleteToken()"> Confirm </a-button>
+      </div>
+    </div>
+  </a-modal>
+  <div class="flex flex-col px-10 mt-6">
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row space-x-1">
+        <a-button size="middle" type="text" @click="loadApiTokens()">
+          <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
+            <ReloadIcon class="text-gray-500" />
+            <div class="text-gray-500">Reload</div>
+          </div>
+        </a-button>
+        <a-button size="middle" @click="openNewTokenModal">
+          <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
+            <MdiPlusIcon />
+            <div>Add New Token</div>
+          </div>
+        </a-button>
+      </div>
+    </div>
+    <div v-if="tokensInfo" class="w-full flex flex-col mt-2 px-1">
+      <div class="flex flex-row border-b-1 text-gray-600 text-xs pb-2 pt-2">
+        <div class="flex w-4/10 pl-2">Description</div>
+        <div class="flex w-4/10 justify-center">Token</div>
+        <div class="flex w-2/10 justify-end pr-2">Actions</div>
+      </div>
+      <div v-for="(item, index) in tokensInfo" :key="index" class="flex flex-col">
+        <div class="flex flex-row border-b-1 items-center px-2 py-2">
+          <div class="flex flex-row w-4/10 flex-wrap overflow-ellipsis">
+            {{ item.description }}
+          </div>
+          <div class="flex w-4/10 justify-center flex-wrap overflow-ellipsis">
+            <span v-if="item.show">{{ item.token }}</span>
+            <span v-else>****************************************</span>
+          </div>
+          <div class="flex flex-row w-2/10 justify-end">
+            <a-tooltip placement="bottom">
+              <template #title>
+                <span v-if="item.show">Hide API token </span>
+                <span v-else>Show API token </span>
+              </template>
+              <a-button type="text" class="!rounded-md" @click="item.show = !item.show">
+                <template #icon>
+                  <VisibilityCloseIcon v-if="item.show" height="1.1rem" class="flex mx-auto" />
+                  <VisibilityOpenIcon v-else height="1rem" class="flex mx-auto" />
+                </template>
+              </a-button>
+            </a-tooltip>
+            <a-tooltip placement="bottom">
+              <template #title> Copy token to clipboard </template>
+              <a-button type="text" class="!rounded-md" @click="item.show = !item.show">
+                <template #icon>
+                  <MdiContentCopyIcon height="1rem" class="flex mx-auto" />
+                </template>
+              </a-button>
+            </a-tooltip>
+
+            <a-dropdown :trigger="['click']" class="flex">
+              <div class="flex flex-row items-center">
+                <a-button type="text" class="!px-0">
+                  <div class="flex flex-row items-center">
+                    <KebabIcon height="1.2rem" />
+                  </div>
+                </a-button>
+              </div>
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item>
+                    <a-button type="text" @click="openDeleteModal(item)">
+                      <div class="flex flex-row items-center">
+                        <MdiDeleteOutlineIcon height="1rem" class="flex" />
+                        <div class="text-xs pl-2">Remove API Token</div>
+                      </div>
+                    </a-button>
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
index 207152df00..2f6f7ec7ff 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
@@ -5,6 +5,7 @@ import AppStore from './AppStore.vue'
 import Metadata from './Metadata.vue'
 import UIAcl from './UIAcl.vue'
 import UserManagement from './UserManagement.vue'
+import ApiTokenManagement from './ApiTokenManagement.vue'
 import StoreFrontOutline from '~icons/mdi/storefront-outline'
 import TeamFillIcon from '~icons/ri/team-fill'
 import MultipleTableIcon from '~icons/mdi/table-multiple'
@@ -44,7 +45,7 @@ const tabsInfo: TabGroup = {
       },
       apiTokenManagement: {
         title: 'API Token Management',
-        body: () => AuditTab,
+        body: () => ApiTokenManagement,
       },
     },
   },
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
index 0281022296..d4ebb2e45a 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
@@ -142,17 +142,17 @@ watch(
 <template>
   <div class="flex flex-col w-full px-6">
     <UsersModal :key="showUserModal" :show="showUserModal" :selected-user="selectedUser" @closed="showUserModal = false" @reload="loadUsers()"/>
-      <a-modal v-model:visible="showUserDeleteModal" :closable="false" width="28rem" centered :footer="null">
-    <div class="flex flex-col h-full">
-      <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
-        This action will remove this user from this project
-      </div>
-      <div class="flex mt-6 justify-center space-x-2">
-        <a-button @click="showUserDeleteModal = false"> Cancel </a-button>
-        <a-button type="primary" danger @click="deleteUser"> Confirm </a-button>
+    <a-modal v-model:visible="showUserDeleteModal" :closable="false" width="28rem" centered :footer="null">
+      <div class="flex flex-col h-full">
+        <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
+          This action will remove this user from this project
+        </div>
+        <div class="flex mt-6 justify-center space-x-2">
+          <a-button @click="showUserDeleteModal = false"> Cancel </a-button>
+          <a-button type="primary" danger @click="deleteUser"> Confirm </a-button>
+        </div>
       </div>
-    </div>
-  </a-modal>
+    </a-modal>
     <div class="flex flex-row mb-4 mx-4 justify-between">
       <div class="flex w-1/3" >
         <a-input  v-model:value="searchText" placeholder="Filter by email" >

From 49ed8c949bfa144765c4fe01c6c022058ef3188a Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 23:51:32 +0530
Subject: [PATCH 15/26] refactor/gui-v2-user-management-invite-ui-improvements

---
 .../dashboard/settings/ApiTokenManagement.vue | 12 +++----
 .../dashboard/settings/UserManagement.vue     | 35 ++++++++++---------
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
index 7f6354a641..ff79641891 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
@@ -172,7 +172,7 @@ onMounted(() => {
               </a-button>
             </a-tooltip>
 
-            <a-dropdown :trigger="['click']" class="flex">
+            <a-dropdown :trigger="['click']" class="flex" placement="bottomRight">
               <div class="flex flex-row items-center">
                 <a-button type="text" class="!px-0">
                   <div class="flex flex-row items-center">
@@ -183,12 +183,10 @@ onMounted(() => {
               <template #overlay>
                 <a-menu>
                   <a-menu-item>
-                    <a-button type="text" @click="openDeleteModal(item)">
-                      <div class="flex flex-row items-center">
-                        <MdiDeleteOutlineIcon height="1rem" class="flex" />
-                        <div class="text-xs pl-2">Remove API Token</div>
-                      </div>
-                    </a-button>
+                    <div class="flex flex-row items-center py-1" @click="openDeleteModal(item)">
+                      <MdiDeleteOutlineIcon height="1rem" class="flex" />
+                      <div class="text-xs pl-2">Remove API Token</div>
+                    </div>
                   </a-menu-item>
                 </a-menu>
               </template>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
index d4ebb2e45a..a225ba9241 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
@@ -27,6 +27,7 @@ let users = $ref<null | User[]>(null)
 let selectedUser = $ref<null | User>(null)
 let showUserModal = $ref(false)
 let showUserDeleteModal = $ref(false)
+let isLoading = $ref(false)
 
 let totalRows = $ref(0)
 const currentPage = $ref(1)
@@ -37,6 +38,7 @@ const debouncedSearchText = useDebounce(searchText, 300)
 const loadUsers = async (page = currentPage, limit = currentLimit) => {
   try {
     if (!project.value?.id) return
+    isLoading = true
 
     // TODO: Types of api is not correct
     const response = await $api.auth.projectUserList(project.value?.id, <any> {
@@ -53,6 +55,8 @@ const loadUsers = async (page = currentPage, limit = currentLimit) => {
   } catch (e: any) {
     console.error(e)
     toast.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    isLoading = false
   }
 }
 
@@ -140,7 +144,10 @@ watch(
 </script>
 
 <template>
-  <div class="flex flex-col w-full px-6">
+  <div v-if="isLoading" class="h-full w-full flex flex-row justify-center mt-42">
+      <a-spin size="large"/>
+  </div>
+  <div v-else class="flex flex-col w-full px-6">
     <UsersModal :key="showUserModal" :show="showUserModal" :selected-user="selectedUser" @closed="showUserModal = false" @reload="loadUsers()"/>
     <a-modal v-model:visible="showUserDeleteModal" :closable="false" width="28rem" centered :footer="null">
       <div class="flex flex-col h-full">
@@ -236,7 +243,7 @@ watch(
             </a-button>
           </a-tooltip>
 
-          <a-dropdown :trigger="['click']" class="flex">
+          <a-dropdown :trigger="['click']" class="flex" placement="bottomRight">
             <div class="flex flex-row items-center">
               <a-button type="text" class="!px-0">
                 <div class="flex flex-row items-center ">
@@ -247,24 +254,20 @@ watch(
             <template #overlay>
               <a-menu>
                 <a-menu-item>
-                  <a-button type="text" @click="resendInvite(user)">
-                    <div class="flex flex-row items-center">
-                      <MdiEmailSendIcon height="1rem" class="flex" />
-                      <div class="text-xs pl-2">
-                        Resend invite email
-                      </div>
+                  <div class="flex flex-row items-center py-1" @click="resendInvite(user)">
+                    <MdiEmailSendIcon height="1rem" class="flex" />
+                    <div class="text-xs pl-2">
+                      Resend invite email
                     </div>
-                  </a-button>
+                  </div>
                 </a-menu-item>
                 <a-menu-item>
-                  <a-button class="w-full" type="text" @click="copyInviteUrl(user)">
-                    <div class="flex flex-row items-center">
-                      <MdiContentCopyIcon height="1rem" class="flex" />
-                      <div class="text-xs pl-2">
-                        Copy invite URL
-                      </div>
+                  <div class="flex flex-row items-center py-1" @click="copyInviteUrl(user)">
+                    <MdiContentCopyIcon height="1rem" class="flex" />
+                    <div class="text-xs pl-2">
+                      Copy invite URL
                     </div>
-                  </a-button>
+                  </div>
                 </a-menu-item>
               </a-menu>
             </template>

From b570f25209cd7c7e61fdbe3d8489741054fa4e12 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 28 Jul 2022 23:56:42 +0530
Subject: [PATCH 16/26] refactor/gui-v2-user-management-invite-ui-improvements

---
 .../components/dashboard/settings/UserManagement.vue   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
index a225ba9241..9d006321ba 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
@@ -38,7 +38,6 @@ const debouncedSearchText = useDebounce(searchText, 300)
 const loadUsers = async (page = currentPage, limit = currentLimit) => {
   try {
     if (!project.value?.id) return
-    isLoading = true
 
     // TODO: Types of api is not correct
     const response = await $api.auth.projectUserList(project.value?.id, <any> {
@@ -55,8 +54,6 @@ const loadUsers = async (page = currentPage, limit = currentLimit) => {
   } catch (e: any) {
     console.error(e)
     toast.error(await extractSdkResponseErrorMsg(e))
-  } finally {
-    isLoading = false
   }
 }
 
@@ -132,7 +129,12 @@ const copyInviteUrl = (user: User) => {
 
 onMounted(async () => {
   if (!users) {
-    await loadUsers()
+    isLoading = true
+    try {
+      await loadUsers()
+    } finally {
+      isLoading = false
+    }
   }
 })
 

From 0a34af479bf6184550409774445c6f875a03a986 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 29 Jul 2022 10:35:47 +0530
Subject: [PATCH 17/26] 
 chore/gui-v2-user-management-fixed-import-and-improved-debounce-implementation

---
 .../dashboard/settings/ApiTokenManagement.vue |  4 ++--
 .../dashboard/settings/UserManagement.vue     | 12 +++++-----
 .../settings/user-management/ShareBase.vue    |  2 +-
 .../settings/user-management/UsersModal.vue   | 22 ++++++++++++++-----
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
index ff79641891..0cfa2d4ebd 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ApiTokenType } from '~~/../nocodb-sdk/build/main'
+import type { ApiTokenType } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
 import KebabIcon from '~icons/ic/baseline-more-vert'
 import MdiPlusIcon from '~icons/mdi/plus'
@@ -9,7 +9,7 @@ import VisibilityOpenIcon from '~icons/material-symbols/visibility'
 import VisibilityCloseIcon from '~icons/material-symbols/visibility-off'
 import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
 import MdiContentCopyIcon from '~icons/mdi/content-copy'
-import { extractSdkResponseErrorMsg } from '~~/utils/errorUtils'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { copyTextToClipboard } from '~/utils/miscUtils'
 
 const toast = useToast()
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
index 9d006321ba..030cc09363 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { useDebounce } from '@vueuse/core'
 import KebabIcon from '~icons/ic/baseline-more-vert'
-import { extractSdkResponseErrorMsg } from '~~/utils/errorUtils'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import UsersModal from './user-management/UsersModal.vue'
 import { projectRoleTagColors } from '~/utils/userUtils'
 import MidAccountIcon from '~icons/mdi/account-outline'
@@ -15,7 +14,8 @@ import MdiPlusIcon from '~icons/mdi/plus'
 import MdiContentCopyIcon from '~icons/mdi/content-copy'
 import MdiEmailSendIcon from '~icons/mdi/email-arrow-right-outline'
 import RolesIcon from '~icons/mdi/drama-masks'
-import { User } from '~~/lib/types'
+import { User } from '~/lib/types'
+import { watchDebounced } from '@vueuse/core'
 import { useToast } from 'vue-toastification'
 import FeedbackForm from './user-management/FeedbackForm.vue'
 const toast = useToast()
@@ -33,7 +33,6 @@ let totalRows = $ref(0)
 const currentPage = $ref(1)
 const currentLimit = $ref(10)
 const searchText = ref<string>('')
-const debouncedSearchText = useDebounce(searchText, 300)
 
 const loadUsers = async (page = currentPage, limit = currentLimit) => {
   try {
@@ -138,9 +137,10 @@ onMounted(async () => {
   }
 })
 
-watch(
-  () => debouncedSearchText.value,
+watchDebounced(
+  searchText,
   () => loadUsers(),
+  { debounce: 300, maxWait: 600 },
 )
 
 </script>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue b/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
index 573e5d2df5..a2574b04a1 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
@@ -2,7 +2,7 @@
 import { useToast } from 'vue-toastification'
 import OpenInNewIcon from '~icons/mdi/open-in-new'
 import { dashboardUrl } from '~/utils/urlUtils'
-import { extractSdkResponseErrorMsg } from '~~/utils/errorUtils'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MdiReload from '~icons/mdi/reload'
 import DownIcon from '~icons/ic/round-keyboard-arrow-down'
 import ContentCopyIcon from '~icons/mdi/content-copy'
diff --git a/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue b/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
index 4044bfbd7e..d950c01c80 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
@@ -6,12 +6,12 @@ import SendIcon from '~icons/material-symbols/send-outline'
 import CloseIcon from '~icons/material-symbols/close-rounded'
 import MidAccountIcon from '~icons/mdi/account-outline'
 import ContentCopyIcon from '~icons/mdi/content-copy'
-import type { User } from '~~/lib/types'
+import type { User } from '~/lib/types'
 import { ProjectRole } from '~/lib/enums'
 import { projectRoleTagColors } from '~/utils/userUtils'
 import { copyTextToClipboard } from '~/utils/miscUtils'
-import { extractSdkResponseErrorMsg } from '~~/utils/errorUtils'
-import { isEmail } from '~~/utils/validation'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { isEmail } from '~/utils/validation'
 
 interface Props {
   show: boolean
@@ -175,16 +175,28 @@ const clickInviteMore = () => {
             <div class="text-xs ml-0.5 mt-0.5">{{ selectedUser ? 'Edit User' : 'Invite Team' }}</div>
           </div>
           <div class="border-1 py-3 px-4 rounded-md mt-1">
-            <a-form ref="formRef" :model="usersData" @finish="saveUser">
+            <a-form
+              ref="formRef"
+              :validate-on-rule-change="false"
+              :model="usersData"
+              validate-trigger="onBlur"
+              @finish="saveUser"
+            >
               <div class="flex flex-row space-x-4">
                 <div class="flex flex-col w-3/4">
                   <a-form-item
                     v-bind="validateInfos.emails"
+                    validate-trigger="onBlur"
                     name="emails"
                     :rules="[{ required: true, message: 'Please input email' }]"
                   >
                     <div class="ml-1 mb-1 text-xs text-gray-500">Email:</div>
-                    <a-input v-model:value="usersData.emails" placeholder="Email" :disabled="!!selectedUser" />
+                    <a-input
+                      v-model:value="usersData.emails"
+                      validate-trigger="onBlur"
+                      placeholder="Email"
+                      :disabled="!!selectedUser"
+                    />
                   </a-form-item>
                 </div>
                 <div class="flex flex-col w-1/4">

From 5a1ab2ebbef66dd1b013dd972b852a1fbdeb53ad Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 29 Jul 2022 11:04:53 +0530
Subject: [PATCH 18/26] 
 chore/gui-v2-user-management-removed-copyTextToClipboard-miscUtils

---
 .../dashboard/settings/ApiTokenManagement.vue |  7 ++-
 .../dashboard/settings/UserManagement.vue     |  5 +-
 .../settings/user-management/ShareBase.vue    |  7 ++-
 .../settings/user-management/UsersModal.vue   |  5 +-
 packages/nc-gui-v2/utils/miscUtils.ts         | 56 -------------------
 5 files changed, 14 insertions(+), 66 deletions(-)
 delete mode 100644 packages/nc-gui-v2/utils/miscUtils.ts

diff --git a/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
index 0cfa2d4ebd..18e2c14732 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ApiTokenType } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
+import { useClipboard } from '@vueuse/core'
 import KebabIcon from '~icons/ic/baseline-more-vert'
 import MdiPlusIcon from '~icons/mdi/plus'
 import CloseIcon from '~icons/material-symbols/close-rounded'
@@ -10,7 +11,6 @@ import VisibilityCloseIcon from '~icons/material-symbols/visibility-off'
 import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
 import MdiContentCopyIcon from '~icons/mdi/content-copy'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { copyTextToClipboard } from '~/utils/miscUtils'
 
 const toast = useToast()
 
@@ -20,6 +20,7 @@ interface ApiToken extends ApiTokenType {
 
 const { $api, $e } = useNuxtApp()
 const { project } = $(useProject())
+const { copy } = useClipboard()
 
 let tokensInfo = $ref<ApiToken[] | undefined>([])
 let showNewTokenModal = $ref(false)
@@ -40,7 +41,7 @@ const openNewTokenModal = () => {
 const copyToken = (token: string | undefined) => {
   if (!token) return
 
-  copyTextToClipboard(token)
+  copy(token)
   toast.info('Copied to clipboard')
 
   $e('c:api-token:copy')
@@ -165,7 +166,7 @@ onMounted(() => {
             </a-tooltip>
             <a-tooltip placement="bottom">
               <template #title> Copy token to clipboard </template>
-              <a-button type="text" class="!rounded-md" @click="item.show = !item.show">
+              <a-button type="text" class="!rounded-md" @click="copyToken(item.token)">
                 <template #icon>
                   <MdiContentCopyIcon height="1rem" class="flex mx-auto" />
                 </template>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
index 030cc09363..cfb48b8c68 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
@@ -7,7 +7,7 @@ import MidAccountIcon from '~icons/mdi/account-outline'
 import ReloadIcon from "~icons/mdi/reload"
 import MdiEditIcon from '~icons/ic/round-edit'
 import SearchIcon from '~icons/ic/round-search'
-import { copyTextToClipboard } from '~/utils/miscUtils'
+import { useClipboard } from '@vueuse/core'
 import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
 import EmailIcon from '~icons/eva/email-outline'
 import MdiPlusIcon from '~icons/mdi/plus'
@@ -22,6 +22,7 @@ const toast = useToast()
 
 const { $api, $e } = useNuxtApp()
 const { project } = useProject()
+const { copy } = useClipboard()
 
 let users = $ref<null | User[]>(null)
 let selectedUser = $ref<null | User>(null)
@@ -122,7 +123,7 @@ const copyInviteUrl = (user: User) => {
 
   const getInviteUrl = (token: string) => `${location.origin}${location.pathname}#/user/authentication/signup/${token}`;
 
-  copyTextToClipboard(getInviteUrl(user.invite_token) );
+  copy(getInviteUrl(user.invite_token) );
   toast.success('Invite url copied to clipboard');
 }
 
diff --git a/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue b/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
index a2574b04a1..a857907fa0 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
+import { useClipboard } from '@vueuse/core'
 import OpenInNewIcon from '~icons/mdi/open-in-new'
 import { dashboardUrl } from '~/utils/urlUtils'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -7,7 +8,6 @@ import MdiReload from '~icons/mdi/reload'
 import DownIcon from '~icons/ic/round-keyboard-arrow-down'
 import ContentCopyIcon from '~icons/mdi/content-copy'
 import MdiXmlIcon from '~icons/mdi/xml'
-import { copyTextToClipboard } from '~/utils/miscUtils'
 const toast = useToast()
 
 interface ShareBase {
@@ -25,6 +25,7 @@ const { $api, $e } = useNuxtApp()
 let base = $ref<null | ShareBase>(null)
 const showEditBaseDropdown = $ref(false)
 const { project } = useProject()
+const { copy } = useClipboard()
 
 const url = $computed(() => (base && base.uuid ? `${dashboardUrl()}#/nc/base/${base.uuid}` : null))
 
@@ -95,7 +96,7 @@ const recreate = async () => {
 const copyUrl = async () => {
   if (!url) return
 
-  copyTextToClipboard(url)
+  copy(url)
   toast.success('Copied shareable base url to clipboard!')
 
   $e('c:shared-base:copy-url')
@@ -112,7 +113,7 @@ const navigateToSharedBase = () => {
 const generateEmbeddableIframe = () => {
   if (!url) return
 
-  copyTextToClipboard(`<iframe
+  copy(`<iframe
 class="nc-embed"
 src="${url}?embed"
 frameborder="0"
diff --git a/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue b/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
index d950c01c80..b2d679e703 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
 import { Form } from 'ant-design-vue'
+import { useClipboard } from '@vueuse/core'
 import ShareBase from './ShareBase.vue'
 import SendIcon from '~icons/material-symbols/send-outline'
 import CloseIcon from '~icons/material-symbols/close-rounded'
@@ -9,7 +10,6 @@ import ContentCopyIcon from '~icons/mdi/content-copy'
 import type { User } from '~/lib/types'
 import { ProjectRole } from '~/lib/enums'
 import { projectRoleTagColors } from '~/utils/userUtils'
-import { copyTextToClipboard } from '~/utils/miscUtils'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { isEmail } from '~/utils/validation'
 
@@ -30,6 +30,7 @@ const toast = useToast()
 
 const { project } = useProject()
 const { $api, $e } = useNuxtApp()
+const { copy } = useClipboard()
 
 const usersData = $ref<Users>({ emails: undefined, role: ProjectRole.Guest, invitationToken: undefined })
 const formRef = ref()
@@ -107,7 +108,7 @@ const inviteUrl = $computed(() =>
 const copyUrl = async () => {
   if (!inviteUrl) return
 
-  copyTextToClipboard(inviteUrl)
+  copy(inviteUrl)
   toast.success('Copied shareable base url to clipboard!')
 
   $e('c:shared-base:copy-url')
diff --git a/packages/nc-gui-v2/utils/miscUtils.ts b/packages/nc-gui-v2/utils/miscUtils.ts
deleted file mode 100644
index 6506fd9df7..0000000000
--- a/packages/nc-gui-v2/utils/miscUtils.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-export const copyTextToClipboard = (text: string) => {
-  const textArea = document.createElement('textarea')
-
-  //
-  // *** This styling is an extra step which is likely not required. ***
-  //
-  // Why is it here? To ensure:
-  // 1. the element is able to have focus and selection.
-  // 2. if element was to flash render it has minimal visual impact.
-  // 3. less flakyness with selection and copying which **might** occur if
-  //    the textarea element is not visible.
-  //
-  // The likelihood is the element won't even render, not even a
-  // flash, so some of these are just precautions. However in
-  // Internet Explorer the element is visible whilst the popup
-  // box asking the user for permission for the web page to
-  // copy to the clipboard.
-  //
-
-  // Place in top-left corner of screen regardless of scroll position.
-  textArea.style.position = 'fixed'
-  textArea.style.top = '0'
-  textArea.style.left = '0'
-
-  // Ensure it has a small width and height. Setting to 1px / 1em
-  // doesn't work as this gives a negative w/h on some browsers.
-  textArea.style.width = '2em'
-  textArea.style.height = '2em'
-
-  // We don't need padding, reducing the size if it does flash render.
-  textArea.style.padding = '0'
-
-  // Clean up any borders.
-  textArea.style.border = 'none'
-  textArea.style.outline = 'none'
-  textArea.style.boxShadow = 'none'
-
-  // Avoid flash of white box if rendered for any reason.
-  textArea.style.background = 'transparent'
-
-  textArea.addEventListener('focusin', (e) => e.stopPropagation())
-
-  textArea.value = text
-
-  document.body.appendChild(textArea)
-  textArea.focus()
-  textArea.select()
-
-  try {
-    document.execCommand('copy')
-  } catch (err) {
-    console.log('Oops, unable to copy')
-  }
-
-  document.body.removeChild(textArea)
-}

From ab2520603f032e8c9312e006608f53b393c4c395 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 29 Jul 2022 11:26:56 +0530
Subject: [PATCH 19/26] chore/gui-v2-user-management-share-base-cleanup

---
 .../dashboard/settings/user-management/ShareBase.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue b/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
index a857907fa0..4bb158f7e7 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
@@ -67,7 +67,7 @@ const disableSharedBase = async () => {
     if (!project.value.id) return
 
     await $api.project.sharedBaseDisable(project.value.id)
-    base = {}
+    base = null
   } catch (e: any) {
     console.error(e)
     toast.error(await extractSdkResponseErrorMsg(e))
@@ -81,7 +81,7 @@ const recreate = async () => {
     if (!project.value.id) return
 
     const sharedBase = await $api.project.sharedBaseCreate(project.value.id, {
-      roles: base?.role || 'viewer',
+      roles: base?.role || ShareBaseRole.Viewer,
     })
     const newBase = sharedBase || {}
     base = { ...newBase, role: base?.role }

From 0652f14daae01932e1adedf6be18a684c89fb484 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 29 Jul 2022 12:11:37 +0530
Subject: [PATCH 20/26] 
 chore/gui-v2-user-management-icon-height-config-improved-and-integrated-user-management-and-api-token-to-tab-view

---
 .../dashboard/settings/SettingsModal.vue      |  4 +-
 packages/nc-gui-v2/components/tabs/Auth.vue   | 40 ++++++++++++++++++-
 .../auth}/ApiTokenManagement.vue              | 14 +++----
 .../settings => tabs/auth}/UserManagement.vue | 14 +++----
 .../auth}/user-management/FeedbackForm.vue    |  0
 .../auth}/user-management/ShareBase.vue       | 27 ++++++++-----
 .../auth}/user-management/UsersModal.vue      | 14 +++----
 7 files changed, 78 insertions(+), 35 deletions(-)
 rename packages/nc-gui-v2/components/{dashboard/settings => tabs/auth}/ApiTokenManagement.vue (92%)
 rename packages/nc-gui-v2/components/{dashboard/settings => tabs/auth}/UserManagement.vue (95%)
 rename packages/nc-gui-v2/components/{dashboard/settings => tabs/auth}/user-management/FeedbackForm.vue (100%)
 rename packages/nc-gui-v2/components/{dashboard/settings => tabs/auth}/user-management/ShareBase.vue (85%)
 rename packages/nc-gui-v2/components/{dashboard/settings => tabs/auth}/user-management/UsersModal.vue (94%)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
index 2f6f7ec7ff..7484162ef8 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
@@ -4,8 +4,8 @@ import AuditTab from './AuditTab.vue'
 import AppStore from './AppStore.vue'
 import Metadata from './Metadata.vue'
 import UIAcl from './UIAcl.vue'
-import UserManagement from './UserManagement.vue'
-import ApiTokenManagement from './ApiTokenManagement.vue'
+import ApiTokenManagement from '~/components/tabs/auth/ApiTokenManagement.vue'
+import UserManagement from '~/components/tabs/auth/UserManagement.vue'
 import StoreFrontOutline from '~icons/mdi/storefront-outline'
 import TeamFillIcon from '~icons/ri/team-fill'
 import MultipleTableIcon from '~icons/mdi/table-multiple'
diff --git a/packages/nc-gui-v2/components/tabs/Auth.vue b/packages/nc-gui-v2/components/tabs/Auth.vue
index 11a17bc2e2..91f8c0fecc 100644
--- a/packages/nc-gui-v2/components/tabs/Auth.vue
+++ b/packages/nc-gui-v2/components/tabs/Auth.vue
@@ -1,5 +1,43 @@
+<script setup lang="ts">
+import UserManagement from './auth/UserManagement.vue'
+import ApiTokenManagement from './auth/ApiTokenManagement.vue'
+
+interface TabGroup {
+  [key: string]: {
+    title: string
+    body: any
+  }
+}
+
+const tabsInfo: TabGroup = {
+  usersManagement: {
+    title: 'Users Management',
+    body: () => UserManagement,
+  },
+  apiTokenManagement: {
+    title: 'API Token Management',
+    body: () => ApiTokenManagement,
+  },
+}
+
+const firstKeyOfObject = (obj: object) => Object.keys(obj)[0]
+
+const selectedTabKeys = $ref<string[]>([firstKeyOfObject(tabsInfo)])
+const selectedTab = $computed(() => tabsInfo[selectedTabKeys[0]])
+</script>
+
 <template>
   <div>
-    <h2 class="text-3xl mt-3">Team & Auth</h2>
+    <a-menu v-model:selectedKeys="selectedTabKeys" :open-keys="[]" mode="horizontal">
+      <a-menu-item v-for="(tab, key) of tabsInfo" :key="key" class="select-none">
+        <div class="text-xs pb-2.5">
+          {{ tab.title }}
+        </div>
+      </a-menu-item>
+    </a-menu>
+
+    <div class="mx-4 py-6 mt-2">
+      <component :is="selectedTab.body()" />
+    </div>
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue b/packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue
similarity index 92%
rename from packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
rename to packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue
index 18e2c14732..17996560b4 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue
@@ -159,8 +159,8 @@ onMounted(() => {
               </template>
               <a-button type="text" class="!rounded-md" @click="item.show = !item.show">
                 <template #icon>
-                  <VisibilityCloseIcon v-if="item.show" height="1.1rem" class="flex mx-auto" />
-                  <VisibilityOpenIcon v-else height="1rem" class="flex mx-auto" />
+                  <VisibilityCloseIcon v-if="item.show" class="flex mx-auto h-[1.1rem]" />
+                  <VisibilityOpenIcon v-else class="flex mx-auto h-[1rem]" />
                 </template>
               </a-button>
             </a-tooltip>
@@ -168,7 +168,7 @@ onMounted(() => {
               <template #title> Copy token to clipboard </template>
               <a-button type="text" class="!rounded-md" @click="copyToken(item.token)">
                 <template #icon>
-                  <MdiContentCopyIcon height="1rem" class="flex mx-auto" />
+                  <MdiContentCopyIcon class="flex mx-auto h-[1rem]" />
                 </template>
               </a-button>
             </a-tooltip>
@@ -176,16 +176,16 @@ onMounted(() => {
             <a-dropdown :trigger="['click']" class="flex" placement="bottomRight">
               <div class="flex flex-row items-center">
                 <a-button type="text" class="!px-0">
-                  <div class="flex flex-row items-center">
-                    <KebabIcon height="1.2rem" />
+                  <div class="flex flex-row items-center h-[1.2rem]">
+                    <KebabIcon />
                   </div>
                 </a-button>
               </div>
               <template #overlay>
                 <a-menu>
                   <a-menu-item>
-                    <div class="flex flex-row items-center py-1" @click="openDeleteModal(item)">
-                      <MdiDeleteOutlineIcon height="1rem" class="flex" />
+                    <div class="flex flex-row items-center py-1 h-[1rem]" @click="openDeleteModal(item)">
+                      <MdiDeleteOutlineIcon class="flex" />
                       <div class="text-xs pl-2">Remove API Token</div>
                     </div>
                   </a-menu-item>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
similarity index 95%
rename from packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
rename to packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
index cfb48b8c68..bef1bebae5 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
@@ -220,7 +220,7 @@ watchDebounced(
             </template>
             <a-button  type="text" class="!rounded-md" @click="onEdit(user)">
                 <template #icon>
-                  <MdiEditIcon height="1rem" class="flex mx-auto" />
+                  <MdiEditIcon  class="flex mx-auto h-[1rem]" />
                 </template>
               </a-button>
           </a-tooltip>
@@ -230,7 +230,7 @@ watchDebounced(
             </template>
             <a-button type="text"  class="!rounded-md " @click="inviteUser(user)">
               <template #icon>
-                <MdiPlusIcon height="1.1rem" class="flex mx-auto" />
+                <MdiPlusIcon  class="flex mx-auto h-[1.1rem]" />
               </template>
             </a-button>
           </a-tooltip>
@@ -241,7 +241,7 @@ watchDebounced(
             </template>
             <a-button  type="text" class="!rounded-md" @click="onDelete(user)">
               <template #icon>
-                <MdiDeleteOutlineIcon height="1.1rem"  class="flex mx-auto" />
+                <MdiDeleteOutlineIcon   class="flex mx-auto h-[1.1rem]" />
               </template>
             </a-button>
           </a-tooltip>
@@ -249,8 +249,8 @@ watchDebounced(
           <a-dropdown :trigger="['click']" class="flex" placement="bottomRight">
             <div class="flex flex-row items-center">
               <a-button type="text" class="!px-0">
-                <div class="flex flex-row items-center ">
-                  <KebabIcon height="1.2rem" />
+                <div class="flex flex-row items-center h-[1.2rem]">
+                  <KebabIcon />
                 </div>
               </a-button>
             </div>
@@ -258,7 +258,7 @@ watchDebounced(
               <a-menu>
                 <a-menu-item>
                   <div class="flex flex-row items-center py-1" @click="resendInvite(user)">
-                    <MdiEmailSendIcon height="1rem" class="flex" />
+                    <MdiEmailSendIcon class="flex h-[1rem]" />
                     <div class="text-xs pl-2">
                       Resend invite email
                     </div>
@@ -266,7 +266,7 @@ watchDebounced(
                 </a-menu-item>
                 <a-menu-item>
                   <div class="flex flex-row items-center py-1" @click="copyInviteUrl(user)">
-                    <MdiContentCopyIcon height="1rem" class="flex" />
+                    <MdiContentCopyIcon class="flex h-[1rem]" />
                     <div class="text-xs pl-2">
                       Copy invite URL
                     </div>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/user-management/FeedbackForm.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/FeedbackForm.vue
similarity index 100%
rename from packages/nc-gui-v2/components/dashboard/settings/user-management/FeedbackForm.vue
rename to packages/nc-gui-v2/components/tabs/auth/user-management/FeedbackForm.vue
diff --git a/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
similarity index 85%
rename from packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
rename to packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
index 4bb158f7e7..db4d128caf 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
@@ -134,8 +134,8 @@ onMounted(() => {
 
 <template>
   <div class="flex flex-col w-full">
-    <div class="flex flex-row items-center space-x-0.5 pl-2">
-      <OpenInNewIcon height="0.8rem" />
+    <div class="flex flex-row items-center space-x-0.5 pl-2 h-[0.8rem]">
+      <OpenInNewIcon />
       <div class="text-xs">Shared Base Link</div>
     </div>
     <div v-if="base?.uuid" class="flex flex-row mt-2 bg-red-50 py-4 mx-1 px-2 items-center rounded-sm w-full justify-between">
@@ -145,9 +145,9 @@ onMounted(() => {
           <template #title>
             <span>Reload</span>
           </template>
-          <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="recreate">
+          <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="recreate">
             <template #icon>
-              <MdiReload height="1rem" class="flex mx-auto text-gray-600" />
+              <MdiReload class="flex mx-auto text-gray-600" />
             </template>
           </a-button>
         </a-tooltip>
@@ -155,9 +155,9 @@ onMounted(() => {
           <template #title>
             <span>Copy URL</span>
           </template>
-          <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="copyUrl">
+          <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="copyUrl">
             <template #icon>
-              <ContentCopyIcon height="1rem" class="flex mx-auto text-gray-600" />
+              <ContentCopyIcon class="flex mx-auto text-gray-600" />
             </template>
           </a-button>
         </a-tooltip>
@@ -165,9 +165,9 @@ onMounted(() => {
           <template #title>
             <span>Open new tab</span>
           </template>
-          <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="navigateToSharedBase">
+          <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="navigateToSharedBase">
             <template #icon>
-              <OpenInNewIcon height="1rem" class="flex mx-auto text-gray-600" />
+              <OpenInNewIcon class="flex mx-auto text-gray-600" />
             </template>
           </a-button>
         </a-tooltip>
@@ -175,9 +175,9 @@ onMounted(() => {
           <template #title>
             <span>Copy embeddable HTML code</span>
           </template>
-          <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="generateEmbeddableIframe">
+          <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="generateEmbeddableIframe">
             <template #icon>
-              <MdiXmlIcon height="1rem" class="flex mx-auto text-gray-600" />
+              <MdiXmlIcon class="flex mx-auto text-gray-600" />
             </template>
           </a-button>
         </a-tooltip>
@@ -190,7 +190,7 @@ onMounted(() => {
           <div class="flex flex-row items-center space-x-2">
             <div v-if="base?.uuid">Anyone with the link</div>
             <div v-else>Disable shared base</div>
-            <DownIcon height="1rem" />
+            <DownIcon class="h-[1rem]" />
           </div>
         </a-button>
 
@@ -205,6 +205,11 @@ onMounted(() => {
       </a-dropdown>
 
       <a-select v-if="base?.uuid" v-model:value="base.role" class="flex">
+        <template #suffixIcon>
+          <div class="flex flex-row">
+            <DownIcon class="text-black -mt-0.5 h-[1rem]" />
+          </div>
+        </template>
         <a-select-option
           v-for="(role, index) in [ShareBaseRole.Editor, ShareBaseRole.Viewer]"
           :key="index"
diff --git a/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
similarity index 94%
rename from packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
rename to packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
index b2d679e703..58ff8dd93d 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
@@ -137,8 +137,8 @@ const clickInviteMore = () => {
       <div class="px-2 mt-1.5">
         <template v-if="usersData.invitationToken">
           <div class="flex flex-col mt-1 border-b-1 pb-5">
-            <div class="flex flex-row items-center pl-1.5 pb-1">
-              <MidAccountIcon height="1.1rem" />
+            <div class="flex flex-row items-center pl-1.5 pb-1 h-[1.1rem]">
+              <MidAccountIcon />
               <div class="text-xs ml-0.5 mt-0.5">Copy Invite Token</div>
             </div>
 
@@ -150,7 +150,7 @@ const clickInviteMore = () => {
                   </div>
                   <a-button type="text" class="!rounded-md mr-1" @click="copyUrl">
                     <template #icon>
-                      <ContentCopyIcon height="1rem" class="flex mx-auto text-green-700" />
+                      <ContentCopyIcon class="flex mx-auto text-green-700 h-[1rem]" />
                     </template>
                   </a-button>
                 </div>
@@ -163,7 +163,7 @@ const clickInviteMore = () => {
             <div class="flex flex-row justify-start mt-4 ml-2">
               <a-button size="small" outlined @click="clickInviteMore">
                 <div class="flex flex-row justify-center items-center space-x-0.5">
-                  <SendIcon height="0.8rem" class="flex mx-auto text-gray-600" />
+                  <SendIcon class="flex mx-auto text-gray-600 h-[0.8rem]" />
                   <div class="text-xs text-gray-600">Invite more</div>
                 </div>
               </a-button>
@@ -171,8 +171,8 @@ const clickInviteMore = () => {
           </div>
         </template>
         <div v-else class="flex flex-col pb-4">
-          <div class="flex flex-row items-center pl-2 pb-1">
-            <MidAccountIcon height="1rem" />
+          <div class="flex flex-row items-center pl-2 pb-1 h-[1rem]">
+            <MidAccountIcon />
             <div class="text-xs ml-0.5 mt-0.5">{{ selectedUser ? 'Edit User' : 'Invite Team' }}</div>
           </div>
           <div class="border-1 py-3 px-4 rounded-md mt-1">
@@ -219,7 +219,7 @@ const clickInviteMore = () => {
                 <a-button type="primary" html-type="submit">
                   <div v-if="selectedUser">Save</div>
                   <div v-else class="flex flex-row justify-center items-center space-x-1.5">
-                    <SendIcon height="0.8rem" class="flex" />
+                    <SendIcon class="flex h-[0.8rem]" />
                     <div>Invite</div>
                   </div>
                 </a-button>

From 3c592db6fbebd7068de8ad2dcb88d8ad84b48d6a Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 29 Jul 2022 13:57:54 +0530
Subject: [PATCH 21/26] chore/gui-v2-user-management-cleanup

---
 packages/nc-gui-v2/composables/useGlobalState/index.ts | 2 +-
 packages/nc-gui-v2/plugins/init.ts                     | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useGlobalState/index.ts b/packages/nc-gui-v2/composables/useGlobalState/index.ts
index 268299eb99..6f31e25911 100644
--- a/packages/nc-gui-v2/composables/useGlobalState/index.ts
+++ b/packages/nc-gui-v2/composables/useGlobalState/index.ts
@@ -1,7 +1,7 @@
 import { breakpointsTailwind, usePreferredLanguages, useStorage } from '@vueuse/core'
 import { useJwt } from '@vueuse/integrations/useJwt'
 import type { JwtPayload } from 'jwt-decode'
-import initialFeedBackForm from './initialFeedBackForm'
+import initialFeedBackForm from './initialFeedbackForm'
 import { computed, ref, toRefs, useBreakpoints, useNuxtApp, useTimestamp, watch } from '#imports'
 import type { Actions, Getters, GlobalState, StoredState, User } from '~/lib/types'
 
diff --git a/packages/nc-gui-v2/plugins/init.ts b/packages/nc-gui-v2/plugins/init.ts
index c1d90253c6..e193b09f44 100644
--- a/packages/nc-gui-v2/plugins/init.ts
+++ b/packages/nc-gui-v2/plugins/init.ts
@@ -37,10 +37,6 @@ const handleFeedbackForm = async () => {
   }
 }
 
-const handleInitFunctions = async () => {
+export default defineNuxtPlugin(async () => {
   await handleFeedbackForm()
-}
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.use(handleInitFunctions)
 })

From 8ad5e09e8996419568949f42775f05f4acbf542b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 29 Jul 2022 14:36:24 +0530
Subject: [PATCH 22/26] 
 chore/gui-v2-user-management-added-early-return-if-state-set-in-useGlobalState

---
 packages/nc-gui-v2/composables/useGlobalState/index.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/nc-gui-v2/composables/useGlobalState/index.ts b/packages/nc-gui-v2/composables/useGlobalState/index.ts
index 6f31e25911..c6bdf86a9a 100644
--- a/packages/nc-gui-v2/composables/useGlobalState/index.ts
+++ b/packages/nc-gui-v2/composables/useGlobalState/index.ts
@@ -24,6 +24,15 @@ const storageKey = 'nocodb-gui-v2'
  * ```
  */
 export const useGlobalState = (): GlobalState => {
+  const { $state } = useNuxtApp()
+
+  if ($state) {
+    console.warn(
+      '[useGlobalState] Global state is injected by state plugin. Manual initialization is unnecessary and should be avoided.',
+    )
+    return $state
+  }
+
   /** get the preferred languages of a user, according to browser settings */
   const preferredLanguages = $(usePreferredLanguages())
   /** todo: reimplement; get the preferred dark mode setting, according to browser settings */

From ef76cc2074b3b73e84fca271a7a1867d53b51e32 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 29 Jul 2022 15:08:30 +0530
Subject: [PATCH 23/26] 
 chore/gui-v2-user-management-project-provide-populated-before-navigating-to-project-page

---
 packages/nc-gui-v2/pages/index/index.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 575ca831eb..8f1ad54e40 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -15,6 +15,7 @@ import MdiDatabaseOutline from '~icons/mdi/database-outline'
 
 const { $api, $state, $e } = useNuxtApp()
 const toast = useToast()
+const { loadProject } = useProject()
 
 const filterQuery = ref('')
 const loading = ref(true)
@@ -121,8 +122,9 @@ $state.sidebarOpen.value = false
         v-else
         :custom-row="
           (record) => ({
-            onClick: () => {
+            onClick: async () => {
               $e('a:project:open')
+              await loadProject(record.id)
               navigateTo(`/nc/${record.id}`)
             },
           })

From c6837ad1586192d167d4c745b99e278de17f3c09 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 29 Jul 2022 16:52:14 +0530
Subject: [PATCH 24/26] 
 chore/gui-v2-user-management-added-top-level-await-to-project-page-for-loading-data

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

diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 8f1ad54e40..575ca831eb 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -15,7 +15,6 @@ import MdiDatabaseOutline from '~icons/mdi/database-outline'
 
 const { $api, $state, $e } = useNuxtApp()
 const toast = useToast()
-const { loadProject } = useProject()
 
 const filterQuery = ref('')
 const loading = ref(true)
@@ -122,9 +121,8 @@ $state.sidebarOpen.value = false
         v-else
         :custom-row="
           (record) => ({
-            onClick: async () => {
+            onClick: () => {
               $e('a:project:open')
-              await loadProject(record.id)
               navigateTo(`/nc/${record.id}`)
             },
           })
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
index 6e621feb1b..314a680511 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
@@ -10,18 +10,8 @@ if (!route.params.type) {
   addTab({ type: 'auth', title: 'Team & Auth' })
 }
 
-watch(
-  () => route.params.projectId,
-  async (newVal, oldVal) => {
-    if (newVal !== oldVal) {
-      clearTabs()
-      if (newVal) {
-        await loadProject(newVal as string)
-        await loadTables()
-      }
-    }
-  },
-)
+loadProject(route.params.projectId as string)
+loadTables()
 
 $state.sidebarOpen.value = true
 </script>

From 975fddac18c5c39841e211754123a1f8583119dc Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 29 Jul 2022 17:13:12 +0530
Subject: [PATCH 25/26] chore/gui-v2-user-management-merge-conflict-resolved

---
 packages/nc-gui-v2/components/tabs/Auth.vue               | 2 +-
 packages/nc-gui-v2/pages/nc/[projectId]/index.vue         | 6 +++---
 .../nc-gui-v2/pages/nc/[projectId]/index/index/auth.vue   | 8 +++++---
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/tabs/Auth.vue b/packages/nc-gui-v2/components/tabs/Auth.vue
index 91f8c0fecc..0a467a52f4 100644
--- a/packages/nc-gui-v2/components/tabs/Auth.vue
+++ b/packages/nc-gui-v2/components/tabs/Auth.vue
@@ -27,7 +27,7 @@ const selectedTab = $computed(() => tabsInfo[selectedTabKeys[0]])
 </script>
 
 <template>
-  <div>
+  <div class="mt-2">
     <a-menu v-model:selectedKeys="selectedTabKeys" :open-keys="[]" mode="horizontal">
       <a-menu-item v-for="(tab, key) of tabsInfo" :key="key" class="select-none">
         <div class="text-xs pb-2.5">
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
index 314a680511..d591dc85a3 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
@@ -3,15 +3,15 @@ import useTabs from '~/composables/useTabs'
 
 const route = useRoute()
 const { loadProject, loadTables } = useProject(route.params.projectId as string)
-const { clearTabs, addTab } = useTabs()
+const { addTab } = useTabs()
 const { $state } = useNuxtApp()
 
 if (!route.params.type) {
   addTab({ type: 'auth', title: 'Team & Auth' })
 }
 
-loadProject(route.params.projectId as string)
-loadTables()
+await loadProject(route.params.projectId as string)
+await loadTables()
 
 $state.sidebarOpen.value = true
 </script>
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index/auth.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index/auth.vue
index 11a17bc2e2..b495a6da15 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index/auth.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index/auth.vue
@@ -1,5 +1,7 @@
+<script lang="ts" setup>
+import Auth from '~~/components/tabs/Auth.vue'
+</script>
+
 <template>
-  <div>
-    <h2 class="text-3xl mt-3">Team & Auth</h2>
-  </div>
+  <Auth />
 </template>

From 17675d2107377367af2a93d6b3e9f73ca64df791 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 1 Aug 2022 14:03:26 +0530
Subject: [PATCH 26/26] 
 chore/gui-v2-user-management-remaned-init-plugin-and-moved-duration-dayjs-plugin-to-dateUtils

---
 .../nc-gui-v2/plugins/{init.ts => initializeFeedbackForm.ts}   | 3 ---
 packages/nc-gui-v2/utils/dateTimeUtils.ts                      | 2 ++
 2 files changed, 2 insertions(+), 3 deletions(-)
 rename packages/nc-gui-v2/plugins/{init.ts => initializeFeedbackForm.ts} (94%)

diff --git a/packages/nc-gui-v2/plugins/init.ts b/packages/nc-gui-v2/plugins/initializeFeedbackForm.ts
similarity index 94%
rename from packages/nc-gui-v2/plugins/init.ts
rename to packages/nc-gui-v2/plugins/initializeFeedbackForm.ts
index e193b09f44..ac8f1ddf6b 100644
--- a/packages/nc-gui-v2/plugins/init.ts
+++ b/packages/nc-gui-v2/plugins/initializeFeedbackForm.ts
@@ -1,10 +1,7 @@
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
-import duration from 'dayjs/plugin/duration'
 import { defineNuxtPlugin } from '#app'
 
-dayjs.extend(duration)
-
 const handleFeedbackForm = async () => {
   let { feedbackForm: currentFeedbackForm } = $(useGlobalState())
   if (!currentFeedbackForm) return
diff --git a/packages/nc-gui-v2/utils/dateTimeUtils.ts b/packages/nc-gui-v2/utils/dateTimeUtils.ts
index 3caad42e1b..5dd2a7fea8 100644
--- a/packages/nc-gui-v2/utils/dateTimeUtils.ts
+++ b/packages/nc-gui-v2/utils/dateTimeUtils.ts
@@ -2,12 +2,14 @@ import dayjs from 'dayjs'
 
 import relativeTime from 'dayjs/plugin/relativeTime'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
+import duration from 'dayjs/plugin/duration'
 
 import utc from 'dayjs/plugin/utc'
 
 dayjs.extend(utc)
 dayjs.extend(relativeTime)
 dayjs.extend(customParseFormat)
+dayjs.extend(duration)
 
 export const timeAgo = (date: any) => {
   return dayjs.utc(date).fromNow()