Credential selector add credential option (#1926)

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

View File

@@ -10,6 +10,12 @@ import { useCredentialsQuery } from "@/routes/workflows/hooks/useCredentialsQuer
import CloudContext from "@/store/CloudContext";
import { useContext, useId } from "react";
import { useWorkflowParametersState } from "../../useWorkflowParametersState";
import { CredentialsModal } from "@/routes/credentials/CredentialsModal";
import { PlusIcon } from "@radix-ui/react-icons";
import {
CredentialModalTypes,
useCredentialModalState,
} from "@/routes/credentials/useCredentialModalState";
type Props = {
value?: string;
@@ -17,6 +23,7 @@ type Props = {
};
function LoginBlockCredentialSelector({ value, onChange }: Props) {
const { setIsOpen, setType } = useCredentialModalState();
const [workflowParameters, setWorkflowParameters] =
useWorkflowParametersState();
const credentialParameters = workflowParameters.filter(
@@ -71,53 +78,66 @@ function LoginBlockCredentialSelector({ value, onChange }: Props) {
];
return (
<Select
value={value}
onValueChange={(value) => {
const option = options.find((option) => option.value === value);
if (option?.type === "credential") {
const existingCredential = workflowParameters.find((parameter) => {
return (
parameter.parameterType === "credential" &&
"credentialId" in parameter &&
parameter.credentialId === value &&
parameter.key === value
);
});
if (!existingCredential) {
setWorkflowParameters((prev) => [
...prev,
{
parameterType: "credential",
credentialId: value,
key: value,
},
]);
<>
<Select
value={value}
onValueChange={(value) => {
if (value === "new") {
setIsOpen(true);
setType(CredentialModalTypes.PASSWORD);
return;
}
}
if (value === noneItemValue) {
onChange?.("");
} else {
onChange?.(value);
}
}}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select a credential parameter" />
</SelectTrigger>
<SelectContent>
{options.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
const option = options.find((option) => option.value === value);
if (option?.type === "credential") {
const existingCredential = workflowParameters.find((parameter) => {
return (
parameter.parameterType === "credential" &&
"credentialId" in parameter &&
parameter.credentialId === value &&
parameter.key === value
);
});
if (!existingCredential) {
setWorkflowParameters((prev) => [
...prev,
{
parameterType: "credential",
credentialId: value,
key: value,
},
]);
}
}
if (value === noneItemValue) {
onChange?.("");
} else {
onChange?.(value);
}
}}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select a credential parameter" />
</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>
))}
{options.length === 0 && (
<SelectItem value={noneItemValue} key={noneItemValue}>
No credential parameters found
</SelectItem>
)}
</SelectContent>
</Select>
</SelectContent>
</Select>
<CredentialsModal
onCredentialCreated={(id) => {
onChange?.(id);
}}
/>
</>
);
}