Skip to content

Commit

Permalink
feat(auth): users table in settings (#4221)
Browse files Browse the repository at this point in the history
  • Loading branch information
mikeldking authored Aug 13, 2024
1 parent e535e75 commit 803399f
Show file tree
Hide file tree
Showing 3 changed files with 256 additions and 4 deletions.
12 changes: 8 additions & 4 deletions app/src/pages/settings/SettingsPage.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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>
Expand Down
132 changes: 132 additions & 0 deletions app/src/pages/settings/UsersTable.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
116 changes: 116 additions & 0 deletions app/src/pages/settings/__generated__/UsersTableQuery.graphql.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 803399f

Please sign in to comment.