fix: old credentials are not accessible (#4358)

skyvern-frontend/src/routes/workflows/components/CredentialParameterSourceSelector.tsx

@@ -22,7 +22,9 @@ type Props = {
 };
 
 function CredentialParameterSourceSelector({ value, onChange }: Props) {
-  const { data: credentials, isFetching } = useCredentialsQuery();
+  const { data: credentials, isFetching } = useCredentialsQuery({
+    page_size: 100, // Reasonable limit for dropdown selector
+  });
   const { setIsOpen, setType } = useCredentialModalState();
   const { parameters: workflowParameters } = useWorkflowParametersStore();
   const workflowParametersOfTypeCredentialId = workflowParameters.filter(

skyvern-frontend/src/routes/workflows/components/CredentialSelector.tsx

@@ -23,7 +23,9 @@ type Props = {
 
 function CredentialSelector({ value, onChange }: Props) {
   const { setIsOpen, setType } = useCredentialModalState();
-  const { data: credentials, isFetching } = useCredentialsQuery();
+  const { data: credentials, isFetching } = useCredentialsQuery({
+    page_size: 100, // Reasonable limit for dropdown selector
+  });
 
   if (isFetching) {
     return <Skeleton className="h-10 w-full" />;

skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginBlockCredentialSelector.tsx

@@ -65,6 +65,7 @@ function LoginBlockCredentialSelector({ nodeId, value, onChange }: Props) {
   const isCloud = useContext(CloudContext);
   const { data: credentials = [], isFetching } = useCredentialsQuery({
     enabled: isCloud,
+    page_size: 100,
   });
 
   if (isCloud && isFetching) {

skyvern-frontend/src/routes/workflows/hooks/useCredentialsQuery.ts

@@ -9,20 +9,25 @@ type UseQueryOptions = Omit<
   "queryKey" | "queryFn"
 >;
 
-type Props = UseQueryOptions;
+type Props = UseQueryOptions & {
+  page?: number;
+  page_size?: number;
+};
 
 function useCredentialsQuery(props: Props = {}) {
+  const { page = 1, page_size = 25, ...queryOptions } = props;
   const credentialGetter = useCredentialGetter();
 
   return useQuery<Array<CredentialApiResponse>>({
-    queryKey: ["credentials"],
+    queryKey: ["credentials", page, page_size],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
       const params = new URLSearchParams();
-      params.set("page_size", "25");
+      params.set("page", String(page));
+      params.set("page_size", String(page_size));
       return client.get("/credentials", { params }).then((res) => res.data);
     },
-    ...props,
+    ...queryOptions,
   });
 }