jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

🐛 fix(ApiKeysPage): add missing TableHead for 'Id' column to improve table structure

Browse source 
✨ feat(ApiKeysPage): add tooltip and cursor-default to display the full 'Id' value in the table
🐛 fix(ApiKeysPage): fix typo in ConfirmationModal titleHeader from 'Delete User' to 'Delete Key'
✨ feat(ApiKeysPage): add onCloseModal callback to refresh keys after creating a new secret key
This commit is contained in:
Cristhian Zanforlin Lousa 2023-08-17 19:51:40 -03:00
commit 8e662e65f6
1 changed files with 62 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

112
src/frontend/src/pages/ApiKeysPage/index.tsx
View file

@ -129,6 +129,7 @@ export default function ApiKeysPage() {
} }
> >
<TableRow> <TableRow>
<TableHead className="h-10">Id</TableHead>
<TableHead className="h-10">Name</TableHead> <TableHead className="h-10">Name</TableHead>
<TableHead className="h-10">Key</TableHead> <TableHead className="h-10">Key</TableHead>
<TableHead className="h-10">Created</TableHead> <TableHead className="h-10">Created</TableHead>
@ -148,57 +149,66 @@ export default function ApiKeysPage() {
</TableHeader> </TableHeader>
{!loadingKeys && ( {!loadingKeys && (
<TableBody> <TableBody>
{keysList.current.map((api_keys: ApiKey, index: number) => ( {keysList.current.map(
<TableRow key={index}> (api_keys: ApiKey, index: number) => (
<TableCell className="truncate py-2"> <TableRow key={index}>
<ShadTooltip content={api_keys.name}> <TableCell className="truncate py-2">
<ShadTooltip content={api_keys.id}>
<span className="cursor-default">
{api_keys.id}
</span>
</ShadTooltip>
</TableCell>
<TableCell className="truncate py-2">
<ShadTooltip content={api_keys.name}>
<span className="cursor-default">
{api_keys.name}
</span>
</ShadTooltip>
</TableCell>
<TableCell className="truncate py-2">
<span className="cursor-default"> <span className="cursor-default">
{api_keys.name} {api_keys.api_key}
</span> </span>
</ShadTooltip> </TableCell>
</TableCell> <TableCell className="truncate py-2 ">
<TableCell className="truncate py-2"> {moment(api_keys.created_at).format(
<span className="cursor-default"> "YYYY-MM-DD HH:mm"
{api_keys.api_key} )}
</span> </TableCell>
</TableCell> <TableCell className="truncate py-2">
<TableCell className="truncate py-2 "> {moment(api_keys.last_used_at).format(
{moment(api_keys.created_at).format( "YYYY-MM-DD HH:mm"
"YYYY-MM-DD HH:mm" )}
)} </TableCell>
</TableCell> <TableCell className="flex w-[100px] py-2 text-right">
<TableCell className="truncate py-2"> <div className="flex">
{moment(api_keys.last_used_at).format( <ConfirmationModal
"YYYY-MM-DD HH:mm" title="Delete"
)} titleHeader="Delete User"
</TableCell> modalContentTitle="Attention!"
<TableCell className="flex w-[100px] py-2 text-right"> modalContent="Are you sure you want to delete this key? This action cannot be undone."
<div className="flex"> cancelText="Cancel"
<ConfirmationModal confirmationText="Delete"
title="Delete" icon={"UserMinus2"}
titleHeader="Delete User" data={api_keys.id}
modalContentTitle="Attention!" index={index}
modalContent="Are you sure you want to delete this key? This action cannot be undone." onConfirm={(index, keys) => {
cancelText="Cancel" handleDeleteKey(keys);
confirmationText="Delete" }}
icon={"UserMinus2"} >
data={api_keys.id} <ShadTooltip content="Delete" side="top">
index={index} <IconComponent
onConfirm={(index, keys) => { name="Trash2"
handleDeleteKey(keys); className="ml-2 h-4 w-4 cursor-pointer"
}} />
> </ShadTooltip>
<ShadTooltip content="Delete" side="top"> </ConfirmationModal>
<IconComponent </div>
name="Trash2" </TableCell>
className="ml-2 h-4 w-4 cursor-pointer" </TableRow>
/> )
</ShadTooltip> )}
</ConfirmationModal>
</div>
</TableCell>
</TableRow>
))}
</TableBody> </TableBody>
)} )}
</Table> </Table>
@ -212,7 +222,9 @@ export default function ApiKeysPage() {
confirmationText="Create secret key" confirmationText="Create secret key"
icon={"Key"} icon={"Key"}
data={userId} data={userId}
onCloseModal={() => {getKeys()}} onCloseModal={() => {
getKeys();
}}
> >
<Button> <Button>
<IconComponent name="Plus" className="mr-1 h-5 w-5" /> <IconComponent name="Plus" className="mr-1 h-5 w-5" />