feat: add permission to access to git providers

This commit is contained in:
Mauricio Siu 2024-09-01 18:56:13 -06:00
parent 58aaf6e002
commit 1650e1bb74
11 changed files with 3581 additions and 146 deletions

View File

@ -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>

View File

@ -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">

View File

@ -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>
);
};

View File

@ -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"

View File

@ -0,0 +1 @@
ALTER TABLE "user" ADD COLUMN "canAccessToGitProviders" boolean DEFAULT false NOT NULL;

File diff suppressed because it is too large Load Diff

View File

@ -379,6 +379,13 @@
"when": 1725232936525,
"tag": "0053_fearless_electro",
"breakpoints": true
},
{
"idx": 54,
"version": "6",
"when": 1725238308102,
"tag": "0054_short_hellfire_club",
"breakpoints": true
}
]
}

View File

@ -1,6 +1,4 @@
import { ShowGitProviders } from "@/components/dashboard/settings/git/show-git-providers";
import { GitlabSetup } from "@/components/dashboard/settings/github/gitlab-setup";
import { ShowDestinations } from "@/components/dashboard/settings/ssh-keys/show-ssh-keys";
import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { SettingsLayout } from "@/components/layouts/settings-layout";
import { appRouter } from "@/server/api/root";
@ -14,8 +12,6 @@ const Page = () => {
return (
<div className="flex flex-col gap-4 w-full">
<ShowGitProviders />
{/* <ShowDestinations /> */}
{/* <GitlabSetup /> */}
</div>
);
};
@ -41,7 +37,7 @@ export async function getServerSideProps(
},
};
}
const { req, res, resolvedUrl } = ctx;
const { req, res } = ctx;
const helpers = createServerSideHelpers({
router: appRouter,
ctx: {
@ -63,7 +59,7 @@ export async function getServerSideProps(
authId: auth.id,
});
if (!user.canAccessToSSHKeys) {
if (!user.canAccessToGitProviders) {
return {
redirect: {
permanent: true,

View File

@ -146,7 +146,6 @@ export const deployApplication = async ({
}) => {
const application = await findApplicationById(applicationId);
const buildLink = `${await getDokployUrl()}/dashboard/project/${application.projectId}/services/application/${application.applicationId}?tab=deployments`;
const admin = await findAdmin();
const deployment = await createDeployment({
applicationId: applicationId,
title: titleLog,

View File

@ -34,6 +34,9 @@ export const users = pgTable("user", {
canDeleteServices: boolean("canDeleteServices").notNull().default(false),
canAccessToDocker: boolean("canAccessToDocker").notNull().default(false),
canAccessToAPI: boolean("canAccessToAPI").notNull().default(false),
canAccessToGitProviders: boolean("canAccessToGitProviders")
.notNull()
.default(false),
canAccessToTraefikFiles: boolean("canAccessToTraefikFiles")
.notNull()
.default(false),
@ -109,6 +112,7 @@ export const apiAssignPermissions = createSchema
canAccessToDocker: true,
canAccessToAPI: true,
canAccessToSSHKeys: true,
canAccessToGitProviders: true,
})
.required();