refactor: polish UI of admin dashboard users module (#48)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

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

@@ -1,38 +1,38 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core';
+import '@vue/runtime-core'
 
-export {};
+export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AppHeader: typeof import('./components/app/Header.vue')['default'];
+    AppHeader: typeof import('./components/app/Header.vue')['default']
-    AppLogin: typeof import('./components/app/Login.vue')['default'];
+    AppLogin: typeof import('./components/app/Login.vue')['default']
-    AppLogout: typeof import('./components/app/Logout.vue')['default'];
+    AppLogout: typeof import('./components/app/Logout.vue')['default']
-    AppModal: typeof import('./components/app/Modal.vue')['default'];
+    AppModal: typeof import('./components/app/Modal.vue')['default']
-    AppSidebar: typeof import('./components/app/Sidebar.vue')['default'];
+    AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
-    AppToast: typeof import('./components/app/Toast.vue')['default'];
+    AppToast: typeof import('./components/app/Toast.vue')['default']
-    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'];
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
-    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'];
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
-    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'];
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
-    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'];
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
-    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'];
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
-    IconLucideBell: typeof import('~icons/lucide/bell')['default'];
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default'];
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
-    IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default'];
+    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
-    IconLucideLineChart: typeof import('~icons/lucide/line-chart')['default'];
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    IconLucideLock: typeof import('~icons/lucide/lock')['default'];
+    IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default']
-    IconLucideMenu: typeof import('~icons/lucide/menu')['default'];
+    IconLucideMenu: typeof import('~icons/lucide/menu')['default']
-    IconLucideSettings: typeof import('~icons/lucide/settings')['default'];
+    IconLucideMoreHorizontal: typeof import('~icons/lucide/more-horizontal')['default']
-    IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default'];
+    IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default']
-    IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default'];
+    IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default']
-    IconLucideUser: typeof import('~icons/lucide/user')['default'];
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
-    IconLucideUserCog: typeof import('~icons/lucide/user-cog')['default'];
+    IconLucideUsers: typeof import('~icons/lucide/users')['default']
-    IconLucideUsers: typeof import('~icons/lucide/users')['default'];
+    ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
-    ProfilePicture: typeof import('./components/profile/Picture.vue')['default'];
+    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterLink: typeof import('vue-router')['RouterLink'];
+    RouterView: typeof import('vue-router')['RouterView']
-    RouterView: typeof import('vue-router')['RouterView'];
+    TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default']
-    TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default'];
   }
+
 }

packages/hoppscotch-sh-admin/src/components/app/Header.vue

@@ -22,10 +22,6 @@
     </div>
 
     <div class="flex items-center">
-      <button class="flex mx-4 text-gray-400 focus:outline-none toggle-dark">
-        <icon-lucide-bell class="text-gray-300 w-6" />
-      </button>
-
       <div v-if="currentUser" class="relative">
         <button
           @click="dropdownOpen = !dropdownOpen"
@@ -66,12 +62,6 @@
             v-show="dropdownOpen"
             class="absolute right-0 z-20 w-48 py-2 mt-2 bg-zinc-800 rounded-md shadow-xl"
           >
-            <HoppSmartItem to="/profile" :icon="IconUser" :label="'Profile'" />
-            <HoppSmartItem
-              to="/settings"
-              :icon="IconSettings"
-              :label="'Settings'"
-            />
             <AppLogout ref="logout" />
           </div>
         </transition>
@@ -81,8 +71,6 @@
 </template>
 
 <script setup lang="ts">
-import IconSettings from '~icons/lucide/settings';
-import IconUser from '~icons/lucide/user';
 import { ref } from 'vue';
 import { useReadonlyStream } from '~/composables/stream';
 import { useSidebar } from '~/composables/useSidebar';

packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue

@@ -38,7 +38,7 @@
               :class="route.name === '/dashboard' ? 'white' : 'gray'"
             />
 
-            <span v-if="isExpanded" class="mx-4">Dashboard</span>
+            <span v-if="isExpanded" class="mx-4 font-semibold">Dashboard</span>
           </router-link>
 
           <router-link
@@ -51,7 +51,7 @@
               :class="route.path === '/users' ? 'white' : 'gray'"
             />
 
-            <span v-if="isExpanded" class="mx-4">Users</span>
+            <span v-if="isExpanded" class="mx-4 font-semibold">Users</span>
           </router-link>
 
           <router-link
@@ -64,20 +64,7 @@
               :class="route.name === '/teams' ? 'white' : 'gray'"
             />
 
-            <span v-if="isExpanded" class="mx-4">Teams</span>
+            <span v-if="isExpanded" class="mx-4 font-semibold">Teams</span>
-          </router-link>
-
-          <router-link
-            class="flex items-center px-6 py-4 duration-200 border-l-4 rounded-sm"
-            :class="[route.name === '/settings' ? activeClass : inactiveClass]"
-            to="/settings"
-          >
-            <icon-lucide-settings
-              class="text-xl"
-              :class="route.name === '/settings' ? 'white' : 'gray'"
-            />
-
-            <span v-if="isExpanded" class="mx-4">Settings</span>
           </router-link>
         </nav>
       </div>

packages/hoppscotch-sh-admin/src/composables/usePagedQuery.ts

@@ -17,40 +17,40 @@ export function usePagedQuery<
   const fetching = ref(true);
   const error = ref(false);
   const list = ref<any[]>([]);
-  const currentPage = ref(1);
+  const currentPage = ref(0);
+  const hasNextPage = ref(true);
 
-  onMounted(async () => {
+  const fetchNextPage = async () => {
     fetching.value = true;
     try {
-      const result = await client.query(query, variables).toPromise();
+      const result = await client.query(query, {
+        ...variables,
+        cursor: list.value.length > 0
+          ? getCursor(list.value.at(-1))
+          : undefined
+      }).toPromise();
 
       const resultList = getList(result.data!);
 
+      if (resultList.length < 20) {
+        hasNextPage.value = false
+      }
+
       list.value.push(...resultList);
+      currentPage.value++;
     } catch (e) {
       error.value = true;
     }
     fetching.value = false;
+  }
+
+  onMounted(async () => {
+    await fetchNextPage()
   });
 
   const goToNextPage = async () => {
-    if (list.value.length % 20 === 0) {
+    if (hasNextPage.value) {
-      fetching.value = true;
+      await fetchNextPage()
-      try {
-        const result = await client
-          .query(query, {
-            ...variables,
-            cursor: getCursor(list.value.at(-1)),
-          })
-          .toPromise();
-        const resultList = getList(result.data!);
-
-        list.value.push(...resultList);
-        currentPage.value++;
-      } catch (e) {
-        error.value = true;
-      }
-      fetching.value = false;
     }
   };
 
@@ -59,5 +59,6 @@ export function usePagedQuery<
     error,
     goToNextPage,
     list,
+    hasNextPage,
   };
 }

packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveUserAsAdmin.graphql

@@ -0,0 +1,3 @@
+mutation RemoveUserAsAdmin($uid: String!) {
+  removeUserAsAdmin(userUID: $uid)
+}

packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/UserInfo.graphql

@@ -4,6 +4,7 @@ query UserInfo($uid: ID!) {
       uid
       displayName
       email
+      isAdmin
       photoURL
       createdOn
     }

packages/hoppscotch-sh-admin/src/pages/dashboard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="sm:px-6 p-4">
-    <h3 class="text-3xl font-medium text-gray-200 mb-6">Dashboard</h3>
+    <h3 class="text-3xl font-bold text-gray-200 mb-6">Dashboard</h3>
 
     <div class="mt-4">
       <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
@@ -34,11 +34,11 @@
           <div
             class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
           >
-            <icon-lucide-lock class="text-2xl text-cyan-400" />
+            <icon-lucide-line-chart class="text-2xl text-cyan-400" />
 
             <div class="mx-5">
               <h4 class="text-2xl font-semibold text-gray-200">20</h4>
-              <div class="text-gray-400">Total Roles</div>
+              <div class="text-gray-400">Total Requests</div>
             </div>
           </div>
         </div>
@@ -47,7 +47,7 @@
           <div
             class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
           >
-            <icon-lucide-line-chart class="text-2xl text-orange-400" />
+            <icon-lucide-folder-tree class="text-2xl text-orange-400" />
 
             <div class="mx-5">
               <h4 class="text-2xl font-semibold text-gray-200">215</h4>

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

@@ -1,21 +1,43 @@
 <template>
   <div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div>
   <div v-else>
-    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">User Details</h3>
+    <div class="ml-3">
+      <button
+        class="p-2 mb-2 rounded-3xl bg-zinc-800"
+        @click="router.push('/users')"
+      >
+        <icon-lucide-arrow-left class="text-xl" />
+      </button>
+    </div>
+    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">User Details</h3>
 
     <div>
       <div>
         <div class="px-6 rounded-md">
           <div class="grid gap-6 mt-4">
-            <div v-if="user.photoURL">
+            <div v-if="user.photoURL" class="relative h-20 w-20">
-              <img
+              <img class="object-cover rounded-3xl mb-3" :src="user.photoURL" />
-                class="object-cover h-20 w-20 rounded-3xl mb-3"
+              <span
-                :src="user.photoURL"
+                v-if="user.isAdmin"
-              />
+                class="absolute bottom-0 ml-17 rounded-xl p-1 bg-emerald-800 border-1 border-emerald-400 text-xs text-emerald-400 px-2"
+              >
+                Admin
+              </span>
             </div>
-            <div v-else class="bg-primaryDark w-17 p-3 rounded-2xl mb-3">
+
+            <div
+              v-else
+              class="bg-primaryDark w-17 p-3 rounded-2xl mb-3 relative"
+            >
               <icon-lucide-user class="text-4xl" />
+              <span
+                v-if="user.isAdmin"
+                class="absolute bottom-0 ml-11 rounded-xl p-1 bg-emerald-800 border-1 border-emerald-400 text-xs text-emerald-400 px-2"
+              >
+                Admin
+              </span>
             </div>
+
             <div v-if="user.uid">
               <label class="text-gray-200" for="username">UID</label>
               <div
@@ -24,12 +46,15 @@
                 {{ user.uid }}
               </div>
             </div>
-            <div v-if="user.displayName">
+            <div>
               <label class="text-gray-200" for="username">Name</label>
               <div
                 class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
               >
-                {{ user.displayName }}
+                <span v-if="user.displayName">
+                  {{ user.displayName }}
+                </span>
+                <span v-else> (Unnamed user) </span>
               </div>
             </div>
             <div v-if="user.email">
@@ -51,50 +76,93 @@
           </div>
 
           <div class="flex justify-start mt-8">
+            <span v-if="!user.isAdmin">
+              <HoppButtonPrimary
+                class="mr-4"
+                filled
+                outline
+                label="Make Admin"
+                @click="makeUserAdmin(user.uid)"
+              />
+            </span>
+            <span v-else>
+              <HoppButtonPrimary
+                class="mr-4"
+                filled
+                outline
+                label="Remove Admin Privilege"
+                @click="makeAdminToUser(user.uid)"
+              />
+            </span>
             <HoppButtonSecondary
-              class="mr-4"
+              v-if="!user.isAdmin"
+              class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
               filled
               outline
               label="Delete"
               @click="deleteUser(user.uid)"
             />
+
+            <HoppButtonSecondary
+              v-if="user.isAdmin"
+              class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
+              filled
+              outline
+              label="Delete"
+              @click="
+                toast.error('Remove admin privilege to delete the user!!')
+              "
+            />
           </div>
         </div>
       </div>
     </div>
     <HoppSmartConfirmModal
       :show="confirmDeletion"
-      :title="`Confirm Deletion of User?`"
+      :title="`Confirm deletion of user?`"
       @hide-modal="confirmDeletion = false"
       @resolve="deleteUserMutation(deleteUserUID)"
     />
+    <HoppSmartConfirmModal
+      :show="confirmUserToAdmin"
+      :title="`Do you want to make this user into an admin?`"
+      @hide-modal="confirmUserToAdmin = false"
+      @resolve="makeUserAdminMutation(userToAdminUID)"
+    />
+    <HoppSmartConfirmModal
+      :show="confirmAdminToUser"
+      :title="`Do you want to remove admin status from this user?`"
+      @hide-modal="confirmAdminToUser = false"
+      @resolve="makeAdminToUserMutation(adminToUserUID)"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useMutation } from '@urql/vue';
 import {
+  MakeUserAdminDocument,
   UserInfoDocument,
   RemoveUserAccountByAdminDocument,
+  RemoveUserAsAdminDocument,
 } from '../../helpers/backend/graphql';
 import { useClientHandle } from '@urql/vue';
 import { format } from 'date-fns';
 import { useRoute, useRouter } from 'vue-router';
 import { useToast } from '../../composables/toast';
-import { HoppButtonSecondary, HoppSmartSpinner } from '@hoppscotch/ui';
+
+const toast = useToast();
 
 // Get Proper Date Formats
 const getCreatedDateAndTime = (date: string) =>
   format(new Date(date), 'd-MM-yyyy  hh:mm a');
 
-const route = useRoute();
-const toast = useToast();
-
 // Get User Info
 const user = ref();
 const { client } = useClientHandle();
 const fetching = ref(true);
+const route = useRoute();
 
 onMounted(async () => {
   fetching.value = true;
@@ -103,7 +171,7 @@ onMounted(async () => {
     .toPromise();
 
   if (result.error) {
-    toast.error('Unable to Load User Info..');
+    toast.error('Unable to load user info..');
   }
   user.value = result.data?.admin.userInfo ?? {};
   fetching.value = false;
@@ -123,19 +191,77 @@ const deleteUser = (id: string) => {
 const deleteUserMutation = async (id: string | null) => {
   if (!id) {
     confirmDeletion.value = false;
-    toast.error('User Deletion Failed');
+    toast.error('User deletion failed!!');
     return;
   }
   const variables = { uid: id };
   await userDeletion.executeMutation(variables).then((result) => {
     if (result.error) {
-      toast.error('User Deletion Failed');
+      toast.error('User deletion failed!!');
     } else {
-      toast.success('User Deleted Successfully');
+      toast.success('User deleted successfully!!');
     }
   });
   confirmDeletion.value = false;
   deleteUserUID.value = null;
   router.push('/users');
 };
+
+// Make User Admin
+const userToAdmin = useMutation(MakeUserAdminDocument);
+const confirmUserToAdmin = ref(false);
+const userToAdminUID = ref<string | null>(null);
+
+const makeUserAdmin = (id: string) => {
+  confirmUserToAdmin.value = true;
+  userToAdminUID.value = id;
+};
+
+const makeUserAdminMutation = async (id: string | null) => {
+  if (!id) {
+    confirmUserToAdmin.value = false;
+    toast.error('User deletion failed!!');
+    return;
+  }
+  const variables = { uid: id };
+  await userToAdmin.executeMutation(variables).then((result) => {
+    if (result.error) {
+      toast.error('Failed to make user an admin!!');
+    } else {
+      user.value.isAdmin = true;
+      toast.success('User is now an admin!!');
+    }
+  });
+  confirmUserToAdmin.value = false;
+  userToAdminUID.value = null;
+};
+
+// Remove Admin Status from a current admin user
+const adminToUser = useMutation(RemoveUserAsAdminDocument);
+const confirmAdminToUser = ref(false);
+const adminToUserUID = ref<string | null>(null);
+
+const makeAdminToUser = (id: string) => {
+  confirmAdminToUser.value = true;
+  adminToUserUID.value = id;
+};
+
+const makeAdminToUserMutation = async (id: string | null) => {
+  if (!id) {
+    confirmAdminToUser.value = false;
+    toast.error('Failed to remove admin status!!');
+    return;
+  }
+  const variables = { uid: id };
+  await adminToUser.executeMutation(variables).then((result) => {
+    if (result.error) {
+      toast.error('Failed to remove admin status!!');
+    } else {
+      user.value.isAdmin = false;
+      toast.success('Admin status removed!!');
+    }
+  });
+  confirmAdminToUser.value = false;
+  adminToUserUID.value = null;
+};
 </script>

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

@@ -1,23 +1,23 @@
 <template>
   <div>
-    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Users</h3>
+    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">Users</h3>
 
-    <!-- Table List View for All Users -->
+    <!-- Table View for All Users -->
     <div class="flex flex-col">
-      <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-4 lg:-mx-8 lg:px-8">
+      <div class="pt-2 my-2 overflow-x-auto sm:-mx-6 sm:px-4 lg:-mx-8 lg:px-8">
         <div class="inline-block min-w-full overflow-hidden align-middle">
-          <div class="sm:px-7 p-4">
+          <div class="sm:px-7 px-4 pt-4 pb-1">
             <div class="flex w-full items-center mb-7">
               <HoppButtonPrimary
                 class="mr-4"
-                label="Invite User"
+                label="Invite a User"
                 @click="showInviteUserModal = true"
               />
 
               <HoppButtonSecondary
                 filled
                 outline
-                label="Invite Users"
+                label="Invited Users"
                 :to="'/users/invited'"
               />
             </div>
@@ -36,13 +36,13 @@
               >
                 <thead>
                   <tr
-                    class="text-gray-200 border-b border-gray-600 text-sm text-center"
+                    class="text-gray-200 border-b border-gray-600 text-sm font-bold"
                   >
-                    <th class="font-normal px-3 pt-0 pb-3">User ID</th>
+                    <th class="px-3 pt-0 pb-3">User ID</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Name</th>
+                    <th class="px-3 pt-0 pb-3">Name</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Email</th>
+                    <th class="px-3 pt-0 pb-3">Email</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Date</th>
+                    <th class="px-3 pt-0 pb-3">Date</th>
-                    <th class="font-normal px-3 pt-0 pb-3"></th>
+                    <th class="px-3 pt-0 pb-3"></th>
                   </tr>
                 </thead>
 
@@ -50,7 +50,7 @@
                   <tr
                     v-for="user in usersList"
                     :key="user.uid"
-                    class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
+                    class="border-b border-gray-600 hover:bg-zinc-800 hover:cursor-pointer rounded-xl"
                   >
                     <td
                       @click="goToUserDetails(user)"
@@ -62,57 +62,56 @@
                         </span>
                       </div>
                     </td>
+
                     <td
                       @click="goToUserDetails(user)"
                       class="sm:p-3 py-2 px-1 0"
                     >
                       <div
                         v-if="user.displayName"
-                        class="flex items-center justify-center"
+                        class="flex items-center ml-2"
                       >
                         {{ user.displayName }}
                         <span
                           v-if="user.isAdmin"
-                          class="rounded-xl p-1 border-1 border-emerald-600 text-xs text-emerald-600 ml-2"
+                          class="rounded-xl p-1 bg-emerald-300 bg-opacity-15 border-1 border-emerald-400 text-xs text-emerald-400 px-2 ml-2"
                         >
                           Admin
                         </span>
                       </div>
-                      <div
+                      <div v-else class="flex items-center">
-                        v-else
+                        <span class="ml-2"> (Unnamed user) </span>
-                        class="flex items-center justify-center text-center"
-                      >
-                        <span v-if="!user.isAdmin"> - </span>
                         <span
                           v-if="user.isAdmin"
-                          class="rounded-xl p-1 border-1 border-emerald-600 text-xs text-emerald-600 ml-2"
+                          class="rounded-xl p-1 bg-emerald-300 bg-opacity-15 border-1 border-emerald-400 text-xs text-emerald-400 px-2 ml-2"
                         >
                           Admin
                         </span>
                       </div>
                     </td>
-                    <td
-                      @click="goToUserDetails(user)"
-                      class="sm:p-3 py-2 px-1 text-sky-300 text-center"
-                    >
-                      {{ user.email }}
-                    </td>
 
                     <td @click="goToUserDetails(user)" class="sm:p-3 py-2 px-1">
-                      <div class="flex items-center justify-center">
+                      <span class="ml-2">
+                        {{ user.email }}
+                      </span>
+                    </td>
+
+                    <td @click="goToUserDetails(user)" class="sm:p-3 py-2 px-1">
+                      <div class="flex items-center ml-2">
                         <div class="flex flex-col">
                           {{ getCreatedDate(user.createdOn) }}
-                          <div class="text-gray-400 text-xs text-center">
+                          <div class="text-gray-400 text-xs">
                             {{ getCreatedTime(user.createdOn) }}
                           </div>
                         </div>
                       </div>
                     </td>
+
                     <td>
                       <div class="relative">
                         <button
                           @click.stop="toggleDropdown(user.uid)"
-                          class="w-8 h-8 dropdown inline-flex items-center justify-right text-gray-400"
+                          class="w-8 h-8 dropdown inline-flex items-center justify-end text-gray-400"
                         >
                           <icon-lucide-more-horizontal />
                         </button>
@@ -127,21 +126,29 @@
                         >
                           <div
                             v-show="activeUserId && activeUserId == user.uid"
-                            class="absolute right-0 z-20 w-28 mt-5 bg-zinc-800 rounded-md shadow-xl"
+                            class="absolute right-0 z-20 bg-zinc-800 rounded-md shadow-xl"
                           >
-                            <button
+                            <HoppSmartItem
                               v-if="!user.isAdmin"
+                              :icon="IconUserCheck"
+                              :label="'Make Admin'"
+                              class="!hover:bg-emerald-600 w-full"
                               @click="makeUserAdmin(user.uid)"
-                              class="block w-full h-10 px-4 py-2 text-sm text-gray-200 hover:bg-emerald-700 hover:text-white rounded-md"
+                            />
-                            >
+                            <HoppSmartItem
-                              Make admin
+                              v-else
-                            </button>
+                              :icon="IconUserMinus"
-                            <button
+                              :label="'Remove Admin Status'"
-                              class="block w-full h-10 px-4 py-2 text-sm text-gray-200 hover:bg-red-700 hover:text-white rounded-md"
+                              class="!hover:bg-emerald-600 w-full"
+                              @click="makeAdminToUser(user.uid)"
+                            />
+                            <HoppSmartItem
+                              v-if="!user.isAdmin"
+                              :icon="IconTrash"
+                              :label="'Delete User'"
+                              class="!hover:bg-red-600 w-full"
                               @click="deleteUser(user.uid)"
-                            >
+                            />
-                              Delete
-                            </button>
                           </div>
                         </transition>
                       </div>
@@ -150,14 +157,15 @@
                 </tbody>
               </table>
 
-              <div v-if="usersList.length >= 20" class="text-center">
+              <div
-                <button
+                v-if="hasNextPage"
-                  @click="fetchNextUsers"
+                class="flex justify-center mt-5 p-2 font-semibold rounded-3xl bg-zinc-800 hover:bg-zinc-700 mx-auto w-32 text-light-500"
-                  class="mt-5 p-2 rounded-3xl bg-gray-700"
+                @click="fetchNextUsers"
-                >
+              >
-                  <icon-lucide-chevron-down class="text-xl" />
+                <span>Show more </span>
-                </button>
+                <icon-lucide-chevron-down class="ml-2 text-lg" />
               </div>
+              <div v-else class="mb-12 p-2"></div>
             </div>
           </div>
         </div>
@@ -204,33 +212,42 @@
 
     <HoppSmartConfirmModal
       :show="confirmDeletion"
-      :title="`Confirm User Deletion?`"
+      :title="`Confirm user deletion?`"
       @hide-modal="confirmDeletion = false"
       @resolve="deleteUserMutation(deleteUserUID)"
     />
     <HoppSmartConfirmModal
       :show="confirmUserToAdmin"
-      :title="`Do you want to make this User into an Admin?`"
+      :title="`Do you want to make this user into an admin?`"
       @hide-modal="confirmUserToAdmin = false"
-      @resolve="makeUserAdminMutation(adminUserUID)"
+      @resolve="makeUserAdminMutation(userToAdminUID)"
+    />
+    <HoppSmartConfirmModal
+      :show="confirmAdminToUser"
+      :title="`Do you want to remove admin status from this user?`"
+      @hide-modal="confirmAdminToUser = false"
+      @resolve="makeAdminToUserMutation(adminToUserUID)"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onBeforeUnmount, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useMutation } from '@urql/vue';
 import {
-  UsersListDocument,
   InviteUserToSignInDocument,
-  RemoveUserAccountByAdminDocument,
   MakeUserAdminDocument,
+  RemoveUserAccountByAdminDocument,
+  RemoveUserAsAdminDocument,
+  UsersListDocument,
 } from '../../helpers/backend/graphql';
 import { usePagedQuery } from '../../composables/usePagedQuery';
 import { format } from 'date-fns';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useToast } from '../../composables/toast';
-import { HoppButtonSecondary, HoppSmartSpinner } from '@hoppscotch/ui';
+import IconTrash from '~icons/lucide/trash';
+import IconUserMinus from '~icons/lucide/user-minus';
+import IconUserCheck from '~icons/lucide/user-check';
 
 const toast = useToast();
 
@@ -244,6 +261,7 @@ const {
   error,
   goToNextPage: fetchNextUsers,
   list: usersList,
+  hasNextPage,
 } = usePagedQuery(
   UsersListDocument,
   (x) => x.admin.allUsers,
@@ -260,14 +278,16 @@ const sendInvite = async () => {
   const variables = { inviteeEmail: email.value.trim() };
   await sendInvitation.executeMutation(variables).then((result) => {
     if (result.error) {
-      toast.error('Failed to Send Invitation');
+      toast.error('Failed to send invitation!!');
     } else {
-      toast.success('Email Invitation Sent Successfully');
+      toast.success('Email invitation sent successfully!!');
+      showInviteUserModal.value = false;
     }
   });
 };
 
 // Go to Individual User Details Page
+const route = useRoute();
 const router = useRouter();
 const goToUserDetails = (user: any) => {
   router.push('/users/' + user.uid);
@@ -294,6 +314,12 @@ const close = (e: any) => {
 onMounted(() => document.addEventListener('click', close));
 onBeforeUnmount(() => document.removeEventListener('click', close));
 
+// Reload Users Page when routed back to the users page
+watch(
+  () => route.params.id,
+  () => window.location.reload()
+);
+
 // User Deletion
 const userDeletion = useMutation(RemoveUserAccountByAdminDocument);
 const confirmDeletion = ref(false);
@@ -307,15 +333,15 @@ const deleteUser = (id: string) => {
 const deleteUserMutation = async (id: string | null) => {
   if (!id) {
     confirmDeletion.value = false;
-    toast.error('User Deletion Failed');
+    toast.error('User deletion failed!!');
     return;
   }
   const variables = { uid: id };
   await userDeletion.executeMutation(variables).then((result) => {
     if (result.error) {
-      toast.error('User Deletion Failed');
+      toast.error('User deletion failed!!');
     } else {
-      toast.success('User Deleted Successfully');
+      toast.success('User deleted successfully!!');
       usersList.value = usersList.value.filter((user) => user.uid !== id);
       toggleDropdown(id);
     }
@@ -327,25 +353,25 @@ const deleteUserMutation = async (id: string | null) => {
 // Make User Admin
 const userToAdmin = useMutation(MakeUserAdminDocument);
 const confirmUserToAdmin = ref(false);
-const adminUserUID = ref<string | null>(null);
+const userToAdminUID = ref<string | null>(null);
 
 const makeUserAdmin = (id: string) => {
   confirmUserToAdmin.value = true;
-  adminUserUID.value = id;
+  userToAdminUID.value = id;
 };
 
 const makeUserAdminMutation = async (id: string | null) => {
   if (!id) {
     confirmUserToAdmin.value = false;
-    toast.error('User Deletion Failed');
+    toast.error('Failed to make user an admin!!');
     return;
   }
   const variables = { uid: id };
   await userToAdmin.executeMutation(variables).then((result) => {
     if (result.error) {
-      toast.error('Failed to make user an admin');
+      toast.error('Failed to make user an admin!!');
     } else {
-      toast.success('User is now an Admin');
+      toast.success('User is now an admin!!');
       usersList.value = usersList.value.map((user) => {
         if (user.uid === id) {
           user.isAdmin = true;
@@ -355,6 +381,40 @@ const makeUserAdminMutation = async (id: string | null) => {
     }
   });
   confirmUserToAdmin.value = false;
-  adminUserUID.value = null;
+  userToAdminUID.value = null;
+};
+
+// Remove Admin Status from a current Admin
+const adminToUser = useMutation(RemoveUserAsAdminDocument);
+const confirmAdminToUser = ref(false);
+const adminToUserUID = ref<string | null>(null);
+
+const makeAdminToUser = (id: string) => {
+  confirmAdminToUser.value = true;
+  adminToUserUID.value = id;
+};
+
+const makeAdminToUserMutation = async (id: string | null) => {
+  if (!id) {
+    confirmAdminToUser.value = false;
+    toast.error('Failed to remove admin status!!');
+    return;
+  }
+  const variables = { uid: id };
+  await adminToUser.executeMutation(variables).then((result) => {
+    if (result.error) {
+      toast.error('Failed to remove admin status!!');
+    } else {
+      toast.success('Admin status removed!!');
+      usersList.value = usersList.value.map((user) => {
+        if (user.uid === id) {
+          user.isAdmin = false;
+        }
+        return user;
+      });
+    }
+  });
+  confirmAdminToUser.value = false;
+  adminToUserUID.value = null;
 };
 </script>

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

@@ -1,6 +1,14 @@
 <template>
   <div>
-    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">
+    <div class="ml-3">
+      <button
+        class="p-2 mb-2 rounded-3xl bg-zinc-800"
+        @click="router.push('/users')"
+      >
+        <icon-lucide-arrow-left class="text-xl" />
+      </button>
+    </div>
+    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200 mb-2">
       Invited Users
     </h3>
 
@@ -13,18 +21,18 @@
                 <HoppSmartSpinner />
               </div>
               <div v-else-if="error">
-                <p class="text-xl">No Invited Users Found</p>
+                <p class="text-xl">No Invited Users Found..</p>
               </div>
 
               <table v-else class="w-full text-left">
                 <thead>
                   <tr
-                    class="text-gray-200 border-b border-gray-600 text-sm text-center"
+                    class="text-gray-200 border-b border-gray-600 text-sm font-bold"
                   >
-                    <th class="font-normal px-3 pt-0 pb-3">Admin ID</th>
+                    <th class="px-3 pt-0 pb-3">Admin ID</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Admin Email</th>
+                    <th class="px-3 pt-0 pb-3">Admin Email</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Invitee Email</th>
+                    <th class="px-3 pt-0 pb-3">Invitee Email</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Invited On</th>
+                    <th class="px-3 pt-0 pb-3">Invited On</th>
                   </tr>
                 </thead>
                 <tbody
@@ -35,27 +43,29 @@
                   <tr
                     class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
                   >
-                    <td class="sm:p-3 py-2 px-3 max-w-30">
+                    <td class="sm:p-3 py-2 px-3 max-w-30 ml-2">
-                      <div class="flex justify-center">
+                      <div>
-                        <span class="ml-3 truncate">
+                        <span class="truncate">
                           {{ user?.adminUid }}
                         </span>
                       </div>
                     </td>
-                    <td class="sm:p-3 py-2 px-1 text-sky-300">
+                    <td class="sm:p-3 py-2 px-1">
-                      <div class="flex items-center justify-center">
+                      <span class="flex items-center ml-2">
                         {{ user?.adminEmail }}
-                      </div>
+                      </span>
                     </td>
-                    <td class="sm:p-3 py-2 px-1 text-sky-300 text-center">
+                    <td class="sm:p-3 py-2 px-1 ml-4">
-                      {{ user?.inviteeEmail }}
+                      <span class="ml-2">
+                        {{ user?.inviteeEmail }}
+                      </span>
                     </td>
 
                     <td class="sm:p-3 py-2 px-1">
-                      <div class="flex items-center justify-center">
+                      <div class="flex items-center ml-2">
                         <div class="flex flex-col">
                           {{ getCreatedDate(user?.invitedOn) }}
-                          <div class="text-gray-400 text-xs text-center">
+                          <div class="text-gray-400 text-xs">
                             {{ getCreatedTime(user?.invitedOn) }}
                           </div>
                         </div>
@@ -78,6 +88,9 @@ import { useQuery } from '@urql/vue';
 import { InvitedUsersDocument } from '../../helpers/backend/graphql';
 import { format } from 'date-fns';
 import { HoppSmartSpinner } from '@hoppscotch/ui';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
 
 // Get Proper Date Formats
 const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');

pnpm-lock.yaml

@@ -8853,7 +8853,7 @@ packages:
     hasBin: true
 
   /after/0.8.2:
-    resolution: {integrity: sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=}
+    resolution: {integrity: sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA==}
     dev: false
 
   /agent-base/6.0.2:
@@ -9462,7 +9462,7 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
   /base64-arraybuffer/0.1.4:
-    resolution: {integrity: sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=}
+    resolution: {integrity: sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg==}
     engines: {node: '>= 0.6.0'}
     dev: false
 
@@ -10086,14 +10086,14 @@ packages:
     dev: true
 
   /component-bind/1.0.0:
-    resolution: {integrity: sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=}
+    resolution: {integrity: sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw==}
     dev: false
 
   /component-emitter/1.3.0:
     resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==}
 
   /component-inherit/0.0.3:
-    resolution: {integrity: sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=}
+    resolution: {integrity: sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==}
     dev: false
 
   /concat-map/0.0.1:
@@ -13382,7 +13382,7 @@ packages:
     dev: false
 
   /has-cors/1.1.0:
-    resolution: {integrity: sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=}
+    resolution: {integrity: sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA==}
     dev: false
 
   /has-flag/3.0.0:
@@ -13775,7 +13775,7 @@ packages:
     engines: {node: '>=8'}
 
   /indexof/0.0.1:
-    resolution: {integrity: sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=}
+    resolution: {integrity: sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==}
     dev: false
 
   /inflight/1.0.6:
@@ -19407,7 +19407,7 @@ packages:
     dev: true
 
   /to-array/0.1.4:
-    resolution: {integrity: sha1-F+bBH3PdTz10zaek/zI46a2b+JA=}
+    resolution: {integrity: sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A==}
     dev: false
 
   /to-fast-properties/2.0.0:
@@ -22226,7 +22226,7 @@ packages:
     dev: false
 
   /yeast/0.1.2:
-    resolution: {integrity: sha1-AI4G2AlDIMNy28L47XagymyKxBk=}
+    resolution: {integrity: sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==}
     dev: false
 
   /yn/3.1.1: