Checkly group level sync support

frontend/src/hooks/api/integrationAuth/index.tsx

@@ -10,5 +10,6 @@ export {
   useGetIntegrationAuthTeamCityBuildConfigs,
   useGetIntegrationAuthTeams,
   useGetIntegrationAuthVercelBranches,
-  useSaveIntegrationAccessToken
+  useSaveIntegrationAccessToken,
+  useGetIntegrationAuthGroups
 } from "./queries";

frontend/src/hooks/api/integrationAuth/queries.tsx

@@ -12,7 +12,8 @@ import {
   Org,
   Project,
   Service, 
-  Team, 
+  Team,
+  Group, 
   TeamCityBuildConfig} from "./types";
 
 const integrationAuthKeys = {
@@ -22,6 +23,8 @@ const integrationAuthKeys = {
     [{ integrationAuthId, teamId, workspaceSlug }, "integrationAuthApps"] as const,
   getIntegrationAuthTeams: (integrationAuthId: string) =>
     [{ integrationAuthId }, "integrationAuthTeams"] as const,
+  getIntegrationAuthGroups: (integrationAuthId: string) =>
+  [{ integrationAuthId }, "integrationAuthGroups"] as const,
   getIntegrationAuthVercelBranches: ({
     integrationAuthId,
     appId
@@ -125,6 +128,12 @@ const fetchIntegrationAuthTeams = async (integrationAuthId: string) => {
   return data.teams;
 };
 
+const fetchIntegrationAuthGroups = async (integrationAuthId: string) => {
+  const { data } = await apiRequest.get<{ groups: Group[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/groups`
+  );
+  return data.groups;
+};
 
 const fetchIntegrationAuthVercelBranches = async ({
   integrationAuthId,
@@ -413,6 +422,14 @@ export const useGetIntegrationAuthVercelBranches = ({
   });
 };
 
+export const useGetIntegrationAuthGroups = (integrationAuthId: string) => {
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthGroups(integrationAuthId),
+    queryFn: () => fetchIntegrationAuthGroups(integrationAuthId),
+    enabled: true
+  });
+};
+
 export const useGetIntegrationAuthQoveryOrgs = (integrationAuthId: string) => {
   return useQuery({
     queryKey: integrationAuthKeys.getIntegrationAuthQoveryOrgs(integrationAuthId),

frontend/src/hooks/api/integrationAuth/types.ts

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

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

@@ -9,6 +9,8 @@ import { motion } from "framer-motion";
 import queryString from "query-string";
 
 import {
+  Alert,
+  AlertDescription,
   Button,
   Card,
   CardTitle,
@@ -27,7 +29,8 @@ import {
 
 import {
   useGetIntegrationAuthApps,
-  useGetIntegrationAuthById
+  useGetIntegrationAuthById,
+  useGetIntegrationAuthGroups
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
 
@@ -47,6 +50,9 @@ export default function ChecklyCreateIntegrationPage() {
   const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
+  const { data: integrationAuthGroups, isLoading: isintegrationAuthGroupsLoading } = useGetIntegrationAuthGroups(
+    (integrationAuthId as string) ?? ""
+  );
 
   const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
   const [secretPath, setSecretPath] = useState("/");
@@ -55,6 +61,9 @@ export default function ChecklyCreateIntegrationPage() {
   const [targetApp, setTargetApp] = useState("");
   const [targetAppId, setTargetAppId] = useState("");
 
+  const [targetGroup, setTargetGroup] = useState("");
+  const [targetGroupId, setTargetGroupId] = useState("");
+
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
@@ -104,9 +113,10 @@ export default function ChecklyCreateIntegrationPage() {
   return integrationAuth &&
     workspace &&
     selectedSourceEnvironment &&
-    integrationAuthApps &&
+    integrationAuthApps && 
+    integrationAuthGroups &&
     targetApp ? (
-    <div className="flex flex-col h-full w-full items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
+    <div className="flex 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' />
@@ -175,6 +185,36 @@ export default function ChecklyCreateIntegrationPage() {
                   placeholder="Provide a path, default is /"
                 />
               </FormControl>
+              <FormControl label="Checkly Group">
+                <Select
+                  value={targetGroup}
+                  onValueChange={(val) => setTargetGroup(val)}
+                  className="w-full border border-mineshaft-500"
+                >
+                  <SelectItem value="">
+                    Select an option
+                  </SelectItem>
+                  {integrationAuthGroups.length > 0 ? (
+                    integrationAuthGroups.map((integrationAuthGroup) => (
+                      <SelectItem
+                        value={integrationAuthGroup.name}
+                        key={`target-group-${integrationAuthGroup.name}`}
+                      >
+                        {integrationAuthGroup.name}
+                      </SelectItem>
+                    ))
+                  ) : (
+                    <SelectItem value="none" key="target-group-none" disabled>
+                      No groups found
+                    </SelectItem>
+                  )}
+                </Select>
+              </FormControl>
+              <Alert className="mb-5" hideTitle="true">
+                <AlertDescription>
+                  By default environment variables are synced to the global level, select a group above to sync at the Group level.
+                </AlertDescription>
+              </Alert>
               <FormControl label="Checkly Account">
                 <Select
                   value={targetApp}
@@ -242,7 +282,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