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

🐛 fix(ApiKeysPage): handle cases where keysList.current is null or undefined to prevent errors

Browse source 
✨ feat(ApiKeysPage): add conditional rendering for keysList.current to display appropriate messages when there are no keys assigned or when loading keys
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-08-27 19:54:59 -03:00
commit b70d5501a2
1 changed files with 108 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -103,15 +103,18 @@ export default function ApiKeysPage() {
<div className="flex items-center space-x-2"></div> <div className="flex items-center space-x-2"></div>
</div> </div>
{keysList.current.length === 0 && !loadingKeys && ( {keysList.current &&
<> keysList.current.length === 0 &&
<div className="flex items-center justify-between"> !loadingKeys && (
<h2> <>
This user does not have any keys assigned at the moment. <div className="flex items-center justify-between">
</h2> <h2>
</div> This user does not have any keys assigned at the
</> moment.
)} </h2>
</div>
</>
)}
<> <>
{loadingKeys && ( {loadingKeys && (
<div> <div>
@ -124,103 +127,105 @@ export default function ApiKeysPage() {
(loadingKeys ? " border-0" : "") (loadingKeys ? " border-0" : "")
} }
> >
{keysList.current.length > 0 && !loadingKeys && ( {keysList.current &&
<Table className={"table-fixed bg-muted outline-1"}> keysList.current.length > 0 &&
<TableHeader !loadingKeys && (
className={ <Table className={"table-fixed bg-muted outline-1"}>
loadingKeys <TableHeader
? "hidden" className={
: "table-fixed bg-muted outline-1" loadingKeys
} ? "hidden"
> : "table-fixed bg-muted outline-1"
<TableRow> }
<TableHead className="h-10">Name</TableHead> >
<TableHead className="h-10">Key</TableHead> <TableRow>
<TableHead className="h-10">Created</TableHead> <TableHead className="h-10">Name</TableHead>
<TableHead className="flex h-10 items-center"> <TableHead className="h-10">Key</TableHead>
Last Used <TableHead className="h-10">Created</TableHead>
<ShadTooltip <TableHead className="flex h-10 items-center">
side="top" Last Used
content={lastUsedMessage()} <ShadTooltip
> side="top"
<div> content={lastUsedMessage()}
<IconComponent >
name="Info" <div>
className="ml-1 h-3 w-3" <IconComponent
/> name="Info"
</div> className="ml-1 h-3 w-3"
</ShadTooltip> />
</TableHead> </div>
<TableHead className="h-10 w-[100px] text-right"></TableHead> </ShadTooltip>
</TableRow> </TableHead>
</TableHeader> <TableHead className="h-10 w-[100px] text-right"></TableHead>
{!loadingKeys && ( </TableRow>
<TableBody> </TableHeader>
{keysList.current.map( {!loadingKeys && (
(api_keys: ApiKey, index: number) => ( <TableBody>
<TableRow key={index}> {keysList.current.map(
<TableCell className="truncate py-2"> (api_keys: ApiKey, index: number) => (
<ShadTooltip content={api_keys.name}> <TableRow key={index}>
<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" ) === "Invalid date"
)} ? "-"
</TableCell> : moment(api_keys.last_used_at).format(
<TableCell className="truncate py-2"> "YYYY-MM-DD HH:mm"
{moment(api_keys.last_used_at).format( )}
"YYYY-MM-DD HH:mm" </TableCell>
) === "Invalid date" <TableCell className="flex w-[100px] py-2 text-right">
? "-" <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" console.log(keys);
confirmationText="Delete" handleDeleteKey(keys);
icon={"UserMinus2"} }}
data={api_keys.id}
index={index}
onConfirm={(index, keys) => {
console.log(keys);
handleDeleteKey(keys);
}}
>
<ShadTooltip
content="Delete"
side="top"
> >
<IconComponent <ShadTooltip
name="Trash2" content="Delete"
className="ml-2 h-4 w-4 cursor-pointer" side="top"
/> >
</ShadTooltip> <IconComponent
</ConfirmationModal> name="Trash2"
</div> className="ml-2 h-4 w-4 cursor-pointer"
</TableCell> />
</TableRow> </ShadTooltip>
) </ConfirmationModal>
)} </div>
</TableBody> </TableCell>
)} </TableRow>
</Table> )
)} )}
</TableBody>
)}
</Table>
)}
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">