Revise Northflank integration

2026-10-12 02:29:09 +00:00 · 2023-07-27 14:52:52 +07:00
parent bc9d6253be
commit 980a578bd5
12 changed files with 232 additions and 117 deletions
@@ -3,8 +3,8 @@ export {
  useGetIntegrationAuthApps,
  useGetIntegrationAuthBitBucketWorkspaces,
  useGetIntegrationAuthById,
+  useGetIntegrationAuthNorthflankSecretGroups,
  useGetIntegrationAuthRailwayEnvironments,
  useGetIntegrationAuthRailwayServices,
  useGetIntegrationAuthTeams,
-  useGetIntegrationAuthVercelBranches,
-} from "./queries";
+  useGetIntegrationAuthVercelBranches} from "./queries";
@@ -3,7 +3,15 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { apiRequest } from "@app/config/request";

 import { workspaceKeys } from "../workspace/queries";
-import { App, BitBucketWorkspace, Environment, IntegrationAuth, Service, Team } from "./types";
+import { 
+  App, 
+  BitBucketWorkspace, 
+  Environment, 
+  IntegrationAuth, 
+  NorthflankSecretGroup,
+  Service, 
+  Team 
+} from "./types";

 const integrationAuthKeys = {
  getIntegrationAuthById: (integrationAuthId: string) =>
@@ -19,7 +27,6 @@ const integrationAuthKeys = {
    integrationAuthId: string;
    appId: string;
  }) => [{ integrationAuthId, appId }, "integrationAuthVercelBranches"] as const,
-
  getIntegrationAuthRailwayEnvironments: ({
    integrationAuthId,
    appId
@@ -36,6 +43,13 @@ const integrationAuthKeys = {
  }) => [{ integrationAuthId, appId }, "integrationAuthRailwayServices"] as const,
  getIntegrationAuthBitBucketWorkspaces: (integrationAuthId: string) =>
    [{ integrationAuthId }, "integrationAuthBitbucketWorkspaces"] as const,
+  getIntegrationAuthNorthflankSecretGroups: ({
+    integrationAuthId,
+    appId
+  }: {
+    integrationAuthId: string;
+    appId: string;
+  }) => [{ integrationAuthId, appId }, "integrationAuthNorthflankSecretGroups"] as const, 
 };

 const fetchIntegrationAuthById = async (integrationAuthId: string) => {
@@ -148,6 +162,27 @@ const fetchIntegrationAuthBitBucketWorkspaces = async (integrationAuthId: string
  return workspaces;
 };

+const fetchIntegrationAuthNorthflankSecretGroups = async ({
+  integrationAuthId,
+  appId
+}: {
+  integrationAuthId: string;
+  appId: string;
+}) => {
+  const {
+    data: { secretGroups }
+  } = await apiRequest.get<{ secretGroups: NorthflankSecretGroup[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/northflank/secret-groups`,
+    {
+      params: {
+        appId
+      }
+    }
+  );
+
+  return secretGroups;
+};
+
 export const useGetIntegrationAuthById = (integrationAuthId: string) => {
  return useQuery({
    queryKey: integrationAuthKeys.getIntegrationAuthById(integrationAuthId),
@@ -256,6 +291,27 @@ export const useGetIntegrationAuthBitBucketWorkspaces = (integrationAuthId: stri
  });
 };

+export const useGetIntegrationAuthNorthflankSecretGroups = ({
+  integrationAuthId,
+  appId
+}: {
+  integrationAuthId: string;
+  appId: string;
+}) => {
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthNorthflankSecretGroups({
+      integrationAuthId,
+      appId
+    }),
+    queryFn: () =>
+      fetchIntegrationAuthNorthflankSecretGroups({
+        integrationAuthId,
+        appId
+      }),
+    enabled: true
+  });
+};
+
 export const useDeleteIntegrationAuth = () => {
  const queryClient = useQueryClient();

@@ -35,4 +35,9 @@ export type BitBucketWorkspace = {
  uuid: string;
  name: string;
  slug: string;
+}
+
+export type NorthflankSecretGroup = {
+  name: string;
+  groupId: string;
 }
@@ -4,7 +4,6 @@ interface Props {
  integrationAuthId: string;
  isActive: boolean;
  secretPath: string;
-  secretGroup?: string;
  app: string | null;
  appId: string | null;
  sourceEnvironment: string;
@@ -36,7 +35,6 @@ const createIntegration = ({
  path,
  region,
  secretPath,
-  secretGroup
 }: Props) =>
  SecurityClient.fetchCall("/api/v1/integration", {
    method: "POST",
@@ -57,7 +55,6 @@ const createIntegration = ({
      path,
      region,
      secretPath,
-      secretGroup
    })
  }).then(async (res) => {
    if (res && res.status === 200) {
@@ -13,7 +13,8 @@ import {
 } from "../../../components/v2";
 import {
  useGetIntegrationAuthApps,
-  useGetIntegrationAuthById
+  useGetIntegrationAuthById,
+  useGetIntegrationAuthNorthflankSecretGroups
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
 import createIntegration from "../../api/integrations/createIntegration";
@@ -21,6 +22,13 @@ import createIntegration from "../../api/integrations/createIntegration";
 export default function NorthflankCreateIntegrationPage() {
  const router = useRouter();

+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+  const [targetAppId, setTargetAppId] = useState("");
+  const [targetSecretGroupId, setTargetSecretGroupId] = useState<string | null>(null);
+
+  const [isLoading, setIsLoading] = useState(false);
+
  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);

  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
@@ -28,15 +36,11 @@ export default function NorthflankCreateIntegrationPage() {
  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
    integrationAuthId: (integrationAuthId as string) ?? ""
  });
-
-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
-  const [secretPath, setSecretPath] = useState("/");
-  const [targetApp, setTargetApp] = useState("");
-  const [secretGroupList, setSecretGroupList] = useState<any>([]);
-  const [targetSecretGroup, setTargetSecretGroup] = useState("");
-
-  const [isLoading, setIsLoading] = useState(false);
-
+  const { data: integrationAuthSecretGroups } = useGetIntegrationAuthNorthflankSecretGroups({
+    integrationAuthId: (integrationAuthId as string) ?? "",
+    appId: targetAppId
+  });
+  
  useEffect(() => {
    if (workspace) {
      setSelectedSourceEnvironment(workspace.environments[0].slug);
@@ -46,28 +50,28 @@ export default function NorthflankCreateIntegrationPage() {
  useEffect(() => {
    if (integrationAuthApps) {
      if (integrationAuthApps.length > 0) {
-        setTargetApp(integrationAuthApps[0].name);
+        // setTargetApp(integrationAuthApps[0].name);
+        setTargetAppId(integrationAuthApps[0].appId as string);
      } else {
-        setTargetApp("none");
+        // setTargetApp("none");
+        setTargetAppId("none");
      }
    }
  }, [integrationAuthApps]);
-
+  
  useEffect(() => {
-    if (integrationAuthApps) {
-      if (integrationAuthApps.length > 0) {
-        const selectedApp = integrationAuthApps?.filter((integrationAuthApp) => integrationAuthApp.name === targetApp);
-        if (selectedApp.length > 0 && selectedApp[0].secretGroups) {
-          setSecretGroupList(selectedApp[0].secretGroups);
-          setTargetSecretGroup(selectedApp[0]?.secretGroups[0]);
-        } else {
-          setSecretGroupList([]);
-          setTargetSecretGroup("none");
-        }
+    if (integrationAuthSecretGroups) {
+      if (integrationAuthSecretGroups.length > 0) {
+        // case: project has at least 1 secret group in Northflank
+        setTargetSecretGroupId(integrationAuthSecretGroups[0].groupId);
+      } else {
+        // case: project has no secret groups in Northflank
+        setTargetSecretGroupId("none");
      }
    }
-  }, [targetApp])
-
+      
+  }, [integrationAuthSecretGroups]);
+  
  const handleButtonClick = async () => {
    try {
      if (!integrationAuth?._id) return;
@@ -77,20 +81,19 @@ export default function NorthflankCreateIntegrationPage() {
      await createIntegration({
        integrationAuthId: integrationAuth?._id,
        isActive: true,
-        app: targetApp,
-        appId:
-          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
-            ?.appId ?? null,
+        app: integrationAuthApps?.find(
+            (integrationAuthApp) => integrationAuthApp.appId === targetAppId
+          )?.name ?? null,
+        appId: targetAppId,
        sourceEnvironment: selectedSourceEnvironment,
        targetEnvironment: null,
        targetEnvironmentId: null,
        targetService: null,
-        targetServiceId: null,
+        targetServiceId: targetSecretGroupId,
        owner: null,
        path: null,
        region: null,
-        secretPath,
-        secretGroup: targetSecretGroup
+        secretPath
      });

      setIsLoading(false);
@@ -100,12 +103,12 @@ export default function NorthflankCreateIntegrationPage() {
      console.error(err);
    }
  };
-
+  
  return integrationAuth &&
    workspace &&
    selectedSourceEnvironment &&
    integrationAuthApps &&
-    targetApp ? (
+    targetAppId ? (
    <div className="flex h-full w-full items-center justify-center">
      <Card className="max-w-md rounded-md p-8">
        <CardTitle className="text-center">Northflank Integration</CardTitle>
@@ -134,15 +137,15 @@ export default function NorthflankCreateIntegrationPage() {
        </FormControl>
        <FormControl label="Northflank Project" className="mt-4">
          <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}
+                  value={integrationAuthApp.appId as string}
                  key={`target-environment-${integrationAuthApp.name}`}
                >
                  {integrationAuthApp.name}
@@ -155,35 +158,37 @@ export default function NorthflankCreateIntegrationPage() {
            )}
          </Select>
        </FormControl>
-        <FormControl label="Secret Group" className="mt-4">
-          <Select
-            value={targetSecretGroup}
-            onValueChange={(val) => setTargetSecretGroup(val)}
-            className="w-full border border-mineshaft-500"
-            isDisabled={secretGroupList.length === 0}
-          >
-            {secretGroupList.length > 0 ? (
-              secretGroupList.map((group: any) => (
-                <SelectItem
-                  value={group}
-                  key={`target-secret-group-${group}`}
-                >
-                  {group}
+        {targetSecretGroupId && integrationAuthSecretGroups && (
+          <FormControl label="Secret Group" className="mt-4">
+            <Select
+              value={targetSecretGroupId}
+              onValueChange={(val) => setTargetSecretGroupId(val)}
+              className="w-full border border-mineshaft-500"
+              isDisabled={integrationAuthSecretGroups.length === 0}
+            >
+              {integrationAuthSecretGroups.length > 0 ? (
+                integrationAuthSecretGroups.map((secretGroup: any) => (
+                  <SelectItem
+                    value={secretGroup.groupId}
+                    key={`target-secret-group-${secretGroup.groupId}`}
+                  >
+                    {secretGroup.name}
+                  </SelectItem>
+                ))
+              ) : (
+                <SelectItem value="none" key="target-secret-group-none">
+                  No secret groups found
                </SelectItem>
-              ))
-            ) : (
-              <SelectItem value="none" key="target-secret-group-none">
-                No secret groups found
-              </SelectItem>
-            )}
-          </Select>
-        </FormControl>
+              )}
+            </Select>
+          </FormControl>
+        )}
        <Button
          onClick={handleButtonClick}
          color="mineshaft"
          className="mt-4"
          isLoading={isLoading}
-          isDisabled={secretGroupList.length === 0}
+          isDisabled={integrationAuthApps.length === 0 || integrationAuthSecretGroups?.length === 0}
        >
          Create Integration
        </Button>