feat(ui): Add AWS CloudFormation Quick Link to deploy the IAM Role (#7735)

ui/CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 - Add a new chart to show the split between passed and failed findings. [(#7680)](https://github.com/prowler-cloud/prowler/pull/7680)
 - Added `Accordion` component. [(#7700)](https://github.com/prowler-cloud/prowler/pull/7700)
+- Added an AWS CloudFormation Quick Link to the IAM Role credentials step [(#7735)](https://github.com/prowler-cloud/prowler/pull/7735)
 
 ### 🐞 Fixes
 

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

@@ -1,9 +1,11 @@
 "use client";
 
 import { Snippet } from "@nextui-org/react";
-import Link from "next/link";
 import { useSession } from "next-auth/react";
 
+import { CustomButton } from "@/components/ui/custom";
+import { getAWSCredentialsTemplateLinks } from "@/lib";
+
 export const CredentialsRoleHelper = () => {
   const { data: session } = useSession();
 
@@ -12,24 +14,50 @@ export const CredentialsRoleHelper = () => {
       <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.
+        </p>
+
+        <CustomButton
+          ariaLabel="Use the following AWS CloudFormation Quick Link to deploy the IAM Role"
+          color="transparent"
+          className="h-auto w-fit min-w-0 p-0 text-blue-500"
+          asLink={`${getAWSCredentialsTemplateLinks().cloudformationQuickLink}${session?.tenantId}`}
+          target="_blank"
+        >
+          Use the following AWS CloudFormation Quick Link to deploy the IAM Role
+        </CustomButton>
+
+        <div className="flex items-center gap-2">
+          <div className="h-px flex-1 bg-gray-200 dark:bg-gray-700" />
+          <span className="text-xs font-bold text-gray-900 dark:text-gray-300">
+            or
+          </span>
+          <div className="h-px flex-1 bg-gray-200 dark:bg-gray-700" />
+        </div>
+        <p className="text-sm text-gray-600 dark:text-gray-400">
           Use one of the following templates to create the IAM role:
         </p>
+
         <div className="flex w-fit flex-col gap-2">
-          <Link
-            href="https://github.com/prowler-cloud/prowler/blob/master/permissions/templates/cloudformation/prowler-scan-role.yml"
+          <CustomButton
+            ariaLabel="CloudFormation Template"
+            color="transparent"
+            className="h-auto w-fit min-w-0 p-0 text-blue-500"
+            asLink={getAWSCredentialsTemplateLinks().cloudformation}
             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"
+          </CustomButton>
+          <CustomButton
+            ariaLabel="Terraform Code"
+            color="transparent"
+            className="h-auto w-fit min-w-0 p-0 text-blue-500"
+            asLink={getAWSCredentialsTemplateLinks().terraform}
             target="_blank"
-            className="text-sm font-medium text-blue-500 hover:underline"
           >
             Terraform Code
-          </Link>
+          </CustomButton>
         </div>
+
         <p className="text-xs font-bold text-gray-600 dark:text-gray-400">
           The External ID will also be required:
         </p>

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

@@ -1,4 +1,4 @@
-import { Select, SelectItem, Spacer } from "@nextui-org/react";
+import { Divider, Select, SelectItem, Spacer } from "@nextui-org/react";
 import { Control, UseFormSetValue, useWatch } from "react-hook-form";
 
 import { CustomInput } from "@/components/ui/custom";
@@ -89,10 +89,11 @@ export const AWSCredentialsRoleForm = ({
           />
         </>
       )}
+      <Divider />
+      <span className="text-xs font-bold text-default-500">Assume Role</span>
       <CredentialsRoleHelper />
 
       <Spacer y={2} />
-      <span className="text-xs font-bold text-default-500">Assume Role</span>
 
       <CustomInput
         control={control}
@@ -111,7 +112,7 @@ export const AWSCredentialsRoleForm = ({
         type="text"
         label="External ID"
         labelPlacement="inside"
-        placeholder="Enter the External ID"
+        placeholder={externalId}
         variant="bordered"
         defaultValue={externalId}
         isDisabled

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

@@ -2,6 +2,7 @@ import Link from "next/link";
 
 import { getProviderName } from "@/components/ui/entities/get-provider-logo";
 import { getProviderLogo } from "@/components/ui/entities/get-provider-logo";
+import { getProviderHelpText } from "@/lib";
 import { ProviderType } from "@/types";
 
 export const ProviderTitleDocs = ({
@@ -9,41 +10,6 @@ export const ProviderTitleDocs = ({
 }: {
   providerType: ProviderType;
 }) => {
-  const getProviderHelpText = (provider: string) => {
-    switch (provider) {
-      case "aws":
-        return {
-          text: "Need help connecting your AWS account?",
-          link: "https://goto.prowler.com/provider-aws",
-        };
-      case "azure":
-        return {
-          text: "Need help connecting your Azure subscription?",
-          link: "https://goto.prowler.com/provider-azure",
-        };
-      case "m365":
-        return {
-          text: "Need help connecting your Microsoft 365 account?",
-          link: "https://goto.prowler.com/provider-m365",
-        };
-      case "gcp":
-        return {
-          text: "Need help connecting your GCP project?",
-          link: "https://goto.prowler.com/provider-gcp",
-        };
-      case "kubernetes":
-        return {
-          text: "Need help connecting your Kubernetes cluster?",
-          link: "https://goto.prowler.com/provider-k8s",
-        };
-      default:
-        return {
-          text: "How to setup a provider?",
-          link: "https://goto.prowler.com/provider-help",
-        };
-    }
-  };
-
   return (
     <div className="flex flex-col gap-y-2">
       <div className="flex space-x-4">

ui/lib/external-urls.ts

@@ -0,0 +1,45 @@
+export const getProviderHelpText = (provider: string) => {
+  switch (provider) {
+    case "aws":
+      return {
+        text: "Need help connecting your AWS account?",
+        link: "https://goto.prowler.com/provider-aws",
+      };
+    case "azure":
+      return {
+        text: "Need help connecting your Azure subscription?",
+        link: "https://goto.prowler.com/provider-azure",
+      };
+    case "m365":
+      return {
+        text: "Need help connecting your Microsoft 365 account?",
+        link: "https://goto.prowler.com/provider-m365",
+      };
+    case "gcp":
+      return {
+        text: "Need help connecting your GCP project?",
+        link: "https://goto.prowler.com/provider-gcp",
+      };
+    case "kubernetes":
+      return {
+        text: "Need help connecting your Kubernetes cluster?",
+        link: "https://goto.prowler.com/provider-k8s",
+      };
+    default:
+      return {
+        text: "How to setup a provider?",
+        link: "https://goto.prowler.com/provider-help",
+      };
+  }
+};
+
+export const getAWSCredentialsTemplateLinks = () => {
+  return {
+    cloudformation:
+      "https://github.com/prowler-cloud/prowler/blob/master/permissions/templates/cloudformation/prowler-scan-role.yml",
+    cloudformationQuickLink:
+      "https://us-east-1.console.aws.amazon.com/cloudformation/home?region=us-east-1#/stacks/quickcreate?templateURL=https%3A%2F%2Fprowler-cloud-public.s3.eu-west-1.amazonaws.com%2Fpermissions%2Ftemplates%2Faws%2Fcloudformation%2Fprowler-scan-role.yml&stackName=ProwlerScanRole&param_ExternalId=",
+    terraform:
+      "https://github.com/prowler-cloud/prowler/blob/master/permissions/templates/terraform/main.tf",
+  };
+};

ui/lib/index.ts

@@ -1,3 +1,4 @@
+export * from "./external-urls";
 export * from "./helper";
 export * from "./menu-list";
 export * from "./utils";