feat: add permission to access to git providers

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

@@ -1,7 +1,7 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
-import { GitBranch, LockIcon } from "lucide-react";
+import { CodeIcon, GitBranch, LockIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { ComposeFileEditor } from "../compose-file-editor";
@@ -87,8 +87,9 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 							</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"
+								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
 							>
+								<CodeIcon className="size-4 " />
 								Raw
 							</TabsTrigger>
 						</TabsList>

apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx

@@ -10,7 +10,7 @@ import { AddGithubProvider } from "./add-github-provider";
 import { AddBitbucketProvider } from "./add-bitbucket-provider";
 import { api } from "@/utils/api";
 import Link from "next/link";
-import { RemoveGitProvider } from "../github/remove-github-app";
+import { RemoveGitProvider } from "./remove-git-provider";
 import { useUrl } from "@/utils/hooks/use-url";
 
 export const ShowGitProviders = () => {
@@ -32,7 +32,7 @@ export const ShowGitProviders = () => {
 			<div className="space-y-2">
 				<h1 className="text-2xl font-bold">Git Providers</h1>
 				<p className="text-muted-foreground">
-					Connect your Git Providers to use it for login.
+					Connect your Git provider for authentication.
 				</p>
 			</div>
 			<Card className=" bg-transparent">

apps/dokploy/components/dashboard/settings/github/gitlab-setup.tsx

@@ -1,135 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Button, buttonVariants } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { BadgeCheck, ExternalLink } from "lucide-react";
-import Link from "next/link";
-import { api } from "@/utils/api";
-
-export const GitlabSetup = () => {
-	const [applicationId, setApplicationId] = useState("");
-	const [applicationSecret, setApplicationSecret] = useState("");
-	const haveGitlabConfigured = false;
-	const [url, setUrl] = useState("");
-	// const { data: haveGitlabConfigured } =
-	// 	api.admin.haveGitlabConfigured.useQuery();
-	const { data: adminData } = api.admin.one.useQuery();
-
-	useEffect(() => {
-		const protocolAndHost = `${window.location.protocol}//${window.location.host}`;
-
-		setUrl(`${protocolAndHost}`);
-	}, [adminData]);
-
-	// const createGitlabApp = api.admin.createGitlabApp.useMutation();
-
-	const handleCreateApp = async () => {
-		// try {
-		// 	// await createGitlabApp.mutateAsync({
-		// 	// 	applicationId,
-		// 	// 	applicationSecret,
-		// 	// 	callbackUrl: `${window.location.origin}/api/gitlab/callback`,
-		// 	// });
-		// 	// Refetch the configuration status
-		// 	// await haveGitlabConfigured.refetch();
-		// } catch (error) {
-		// 	console.error("Failed to create GitLab app", error);
-		// }
-	};
-
-	return (
-		<Card className="bg-transparent">
-			<CardHeader>
-				<CardTitle className="text-xl">Configure GitLab</CardTitle>
-				<CardDescription>
-					Setup your GitLab account to access your repositories.
-				</CardDescription>
-			</CardHeader>
-			<CardContent className="h-full space-y-2">
-				{haveGitlabConfigured ? (
-					<div className="flex flex-col gap-2">
-						<div className="flex items-center gap-4">
-							<span className="text-muted-foreground text-sm">
-								GitLab account configured successfully.
-							</span>
-							<BadgeCheck className="size-4 text-green-700" />
-						</div>
-						<div className="flex items-end gap-4 flex-wrap">
-							<Button
-								variant="destructive"
-								onClick={() => {
-									/* Implement remove GitLab app logic */
-								}}
-							>
-								Remove GitLab App
-							</Button>
-							<Link
-								href="https://gitlab.com/-/profile/applications"
-								target="_blank"
-								className={buttonVariants({
-									className: "w-fit",
-									variant: "secondary",
-								})}
-							>
-								<span className="text-sm">Manage GitLab App</span>
-							</Link>
-						</div>
-					</div>
-				) : (
-					<div className="flex flex-col gap-4">
-						<p className="text-muted-foreground text-sm">
-							To integrate your GitLab account, you need to create a new
-							application in your GitLab settings. Follow these steps:
-						</p>
-						<ol className="list-decimal list-inside text-sm text-muted-foreground">
-							<li className="flex flex-row gap-2">
-								Go to your GitLab profile settings{" "}
-								<Link
-									href="https://gitlab.com/-/profile/applications"
-									target="_blank"
-								>
-									<ExternalLink className="w-fit text-primary size-4" />
-								</Link>
-							</li>
-							<li>Navigate to Applications</li>
-							<li>
-								Create a new application with the following details:
-								<ul className="list-disc list-inside ml-4">
-									<li>Name: Dokploy</li>
-									<li>Redirect URI: {`${url}/api/gitlab/callback`}</li>
-									<li>Scopes: api, read_user, read_repository</li>
-								</ul>
-							</li>
-							<li>
-								After creating, you'll receive an Application ID and Secret
-							</li>
-						</ol>
-						<Input
-							placeholder="Application ID"
-							value={applicationId}
-							onChange={(e) => setApplicationId(e.target.value)}
-						/>
-						<Input
-							type="password"
-							placeholder="Application Secret"
-							value={applicationSecret}
-							onChange={(e) => setApplicationSecret(e.target.value)}
-						/>
-						<Button
-							onClick={handleCreateApp}
-							disabled={!applicationId || !applicationSecret}
-						>
-							Configure GitLab App
-						</Button>
-					</div>
-				)}
-			</CardContent>
-		</Card>
-	);
-};

apps/dokploy/components/dashboard/settings/users/add-permissions.tsx

@@ -40,6 +40,7 @@ const addPermissions = z.object({
 	canAccessToDocker: z.boolean().optional().default(false),
 	canAccessToAPI: z.boolean().optional().default(false),
 	canAccessToSSHKeys: z.boolean().optional().default(false),
+	canAccessToGitProviders: z.boolean().optional().default(false),
 });
 
 type AddPermissions = z.infer<typeof addPermissions>;
@@ -84,6 +85,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 				canAccessToDocker: data.canAccessToDocker,
 				canAccessToAPI: data.canAccessToAPI,
 				canAccessToSSHKeys: data.canAccessToSSHKeys,
+				canAccessToGitProviders: data.canAccessToGitProviders,
 			});
 		}
 	}, [form, form.formState.isSubmitSuccessful, form.reset, data]);
@@ -101,6 +103,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 			canAccessToDocker: data.canAccessToDocker,
 			canAccessToAPI: data.canAccessToAPI,
 			canAccessToSSHKeys: data.canAccessToSSHKeys,
+			canAccessToGitProviders: data.canAccessToGitProviders,
 		})
 			.then(async () => {
 				toast.success("Permissions updated");
@@ -293,6 +296,26 @@ export const AddUserPermissions = ({ userId }: Props) => {
 								</FormItem>
 							)}
 						/>
+						<FormField
+							control={form.control}
+							name="canAccessToGitProviders"
+							render={({ field }) => (
+								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+									<div className="space-y-0.5">
+										<FormLabel>Access to Git Providers</FormLabel>
+										<FormDescription>
+											Allow to users to access to the Git Providers section
+										</FormDescription>
+									</div>
+									<FormControl>
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+									</FormControl>
+								</FormItem>
+							)}
+						/>
 						<FormField
 							control={form.control}
 							name="accesedProjects"