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 && (
<>
-
- {providerType && getProviderLogo(providerType as ProviderType)}
-
- {providerType
- ? getProviderName(providerType as ProviderType)
- : "Unknown Provider"}
-
-
+
{
+ return (
+
+ {provider && getProviderLogo(provider)}
+
+ {provider ? getProviderName(provider) : "Unknown Provider"}
+
+
+ {provider && (
+
+ {getProviderVideoLink(provider).text}
+
+ )}
+
+
+ );
+ };
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",
+ };
+ }
+};