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] 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>