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 { import {
Select, Select,
SelectContent, SelectContent,
@ -24,6 +24,10 @@ export default function PaginatorComponent({
); );
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
useEffect(() => {
setMaxPageIndex(Math.ceil(totalRowsCount / size));
}, [totalRowsCount]);
return ( return (
<> <>
<div className="flex items-center justify-between px-2"> <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 SecretKeyModal from "../../modals/SecretKeyModal";
import moment from "moment"; import moment from "moment";
import { ApiKey } from "../../types/components";
import Header from "../../components/headerComponent"; import Header from "../../components/headerComponent";
import { ApiKey } from "../../types/components";
export default function ApiKeysPage() { export default function ApiKeysPage() {
const [loadingKeys, setLoadingKeys] = useState(true); const [loadingKeys, setLoadingKeys] = useState(true);
@ -81,7 +81,7 @@ export default function ApiKeysPage() {
return ( return (
<> <>
<Header></Header> <Header></Header>
{userData && ( {userData && (
<div className="main-page-panel"> <div className="main-page-panel">
<div className="m-auto flex h-full flex-row justify-center"> <div className="m-auto flex h-full flex-row justify-center">
@ -106,7 +106,9 @@ export default function ApiKeysPage() {
{keysList.current.length === 0 && !loadingKeys && ( {keysList.current.length === 0 && !loadingKeys && (
<> <>
<div className="flex items-center justify-between"> <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> </div>
</> </>
)} )}
@ -122,91 +124,99 @@ export default function ApiKeysPage() {
(loadingKeys ? " border-0" : "") (loadingKeys ? " border-0" : "")
} }
> >
<Table className={"table-fixed bg-muted outline-1"}> {keysList.current.length > 0 && !loadingKeys && (
<TableHeader <Table className={"table-fixed bg-muted outline-1"}>
className={ <TableHeader
loadingKeys className={
? "hidden" loadingKeys
: "table-fixed bg-muted outline-1" ? "hidden"
} : "table-fixed bg-muted outline-1"
> }
<TableRow> >
<TableHead className="h-10">Name</TableHead> <TableRow>
<TableHead className="h-10">Key</TableHead> <TableHead className="h-10">Name</TableHead>
<TableHead className="h-10">Created</TableHead> <TableHead className="h-10">Key</TableHead>
<TableHead className="flex h-10 items-center"> <TableHead className="h-10">Created</TableHead>
Last Used <TableHead className="flex h-10 items-center">
<ShadTooltip side="top" content={lastUsedMessage()}> Last Used
<div> <ShadTooltip
<IconComponent side="top"
name="Info" content={lastUsedMessage()}
className="ml-1 h-3 w-3" >
/> <div>
</div> <IconComponent
</ShadTooltip> name="Info"
</TableHead> className="ml-1 h-3 w-3"
<TableHead className="h-10 w-[100px] text-right"></TableHead> />
</TableRow> </div>
</TableHeader> </ShadTooltip>
{!loadingKeys && ( </TableHead>
<TableBody> <TableHead className="h-10 w-[100px] text-right"></TableHead>
{keysList.current.map( </TableRow>
(api_keys: ApiKey, index: number) => ( </TableHeader>
<TableRow key={index}> {!loadingKeys && (
<TableCell className="truncate py-2"> <TableBody>
<ShadTooltip content={api_keys.name}> {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"> <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" console.log(keys);
confirmationText="Delete" handleDeleteKey(keys);
icon={"UserMinus2"} }}
data={api_keys.id} >
index={index} <ShadTooltip
onConfirm={(index, keys) => { content="Delete"
console.log(keys); side="top"
handleDeleteKey(keys); >
}} <IconComponent
> name="Trash2"
<ShadTooltip content="Delete" side="top"> className="ml-2 h-4 w-4 cursor-pointer"
<IconComponent />
name="Trash2" </ShadTooltip>
className="ml-2 h-4 w-4 cursor-pointer" </ConfirmationModal>
/> </div>
</ShadTooltip> </TableCell>
</ConfirmationModal> </TableRow>
</div> )
</TableCell> )}
</TableRow> </TableBody>
) )}
)} </Table>
</TableBody> )}
)}
</Table>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">