integration with checkly done

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;