From aef7876fed4782100478c3eaedef6f9ee6d77f56 Mon Sep 17 00:00:00 2001 From: alejandrobailo Date: Mon, 21 Jul 2025 15:25:20 +0200 Subject: [PATCH] feat: code structure and behavior --- .../add-credentials/page.tsx | 59 +++++---- .../update-credentials/page.tsx | 59 +++++---- .../providers-badge/github-provider-badge.tsx | 2 +- .../providers/radio-group-provider.tsx | 112 +++++++++++------- .../workflow/forms/connect-account-form.tsx | 15 ++- .../workflow/provider-title-docs.tsx | 4 +- 6 files changed, 154 insertions(+), 97 deletions(-) diff --git a/ui/app/(prowler)/providers/(set-up-provider)/add-credentials/page.tsx b/ui/app/(prowler)/providers/(set-up-provider)/add-credentials/page.tsx index 31e1640a7e..84dedf18b7 100644 --- a/ui/app/(prowler)/providers/(set-up-provider)/add-credentials/page.tsx +++ b/ui/app/(prowler)/providers/(set-up-provider)/add-credentials/page.tsx @@ -16,42 +16,53 @@ interface Props { searchParams: { type: ProviderType; id: string; via?: string }; } +// Helper function to determine if the credentials form should be shown +const shouldShowCredentialsForm = ( + type: ProviderType, + via?: string, +): boolean => { + const credentialsConfig = { + aws: ["credentials"], + gcp: ["credentials"], + github: ["personal_access_token", "oauth_app_token", "github_app"], + }; + + // If the type is in the configuration, check if the 'via' method is allowed + if (credentialsConfig[type as keyof typeof credentialsConfig]) { + return credentialsConfig[type as keyof typeof credentialsConfig].includes( + via || "", + ); + } + + // For unspecified types, show the default form + return !["aws", "gcp", "github"].includes(type); +}; + export default function AddCredentialsPage({ searchParams }: Props) { + const { type, via } = searchParams; + return ( <> - {searchParams.type === "aws" && !searchParams.via && ( - - )} + {/* Selectors for authentication methods */} + {type === "aws" && !via && } - {searchParams.type === "gcp" && !searchParams.via && ( - - )} + {type === "gcp" && !via && } - {searchParams.type === "github" && !searchParams.via && ( - - )} + {type === "github" && !via && } - {((searchParams.type === "aws" && searchParams.via === "credentials") || - (searchParams.type === "gcp" && searchParams.via === "credentials") || - (searchParams.type === "github" && - searchParams.via === "personal_access_token") || - (searchParams.type === "github" && - searchParams.via === "oauth_app_token") || - (searchParams.type === "github" && searchParams.via === "github_app") || - (searchParams.type !== "aws" && - searchParams.type !== "gcp" && - searchParams.type !== "github")) && ( + {/* Credentials form */} + {shouldShowCredentialsForm(type, via) && ( )} - {searchParams.type === "aws" && searchParams.via === "role" && ( + {/* Specific forms */} + {type === "aws" && via === "role" && ( )} - {searchParams.type === "gcp" && - searchParams.via === "service-account" && ( - - )} + {type === "gcp" && via === "service-account" && ( + + )} ); } diff --git a/ui/app/(prowler)/providers/(set-up-provider)/update-credentials/page.tsx b/ui/app/(prowler)/providers/(set-up-provider)/update-credentials/page.tsx index 7f0470b134..4e53d1587c 100644 --- a/ui/app/(prowler)/providers/(set-up-provider)/update-credentials/page.tsx +++ b/ui/app/(prowler)/providers/(set-up-provider)/update-credentials/page.tsx @@ -17,40 +17,51 @@ interface Props { }; } +// Helper function to determine if the credentials form should be shown +const shouldShowCredentialsForm = ( + type: ProviderType, + via?: string, +): boolean => { + const credentialsConfig = { + aws: ["credentials"], + gcp: ["credentials"], + github: ["personal_access_token", "oauth_app_token", "github_app"], + }; + + // If the type is in the configuration, check if the 'via' method is allowed + if (credentialsConfig[type as keyof typeof credentialsConfig]) { + return credentialsConfig[type as keyof typeof credentialsConfig].includes( + via || "", + ); + } + + // For unspecified types, show the default form + return !["aws", "gcp", "github"].includes(type); +}; + export default function UpdateCredentialsPage({ searchParams }: Props) { + const { type, via } = searchParams; + return ( <> - {(searchParams.type === "aws" || - searchParams.type === "gcp" || - searchParams.type === "github") && - !searchParams.via && ( - - )} + {/* Credentials update info for supported providers */} + {(type === "aws" || type === "gcp" || type === "github") && !via && ( + + )} - {((searchParams.type === "aws" && searchParams.via === "credentials") || - (searchParams.type === "gcp" && searchParams.via === "credentials") || - (searchParams.type === "github" && - searchParams.via === "personal_access_token") || - (searchParams.type === "github" && - searchParams.via === "oauth_app_token") || - (searchParams.type === "github" && searchParams.via === "github_app") || - (searchParams.type !== "aws" && - searchParams.type !== "gcp" && - searchParams.type !== "github")) && ( + {/* Credentials form */} + {shouldShowCredentialsForm(type, via) && ( )} - {searchParams.type === "aws" && searchParams.via === "role" && ( + {/* Specific forms */} + {type === "aws" && via === "role" && ( )} - {searchParams.type === "gcp" && - searchParams.via === "service-account" && ( - - )} + {type === "gcp" && via === "service-account" && ( + + )} ); } diff --git a/ui/components/icons/providers-badge/github-provider-badge.tsx b/ui/components/icons/providers-badge/github-provider-badge.tsx index 3e2fad413c..667785de03 100644 --- a/ui/components/icons/providers-badge/github-provider-badge.tsx +++ b/ui/components/icons/providers-badge/github-provider-badge.tsx @@ -23,7 +23,7 @@ export const GitHubProviderBadge: React.FC = ({ fillRule="evenodd" clipRule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" - fill="#24292f" + fill="currentColor" /> ); diff --git a/ui/components/providers/radio-group-provider.tsx b/ui/components/providers/radio-group-provider.tsx index fa5021a8ad..9dd43adde0 100644 --- a/ui/components/providers/radio-group-provider.tsx +++ b/ui/components/providers/radio-group-provider.tsx @@ -5,8 +5,6 @@ import React from "react"; import { Control, Controller } from "react-hook-form"; import { z } from "zod"; -import { addProviderFormSchema } from "@/types"; - import { AWSProviderBadge, AzureProviderBadge, @@ -14,9 +12,10 @@ import { GitHubProviderBadge, KS8ProviderBadge, M365ProviderBadge, -} from "../icons/providers-badge"; -import { CustomRadio } from "../ui/custom"; -import { FormMessage } from "../ui/form"; +} from "@/components/icons/providers-badge"; +import { CustomRadio } from "@/components/ui/custom"; +import { FormMessage } from "@/components/ui/form"; +import { addProviderFormSchema, IconSvgProps } from "@/types"; interface RadioGroupProviderProps { control: Control>; @@ -24,6 +23,64 @@ interface RadioGroupProviderProps { errorMessage?: string; } +const PROVIDERS_CONFIG = [ + { + value: "aws", + name: "Amazon Web Services", + description: "Amazon Web Services", + BadgeComponent: AWSProviderBadge, + }, + { + value: "gcp", + name: "Google Cloud Platform", + description: "Google Cloud Platform", + BadgeComponent: GCPProviderBadge, + }, + { + value: "azure", + name: "Microsoft Azure", + description: "Microsoft Azure", + BadgeComponent: AzureProviderBadge, + }, + { + value: "m365", + name: "Microsoft 365", + description: "Microsoft 365", + BadgeComponent: M365ProviderBadge, + }, + { + value: "kubernetes", + name: "Kubernetes", + description: "Kubernetes", + BadgeComponent: KS8ProviderBadge, + }, + { + value: "github", + name: "GitHub", + description: "GitHub", + BadgeComponent: GitHubProviderBadge, + }, +] as const; + +const ProviderRadio = ({ + value, + name, + description, + BadgeComponent, +}: { + value: string; + name: string; + description: string; + BadgeComponent: React.FC; +}) => ( + +
+ + {name} +
+ +); + export const RadioGroupProvider: React.FC = ({ control, isInvalid, @@ -42,42 +99,15 @@ export const RadioGroupProvider: React.FC = ({ value={field.value || ""} >
- -
- - Amazon Web Services -
- - -
- - Google Cloud Platform -
- - -
- - Microsoft Azure -
- - -
- - Microsoft 365 -
- - -
- - Kubernetes -
- - -
- - GitHub -
- + {PROVIDERS_CONFIG.map((provider) => ( + + ))}
{errorMessage && ( diff --git a/ui/components/providers/workflow/forms/connect-account-form.tsx b/ui/components/providers/workflow/forms/connect-account-form.tsx index 9bd498bb59..5083d9d49f 100644 --- a/ui/components/providers/workflow/forms/connect-account-form.tsx +++ b/ui/components/providers/workflow/forms/connect-account-form.tsx @@ -7,14 +7,14 @@ import { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; import * as z from "zod"; +import { addProvider } from "@/actions/providers/providers"; +import { RadioGroupProvider } from "@/components/providers/radio-group-provider"; +import { ProviderTitleDocs } from "@/components/providers/workflow/provider-title-docs"; import { useToast } from "@/components/ui"; import { CustomButton, CustomInput } from "@/components/ui/custom"; import { Form } from "@/components/ui/form"; +import { addProviderFormSchema, ApiError } from "@/types"; -import { addProvider } from "../../../../actions/providers/providers"; -import { addProviderFormSchema, ApiError } from "../../../../types"; -import { RadioGroupProvider } from "../../radio-group-provider"; -import { ProviderTitleDocs } from "../provider-title-docs"; export type FormValues = z.infer; // Helper function for labels and placeholders @@ -147,7 +147,12 @@ export const ConnectAccountForm = () => { const handleBackStep = () => { setPrevStep((prev) => prev - 1); - // Reset the providerUid and providerAlias fields when going back + + //Deselect the providerType if the user is going back to the first step + if (prevStep === 2) { + form.setValue("providerType", undefined as any); + } + form.setValue("providerUid", ""); form.setValue("providerAlias", ""); }; diff --git a/ui/components/providers/workflow/provider-title-docs.tsx b/ui/components/providers/workflow/provider-title-docs.tsx index e34ed24b98..9e7ea6fc4c 100644 --- a/ui/components/providers/workflow/provider-title-docs.tsx +++ b/ui/components/providers/workflow/provider-title-docs.tsx @@ -21,13 +21,13 @@ export const ProviderTitleDocs = ({
-

+

{getProviderHelpText(providerType as string).text}

Read the docs