diff --git a/backend/src/integrations/sync.ts b/backend/src/integrations/sync.ts index 6605b231f..a25a93c80 100644 --- a/backend/src/integrations/sync.ts +++ b/backend/src/integrations/sync.ts @@ -328,15 +328,19 @@ const syncSecretsGCPSecretManager = async ({ const pageSize = 100; let pageToken: string | undefined; let hasMorePages = true; + + const filterParam = integration.metadata.secretGCPLabel + ? `?filter=labels.${integration.metadata.secretGCPLabel.labelName}=${integration.metadata.secretGCPLabel.labelValue}` + : ""; while (hasMorePages) { const params = new URLSearchParams({ pageSize: String(pageSize), ...(pageToken ? { pageToken } : {}) }); - + const res: GCPSMListSecretsRes = (await standardRequest.get( - `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1/projects/${integration.appId}/secrets?filter=labels.managed-by=infisical`, + `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1/projects/${integration.appId}/secrets${filterParam}`, { params, headers: { @@ -347,7 +351,24 @@ const syncSecretsGCPSecretManager = async ({ )).data; if (res.secrets) { - gcpSecrets = gcpSecrets.concat(res.secrets); + const filteredSecrets = res.secrets?.filter((gcpSecret) => { + const arr = gcpSecret.name.split("/"); + const key = arr[arr.length - 1]; + + let isValid = true; + + if (integration.metadata.secretPrefix && !key.startsWith(integration.metadata.secretPrefix)) { + isValid = false; + } + + if (integration.metadata.secretSuffix && !key.endsWith(integration.metadata.secretSuffix)) { + isValid = false; + } + + return isValid; + }); + + gcpSecrets = gcpSecrets.concat(filteredSecrets); } if (!res.nextPageToken) { @@ -371,7 +392,7 @@ const syncSecretsGCPSecretManager = async ({ const key = arr[arr.length - 1]; const secretLatest: GCPLatestSecretVersionAccess = (await standardRequest.get( - `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1beta1/projects/${integration.appId}/secrets/${key}/versions/latest:access`, + `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1/projects/${integration.appId}/secrets/${key}/versions/latest:access`, { headers: { Authorization: `Bearer ${accessToken}`, @@ -379,6 +400,7 @@ const syncSecretsGCPSecretManager = async ({ } } )).data; + res[key] = Buffer.from(secretLatest.payload.data, "base64").toString("utf-8"); } @@ -387,14 +409,16 @@ const syncSecretsGCPSecretManager = async ({ if (!(key in res)) { // case: create secret await standardRequest.post( - `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1beta1/projects/${integration.appId}/secrets`, + `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1/projects/${integration.appId}/secrets`, { replication: { automatic: {} }, - labels: { - "managed-by": "infisical" - } + ...(integration.metadata.secretGCPLabel ? { + labels: { + [integration.metadata.secretGCPLabel.labelName]: integration.metadata.secretGCPLabel.labelValue + } + } : {}) }, { params: { @@ -408,7 +432,7 @@ const syncSecretsGCPSecretManager = async ({ ); await standardRequest.post( - `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1beta1/projects/${integration.appId}/secrets/${key}:addVersion`, + `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1/projects/${integration.appId}/secrets/${key}:addVersion`, { payload: { data: Buffer.from(secrets[key].value).toString("base64") @@ -428,7 +452,7 @@ const syncSecretsGCPSecretManager = async ({ if (!(key in secrets)) { // case: delete secret await standardRequest.delete( - `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1beta1/projects/${integration.appId}/secrets/${key}`, + `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1/projects/${integration.appId}/secrets/${key}`, { headers: { Authorization: `Bearer ${accessToken}`, @@ -440,7 +464,7 @@ const syncSecretsGCPSecretManager = async ({ // case: update secret if (secrets[key].value !== res[key]) { await standardRequest.post( - `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1beta1/projects/${integration.appId}/secrets/${key}:addVersion`, + `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1/projects/${integration.appId}/secrets/${key}:addVersion`, { payload: { data: Buffer.from(secrets[key].value).toString("base64") @@ -1863,10 +1887,24 @@ const syncSecretsGitLab = async ({ }; const allEnvVariables = await getAllEnvVariables(integration?.appId, accessToken); - const getSecretsRes: GitLabSecret[] = allEnvVariables.filter( - (secret: GitLabSecret) => secret.environment_scope === integration.targetEnvironment - ); + const getSecretsRes: GitLabSecret[] = allEnvVariables + .filter( + (secret: GitLabSecret) => secret.environment_scope === integration.targetEnvironment + ) + .filter((gitLabSecret) => { + let isValid = true; + if (integration.metadata.secretPrefix && !gitLabSecret.key.startsWith(integration.metadata.secretPrefix)) { + isValid = false; + } + + if (integration.metadata.secretSuffix && !gitLabSecret.key.endsWith(integration.metadata.secretSuffix)) { + isValid = false; + } + + return isValid; + }); + for await (const key of Object.keys(secrets)) { const existingSecret = getSecretsRes.find((s: any) => s.key == key); if (!existingSecret) { diff --git a/backend/src/models/integration/types.ts b/backend/src/models/integration/types.ts index 0415a9556..0c0b998e6 100644 --- a/backend/src/models/integration/types.ts +++ b/backend/src/models/integration/types.ts @@ -1,3 +1,11 @@ + +// TODO: in the future separate metadata +// into distinct types by integration export type Metadata = { + secretPrefix?: string; secretSuffix?: string; + secretGCPLabel?: { + labelName: string; + labelValue: string; + } } \ No newline at end of file diff --git a/backend/src/queues/integrations/syncSecretsToThirdPartyServices.ts b/backend/src/queues/integrations/syncSecretsToThirdPartyServices.ts index d3ffef6e6..7b6819b8c 100644 --- a/backend/src/queues/integrations/syncSecretsToThirdPartyServices.ts +++ b/backend/src/queues/integrations/syncSecretsToThirdPartyServices.ts @@ -35,9 +35,12 @@ syncSecretsToThirdPartyServices.process(async (job: Job) => { }); const suffixedSecrets: any = {}; - if (integration.metadata?.secretSuffix) { + if (integration.metadata) { for (const key in secrets) { - const newKey = key + integration.metadata?.secretSuffix; + const prefix = (integration.metadata?.secretPrefix || ""); + const suffix = (integration.metadata?.secretSuffix || ""); + const newKey = prefix + key + suffix; + suffixedSecrets[newKey] = secrets[key]; } } diff --git a/backend/src/validation/integration.ts b/backend/src/validation/integration.ts index dfe1ed505..7795b0084 100644 --- a/backend/src/validation/integration.ts +++ b/backend/src/validation/integration.ts @@ -77,7 +77,12 @@ export const CreateIntegrationV1 = z.object({ path: z.string().trim().optional(), region: z.string().trim().optional(), metadata: z.object({ - secretSuffix: z.string().optional() + secretPrefix: z.string().optional(), + secretSuffix: z.string().optional(), + secretGCPLabel: z.object({ + labelName: z.string(), + labelValue: z.string() + }).optional() }).optional() }) }); diff --git a/docs/images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-create-options.png b/docs/images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-create-options.png new file mode 100644 index 000000000..d084ebb6a Binary files /dev/null and b/docs/images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-create-options.png differ diff --git a/docs/images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-create.png b/docs/images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-create.png index 9e1719a59..afc4724cb 100644 Binary files a/docs/images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-create.png and b/docs/images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-create.png differ diff --git a/docs/images/integrations/gitlab/integrations-gitlab-create-options.png b/docs/images/integrations/gitlab/integrations-gitlab-create-options.png new file mode 100644 index 000000000..abb507997 Binary files /dev/null and b/docs/images/integrations/gitlab/integrations-gitlab-create-options.png differ diff --git a/docs/images/integrations/gitlab/integrations-gitlab-create.png b/docs/images/integrations/gitlab/integrations-gitlab-create.png index 4d13658c7..ae3ca7141 100644 Binary files a/docs/images/integrations/gitlab/integrations-gitlab-create.png and b/docs/images/integrations/gitlab/integrations-gitlab-create.png differ diff --git a/docs/integrations/cicd/gitlab.mdx b/docs/integrations/cicd/gitlab.mdx index d7b2637c6..9c3df9720 100644 --- a/docs/integrations/cicd/gitlab.mdx +++ b/docs/integrations/cicd/gitlab.mdx @@ -32,6 +32,16 @@ Press on the GitLab tile and grant Infisical access to your GitLab account. Select which Infisical environment secrets you want to sync to which GitLab repository and press create integration to start syncing secrets to GitLab. ![integrations gitlab](../../images/integrations/gitlab/integrations-gitlab-create.png) + +Note that the GitLab integration supports a few options in the **Options** tab: + +- Secret Prefix: If inputted, the prefix is appended to the front of every secret name prior to being synced. +- Secret Suffix: If inputted, the suffix to appended to the back of every name of every secret prior to being synced. + +Setting a secret prefix or suffix ensures that existing secrets in GCP Secret Manager are not overwritten during the sync. As part of this process, Infisical abstains from mutating any secrets in GitLab without the specified prefix or suffix. + +![integrations gitlab options](../../images/integrations/gitlab/integrations-gitlab-create-options.png) + ![integrations gitlab](../../images/integrations/gitlab/integrations-gitlab.png) diff --git a/docs/integrations/cloud/gcp-secret-manager.mdx b/docs/integrations/cloud/gcp-secret-manager.mdx index 3c1863006..505475009 100644 --- a/docs/integrations/cloud/gcp-secret-manager.mdx +++ b/docs/integrations/cloud/gcp-secret-manager.mdx @@ -35,14 +35,21 @@ Grant Infisical access to GCP. ## Start integration -Select which Infisical environment secrets you want to sync to which GCP secret manager project. Lastly, press create integration to start syncing secrets to GCP secret manager. +In the **Connection** tab, select which Infisical environment secrets you want to sync to which GCP secret manager project. Lastly, press create integration to start syncing secrets to GCP secret manager. ![integrations GCP secret manager](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-create.png) -![integrations GCP secret manager](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager.png) - - Secrets synced from Infisical to GCP Secret Manager are automatically labeled `managed-by:infisical` to avoid overwriting existing values in GCP Secret Manager. - +Note that the GCP Secret Manager integration supports a few options in the **Options** tab: + +- Secret Prefix: If inputted, the prefix is appended to the front of every secret name prior to being synced. +- Secret Suffix: If inputted, the suffix to appended to the back of every name of every secret prior to being synced. +- Label in GCP Secret Manager: If selected, every secret will be labeled in GCP Secret Manager (e.g. as `managed-by:infisical`); labels can be customized. + +Setting a secret prefix, suffix, or enabling the labeling option ensures that existing secrets in GCP Secret Manager are not overwritten during the sync. As part of this process, Infisical abstains from mutating any secrets in GCP Secret Manager without the specified prefix, suffix, or attached label. + +![integrations GCP secret manager options](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-create-options.png) + +![integrations GCP secret manager](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager.png) Using Infisical to sync secrets to GCP Secret Manager requires that you enable @@ -89,14 +96,21 @@ service account in IAM & Admin > Service Accounts > Service Account > Keys). ## Start integration -Select which Infisical environment secrets you want to sync to the GCP secret manager project. Lastly, press create integration to start syncing secrets to GCP secret manager. +In the **Connection** tab, select which Infisical environment secrets you want to sync to the GCP secret manager project. Lastly, press create integration to start syncing secrets to GCP secret manager. ![integrations GCP secret manager](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-create.png) -![integrations GCP secret manager](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager.png) - - Secrets synced from Infisical to GCP Secret Manager are automatically labeled `managed-by:infisical` to avoid overwriting existing values in GCP Secret Manager. - +Note that the GCP Secret Manager integration supports a few options in the **Options** tab: + +- Secret Prefix: If inputted, the prefix is appended to the front of every secret name prior to being synced. +- Secret Suffix: If inputted, the suffix to appended to the back of every name of every secret prior to being synced. +- Label in GCP Secret Manager: If selected, every secret will be labeled in GCP Secret Manager (e.g. as `managed-by:infisical`); labels can be customized. + +Setting a secret prefix, suffix, or enabling the labeling option ensures that existing secrets in GCP Secret Manager are not overwritten during the sync. As part of this process, Infisical abstains from mutating any secrets in GCP Secret Manager without the specified prefix, suffix, or attached label. + +![integrations GCP secret manager options](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-create-options.png) + +![integrations GCP secret manager](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager.png) Using Infisical to sync secrets to GCP Secret Manager requires that you enable diff --git a/frontend/src/hooks/api/integrations/queries.tsx b/frontend/src/hooks/api/integrations/queries.tsx index 8857da834..de5aa6da0 100644 --- a/frontend/src/hooks/api/integrations/queries.tsx +++ b/frontend/src/hooks/api/integrations/queries.tsx @@ -57,6 +57,7 @@ export const useCreateIntegration = () => { path?: string; region?: string; metadata?: { + secretPrefix?: string; secretSuffix?: string; } }) => { diff --git a/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx b/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx index c49513b75..2fa40fd90 100644 --- a/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx +++ b/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx @@ -39,7 +39,7 @@ export default function GCPSecretManagerAuthorizeIntegrationPage() { setIsLoading(false); - router.push(`/integrations/gcp-secret-manager/pat/create?integrationAuthId=${integrationAuth._id}`); + router.push(`/integrations/gcp-secret-manager/create?integrationAuthId=${integrationAuth._id}`); } catch (err) { console.error(err); } diff --git a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx b/frontend/src/pages/integrations/gcp-secret-manager/create.tsx index a452b42cc..dc118cdf2 100644 --- a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx +++ b/frontend/src/pages/integrations/gcp-secret-manager/create.tsx @@ -1,6 +1,10 @@ import { useEffect, useState } from "react"; +import { Controller, useForm } from "react-hook-form"; import { useRouter } from "next/router"; +import { yupResolver } from "@hookform/resolvers/yup"; +import { motion } from "framer-motion"; import queryString from "query-string"; +import * as yup from "yup"; import { useCreateIntegration @@ -13,7 +17,12 @@ import { FormControl, Input, Select, - SelectItem + SelectItem, + Switch, + Tab, + TabList, + TabPanel, + Tabs } from "../../../components/v2"; import { useGetIntegrationAuthApps, @@ -21,8 +30,44 @@ import { } from "../../../hooks/api/integrationAuth"; import { useGetWorkspaceById } from "../../../hooks/api/workspace"; +enum TabSections { + Connection = "connection", + Options = "options" +} + +const schema = yup.object({ + selectedSourceEnvironment: yup.string().required("Source environment is required"), + secretPath: yup.string().required("Secret path is required"), + targetAppId: yup.string().required("GCP project is required"), + secretPrefix: yup.string(), + secretSuffix: yup.string(), + shouldLabel: yup.boolean(), + labelName: yup.string(), + labelValue: yup.string() +}); + +type FormData = yup.InferType; + export default function GCPSecretManagerCreateIntegrationPage() { const router = useRouter(); + const { + control, + handleSubmit, + setValue, + watch + } = useForm({ + resolver: yupResolver(schema), + defaultValues: { + secretPath: "/", + shouldLabel: false, + labelName: "managed-by", + labelValue: "infisical" + } + }); + + const shouldLabel = watch("shouldLabel"); + const selectedSourceEnvironment = watch("selectedSourceEnvironment"); + const { mutateAsync } = useCreateIntegration(); const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]); @@ -33,29 +78,45 @@ export default function GCPSecretManagerCreateIntegrationPage() { integrationAuthId: (integrationAuthId as string) ?? "" }); - const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState(""); - const [targetAppId, setTargetAppId] = useState(""); - const [secretPath, setSecretPath] = useState("/"); - const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + if (shouldLabel) { + setValue("labelName", "managed-by"); + setValue("labelValue", "infisical"); + return; + } + + setValue("labelName", undefined); + setValue("labelValue", undefined); + }, [shouldLabel]); useEffect(() => { if (workspace) { - setSelectedSourceEnvironment(workspace.environments[0].slug); + setValue("selectedSourceEnvironment", workspace.environments[0].slug); } }, [workspace]); useEffect(() => { if (integrationAuthApps) { if (integrationAuthApps.length > 0) { - setTargetAppId(integrationAuthApps[0].appId as string); + setValue("targetAppId", integrationAuthApps[0].appId as string); } else { - setTargetAppId("none"); + setValue("targetAppId", "none"); } } }, [integrationAuthApps]); - - const handleButtonClick = async () => { + + const onFormSubmit = async ({ + selectedSourceEnvironment: sce, + secretPath, + targetAppId, + secretPrefix, + secretSuffix, + shouldLabel: sl, + labelName, + labelValue + }: FormData) => { try { setIsLoading(true); @@ -66,82 +127,232 @@ export default function GCPSecretManagerCreateIntegrationPage() { isActive: true, app: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.appId === targetAppId)?.name, appId: targetAppId, - sourceEnvironment: selectedSourceEnvironment, - secretPath + sourceEnvironment: sce, + secretPath, + metadata: { + secretPrefix, + secretSuffix, + ...(sl ? { + secretGCPLabel: { + labelName, + labelValue + } + } : {}) + } }); - + setIsLoading(false); router.push(`/integrations/${localStorage.getItem("projectData.id")}`); } catch (err) { console.error(err); + setIsLoading(false); } - }; + } return integrationAuth && workspace && selectedSourceEnvironment && - integrationAuthApps && - targetAppId ? ( -
+ integrationAuthApps ? ( +
GCP Secret Manager Integration - - - - - setSecretPath(evt.target.value)} - placeholder="Provide a path, default is /" - /> - - - onChange(e)} + className="w-full" + > + {workspace?.environments.map((sourceEnvironment) => ( + + {sourceEnvironment.name} + + ))} + + + )} + /> + ( + + + + )} + /> + { + return ( + + + + ) + }} + /> + +
+ + + + ( + + + + )} + /> + ( + + + + )} + /> +
+ ( + onChange(isChecked)} + isChecked={value} + > + Label in GCP Secret Manager + + )} + /> +
+ {shouldLabel && ( +
+ ( + + + + )} + /> + ( + + + + )} + /> +
)} - - - + + - + ) : (
); diff --git a/frontend/src/pages/integrations/gcp-secret-manager/pat/create.tsx b/frontend/src/pages/integrations/gcp-secret-manager/pat/create.tsx deleted file mode 100644 index 3bc98b615..000000000 --- a/frontend/src/pages/integrations/gcp-secret-manager/pat/create.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import { useEffect, useState } from "react"; -import { useRouter } from "next/router"; -import queryString from "query-string"; - -import { - Button, - Card, - CardTitle, - FormControl, - Input, - Select, - SelectItem -} from "@app/components/v2"; -import { - useCreateIntegration -} from "@app/hooks/api"; -import { useGetIntegrationAuthApps,useGetIntegrationAuthById } from "@app/hooks/api/integrationAuth"; -import { useGetWorkspaceById } from "@app/hooks/api/workspace"; - -export default function GCPSecretManagerCreateIntegrationPage() { - const router = useRouter(); - const { mutateAsync } = useCreateIntegration(); - - const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]); - - const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? ""); - const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? ""); - const { data: integrationAuthApps } = useGetIntegrationAuthApps({ - integrationAuthId: (integrationAuthId as string) ?? "" - }); - - const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState(""); - const [targetAppId, setTargetAppId] = useState(""); - const [secretPath, setSecretPath] = useState("/"); - - const [isLoading, setIsLoading] = useState(false); - - useEffect(() => { - if (workspace) { - setSelectedSourceEnvironment(workspace.environments[0].slug); - } - }, [workspace]); - - useEffect(() => { - if (integrationAuthApps) { - if (integrationAuthApps.length > 0) { - setTargetAppId(integrationAuthApps[0].appId as string); - } else { - setTargetAppId("none"); - } - } - }, [integrationAuthApps]); - - const handleButtonClick = async () => { - try { - setIsLoading(true); - - if (!integrationAuth?._id) return; - - await mutateAsync({ - integrationAuthId: integrationAuth?._id, - isActive: true, - app: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.appId === targetAppId)?.name, - appId: targetAppId, - sourceEnvironment: selectedSourceEnvironment, - secretPath - }); - - setIsLoading(false); - router.push(`/integrations/${localStorage.getItem("projectData.id")}`); - } catch (err) { - console.error(err); - } - }; - - return integrationAuth && - workspace && - selectedSourceEnvironment && - integrationAuthApps - ? ( -
- - GCP Secret Manager Integration - - - - - setSecretPath(evt.target.value)} - placeholder="Provide a path, default is /" - /> - - - - - - -
- ) : ( -
- ); -} - -GCPSecretManagerCreateIntegrationPage.requireAuth = true; diff --git a/frontend/src/pages/integrations/gitlab/create.tsx b/frontend/src/pages/integrations/gitlab/create.tsx index 66e68303e..eee471000 100644 --- a/frontend/src/pages/integrations/gitlab/create.tsx +++ b/frontend/src/pages/integrations/gitlab/create.tsx @@ -1,6 +1,10 @@ import { useEffect, useState } from "react"; +import { Controller, useForm } from "react-hook-form"; import { useRouter } from "next/router"; +import { yupResolver } from "@hookform/resolvers/yup"; +import { motion } from "framer-motion"; import queryString from "query-string"; +import * as yup from "yup"; import { useCreateIntegration @@ -13,7 +17,11 @@ import { FormControl, Input, Select, - SelectItem + SelectItem, + Tab, + TabList, + TabPanel, + Tabs } from "../../../components/v2"; import { useGetIntegrationAuthApps, @@ -27,8 +35,43 @@ const gitLabEntities = [ { name: "Group", value: "group" } ]; +enum TabSections { + Connection = "connection", + Options = "options" +} + +const schema = yup.object({ + targetEntity: yup.string().oneOf(gitLabEntities.map(entity => entity.value), "Invalid entity type"), + targetTeamId: yup.string(), + selectedSourceEnvironment: yup.string().required("Source environment is required"), + secretPath: yup.string().required("Secret path is required"), + targetAppId: yup.string().required("GitLab project is required"), + targetEnvironment: yup.string(), + secretPrefix: yup.string(), + secretSuffix: yup.string() +}); + +type FormData = yup.InferType; + export default function GitLabCreateIntegrationPage() { const router = useRouter(); + + const { + control, + handleSubmit, + setValue, + watch + } = useForm({ + resolver: yupResolver(schema), + defaultValues: { + targetEntity: "individual", + secretPath: "/" + } + }); + const selectedSourceEnvironment = watch("selectedSourceEnvironment"); + const targetEntity = watch("targetEntity"); + const targetTeamId = watch("targetTeamId"); + const { mutateAsync } = useCreateIntegration(); const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]); @@ -36,8 +79,6 @@ export default function GitLabCreateIntegrationPage() { const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? ""); const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? ""); - const [targetTeamId, setTargetTeamId] = useState(null); - const { data: integrationAuthApps } = useGetIntegrationAuthApps({ integrationAuthId: (integrationAuthId as string) ?? "", ...(targetTeamId ? { teamId: targetTeamId } : {}) @@ -46,26 +87,20 @@ export default function GitLabCreateIntegrationPage() { (integrationAuthId as string) ?? "" ); - const [targetEntity, setTargetEntity] = useState(gitLabEntities[0].value); - const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState(""); - const [secretPath, setSecretPath] = useState("/"); - const [targetAppId, setTargetAppId] = useState(""); - const [targetEnvironment, setTargetEnvironment] = useState(""); - 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) { - setTargetAppId(integrationAuthApps[0].appId as string); + setValue("targetAppId", String(integrationAuthApps[0].appId as string)); } else { - setTargetAppId("none"); + setValue("targetAppId", "none"); } } }, [integrationAuthApps]); @@ -75,151 +110,283 @@ export default function GitLabCreateIntegrationPage() { if (integrationAuthTeams) { if (integrationAuthTeams.length > 0) { // case: user is part of at least 1 group in GitLab - setTargetTeamId(integrationAuthTeams[0].teamId); + setValue("targetTeamId", String(integrationAuthTeams[0].teamId)); } else { // case: user is not part of any groups in GitLab - setTargetTeamId("none"); + setValue("targetTeamId", "none"); } } } else if (targetEntity === "individual") { - setTargetTeamId(null); + setValue("targetTeamId", undefined); } }, [targetEntity, integrationAuthTeams]); - const handleButtonClick = async () => { + const onFormSubmit = async ({ + selectedSourceEnvironment: sse, + secretPath, + targetAppId, + targetEnvironment, + secretPrefix, + secretSuffix + }: FormData) => { try { setIsLoading(true); if (!integrationAuth?._id) return; - + await mutateAsync({ integrationAuthId: integrationAuth?._id, isActive: true, - app: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.appId === targetAppId)?.name, + app: integrationAuthApps?.find((integrationAuthApp) => String(integrationAuthApp.appId) === targetAppId)?.name, appId: String(targetAppId), - sourceEnvironment: selectedSourceEnvironment, + sourceEnvironment: sse, targetEnvironment: targetEnvironment === "" ? "*" : targetEnvironment, - secretPath + secretPath, + metadata: { + secretPrefix, + secretSuffix + } }); setIsLoading(false); router.push(`/integrations/${localStorage.getItem("projectData.id")}`); } catch (err) { console.error(err); + setIsLoading(false); } - }; + } return integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && - integrationAuthTeams && - targetAppId ? ( -
+ integrationAuthTeams ? ( +
GitLab Integration - - - - - setSecretPath(evt.target.value)} - placeholder="Provide a path, default is /" - /> - - - - - {targetEntity === "group" && targetTeamId && ( - - - - )} - - - - - setTargetEnvironment(e.target.value)} - /> - - +
+ ( + + + + )} + /> + ( + + + + )} + /> + ( + + + + )} + /> + {targetEntity === "group" && targetTeamId && ( + ( + + + + )} + /> + )} + { + return ( + + + + )}} + /> + ( + + + + )} + /> +
+ + + + +
+ ( + + + + )} + /> + ( + + + + )} + /> +
+ + -
+ ) : (
);