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">

18
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);
@ -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,6 +124,7 @@ export default function ApiKeysPage() {
(loadingKeys ? " border-0" : "") (loadingKeys ? " border-0" : "")
} }
> >
{keysList.current.length > 0 && !loadingKeys && (
<Table className={"table-fixed bg-muted outline-1"}> <Table className={"table-fixed bg-muted outline-1"}>
<TableHeader <TableHeader
className={ className={
@ -136,7 +139,10 @@ export default function ApiKeysPage() {
<TableHead className="h-10">Created</TableHead> <TableHead className="h-10">Created</TableHead>
<TableHead className="flex h-10 items-center"> <TableHead className="flex h-10 items-center">
Last Used Last Used
<ShadTooltip side="top" content={lastUsedMessage()}> <ShadTooltip
side="top"
content={lastUsedMessage()}
>
<div> <div>
<IconComponent <IconComponent
name="Info" name="Info"
@ -192,7 +198,10 @@ export default function ApiKeysPage() {
handleDeleteKey(keys); handleDeleteKey(keys);
}} }}
> >
<ShadTooltip content="Delete" side="top"> <ShadTooltip
content="Delete"
side="top"
>
<IconComponent <IconComponent
name="Trash2" name="Trash2"
className="ml-2 h-4 w-4 cursor-pointer" className="ml-2 h-4 w-4 cursor-pointer"
@ -207,6 +216,7 @@ export default function ApiKeysPage() {
</TableBody> </TableBody>
)} )}
</Table> </Table>
)}
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">