feat: add providers to compose

apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx

@@ -44,6 +44,7 @@ const GitlabProviderSchema = z.object({
 		.object({
 			repo: z.string().min(1, "Repo is required"),
 			owner: z.string().min(1, "Owner is required"),
+			gitlabPathNamespace: z.string().min(1),
 			id: z.number().nullable(),
 		})
 		.required(),
@@ -70,6 +71,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 			repository: {
 				owner: "",
 				repo: "",
+				gitlabPathNamespace: "",
 				id: null,
 			},
 			gitlabId: "",
@@ -112,6 +114,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 				repository: {
 					repo: data.gitlabRepository || "",
 					owner: data.gitlabOwner || "",
+					gitlabPathNamespace: data.gitlabPathNamespace || "",
 					id: data.gitlabProjectId,
 				},
 				buildPath: data.gitlabBuildPath || "/",
@@ -129,6 +132,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 			gitlabId: data.gitlabId,
 			applicationId,
 			gitlabProjectId: data.repository.id,
+			gitlabPathNamespace: data.repository.gitlabPathNamespace,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -161,6 +165,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 												owner: "",
 												repo: "",
 												id: null,
+												gitlabPathNamespace: "",
 											});
 											form.setValue("branch", "");
 										}}
@@ -246,6 +251,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 																			owner: repo.owner.username as string,
 																			repo: repo.name,
 																			id: repo.id,
+																			gitlabPathNamespace: repo.url,
 																		});
 																		form.setValue("branch", "");
 																	}}

apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx

@@ -0,0 +1,375 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "@/components/ui/command";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const BitbucketProviderSchema = z.object({
+	composePath: z.string().min(1),
+	repository: z
+		.object({
+			repo: z.string().min(1, "Repo is required"),
+			owner: z.string().min(1, "Owner is required"),
+		})
+		.required(),
+	branch: z.string().min(1, "Branch is required"),
+	bitbucketId: z.string().min(1, "Bitbucket Provider is required"),
+});
+
+type BitbucketProvider = z.infer<typeof BitbucketProviderSchema>;
+
+interface Props {
+	composeId: string;
+}
+
+export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
+	const { data: bitbucketProviders } =
+		api.gitProvider.bitbucketProviders.useQuery();
+	const { data, refetch } = api.compose.one.useQuery({ composeId });
+
+	const { mutateAsync, isLoading: isSavingBitbucketProvider } =
+		api.compose.update.useMutation();
+
+	const form = useForm<BitbucketProvider>({
+		defaultValues: {
+			composePath: "./docker-compose.yml",
+			repository: {
+				owner: "",
+				repo: "",
+			},
+			bitbucketId: "",
+			branch: "",
+		},
+		resolver: zodResolver(BitbucketProviderSchema),
+	});
+
+	const repository = form.watch("repository");
+	const bitbucketId = form.watch("bitbucketId");
+
+	const {
+		data: repositories,
+		isLoading: isLoadingRepositories,
+		error,
+		isError,
+	} = api.gitProvider.getBitbucketRepositories.useQuery({
+		bitbucketId,
+	});
+
+	const {
+		data: branches,
+		fetchStatus,
+		status,
+	} = api.gitProvider.getBitbucketBranches.useQuery(
+		{
+			owner: repository?.owner,
+			repo: repository?.repo,
+			bitbucketId,
+		},
+		{
+			enabled: !!repository?.owner && !!repository?.repo && !!bitbucketId,
+		},
+	);
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				branch: data.bitbucketBranch || "",
+				repository: {
+					repo: data.bitbucketRepository || "",
+					owner: data.bitbucketOwner || "",
+				},
+				composePath: data.composePath,
+				bitbucketId: data.bitbucketId || "",
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (data: BitbucketProvider) => {
+		await mutateAsync({
+			bitbucketBranch: data.branch,
+			bitbucketRepository: data.repository.repo,
+			bitbucketOwner: data.repository.owner,
+			bitbucketId: data.bitbucketId,
+			composePath: data.composePath,
+			composeId,
+			sourceType: "bitbucket",
+			composeStatus: "idle",
+		})
+			.then(async () => {
+				toast.success("Service Provided Saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the Bitbucket provider");
+			});
+	};
+
+	return (
+		<div>
+			<Form {...form}>
+				<form
+					onSubmit={form.handleSubmit(onSubmit)}
+					className="grid w-full gap-4 py-3"
+				>
+					{error && (
+						<AlertBlock type="error">Repositories: {error.message}</AlertBlock>
+					)}
+					<div className="grid md:grid-cols-2 gap-4">
+						<FormField
+							control={form.control}
+							name="bitbucketId"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2 flex flex-col">
+									<FormLabel>Bitbucket Account</FormLabel>
+									<Select
+										onValueChange={(value) => {
+											field.onChange(value);
+											form.setValue("repository", {
+												owner: "",
+												repo: "",
+											});
+											form.setValue("branch", "");
+										}}
+										defaultValue={field.value}
+										value={field.value}
+									>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a Bitbucket Account" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											{bitbucketProviders?.map((bitbucketProvider) => (
+												<SelectItem
+													key={bitbucketProvider.bitbucketId}
+													value={bitbucketProvider.bitbucketId}
+												>
+													{bitbucketProvider.gitProvider.name}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="repository"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2 flex flex-col">
+									<FormLabel>Repository</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													role="combobox"
+													className={cn(
+														"w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{isLoadingRepositories
+														? "Loading...."
+														: field.value.owner
+															? repositories?.find(
+																	(repo) => repo.name === field.value.repo,
+																)?.name
+															: "Select repository"}
+
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search repository..."
+													className="h-9"
+												/>
+												{isLoadingRepositories && (
+													<span className="py-6 text-center text-sm">
+														Loading Repositories....
+													</span>
+												)}
+												<CommandEmpty>No repositories found.</CommandEmpty>
+												<ScrollArea className="h-96">
+													<CommandGroup>
+														{repositories?.map((repo) => (
+															<CommandItem
+																value={repo.url}
+																key={repo.url}
+																onSelect={() => {
+																	form.setValue("repository", {
+																		owner: repo.owner.username as string,
+																		repo: repo.name,
+																	});
+																	form.setValue("branch", "");
+																}}
+															>
+																{repo.name}
+																<CheckIcon
+																	className={cn(
+																		"ml-auto h-4 w-4",
+																		repo.name === field.value.repo
+																			? "opacity-100"
+																			: "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														))}
+													</CommandGroup>
+												</ScrollArea>
+											</Command>
+										</PopoverContent>
+									</Popover>
+									{form.formState.errors.repository && (
+										<p className={cn("text-sm font-medium text-destructive")}>
+											Repository is required
+										</p>
+									)}
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="branch"
+							render={({ field }) => (
+								<FormItem className="block w-full">
+									<FormLabel>Branch</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													role="combobox"
+													className={cn(
+														" w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{status === "loading" && fetchStatus === "fetching"
+														? "Loading...."
+														: field.value
+															? branches?.find(
+																	(branch) => branch.name === field.value,
+																)?.name
+															: "Select branch"}
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search branch..."
+													className="h-9"
+												/>
+												{status === "loading" && fetchStatus === "fetching" && (
+													<span className="py-6 text-center text-sm text-muted-foreground">
+														Loading Branches....
+													</span>
+												)}
+												{!repository?.owner && (
+													<span className="py-6 text-center text-sm text-muted-foreground">
+														Select a repository
+													</span>
+												)}
+												<ScrollArea className="h-96">
+													<CommandEmpty>No branch found.</CommandEmpty>
+
+													<CommandGroup>
+														{branches?.map((branch) => (
+															<CommandItem
+																value={branch.name}
+																key={branch.commit.sha}
+																onSelect={() => {
+																	form.setValue("branch", branch.name);
+																}}
+															>
+																{branch.name}
+																<CheckIcon
+																	className={cn(
+																		"ml-auto h-4 w-4",
+																		branch.name === field.value
+																			? "opacity-100"
+																			: "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														))}
+													</CommandGroup>
+												</ScrollArea>
+											</Command>
+										</PopoverContent>
+
+										<FormMessage />
+									</Popover>
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="composePath"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Compose Path</FormLabel>
+									<FormControl>
+										<Input placeholder="docker-compose.yml" {...field} />
+									</FormControl>
+
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</div>
+					<div className="flex w-full justify-end">
+						<Button
+							isLoading={isSavingBitbucketProvider}
+							type="submit"
+							className="w-fit"
+						>
+							Save
+						</Button>
+					</div>
+				</form>
+			</Form>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx

@@ -21,6 +21,13 @@ import {
 	PopoverTrigger,
 } from "@/components/ui/popover";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -39,6 +46,7 @@ const GithubProviderSchema = z.object({
 		})
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
+	githubId: z.string().min(1, "Github Provider is required"),
 });
 
 type GithubProvider = z.infer<typeof GithubProviderSchema>;
@@ -48,6 +56,7 @@ interface Props {
 }
 
 export const SaveGithubProviderCompose = ({ composeId }: Props) => {
+	const { data: githubProviders } = api.gitProvider.githubProviders.useQuery();
 	const { data, refetch } = api.compose.one.useQuery({ composeId });
 
 	const { mutateAsync, isLoading: isSavingGithubProvider } =
@@ -60,26 +69,33 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 				owner: "",
 				repo: "",
 			},
+			githubId: "",
 			branch: "",
 		},
 		resolver: zodResolver(GithubProviderSchema),
 	});
 
 	const repository = form.watch("repository");
+	const githubId = form.watch("githubId");
 
 	const { data: repositories, isLoading: isLoadingRepositories } =
-		api.admin.getRepositories.useQuery();
+		api.gitProvider.getRepositories.useQuery({
+			githubId,
+		});
 
 	const {
 		data: branches,
 		fetchStatus,
 		status,
-	} = api.admin.getBranches.useQuery(
+	} = api.gitProvider.getBranches.useQuery(
 		{
 			owner: repository?.owner,
 			repo: repository?.repo,
+			githubId,
+		},
+		{
+			enabled: !!repository?.owner && !!repository?.repo && !!githubId,
 		},
-		{ enabled: !!repository?.owner && !!repository?.repo },
 	);
 
 	useEffect(() => {
@@ -91,19 +107,21 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 					owner: data.owner || "",
 				},
 				composePath: data.composePath,
+				githubId: data.githubId || "",
 			});
 		}
 	}, [form.reset, data, form]);
 
 	const onSubmit = async (data: GithubProvider) => {
-		console.log(data);
 		await mutateAsync({
 			branch: data.branch,
 			repository: data.repository.repo,
-			composeId: composeId,
+			composeId,
 			owner: data.repository.owner,
-			sourceType: "github",
 			composePath: data.composePath,
+			githubId: data.githubId,
+			sourceType: "github",
+			composeStatus: "idle",
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -122,6 +140,45 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 					className="grid w-full gap-4 py-3"
 				>
 					<div className="grid md:grid-cols-2 gap-4">
+						<FormField
+							control={form.control}
+							name="githubId"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2 flex flex-col">
+									<FormLabel>Github Account</FormLabel>
+									<Select
+										onValueChange={(value) => {
+											field.onChange(value);
+											form.setValue("repository", {
+												owner: "",
+												repo: "",
+											});
+											form.setValue("branch", "");
+										}}
+										defaultValue={field.value}
+										value={field.value}
+									>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a Github Account" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											{githubProviders?.map((githubProvider) => (
+												<SelectItem
+													key={githubProvider.githubId}
+													value={githubProvider.githubId}
+												>
+													{githubProvider.gitProvider.name}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
 						<FormField
 							control={form.control}
 							name="repository"
@@ -278,7 +335,6 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
-
 						<FormField
 							control={form.control}
 							name="composePath"

apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx

@@ -0,0 +1,391 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "@/components/ui/command";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const GitlabProviderSchema = z.object({
+	composePath: z.string().min(1),
+	repository: z
+		.object({
+			repo: z.string().min(1, "Repo is required"),
+			owner: z.string().min(1, "Owner is required"),
+			id: z.number().nullable(),
+			gitlabPathNamespace: z.string().min(1),
+		})
+		.required(),
+	branch: z.string().min(1, "Branch is required"),
+	gitlabId: z.string().min(1, "Gitlab Provider is required"),
+});
+
+type GitlabProvider = z.infer<typeof GitlabProviderSchema>;
+
+interface Props {
+	composeId: string;
+}
+
+export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
+	const { data: gitlabProviders } = api.gitProvider.gitlabProviders.useQuery();
+	const { data, refetch } = api.compose.one.useQuery({ composeId });
+
+	const { mutateAsync, isLoading: isSavingGitlabProvider } =
+		api.compose.update.useMutation();
+
+	const form = useForm<GitlabProvider>({
+		defaultValues: {
+			composePath: "./docker-compose.yml",
+			repository: {
+				owner: "",
+				repo: "",
+				gitlabPathNamespace: "",
+				id: null,
+			},
+			gitlabId: "",
+			branch: "",
+		},
+		resolver: zodResolver(GitlabProviderSchema),
+	});
+
+	const repository = form.watch("repository");
+	const gitlabId = form.watch("gitlabId");
+
+	const {
+		data: repositories,
+		isLoading: isLoadingRepositories,
+		error,
+	} = api.gitProvider.getGitlabRepositories.useQuery({
+		gitlabId,
+	});
+
+	const {
+		data: branches,
+		fetchStatus,
+		status,
+	} = api.gitProvider.getGitlabBranches.useQuery(
+		{
+			owner: repository?.owner,
+			repo: repository?.repo,
+			id: repository?.id,
+			gitlabId: gitlabId,
+		},
+		{
+			enabled: !!repository?.owner && !!repository?.repo && !!gitlabId,
+		},
+	);
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				branch: data.gitlabBranch || "",
+				repository: {
+					repo: data.gitlabRepository || "",
+					owner: data.gitlabOwner || "",
+					id: data.gitlabProjectId,
+					gitlabPathNamespace: data.gitlabPathNamespace || "",
+				},
+				composePath: data.composePath,
+				gitlabId: data.gitlabId || "",
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (data: GitlabProvider) => {
+		await mutateAsync({
+			gitlabBranch: data.branch,
+			gitlabRepository: data.repository.repo,
+			gitlabOwner: data.repository.owner,
+			composePath: data.composePath,
+			gitlabId: data.gitlabId,
+			composeId,
+			gitlabProjectId: data.repository.id,
+			gitlabPathNamespace: data.repository.gitlabPathNamespace,
+			sourceType: "gitlab",
+			composeStatus: "idle",
+		})
+			.then(async () => {
+				toast.success("Service Provided Saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the gitlab provider");
+			});
+	};
+
+	return (
+		<div>
+			<Form {...form}>
+				<form
+					onSubmit={form.handleSubmit(onSubmit)}
+					className="grid w-full gap-4 py-3"
+				>
+					{error && <AlertBlock type="error">{error?.message}</AlertBlock>}
+					<div className="grid md:grid-cols-2 gap-4">
+						<FormField
+							control={form.control}
+							name="gitlabId"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2 flex flex-col">
+									<FormLabel>Gitlab Account</FormLabel>
+									<Select
+										onValueChange={(value) => {
+											field.onChange(value);
+											form.setValue("repository", {
+												owner: "",
+												repo: "",
+												gitlabPathNamespace: "",
+												id: null,
+											});
+											form.setValue("branch", "");
+										}}
+										defaultValue={field.value}
+										value={field.value}
+									>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a Gitlab Account" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											{gitlabProviders?.map((gitlabProvider) => (
+												<SelectItem
+													key={gitlabProvider.gitlabId}
+													value={gitlabProvider.gitlabId}
+												>
+													{gitlabProvider.gitProvider.name}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="repository"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2 flex flex-col">
+									<FormLabel>Repository</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													role="combobox"
+													className={cn(
+														"w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{isLoadingRepositories
+														? "Loading...."
+														: field.value.owner
+															? repositories?.find(
+																	(repo) => repo.name === field.value.repo,
+																)?.name
+															: "Select repository"}
+
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search repository..."
+													className="h-9"
+												/>
+												{isLoadingRepositories && (
+													<span className="py-6 text-center text-sm">
+														Loading Repositories....
+													</span>
+												)}
+												<CommandEmpty>No repositories found.</CommandEmpty>
+												<ScrollArea className="h-96">
+													<CommandGroup>
+														{repositories && repositories.length === 0 && (
+															<CommandEmpty>
+																No repositories found.
+															</CommandEmpty>
+														)}
+														{repositories?.map((repo) => {
+															return (
+																<CommandItem
+																	value={repo.url}
+																	key={repo.url}
+																	onSelect={() => {
+																		form.setValue("repository", {
+																			owner: repo.owner.username as string,
+																			repo: repo.name,
+																			id: repo.id,
+																			gitlabPathNamespace: repo.url,
+																		});
+																		form.setValue("branch", "");
+																	}}
+																>
+																	{repo.name}
+																	<CheckIcon
+																		className={cn(
+																			"ml-auto h-4 w-4",
+																			repo.name === field.value.repo
+																				? "opacity-100"
+																				: "opacity-0",
+																		)}
+																	/>
+																</CommandItem>
+															);
+														})}
+													</CommandGroup>
+												</ScrollArea>
+											</Command>
+										</PopoverContent>
+									</Popover>
+									{form.formState.errors.repository && (
+										<p className={cn("text-sm font-medium text-destructive")}>
+											Repository is required
+										</p>
+									)}
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="branch"
+							render={({ field }) => (
+								<FormItem className="block w-full">
+									<FormLabel>Branch</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													role="combobox"
+													className={cn(
+														" w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{status === "loading" && fetchStatus === "fetching"
+														? "Loading...."
+														: field.value
+															? branches?.find(
+																	(branch) => branch.name === field.value,
+																)?.name
+															: "Select branch"}
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search branch..."
+													className="h-9"
+												/>
+												{status === "loading" && fetchStatus === "fetching" && (
+													<span className="py-6 text-center text-sm text-muted-foreground">
+														Loading Branches....
+													</span>
+												)}
+												{!repository?.owner && (
+													<span className="py-6 text-center text-sm text-muted-foreground">
+														Select a repository
+													</span>
+												)}
+												<ScrollArea className="h-96">
+													<CommandEmpty>No branch found.</CommandEmpty>
+
+													<CommandGroup>
+														{branches?.map((branch) => (
+															<CommandItem
+																value={branch.name}
+																key={branch.commit.id}
+																onSelect={() => {
+																	form.setValue("branch", branch.name);
+																}}
+															>
+																{branch.name}
+																<CheckIcon
+																	className={cn(
+																		"ml-auto h-4 w-4",
+																		branch.name === field.value
+																			? "opacity-100"
+																			: "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														))}
+													</CommandGroup>
+												</ScrollArea>
+											</Command>
+										</PopoverContent>
+
+										<FormMessage />
+									</Popover>
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="composePath"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Compose Path</FormLabel>
+									<FormControl>
+										<Input placeholder="docker-compose.yml" {...field} />
+									</FormControl>
+
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</div>
+					<div className="flex w-full justify-end">
+						<Button
+							isLoading={isSavingGitlabProvider}
+							type="submit"
+							className="w-fit"
+						>
+							Save
+						</Button>
+					</div>
+				</form>
+			</Form>
+		</div>
+	);
+};

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

@@ -8,15 +8,25 @@ import { ComposeFileEditor } from "../compose-file-editor";
 import { ShowConvertedCompose } from "../show-converted-compose";
 import { SaveGitProviderCompose } from "./save-git-provider-compose";
 import { SaveGithubProviderCompose } from "./save-github-provider-compose";
+import {
+	BitbucketIcon,
+	GithubIcon,
+	GitIcon,
+	GitlabIcon,
+} from "@/components/icons/data-tools-icons";
+import { SaveGitlabProviderCompose } from "./save-gitlab-provider-compose";
+import { SaveBitbucketProviderCompose } from "./save-bitbucket-provider-compose";
 
-type TabState = "github" | "git" | "raw";
+type TabState = "github" | "git" | "raw" | "gitlab" | "bitbucket";
 interface Props {
 	composeId: string;
 }
 
 export const ShowProviderFormCompose = ({ composeId }: Props) => {
-	const { data: haveGithubConfigured } =
-		api.admin.haveGithubConfigured.useQuery();
+	const { data: githubProviders } = api.gitProvider.githubProviders.useQuery();
+	const { data: gitlabProviders } = api.gitProvider.gitlabProviders.useQuery();
+	const { data: bitbucketProviders } =
+		api.gitProvider.bitbucketProviders.useQuery();
 
 	const { data: compose } = api.compose.one.useQuery({ composeId });
 	const [tab, setSab] = useState<TabState>(compose?.sourceType || "github");
@@ -44,38 +54,96 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 						setSab(e as TabState);
 					}}
 				>
-					<TabsList className="grid w-fit grid-cols-4 bg-transparent">
-						<TabsTrigger
-							value="github"
-							className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
-						>
-							Github
-						</TabsTrigger>
+					<div className="flex flex-row items-center justify-between  w-full gap-4">
+						<TabsList className="md:grid md:w-fit md:grid-cols-5 max-md:overflow-x-scroll justify-start bg-transparent overflow-y-hidden">
+							<TabsTrigger
+								value="github"
+								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+							>
+								<GithubIcon className="size-4 text-current fill-current" />
+								Github
+							</TabsTrigger>
+							<TabsTrigger
+								value="gitlab"
+								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+							>
+								<GitlabIcon className="size-4 text-current fill-current" />
+								Gitlab
+							</TabsTrigger>
+							<TabsTrigger
+								value="bitbucket"
+								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+							>
+								<BitbucketIcon className="size-4 text-current fill-current" />
+								Bitbucket
+							</TabsTrigger>
 
-						<TabsTrigger
-							value="git"
-							className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
-						>
-							Git
-						</TabsTrigger>
-						<TabsTrigger
-							value="raw"
-							className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
-						>
-							Raw
-						</TabsTrigger>
-					</TabsList>
+							<TabsTrigger
+								value="git"
+								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+							>
+								<GitIcon />
+								Git
+							</TabsTrigger>
+							<TabsTrigger
+								value="raw"
+								className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+							>
+								Raw
+							</TabsTrigger>
+						</TabsList>
+					</div>
 					<TabsContent value="github" className="w-full p-2">
-						{haveGithubConfigured ? (
+						{githubProviders && githubProviders?.length > 0 ? (
 							<SaveGithubProviderCompose composeId={composeId} />
 						) : (
-							<div className="flex flex-col items-center gap-3">
-								<LockIcon className="size-8 text-muted-foreground" />
+							<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/server"
+										href="/dashboard/settings/git-providers"
+										className="text-foreground"
+									>
+										Settings
+									</Link>{" "}
+									to do so.
+								</span>
+							</div>
+						)}
+					</TabsContent>
+					<TabsContent value="gitlab" className="w-full p-2">
+						{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">
+						{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

apps/dokploy/components/icons/data-tools-icons.tsx

@@ -256,8 +256,8 @@ export const DockerIcon = ({ className }: Props) => {
 export const GitIcon = ({ className }: Props) => {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="20"
+			height="20"
 			viewBox="0 0 256 256"
 			xmlns="http://www.w3.org/2000/svg"
 			preserveAspectRatio="xMinYMin meet"