From d3a326baab2097bd06f63a5350f18be5829ef070 Mon Sep 17 00:00:00 2001
From: pedrooot <pedromarting3@gmail.com>
Date: Mon, 17 Mar 2025 18:10:35 +0100
Subject: [PATCH] feat(ui): add component CustomProviderInfo

---
 .../workflow/forms/connect-account-form.tsx   | 15 +++-----
 .../ui/custom/custom-provider-info.tsx        | 35 +++++++++++++++++++
 ui/components/ui/custom/index.ts              |  1 +
 .../ui/entities/get-provider-logo.tsx         | 30 ++++++++++++++++
 4 files changed, 70 insertions(+), 11 deletions(-)
 create mode 100644 ui/components/ui/custom/custom-provider-info.tsx

diff --git a/ui/components/providers/workflow/forms/connect-account-form.tsx b/ui/components/providers/workflow/forms/connect-account-form.tsx
index 5866189627..674c06ff6f 100644
--- a/ui/components/providers/workflow/forms/connect-account-form.tsx
+++ b/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"
diff --git a/ui/components/ui/custom/custom-provider-info.tsx b/ui/components/ui/custom/custom-provider-info.tsx
new file mode 100644
index 0000000000..2e3845f36b
--- /dev/null
+++ b/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>
+    );
+  };
diff --git a/ui/components/ui/custom/index.ts b/ui/components/ui/custom/index.ts
index d236bdc1d1..0118656344 100644
--- a/ui/components/ui/custom/index.ts
+++ b/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";
diff --git a/ui/components/ui/entities/get-provider-logo.tsx b/ui/components/ui/entities/get-provider-logo.tsx
index e4bf4d0a62..07d7f50b0a 100644
--- a/ui/components/ui/entities/get-provider-logo.tsx
+++ b/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://google.com",
+      };
+    case "azure":
+      return {
+        text: "How to setup an Azure subscription",
+        link: "https://google.com",
+      };
+    case "gcp":
+      return {
+        text: "How to setup a GCP project",
+        link: "https://google.com",
+      };
+    case "kubernetes":
+      return {
+        text: "How to setup a Kubernetes cluster",
+        link: "https://google.com",
+      };
+    default:
+      return {
+        text: "How to setup a provider",
+        link: "https://google.com",
+      };
+  }
+};