fix: old credentials are not accessible (#4358)

skyvern-frontend/src/routes/credentials/CredentialsList.tsx

@@ -1,6 +1,16 @@
 import { Skeleton } from "@/components/ui/skeleton";
 import { CredentialItem } from "./CredentialItem";
 import { useCredentialsQuery } from "@/routes/workflows/hooks/useCredentialsQuery";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+import { cn } from "@/util/utils";
+import { useState } from "react";
 
 type CredentialFilter = "password" | "credit_card" | "secret";
 
@@ -14,8 +24,14 @@ const EMPTY_MESSAGE: Record<CredentialFilter, string> = {
   secret: "No secrets stored yet.",
 };
 
+const PAGE_SIZE = 25;
+
 function CredentialsList({ filter }: Props = {}) {
-  const { data: credentials, isLoading } = useCredentialsQuery();
+  const [page, setPage] = useState(1);
+  const { data: credentials, isLoading } = useCredentialsQuery({
+    page,
+    page_size: PAGE_SIZE,
+  });
 
   if (isLoading) {
     return (
@@ -42,7 +58,7 @@ function CredentialsList({ filter }: Props = {}) {
     );
   })();
 
-  if (filteredCredentials.length === 0) {
+  if (filteredCredentials.length === 0 && page === 1) {
     return (
       <div className="rounded-md border border-slate-700 bg-slate-elevation1 p-6 text-sm text-slate-300">
         {filter ? EMPTY_MESSAGE[filter] : "No credentials stored yet."}
@@ -50,14 +66,47 @@ function CredentialsList({ filter }: Props = {}) {
     );
   }
 
+  const hasNextPage = credentials.length === PAGE_SIZE;
+
   return (
     <div className="space-y-5">
-      {filteredCredentials.map((credential) => (
-        <CredentialItem
-          key={credential.credential_id}
-          credential={credential}
-        />
-      ))}
+      <div className="space-y-5">
+        {filteredCredentials.map((credential) => (
+          <CredentialItem
+            key={credential.credential_id}
+            credential={credential}
+          />
+        ))}
+      </div>
+      {(page > 1 || hasNextPage) && (
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious
+                className={cn({ "cursor-not-allowed": page === 1 })}
+                onClick={() => {
+                  if (page > 1) {
+                    setPage((prev) => Math.max(1, prev - 1));
+                  }
+                }}
+              />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink>{page}</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext
+                className={cn({ "cursor-not-allowed": !hasNextPage })}
+                onClick={() => {
+                  if (hasNextPage) {
+                    setPage((prev) => prev + 1);
+                  }
+                }}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      )}
     </div>
   );
 }

skyvern-frontend/src/routes/credentials/CredentialsModal.tsx

@@ -73,7 +73,9 @@ function CredentialsModal({ onCredentialCreated }: Props) {
   const credentialGetter = useCredentialGetter();
   const queryClient = useQueryClient();
   const { isOpen, type, setIsOpen } = useCredentialModalState();
-  const { data: credentials } = useCredentialsQuery();
+  const { data: credentials } = useCredentialsQuery({
+    page_size: 100,
+  });
   const [passwordCredentialValues, setPasswordCredentialValues] = useState(
     PASSWORD_CREDENTIAL_INITIAL_VALUES,
   );