github/infisical
1
1
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2026-05-02 03:02:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #627 from Infisical/checkly-integration

Browse Source 
Checkly integration
This commit is contained in:
BlackMagiq
2023-06-08 10:56:19 +01:00
committed by GitHub
parent 329ab8ae61 5fa96411d6
commit a8e71e8170
16 changed files with 441 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
backend/src/integrations/apps.ts
View File

@@ -16,6 +16,7 @@ import {
INTEGRATION_CIRCLECI,
INTEGRATION_TRAVISCI,
INTEGRATION_SUPABASE,
INTEGRATION_CHECKLY,
INTEGRATION_HEROKU_API_URL,
INTEGRATION_GITLAB_API_URL,
INTEGRATION_VERCEL_API_URL,
@@ -26,6 +27,7 @@ import {
INTEGRATION_CIRCLECI_API_URL,
INTEGRATION_TRAVISCI_API_URL,
INTEGRATION_SUPABASE_API_URL,
INTEGRATION_CHECKLY_API_URL
} from "../variables";
interface App {
@@ -120,6 +122,11 @@ const getApps = async ({
accessToken,
});
break;
case INTEGRATION_CHECKLY:
apps = await getAppsCheckly({
accessToken,
});
break;
}
return apps;
@@ -601,4 +608,32 @@ const getAppsSupabase = async ({ accessToken }: { accessToken: string }) => {
return apps;
};
/**
* Return list of projects for the Checkly integration
* @param {Object} obj
* @param {String} obj.accessToken - api key for the Checkly API
* @returns {Object[]} apps - Сheckly accounts
* @returns {String} apps.name - name of Checkly account
*/
const getAppsCheckly = async ({ accessToken }: { accessToken: string }) => {
const { data } = await standardRequest.get(
`${INTEGRATION_CHECKLY_API_URL}/v1/accounts`,
{
headers: {
Authorization: `Bearer ${accessToken}`,
"Accept": "application/json",
},
}
);
const apps = data.map((a: any) => {
return {
name: a.name,
appId: a.id,
};
});
return apps;
};
export { getApps };

146
backend/src/integrations/sync.ts
View File

@@ -34,7 +34,9 @@ import {
INTEGRATION_FLYIO_API_URL,
INTEGRATION_CIRCLECI_API_URL,
INTEGRATION_TRAVISCI_API_URL,
INTEGRATION_SUPABASE_API_URL
INTEGRATION_SUPABASE_API_URL,
INTEGRATION_CHECKLY,
INTEGRATION_CHECKLY_API_URL
} from "../variables";
import { standardRequest} from '../config/request';
@@ -161,8 +163,47 @@ const syncSecrets = async ({
integration,
secrets,
accessToken
});
break;
});
break;
case INTEGRATION_FLYIO:
await syncSecretsFlyio({
integration,
secrets,
accessToken,
});
break;
case INTEGRATION_CIRCLECI:
await syncSecretsCircleCI({
integration,
secrets,
accessToken,
});
break;
case INTEGRATION_TRAVISCI:
await syncSecretsTravisCI({
integration,
secrets,
accessToken,
});
break;
case INTEGRATION_SUPABASE:
await syncSecretsSupabase({
integration,
secrets,
accessToken
});
break;
case INTEGRATION_CHECKLY:
await syncSecretsCheckly({
integration,
secrets,
accessToken,
});
break;
}
} catch (err) {
Sentry.setUser(null);
Sentry.captureException(err);
}
};
@@ -1629,4 +1670,103 @@ const syncSecretsSupabase = async ({
};
/**
* Sync/push [secrets] to Checkly app
* @param {Object} obj
* @param {IIntegration} obj.integration - integration details
* @param {Object} obj.secrets - secrets to push to integration (object where keys are secret keys and values are secret values)
* @param {String} obj.accessToken - access token for Checkly integration
*/
const syncSecretsCheckly = async ({
integration,
secrets,
accessToken,
}: {
integration: IIntegration;
secrets: any;
accessToken: string;
}) => {
try {
// get secrets from travis-ci
const getSecretsRes = (
await standardRequest.get(
`${INTEGRATION_CHECKLY_API_URL}/v1/variables`,
{
headers: {
"Authorization": `Bearer ${accessToken}`,
"Accept-Encoding": "application/json",
"X-Checkly-Account": integration.appId
},
}
)
)
.data
.reduce((obj: any, secret: any) => ({
...obj,
[secret.key]: secret.value
}), {});
// add secrets
for await (const key of Object.keys(secrets)) {
if (!(key in getSecretsRes)) {
// case: secret does not exist in checkly
// -> add secret
await standardRequest.post(
`${INTEGRATION_CHECKLY_API_URL}/v1/variables`,
{
key,
value: secrets[key] ? secrets[key] : 'EMPTY'
},
{
headers: {
"Authorization": `Bearer ${accessToken}`,
"Accept": "application/json",
"Content-Type": "application/json",
"X-Checkly-Account": integration.appId
},
}
);
} else {
// case: secret exists in checkly
// -> update/set secret
await standardRequest.put(
`${INTEGRATION_CHECKLY_API_URL}/v1/variables/${key}`,
{
value: secrets[key] ? secrets[key] : 'EMPTY'
},
{
headers: {
"Authorization": `Bearer ${accessToken}`,
"Content-Type": "application/json",
"Accept": "application/json",
"X-Checkly-Account": integration.appId
},
}
);
}
}
for await (const key of Object.keys(getSecretsRes)) {
if (!(key in secrets)){
// delete secret
await standardRequest.delete(
`${INTEGRATION_CHECKLY_API_URL}/v1/variables/${key}`,
{
headers: {
"Authorization": `Bearer ${accessToken}`,
"Accept": "application/json",
"X-Checkly-Account": integration.appId
},
}
);
}
}
} catch (err) {
Sentry.setUser(null);
Sentry.captureException(err);
throw new Error("Failed to sync secrets to Checkly");
}
};
export { syncSecrets };

9
backend/src/models/integration.ts
View File

@@ -13,7 +13,8 @@ import {
INTEGRATION_FLYIO,
INTEGRATION_CIRCLECI,
INTEGRATION_TRAVISCI,
INTEGRATION_SUPABASE
INTEGRATION_SUPABASE,
INTEGRATION_CHECKLY
} from "../variables";
export interface IIntegration {
@@ -45,7 +46,8 @@ export interface IIntegration {
| 'flyio'
| 'circleci'
| 'travisci'
| 'supabase';
| 'supabase'
| 'checkly';
integrationAuth: Types.ObjectId;
}
@@ -130,7 +132,8 @@ const integrationSchema = new Schema<IIntegration>(
INTEGRATION_FLYIO,
INTEGRATION_CIRCLECI,
INTEGRATION_TRAVISCI,
INTEGRATION_SUPABASE
INTEGRATION_SUPABASE,
INTEGRATION_CHECKLY
],
required: true,
},

2
backend/src/models/integrationAuth.ts
View File

@@ -22,7 +22,7 @@ import {
export interface IIntegrationAuth extends Document {
_id: Types.ObjectId;
workspace: Types.ObjectId;
integration: 'heroku' | 'vercel' | 'netlify' | 'github' | 'gitlab' | 'render' | 'railway' | 'flyio' | 'azure-key-vault' | 'circleci' | 'travisci' | 'supabase' | 'aws-parameter-store' | 'aws-secret-manager';
integration: 'heroku' | 'vercel' | 'netlify' | 'github' | 'gitlab' | 'render' | 'railway' | 'flyio' | 'azure-key-vault' | 'circleci' | 'travisci' | 'supabase' | 'aws-parameter-store' | 'aws-secret-manager' | 'checkly';
teamId: string;
accountId: string;
refreshCiphertext?: string;

14
backend/src/variables/integration.ts
View File

@@ -22,6 +22,7 @@ export const INTEGRATION_FLYIO = "flyio";
export const INTEGRATION_CIRCLECI = "circleci";
export const INTEGRATION_TRAVISCI = "travisci";
export const INTEGRATION_SUPABASE = 'supabase';
export const INTEGRATION_CHECKLY = 'checkly';
export const INTEGRATION_SET = new Set([
INTEGRATION_AZURE_KEY_VAULT,
INTEGRATION_HEROKU,
@@ -33,7 +34,8 @@ export const INTEGRATION_SET = new Set([
INTEGRATION_FLYIO,
INTEGRATION_CIRCLECI,
INTEGRATION_TRAVISCI,
INTEGRATION_SUPABASE
INTEGRATION_SUPABASE,
INTEGRATION_CHECKLY
]);
// integration types
@@ -60,6 +62,7 @@ export const INTEGRATION_FLYIO_API_URL = "https://api.fly.io/graphql";
export const INTEGRATION_CIRCLECI_API_URL = "https://circleci.com/api";
export const INTEGRATION_TRAVISCI_API_URL = "https://api.travis-ci.com";
export const INTEGRATION_SUPABASE_API_URL = 'https://api.supabase.com';
export const INTEGRATION_CHECKLY_API_URL = 'https://api.checklyhq.com';
export const getIntegrationOptions = async () => {
const INTEGRATION_OPTIONS = [
@@ -190,6 +193,15 @@ export const getIntegrationOptions = async () => {
clientId: '',
docsLink: ''
},
{
name: 'Checkly',
slug: 'checkly',
image: 'Checkly.png',
isAvailable: true,
type: 'pat',
clientId: '',
docsLink: ''
},
{
name: 'Google Cloud Platform',
slug: 'gcp',

3
frontend/public/data/frequentConstants.ts
View File

@@ -16,7 +16,8 @@ const integrationSlugNameMapping: Mapping = {
'flyio': 'Fly.io',
'circleci': 'CircleCI',
'travisci': 'TravisCI',
'supabase': 'Supabase'
'supabase': 'Supabase',
'checkly': 'Checkly'
}
const envMapping: Mapping = {

BIN
frontend/public/images/integrations/Checkly.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

2
frontend/src/components/basic/buttons/Button.tsx
View File

@@ -57,7 +57,7 @@ const Button = ({
color === 'mineshaft' && !activityStatus && 'bg-mineshaft',
(color === 'primary' || !color) && activityStatus && 'bg-primary border border-primary-400 opacity-80 hover:opacity-100',
(color === 'primary' || !color) && !activityStatus && 'bg-primary',
color === 'red' && 'bg-red',
color === 'red' && 'bg-red-800 border border-red',
// Changing the opacity when active vs when not
activityStatus ? 'opacity-100 cursor-pointer' : 'opacity-40',

12
frontend/src/components/integrations/CloudIntegration.tsx
View File

@@ -1,5 +1,5 @@
import Image from 'next/image';
import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';
import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import deleteIntegrationAuth from '../../pages/api/integrations/DeleteIntegrationAuth';
@@ -44,9 +44,9 @@ const CloudIntegration = ({
tabIndex={0}
className={`relative ${
cloudIntegrationOption.isAvailable
? 'cursor-pointer duration-200 hover:bg-white/10'
? 'cursor-pointer duration-200 hover:bg-mineshaft-700'
: 'opacity-50'
} flex h-32 flex-row items-center rounded-md bg-white/5 p-4`}
} flex h-32 flex-row items-center rounded-md bg-mineshaft-800 border border-mineshaft-600 p-4`}
onClick={() => {
if (!cloudIntegrationOption.isAvailable) return;
setSelectedIntegrationOption(cloudIntegrationOption);
@@ -95,12 +95,12 @@ const CloudIntegration = ({
integrationAuth: deletedIntegrationAuth
});
}}
className="flex w-max cursor-pointer flex-row items-center rounded-b-md bg-red py-0.5 px-2 text-xs opacity-0 duration-200 group-hover:opacity-100"
className="flex w-max cursor-pointer flex-row items-center rounded-bl-md bg-red py-0.5 px-2 text-xs opacity-30 duration-200 group-hover:opacity-100"
>
<FontAwesomeIcon icon={faX} className="mr-2 py-px text-xs" />
<FontAwesomeIcon icon={faXmark} className="mr-2 text-xs" />
Revoke
</div>
<div className="flex w-max flex-row items-center rounded-bl-md rounded-tr-md bg-primary py-0.5 px-2 text-xs text-black opacity-90 duration-200 group-hover:opacity-100">
<div className="flex w-max flex-row items-center rounded-tr-md bg-primary py-0.5 px-2 text-xs text-black opacity-70 duration-200 group-hover:opacity-100">
<FontAwesomeIcon icon={faCheck} className="mr-2 text-xs" />
Authorized
</div>

4
frontend/src/components/integrations/FrameworkIntegration.tsx
View File

@@ -12,10 +12,10 @@ const FrameworkIntegration = ({ framework }: { framework: Framework }) => (
href={framework.docsLink}
rel="noopener noreferrer"
target="_blank"
className="relative flex flex-row justify-center bg-bunker-500 hover:bg-gradient-to-tr duration-200 h-32 rounded-md p-0.5 items-center cursor-pointer"
className="relative flex flex-row justify-center duration-200 h-32 rounded-md p-0.5 items-center cursor-pointer"
>
<div
className={`hover:bg-white/10 cursor-pointer font-semibold bg-bunker-500 flex flex-col items-center justify-center h-full w-full rounded-md text-gray-300 group-hover:text-gray-200 duration-200 ${
className={`hover:bg-mineshaft-700 cursor-pointer font-semibold bg-mineshaft-800 border border-mineshaft-600 flex flex-col items-center justify-center h-full w-full rounded-md text-gray-300 group-hover:text-gray-200 duration-200 ${
framework?.name?.split(' ').length > 1 ? 'text-sm px-1' : 'text-xl px-2'
} text-center w-full max-w-xs`}
>

22
frontend/src/components/integrations/Integration.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { faArrowRight, faRotate, faX } from '@fortawesome/free-solid-svg-icons';
import { faArrowRight, faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// TODO: This needs to be moved from public folder
import { contextNetlifyMapping, integrationSlugNameMapping, reverseContextNetlifyMapping } from 'public/data/frequentConstants';
@@ -212,10 +212,10 @@ const IntegrationTile = ({
return <div />;
};
if (!integrationApp) return <div />;
if (!integrationApp && integration.integration !== "checkly") return <div />;
return (
<div className="mx-6 mb-8 flex max-w-5xl justify-between rounded-md bg-white/5 p-6">
<div className="mx-6 mb-8 flex max-w-5xl justify-between rounded-md bg-mineshaft-800 border border-mineshaft-600 p-6">
<div className="flex">
<div>
<p className="mb-2 text-xs font-semibold text-gray-400">ENVIRONMENT</p>
@@ -238,27 +238,27 @@ const IntegrationTile = ({
</div>
<div className="mr-2">
<p className="text-gray-400 text-xs font-semibold mb-2">INTEGRATION</p>
<div className="py-2.5 bg-white/[.07] rounded-md pl-4 pr-10 text-sm font-semibold text-gray-300">
<div className="py-2.5 bg-white/[.07] rounded-md pl-4 pr-10 text-sm font-semibold text-gray-300 cursor-default">
{/* {integration.integration.charAt(0).toUpperCase() + integration.integration.slice(1)} */}
{integrationSlugNameMapping[integration.integration]}
</div>
</div>
<div className="mr-2">
<div className="mb-2 text-xs font-semibold text-gray-400">APP</div>
<ListBox
{integrationApp ? <div title={integrationApp}><ListBox
data={!integration.isActive ? apps.map((app) => app.name) : null}
isSelected={integrationApp}
onChange={(app) => {
setIntegrationApp(app);
}}
/>
/></div> : <div className='w-52 h-10 rounded-md bg-mineshaft-600 animate-pulse px-4 font-bold py-2'>-</div>}
</div>
{renderIntegrationSpecificParams(integration)}
</div>
<div className="flex items-end">
<div className="flex items-end cursor-default">
{integration.isActive ? (
<div className="flex max-w-5xl flex-row items-center rounded-md bg-white/5 p-2 px-4">
<FontAwesomeIcon icon={faRotate} className="mr-2.5 animate-spin text-lg text-primary" />
<div className="flex max-w-5xl flex-row items-center rounded-md bg-mineshaft-600 p-[0.44rem] px-4 border border-mineshaft-500">
<FontAwesomeIcon icon={faCheck} className="mr-2.5 text-lg text-primary" />
<div className="font-semibold text-gray-300">In Sync</div>
</div>
) : (
@@ -269,7 +269,7 @@ const IntegrationTile = ({
size="md"
/>
)}
<div className="ml-2 opacity-50 duration-200 hover:opacity-100">
<div className="ml-2 opacity-80 duration-200 hover:opacity-100">
<Button
onButtonPressed={() =>
handleDeleteIntegration({
@@ -278,7 +278,7 @@ const IntegrationTile = ({
}
color="red"
size="icon-md"
icon={faX}
icon={faXmark}
/>
</div>
</div>

2
frontend/src/components/integrations/IntegrationSection.tsx
View File

@@ -37,7 +37,7 @@ const ProjectIntegrationSection = ({
<div className="mb-12">
<div className="mx-4 mb-4 mt-6 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
<h1 className="text-3xl font-semibold">Current Integrations</h1>
<p className="text-base text-gray-400">Manage integrations with third-party services.</p>
<p className="text-base text-bunker-300">Manage integrations with third-party services.</p>
</div>
{integrations.map((integration: Integration) => {
return (

4
frontend/src/components/v2/Select/Select.tsx
View File

@@ -40,7 +40,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
ref={ref}
className={twMerge(
`inline-flex items-center justify-between rounded-md
bg-bunker-800 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-gray-500`,
bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-gray-500`,
className
)}
>
@@ -56,7 +56,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
<SelectPrimitive.Portal>
<SelectPrimitive.Content
className={twMerge(
'relative top-1 z-[100] overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md',
'relative top-1 z-[100] overflow-hidden rounded-md bg-mineshaft-900 border border-mineshaft-600 font-inter text-bunker-100 shadow-md',
dropdownContainerClassName
)}
position={position}

10
frontend/src/pages/integrations/[id].tsx
View File

@@ -210,6 +210,9 @@ export default function Integrations() {
case 'supabase':
link = `${window.location.origin}/integrations/supabase/authorize`;
break;
case 'checkly':
link = `${window.location.origin}/integrations/checkly/authorize`;
break;
case 'railway':
link = `${window.location.origin}/integrations/railway/authorize`;
break;
@@ -268,6 +271,9 @@ export default function Integrations() {
case 'supabase':
link = `${window.location.origin}/integrations/supabase/create?integrationAuthId=${integrationAuth._id}`;
break;
case 'checkly':
link = `${window.location.origin}/integrations/checkly/create?integrationAuthId=${integrationAuth._id}`;
break;
case 'railway':
link = `${window.location.origin}/integrations/railway/create?integrationAuthId=${integrationAuth._id}`;
break;
@@ -384,7 +390,7 @@ export default function Integrations() {
};
return (
<div className="flex max-h-screen flex-col justify-between bg-bunker-800 text-white">
<div className="flex max-h-full flex-col justify-between bg-bunker-800 text-white">
<Head>
<title>{t('common.head-title', { title: t('integrations.title') })}</title>
<link rel="icon" href="/infisical.ico" />
@@ -392,7 +398,7 @@ export default function Integrations() {
<meta property="og:title" content="Manage your .env files in seconds" />
<meta name="og:description" content={t('integrations.description') as string} />
</Head>
<div className="no-scrollbar::-webkit-scrollbar h-screen max-h-[calc(100vh-10px)] w-full overflow-y-scroll pb-2 no-scrollbar">
<div className="no-scrollbar::-webkit-scrollbar h-screen max-h-[calc(100vh-10px)] w-full overflow-y-scroll pb-6 no-scrollbar">
<NavHeader pageName={t('integrations.title')} isProjectRelated />
<ActivateBotDialog
isOpen={isActivateBotDialogOpen}

69
frontend/src/pages/integrations/checkly/authorize.tsx Normal file
View File

@@ -0,0 +1,69 @@
import { useState } from 'react';
import { useRouter } from 'next/router';
import { Button, Card, CardTitle, FormControl, Input } from '../../../components/v2';
import saveIntegrationAccessToken from '../../api/integrations/saveIntegrationAccessToken';
export default function ChecklyCreateIntegrationPage() {
const router = useRouter();
const [accessToken, setAccessToken] = useState('');
const [accessTokenErrorText, setAccessTokenErrorText] = useState('');
const [isLoading, setIsLoading] = useState(false);
const handleButtonClick = async () => {
try {
setAccessTokenErrorText('');
if (accessToken.length === 0) {
setAccessTokenErrorText('Access token cannot be blank');
return;
}
setIsLoading(true);
const integrationAuth = await saveIntegrationAccessToken({
workspaceId: localStorage.getItem('projectData.id'),
integration: 'checkly',
accessId: null,
accessToken
});
setIsLoading(false);
router.push(`/integrations/checkly/create?integrationAuthId=${integrationAuth._id}`);
} catch (err) {
console.error(err);
}
};
return (
<div className="flex h-full w-full items-center justify-center">
<Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
<CardTitle className="text-left px-6" subTitle="After adding your API-key, you will be prompted to set up an integration for a particular Infisical project and environment.">Checkly Integration</CardTitle>
<FormControl
label="Checkly API key"
errorText={accessTokenErrorText}
isError={accessTokenErrorText !== '' ?? false}
className="mx-6"
>
<Input
placeholder=""
value={accessToken}
onChange={(e) => setAccessToken(e.target.value)}
/>
</FormControl>
<Button
onClick={handleButtonClick}
color="mineshaft"
variant="outline_bg"
className="mb-6 mt-2 ml-auto mr-6 w-min"
isFullWidth={false}
isLoading={isLoading}
>
Connect to Checkly
</Button>
</Card>
</div>
);
}
ChecklyCreateIntegrationPage.requireAuth = true;

141
frontend/src/pages/integrations/checkly/create.tsx Normal file
View File

@@ -0,0 +1,141 @@
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import queryString from 'query-string';
import { Button, Card, CardTitle, FormControl, Select, SelectItem } from '../../../components/v2';
import {
useGetIntegrationAuthApps,
useGetIntegrationAuthById
} from '../../../hooks/api/integrationAuth';
import { useGetWorkspaceById } from '../../../hooks/api/workspace';
import createIntegration from '../../api/integrations/createIntegration';
export default function ChecklyCreateIntegrationPage() {
const router = useRouter();
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 [targetApp, setTargetApp] = useState('');
const [targetAppId, setTargetAppId] = useState('');
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (workspace) {
setSelectedSourceEnvironment(workspace.environments[0].slug);
}
}, [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));
} else {
setTargetApp('none');
}
}
}, [integrationAuthApps]);
const handleButtonClick = async () => {
try {
if (!integrationAuth?._id) return;
setIsLoading(true);
await createIntegration({
integrationAuthId: integrationAuth?._id,
isActive: true,
app: targetApp,
appId: targetAppId,
sourceEnvironment: selectedSourceEnvironment,
targetEnvironment: null,
targetEnvironmentId: null,
targetService: null,
targetServiceId: null,
owner: null,
path: null,
region: null
});
setIsLoading(false);
router.push(`/integrations/${localStorage.getItem('projectData.id')}`);
} catch (err) {
console.error(err);
}
};
return integrationAuth &&
workspace &&
selectedSourceEnvironment &&
integrationAuthApps &&
targetApp ? (
<div className="flex h-full w-full items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
<Card className="max-w-lg rounded-md p-0 border border-mineshaft-600">
<CardTitle className="text-left px-6" subTitle="Choose which environment in Infisical you want to sync with your Checkly account.">Checkly Integration</CardTitle>
<FormControl label="Infisical Project Environment" className="mt-2 px-6">
<Select
value={selectedSourceEnvironment}
onValueChange={(val) => setSelectedSourceEnvironment(val)}
className="w-full border border-mineshaft-500"
>
{workspace?.environments.map((sourceEnvironment) => (
<SelectItem
value={sourceEnvironment.slug}
key={`source-environment-${sourceEnvironment.slug}`}
>
{sourceEnvironment.name}
</SelectItem>
))}
</Select>
</FormControl>
<FormControl label="Checkly Account" className="mt-4 px-6">
<Select
value={targetApp}
onValueChange={(val) => setTargetApp(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}`}
>
{integrationAuthApp.name}
</SelectItem>
))
) : (
<SelectItem value="none" key="target-app-none">
No apps found
</SelectItem>
)}
</Select>
</FormControl>
<Button
onClick={handleButtonClick}
color="mineshaft"
variant="outline_bg"
className="mt-2 mb-6 ml-auto mr-6"
isFullWidth={false}
isLoading={isLoading}
>
Create Integration
</Button>
</Card>
</div>
) : (
<div />
);
}
ChecklyCreateIntegrationPage.requireAuth = true;