feat: allow admins to delete users

frontend/src/hooks/api/users/index.tsx

@@ -1,6 +1,7 @@
 export {
   useAddUserToWsE2EE,
   useAddUserToWsNonE2EE,
+  useDeleteUser,
   useSendEmailVerificationCode,
   useVerifyEmailVerificationCode
 } from "./mutation";
@@ -10,7 +11,6 @@ export {
   useCreateAPIKey,
   useDeleteAPIKey,
   useDeleteOrgMembership,
-  useDeleteUser,
   useGetMyAPIKeys,
   useGetMyAPIKeysV2,
   useGetMyIp,
@@ -19,6 +19,7 @@ export {
   useGetOrgUsers,
   useGetUser,
   useGetUserAction,
+  useListUsers,
   useLogoutUser,
   useRegisterUserAction,
   useRevokeMySessions,

frontend/src/hooks/api/users/mutation.tsx

@@ -112,3 +112,17 @@ export const useUpdateUserProjectFavorites = () => {
     }
   });
 };
+
+export const useDeleteUser = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (userId: string) => {
+      await apiRequest.delete(`/api/v1/user/${userId}`);
+
+      return {};
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(userKeys.listUsers);
+    }
+  });
+};

frontend/src/hooks/api/users/queries.tsx

@@ -28,6 +28,7 @@ export const userKeys = {
   myAPIKeys: ["api-keys"] as const,
   myAPIKeysV2: ["api-keys-v2"] as const,
   mySessions: ["sessions"] as const,
+  listUsers: ["user-list"] as const,
 
   myOrganizationProjects: (orgId: string) => [{ orgId }, "organization-projects"] as const
 };
@@ -40,6 +41,14 @@ export const fetchUserDetails = async () => {
 
 export const useGetUser = () => useQuery(userKeys.getUser, fetchUserDetails);
 
+export const fetchUsersList = async () => {
+  const { data } = await apiRequest.get<{ users: User[] }>("/api/v1/user/list");
+
+  return data.users;
+};
+
+export const useListUsers = () => useQuery(userKeys.listUsers, fetchUsersList);
+
 export const useDeleteUser = () => {
   const queryClient = useQueryClient();
 

frontend/src/views/admin/DashboardPage/DashboardPage.tsx

@@ -26,11 +26,13 @@ import { useGetOrganizations, useUpdateServerConfig } from "@app/hooks/api";
 
 import { AuthPanel } from "./AuthPanel";
 import { RateLimitPanel } from "./RateLimitPanel";
+import { UserPanel } from "./UserPanel";
 
 enum TabSections {
   Settings = "settings",
   Auth = "auth",
-  RateLimit = "rate-limit"
+  RateLimit = "rate-limit",
+  Users = "users"
 }
 
 enum SignUpModes {
@@ -135,6 +137,7 @@ export const AdminDashboardPage = () => {
                 <Tab value={TabSections.Settings}>General</Tab>
                 <Tab value={TabSections.Auth}>Authentication</Tab>
                 <Tab value={TabSections.RateLimit}>Rate Limit</Tab>
+                <Tab value={TabSections.Users}>Users</Tab>
               </div>
             </TabList>
             <TabPanel value={TabSections.Settings}>
@@ -320,6 +323,9 @@ export const AdminDashboardPage = () => {
             <TabPanel value={TabSections.RateLimit}>
               <RateLimitPanel />
             </TabPanel>
+            <TabPanel value={TabSections.Users}>
+              <UserPanel />
+            </TabPanel>
           </Tabs>
         </div>
       )}

frontend/src/views/admin/DashboardPage/UserPanel.tsx

@@ -0,0 +1,136 @@
+import { useMemo, useState } from "react";
+import { faMagnifyingGlass, faUsers, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  DeleteActionModal,
+  EmptyState,
+  IconButton,
+  Input,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useUser } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteUser, useListUsers } from "@app/hooks/api";
+
+export const UserPanel = () => {
+  const [searchMemberFilter, setSearchMemberFilter] = useState("");
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "removeUser"
+  ] as const);
+
+  const { user } = useUser();
+  const userId = user?.id || "";
+  const { data: users, isLoading } = useListUsers();
+  const { mutateAsync: deleteUser } = useDeleteUser();
+
+  const filterdUsers = useMemo(
+    () =>
+      users?.filter(
+        ({ firstName, lastName, username, email }) =>
+          firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          username?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          email?.toLowerCase().includes(searchMemberFilter.toLowerCase())
+      ),
+    [users, searchMemberFilter]
+  );
+
+  const handleRemoveUser = async () => {
+    const { id } = popUp?.removeUser?.data as { id: string; username: string };
+
+    try {
+      await deleteUser(id);
+      createNotification({
+        type: "success",
+        text: "Successfully deleted user"
+      });
+    } catch (err) {
+      createNotification({
+        type: "error",
+        text: "Error deleting user"
+      });
+    }
+
+    handlePopUpClose("removeUser");
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4">
+        <p className="text-xl font-semibold text-mineshaft-100">Users</p>
+      </div>
+      <Input
+        value={searchMemberFilter}
+        onChange={(e) => setSearchMemberFilter(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search members..."
+      />
+
+      <div className="mt-4">
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th>Name</Th>
+                <Th>Username</Th>
+                <Th className="w-5" />
+              </Tr>
+            </THead>
+            <TBody>
+              {isLoading && <TableSkeleton columns={4} innerKey="users" />}
+              {!isLoading &&
+                filterdUsers?.map(({ username, email, firstName, lastName, id }) => {
+                  const name = firstName || lastName ? `${firstName} ${lastName}` : "-";
+
+                  return (
+                    <Tr key={`user-${id}`} className="w-full">
+                      <Td>{name}</Td>
+                      <Td>{email}</Td>
+                      <Td>
+                        {userId !== id && (
+                          <div className="flex items-center space-x-2">
+                            <IconButton
+                              size="lg"
+                              colorSchema="danger"
+                              variant="plain"
+                              ariaLabel="update"
+                              className="ml-4"
+                              isDisabled={userId === id}
+                              onClick={() => handlePopUpOpen("removeUser", { username, id })}
+                            >
+                              <FontAwesomeIcon icon={faXmark} />
+                            </IconButton>
+                          </div>
+                        )}
+                      </Td>
+                    </Tr>
+                  );
+                })}
+            </TBody>
+          </Table>
+          {!isLoading && filterdUsers?.length === 0 && (
+            <EmptyState title="No users found" icon={faUsers} />
+          )}
+        </TableContainer>
+      </div>
+      <DeleteActionModal
+        isOpen={popUp.removeUser.isOpen}
+        deleteKey="remove"
+        title={`Are you sure you want to delete User with username ${
+          (popUp?.removeUser?.data as { id: string; username: string })?.username || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("removeUser", isOpen)}
+        onDeleteApproved={handleRemoveUser}
+      />
+    </div>
+  );
+};