fix: make users table scrollable (#10311)

* scrollable

* simplify

* scroll

* test

* clean

* fix it

* clean

* types

Author: axiomofjoy

app/schema.graphql

@@ -940,6 +940,10 @@ input DeleteUsersInput {
   userIds: [ID!]!
 }
 
+type DeleteUsersPayload {
+  userIds: [ID!]!
+}
+
 type Dimension implements Node {
   """The Globally Unique ID of this object"""
   id: ID!
@@ -1880,7 +1884,7 @@ type Mutation {
   createUser(input: CreateUserInput!): UserMutationPayload!
   patchUser(input: PatchUserInput!): UserMutationPayload!
   patchViewer(input: PatchViewerInput!): UserMutationPayload!
-  deleteUsers(input: DeleteUsersInput!): Void
+  deleteUsers(input: DeleteUsersInput!): DeleteUsersPayload!
 }
 
 """An object with a Globally Unique ID"""
@@ -3384,7 +3388,4 @@ type ValidationResult {
 
 enum VectorDriftMetric {
   euclideanDistance
-}
-
-"""Represents NULL values"""
-scalar Void
+}

app/src/pages/settings/DeleteUserDialog.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { graphql, useMutation } from "react-relay";
+import { type DataID, graphql, useMutation } from "react-relay";
 
 import {
   Button,
@@ -18,16 +18,23 @@ import { getErrorMessagesFromRelayMutationError } from "@phoenix/utils/errorUtil
 
 export function DeleteUserDialog({
   userId,
+  connectionIds,
   onDeleted,
   onClose,
 }: {
   userId: string;
+  connectionIds: DataID[];
   onDeleted: () => void;
   onClose: () => void;
 }) {
   const [commit, isCommitting] = useMutation(graphql`
-    mutation DeleteUserDialogMutation($input: DeleteUsersInput!) {
-      deleteUsers(input: $input)
+    mutation DeleteUserDialogMutation(
+      $input: DeleteUsersInput!
+      $connectionIds: [ID!]!
+    ) {
+      deleteUsers(input: $input) {
+        userIds @deleteEdge(connections: $connectionIds)
+      }
     }
   `);
 
@@ -40,6 +47,7 @@ export function DeleteUserDialog({
         input: {
           userIds: [userId],
         },
+        connectionIds,
       },
       onCompleted: () => {
         notifySuccess({
@@ -57,7 +65,15 @@ export function DeleteUserDialog({
         });
       },
     });
-  }, [commit, notifyError, notifySuccess, onClose, onDeleted, userId]);
+  }, [
+    commit,
+    connectionIds,
+    notifyError,
+    notifySuccess,
+    onClose,
+    onDeleted,
+    userId,
+  ]);
 
   return (
     <Dialog>

app/src/pages/settings/UserActionMenu.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from "react";
+import { type DataID } from "relay-runtime";
 
 import {
   Button,
@@ -21,8 +22,8 @@ import { ResetPasswordDialog } from "./ResetPasswordDialog";
 
 type UserActionMenuProps = {
   userId: string;
-  onUserDeleted: () => void;
   authMethod: AuthMethod;
+  connectionIds: DataID[];
 };
 
 enum UserAction {
@@ -35,7 +36,7 @@ function isLocalAuth(authMethod: AuthMethod): authMethod is "LOCAL" {
 }
 
 export function UserActionMenu(props: UserActionMenuProps) {
-  const { userId, onUserDeleted, authMethod } = props;
+  const { userId, authMethod, connectionIds } = props;
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [showResetPasswordDialog, setShowResetPasswordDialog] = useState(false);
 
@@ -109,8 +110,8 @@ export function UserActionMenu(props: UserActionMenuProps) {
             <DeleteUserDialog
               userId={userId}
               onClose={() => setShowDeleteDialog(false)}
+              connectionIds={connectionIds}
               onDeleted={() => {
-                onUserDeleted();
                 setShowDeleteDialog(false);
               }}
             />

app/src/pages/settings/UserRoleChangeDialog.tsx

@@ -22,21 +22,25 @@ export function UserRoleChangeDialog({
   email,
   currentRole,
   newRole,
-  onRoleChanged,
   onClose,
 }: {
   userId: string;
   email: string;
   newRole: UserRoleInput;
   currentRole: string;
-  onRoleChanged: () => void;
   onClose: () => void;
 }) {
   const [commit, isCommitting] = useMutation<UserRoleChangeDialogMutation>(
     graphql`
       mutation UserRoleChangeDialogMutation($input: PatchUserInput!) {
         patchUser(input: $input) {
-          __typename
+          user {
+            id
+            role {
+              id
+              name
+            }
+          }
         }
       }
     `
@@ -58,7 +62,6 @@ export function UserRoleChangeDialog({
           title: "Role Changed",
           message: "Users role has been changed.",
         });
-        onRoleChanged();
         onClose();
       },
       onError: (error) => {
@@ -68,15 +71,7 @@ export function UserRoleChangeDialog({
         });
       },
     });
-  }, [
-    commit,
-    newRole,
-    notifyError,
-    notifySuccess,
-    onClose,
-    onRoleChanged,
-    userId,
-  ]);
+  }, [commit, newRole, notifyError, notifySuccess, onClose, userId]);
   return (
     <Dialog>
       <DialogContent>

app/src/pages/settings/UsersCard.tsx

@@ -66,17 +66,15 @@ export function UsersCard() {
         </Button>
       }
     >
-      <View overflow="auto">
-        <Suspense
-          fallback={
-            <View padding="size-200">
-              <Loading />
-            </View>
-          }
-        >
-          <UsersTable query={data} />
-        </Suspense>
-      </View>
+      <Suspense
+        fallback={
+          <View padding="size-200">
+            <Loading />
+          </View>
+        }
+      >
+        <UsersTable query={data} />
+      </Suspense>
       {dialog}
     </Card>
   );