awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 15:27:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update GCP SM and GitLab integrations to have overwrite popup warning

Browse Source
This commit is contained in:
Tuan Dang
2023-09-16 12:36:29 +01:00
parent 2e07512bae
commit 14d253d01a
5 changed files with 334 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/src/models/integration/integration.ts
+2 -1
View File
@@ -187,7 +187,8 @@ const integrationSchema = new Schema<IIntegration>(
default: "/", default: "/",
}, },
metadata: { metadata: {
type: Schema.Types.Mixed type: Schema.Types.Mixed,
default: {}
} }
}, },
{ {
frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx
+57 -38
View File
@@ -1,6 +1,7 @@
import crypto from "crypto"; import crypto from "crypto";
import { useState } from "react"; import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import Head from "next/head"; import Head from "next/head";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
@@ -8,6 +9,8 @@ import { useRouter } from "next/router";
import { faGoogle } from "@fortawesome/free-brands-svg-icons"; import { faGoogle } from "@fortawesome/free-brands-svg-icons";
import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons"; import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { import {
useGetCloudIntegrations, useGetCloudIntegrations,
@@ -15,40 +18,28 @@ import {
import { Button, Card, CardTitle, FormControl, TextArea } from "../../../components/v2"; import { Button, Card, CardTitle, FormControl, TextArea } from "../../../components/v2";
const schema = yup.object({
accessToken: yup.string().required("Service Account JSON cannot be empty")
});
type FormData = yup.InferType<typeof schema>;
export default function GCPSecretManagerAuthorizeIntegrationPage() { export default function GCPSecretManagerAuthorizeIntegrationPage() {
const router = useRouter(); const router = useRouter();
const {
control,
handleSubmit
} = useForm<FormData>({
resolver: yupResolver(schema)
});
const { data: cloudIntegrations } = useGetCloudIntegrations(); const { data: cloudIntegrations } = useGetCloudIntegrations();
const { mutateAsync } = useSaveIntegrationAccessToken(); const { mutateAsync } = useSaveIntegrationAccessToken();
const [accessToken, setAccessToken] = useState("");
const [accessTokenErrorText, setAccessTokenErrorText] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const handleIntegrateWithPAT = async () => {
try {
setAccessTokenErrorText("");
if (accessToken.length === 0) {
setAccessTokenErrorText("Service account JSON cannot be blank");
return;
}
setIsLoading(true);
const integrationAuth = await mutateAsync({
workspaceId: localStorage.getItem("projectData.id"),
integration: "gcp-secret-manager",
refreshToken: accessToken
});
setIsLoading(false);
router.push(`/integrations/gcp-secret-manager/create?integrationAuthId=${integrationAuth._id}`);
} catch (err) {
console.error(err);
}
};
const handleIntegrateWithOAuth = () => { const handleIntegrateWithOAuth = () => {
if (!cloudIntegrations) return; if (!cloudIntegrations) return;
const integrationOption = cloudIntegrations.find((integration) => integration.slug === "gcp-secret-manager"); const integrationOption = cloudIntegrations.find((integration) => integration.slug === "gcp-secret-manager");
@@ -62,6 +53,26 @@ export default function GCPSecretManagerAuthorizeIntegrationPage() {
window.location.assign(link); window.location.assign(link);
} }
const onFormSubmit = async ({
accessToken
}: FormData) => {
try {
setIsLoading(true);
const integrationAuth = await mutateAsync({
workspaceId: localStorage.getItem("projectData.id"),
integration: "gcp-secret-manager",
refreshToken: accessToken
});
setIsLoading(false);
router.push(`/integrations/gcp-secret-manager/create?integrationAuthId=${integrationAuth._id}`);
} catch (err) {
console.error(err);
setIsLoading(false);
}
}
return ( return (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<Head> <Head>
@@ -94,7 +105,7 @@ export default function GCPSecretManagerAuthorizeIntegrationPage() {
</Link> </Link>
</div> </div>
</CardTitle> </CardTitle>
<div className="px-7"> <div className="px-6">
<Button <Button
colorSchema="primary" colorSchema="primary"
variant="outline_bg" variant="outline_bg"
@@ -104,35 +115,43 @@ export default function GCPSecretManagerAuthorizeIntegrationPage() {
> >
Continue with OAuth Continue with OAuth
</Button> </Button>
</div> <div className='w-full flex flex-row items-center my-4 py-2'>
<div className='w-full flex flex-row items-center my-4 py-2 px-7'>
<div className='w-full border-t border-mineshaft-400/40' /> <div className='w-full border-t border-mineshaft-400/40' />
<span className="mx-2 text-mineshaft-400 text-xs">or</span> <span className="mx-2 text-mineshaft-400 text-xs">or</span>
<div className='w-full border-t border-mineshaft-400/40' /> <div className='w-full border-t border-mineshaft-400/40' />
</div> </div>
</div>
<form
onSubmit={handleSubmit(onFormSubmit)}
className="px-6 text-right pb-8"
>
<Controller
control={control}
name="accessToken"
render={({ field, fieldState: { error } }) => (
<FormControl <FormControl
label="GCP Service Account JSON" label="GCP Service Account JSON"
errorText={accessTokenErrorText} errorText={error?.message}
isError={accessTokenErrorText !== "" ?? false} isError={Boolean(error)}
className="px-6"
> >
<TextArea <TextArea
value={accessToken} {...field}
onChange={(e) => setAccessToken(e.target.value)}
placeholder=""
className="h-48 border border-mineshaft-600 bg-bunker-900/80" className="h-48 border border-mineshaft-600 bg-bunker-900/80"
/> />
</FormControl> </FormControl>
)}
/>
<Button <Button
onClick={handleIntegrateWithPAT}
colorSchema="primary" colorSchema="primary"
variant="outline_bg" variant="outline_bg"
className="mb-8 mt-2 ml-auto mr-6 w-min" className="mt-2 w-min"
size="sm"
type="submit"
isLoading={isLoading} isLoading={isLoading}
> >
Connect to GCP Secret Manager Connect to GCP Secret Manager
</Button> </Button>
</form>
</Card> </Card>
</div> </div>
); );
frontend/src/pages/integrations/gcp-secret-manager/create.tsx
+67 -18
View File
@@ -4,13 +4,14 @@ import Head from "next/head";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons"; import { faArrowUpRightFromSquare, faBookOpen, faBugs } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { yupResolver } from "@hookform/resolvers/yup"; import { yupResolver } from "@hookform/resolvers/yup";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import queryString from "query-string"; import queryString from "query-string";
import * as yup from "yup"; import * as yup from "yup";
import { usePopUp } from "@app/hooks";
import { import {
useCreateIntegration useCreateIntegration
} from "@app/hooks/api"; } from "@app/hooks/api";
@@ -21,14 +22,15 @@ import {
CardTitle, CardTitle,
FormControl, FormControl,
Input, Input,
Modal,
ModalContent,
Select, Select,
SelectItem, SelectItem,
Switch, Switch,
Tab, Tab,
TabList, TabList,
TabPanel, TabPanel,
Tabs Tabs} from "../../../components/v2";
} from "../../../components/v2";
import { import {
useGetIntegrationAuthApps, useGetIntegrationAuthApps,
useGetIntegrationAuthById useGetIntegrationAuthById
@@ -44,17 +46,21 @@ const schema = yup.object({
selectedSourceEnvironment: yup.string().required("Source environment is required"), selectedSourceEnvironment: yup.string().required("Source environment is required"),
secretPath: yup.string().required("Secret path is required"), secretPath: yup.string().required("Secret path is required"),
targetAppId: yup.string().required("GCP project is required"), targetAppId: yup.string().required("GCP project is required"),
secretPrefix: yup.string(), secretPrefix: yup.string().trim(),
secretSuffix: yup.string(), secretSuffix: yup.string().trim(),
shouldLabel: yup.boolean(), shouldLabel: yup.boolean(),
labelName: yup.string(), labelName: yup.string().trim(),
labelValue: yup.string() labelValue: yup.string().trim()
}); });
type FormData = yup.InferType<typeof schema>; type FormData = yup.InferType<typeof schema>;
export default function GCPSecretManagerCreateIntegrationPage() { export default function GCPSecretManagerCreateIntegrationPage() {
const router = useRouter(); const router = useRouter();
const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
"confirmIntegration"
] as const);
const { const {
control, control,
handleSubmit, handleSubmit,
@@ -64,6 +70,8 @@ export default function GCPSecretManagerCreateIntegrationPage() {
resolver: yupResolver(schema), resolver: yupResolver(schema),
defaultValues: { defaultValues: {
secretPath: "/", secretPath: "/",
secretPrefix: "",
secretSuffix: "",
shouldLabel: false, shouldLabel: false,
labelName: "managed-by", labelName: "managed-by",
labelValue: "infisical" labelValue: "infisical"
@@ -92,8 +100,8 @@ export default function GCPSecretManagerCreateIntegrationPage() {
return; return;
} }
setValue("labelName", undefined); setValue("labelName", "");
setValue("labelValue", undefined); setValue("labelValue", "");
}, [shouldLabel]); }, [shouldLabel]);
useEffect(() => { useEffect(() => {
@@ -135,8 +143,8 @@ export default function GCPSecretManagerCreateIntegrationPage() {
sourceEnvironment: sce, sourceEnvironment: sce,
secretPath, secretPath,
metadata: { metadata: {
secretPrefix, ...(secretPrefix ? { secretPrefix } : {}),
secretSuffix, ...(secretSuffix ? { secretSuffix } : {}),
...(sl ? { ...(sl ? {
secretGCPLabel: { secretGCPLabel: {
labelName, labelName,
@@ -159,7 +167,14 @@ export default function GCPSecretManagerCreateIntegrationPage() {
selectedSourceEnvironment && selectedSourceEnvironment &&
integrationAuthApps ? ( integrationAuthApps ? (
<form <form
onSubmit={handleSubmit(onFormSubmit)} onSubmit={handleSubmit((data: FormData) => {
if (!data.secretPrefix && !data.secretSuffix && !data.shouldLabel) {
handlePopUpOpen("confirmIntegration", data);
return;
}
onFormSubmit(data);
})}
className="flex flex-col h-full w-full items-center justify-center" className="flex flex-col h-full w-full items-center justify-center"
> >
<Card className="max-w-lg rounded-md border border-mineshaft-600"> <Card className="max-w-lg rounded-md border border-mineshaft-600">
@@ -169,7 +184,7 @@ export default function GCPSecretManagerCreateIntegrationPage() {
</Head> </Head>
<CardTitle <CardTitle
className="text-left px-6 text-xl mb-2" className="text-left px-6 text-xl mb-2"
subTitle="Select which environment or folder in Infisical you want to sync to GCP Secret Manager. Optionally, you can add suffixes/prefixes." subTitle="Select which environment or folder in Infisical you want to sync to GCP Secret Manager."
> >
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<div className="inline flex items-center pb-0.5"> <div className="inline flex items-center pb-0.5">
@@ -207,7 +222,6 @@ export default function GCPSecretManagerCreateIntegrationPage() {
animate={{ opacity: 1, translateX: 0 }} animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 30 }} exit={{ opacity: 0, translateX: 30 }}
> >
<div>
<Controller <Controller
control={control} control={control}
name="selectedSourceEnvironment" name="selectedSourceEnvironment"
@@ -289,7 +303,6 @@ export default function GCPSecretManagerCreateIntegrationPage() {
) )
}} }}
/> />
</div>
</motion.div> </motion.div>
</TabPanel> </TabPanel>
<TabPanel value={TabSections.Options}> <TabPanel value={TabSections.Options}>
@@ -398,11 +411,47 @@ export default function GCPSecretManagerCreateIntegrationPage() {
Create Integration Create Integration
</Button> </Button>
</Card> </Card>
<div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/> {/* <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
<div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md"> <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
<div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div> <div className="flex flex-row items-center">
<span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in GCP Secret Manager with secrets from Infisical.</span> <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/>
<span className="ml-3 text-md text-mineshaft-100">Pro Tip</span>
</div> </div>
<span className="text-mineshaft-300 text-sm mt-4">
After creating an integration, your secrets will start syncing immediately.
To avoid overwriting existing secrets in GCP Secret Manager, you may consider adding a secret prefix/suffix and/or enabling labeling in the options tab.
</span>
</div> */}
<Modal
isOpen={popUp.confirmIntegration?.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("confirmIntegration", isOpen)}
>
<ModalContent
title="Heads Up"
footerContent={
<div className="flex items-center space-x-2">
<Button onClick={() => onFormSubmit(popUp.confirmIntegration?.data as FormData)}>
Continue Anyway
</Button>
<Button
onClick={() => handlePopUpClose("confirmIntegration")}
variant="outline_bg"
colorSchema="secondary"
>
Cancel
</Button>
</div>
}
>
<p>
You&apos;re about to overwrite any existing secrets in GCP Secret Manager.
</p>
<p className="mt-4">
To avoid this behavior, you may consider adding a secret prefix/suffix or enabling labeling in the options tab.
</p>
</ModalContent>
</Modal>
</form> </form>
) : ( ) : (
<div className="flex justify-center items-center w-full h-full"> <div className="flex justify-center items-center w-full h-full">
frontend/src/pages/integrations/gitlab/authorize.tsx
+43 -9
View File
@@ -1,22 +1,40 @@
import crypto from "crypto"; import crypto from "crypto";
import { useState } from "react"; import { Controller, useForm } from "react-hook-form";
import Head from "next/head"; import Head from "next/head";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons"; import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useGetCloudIntegrations } from "@app/hooks/api"; import { useGetCloudIntegrations } from "@app/hooks/api";
import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2"; import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
const schema = yup.object({
gitLabURL: yup.string()
});
type FormData = yup.InferType<typeof schema>;
export default function GitLabAuthorizeIntegrationPage() { export default function GitLabAuthorizeIntegrationPage() {
const {
control,
handleSubmit
} = useForm<FormData>({
resolver: yupResolver(schema),
defaultValues: {
gitLabURL: ""
}
});
const { data: cloudIntegrations } = useGetCloudIntegrations(); const { data: cloudIntegrations } = useGetCloudIntegrations();
const [gitLabURL, setGitLabURL] = useState(""); const onFormSubmit = ({
gitLabURL
const handleIntegrateWithOAuth = () => { }: FormData) => {
if (!cloudIntegrations) return; if (!cloudIntegrations) return;
const integrationOption = cloudIntegrations.find((integration) => integration.slug === "gitlab"); const integrationOption = cloudIntegrations.find((integration) => integration.slug === "gitlab");
@@ -42,7 +60,7 @@ export default function GitLabAuthorizeIntegrationPage() {
<Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12"> <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
<CardTitle <CardTitle
className="text-left px-6 text-xl" className="text-left px-6 text-xl"
subTitle="Authorize this integration to be able to sync secrets from Infisical to GitLab. If needed, specify the self-hosted GitLab URL." subTitle="Authorize this integration to sync secrets from Infisical to GitLab. If no self-hosted GitLab URL is specified, then Infisical will connect you to GitLab Cloud."
> >
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<div className="inline flex items-center pb-0.5"> <div className="inline flex items-center pb-0.5">
@@ -65,20 +83,36 @@ export default function GitLabAuthorizeIntegrationPage() {
</Link> </Link>
</div> </div>
</CardTitle> </CardTitle>
<FormControl label="Self-hosted URL (optional)" className="px-6"> <form
onSubmit={handleSubmit(onFormSubmit)}
className="px-6 text-right pb-8"
>
<Controller
control={control}
name="gitLabURL"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Self-hosted URL (optional)"
errorText={error?.message}
isError={Boolean(error)}
>
<Input <Input
{...field}
placeholder="https://self-hosted-gitlab.com" placeholder="https://self-hosted-gitlab.com"
value={gitLabURL} onChange={(e) => setGitLabURL(e.target.value)}
/> />
</FormControl> </FormControl>
)}
/>
<Button <Button
onClick={handleIntegrateWithOAuth}
colorSchema="primary" colorSchema="primary"
variant="outline_bg" variant="outline_bg"
className="mb-6 mt-2 ml-auto mr-6 w-min" className="mt-2 w-min"
size="sm"
type="submit"
> >
Continue with OAuth Continue with OAuth
</Button> </Button>
</form>
</Card> </Card>
</div> </div>
); );
frontend/src/pages/integrations/gitlab/create.tsx
+49 -6
View File
@@ -4,13 +4,14 @@ import Head from "next/head";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons"; import { faArrowUpRightFromSquare, faBookOpen, faBugs } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { yupResolver } from "@hookform/resolvers/yup"; import { yupResolver } from "@hookform/resolvers/yup";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import queryString from "query-string"; import queryString from "query-string";
import * as yup from "yup"; import * as yup from "yup";
import { usePopUp } from "@app/hooks";
import { import {
useCreateIntegration useCreateIntegration
} from "@app/hooks/api"; } from "@app/hooks/api";
@@ -21,13 +22,14 @@ import {
CardTitle, CardTitle,
FormControl, FormControl,
Input, Input,
Modal,
ModalContent,
Select, Select,
SelectItem, SelectItem,
Tab, Tab,
TabList, TabList,
TabPanel, TabPanel,
Tabs Tabs} from "../../../components/v2";
} from "../../../components/v2";
import { import {
useGetIntegrationAuthApps, useGetIntegrationAuthApps,
useGetIntegrationAuthById, useGetIntegrationAuthById,
@@ -60,6 +62,9 @@ type FormData = yup.InferType<typeof schema>;
export default function GitLabCreateIntegrationPage() { export default function GitLabCreateIntegrationPage() {
const router = useRouter(); const router = useRouter();
const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
"confirmIntegration"
] as const);
const { const {
control, control,
@@ -70,7 +75,9 @@ export default function GitLabCreateIntegrationPage() {
resolver: yupResolver(schema), resolver: yupResolver(schema),
defaultValues: { defaultValues: {
targetEntity: "individual", targetEntity: "individual",
secretPath: "/" secretPath: "/",
secretPrefix: "",
secretSuffix: ""
} }
}); });
const selectedSourceEnvironment = watch("selectedSourceEnvironment"); const selectedSourceEnvironment = watch("selectedSourceEnvironment");
@@ -167,7 +174,14 @@ export default function GitLabCreateIntegrationPage() {
integrationAuthApps && integrationAuthApps &&
integrationAuthTeams ? ( integrationAuthTeams ? (
<form <form
onSubmit={handleSubmit(onFormSubmit)} onSubmit={handleSubmit((data: FormData) => {
if (!data.secretPrefix && !data.secretSuffix) {
handlePopUpOpen("confirmIntegration", data);
return;
}
onFormSubmit(data);
})}
className="flex flex-col h-full w-full items-center justify-center" className="flex flex-col h-full w-full items-center justify-center"
> >
<Head> <Head>
@@ -431,11 +445,40 @@ export default function GitLabCreateIntegrationPage() {
Create Integration Create Integration
</Button> </Button>
</Card> </Card>
<div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/> {/* <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
<div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md"> <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
<div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div> <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
<span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in GitLab with secrets from Infisical.</span> <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in GitLab with secrets from Infisical.</span>
</div> */}
<Modal
isOpen={popUp.confirmIntegration?.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("confirmIntegration", isOpen)}
>
<ModalContent
title="Heads Up"
footerContent={
<div className="flex items-center space-x-2">
<Button onClick={() => onFormSubmit(popUp.confirmIntegration?.data as FormData)}>
Continue Anyway
</Button>
<Button
onClick={() => handlePopUpClose("confirmIntegration")}
variant="outline_bg"
colorSchema="secondary"
>
Cancel
</Button>
</div> </div>
}
>
<p>
You&apos;re about to overwrite any existing secrets in GitLab.
</p>
<p className="mt-4">
To avoid this behavior, you may consider adding a secret prefix/suffix in the options tab.
</p>
</ModalContent>
</Modal>
</form> </form>
) : ( ) : (
<div className="flex justify-center items-center w-full h-full"> <div className="flex justify-center items-center w-full h-full">