Merge pull request #627 from Infisical/checkly-integration

Checkly integration

backend/src/integrations/apps.ts

@@ -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 };

backend/src/integrations/sync.ts

@@ -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 };

backend/src/models/integration.ts

@@ -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,
     },

backend/src/models/integrationAuth.ts

@@ -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;

backend/src/variables/integration.ts

@@ -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',

frontend/public/data/frequentConstants.ts

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

frontend/src/components/basic/buttons/Button.tsx

@@ -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',

frontend/src/components/integrations/CloudIntegration.tsx

@@ -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>

frontend/src/components/integrations/FrameworkIntegration.tsx

@@ -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`}
     >

frontend/src/components/integrations/Integration.tsx

@@ -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">
+          <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={faRotate} className="mr-2.5 animate-spin text-lg text-primary" />
+            <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>

frontend/src/components/integrations/IntegrationSection.tsx

@@ -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 (

frontend/src/components/v2/Select/Select.tsx

@@ -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}

frontend/src/pages/integrations/[id].tsx

@@ -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}

frontend/src/pages/integrations/checkly/authorize.tsx

@@ -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;

frontend/src/pages/integrations/checkly/create.tsx

@@ -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;