feat: code structure and behavior

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 && (
-        <SelectViaAWS initialVia={searchParams.via} />
-      )}
+      {/* Selectors for authentication methods */}
+      {type === "aws" && !via && <SelectViaAWS initialVia={via} />}
 
-      {searchParams.type === "gcp" && !searchParams.via && (
-        <SelectViaGCP initialVia={searchParams.via} />
-      )}
+      {type === "gcp" && !via && <SelectViaGCP initialVia={via} />}
 
-      {searchParams.type === "github" && !searchParams.via && (
-        <SelectViaGitHub initialVia={searchParams.via} />
-      )}
+      {type === "github" && !via && <SelectViaGitHub initialVia={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) && (
         <AddViaCredentialsForm searchParams={searchParams} />
       )}
 
-      {searchParams.type === "aws" && searchParams.via === "role" && (
+      {/* Specific forms */}
+      {type === "aws" && via === "role" && (
         <AddViaRoleForm searchParams={searchParams} />
       )}
 
-      {searchParams.type === "gcp" &&
-        searchParams.via === "service-account" && (
-          <AddViaServiceAccountForm searchParams={searchParams} />
-        )}
+      {type === "gcp" && via === "service-account" && (
+        <AddViaServiceAccountForm searchParams={searchParams} />
+      )}
     </>
   );
 }

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 && (
-          <CredentialsUpdateInfo
-            providerType={searchParams.type}
-            initialVia={searchParams.via}
-          />
-        )}
+      {/* Credentials update info for supported providers */}
+      {(type === "aws" || type === "gcp" || type === "github") && !via && (
+        <CredentialsUpdateInfo providerType={type} initialVia={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) && (
         <UpdateViaCredentialsForm searchParams={searchParams} />
       )}
 
-      {searchParams.type === "aws" && searchParams.via === "role" && (
+      {/* Specific forms */}
+      {type === "aws" && via === "role" && (
         <UpdateViaRoleForm searchParams={searchParams} />
       )}
 
-      {searchParams.type === "gcp" &&
-        searchParams.via === "service-account" && (
-          <UpdateViaServiceAccountForm searchParams={searchParams} />
-        )}
+      {type === "gcp" && via === "service-account" && (
+        <UpdateViaServiceAccountForm searchParams={searchParams} />
+      )}
     </>
   );
 }

ui/components/icons/providers-badge/github-provider-badge.tsx

@@ -23,7 +23,7 @@ export const GitHubProviderBadge: React.FC<IconSvgProps> = ({
       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"
     />
   </svg>
 );

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<z.infer<typeof addProviderFormSchema>>;
@@ -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<IconSvgProps>;
+}) => (
+  <CustomRadio description={description} value={value}>
+    <div className="flex items-center">
+      <BadgeComponent size={26} />
+      <span className="ml-2">{name}</span>
+    </div>
+  </CustomRadio>
+);
+
 export const RadioGroupProvider: React.FC<RadioGroupProviderProps> = ({
   control,
   isInvalid,
@@ -42,42 +99,15 @@ export const RadioGroupProvider: React.FC<RadioGroupProviderProps> = ({
             value={field.value || ""}
           >
             <div className="flex flex-col gap-4">
-              <CustomRadio description="Amazon Web Services" value="aws">
-                <div className="flex items-center">
-                  <AWSProviderBadge size={26} />
-                  <span className="ml-2">Amazon Web Services</span>
-                </div>
-              </CustomRadio>
-              <CustomRadio description="Google Cloud Platform" value="gcp">
-                <div className="flex items-center">
-                  <GCPProviderBadge size={26} />
-                  <span className="ml-2">Google Cloud Platform</span>
-                </div>
-              </CustomRadio>
-              <CustomRadio description="Microsoft Azure" value="azure">
-                <div className="flex items-center">
-                  <AzureProviderBadge size={26} />
-                  <span className="ml-2">Microsoft Azure</span>
-                </div>
-              </CustomRadio>
-              <CustomRadio description="Microsoft 365" value="m365">
-                <div className="flex items-center">
-                  <M365ProviderBadge size={26} />
-                  <span className="ml-2">Microsoft 365</span>
-                </div>
-              </CustomRadio>
-              <CustomRadio description="Kubernetes" value="kubernetes">
-                <div className="flex items-center">
-                  <KS8ProviderBadge size={26} />
-                  <span className="ml-2">Kubernetes</span>
-                </div>
-              </CustomRadio>
-              <CustomRadio description="GitHub" value="github">
-                <div className="flex items-center">
-                  <GitHubProviderBadge size={26} />
-                  <span className="ml-2">GitHub</span>
-                </div>
-              </CustomRadio>
+              {PROVIDERS_CONFIG.map((provider) => (
+                <ProviderRadio
+                  key={provider.value}
+                  value={provider.value}
+                  name={provider.name}
+                  description={provider.description}
+                  BadgeComponent={provider.BadgeComponent}
+                />
+              ))}
             </div>
           </RadioGroup>
           {errorMessage && (

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<typeof addProviderFormSchema>;
 
 // 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", "");
   };

ui/components/providers/workflow/provider-title-docs.tsx

@@ -21,13 +21,13 @@ export const ProviderTitleDocs = ({
         </span>
       </div>
       <div className="flex items-end gap-x-2">
-        <p className="text-sm text-default-500">
+        <p className="whitespace-nowrap text-sm text-default-500">
           {getProviderHelpText(providerType as string).text}
         </p>
         <Link
           href={getProviderHelpText(providerType as string).link}
           target="_blank"
-          className="text-sm font-medium text-primary"
+          className="whitespace-nowrap text-sm font-medium text-primary"
         >
           Read the docs
         </Link>