Refactor ShowProviderFormCompose component: streamline provider rendering logic and ensure Gitea integration is fully functional with updated tab and content handling.

apps/dokploy/components/dashboard/compose/general/generic/show.tsx

@@ -19,7 +19,7 @@ import { SaveGiteaProviderCompose } from "./save-gitea-provider-compose";
 import { SaveGithubProviderCompose } from "./save-github-provider-compose";
 import { SaveGitlabProviderCompose } from "./save-gitlab-provider-compose";
 
-type TabState = "github" | "git" | "raw" | "gitlab" | "bitbucket" | "gitea"; // Adding gitea to the TabState
+type TabState = "github" | "git" | "raw" | "gitlab" | "bitbucket" | "gitea";
 interface Props {
 	composeId: string;
 }
@@ -29,56 +29,11 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 	const { data: gitlabProviders } = api.gitlab.gitlabProviders.useQuery();
 	const { data: bitbucketProviders } =
 		api.bitbucket.bitbucketProviders.useQuery();
-	const { data: giteaProviders } = api.gitea.giteaProviders.useQuery(); // Fetching Gitea providers
+	const { data: giteaProviders } = api.gitea.giteaProviders.useQuery();
 
 	const { data: compose } = api.compose.one.useQuery({ composeId });
 	const [tab, setSab] = useState<TabState>(compose?.sourceType || "github");
 
-	// Ensure we fall back to empty arrays if the data is undefined
-	const safeGithubProviders = githubProviders || [];
-	const safeGitlabProviders = gitlabProviders || [];
-	const safeBitbucketProviders = bitbucketProviders || [];
-	const safeGiteaProviders = giteaProviders || [];
-
-	const renderProviderContent = (
-		providers: any[],
-		providerType: string,
-		ProviderComponent: React.ComponentType<any>,
-	) => {
-		if (providers.length > 0) {
-			return <ProviderComponent composeId={composeId} />;
-		}
-
-		return (
-			<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
-				{providerType === "github" && (
-					<GithubIcon className="size-8 text-muted-foreground" />
-				)}
-				{providerType === "gitlab" && (
-					<GitlabIcon className="size-8 text-muted-foreground" />
-				)}
-				{providerType === "bitbucket" && (
-					<BitbucketIcon className="size-8 text-muted-foreground" />
-				)}
-				{providerType === "gitea" && (
-					<GiteaIcon className="size-8 text-muted-foreground" />
-				)}
-				<span className="text-base text-muted-foreground">
-					To deploy using{" "}
-					{providerType.charAt(0).toUpperCase() + providerType.slice(1)}, you
-					need to configure your account first. Please, go to{" "}
-					<Link
-						href="/dashboard/settings/git-providers"
-						className="text-foreground"
-					>
-						Settings
-					</Link>{" "}
-					to do so.
-				</span>
-			</div>
-		);
-	};
-
 	return (
 		<Card className="group relative w-full bg-transparent">
 			<CardHeader>
@@ -127,7 +82,7 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 								Bitbucket
 							</TabsTrigger>
 							<TabsTrigger
-								value="gitea" // Added Gitea tab
+								value="gitea"
 								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
 							>
 								<GiteaIcon className="size-4 text-current fill-current" /> Gitea
@@ -150,31 +105,83 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 					</div>
 
 					<TabsContent value="github" className="w-full p-2">
-						{renderProviderContent(
-							safeGithubProviders,
-							"github",
-							SaveGithubProviderCompose,
-						)}
-					</TabsContent>
-					<TabsContent value="gitea" className="w-full p-2">
-						{renderProviderContent(
-							safeGiteaProviders,
-							"gitea",
-							SaveGiteaProviderCompose,
+						{githubProviders && githubProviders?.length > 0 ? (
+							<SaveGithubProviderCompose composeId={composeId} />
+						) : (
+							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
+								<GithubIcon className="size-8 text-muted-foreground" />
+								<span className="text-base text-muted-foreground">
+									To deploy using GitHub, you need to configure your account
+									first. Please, go to{" "}
+									<Link
+										href="/dashboard/settings/git-providers"
+										className="text-foreground"
+									>
+										Settings
+									</Link>{" "}
+									to do so.
+								</span>
+							</div>
 						)}
 					</TabsContent>
 					<TabsContent value="gitlab" className="w-full p-2">
-						{renderProviderContent(
-							safeGitlabProviders,
-							"gitlab",
-							SaveGitlabProviderCompose,
+						{gitlabProviders && gitlabProviders?.length > 0 ? (
+							<SaveGitlabProviderCompose composeId={composeId} />
+						) : (
+							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
+								<GitlabIcon className="size-8 text-muted-foreground" />
+								<span className="text-base text-muted-foreground">
+									To deploy using GitLab, you need to configure your account
+									first. Please, go to{" "}
+									<Link
+										href="/dashboard/settings/git-providers"
+										className="text-foreground"
+									>
+										Settings
+									</Link>{" "}
+									to do so.
+								</span>
+							</div>
 						)}
 					</TabsContent>
 					<TabsContent value="bitbucket" className="w-full p-2">
-						{renderProviderContent(
-							safeBitbucketProviders,
-							"bitbucket",
-							SaveBitbucketProviderCompose,
+						{bitbucketProviders && bitbucketProviders?.length > 0 ? (
+							<SaveBitbucketProviderCompose composeId={composeId} />
+						) : (
+							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
+								<BitbucketIcon className="size-8 text-muted-foreground" />
+								<span className="text-base text-muted-foreground">
+									To deploy using Bitbucket, you need to configure your account
+									first. Please, go to{" "}
+									<Link
+										href="/dashboard/settings/git-providers"
+										className="text-foreground"
+									>
+										Settings
+									</Link>{" "}
+									to do so.
+								</span>
+							</div>
+						)}
+					</TabsContent>
+					<TabsContent value="gitea" className="w-full p-2">
+						{giteaProviders && giteaProviders?.length > 0 ? (
+							<SaveGiteaProviderCompose composeId={composeId} />
+						) : (
+							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
+								<GiteaIcon className="size-8 text-muted-foreground" />
+								<span className="text-base text-muted-foreground">
+									To deploy using Gitea, you need to configure your account
+									first. Please, go to{" "}
+									<Link
+										href="/dashboard/settings/git-providers"
+										className="text-foreground"
+									>
+										Settings
+									</Link>{" "}
+									to do so.
+								</span>
+							</div>
 						)}
 					</TabsContent>
 					<TabsContent value="git" className="w-full p-2">