Update checkly integration docs

docs/integrations/cloud/checkly.mdx

@@ -34,6 +34,13 @@ Press on the Checkly tile and input your Checkly API Key to grant Infisical acce
 Select which Infisical environment secrets you want to sync to Checkly and press create integration to start syncing secrets.
 
 ![integrations checkly](../../images/integrations/checkly/integrations-checkly-create.png)
+
+<Note>
+  Infisical integrates with Checkly's environment variables at the **global** and **group** levels.
+  
+  To sync secrets to a specific group, you can select a group from the Checkly Group dropdown; otherwise, leaving it empty will sync secrets globally.
+</Note>
+
 ![integrations checkly](../../images/integrations/checkly/integrations-checkly.png)
 
 <Info>

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

@@ -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";
@@ -121,7 +121,7 @@ export default function ChecklyCreateIntegrationPage() {
     integrationAuthApps && 
     integrationAuthGroups &&
     targetAppId ? (
-    <div className="flex flex-col w-full py-6 items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
+    <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' />
@@ -266,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">

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -163,12 +163,22 @@ export const IntegrationsSection = ({
                   </div>
                 )}
                 {((integration.integration === "checkly") || (integration.integration === "github")) && (
-                  <div className="ml-2 flex flex-col">
+                  <>
+                    {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 className="flex cursor-default items-center">