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

[JoelJacobStephen]

Ticket

• Closes HFE-406
• Depends on HSB-358 feat: admin user management (backend) #3786

Description

This PR brings a ton of features to improve user management in Admin Dashboard.

New Features

1. Admins can now update the name of any user,
2. Bulk actions are now possible in the users table. These actions include:
   • Elevation of multiple users to admin status,
   • Removal of admin status from multiple users,
   • Deletion of multiple users,
3. Ability to search through the users table by name or email address of the users.
4. New page based pagination system for the users table replacing the previous used scroll based pagination system.
5. Ability to revoke pending invites from the pending invites page.

Additional Changes

Due to the changes introduced in HoppSmartTable, all tables in the admin dashboard have been updated to adhere to the new changes.

Screenshot

Checks

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation as required
• All the tests have passed

[jamesgeorge007]

Search and pagination don't play well in the user list view. The computation for total pages doesn't account for search in all cases.

[JoelJacobStephen]

Search and pagination don't play well in the user list view. The computation for total pages doesn't account for search in all cases.

@jamesgeorge007 I've fixed the issue. You can test it now.

[jamesgeorge007]

• A search session has to ensure the page number gets reset to 1.
• At times the entire list gets populated while clearing the search entry at once.

[JoelJacobStephen]

• A search session has to ensure the page number gets reset to 1.
• At times the entire list gets populated while clearing the search entry at once.

@jamesgeorge007 I have resolved these issue.

[jamesgeorge007]

There's an issue arising here while changing the admin status (making a user admin & vice versa) for a user and immediately selecting the row for which the action was performed won't result in the action bar (with toggle admin & delete actions) to show up. It shows up only during the second attempt.

[jamesgeorge007]

This requires an update to @hoppscotch/ui and will be handled separately.

[jamesgeorge007]

LGTM 🚀
Leaving a few pointers below for future reference.

[jamesgeorge007]

To obtain the total search results, we could introduce a new alias type searchResults that takes in the searchString alone and returns the filtered entries to compute the total pages. We also use the @include directive to ensure the above field is fetched only if there's a search query supplied indicated by a new includeSearchResults argument.

query UsersListV2(
  $searchString: String
  $skip: Int
  $take: Int
  $includeSearchResults: Boolean!
) {
  infra {
    allUsersV2(searchString: $searchString, skip: $skip, take: $take) {
      uid
      displayName
      email
      isAdmin
      photoURL
      createdOn
    }
    searchResults: allUsersV2(searchString: $searchString)
      @include(if: $includeSearchResults) {
      uid
    }
  }
}

[jamesgeorge007]

As mentioned above, we could compute the total count with the search results filter applied with modifications to the UsersListV2 GQL query. For the transformation function, we might need to account for the total count of search results x.infra.searchResults.length that also boils down to the requirement for an object. The newly introduced includeSearchResults argument can be supplied here and at the places where refetch is invoked where the value is supplied as searchQuery.value.length > 0 from the search handler where we'd need the total count for search results to update the computation for total pages.

[jamesgeorge007]

Displaying the pagination element is redundant if there is only one page. But, it might lead to layout shifts if the search results don't span multiple pages. We can perhaps move the pagination element along the line with the Invite Users & Pending Invites actions once it is moved out of the HoppSmartTable component; something to think about and decide later.

[jamesgeorge007]

There's a slight difference in height compared to the spinner and the row with actual data. We could leverage the loading-state slot to implement a custom spinner to fine-tune the dimensions.

[nivedin]

can we add the loading state inside the table similar to the User table

[jamesgeorge007]

@JoelJacobStephen, please make a note of these to address separately.

[nivedin]

we can add a class and incorporate the cell styles in that.

[nivedin]

can we use similar padding that of the heading here ? px-6 py-2

[nivedin]

Suggested change

	<HoppSmartInput
	v-model="query"
	styles="w-full bg-primary py-1"
	input-styles="h-full border-none"
	:placeholder="t('users.searchbar_placeholder')"
	/>
	<HoppSmartInput
	v-model="query"
	styles="w-full bg-primary py-1"
	input-styles="h-full border-none"
	:placeholder="t('users.searchbar_placeholder')"
	:autofocus="false"
	/>

we can set autofocus false here

[nivedin]

can use common class name to incorporate the styles