Merge pull request #6601 from nocodb/fix/table

fix: css refactor token and user list

packages/nc-gui/components/account/Token.vue

@@ -160,10 +160,10 @@ const handleCancel = () => {
 </script>
 
 <template>
-  <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2">
-    <div class="max-w-[810px] mx-auto p-4" data-testid="nc-token-list">
-      <div class="py-2 flex gap-4 items-center justify-between">
-        <h6 class="text-2xl my-4 text-left font-bold">{{ $t('title.apiTokens') }}</h6>
+  <div class="h-full pt-2">
+    <div class="max-w-202 mx-auto px-4 h-full" data-testid="nc-token-list">
+      <div class="py-2 flex gap-4 items-baseline justify-between">
+        <h6 class="text-2xl text-left font-bold">{{ $t('title.apiTokens') }}</h6>
         <NcTooltip :disabled="!(isEeUI && tokens.length)">
           <template #title>{{ $t('labels.tokenLimit') }}</template>
           <NcButton
@@ -185,18 +185,23 @@ const handleCancel = () => {
         </NcTooltip>
       </div>
       <span>{{ $t('msg.apiTokenCreate') }}</span>
-      <div class="w-full mt-5 rounded-md h-136 overflow-y-scroll">
-        <div>
-          <div class="flex w-full pl-5 bg-gray-50 border-1">
+      <div class="mt-5 h-[calc(100%-13rem)]">
+        <div class="h-full w-full !overflow-hidden rounded-md">
+          <div class="flex w-full pl-5 bg-gray-50 border-1 rounded-t-md">
             <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">{{ $t('title.tokenName') }}</span>
             <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('title.creator') }}</span>
             <span class="py-3.5 text-gray-500 font-medium text-3.5 w-3/9 text-start">{{ $t('labels.token') }}</span>
             <span class="py-3.5 pl-19 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('labels.actions') }}</span>
           </div>
-          <main>
+          <div class="nc-scrollbar-md !overflow-y-auto flex flex-col h-[calc(100%-5rem)]">
             <div v-if="showNewTokenModal">
-              <div class="flex gap-5 px-3 py-3.5 text-gray-500 font-medium text-3.5 w-full nc-token-generate">
-                <div class="flex flex-col w-full">
+              <div
+                class="flex gap-5 px-3 py-2.5 text-gray-500 font-medium text-3.5 w-full nc-token-generate border-b-1 border-l-1 border-r-1"
+                :class="{
+                  'rounded-b-md': !tokens.length,
+                }"
+              >
+                <div class="flex w-full">
                   <a-input
                     :ref="selectInputOnMount"
                     v-model:value="selectedTokenData.description"
@@ -224,17 +229,19 @@ const handleCancel = () => {
                   </NcButton>
                 </div>
               </div>
-              <NcDivider />
             </div>
-            <div v-if="!tokens.length" class="h-118 justify-center flex items-center">
-              <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('title.noLabels')" />
+            <div
+              v-if="!tokens.length && !showNewTokenModal"
+              class="border-l-1 border-r-1 border-b-1 rounded-b-md justify-center flex items-center"
+            >
+              <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noToken')" />
             </div>
 
             <div
               v-for="el of tokens"
               :key="el.id"
               data-testid="nc-token-list"
-              class="flex border-1 pl-5 py-3 justify-between token"
+              class="flex pl-5 py-3 justify-between token items-center border-l-1 border-r-1 border-b-1"
             >
               <span class="text-black font-bold text-3.5 text-start w-2/9">
                 <GeneralTruncateText placement="top" length="20">
@@ -250,39 +257,42 @@ const handleCancel = () => {
                 <GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" length="29">
                   {{ el.token }}
                 </GeneralTruncateText>
-                <span v-else>**************************************</span>
+                <span v-else>************************************</span>
               </span>
               <!-- ACTIONS -->
-              <span class="text-gray-500 font-medium text-3.5 w-2/9">
-                <div class="flex justify-end items-center gap-3 pr-5">
+              <div class="flex justify-end items-center gap-3 pr-5 text-gray-500 font-medium text-3.5 w-2/9">
                 <NcTooltip placement="top">
                   <template #title>{{ $t('labels.showOrHide') }}</template>
                   <component
                     :is="iconMap.eye"
-                      class="nc-toggle-token-visibility hover::cursor-pointer"
+                    class="nc-toggle-token-visibility hover::cursor-pointer w-h-4 mb-[1.8px]"
                     @click="hideOrShowToken(el.token as string)"
                   />
                 </NcTooltip>
                 <NcTooltip placement="top" class="h-4">
                   <template #title>{{ $t('general.copy') }}</template>
-                    <component :is="iconMap.copy" class="hover::cursor-pointer" @click="copyToken(el.token)" />
+                  <component
+                    :is="iconMap.copy"
+                    class="hover::cursor-pointer w-4 h-4 text-gray-600 mt-0.25"
+                    @click="copyToken(el.token)"
+                  />
                 </NcTooltip>
                 <NcTooltip placement="top" class="mb-0.5">
                   <template #title>{{ $t('general.delete') }}</template>
                   <component
                     :is="iconMap.delete"
                     data-testid="nc-token-row-action-icon"
-                      class="nc-delete-icon hover::cursor-pointer"
+                    class="nc-delete-icon hover::cursor-pointer w-4 h-4"
                     @click="triggerDeleteModal(el.token as string, el.description as string)"
                   />
                 </NcTooltip>
               </div>
-              </span>
             </div>
-          </main>
           </div>
         </div>
-      <div v-if="pagination.total > 10" class="flex items-center justify-center mt-15">
+      </div>
+
+      <div v-if="pagination.total > 10" class="flex items-center justify-center mt-5">
         <a-pagination
           v-model:current="currentPage"
           :total="pagination.total"
@@ -313,3 +323,9 @@ const handleCancel = () => {
     </GeneralDeleteModal>
   </div>
 </template>
+
+<style>
+.token:last-child {
+  @apply border-b-1 rounded-b-md;
+}
+</style>

packages/nc-gui/components/account/UserList.vue

@@ -153,9 +153,9 @@ const openDeleteModal = (user: UserType) => {
 </script>
 
 <template>
-  <div data-testid="nc-super-user-list">
-    <div class="max-w-195 mx-auto">
-      <div class="text-2xl my-4 text-left font-weight-bold">{{ $t('title.userManagement') }}</div>
+  <div data-testid="nc-super-user-list" class="h-full">
+    <div class="max-w-195 mx-auto h-full">
+      <div class="text-2xl text-left font-weight-bold mb-4">{{ $t('title.userManagement') }}</div>
       <div class="py-2 flex gap-4 items-center justify-between">
         <a-input v-model:value="searchText" class="!max-w-90 !rounded-md" placeholder="Search members" @change="loadUsers()">
           <template #prefix>
@@ -172,35 +172,39 @@ const openDeleteModal = (user: UserType) => {
           </NcButton>
         </div>
       </div>
-      <div class="w-full mt-5 border-1 rounded-md h-[613px] max-w-250">
-        <div class="flex w-full bg-gray-50 border-b-1">
-          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-10">{{ $t('labels.email') }}</span>
-          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-20">{{ $t('objects.role') }}</span>
-          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-end pl-42">{{ $t('labels.action') }}</span>
+      <div class="w-full rounded-md max-w-250 h-[calc(100%-12rem)] rounded-md overflow-hidden mt-5">
+        <div class="flex w-full bg-gray-50 border-1 rounded-t-md">
+          <div class="py-3.5 text-gray-500 font-medium text-3.5 w-2/3 text-start pl-6">{{ $t('labels.email') }}</div>
+          <div class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start">{{ $t('objects.role') }}</div>
+          <div class="flex py-3.5 text-gray-500 font-medium text-3.5 w-28 justify-end mr-4">
+            {{ $t('labels.action') }}
+          </div>
         </div>
         <div v-if="isLoading" class="flex items-center justify-center text-center h-[513px]">
           <GeneralLoader size="xlarge" />
         </div>
         <!-- if users are empty -->
-        <div v-else-if="!users.length" class="flex items-center justify-center text-center h-128.25">
+        <div v-else-if="!users.length" class="flex items-center justify-center text-center h-full">
           <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
         </div>
-        <section v-else class="tbody">
+        <section v-else class="tbody h-[calc(100%-4rem)] nc-scrollbar-md border-t-0 !overflow-auto">
           <div
             v-for="el of users"
             :key="el.id"
             data-testid="nc-token-list"
-            class="flex py-3 justify-around px-5 border-b-1"
+            class="user flex py-3 justify-around px-1 border-b-1 border-l-1 border-r-1"
             :class="{
               'py-4': el.roles?.includes('super'),
             }"
           >
-            <span class="text-3.5 text-start w-1/3 pl-5">
+            <div class="text-3.5 text-start w-2/3 pl-5 flex items-center">
+              <GeneralTruncateText length="29">
                 {{ el.email }}
-            </span>
-            <span class="text-3.5 text-start w-1/3 pl-18">
+              </GeneralTruncateText>
+            </div>
+            <div class="text-3.5 text-start w-1/3">
               <div v-if="el?.roles?.includes('super')" class="font-weight-bold">{{ $t('labels.superAdmin') }}</div>
-              <a-select
+              <NcSelect
                 v-else
                 v-model:value="el.roles"
                 class="w-55 nc-user-roles"
@@ -228,9 +232,9 @@ const openDeleteModal = (user: UserType) => {
                     {{ $t('msg.info.roles.orgViewer') }}
                   </span>
                 </a-select-option>
-              </a-select>
-            </span>
-            <span class="w-1/3 pl-43">
+              </NcSelect>
+            </div>
+            <span class="w-26 flex items-center justify-end mr-4">
               <div
                 class="flex items-center gap-2"
                 :class="{
@@ -238,23 +242,26 @@ const openDeleteModal = (user: UserType) => {
                 }"
               >
                 <NcDropdown :trigger="['click']">
+                  <NcButton size="xsmall" type="ghost">
                     <MdiDotsVertical
-                    class="border-1 !text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)"
+                      class="text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)"
                     />
+                  </NcButton>
+
                   <template #overlay>
                     <NcMenu>
                       <template v-if="!el.roles?.includes('super')">
                         <!-- Resend invite Email -->
                         <NcMenuItem @click="resendInvite(el)">
-                          <component :is="iconMap.email" class="flex text-gray-500" />
+                          <component :is="iconMap.email" class="flex text-gray-600" />
                           <div>{{ $t('activity.resendInvite') }}</div>
                         </NcMenuItem>
                         <NcMenuItem @click="copyInviteUrl(el)">
-                          <component :is="iconMap.copy" class="flex text-gray-500" />
+                          <component :is="iconMap.copy" class="flex text-gray-600" />
                           <div>{{ $t('activity.copyInviteURL') }}</div>
                         </NcMenuItem>
                         <NcMenuItem @click="copyPasswordResetUrl(el)">
-                          <component :is="iconMap.copy" class="flex text-gray-500" />
+                          <component :is="iconMap.copy" class="flex text-gray-600" />
                           <div>{{ $t('activity.copyPasswordResetURL') }}</div>
                         </NcMenuItem>
                       </template>
@@ -271,7 +278,7 @@ const openDeleteModal = (user: UserType) => {
           </div>
         </section>
       </div>
-      <div v-if="pagination.total > 10" class="flex items-center justify-center mt-7">
+      <div v-if="pagination.total > 10" class="flex items-center justify-center mt-4">
         <a-pagination
           v-model:current="currentPage"
           :total="pagination.total"
@@ -285,7 +292,7 @@ const openDeleteModal = (user: UserType) => {
             <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
               <GeneralIcon icon="account" class="nc-view-icon"></GeneralIcon>
               <div
-                class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
+                class="text-ellipsis overflow-hidden select-none w-full pl-1.75"
                 :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
               >
                 {{ deleteModalInfo?.email }}
@@ -301,7 +308,7 @@ const openDeleteModal = (user: UserType) => {
 </template>
 
 <style scoped>
-.tbody div:nth-child(10) {
-  border-bottom: none;
+.user:last-child {
+  @apply rounded-b-md;
 }
 </style>

packages/nc-gui/components/account/UsersModal.vue

@@ -80,7 +80,7 @@ const copyUrl = async () => {
     await copy(inviteUrl.value)
 
     // Copied shareable source url to clipboard!
-    message.success(t('msg.success.shareableURLCopied'))
+    message.success(t('msg.toast.inviteUrlCopy'))
   } catch (e: any) {
     message.error(e.message)
   }
@@ -124,7 +124,7 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
           <div class="flex flex-col mt-1 pb-5">
             <div class="flex flex-row items-center pl-1.5 pb-1 h-[1.1rem]">
               <component :is="iconMap.account" />
-              <div class="text-xs ml-0.5 mt-0.5">{{ $t('activity.copyInviteToken') }}</div>
+              <div class="text-xs ml-0.5 mt-0.5">{{ $t('activity.copyInviteURL') }}</div>
             </div>
 
             <a-alert class="!mt-2" type="success" show-icon>

packages/nc-gui/components/dlg/ProjectDelete.vue

@@ -52,7 +52,7 @@ const onDelete = async () => {
   <GeneralDeleteModal v-model:visible="visible" :entity-name="$t('objects.project')" :on-delete="onDelete">
     <template #entity-preview>
       <div v-if="base" class="flex flex-row items-center py-2 px-2.25 bg-gray-50 rounded-lg text-gray-700 mb-4">
-        <GeneralProjectIcon :type="base.type" class="nc-view-icon px-1.5"></GeneralProjectIcon>
+        <GeneralProjectIcon :type="base.type" class="nc-view-icon px-1.5 w-10" />
         <div
           class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"

packages/nc-gui/lang/en.json

@@ -388,6 +388,7 @@
     }
   },
   "labels": {
+    "noToken": "No Token",
     "tokenLimit": "Only one token per user is allowed",
     "duplicateAttachment": "File with name {filename} already attached",
     "toAddress": "To Address",
@@ -675,8 +676,8 @@
     "newUser": "New User",
     "editUser": "Edit user",
     "deleteUser": "Remove user from base",
-    "resendInvite": "Resend invite E-mail",
-    "copyInviteURL": "Copy invite URL",
+    "resendInvite": "Resend Invite E-mail",
+    "copyInviteURL": "Copy Invite URL",
     "copyPasswordResetURL": "Copy password reset URL",
     "newRole": "New role",
     "reloadRoles": "Reload roles",
@@ -1198,7 +1199,7 @@
       "deleteProject": "Base deleted successfully",
       "authToken": "Auth token copied to clipboard",
       "projInfo": "Copied base info to clipboard",
-      "inviteUrlCopy": "Copied invite URL to clipboard",
+      "inviteUrlCopy": "Copied Invite URL to clipboard",
       "createView": "View created successfully",
       "formEmailSMTP": "Please activate SMTP plugin in App store for enabling email notification",
       "collabView": "Successfully Switched to collaborative view",

packages/nc-gui/pages/account/index.vue

@@ -145,7 +145,7 @@ const logout = async () => {
         <!-- Sub Tabs -->
 
         <div class="flex flex-col w-full ml-65">
-          <div class="flex flex-row p-3 items-center">
+          <div class="flex flex-row p-3 items-center h-14">
             <div class="flex-1" />
 
             <LazyGeneralReleaseInfo />
@@ -185,12 +185,19 @@ const logout = async () => {
               </NcDropdown>
             </template>
           </div>
-          <div class="flex flex-col container mx-auto mt-2">
+          <div
+            class="flex flex-col container mx-auto"
+            :style="{
+              height: 'calc(100vh - 3.5rem)',
+            }"
+          >
+            <div class="mt-2 h-full">
               <NuxtPage />
             </div>
           </div>
         </div>
       </div>
+    </div>
   </NuxtLayout>
 </template>
 

tests/playwright/pages/Account/Users.ts

@@ -88,7 +88,7 @@ export class AccountUsersPage extends BasePage {
 
   async openRowActionMenu({ email }: { email: string }) {
     const userRow = await this.getUserRow({ email });
-    return userRow.locator(`.nc-icon`).click();
+    return userRow.locator(`.ant-btn`).click();
   }
 
   async deleteUser({ email }: { email: string }) {