-
Notifications
You must be signed in to change notification settings - Fork 285
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(auth): add back user api keys table (#4494)
- Loading branch information
1 parent
61e52bd
commit e8e1f85
Showing
6 changed files
with
292 additions
and
195 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| import React, { startTransition, useMemo } from "react"; | ||
| import { graphql, useRefetchableFragment } from "react-relay"; | ||
| import { | ||
| ColumnDef, | ||
| flexRender, | ||
| getCoreRowModel, | ||
| useReactTable, | ||
| } from "@tanstack/react-table"; | ||
|
|
||
| import { Flex, Icon, Icons } from "@arizeai/components"; | ||
|
|
||
| import { TextCell } from "@phoenix/components/table"; | ||
| import { tableCSS } from "@phoenix/components/table/styles"; | ||
| import { TableEmpty } from "@phoenix/components/table/TableEmpty"; | ||
| import { TimestampCell } from "@phoenix/components/table/TimestampCell"; | ||
|
|
||
| import { UserAPIKeysTableFragment$key } from "./__generated__/UserAPIKeysTableFragment.graphql"; | ||
| import { UserAPIKeysTableQuery } from "./__generated__/UserAPIKeysTableQuery.graphql"; | ||
| import { DeleteAPIKeyButton } from "./DeleteAPIKeyButton"; | ||
|
|
||
| export function UserAPIKeysTable({ | ||
| query, | ||
| }: { | ||
| query: UserAPIKeysTableFragment$key; | ||
| }) { | ||
| const [data, refetch] = useRefetchableFragment< | ||
| UserAPIKeysTableQuery, | ||
| UserAPIKeysTableFragment$key | ||
| >( | ||
| graphql` | ||
| fragment UserAPIKeysTableFragment on Query | ||
| @refetchable(queryName: "UserAPIKeysTableQuery") { | ||
| userApiKeys { | ||
| id | ||
| name | ||
| description | ||
| createdAt | ||
| expiresAt | ||
| } | ||
| } | ||
| `, | ||
| query | ||
| ); | ||
|
|
||
| const tableData = useMemo(() => { | ||
| return [...data.userApiKeys]; | ||
| }, [data]); | ||
|
|
||
| type TableRow = (typeof tableData)[number]; | ||
| const columns = useMemo(() => { | ||
| const cols: ColumnDef<TableRow>[] = [ | ||
| { | ||
| header: "Name", | ||
| accessorKey: "name", | ||
| }, | ||
| { | ||
| header: "Description", | ||
| accessorKey: "description", | ||
| cell: TextCell, | ||
| }, | ||
| { | ||
| header: "Created At", | ||
| accessorKey: "createdAt", | ||
| cell: TimestampCell, | ||
| }, | ||
| { | ||
| header: "Expires At", | ||
| accessorKey: "expiresAt", | ||
| cell: TimestampCell, | ||
| }, | ||
| // TODO(parker): Do not render this column for non admins once https://github.com/Arize-ai/phoenix/issues/4454 is done | ||
| { | ||
| header: "", | ||
| accessorKey: "id", | ||
| size: 10, | ||
| cell: () => { | ||
| return ( | ||
| <Flex direction="row" justifyContent="end" width="100%"> | ||
| <DeleteAPIKeyButton | ||
| handleDelete={() => { | ||
| // TODO(parker): implement handle delete when https://github.com/Arize-ai/phoenix/issues/4059 is done | ||
| startTransition(() => { | ||
| refetch( | ||
| {}, | ||
| { | ||
| fetchPolicy: "network-only", | ||
| } | ||
| ); | ||
| }); | ||
| }} | ||
| /> | ||
| </Flex> | ||
| ); | ||
| }, | ||
| meta: { | ||
| textAlign: "right", | ||
| }, | ||
| }, | ||
| ]; | ||
| return cols; | ||
| }, [refetch]); | ||
| const table = useReactTable<TableRow>({ | ||
| columns, | ||
| 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 message="No Keys" /> | ||
| ) : ( | ||
| <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> | ||
| ); | ||
| } |
Oops, something went wrong.