Update Checkly groups integration

2026-09-22 13:39:35 +00:00 · 2023-11-02 09:37:36 +02:00
parent f256493cb3
commit 58ff6a43bc
13 changed files with 190 additions and 272 deletions
--- a/frontend/src/hooks/api/integrationAuth/index.tsx
+++ b/frontend/src/hooks/api/integrationAuth/index.tsx
@@ -4,12 +4,12 @@ export {
  useGetIntegrationAuthApps,
  useGetIntegrationAuthBitBucketWorkspaces,
  useGetIntegrationAuthById,
+  useGetIntegrationAuthChecklyGroups,
  useGetIntegrationAuthNorthflankSecretGroups,
  useGetIntegrationAuthRailwayEnvironments,
  useGetIntegrationAuthRailwayServices,
  useGetIntegrationAuthTeamCityBuildConfigs,
  useGetIntegrationAuthTeams,
  useGetIntegrationAuthVercelBranches,
-  useSaveIntegrationAccessToken,
-  useGetIntegrationAuthGroups
-} from "./queries";
+  useSaveIntegrationAccessToken
+} from "./queries";
--- a/frontend/src/hooks/api/integrationAuth/queries.tsx
+++ b/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} from "./types";
+  TeamCityBuildConfig
+} 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 { data } = await apiRequest.get<{ groups: Group[] }>(
-    `/api/v1/integration-auth/${integrationAuthId}/groups`
+const fetchIntegrationAuthChecklyGroups = async ({
+  integrationAuthId,
+  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),
-    queryFn: () => fetchIntegrationAuthGroups(integrationAuthId),
+    queryKey: integrationAuthKeys.getIntegrationAuthChecklyGroups({
+      integrationAuthId,
+      accountId
+    }),
+    queryFn: () => fetchIntegrationAuthChecklyGroups({
+      integrationAuthId,
+      accountId
+    }),
    enabled: true
  });
 };
--- a/frontend/src/hooks/api/integrationAuth/types.ts
+++ b/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 = {
--- a/frontend/src/pages/integrations/checkly/create.tsx
+++ b/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(
-    (integrationAuthId as string) ?? ""
-  );
-
-  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);
+  const { data: integrationAuthGroups, isLoading: isintegrationAuthGroupsLoading } = useGetIntegrationAuthChecklyGroups({
+    integrationAuthId: (integrationAuthId as string) ?? "",
+    accountId: targetAppId
+  });

  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(String(integrationAuthApps[0].appId));
+        setTargetAppId(integrationAuthApps[0].appId as string);
      } 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,
-        appId: targetAppId,
+        app: targetApp?.name,
+        appId: targetApp?.appId,
        sourceEnvironment: selectedSourceEnvironment,
-        targetService: targetGroup,
-        targetServiceId: targetGroupId.toString(),
+        targetService: targetGroup?.name,
+        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}
-                  onValueChange={(val) => setTargetApp(val)}
+                  value={targetAppId}
+                  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}
-                        key={`target-app-${integrationAuthApp.name}`}
+                        value={integrationAuthApp.appId as string}
+                        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}>