From 14df155f2a8f174a719122e3d4d773cbb7883d2e Mon Sep 17 00:00:00 2001
From: Parker Stafford <52351508+Parker-Stafford@users.noreply.github.com>
Date: Fri, 13 Sep 2024 09:25:07 -0700
Subject: [PATCH] feat(auth): add delete user ui (#4609)

---
 .../components/auth/DeleteAPIKeyButton.tsx    |   2 +-
 app/src/pages/settings/DeleteUserButton.tsx   | 112 ++++++++++++++
 app/src/pages/settings/UsersTable.tsx         |  48 +++++-
 .../DeleteUserButtonMutation.graphql.ts       |  79 ++++++++++
 .../__generated__/UsersCardQuery.graphql.ts   |  13 +-
 .../__generated__/UsersTableQuery.graphql.ts  | 137 ++++++++++++++++++
 .../__generated__/UsersTable_users.graphql.ts |  24 ++-
 7 files changed, 402 insertions(+), 13 deletions(-)
 create mode 100644 app/src/pages/settings/DeleteUserButton.tsx
 create mode 100644 app/src/pages/settings/__generated__/DeleteUserButtonMutation.graphql.ts
 create mode 100644 app/src/pages/settings/__generated__/UsersTableQuery.graphql.ts

diff --git a/app/src/components/auth/DeleteAPIKeyButton.tsx b/app/src/components/auth/DeleteAPIKeyButton.tsx
index e38e376278..346b25c719 100644
--- a/app/src/components/auth/DeleteAPIKeyButton.tsx
+++ b/app/src/components/auth/DeleteAPIKeyButton.tsx
@@ -20,7 +20,7 @@ export function DeleteAPIKeyButton({
 
   const onDelete = () => {
     setDialog(
-      <Dialog title="Delete System Key">
+      <Dialog title="Delete API Key">
         <View padding="size-200">
           <Text color="danger">
             {`Are you sure you want to delete this key? This cannot be undone and will disable all uses of this key.`}
diff --git a/app/src/pages/settings/DeleteUserButton.tsx b/app/src/pages/settings/DeleteUserButton.tsx
new file mode 100644
index 0000000000..876b632c1d
--- /dev/null
+++ b/app/src/pages/settings/DeleteUserButton.tsx
@@ -0,0 +1,112 @@
+import React, { ReactNode, useCallback, useState } from "react";
+import { graphql, useMutation } from "react-relay";
+
+import {
+  Button,
+  Dialog,
+  DialogContainer,
+  Flex,
+  Icon,
+  Icons,
+  Text,
+  View,
+} from "@arizeai/components";
+
+import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
+
+import { DeleteUserButtonMutation } from "./__generated__/DeleteUserButtonMutation.graphql";
+
+export function DeleteUserButton({
+  userId,
+  onDeleted,
+}: {
+  userId: string;
+  onDeleted: () => void;
+}) {
+  const [dialog, setDialog] = useState<ReactNode>(null);
+
+  const [commit, isCommitting] = useMutation<DeleteUserButtonMutation>(graphql`
+    mutation DeleteUserButtonMutation($input: DeleteUsersInput!) {
+      deleteUsers(input: $input)
+    }
+  `);
+
+  const notifySuccess = useNotifySuccess();
+  const notifyError = useNotifyError();
+
+  const handleDelete = useCallback(() => {
+    commit({
+      variables: {
+        input: {
+          userIds: [userId],
+        },
+      },
+      onCompleted: () => {
+        notifySuccess({
+          title: "User deleted",
+          message: "User has been deleted.",
+        });
+        onDeleted();
+      },
+      onError: (error) => {
+        notifyError({
+          title: "Failed to delete user",
+          message: error.message,
+        });
+      },
+    });
+  }, [commit, notifyError, notifySuccess, onDeleted, userId]);
+
+  const onDelete = () => {
+    setDialog(
+      <Dialog title="Delete User">
+        <View padding="size-200">
+          <Text color="danger">
+            {`Are you sure you want to delete this user? This action cannot be undone. The user will be permanently blocked, and cannot be reactivated with the same email or username.`}
+          </Text>
+        </View>
+        <View
+          paddingEnd="size-200"
+          paddingTop="size-100"
+          paddingBottom="size-100"
+          borderTopColor="light"
+          borderTopWidth="thin"
+        >
+          <Flex direction="row" justifyContent="end">
+            <Button
+              variant="danger"
+              onClick={() => {
+                handleDelete();
+                setDialog(null);
+              }}
+            >
+              Delete user
+            </Button>
+          </Flex>
+        </View>
+      </Dialog>
+    );
+  };
+  return (
+    <>
+      <Button
+        variant="danger"
+        size="compact"
+        icon={<Icon svg={<Icons.TrashOutline />} />}
+        aria-label="Delete User"
+        onClick={() => {
+          onDelete();
+        }}
+        disabled={isCommitting}
+      />
+      <DialogContainer
+        isDismissable
+        onDismiss={() => {
+          setDialog(null);
+        }}
+      >
+        {dialog}
+      </DialogContainer>
+    </>
+  );
+}
diff --git a/app/src/pages/settings/UsersTable.tsx b/app/src/pages/settings/UsersTable.tsx
index f95423fe7e..3501a905fa 100644
--- a/app/src/pages/settings/UsersTable.tsx
+++ b/app/src/pages/settings/UsersTable.tsx
@@ -1,5 +1,5 @@
-import React, { useMemo } from "react";
-import { graphql, useFragment } from "react-relay";
+import React, { startTransition, useMemo } from "react";
+import { graphql, useRefetchableFragment } from "react-relay";
 import {
   flexRender,
   getCoreRowModel,
@@ -7,21 +7,33 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 
-import { Icon, Icons } from "@arizeai/components";
+import { Flex, Icon, Icons } from "@arizeai/components";
 
 import { tableCSS } from "@phoenix/components/table/styles";
 import { TableEmpty } from "@phoenix/components/table/TableEmpty";
 import { TimestampCell } from "@phoenix/components/table/TimestampCell";
 
 import { UsersTable_users$key } from "./__generated__/UsersTable_users.graphql";
+import { UsersTableQuery } from "./__generated__/UsersTableQuery.graphql";
+import { DeleteUserButton } from "./DeleteUserButton";
+
+const isDefaultAdminUser = (user: {
+  email: string;
+  username?: string | null;
+}) => user.email === "admin@localhost" || user.username === "admin";
 
 export function UsersTable({ query }: { query: UsersTable_users$key }) {
-  const data = useFragment<UsersTable_users$key>(
+  const [data, refetch] = useRefetchableFragment<
+    UsersTableQuery,
+    UsersTable_users$key
+  >(
     graphql`
-      fragment UsersTable_users on Query {
+      fragment UsersTable_users on Query
+      @refetchable(queryName: "UsersTableQuery") {
         users {
           edges {
             user: node {
+              id
               email
               username
               createdAt
@@ -38,6 +50,7 @@ export function UsersTable({ query }: { query: UsersTable_users$key }) {
 
   const tableData = useMemo(() => {
     return data.users.edges.map(({ user }) => ({
+      id: user.id,
       email: user.email,
       username: user.username,
       createdAt: user.createdAt,
@@ -65,6 +78,31 @@ export function UsersTable({ query }: { query: UsersTable_users$key }) {
         accessorKey: "createdAt",
         cell: TimestampCell,
       },
+      {
+        header: "",
+        accessorKey: "id",
+        size: 10,
+        cell: ({ row }) => {
+          if (isDefaultAdminUser(row.original)) {
+            return null;
+          }
+          return (
+            <Flex direction="row" justifyContent="end" width="100%">
+              <DeleteUserButton
+                userId={row.original.id}
+                onDeleted={() => {
+                  startTransition(() => {
+                    refetch({}, { fetchPolicy: "network-only" });
+                  });
+                }}
+              />
+            </Flex>
+          );
+        },
+        meta: {
+          textAlign: "right",
+        },
+      },
     ],
     data: tableData,
     getCoreRowModel: getCoreRowModel(),
diff --git a/app/src/pages/settings/__generated__/DeleteUserButtonMutation.graphql.ts b/app/src/pages/settings/__generated__/DeleteUserButtonMutation.graphql.ts
new file mode 100644
index 0000000000..cbbac9b01c
--- /dev/null
+++ b/app/src/pages/settings/__generated__/DeleteUserButtonMutation.graphql.ts
@@ -0,0 +1,79 @@
+/**
+ * @generated SignedSource<<0f00e8a917dff0a8df7c51f36bc2f92f>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest, Mutation } from 'relay-runtime';
+export type DeleteUsersInput = {
+  userIds: ReadonlyArray<string>;
+};
+export type DeleteUserButtonMutation$variables = {
+  input: DeleteUsersInput;
+};
+export type DeleteUserButtonMutation$data = {
+  readonly deleteUsers: any | null;
+};
+export type DeleteUserButtonMutation = {
+  response: DeleteUserButtonMutation$data;
+  variables: DeleteUserButtonMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "kind": "ScalarField",
+    "name": "deleteUsers",
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "DeleteUserButtonMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "DeleteUserButtonMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "9c580e6fdf5c72a5b9bc1a11aa523b87",
+    "id": null,
+    "metadata": {},
+    "name": "DeleteUserButtonMutation",
+    "operationKind": "mutation",
+    "text": "mutation DeleteUserButtonMutation(\n  $input: DeleteUsersInput!\n) {\n  deleteUsers(input: $input)\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "7d9741f45b81bebe929c19f0378c17a0";
+
+export default node;
diff --git a/app/src/pages/settings/__generated__/UsersCardQuery.graphql.ts b/app/src/pages/settings/__generated__/UsersCardQuery.graphql.ts
index 80ea0586f7..4f4a659f9e 100644
--- a/app/src/pages/settings/__generated__/UsersCardQuery.graphql.ts
+++ b/app/src/pages/settings/__generated__/UsersCardQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<3d4d387e015d37cc173f1296a745d953>>
+ * @generated SignedSource<<bb1d77197ecb892027e7df9a8167f18b>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -65,6 +65,13 @@ const node: ConcreteRequest = {
                 "name": "node",
                 "plural": false,
                 "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "id",
+                    "storageKey": null
+                  },
                   {
                     "alias": null,
                     "args": null,
@@ -116,12 +123,12 @@ const node: ConcreteRequest = {
     ]
   },
   "params": {
-    "cacheID": "475e4a6a89583e17246b7f9fe5b0cb84",
+    "cacheID": "3f0bf033ced909f3b3bd00f99d0903fe",
     "id": null,
     "metadata": {},
     "name": "UsersCardQuery",
     "operationKind": "query",
-    "text": "query UsersCardQuery {\n  ...UsersTable_users\n}\n\nfragment UsersTable_users on Query {\n  users {\n    edges {\n      user: node {\n        email\n        username\n        createdAt\n        role {\n          name\n        }\n      }\n    }\n  }\n}\n"
+    "text": "query UsersCardQuery {\n  ...UsersTable_users\n}\n\nfragment UsersTable_users on Query {\n  users {\n    edges {\n      user: node {\n        id\n        email\n        username\n        createdAt\n        role {\n          name\n        }\n      }\n    }\n  }\n}\n"
   }
 };
 
diff --git a/app/src/pages/settings/__generated__/UsersTableQuery.graphql.ts b/app/src/pages/settings/__generated__/UsersTableQuery.graphql.ts
new file mode 100644
index 0000000000..859056e05a
--- /dev/null
+++ b/app/src/pages/settings/__generated__/UsersTableQuery.graphql.ts
@@ -0,0 +1,137 @@
+/**
+ * @generated SignedSource<<9e40a51149ed2b8af8e110739eacab3f>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest, Query } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type UsersTableQuery$variables = Record<PropertyKey, never>;
+export type UsersTableQuery$data = {
+  readonly " $fragmentSpreads": FragmentRefs<"UsersTable_users">;
+};
+export type UsersTableQuery = {
+  response: UsersTableQuery$data;
+  variables: UsersTableQuery$variables;
+};
+
+const node: ConcreteRequest = {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "UsersTableQuery",
+    "selections": [
+      {
+        "args": null,
+        "kind": "FragmentSpread",
+        "name": "UsersTable_users"
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "UsersTableQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "UserConnection",
+        "kind": "LinkedField",
+        "name": "users",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "UserEdge",
+            "kind": "LinkedField",
+            "name": "edges",
+            "plural": true,
+            "selections": [
+              {
+                "alias": "user",
+                "args": null,
+                "concreteType": "User",
+                "kind": "LinkedField",
+                "name": "node",
+                "plural": false,
+                "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "id",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "email",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "username",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "createdAt",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "UserRole",
+                    "kind": "LinkedField",
+                    "name": "role",
+                    "plural": false,
+                    "selections": [
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "name",
+                        "storageKey": null
+                      }
+                    ],
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "0245c1369e7c90133ed938ba989f6d18",
+    "id": null,
+    "metadata": {},
+    "name": "UsersTableQuery",
+    "operationKind": "query",
+    "text": "query UsersTableQuery {\n  ...UsersTable_users\n}\n\nfragment UsersTable_users on Query {\n  users {\n    edges {\n      user: node {\n        id\n        email\n        username\n        createdAt\n        role {\n          name\n        }\n      }\n    }\n  }\n}\n"
+  }
+};
+
+(node as any).hash = "8ee32a96431dda537d1322a7623a8107";
+
+export default node;
diff --git a/app/src/pages/settings/__generated__/UsersTable_users.graphql.ts b/app/src/pages/settings/__generated__/UsersTable_users.graphql.ts
index a037884ae6..83e392008d 100644
--- a/app/src/pages/settings/__generated__/UsersTable_users.graphql.ts
+++ b/app/src/pages/settings/__generated__/UsersTable_users.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<2f6a03d56a2b1c81095de0c7a7fceabc>>
+ * @generated SignedSource<<5baead45bba9527405fa14e5e6df2d6f>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -8,7 +8,7 @@
 /* eslint-disable */
 // @ts-nocheck
 
-import { Fragment, ReaderFragment } from 'relay-runtime';
+import { ReaderFragment, RefetchableFragment } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type UsersTable_users$data = {
   readonly users: {
@@ -16,6 +16,7 @@ export type UsersTable_users$data = {
       readonly user: {
         readonly createdAt: string;
         readonly email: string;
+        readonly id: string;
         readonly role: {
           readonly name: string;
         };
@@ -30,10 +31,18 @@ export type UsersTable_users$key = {
   readonly " $fragmentSpreads": FragmentRefs<"UsersTable_users">;
 };
 
+import UsersTableQuery_graphql from './UsersTableQuery.graphql';
+
 const node: ReaderFragment = {
   "argumentDefinitions": [],
   "kind": "Fragment",
-  "metadata": null,
+  "metadata": {
+    "refetch": {
+      "connection": null,
+      "fragmentPathInResult": [],
+      "operation": UsersTableQuery_graphql
+    }
+  },
   "name": "UsersTable_users",
   "selections": [
     {
@@ -60,6 +69,13 @@ const node: ReaderFragment = {
               "name": "node",
               "plural": false,
               "selections": [
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "id",
+                  "storageKey": null
+                },
                 {
                   "alias": null,
                   "args": null,
@@ -113,6 +129,6 @@ const node: ReaderFragment = {
   "abstractKey": null
 };
 
-(node as any).hash = "a87302705dfc7b091db312313f46ec4f";
+(node as any).hash = "8ee32a96431dda537d1322a7623a8107";
 
 export default node;