feat: add test connection github

This commit is contained in:
Mauricio Siu
2024-09-01 22:00:10 -06:00
parent 99f63597a8
commit 68d2e73e7a
6 changed files with 225 additions and 32 deletions

View File

@@ -0,0 +1,154 @@
import { GithubIcon } from "@/components/icons/data-tools-icons";
import { AlertBlock } from "@/components/shared/alert-block";
import { Button } from "@/components/ui/button";
import { CardContent } from "@/components/ui/card";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { Edit } from "lucide-react";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
const Schema = z.object({
name: z.string().min(1, {
message: "Name is required",
}),
});
type Schema = z.infer<typeof Schema>;
interface Props {
githubId: string;
}
export const EditGithubProvider = ({ githubId }: Props) => {
const { data: github } = api.github.one.useQuery(
{
githubId,
},
{
enabled: !!githubId,
},
);
const utils = api.useUtils();
const [isOpen, setIsOpen] = useState(false);
const { mutateAsync, error, isError } = api.github.update.useMutation();
const { mutateAsync: testConnection, isLoading } =
api.github.testConnection.useMutation();
const form = useForm<Schema>({
defaultValues: {
name: "",
},
resolver: zodResolver(Schema),
});
useEffect(() => {
form.reset({
name: github?.gitProvider.name || "",
});
}, [form, isOpen]);
const onSubmit = async (data: Schema) => {
await mutateAsync({
githubId,
name: data.name || "",
gitProviderId: github?.gitProviderId || "",
})
.then(async () => {
await utils.gitProvider.getAll.invalidate();
toast.success("Github updated successfully");
setIsOpen(false);
})
.catch(() => {
toast.error("Error to update Github");
});
};
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button variant="ghost">
<Edit className="size-4" />
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
Update Github Provider <GithubIcon className="size-5" />
</DialogTitle>
</DialogHeader>
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
<Form {...form}>
<form
id="hook-form-add-github"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full gap-1"
>
<CardContent className="p-0">
<div className="flex flex-col gap-4">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input
placeholder="Random Name eg(my-personal-account)"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex w-full justify-end gap-4 mt-4">
<Button
type="button"
variant={"secondary"}
isLoading={isLoading}
onClick={async () => {
await testConnection({
githubId,
})
.then(async (message) => {
toast.info(`Message: ${message}`);
})
.catch((error) => {
toast.error(`Error: ${error.message}`);
});
}}
>
Test Connection
</Button>
<Button type="submit" isLoading={form.formState.isSubmitting}>
Update
</Button>
</div>
</div>
</CardContent>
</form>
</Form>
</DialogContent>
</Dialog>
);
};

View File

@@ -15,6 +15,7 @@ import { useUrl } from "@/utils/hooks/use-url";
import { EditBitbucketProvider } from "./bitbucket/edit-bitbucket-provider";
import { EditGitlabProvider } from "./gitlab/edit-gitlab-provider";
import { formatDate } from "date-fns";
import { EditGithubProvider } from "./github/edit-github-provider";
export const ShowGitProviders = () => {
const { data } = api.gitProvider.getAll.useQuery();
@@ -153,6 +154,11 @@ export const ShowGitProviders = () => {
gitlabId={gitProvider.gitlab.gitlabId}
/>
)}
{isGithub && haveGithubRequirements && (
<EditGithubProvider
githubId={gitProvider.github.githubId}
/>
)}
<RemoveGitProvider
gitProviderId={gitProvider.gitProviderId}
gitProviderType={gitProvider.providerType}

View File

@@ -1,11 +1,17 @@
import { createTRPCRouter, protectedProcedure } from "@/server/api/trpc";
import { apiFindGithubBranches, apiFindOneGithub } from "@/server/db/schema";
import {
apiFindGithubBranches,
apiFindOneGithub,
apiUpdateGithub,
} from "@/server/db/schema";
import { db } from "@/server/db";
import { findGithubById, haveGithubRequirements } from "../services/github";
import {
getGithubRepositories,
getGithubBranches,
} from "@/server/utils/providers/github";
import { updateGitProvider } from "../services/git-provider";
import { TRPCError } from "@trpc/server";
export const githubRouter = createTRPCRouter({
one: protectedProcedure.input(apiFindOneGithub).query(async ({ input }) => {
@@ -41,9 +47,25 @@ export const githubRouter = createTRPCRouter({
return filtered;
}),
testConnection: protectedProcedure
.input(apiFindOneGithub)
.query(async ({ input }) => {
return await findGithubById(input.githubId);
.mutation(async ({ input }) => {
try {
const result = await getGithubRepositories(input.githubId);
return `Found ${result.length} repositories`;
} catch (err) {
throw new TRPCError({
code: "BAD_REQUEST",
message: err instanceof Error ? err?.message : `Error: ${err}`,
});
}
}),
update: protectedProcedure
.input(apiUpdateGithub)
.mutation(async ({ input }) => {
await updateGitProvider(input.gitProviderId, {
name: input.name,
});
}),
});

View File

@@ -3,35 +3,7 @@ import { type apiCreateGithub, github, gitProvider } from "@/server/db/schema";
import { TRPCError } from "@trpc/server";
import { eq } from "drizzle-orm";
export const createGithub = async (input: typeof apiCreateGithub._type) => {
return await db.transaction(async (tx) => {
const newGitProvider = await tx
.insert(gitProvider)
.values({
providerType: "github",
authId: input.authId,
name: input.name,
})
.returning()
.then((response) => response[0]);
if (!newGitProvider) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to create the git provider",
});
}
return await tx
.insert(github)
.values({
...input,
gitProviderId: newGitProvider?.gitProviderId,
})
.returning()
.then((response) => response[0]);
});
};
export type GitProvider = typeof gitProvider.$inferSelect;
export const removeGitProvider = async (gitProviderId: string) => {
const result = await db
@@ -41,3 +13,17 @@ export const removeGitProvider = async (gitProviderId: string) => {
return result[0];
};
export const updateGitProvider = async (
gitProviderId: string,
input: Partial<GitProvider>,
) => {
return await db
.update(gitProvider)
.set({
...input,
})
.where(eq(gitProvider.gitProviderId, gitProviderId))
.returning()
.then((response) => response[0]);
};

View File

@@ -37,6 +37,9 @@ export const createGithub = async (input: typeof apiCreateGithub._type) => {
export const findGithubById = async (githubId: string) => {
const githubProviderResult = await db.query.github.findFirst({
where: eq(github.githubId, githubId),
with: {
gitProvider: true,
},
});
if (!githubProviderResult) {
@@ -56,3 +59,17 @@ export const haveGithubRequirements = (github: Github) => {
github?.githubInstallationId
);
};
export const updateGithub = async (
githubId: string,
input: Partial<Github>,
) => {
return await db
.update(github)
.set({
...input,
})
.where(eq(github.githubId, githubId))
.returning()
.then((response) => response[0]);
};

View File

@@ -39,6 +39,8 @@ export const apiCreateGithub = createSchema.extend({
githubPrivateKey: z.string().optional(),
githubWebhookSecret: z.string().nullable(),
gitProviderId: z.string().optional(),
name: z.string().min(1),
authId: z.string().min(1),
});
export const apiFindGithubBranches = z.object({
@@ -52,3 +54,9 @@ export const apiFindOneGithub = createSchema
githubId: z.string().min(1),
})
.pick({ githubId: true });
export const apiUpdateGithub = createSchema.extend({
githubId: z.string().min(1),
name: z.string().min(1),
gitProviderId: z.string().min(1),
});