vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Credential selector add credential option (#1926)

Browse Source
This commit is contained in:
Shuchang Zheng
2025-03-11 11:18:26 -07:00
committed by GitHub
parent 0eada40ffc
commit 14308d4531
13 changed files with 1069 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
skyvern-frontend/src/routes/workflows/components/CredentialParameterSourceSelector.tsx
View File

@@ -9,6 +9,12 @@ import { Skeleton } from "@/components/ui/skeleton";
import { useCredentialsQuery } from "../hooks/useCredentialsQuery";
import { useWorkflowParametersState } from "../editor/useWorkflowParametersState";
import { WorkflowParameterValueType } from "../types/workflowTypes";
import { PlusIcon } from "@radix-ui/react-icons";
import {
CredentialModalTypes,
useCredentialModalState,
} from "@/routes/credentials/useCredentialModalState";
import { CredentialsModal } from "@/routes/credentials/CredentialsModal";
type Props = {
value: string;
@@ -17,6 +23,7 @@ type Props = {
function CredentialParameterSourceSelector({ value, onChange }: Props) {
const { data: credentials, isFetching } = useCredentialsQuery();
const { setIsOpen, setType } = useCredentialModalState();
const [workflowParameters] = useWorkflowParametersState();
const workflowParametersOfTypeCredentialId = workflowParameters.filter(
(parameter) =>
@@ -51,18 +58,42 @@ function CredentialParameterSourceSelector({ value, onChange }: Props) {
];
return (
<Select value={value} onValueChange={onChange}>
<SelectTrigger>
<SelectValue placeholder="Select a credential" />
</SelectTrigger>
<SelectContent>
{options.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
<>
<Select
value={value}
onValueChange={(value) => {
if (value === "new") {
setIsOpen(true);
setType(CredentialModalTypes.PASSWORD);
return;
}
onChange(value);
}}
>
<SelectTrigger>
<SelectValue placeholder="Select a credential" />
</SelectTrigger>
<SelectContent>
{options.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
<SelectItem value="new">
<div className="flex items-center gap-2">
<PlusIcon className="size-4" />
<span>Add new credential</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
</SelectContent>
</Select>
<CredentialsModal
onCredentialCreated={(id) => {
onChange(id);
setIsOpen(false);
}}
/>
</>
);
}

71
skyvern-frontend/src/routes/workflows/components/CredentialSelector.tsx
View File

@@ -7,6 +7,12 @@ import {
} from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import { useCredentialsQuery } from "../hooks/useCredentialsQuery";
import { PlusIcon } from "@radix-ui/react-icons";
import { CredentialsModal } from "@/routes/credentials/CredentialsModal";
import {
CredentialModalTypes,
useCredentialModalState,
} from "@/routes/credentials/useCredentialModalState";
type Props = {
value: string;
@@ -14,6 +20,7 @@ type Props = {
};
function CredentialSelector({ value, onChange }: Props) {
const { setIsOpen, setType } = useCredentialModalState();
const { data: credentials, isFetching } = useCredentialsQuery();
if (isFetching) {
@@ -25,28 +32,52 @@ function CredentialSelector({ value, onChange }: Props) {
}
return (
<Select value={value} onValueChange={onChange}>
<SelectTrigger>
<SelectValue placeholder="Select a credential" />
</SelectTrigger>
<SelectContent>
{credentials.map((credential) => (
<SelectItem
key={credential.credential_id}
value={credential.credential_id}
>
<div className="space-y-2">
<p className="text-sm font-medium">{credential.name}</p>
<p className="text-xs text-slate-400">
{credential.credential_type === "password"
? "Password"
: "Credit Card"}
</p>
<>
<Select
value={value}
onValueChange={(value) => {
if (value === "new") {
setIsOpen(true);
setType(CredentialModalTypes.PASSWORD);
} else {
onChange(value);
}
}}
>
<SelectTrigger>
<SelectValue placeholder="Select a credential" />
</SelectTrigger>
<SelectContent>
{credentials.map((credential) => (
<SelectItem
key={credential.credential_id}
value={credential.credential_id}
>
<div className="space-y-2">
<p className="text-sm font-medium">{credential.name}</p>
<p className="text-xs text-slate-400">
{credential.credential_type === "password"
? "Password"
: "Credit Card"}
</p>
</div>
</SelectItem>
))}
<SelectItem value="new">
<div className="flex items-center gap-2">
<PlusIcon className="size-4" />
<span>Add new credential</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
</SelectContent>
</Select>
<CredentialsModal
onCredentialCreated={(id) => {
onChange(id);
setIsOpen(false);
}}
/>
</>
);
}