refactor: renamed emit event and removed action slot

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -22,10 +22,13 @@ declare module '@vue/runtime-core' {
     HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
     HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
     HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
+    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
     HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
     HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
+    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     TeamsAdd: typeof import('./components/teams/Add.vue')['default']

packages/hoppscotch-sh-admin/src/pages/teams/index.vue

@@ -31,11 +31,11 @@
           <HoppSmartTable
             :list="newTeamsList"
             :headings="headings"
-            @goToDetails="goToTeamDetails"
-            cell-styles="px-6 py-3"
+            @openRowContent="goToTeamDetails"
+            :modify-col-names="['action']"
+            cell-styles="px-6 py-1"
           >
             <template #action="{ item }">
-              <td>
               <div class="relative">
                 <tippy interactive trigger="click" theme="popover">
                   <HoppButtonSecondary
@@ -59,7 +59,6 @@
                   </template>
                 </tippy>
               </div>
-              </td>
             </template>
           </HoppSmartTable>
         </div>
@@ -150,6 +149,7 @@ const newTeamsList = computed(() => {
       id: team.id,
       name: team.name,
       members: team.members.length,
+      action: '',
     };
   });
 });

packages/hoppscotch-sh-admin/src/pages/users/index.vue

@@ -37,7 +37,7 @@
             :list="newUsersList"
             :headings="headings"
             :modify-col-names="colNames"
-            @goToDetails="goToUserDetails"
+            @openRowContent="goToUserDetails"
           >
             <template #name="{ item }">
               <div>
@@ -49,9 +49,7 @@
                     {{ item.name }}
                   </span>
 
-                  <span
-                    v-if="item.name.length === 0 && !isUserAdmin(item)"
-                    class="mx-auto justify-center"
+                  <span v-if="item.name.length === 0 && !isUserAdmin(item)"
                     >-</span
                   >
 
@@ -85,7 +83,6 @@
             </template>
 
             <template #action="{ item }">
-              <td>
               <div class="relative">
                 <span>
                   <tippy interactive trigger="click" theme="popover">
@@ -126,7 +123,6 @@
                   </tippy>
                 </span>
               </div>
-              </td>
             </template>
           </HoppSmartTable>
         </div>
@@ -225,6 +221,7 @@ const newUsersList = computed(() => {
       name: user.displayName ?? '',
       email: user.email ?? '',
       createdOn: user.createdOn,
+      action: '',
     };
   });
 });
@@ -247,7 +244,7 @@ const headings = [
 ];
 
 //Names of the columns to be modified by this component
-const colNames = ['name', 'createdOn'];
+const colNames = ['name', 'createdOn', 'action'];
 
 // Send Invitation through Email
 const sendInvitation = useMutation(InviteNewUserDocument);

packages/hoppscotch-ui/src/components/smart/Table.vue

@@ -21,27 +21,26 @@
           <td
             v-for="(data, colIndex) in item"
             :key="colIndex"
-            @click="$emit('goToDetails', item)"
+            @click="$emit('openRowContent', item)"
             class="max-w-40"
             :class="cellStyles"
           >
             <!-- Custom implementation of the particular column -->
-            <div class="flex items-center">
+
             <div v-if="modifyColNames?.includes(colIndex.toString())">
               <slot :name="colIndex.toString()" :item="item"></slot>
             </div>
 
             <!-- Generic implementation of the column -->
-              <div v-else class="flex flex-col truncate text-center">
+            <div v-else class="flex flex-col truncate">
               <span v-if="data" class="truncate">
                 {{ data }}
               </span>
               <span v-else class=""> - </span>
             </div>
-            </div>
           </td>
 
-          <slot name="action" :item="item"></slot>
+          <!-- <slot name="action" :item="item"></slot> -->
         </tr>
       </tbody>
     </table>
@@ -63,6 +62,6 @@ defineProps<{
 }>()
 
 defineEmits<{
-  (event: "goToDetails", item: Item): void
+  (event: "openRowContent", item: Item): void
 }>()
 </script>