Update Checkly groups integration

backend/src/controllers/v1/integrationAuthController.ts

@@ -1,7 +1,7 @@
 import { Request, Response } from "express";
 import { Types } from "mongoose";
 import { standardRequest } from "../../config/request";
-import { getApps, getTeams, getGroups, revokeAccess } from "../../integrations";
+import { getApps, getTeams, revokeAccess } from "../../integrations";
 import { Bot, IntegrationAuth, Workspace } from "../../models";
 import { EventType } from "../../ee/models";
 import { IntegrationService } from "../../services";
@@ -10,6 +10,7 @@ import {
   ALGORITHM_AES_256_GCM,
   ENCODING_SCHEME_UTF8,
   INTEGRATION_BITBUCKET_API_URL,
+  INTEGRATION_CHECKLY_API_URL,
   INTEGRATION_GCP_SECRET_MANAGER,
   INTEGRATION_NORTHFLANK_API_URL,
   INTEGRATION_QOVERY_API_URL,
@@ -207,40 +208,6 @@ export const saveIntegrationToken = async (req: Request, res: Response) => {
   });
 };
 
-/**
- * Return list of groups allowed for integration with integration authorization id [integrationAuthId]
- * @param req
- * @param res
- * @returns
- */
-export const getIntegrationAuthGroups = async (req: Request, res: Response) => {
-  const {
-    params: { integrationAuthId }
-  } = await validateRequest(reqValidator.GetIntegrationAuthGroupsV1, req);
-
-  const { integrationAuth, accessToken } = await getIntegrationAuthAccessHelper({
-    integrationAuthId: new ObjectId(integrationAuthId)
-  });
-
-  const { permission } = await getUserProjectPermissions(
-    req.user._id,
-    integrationAuth.workspace.toString()
-  );
-  ForbiddenError.from(permission).throwUnlessCan(
-    ProjectPermissionActions.Read,
-    ProjectPermissionSub.Integrations
-  );
-
-  const groups = await getGroups({
-    integrationAuth: integrationAuth,
-    accessToken: accessToken
-  });
-
-  return res.status(200).send({
-    groups
-  });
-};
-
 /**
  * Return list of applications allowed for integration with integration authorization id [integrationAuthId]
  * @param req
@@ -378,6 +345,59 @@ export const getIntegrationAuthVercelBranches = async (req: Request, res: Respon
   });
 };
 
+/**
+ * Return list of Checkly groups for a specific user
+ * @param req
+ * @param res
+ */
+export const getIntegrationAuthChecklyGroups = async (req: Request, res: Response) => {
+  const {
+    params: { integrationAuthId },
+    query: { accountId }
+  } = await validateRequest(reqValidator.GetIntegrationAuthChecklyGroupsV1, req);
+  
+  const { integrationAuth, accessToken } = await getIntegrationAuthAccessHelper({
+    integrationAuthId: new Types.ObjectId(integrationAuthId)
+  });
+
+  const { permission } = await getUserProjectPermissions(
+    req.user._id,
+    integrationAuth.workspace.toString()
+  );
+  ForbiddenError.from(permission).throwUnlessCan(
+    ProjectPermissionActions.Read,
+    ProjectPermissionSub.Integrations
+  );
+
+  interface ChecklyGroup {
+    id: number;
+    name: string;
+  }
+  
+  if (accountId && accountId !== "") {
+    const { data }: { data: ChecklyGroup[] } = (
+      await standardRequest.get(`${INTEGRATION_CHECKLY_API_URL}/v1/check-groups`, {
+          headers: {
+              Authorization: `Bearer ${accessToken}`,
+              Accept: "application/json",
+              "X-Checkly-Account": accountId
+          }
+      })
+    );
+    
+    return res.status(200).send({
+      groups: data.map((g: ChecklyGroup) => ({
+        name: g.name,
+        groupId: g.id,
+      }))
+    });
+  }
+
+  return res.status(200).send({
+    groups: []
+  });
+}
+
 /**
  * Return list of Qovery Orgs for a specific user
  * @param req

backend/src/integrations/apps.ts

@@ -911,7 +911,7 @@ const getAppsSupabase = async ({ accessToken }: { accessToken: string }) => {
 };
 
 /**
- * Return list of projects for the Checkly integration
+ * Return list of accounts for the Checkly integration
  * @param {Object} obj
  * @param {String} obj.accessToken - api key for the Checkly API
  * @returns {Object[]} apps - Сheckly accounts

backend/src/integrations/groups.ts

@@ -1,96 +0,0 @@
-import {
-    IIntegrationAuth,
-} from "../models";
-import {
-    INTEGRATION_CHECKLY,
-    INTEGRATION_CHECKLY_API_URL,
-} from "../variables";
-import { standardRequest } from "../config/request";
-
-interface Group {
-    name: string;
-    groupId: string;
-}
-
-/**
- * Return list of groups for checkly integration authorization [integrationAuth]
- * @param {Object} obj
- * @param {String} obj.integrationAuth - integration authorization to get groups
- * @param {String} obj.accessToken - access token for integration authorization
- * @returns {Object[]} groups - groups for integration authorization
- * @returns {String} groups.name - name of group
- * @returns {String} groups.groupId - id of group
-*/
-const getGroups = async ({
-    integrationAuth,
-    accessToken,
-}: {
-    integrationAuth: IIntegrationAuth;
-    accessToken: string;
-}) => {
-    
-    let groups: Group[] = [];
-
-    switch (integrationAuth.integration) {
-        case INTEGRATION_CHECKLY:
-            groups = await getGroupsCheckly({
-                accessToken,
-            });
-            break;
-    }
-    
-    return groups;
-}
-
-/**
- * Return list of groups for Checkly integration
- * @param {Object} obj
- * @param {String} obj.accessToken - access token for Checkly API
- * @returns {Object[]} groups - list of groups in Checkly
- * @returns {String} groups.name - name of group
- * @returns {String} groups.groupId - id of group
-*/
-const getGroupsCheckly = async ({
-    accessToken,
-}: {
-    accessToken: string;
-}) => {
-    
-    let groups: Group[] = [];
-
-      // case: fetch account id
-    const { data } = await standardRequest.get(`${INTEGRATION_CHECKLY_API_URL}/v1/accounts`, {
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-          Accept: "application/json"
-        }
-    });
-
-    const accountId = data.map((a: any) => {
-        return {
-          id: a.id,
-        };
-    });
-
-      // case: fetch list of groups in Checkly
-    const res = accountId.length > 0 && (
-        await standardRequest.get(`${INTEGRATION_CHECKLY_API_URL}/v1/check-groups`, {
-            headers: {
-                Authorization: `Bearer ${accessToken}`,
-                Accept: "application/json",
-                "X-Checkly-Account": accountId[0].id,
-            }
-        })
-    ).data;
-
-    groups = res.map((g: any) => ({
-      name: g.name,
-      groupId: g.id,
-    }));
-    
-    return groups;
-}
-
-export {
-    getGroups,
-}

backend/src/integrations/index.ts

@@ -2,7 +2,6 @@ import { exchangeCode } from "./exchange";
 import { exchangeRefresh } from "./refresh";
 import { getApps } from "./apps";
 import { getTeams } from "./teams";
-import { getGroups } from "./groups";
 import { revokeAccess } from "./revoke";
 
 export {
@@ -10,6 +9,5 @@ export {
     exchangeRefresh,
     getApps,
     getTeams,
-    getGroups,
     revokeAccess,
 }

backend/src/integrations/sync.ts

@@ -2104,7 +2104,7 @@ const syncSecretsSupabase = async ({
 };
 
 /**
- * Sync/push [secrets] to Checkly app
+ * Sync/push [secrets] to Checkly app/group
  * @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)
@@ -2123,6 +2123,8 @@ const syncSecretsCheckly = async ({
 }) => {
 
   if (integration.targetServiceId) {
+    // sync secrets to checkly group envars
+
     let getGroupSecretsRes = (
       await standardRequest.get(`${INTEGRATION_CHECKLY_API_URL}/v1/check-groups/${integration.targetServiceId}`, {
         headers: {
@@ -2162,48 +2164,22 @@ const syncSecretsCheckly = async ({
       value: secrets[key].value
     }));
 
-    // add secrets
+    await standardRequest.put(
-    for await (const key of Object.keys(secrets)) {
+      `${INTEGRATION_CHECKLY_API_URL}/v1/check-groups/${integration.targetServiceId}`,
-      
+      {
-      if (!(key in getGroupSecretsRes)) {
+        environmentVariables: groupEnvironmentVariables
-        // case: secret does not exist in checkly group
+      },
-        // -> add secret
+      {
-
+        headers: {
-        await standardRequest.put(
+          Authorization: `Bearer ${accessToken}`,
-          `${INTEGRATION_CHECKLY_API_URL}/v1/check-groups/${integration.targetServiceId}`,
+          Accept: "application/json",
-          {
+          "X-Checkly-Account": integration.appId
-            environmentVariables: groupEnvironmentVariables
-          },
-          {
-            headers: {
-              Authorization: `Bearer ${accessToken}`,
-              Accept: "application/json",
-              "X-Checkly-Account": integration.appId
-            }
-          }
-        );
-      } else {
-        // case: secret exists in checkly group
-        // -> update/set secret
-  
-        if (secrets[key] !== getGroupSecretsRes[key]) {
-          await standardRequest.put(
-            `${INTEGRATION_CHECKLY_API_URL}/v1/check-groups/${integration.targetServiceId}`,
-            {
-              environmentVariables: groupEnvironmentVariables
-            },
-            {
-              headers: {
-                Authorization: `Bearer ${accessToken}`,
-                Accept: "application/json",
-                "X-Checkly-Account": integration.appId
-              }
-            }
-          );
         }
       }
-    }
+    );
   } else {
+    // sync secrets to checkly global envars
+    
     let getSecretsRes = (
       await standardRequest.get(`${INTEGRATION_CHECKLY_API_URL}/v1/variables`, {
         headers: {

backend/src/routes/v1/integrationAuth.ts

@@ -52,14 +52,6 @@ router.get(
   integrationAuthController.getIntegrationAuthTeams
 );
 
-router.get(
-  "/:integrationAuthId/groups",
-  requireAuth({
-    acceptedAuthModes: [AuthMode.JWT]
-  }),
-  integrationAuthController.getIntegrationAuthGroups
-);
-
 router.get(
   "/:integrationAuthId/vercel/branches",
   requireAuth({
@@ -68,6 +60,14 @@ router.get(
   integrationAuthController.getIntegrationAuthVercelBranches
 );
 
+router.get(
+  "/:integrationAuthId/checkly/groups",
+  requireAuth({
+    acceptedAuthModes: [AuthMode.JWT]
+  }),
+  integrationAuthController.getIntegrationAuthChecklyGroups
+);
+
 router.get(
   "/:integrationAuthId/qovery/orgs",
   requireAuth({

backend/src/services/RedisService.ts

@@ -1,11 +1,12 @@
 import Redis, { Redis as TRedis } from "ioredis";
+import { logger } from "../utils/logging";
 
 let redisClient: TRedis | null;
 
 if (process.env.REDIS_URL) {
   redisClient = new Redis(process.env.REDIS_URL as string);
 } else {
-  console.warn("Redis URL not set, skipping Redis initialization.");
+  logger.warn("Redis URL not set, skipping Redis initialization.");
   redisClient = null;
 }
 

backend/src/utils/setup/index.ts

@@ -11,7 +11,6 @@ import {
   backfillBots,
   backfillEncryptionMetadata,
   backfillIntegration,
-  backfillPermission,
   backfillSecretBlindIndexData,
   backfillSecretFolders,
   backfillSecretVersions,
@@ -28,6 +27,7 @@ import {
 } from "./reencryptData";
 import { getMongoURL, getNodeEnv, getRedisUrl, getSentryDSN } from "../../config";
 import { initializePassport } from "../auth";
+import { logger } from "../logging";
 
 /**
  * Prepare Infisical upon startup. This includes tasks like:
@@ -41,7 +41,7 @@ import { initializePassport } from "../auth";
  */
 export const setup = async () => {
   if ((await getRedisUrl()) === undefined || (await getRedisUrl()) === "") {
-    console.error(
+    logger.error(
       "WARNING: Redis is not yet configured. Infisical may not function as expected without it."
     );
   }

backend/src/validation/integrationAuth.ts

@@ -117,9 +117,12 @@ export const GetIntegrationAuthVercelBranchesV1 = z.object({
   })
 });
 
-export const GetIntegrationAuthGroupsV1 = z.object({
+export const GetIntegrationAuthChecklyGroupsV1 = z.object({
   params: z.object({
     integrationAuthId: z.string().trim()
+  }),
+  query: z.object({
+    accountId: z.string().trim()
   })
 });
 

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

@@ -4,12 +4,12 @@ export {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthBitBucketWorkspaces,
   useGetIntegrationAuthById,
+  useGetIntegrationAuthChecklyGroups,
   useGetIntegrationAuthNorthflankSecretGroups,
   useGetIntegrationAuthRailwayEnvironments,
   useGetIntegrationAuthRailwayServices,
   useGetIntegrationAuthTeamCityBuildConfigs,
   useGetIntegrationAuthTeams,
   useGetIntegrationAuthVercelBranches,
-  useSaveIntegrationAccessToken,
+  useSaveIntegrationAccessToken
-  useGetIntegrationAuthGroups
+} from "./queries";
-} from "./queries";

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

@@ -6,6 +6,7 @@ import { workspaceKeys } from "../workspace/queries";
 import { 
   App, 
   BitBucketWorkspace, 
+  ChecklyGroup, 
   Environment, 
   IntegrationAuth, 
   NorthflankSecretGroup,
@@ -13,8 +14,8 @@ import {
   Project,
   Service, 
   Team,
-  Group, 
+  TeamCityBuildConfig
-  TeamCityBuildConfig} from "./types";
+} from "./types";
 
 const integrationAuthKeys = {
   getIntegrationAuthById: (integrationAuthId: string) =>
@@ -23,8 +24,6 @@ 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
@@ -32,6 +31,14 @@ const integrationAuthKeys = {
     integrationAuthId: string;
     appId: string;
   }) => [{ integrationAuthId, appId }, "integrationAuthVercelBranches"] as const,
+  getIntegrationAuthChecklyGroups: ({
+    integrationAuthId,
+    accountId
+  }: {
+    integrationAuthId: string;
+    accountId: string;
+  }) => 
+  [{ integrationAuthId, accountId }, "integrationAuthChecklyGroups"] as const,
   getIntegrationAuthQoveryOrgs: (integrationAuthId: string) => 
   [{ integrationAuthId }, "integrationAuthQoveryOrgs"] as const,
   getIntegrationAuthQoveryProjects: ({
@@ -128,10 +135,22 @@ const fetchIntegrationAuthTeams = async (integrationAuthId: string) => {
   return data.teams;
 };
 
-const fetchIntegrationAuthGroups = async (integrationAuthId: string) => {
+const fetchIntegrationAuthChecklyGroups = async ({
-  const { data } = await apiRequest.get<{ groups: Group[] }>(
+  integrationAuthId,
-    `/api/v1/integration-auth/${integrationAuthId}/groups`
+  accountId
+}: {
+  integrationAuthId: string;
+  accountId: string;
+}) => {
+  const { data } = await apiRequest.get<{ groups: ChecklyGroup[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/checkly/groups`,
+    {
+      params: {
+        accountId
+      }
+    }
   );
+
   return data.groups;
 };
 
@@ -422,10 +441,22 @@ export const useGetIntegrationAuthVercelBranches = ({
   });
 };
 
-export const useGetIntegrationAuthGroups = (integrationAuthId: string) => {
+export const useGetIntegrationAuthChecklyGroups = ({
+  integrationAuthId,
+  accountId
+}: {
+  integrationAuthId: string;
+  accountId: string;
+}) => {
   return useQuery({
-    queryKey: integrationAuthKeys.getIntegrationAuthGroups(integrationAuthId),
+    queryKey: integrationAuthKeys.getIntegrationAuthChecklyGroups({
-    queryFn: () => fetchIntegrationAuthGroups(integrationAuthId),
+      integrationAuthId,
+      accountId
+    }),
+    queryFn: () => fetchIntegrationAuthChecklyGroups({
+      integrationAuthId,
+      accountId
+    }),
     enabled: true
   });
 };

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

@@ -26,9 +26,9 @@ export type Environment = {
   environmentId: string;
 };
 
-export type Group = {
+export type ChecklyGroup = {
   name: string;
-  groupId: string;
+  groupId: number;
 };
 
 export type Container = {

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

@@ -9,8 +9,6 @@ import { motion } from "framer-motion";
 import queryString from "query-string";
 
 import {
-  Alert,
-  AlertDescription,
   Button,
   Card,
   CardTitle,
@@ -30,7 +28,7 @@ import {
 import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById,
-  useGetIntegrationAuthGroups
+  useGetIntegrationAuthChecklyGroups
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
 
@@ -45,26 +43,24 @@ export default function ChecklyCreateIntegrationPage() {
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+  const [secretSuffix, setSecretSuffix] = useState("");
+
+  const [targetAppId, setTargetAppId] = useState("");
+  const [targetGroupId, setTargetGroupId] = useState("");
+
+  const [isLoading, setIsLoading] = useState(false);
+
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
   const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
-  const { data: integrationAuthGroups, isLoading: isintegrationAuthGroupsLoading } = useGetIntegrationAuthGroups(
+  const { data: integrationAuthGroups, isLoading: isintegrationAuthGroupsLoading } = useGetIntegrationAuthChecklyGroups({
-    (integrationAuthId as string) ?? ""
+    integrationAuthId: (integrationAuthId as string) ?? "",
-  );
+    accountId: targetAppId
-
+  });
-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
-  const [secretPath, setSecretPath] = useState("/");
-  const [secretSuffix, setSecretSuffix] = useState("");
-
-  const [targetApp, setTargetApp] = useState("");
-  const [targetAppId, setTargetAppId] = useState("");
-
-  const [targetGroup, setTargetGroup] = useState("");
-  const [targetGroupId, setTargetGroupId] = useState("");
-
-  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     if (workspace) {
@@ -73,41 +69,38 @@ export default function ChecklyCreateIntegrationPage() {
   }, [workspace]);
 
   useEffect(() => {
-    // TODO: handle case where apps can be empty
     if (integrationAuthApps) {
       if (integrationAuthApps.length > 0) {
-        setTargetApp(integrationAuthApps[0].name);
+        setTargetAppId(integrationAuthApps[0].appId as string);
-        setTargetAppId(String(integrationAuthApps[0].appId));
       } else {
-        setTargetApp("none");
+        setTargetAppId("none");
       }
     }
   }, [integrationAuthApps]);
 
-  const handleValueChange = (val) => {
-    const selectedGroup = integrationAuthGroups.find(group => group.name === val);
-      if (selectedGroup) {
-        setTargetGroupId(selectedGroup.groupId);
-      } else {
-        setTargetGroupId("");
-      }
-      setTargetGroup(val);
-  }
-
   const handleButtonClick = async () => {
     try {
       if (!integrationAuth?._id) return;
 
       setIsLoading(true);
 
+      const targetApp = integrationAuthApps?.find(
+        (integrationAuthApp) => integrationAuthApp.appId === targetAppId
+      );
+      const targetGroup = integrationAuthGroups?.find(
+        (group) => group.groupId === Number(targetGroupId)
+      );
+      
+      if (!targetApp) return;
+      
       await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
-        app: targetApp,
+        app: targetApp?.name,
-        appId: targetAppId,
+        appId: targetApp?.appId,
         sourceEnvironment: selectedSourceEnvironment,
-        targetService: targetGroup,
+        targetService: targetGroup?.name,
-        targetServiceId: targetGroupId.toString(),
+        targetServiceId: String(targetGroup?.groupId),
         secretPath,
         metadata: {
           secretSuffix
@@ -127,7 +120,7 @@ export default function ChecklyCreateIntegrationPage() {
     selectedSourceEnvironment &&
     integrationAuthApps && 
     integrationAuthGroups &&
-    targetApp ? (
+    targetAppId ? (
     <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>
@@ -197,48 +190,18 @@ export default function ChecklyCreateIntegrationPage() {
                   placeholder="Provide a path, default is /"
                 />
               </FormControl>
-              <FormControl label="Checkly Group">
-                <Select
-                  value={targetGroup}
-                  onValueChange={handleValueChange}
-                  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}
+                  value={targetAppId}
-                  onValueChange={(val) => setTargetApp(val)}
+                  onValueChange={(val) => setTargetAppId(val)}
                   className="w-full border border-mineshaft-500"
                   isDisabled={integrationAuthApps.length === 0}
                 >
                   {integrationAuthApps.length > 0 ? (
                     integrationAuthApps.map((integrationAuthApp) => (
                       <SelectItem
-                        value={integrationAuthApp.name}
+                        value={integrationAuthApp.appId as string}
-                        key={`target-app-${integrationAuthApp.name}`}
+                        key={`target-app-${integrationAuthApp.appId as string}`}
                       >
                         {integrationAuthApp.name}
                       </SelectItem>
@@ -250,6 +213,28 @@ export default function ChecklyCreateIntegrationPage() {
                   )}
                 </Select>
               </FormControl>
+              <FormControl label="Checkly Group (Optional)">
+                <Select
+                  value={targetGroupId}
+                  onValueChange={(val) => setTargetGroupId(val)}
+                  className="w-full border border-mineshaft-500"
+                >
+                  {integrationAuthGroups.length > 0 ? (
+                    integrationAuthGroups.map((integrationAuthGroup) => (
+                      <SelectItem
+                        value={String(integrationAuthGroup.groupId)}
+                        key={`target-group-${String(integrationAuthGroup.groupId)}`}
+                      >
+                        {integrationAuthGroup.name}
+                      </SelectItem>
+                    ))
+                  ) : (
+                    <SelectItem value="none" key="target-group-none">
+                      No groups found
+                    </SelectItem>
+                  )}
+                </Select>
+              </FormControl>
             </motion.div>
           </TabPanel>
           <TabPanel value={TabSections.Options}>