feat(auth): users table in settings (#4221)

app/src/pages/settings/SettingsPage.tsx

@@ -1,12 +1,14 @@
-import React from "react";
+import React, { Suspense } from "react";
 import { css } from "@emotion/react";
 
 import { Card, Flex, TextField, View } from "@arizeai/components";
 
-import { CopyToClipboardButton } from "@phoenix/components";
+import { CopyToClipboardButton, Loading } from "@phoenix/components";
 import { BASE_URL, VERSION } from "@phoenix/config";
 import { useFunctionality } from "@phoenix/contexts/FunctionalityContext";
 
+import { UsersTable } from "./UsersTable";
+
 const settingsPageCSS = css`
   padding: var(--ac-global-dimension-size-400);
   max-width: 800px;
@@ -66,8 +68,10 @@ export function SettingsPage() {
           </Card>
         )}
         {authenticationEnabled && (
-          <Card title="Users" variant="compact">
-            Users go here
+          <Card title="Users" variant="compact" bodyStyle={{ padding: 0 }}>
+            <Suspense fallback={<Loading />}>
+              <UsersTable />
+            </Suspense>
           </Card>
         )}
       </Flex>

app/src/pages/settings/UsersTable.tsx

@@ -0,0 +1,132 @@
+import React, { useMemo } from "react";
+import { graphql, useLazyLoadQuery } from "react-relay";
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import { 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 { UsersTableQuery } from "./__generated__/UsersTableQuery.graphql";
+
+export function UsersTable() {
+  const data = useLazyLoadQuery<UsersTableQuery>(
+    graphql`
+      query UsersTableQuery {
+        users {
+          edges {
+            user: node {
+              email
+              username
+              createdAt
+            }
+          }
+        }
+      }
+    `,
+    {}
+  );
+
+  const tableData = useMemo(() => {
+    return data.users.edges.map(({ user }) => ({
+      email: user.email,
+      username: user.username,
+      createdAt: user.createdAt,
+    }));
+  }, [data]);
+
+  type TableRow = (typeof tableData)[number];
+  const table = useReactTable<TableRow>({
+    columns: [
+      {
+        header: "email",
+        accessorKey: "email",
+      },
+      {
+        header: "username",
+        accessorKey: "username",
+      },
+      {
+        header: "created at",
+        accessorKey: "createdAt",
+        cell: TimestampCell,
+      },
+    ],
+    data: tableData,
+    getCoreRowModel: getCoreRowModel(),
+  });
+  const rows = table.getRowModel().rows;
+  const isEmpty = table.getRowModel().rows.length === 0;
+  return (
+    <table css={tableCSS}>
+      <thead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <th colSpan={header.colSpan} key={header.id}>
+                {header.isPlaceholder ? null : (
+                  <div
+                    {...{
+                      className: header.column.getCanSort()
+                        ? "cursor-pointer"
+                        : "",
+                      onClick: header.column.getToggleSortingHandler(),
+                      style: {
+                        left: header.getStart(),
+                        width: header.getSize(),
+                      },
+                    }}
+                  >
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                    {header.column.getIsSorted() ? (
+                      <Icon
+                        className="sort-icon"
+                        svg={
+                          header.column.getIsSorted() === "asc" ? (
+                            <Icons.ArrowUpFilled />
+                          ) : (
+                            <Icons.ArrowDownFilled />
+                          )
+                        }
+                      />
+                    ) : null}
+                  </div>
+                )}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      {isEmpty ? (
+        <TableEmpty />
+      ) : (
+        <tbody>
+          {rows.map((row) => {
+            return (
+              <tr key={row.id}>
+                {row.getVisibleCells().map((cell) => {
+                  return (
+                    <td key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      )}
+    </table>
+  );
+}