chore/gui-v2-user-management-icon-height-config-improved-and-integrated-user-management-and-api-token-to-tab-view

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'

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>

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>

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>

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"

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>