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

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