feat(providers): show the cloud formation and terraform template links on the form (#6660)

ui/app/(prowler)/providers/(set-up-provider)/layout.tsx

@@ -18,7 +18,7 @@ export default function ProviderLayout({ children }: ProviderLayoutProps) {
         icon="icon-park-outline:close-small"
         href="/providers"
       />
-      <Spacer y={16} />
+      <Spacer y={8} />
       <div className="grid grid-cols-1 gap-8 lg:grid-cols-12">
         <div className="order-1 my-auto hidden h-full lg:col-span-4 lg:col-start-2 lg:block">
           <WorkflowAddProvider />

ui/components/providers/workflow/credentials-role-helper.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Snippet } from "@nextui-org/react";
+import Link from "next/link";
+import { useSession } from "next-auth/react";
+
+export const CredentialsRoleHelper = () => {
+  const { data: session } = useSession();
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-4">
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          A <strong>new read-only IAM role</strong> must be manually created.
+          Use one of the following templates to create the IAM role:
+        </p>
+        <div className="flex flex-col gap-2">
+          <Link
+            href="https://github.com/prowler-cloud/prowler/blob/master/permissions/templates/cloudformation/prowler-scan-role.yml"
+            target="_blank"
+            className="text-sm font-medium text-blue-500 hover:underline"
+          >
+            CloudFormation Template
+          </Link>
+          <Link
+            href="https://github.com/prowler-cloud/prowler/blob/master/permissions/templates/terraform/main.tf"
+            target="_blank"
+            className="text-sm font-medium text-blue-500 hover:underline"
+          >
+            Terraform Code
+          </Link>
+        </div>
+        <p className="text-xs font-bold text-gray-600 dark:text-gray-400">
+          The External ID will also be required:
+        </p>
+        <Snippet className="max-w-full py-1" color="warning" hideSymbol>
+          <p className="whitespace-pre-line text-xs font-bold">
+            {session?.tenantId}
+          </p>
+        </Snippet>
+      </div>
+    </div>
+  );
+};

ui/components/providers/workflow/forms/via-role/aws-role-form.tsx

@@ -4,6 +4,8 @@ import { Control, UseFormSetValue, useWatch } from "react-hook-form";
 import { CustomInput } from "@/components/ui/custom";
 import { AWSCredentialsRole } from "@/types";
 
+import { CredentialsRoleHelper } from "../../credentials-role-helper";
+
 export const AWSCredentialsRoleForm = ({
   control,
   setValue,
@@ -21,11 +23,11 @@ export const AWSCredentialsRoleForm = ({
 
   return (
     <>
-      <div className="mb-4 text-left">
+      <div className="flex flex-col gap-2">
         <div className="text-2xl font-bold leading-9 text-default-foreground">
           Connect assuming IAM Role
         </div>
-        <div className="py-2 text-small text-default-500">
+        <div className="text-small text-default-500">
           Please provide the information for your AWS credentials.
         </div>
       </div>
@@ -87,6 +89,8 @@ export const AWSCredentialsRoleForm = ({
           />
         </>
       )}
+      <CredentialsRoleHelper />
+
       <Spacer y={2} />
       <span className="text-xs font-bold text-default-500">Assume Role</span>
 
@@ -110,11 +114,12 @@ export const AWSCredentialsRoleForm = ({
         placeholder="Enter the External ID"
         variant="bordered"
         defaultValue={externalId}
+        isDisabled
         isRequired
         isInvalid={!!control._formState.errors.external_id}
       />
 
-      <span className="text-sm text-default-500">Optional fields</span>
+      <span className="text-xs text-default-500">Optional fields</span>
       <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
         <CustomInput
           control={control}

ui/components/providers/workflow/index.ts

@@ -1,3 +1,4 @@
+export * from "./credentials-role-helper";
 export * from "./skeleton-provider-workflow";
 export * from "./vertical-steps";
 export * from "./workflow-add-provider";

ui/components/providers/workflow/workflow-add-provider.tsx

@@ -10,18 +10,19 @@ const steps = [
   {
     title: "Add your cloud account",
     description:
-      "Select the cloud provider of the account you want to connect and choose whether to use IAM role or credentials for access.",
+      "Select the cloud provider for the account to connect and specify whether to use an IAM role or credentials for access.",
     href: "/providers/connect-account",
   },
   {
     title: "Add credentials to your cloud account",
-    description: "Add the credentials needed to connect to your cloud account.",
+    description:
+      "Provide the credentials required to connect to the cloud account.",
     href: "/providers/add-credentials",
   },
   {
     title: "Check connection and launch scan",
     description:
-      "Test your connection to verify that the credentials provided are valid for accessing your cloud account and launch a scan.",
+      "Verify the connection to ensure that the provided credentials are valid for accessing the cloud account and initiating a scan.",
     href: "/providers/test-connection",
   },
 ];
@@ -41,8 +42,8 @@ export const WorkflowAddProvider = () => {
         Add a cloud account
       </h1>
       <p className="mb-5 text-small text-default-500">
-        Follow the steps to configure your cloud account. This allows you to
-        launch the first scan when the process is complete.
+        Complete the steps to configure the cloud account, enabling the launch
+        of the first scan once completed.
       </p>
       <Progress
         classNames={{

ui/components/ui/custom/custom-input.tsx

@@ -19,6 +19,7 @@ interface CustomInputProps<T extends FieldValues> {
   password?: boolean;
   confirmPassword?: boolean;
   defaultValue?: string;
+  isReadOnly?: boolean;
   isRequired?: boolean;
   isInvalid?: boolean;
   isDisabled?: boolean;
@@ -36,6 +37,7 @@ export const CustomInput = <T extends FieldValues>({
   confirmPassword = false,
   password = false,
   defaultValue,
+  isReadOnly = false,
   isRequired = true,
   isInvalid,
   isDisabled = false,
@@ -106,6 +108,7 @@ export const CustomInput = <T extends FieldValues>({
               defaultValue={defaultValue}
               endContent={endContent}
               isDisabled={isDisabled}
+              isReadOnly={isReadOnly}
               {...field}
             />
           </FormControl>