feat: code clening and refactored

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" ? (
+          <AWSRoleCredentialsForm
+            control={form.control as unknown as Control<AWSCredentialsRole>}
+            setValue={form.setValue as any}
+            externalId={externalId}
+          />
+        ) : (
+          <AWSStaticCredentialsForm
+            control={form.control as unknown as Control<AWSCredentials>}
+          />
+        );
+
+      case "azure":
+        return (
+          <AzureCredentialsForm
+            control={form.control as unknown as Control<AzureCredentials>}
+          />
+        );
+
+      case "m365":
+        return (
+          <M365CredentialsForm
+            control={form.control as unknown as Control<M365Credentials>}
+          />
+        );
+
+      case "gcp":
+        return currentVia === "service-account" ? (
+          <GCPServiceAccountKeyForm
+            control={form.control as unknown as Control<GCPServiceAccountKey>}
+          />
+        ) : (
+          <GCPDefaultCredentialsForm
+            control={form.control as unknown as Control<GCPDefaultCredentials>}
+          />
+        );
+
+      case "kubernetes":
+        return (
+          <KubernetesCredentialsForm
+            control={form.control as unknown as Control<KubernetesCredentials>}
+          />
+        );
+
+      case "github":
+        return (
+          <GitHubCredentialsForm
+            control={form.control as unknown as Control<GitHubCredentials>}
+            via={currentVia || undefined}
+          />
+        );
+
+      default:
+        return null;
+    }
+  };
+
   return (
     <Form {...form}>
       <form
@@ -82,76 +158,24 @@ export const BaseCredentialsForm = ({
 
         <Divider />
 
-        {providerType === "aws" && searchParamsObj.get("via") === "role" && (
-          <AWSRoleCredentialsForm
-            control={form.control as unknown as Control<AWSCredentialsRole>}
-            setValue={form.setValue as any}
-            externalId={externalId}
-          />
-        )}
-        {providerType === "aws" && searchParamsObj.get("via") !== "role" && (
-          <AWSStaticCredentialsForm
-            control={form.control as unknown as Control<AWSCredentials>}
-          />
-        )}
-        {providerType === "azure" && (
-          <AzureCredentialsForm
-            control={form.control as unknown as Control<AzureCredentials>}
-          />
-        )}
-        {providerType === "m365" && (
-          <M365CredentialsForm
-            control={form.control as unknown as Control<M365Credentials>}
-          />
-        )}
-        {providerType === "gcp" &&
-          searchParamsObj.get("via") === "service-account" && (
-            <GCPServiceAccountKeyForm
-              control={form.control as unknown as Control<GCPServiceAccountKey>}
-            />
-          )}
-        {providerType === "gcp" &&
-          searchParamsObj.get("via") !== "service-account" && (
-            <GCPDefaultCredentialsForm
-              control={
-                form.control as unknown as Control<GCPDefaultCredentials>
-              }
-            />
-          )}
-        {providerType === "kubernetes" && (
-          <KubernetesCredentialsForm
-            control={form.control as unknown as Control<KubernetesCredentials>}
-          />
-        )}
-        {providerType === "github" && (
-          <GitHubCredentialsForm
-            control={form.control as unknown as Control<GitHubCredentials>}
-            via={searchParamsObj.get("via") || undefined}
-          />
-        )}
+        {renderCredentialsForm()}
 
         <div className="flex w-full justify-end sm:space-x-6">
-          {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") && (
-              <CustomButton
-                type="button"
-                ariaLabel="Back"
-                className="w-1/2 bg-transparent"
-                variant="faded"
-                size="lg"
-                radius="lg"
-                onPress={handleBackStep}
-                startContent={!isLoading && <ChevronLeftIcon size={24} />}
-                isDisabled={isLoading}
-              >
-                <span>Back</span>
-              </CustomButton>
-            )}
+          {shouldShowBackButton && (
+            <CustomButton
+              type="button"
+              ariaLabel="Back"
+              className="w-1/2 bg-transparent"
+              variant="faded"
+              size="lg"
+              radius="lg"
+              onPress={handleBackStep}
+              startContent={!isLoading && <ChevronLeftIcon size={24} />}
+              isDisabled={isLoading}
+            >
+              <span>Back</span>
+            </CustomButton>
+          )}
           <CustomButton
             type="submit"
             ariaLabel="Save"

ui/components/providers/workflow/forms/via-credentials/github-credentials-form.tsx

@@ -11,13 +11,22 @@ export const GitHubCredentialsForm = ({
   control: Control<GitHubCredentials>;
   via?: string;
 }) => {
+  const renderHeader = (description: string) => (
+    <div className="flex flex-col">
+      <h2 className="text-md font-bold leading-9 text-default-foreground">
+        Connect via Credentials
+      </h2>
+      <div className="text-sm text-default-500">{description}</div>
+    </div>
+  );
+
   const renderPersonalAccessTokenFields = () => (
     <div className="space-y-3">
       <div className="border-b border-divider pb-2">
         <h3 className="text-sm font-semibold text-default-foreground">
           Personal Access Token
         </h3>
-        <p className="text-xs text-default-500">
+        <p className="text-sm text-default-500">
           Use a personal access token for individual user authentication
         </p>
       </div>
@@ -45,7 +54,7 @@ export const GitHubCredentialsForm = ({
         <h3 className="text-sm font-semibold text-default-foreground">
           OAuth App Token
         </h3>
-        <p className="text-xs text-default-500">
+        <p className="text-sm text-default-500">
           Use an OAuth app token for application-level authentication
         </p>
       </div>
@@ -71,7 +80,7 @@ export const GitHubCredentialsForm = ({
         <h3 className="text-sm font-semibold text-default-foreground">
           GitHub App
         </h3>
-        <p className="text-xs text-default-500">
+        <p className="text-sm text-default-500">
           Use GitHub App credentials (both App ID and Private Key are required)
         </p>
       </div>
@@ -105,15 +114,9 @@ export const GitHubCredentialsForm = ({
 
   const renderAllOptions = () => (
     <>
-      <div className="flex flex-col">
-        <div className="text-md font-bold leading-9 text-default-foreground">
-          Connect via Credentials
-        </div>
-        <div className="text-sm text-default-500">
-          Choose one of the following authentication methods for your GitHub
-          credentials:
-        </div>
-      </div>
+      {renderHeader(
+        "Choose one of the following authentication methods for your GitHub credentials:",
+      )}
 
       {/* Option 1: Personal Access Token */}
       <div className="space-y-3">
@@ -121,7 +124,7 @@ export const GitHubCredentialsForm = ({
           <h3 className="text-sm font-semibold text-default-foreground">
             Option 1: Personal Access Token
           </h3>
-          <p className="text-xs text-default-500">
+          <p className="text-sm text-default-500">
             Use a personal access token for individual user authentication
           </p>
         </div>
@@ -148,7 +151,7 @@ export const GitHubCredentialsForm = ({
           <h3 className="text-sm font-semibold text-default-foreground">
             Option 2: OAuth App Token
           </h3>
-          <p className="text-xs text-default-500">
+          <p className="text-sm text-default-500">
             Use an OAuth app token for application-level authentication
           </p>
         </div>
@@ -175,7 +178,7 @@ export const GitHubCredentialsForm = ({
           <h3 className="text-sm font-semibold text-default-foreground">
             Option 3: GitHub App
           </h3>
-          <p className="text-xs text-default-500">
+          <p className="text-sm text-default-500">
             Use GitHub App credentials (both App ID and Private Key are
             required)
           </p>
@@ -213,14 +216,9 @@ export const GitHubCredentialsForm = ({
   if (via) {
     return (
       <>
-        <div className="flex flex-col">
-          <div className="text-md font-bold leading-9 text-default-foreground">
-            Connect via Credentials
-          </div>
-          <div className="text-sm text-default-500">
-            Enter your GitHub credentials for the selected authentication method
-          </div>
-        </div>
+        {renderHeader(
+          "Enter your GitHub credentials for the selected authentication method",
+        )}
 
         {via === "personal_access_token" && renderPersonalAccessTokenFields()}
         {via === "oauth_app_token" && renderOAuthAppTokenFields()}

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";