diff --git a/ui/components/providers/workflow/forms/base-credentials-form.tsx b/ui/components/providers/workflow/forms/base-credentials-form.tsx index ac28828d14..248831593a 100644 --- a/ui/components/providers/workflow/forms/base-credentials-form.tsx +++ b/ui/components/providers/workflow/forms/base-credentials-form.tsx @@ -30,6 +30,15 @@ import { GitHubCredentialsForm } from "./via-credentials/github-credentials-form import { KubernetesCredentialsForm } from "./via-credentials/k8s-credentials-form"; import { M365CredentialsForm } from "./via-credentials/m365-credentials-form"; +const VIA_VALUES_WITH_BACK_BUTTON = [ + "credentials", + "role", + "service-account", + "personal_access_token", + "oauth_app_token", + "github_app", +] as const; + type BaseCredentialsFormProps = { providerType: ProviderType; providerId: string; @@ -61,6 +70,73 @@ export const BaseCredentialsForm = ({ successNavigationUrl, }); + const currentVia = searchParamsObj.get("via"); + + // Determinar si se debe mostrar el botón de retroceso + const shouldShowBackButton = + showBackButton && VIA_VALUES_WITH_BACK_BUTTON.includes(currentVia as any); + + // Función para renderizar el formulario de credenciales apropiado + const renderCredentialsForm = () => { + switch (providerType) { + case "aws": + return currentVia === "role" ? ( + } + setValue={form.setValue as any} + externalId={externalId} + /> + ) : ( + } + /> + ); + + case "azure": + return ( + } + /> + ); + + case "m365": + return ( + } + /> + ); + + case "gcp": + return currentVia === "service-account" ? ( + } + /> + ) : ( + } + /> + ); + + case "kubernetes": + return ( + } + /> + ); + + case "github": + return ( + } + via={currentVia || undefined} + /> + ); + + default: + return null; + } + }; + return (
- {providerType === "aws" && searchParamsObj.get("via") === "role" && ( - } - setValue={form.setValue as any} - externalId={externalId} - /> - )} - {providerType === "aws" && searchParamsObj.get("via") !== "role" && ( - } - /> - )} - {providerType === "azure" && ( - } - /> - )} - {providerType === "m365" && ( - } - /> - )} - {providerType === "gcp" && - searchParamsObj.get("via") === "service-account" && ( - } - /> - )} - {providerType === "gcp" && - searchParamsObj.get("via") !== "service-account" && ( - - } - /> - )} - {providerType === "kubernetes" && ( - } - /> - )} - {providerType === "github" && ( - } - via={searchParamsObj.get("via") || undefined} - /> - )} + {renderCredentialsForm()}
- {showBackButton && - (searchParamsObj.get("via") === "credentials" || - searchParamsObj.get("via") === "role" || - searchParamsObj.get("via") === "service-account" || - searchParamsObj.get("via") === "personal_access_token" || - searchParamsObj.get("via") === "oauth_app_token" || - searchParamsObj.get("via") === "github_app") && ( - } - isDisabled={isLoading} - > - Back - - )} + {shouldShowBackButton && ( + } + isDisabled={isLoading} + > + Back + + )} ; via?: string; }) => { + const renderHeader = (description: string) => ( +
+

+ Connect via Credentials +

+
{description}
+
+ ); + const renderPersonalAccessTokenFields = () => (

Personal Access Token

-

+

Use a personal access token for individual user authentication

@@ -45,7 +54,7 @@ export const GitHubCredentialsForm = ({

OAuth App Token

-

+

Use an OAuth app token for application-level authentication

@@ -71,7 +80,7 @@ export const GitHubCredentialsForm = ({

GitHub App

-

+

Use GitHub App credentials (both App ID and Private Key are required)

@@ -105,15 +114,9 @@ export const GitHubCredentialsForm = ({ const renderAllOptions = () => ( <> -
-
- Connect via Credentials -
-
- Choose one of the following authentication methods for your GitHub - credentials: -
-
+ {renderHeader( + "Choose one of the following authentication methods for your GitHub credentials:", + )} {/* Option 1: Personal Access Token */}
@@ -121,7 +124,7 @@ export const GitHubCredentialsForm = ({

Option 1: Personal Access Token

-

+

Use a personal access token for individual user authentication

@@ -148,7 +151,7 @@ export const GitHubCredentialsForm = ({

Option 2: OAuth App Token

-

+

Use an OAuth app token for application-level authentication

@@ -175,7 +178,7 @@ export const GitHubCredentialsForm = ({

Option 3: GitHub App

-

+

Use GitHub App credentials (both App ID and Private Key are required)

@@ -213,14 +216,9 @@ export const GitHubCredentialsForm = ({ if (via) { return ( <> -
-
- Connect via Credentials -
-
- Enter your GitHub credentials for the selected authentication method -
-
+ {renderHeader( + "Enter your GitHub credentials for the selected authentication method", + )} {via === "personal_access_token" && renderPersonalAccessTokenFields()} {via === "oauth_app_token" && renderOAuthAppTokenFields()} diff --git a/ui/types/components.ts b/ui/types/components.ts index cd40c08de1..e6a2e23e15 100644 --- a/ui/types/components.ts +++ b/ui/types/components.ts @@ -196,7 +196,7 @@ export type AWSCredentialsRole = { [ProviderCredentialFields.AWS_SESSION_TOKEN]?: string; [ProviderCredentialFields.EXTERNAL_ID]?: string; [ProviderCredentialFields.ROLE_SESSION_NAME]?: string; - [ProviderCredentialFields.SESSION_DURATION]?: string; + [ProviderCredentialFields.SESSION_DURATION]?: number; [ProviderCredentialFields.CREDENTIALS_TYPE]?: | "aws-sdk-default" | "access-secret-key";