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

🐛 fix(PaginatorComponent): add useEffect to update maxPageIndex when totalRowsCount changes

Browse source 
✨ feat(ApiKeysPage): add Header component to the page layout for better organization and structure
🐛 fix(ApiKeysPage): fix import order to follow convention and improve readability
🐛 fix(ApiKeysPage): fix indentation and formatting issues for better code readability
✨ feat(ApiKeysPage): add conditional rendering for displaying a message when user has no assigned keys
🐛 fix(ApiKeysPage): fix indentation and formatting issues for better code readability
✨ feat(ApiKeysPage): add table component to display the list of keys with their details
🐛 fix(ApiKeysPage): fix indentation and formatting issues for better code readability
✨ feat(ApiKeysPage): add ConfirmationModal component for deleting keys with appropriate title and content
🐛 fix(ApiKeysPage): fix indentation and formatting issues for better code readability
This commit is contained in:
Cristhian Zanforlin Lousa 2023-08-25 20:02:16 -03:00
commit 8c763d798e
2 changed files with 101 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/frontend/src/components/PaginatorComponent/index.tsx
View file

@ -1,4 +1,4 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import {
Select,
SelectContent,
@ -24,6 +24,10 @@ export default function PaginatorComponent({
);
const [currentPage, setCurrentPage] = useState(1);
useEffect(() => {
setMaxPageIndex(Math.ceil(totalRowsCount / size));
}, [totalRowsCount]);
return (
<>
<div className="flex items-center justify-between px-2">

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

@ -17,8 +17,8 @@ import ConfirmationModal from "../../modals/ConfirmationModal";
import SecretKeyModal from "../../modals/SecretKeyModal";
import moment from "moment";
import { ApiKey } from "../../types/components";
import Header from "../../components/headerComponent";
import { ApiKey } from "../../types/components";
export default function ApiKeysPage() {
const [loadingKeys, setLoadingKeys] = useState(true);
@ -81,7 +81,7 @@ export default function ApiKeysPage() {
return (
<>
<Header></Header>
<Header></Header>
{userData && (
<div className="main-page-panel">
<div className="m-auto flex h-full flex-row justify-center">
@ -106,7 +106,9 @@ export default function ApiKeysPage() {
{keysList.current.length === 0 && !loadingKeys && (
<>
<div className="flex items-center justify-between">
<h2>This user does not have any keys assigned at the moment.</h2>
<h2>
This user does not have any keys assigned at the moment.
</h2>
</div>
</>
)}
@ -122,91 +124,99 @@ export default function ApiKeysPage() {
(loadingKeys ? " border-0" : "")
}
>
<Table className={"table-fixed bg-muted outline-1"}>
<TableHeader
className={
loadingKeys
? "hidden"
: "table-fixed bg-muted outline-1"
}
>
<TableRow>
<TableHead className="h-10">Name</TableHead>
<TableHead className="h-10">Key</TableHead>
<TableHead className="h-10">Created</TableHead>
<TableHead className="flex h-10 items-center">
Last Used
<ShadTooltip side="top" content={lastUsedMessage()}>
<div>
<IconComponent
name="Info"
className="ml-1 h-3 w-3"
/>
</div>
</ShadTooltip>
</TableHead>
<TableHead className="h-10 w-[100px] text-right"></TableHead>
</TableRow>
</TableHeader>
{!loadingKeys && (
<TableBody>
{keysList.current.map(
(api_keys: ApiKey, index: number) => (
<TableRow key={index}>
<TableCell className="truncate py-2">
<ShadTooltip content={api_keys.name}>
{keysList.current.length > 0 && !loadingKeys && (
<Table className={"table-fixed bg-muted outline-1"}>
<TableHeader
className={
loadingKeys
? "hidden"
: "table-fixed bg-muted outline-1"
}
>
<TableRow>
<TableHead className="h-10">Name</TableHead>
<TableHead className="h-10">Key</TableHead>
<TableHead className="h-10">Created</TableHead>
<TableHead className="flex h-10 items-center">
Last Used
<ShadTooltip
side="top"
content={lastUsedMessage()}
>
<div>
<IconComponent
name="Info"
className="ml-1 h-3 w-3"
/>
</div>
</ShadTooltip>
</TableHead>
<TableHead className="h-10 w-[100px] text-right"></TableHead>
</TableRow>
</TableHeader>
{!loadingKeys && (
<TableBody>
{keysList.current.map(
(api_keys: ApiKey, index: number) => (
<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">
{api_keys.name}
{api_keys.api_key}
</span>
</ShadTooltip>
</TableCell>
<TableCell className="truncate py-2">
<span className="cursor-default">
{api_keys.api_key}
</span>
</TableCell>
<TableCell className="truncate py-2 ">
{moment(api_keys.created_at).format(
"YYYY-MM-DD HH:mm"
)}
</TableCell>
<TableCell className="truncate py-2">
{moment(api_keys.last_used_at).format(
"YYYY-MM-DD HH:mm"
)}
</TableCell>
<TableCell className="flex w-[100px] py-2 text-right">
<div className="flex">
<ConfirmationModal
title="Delete"
titleHeader="Delete User"
modalContentTitle="Attention!"
modalContent="Are you sure you want to delete this key? This action cannot be undone."
cancelText="Cancel"
confirmationText="Delete"
icon={"UserMinus2"}
data={api_keys.id}
index={index}
onConfirm={(index, keys) => {
console.log(keys);
handleDeleteKey(keys);
}}
>
<ShadTooltip content="Delete" side="top">
<IconComponent
name="Trash2"
className="ml-2 h-4 w-4 cursor-pointer"
/>
</ShadTooltip>
</ConfirmationModal>
</div>
</TableCell>
</TableRow>
)
)}
</TableBody>
)}
</Table>
</TableCell>
<TableCell className="truncate py-2 ">
{moment(api_keys.created_at).format(
"YYYY-MM-DD HH:mm"
)}
</TableCell>
<TableCell className="truncate py-2">
{moment(api_keys.last_used_at).format(
"YYYY-MM-DD HH:mm"
)}
</TableCell>
<TableCell className="flex w-[100px] py-2 text-right">
<div className="flex">
<ConfirmationModal
title="Delete"
titleHeader="Delete User"
modalContentTitle="Attention!"
modalContent="Are you sure you want to delete this key? This action cannot be undone."
cancelText="Cancel"
confirmationText="Delete"
icon={"UserMinus2"}
data={api_keys.id}
index={index}
onConfirm={(index, keys) => {
console.log(keys);
handleDeleteKey(keys);
}}
>
<ShadTooltip
content="Delete"
side="top"
>
<IconComponent
name="Trash2"
className="ml-2 h-4 w-4 cursor-pointer"
/>
</ShadTooltip>
</ConfirmationModal>
</div>
</TableCell>
</TableRow>
)
)}
</TableBody>
)}
</Table>
)}
</div>
<div className="flex items-center justify-between">