feat(sh-admin): enhanced user management in admin dashboard

packages/hoppscotch-sh-admin/locales/en.json

@@ -106,8 +106,18 @@
     "admin_failure": "Failed to make user an admin!!",
     "admin_success": "User is now an admin!!",
     "and": "and",
+    "clear_selection": "Clear Selection",
     "configure_auth": "Check out the documentation to configure auth providers.",
+    "confirm_admin_to_user": "Do you want to remove admin status from this user?",
+    "confirm_admins_to_users": "Do you want to remove admin status from selected users?",
+    "confirm_delete_invite": "Do you want to revoke the selected invite?",
+    "confirm_delete_invites": "Do you want to revoke selected invites?",
+    "confirm_user_deletion": "Confirm user deletion?",
+    "confirm_users_deletion": "Do you want to delete selected users?",
+    "confirm_user_to_admin": "Do you want to make this user into an admin?",
+    "confirm_users_to_admin": "Do you want to make selected users into admins?",
     "confirm_logout": "Confirm Logout",
+    "created_on": "Created On",
     "continue_email": "Continue with Email",
     "continue_github": "Continue with Github",
     "continue_google": "Continue with Google",
@@ -116,12 +126,21 @@
     "create_team_failure": "Failed to create workspace!!",
     "create_team_success": "Workspace created successfully!!",
     "data_sharing_failure": "Failed to update data sharing settings",
+    "delete_invite_failure": "Failed to delete invite!!",
+    "delete_invites_failure": "Failed to delete selected invites!!",
+    "delete_invite_success": "Invite deleted successfully!!",
+    "delete_invites_success": "Selected invites deleted successfully!!",
     "delete_request_failure": "Shared Request deletion failed!!",
     "delete_request_success": "Shared Request deleted successfully!!",
     "delete_team_failure": "Workspace deletion failed!!",
     "delete_team_success": "Workspace deleted successfully!!",
+    "delete_some_users_failure": "Number of Users Not Deleted: {count}",
+    "delete_some_users_success": "Number of Users Deleted: {count}",
+    "delete_user_failed_only_one_admin": "Failed to delete user. There should be atleast one admin!!",
     "delete_user_failure": "User deletion failed!!",
+    "delete_users_failure": "Failed to delete selected users!!",
     "delete_user_success": "User deleted successfully!!",
+    "delete_users_success": "Selected users deleted successfully!!",
     "email": "Email",
     "email_failure": "Failed to send invitation",
     "email_signin_failure": "Failed to login with Email",
@@ -146,16 +165,22 @@
     "reenter_email": "Re-enter email",
     "remove_admin_failure": "Failed to remove admin status!!",
     "remove_admin_success": "Admin status removed!!",
+    "remove_admin_from_users_failure": "Failed to remove admin status from selected users!!",
+    "remove_admin_from_users_success": "Admin status removed from selected users!!",
     "remove_admin_to_delete_user": "Remove admin privilege to delete the user!!",
+    "remove_admin_for_deletion": "Remove admin status before attempting deletion!!",
     "remove_invitee_failure": "Removal of invitee failed!!",
     "remove_invitee_success": "Removal of invitee is successfull!!",
     "remove_member_failure": "Member couldn't be removed!!",
     "remove_member_success": "Member removed successfully!!",
     "rename_team_failure": "Failed to rename workspace!!",
     "rename_team_success": "Workspace renamed successfully!",
+    "rename_user_failure": "Failed to rename user!!",
+    "rename_user_success": "User renamed successfully!!",
     "require_auth_provider": "You need to set atleast one authentication provider to log in.",
     "role_update_failed": "Roles updation has failed!!",
     "role_update_success": "Roles updated successfully!!",
+    "selected": "{count} selected",
     "self_host_docs": "Self Host Documentation",
     "send_magic_link": "Send magic link",
     "setup_failure": "Setup has failed!!",
@@ -164,7 +189,11 @@
     "sign_in_options": "All sign in option",
     "sign_out": "Sign out",
     "team_name_too_short": "Workspace name should be atleast 6 characters long!!",
-    "user_not_found": "User not found in the infra!!"
+    "team_name_long": "Workspace name should be atleast 6 characters long!!",
+    "user_already_invited": "Failed to send invite. User is already invited!!",
+    "user_not_found": "User not found in the infra!!",
+    "users_to_admin_success": "Selected users are elevated to admin status!!",
+    "users_to_admin_failure": "Failed to elevate selected users to admin status!!"
   },
   "teams": {
     "add_member": "Add Member",
@@ -201,7 +230,7 @@
     "name": "Workspace Name",
     "no_members": "No members in this workspace. Add members to this workspace to collaborate",
     "no_pending_invites": "No pending invites",
-    "no_teams": "No workspaces found",
+    "no_teams": "No workspaces found..",
     "pending_invites": "Pending invites",
     "roles": "Roles",
     "roles_description": "Roles are used to control access to the shared collections.",
@@ -226,16 +255,17 @@
     "admin": "Admin",
     "admin_email": "Admin Email",
     "admin_id": "Admin ID",
-    "confirm_admin_to_user": "Do you want to remove admin status from this user?",
-    "confirm_user_deletion": "Confirm user deletion?",
-    "confirm_user_to_admin": "Do you want to make this user into an admin?",
+    "cancel": "Cancel",
     "created_on": "Created On",
     "date": "Date",
     "delete": "Delete",
     "delete_user": "Delete User",
+    "delete_users": "Delete Users",
     "details": "Details",
+    "edit": "Edit",
     "email": "Email",
     "email_address": "Email Address",
+    "empty_name": "Name cannot be empty!!",
     "id": "User ID",
     "invalid_user": "Invalid User",
     "invite_load_list_error": "Unable to Load Invited Users List",
@@ -245,14 +275,18 @@
     "invitee_email": "Invitee Email",
     "load_info_error": "Unable to load user info",
     "load_list_error": "Unable to Load Users List",
-    "make_admin": "Make admin",
+    "make_admin": "Make Admin",
     "name": "Name",
-    "no_invite": "No invited users found",
+    "no_invite": "No pending invites found",
     "no_shared_requests": "No shared requests created by the user",
     "no_users": "No users found",
     "not_found": "User not found",
+    "pending_invites": "Pending Invites",
     "remove_admin_privilege": "Remove Admin Privilege",
     "remove_admin_status": "Remove Admin Status",
+    "rename": "Rename",
+    "revoke_invitation": "Revoke Invitation",
+    "searchbar_placeholder": "Search by name or email..",
     "send_invite": "Send Invite",
     "show_more": "Show more",
     "uid": "UID",

packages/hoppscotch-sh-admin/package.json

@@ -17,7 +17,7 @@
     "@fontsource-variable/material-symbols-rounded": "5.0.5",
     "@fontsource-variable/roboto-mono": "5.0.6",
     "@graphql-typed-document-node/core": "3.1.1",
-    "@hoppscotch/ui": "0.1.0",
+    "@hoppscotch/ui": "0.1.2",
     "@hoppscotch/vue-toasted": "0.1.0",
     "@intlify/unplugin-vue-i18n": "1.2.0",
     "@types/cors": "2.8.13",
@@ -78,4 +78,4 @@
     "singleQuote": true,
     "semi": true
   }
-}
+}

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

@@ -29,8 +29,11 @@ declare module '@vue/runtime-core' {
     HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
     HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
     HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideSearch: typeof import('~icons/lucide/search')['default']
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
     SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default']
     SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default']
     SettingsDataSharing: typeof import('./components/settings/DataSharing.vue')['default']
@@ -48,6 +51,7 @@ declare module '@vue/runtime-core' {
     UsersDetails: typeof import('./components/users/Details.vue')['default']
     UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']
     UsersSharedRequests: typeof import('./components/users/SharedRequests.vue')['default']
+    UsersTable: typeof import('./components/users/Table.vue')['default']
   }
 
 }

packages/hoppscotch-sh-admin/src/components/users/Details.vue

@@ -24,11 +24,40 @@
       </div>
 
       <template v-for="(info, key) in userInfo" :key="key">
-        <div v-if="info.condition">
-          <label class="text-secondaryDark" :for="key">{{ info.label }}</label>
+        <div v-if="key === 'displayName'" class="flex flex-col space-y-3">
+          <label class="text-accentContrast" for="teamname"
+            >{{ t('users.name') }}
+          </label>
           <div
-            class="w-full p-3 mt-2 bg-divider border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+            class="flex bg-divider rounded-md items-stretch flex-1 border border-divider"
+            :class="{
+              '!border-accent': isNameBeingEdited,
+            }"
           >
+            <HoppSmartInput
+              v-model="updatedUserName"
+              styles="bg-transparent flex-1 rounded-md !rounded-r-none disabled:select-none border-r-0 disabled:cursor-default disabled:opacity-50"
+              :placeholder="t('users.name')"
+              :disabled="!isNameBeingEdited"
+            >
+              <template #button>
+                <HoppButtonPrimary
+                  class="!rounded-l-none"
+                  filled
+                  :icon="isNameBeingEdited ? IconSave : IconEdit"
+                  :label="
+                    isNameBeingEdited ? t('users.rename') : t('users.edit')
+                  "
+                  @click="handleNameEdit"
+                />
+              </template>
+            </HoppSmartInput>
+          </div>
+        </div>
+
+        <div v-else-if="info.condition">
+          <label class="text-secondaryDark" :for="key">{{ info.label }}</label>
+          <div class="w-full p-3 mt-2 bg-divider border-gray-600 rounded-md">
             <span>{{ info.value }}</span>
           </div>
         </div>
@@ -70,10 +99,17 @@
 </template>
 
 <script setup lang="ts">
+import { useMutation } from '@urql/vue';
 import { format } from 'date-fns';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from '~/composables/i18n';
 import { useToast } from '~/composables/toast';
-import { UserInfoQuery } from '~/helpers/backend/graphql';
+import {
+  UpdateUserDisplayNameByAdminDocument,
+  UserInfoQuery,
+} from '~/helpers/backend/graphql';
+import IconEdit from '~icons/lucide/edit';
+import IconSave from '~icons/lucide/save';
 import IconTrash from '~icons/lucide/trash';
 import IconUserCheck from '~icons/lucide/user-check';
 import IconUserMinus from '~icons/lucide/user-minus';
@@ -89,6 +125,7 @@ const emit = defineEmits<{
   (event: 'delete-user', userID: string): void;
   (event: 'make-admin', userID: string): void;
   (event: 'remove-admin', userID: string): void;
+  (event: 'update-user-name', newName: string): void;
 }>();
 
 // Get Proper Date Formats
@@ -120,4 +157,62 @@ const userInfo = {
     value: getCreatedDateAndTime(createdOn),
   },
 };
+
+// Contains the actual user name
+const userName = computed({
+  get: () => props.user.displayName,
+  set: (value) => {
+    return value;
+  },
+});
+
+// Contains the stored user name from the actual name before being edited
+const currentUserName = ref('');
+
+// Set the current user name to the actual user name
+onMounted(() => {
+  if (displayName) currentUserName.value = displayName;
+});
+
+// Contains the user name that is being edited
+const updatedUserName = computed({
+  get: () => currentUserName.value,
+  set: (value) => {
+    currentUserName.value = value;
+  },
+});
+
+// Rename the user
+const isNameBeingEdited = ref(false);
+const userRename = useMutation(UpdateUserDisplayNameByAdminDocument);
+
+const handleNameEdit = () => {
+  if (isNameBeingEdited.value) {
+    // If the name is not changed, then return control
+    if (userName.value !== updatedUserName.value) {
+      renameUserName();
+    } else isNameBeingEdited.value = false;
+  } else {
+    isNameBeingEdited.value = true;
+  }
+};
+
+const renameUserName = async () => {
+  if (updatedUserName.value?.trim() === '') {
+    toast.error(t('users.empty_name'));
+    return;
+  }
+
+  const variables = { userUID: uid, name: updatedUserName.value as string };
+  const result = await userRename.executeMutation(variables);
+
+  if (result.error) {
+    toast.error(t('state.rename_user_failure'));
+  } else {
+    isNameBeingEdited.value = false;
+    toast.success(t('state.rename_user_success'));
+    emit('update-user-name', updatedUserName.value as string);
+    userName.value = updatedUserName.value;
+  }
+};
 </script>

packages/hoppscotch-sh-admin/src/components/users/InviteModal.vue

@@ -10,6 +10,7 @@
         v-model="email"
         :label="t('users.email_address')"
         input-styles="floating-input"
+        @submit="sendInvite"
       />
     </template>
     <template #footer>
@@ -18,7 +19,12 @@
           :label="t('users.send_invite')"
           @click="sendInvite"
         />
-        <HoppButtonSecondary label="Cancel" outline filled @click="hideModal" />
+        <HoppButtonSecondary
+          :label="t('users.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </HoppSmartModal>