awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1145 from atimapreandrew/checkly-sync-on-group-level

Browse Source 
Checkly sync on group level
This commit is contained in:
BlackMagiq
2023-11-02 11:10:40 +02:00
committed by GitHub
parent 079a09a3d1 c0c96d6407
commit 86d82737f4
16 changed files with 358 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/hooks/api/integrationAuth/index.tsx
View File

@@ -4,6 +4,7 @@ export {
useGetIntegrationAuthApps,
useGetIntegrationAuthBitBucketWorkspaces,
useGetIntegrationAuthById,
useGetIntegrationAuthChecklyGroups,
useGetIntegrationAuthNorthflankSecretGroups,
useGetIntegrationAuthRailwayEnvironments,
useGetIntegrationAuthRailwayServices,
@@ -11,4 +12,4 @@ export {
useGetIntegrationAuthTeams,
useGetIntegrationAuthVercelBranches,
useSaveIntegrationAccessToken
} from "./queries";
} from "./queries";

52
frontend/src/hooks/api/integrationAuth/queries.tsx
View File

@@ -6,14 +6,16 @@ import { workspaceKeys } from "../workspace/queries";
import {
App,
BitBucketWorkspace,
ChecklyGroup,
Environment,
IntegrationAuth,
NorthflankSecretGroup,
Org,
Project,
Service,
Team,
TeamCityBuildConfig} from "./types";
Team,
TeamCityBuildConfig
} from "./types";
const integrationAuthKeys = {
getIntegrationAuthById: (integrationAuthId: string) =>
@@ -29,6 +31,14 @@ const integrationAuthKeys = {
integrationAuthId: string;
appId: string;
}) => [{ integrationAuthId, appId }, "integrationAuthVercelBranches"] as const,
getIntegrationAuthChecklyGroups: ({
integrationAuthId,
accountId
}: {
integrationAuthId: string;
accountId: string;
}) =>
[{ integrationAuthId, accountId }, "integrationAuthChecklyGroups"] as const,
getIntegrationAuthQoveryOrgs: (integrationAuthId: string) =>
[{ integrationAuthId }, "integrationAuthQoveryOrgs"] as const,
getIntegrationAuthQoveryProjects: ({
@@ -125,6 +135,24 @@ const fetchIntegrationAuthTeams = async (integrationAuthId: string) => {
return data.teams;
};
const fetchIntegrationAuthChecklyGroups = async ({
integrationAuthId,
accountId
}: {
integrationAuthId: string;
accountId: string;
}) => {
const { data } = await apiRequest.get<{ groups: ChecklyGroup[] }>(
`/api/v1/integration-auth/${integrationAuthId}/checkly/groups`,
{
params: {
accountId
}
}
);
return data.groups;
};
const fetchIntegrationAuthVercelBranches = async ({
integrationAuthId,
@@ -413,6 +441,26 @@ export const useGetIntegrationAuthVercelBranches = ({
});
};
export const useGetIntegrationAuthChecklyGroups = ({
integrationAuthId,
accountId
}: {
integrationAuthId: string;
accountId: string;
}) => {
return useQuery({
queryKey: integrationAuthKeys.getIntegrationAuthChecklyGroups({
integrationAuthId,
accountId
}),
queryFn: () => fetchIntegrationAuthChecklyGroups({
integrationAuthId,
accountId
}),
enabled: true
});
};
export const useGetIntegrationAuthQoveryOrgs = (integrationAuthId: string) => {
return useQuery({
queryKey: integrationAuthKeys.getIntegrationAuthQoveryOrgs(integrationAuthId),

5
frontend/src/hooks/api/integrationAuth/types.ts
View File

@@ -26,6 +26,11 @@ export type Environment = {
environmentId: string;
};
export type ChecklyGroup = {
name: string;
groupId: number;
};
export type Container = {
name: string;
containerId: string;

93
frontend/src/pages/integrations/checkly/create.tsx
View File

@@ -3,7 +3,7 @@ import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
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 { motion } from "framer-motion";
import queryString from "query-string";
@@ -27,7 +27,8 @@ import {
import {
useGetIntegrationAuthApps,
useGetIntegrationAuthById
useGetIntegrationAuthById,
useGetIntegrationAuthChecklyGroups
} from "../../../hooks/api/integrationAuth";
import { useGetWorkspaceById } from "../../../hooks/api/workspace";
@@ -42,20 +43,24 @@ export default function ChecklyCreateIntegrationPage() {
const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
const [secretPath, setSecretPath] = useState("/");
const [secretSuffix, setSecretSuffix] = useState("");
const [targetAppId, setTargetAppId] = useState("");
const [targetGroupId, setTargetGroupId] = useState("");
const [isLoading, setIsLoading] = useState(false);
const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
integrationAuthId: (integrationAuthId as string) ?? ""
});
const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
const [secretPath, setSecretPath] = useState("/");
const [secretSuffix, setSecretSuffix] = useState("");
const [targetApp, setTargetApp] = useState("");
const [targetAppId, setTargetAppId] = useState("");
const [isLoading, setIsLoading] = useState(false);
const { data: integrationAuthGroups, isLoading: isintegrationAuthGroupsLoading } = useGetIntegrationAuthChecklyGroups({
integrationAuthId: (integrationAuthId as string) ?? "",
accountId: targetAppId
});
useEffect(() => {
if (workspace) {
@@ -64,13 +69,11 @@ export default function ChecklyCreateIntegrationPage() {
}, [workspace]);
useEffect(() => {
// TODO: handle case where apps can be empty
if (integrationAuthApps) {
if (integrationAuthApps.length > 0) {
setTargetApp(integrationAuthApps[0].name);
setTargetAppId(String(integrationAuthApps[0].appId));
setTargetAppId(integrationAuthApps[0].appId as string);
} else {
setTargetApp("none");
setTargetAppId("none");
}
}
}, [integrationAuthApps]);
@@ -81,12 +84,23 @@ export default function ChecklyCreateIntegrationPage() {
setIsLoading(true);
const targetApp = integrationAuthApps?.find(
(integrationAuthApp) => integrationAuthApp.appId === targetAppId
);
const targetGroup = integrationAuthGroups?.find(
(group) => group.groupId === Number(targetGroupId)
);
if (!targetApp) return;
await mutateAsync({
integrationAuthId: integrationAuth?._id,
isActive: true,
app: targetApp,
appId: targetAppId,
app: targetApp?.name,
appId: targetApp?.appId,
sourceEnvironment: selectedSourceEnvironment,
targetService: targetGroup?.name,
targetServiceId: String(targetGroup?.groupId),
secretPath,
metadata: {
secretSuffix
@@ -104,9 +118,10 @@ export default function ChecklyCreateIntegrationPage() {
return integrationAuth &&
workspace &&
selectedSourceEnvironment &&
integrationAuthApps &&
targetApp ? (
<div className="flex flex-col h-full w-full items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
integrationAuthApps &&
integrationAuthGroups &&
targetAppId ? (
<div className="flex h-full flex-col w-full py-6 items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
<Head>
<title>Set Up Checkly Integration</title>
<link rel='icon' href='/infisical.ico' />
@@ -177,16 +192,16 @@ export default function ChecklyCreateIntegrationPage() {
</FormControl>
<FormControl label="Checkly Account">
<Select
value={targetApp}
onValueChange={(val) => setTargetApp(val)}
value={targetAppId}
onValueChange={(val) => setTargetAppId(val)}
className="w-full border border-mineshaft-500"
isDisabled={integrationAuthApps.length === 0}
>
{integrationAuthApps.length > 0 ? (
integrationAuthApps.map((integrationAuthApp) => (
<SelectItem
value={integrationAuthApp.name}
key={`target-app-${integrationAuthApp.name}`}
value={integrationAuthApp.appId as string}
key={`target-app-${integrationAuthApp.appId as string}`}
>
{integrationAuthApp.name}
</SelectItem>
@@ -198,6 +213,28 @@ export default function ChecklyCreateIntegrationPage() {
)}
</Select>
</FormControl>
<FormControl label="Checkly Group (Optional)">
<Select
value={targetGroupId}
onValueChange={(val) => setTargetGroupId(val)}
className="w-full border border-mineshaft-500"
>
{integrationAuthGroups.length > 0 ? (
integrationAuthGroups.map((integrationAuthGroup) => (
<SelectItem
value={String(integrationAuthGroup.groupId)}
key={`target-group-${String(integrationAuthGroup.groupId)}`}
>
{integrationAuthGroup.name}
</SelectItem>
))
) : (
<SelectItem value="none" key="target-group-none">
No groups found
</SelectItem>
)}
</Select>
</FormControl>
</motion.div>
</TabPanel>
<TabPanel value={TabSections.Options}>
@@ -229,12 +266,6 @@ export default function ChecklyCreateIntegrationPage() {
Create Integration
</Button>
</Card>
<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-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 Checkly with secrets from Infisical.</span>
<span className="text-mineshaft-300 text-sm mt-4">If you have multiple Checkly integrations and are using suffixes for at least one of them, you will have to add suffixes for all the active Checkly integrations – otherwise you might run into rare unexpected behavior.</span>
</div>
</div>
) : (
<div className="flex justify-center items-center w-full h-full">
@@ -242,7 +273,7 @@ export default function ChecklyCreateIntegrationPage() {
<title>Set Up Checkly Integration</title>
<link rel='icon' href='/infisical.ico' />
</Head>
{isIntegrationAuthAppsLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
{isIntegrationAuthAppsLoading || isintegrationAuthGroupsLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
<FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
<p>
Something went wrong. Please contact <a

20
frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
View File

@@ -163,12 +163,22 @@ export const IntegrationsSection = ({
</div>
)}
{((integration.integration === "checkly") || (integration.integration === "github")) && (
<div className="ml-2 flex flex-col">
<FormLabel label="Secret Suffix" />
<div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
{integration?.metadata?.secretSuffix || "-"}
<>
{integration.targetService && (
<div className="ml-2">
<FormLabel label="Group" />
<div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
{integration.targetService}
</div>
</div>
)}
<div className="ml-2">
<FormLabel label="Secret Suffix" />
<div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
{integration?.metadata?.secretSuffix || "-"}
</div>
</div>
</div>
</>
)}
</div>
<div className="flex cursor-default items-center">