mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-08 15:28:25 +00:00
Update github integration refactored to react-hook-form
This commit is contained in:
Salman
@@ -1,4 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import Head from "next/head";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
@@ -12,9 +13,13 @@ import {
|
||||
faCircleInfo
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import axios from "axios";
|
||||
import { motion } from "framer-motion";
|
||||
import queryString from "query-string";
|
||||
import * as yup from "yup";
|
||||
|
||||
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
||||
import { useCreateIntegration } from "@app/hooks/api";
|
||||
|
||||
import {
|
||||
@@ -45,9 +50,22 @@ enum TabSections {
|
||||
Options = "options"
|
||||
}
|
||||
|
||||
const schema = yup.object({
|
||||
selectedSourceEnvironment: yup.string().trim().required("Project Environment is required"),
|
||||
secretPath: yup.string().trim().required("Secrets Path is required"),
|
||||
targetAppIds: yup
|
||||
.array(yup.string().required())
|
||||
.min(1, "Select atleast one repo") // .min() not working showing error for empty array
|
||||
.required("Select atleast one repo"),
|
||||
secretSuffix: yup.string().trim().optional()
|
||||
});
|
||||
|
||||
type FormData = yup.InferType<typeof schema>;
|
||||
|
||||
export default function GitHubCreateIntegrationPage() {
|
||||
const router = useRouter();
|
||||
const { mutateAsync } = useCreateIntegration();
|
||||
const { createNotification } = useNotificationContext();
|
||||
|
||||
const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
|
||||
|
||||
@@ -58,37 +76,44 @@ export default function GitHubCreateIntegrationPage() {
|
||||
integrationAuthId: (integrationAuthId as string) ?? ""
|
||||
});
|
||||
|
||||
const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
|
||||
const [secretPath, setSecretPath] = useState("/");
|
||||
const [targetAppIds, setTargetAppIds] = useState<string[]>([]);
|
||||
const [secretSuffix, setSecretSuffix] = useState("");
|
||||
const { control, handleSubmit, watch, setValue } = useForm<FormData>({
|
||||
resolver: yupResolver(schema),
|
||||
defaultValues: {
|
||||
selectedSourceEnvironment: "",
|
||||
secretPath: "/",
|
||||
targetAppIds: [],
|
||||
secretSuffix: ""
|
||||
}
|
||||
});
|
||||
|
||||
const targetAppIds = watch("targetAppIds");
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (workspace) {
|
||||
setSelectedSourceEnvironment(workspace.environments[0].slug);
|
||||
setValue("selectedSourceEnvironment", workspace.environments[0].slug);
|
||||
}
|
||||
}, [workspace]);
|
||||
|
||||
useEffect(() => {
|
||||
if (integrationAuthApps) {
|
||||
if (integrationAuthApps.length > 0) {
|
||||
setTargetAppIds([String(integrationAuthApps[0].appId)]);
|
||||
setValue("targetAppIds", [String(integrationAuthApps[0].appId)]);
|
||||
} else {
|
||||
setTargetAppIds(["none"]);
|
||||
setValue("targetAppIds", ["none"]);
|
||||
}
|
||||
}
|
||||
}, [integrationAuthApps]);
|
||||
|
||||
const handleButtonClick = async () => {
|
||||
const onFormSubmit = async (data: FormData) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
if (!integrationAuth?.id) return;
|
||||
|
||||
const targetApps = integrationAuthApps?.filter((integrationAuthApp) =>
|
||||
targetAppIds.includes(String(integrationAuthApp.appId))
|
||||
data.targetAppIds.includes(String(integrationAuthApp.appId))
|
||||
);
|
||||
|
||||
if (!targetApps) return;
|
||||
@@ -99,11 +124,11 @@ export default function GitHubCreateIntegrationPage() {
|
||||
integrationAuthId: integrationAuth?.id,
|
||||
isActive: true,
|
||||
app: targetApp.name,
|
||||
sourceEnvironment: selectedSourceEnvironment,
|
||||
owner: targetApp.owner,
|
||||
secretPath,
|
||||
secretPath: data.secretPath,
|
||||
sourceEnvironment: data.selectedSourceEnvironment,
|
||||
metadata: {
|
||||
secretSuffix
|
||||
secretSuffix: data.secretSuffix
|
||||
}
|
||||
});
|
||||
})
|
||||
@@ -113,26 +138,31 @@ export default function GitHubCreateIntegrationPage() {
|
||||
router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
if (axios.isAxiosError(err)) {
|
||||
const { message } = err?.response?.data as { message: string };
|
||||
createNotification({
|
||||
text: message,
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return integrationAuth &&
|
||||
workspace &&
|
||||
selectedSourceEnvironment &&
|
||||
integrationAuthApps &&
|
||||
targetAppIds ? (
|
||||
return integrationAuth && workspace && integrationAuthApps ? (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||
<Head>
|
||||
<title>Set Up GitHub Integration</title>
|
||||
<link rel="icon" href="/infisical.ico" />
|
||||
</Head>
|
||||
<Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
|
||||
<form onSubmit={handleSubmit(onFormSubmit)} className="px-6">
|
||||
<CardTitle
|
||||
className="px-6 text-left text-xl"
|
||||
className="px-0 text-left text-xl"
|
||||
subTitle="Choose which environment in Infisical you want to sync to environment variables in GitHub."
|
||||
>
|
||||
<div className="flex flex-row items-center">
|
||||
<div className="inline flex items-center rounded-full bg-mineshaft-200">
|
||||
<div className="flex items-center rounded-full bg-mineshaft-200">
|
||||
<Image
|
||||
src="/images/integrations/GitHub.png"
|
||||
height={30}
|
||||
@@ -155,7 +185,7 @@ export default function GitHubCreateIntegrationPage() {
|
||||
</Link>
|
||||
</div>
|
||||
</CardTitle>
|
||||
<Tabs defaultValue={TabSections.Connection} className="px-6">
|
||||
<Tabs defaultValue={TabSections.Connection}>
|
||||
<TabList>
|
||||
<div className="flex w-full flex-row border-b border-mineshaft-600">
|
||||
<Tab value={TabSections.Connection}>Connection</Tab>
|
||||
@@ -170,30 +200,57 @@ export default function GitHubCreateIntegrationPage() {
|
||||
animate={{ opacity: 1, translateX: 0 }}
|
||||
exit={{ opacity: 0, translateX: 30 }}
|
||||
>
|
||||
<FormControl label="Project Environment">
|
||||
<Controller
|
||||
control={control}
|
||||
name="selectedSourceEnvironment"
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Project Environment"
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Select
|
||||
value={selectedSourceEnvironment}
|
||||
onValueChange={(val) => setSelectedSourceEnvironment(val)}
|
||||
defaultValue={field.value}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-full border border-mineshaft-500"
|
||||
>
|
||||
{workspace?.environments.map((sourceEnvironment) => (
|
||||
<SelectItem
|
||||
value={sourceEnvironment.slug}
|
||||
key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
|
||||
key={`github-environment-${sourceEnvironment.slug}`}
|
||||
>
|
||||
{sourceEnvironment.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl label="Secrets Path">
|
||||
<Input
|
||||
value={secretPath}
|
||||
onChange={(evt) => setSecretPath(evt.target.value)}
|
||||
placeholder="Provide a path, default is /"
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="secretPath"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Secrets Path"
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Input {...field} placeholder="Provide a path, default is /" />
|
||||
</FormControl>
|
||||
<FormControl label="GitHub Repo">
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="targetAppIds"
|
||||
render={({ field: { onChange }}) => (
|
||||
<FormControl
|
||||
label="GitHub Repo"
|
||||
// BUG: yup.min() not working as expected needs to be fixed
|
||||
errorText="Atleast one repo is required"
|
||||
isError={targetAppIds?.length === 0}
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
{integrationAuthApps.length > 0 ? (
|
||||
@@ -218,22 +275,21 @@ export default function GitHubCreateIntegrationPage() {
|
||||
>
|
||||
{integrationAuthApps.length > 0 ? (
|
||||
integrationAuthApps.map((integrationAuthApp) => {
|
||||
const isSelected = targetAppIds.includes(String(integrationAuthApp.appId));
|
||||
const isSelected = targetAppIds.includes(
|
||||
String(integrationAuthApp.appId)
|
||||
);
|
||||
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
if (targetAppIds.includes(String(integrationAuthApp.appId))) {
|
||||
setTargetAppIds(
|
||||
onChange(
|
||||
targetAppIds.filter(
|
||||
(appId) => appId !== String(integrationAuthApp.appId)
|
||||
)
|
||||
);
|
||||
} else {
|
||||
setTargetAppIds([
|
||||
...targetAppIds,
|
||||
String(integrationAuthApp.appId)
|
||||
]);
|
||||
onChange([...targetAppIds, String(integrationAuthApp.appId)]);
|
||||
}
|
||||
}}
|
||||
key={integrationAuthApp.appId}
|
||||
@@ -260,6 +316,8 @@ export default function GitHubCreateIntegrationPage() {
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</motion.div>
|
||||
</TabPanel>
|
||||
<TabPanel value={TabSections.Options}>
|
||||
@@ -270,26 +328,39 @@ export default function GitHubCreateIntegrationPage() {
|
||||
animate={{ opacity: 1, translateX: 0 }}
|
||||
exit={{ opacity: 0, translateX: 30 }}
|
||||
>
|
||||
<FormControl label="Append Secret Names with..." className="pb-[9.75rem]">
|
||||
<Controller
|
||||
control={control}
|
||||
name="secretSuffix"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Append Secret Names with..."
|
||||
className="pb-[9.75rem]"
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Input
|
||||
value={secretSuffix}
|
||||
onChange={(evt) => setSecretSuffix(evt.target.value)}
|
||||
{...field}
|
||||
placeholder="Provide a suffix for secret names, default is no suffix"
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</motion.div>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
<div className="flex w-full justify-end">
|
||||
<Button
|
||||
onClick={handleButtonClick}
|
||||
type="submit"
|
||||
color="mineshaft"
|
||||
variant="outline_bg"
|
||||
className="mb-6 ml-auto mr-6"
|
||||
className="mb-6"
|
||||
isLoading={isLoading}
|
||||
isDisabled={integrationAuthApps.length === 0 || targetAppIds.length === 0}
|
||||
>
|
||||
Create Integration
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
<div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
|
||||
<div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">
|
||||
|
||||
Reference in New Issue
Block a user