feat(ui): add interrogations

ui/components/providers/workflow/forms/connect-account-form.tsx

@@ -8,10 +8,8 @@ import { useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { useToast } from "@/components/ui";
-import { CustomButton, CustomInput } from "@/components/ui/custom";
+import { CustomButton, CustomInput, CustomProviderInfo } from "@/components/ui/custom";
 import {
-  getProviderLogo,
-  getProviderName,
   ProviderType,
 } from "@/components/ui/entities";
 import { Form } from "@/components/ui/form";
@@ -170,14 +168,9 @@ export const ConnectAccountForm = () => {
         {/* Step 2: UID, alias, and credentials (if AWS) */}
         {prevStep === 2 && (
           <>
-            <div className="mb-4 flex items-center space-x-4">
-              {providerType && getProviderLogo(providerType as ProviderType)}
-              <span className="text-lg font-semibold">
-                {providerType
-                  ? getProviderName(providerType as ProviderType)
-                  : "Unknown Provider"}
-              </span>
-            </div>
+            <CustomProviderInfo
+              provider={providerType as ProviderType}
+            />
             <CustomInput
               control={form.control}
               name="providerUid"

ui/components/ui/custom/custom-provider-info.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import {
+    getProviderLogo,
+    getProviderName,
+    getProviderVideoLink,
+    ProviderType,
+  } from "@/components/ui/entities";
+import Link from "next/link";
+
+interface CustomProviderInfoProps {
+    provider: ProviderType;
+}
+
+export const CustomProviderInfo = ({ provider }: CustomProviderInfoProps) => {
+    return (
+      <div className="mb-4 flex items-center space-x-4">
+        {provider && getProviderLogo(provider)}
+        <span className="text-lg font-semibold">
+          {provider ? getProviderName(provider) : "Unknown Provider"}
+        </span>
+        <p className="align-baseline text-sm text-blue-400">
+          {provider && (
+            <Link
+              href={getProviderVideoLink(provider).link}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {getProviderVideoLink(provider).text}
+            </Link>
+          )}
+        </p>
+      </div>
+    );
+};

ui/components/ui/custom/index.ts

@@ -7,3 +7,4 @@ export * from "./custom-input";
 export * from "./custom-loader";
 export * from "./custom-radio";
 export * from "./custom-textarea";
+export * from "./custom-provider-info";

ui/components/ui/entities/get-provider-logo.tsx

@@ -38,3 +38,33 @@ export const getProviderName = (provider: ProviderType): string => {
       return "Unknown Provider";
   }
 };
+
+export const getProviderVideoLink = (providerType: ProviderType) => {
+  switch (providerType) {
+    case "aws":
+      return {
+        text: "How to setup an AWS account?",
+        link: "https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app/#step-41-aws-credentials",
+      };
+    case "azure":
+      return {
+        text: "How to setup an Azure subscription?",
+        link: "https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app/#step-42-azure-credentials",
+      };
+    case "gcp":
+      return {
+        text: "How to setup a GCP project?",
+        link: "https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app/#step-43-gcp-credentials",
+      };
+    case "kubernetes":
+      return {
+        text: "How to setup a Kubernetes cluster?",
+        link: "https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app/#step-44-kubernetes-credentials",
+      };
+    default:
+      return {
+        text: "How to setup a provider?",
+        link: "https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app/#step-3-add-a-provider",
+      };
+  }
+};