refactor(gui-v2): use tab in auth tab

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/tabs/Auth.vue

@@ -2,39 +2,39 @@
 import UserManagement from './auth/UserManagement.vue'
 import ApiTokenManagement from './auth/ApiTokenManagement.vue'
 
-interface TabGroup {
+interface Tab {
-  [key: string]: {
   title: string
   body: any
-  }
 }
 
-const tabsInfo: TabGroup = {
+const tabsInfo: Tab[] = [
-  usersManagement: {
+  {
     title: 'Users Management',
     body: () => UserManagement,
   },
-  apiTokenManagement: {
+  {
     title: 'API Token Management',
     body: () => ApiTokenManagement,
   },
-}
+]
 
-const firstKeyOfObject = (obj: object) => Object.keys(obj)[0]
+// const firstKeyOfObject = (obj: object) => Object.keys(obj)[0]
 
-const selectedTabKeys = $ref<string[]>([firstKeyOfObject(tabsInfo)])
+const selectedTabKey = $ref(0)
-const selectedTab = $computed(() => tabsInfo[selectedTabKeys[0]])
+const selectedTab = $computed(() => tabsInfo[selectedTabKey])
 </script>
 
 <template>
-  <div class="mt-2">
+  <div>
-    <a-menu v-model:selectedKeys="selectedTabKeys" :open-keys="[]" mode="horizontal">
+    <a-tabs v-model:active-key="selectedTabKey" class="" :open-keys="[]" mode="horizontal">
-      <a-menu-item v-for="(tab, key) of tabsInfo" :key="key" class="select-none">
+      <a-tabs-tab-pane v-for="(tab, key) of tabsInfo" :key="key" class="select-none">
-        <div class="text-xs pb-2.5">
+        <template #tab>
+          <span class="mx-3">
             {{ tab.title }}
-        </div>
+          </span>
-      </a-menu-item>
+        </template>
-    </a-menu>
+      </a-tabs-tab-pane>
+    </a-tabs>
 
     <div class="mx-4 py-6 mt-2">
       <component :is="selectedTab.body()" />

packages/nc-gui-v2/components/tabs/auth/UserManagement.vue

@@ -194,7 +194,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             <div class="text-gray-500">Reload</div>
           </div>
         </a-button>
-        <a-button v-if="isUIAllowed('newUser')" size="middle" @click="onInvite">
+        <a-button v-if="isUIAllowed('newUser')" size="middle" type="primary" ghost @click="onInvite">
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
             <MidAccountIcon />
             <div>{{ $t('activity.inviteTeam') }}</div>

packages/nc-gui-v2/layouts/base.vue

@@ -19,7 +19,7 @@ const logout = () => {
     <div id="nc-sidebar-left" />
 
     <a-layout class="!flex-col">
-      <a-layout-header class="flex !bg-primary items-center text-white pl-5 pr-4 shadow-lg">
+      <a-layout-header class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg">
         <div
           v-if="route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'"
           class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105"