Merge branch 'main' of https://github.com/Infisical/infisical into feat/chef-data-bag-app-connection-secret-sync

2026-10-20 21:18:18 +00:00 · 2025-11-01 03:09:48 +05:30
parent 3f1607d5aa 7d8b28367e
commit b531e4ed5e
145 changed files with 4657 additions and 1490 deletions
@@ -37,6 +37,7 @@ import { LdapConnectionForm } from "./LdapConnectionForm";
 import { MsSqlConnectionForm } from "./MsSqlConnectionForm";
 import { MySqlConnectionForm } from "./MySqlConnectionForm";
 import { NetlifyConnectionForm } from "./NetlifyConnectionForm";
+import { NorthflankConnectionForm } from "./NorthflankConnectionForm";
 import { OCIConnectionForm } from "./OCIConnectionForm";
 import { OktaConnectionForm } from "./OktaConnectionForm";
 import { OracleDBConnectionForm } from "./OracleDBConnectionForm";
@@ -172,6 +173,8 @@ const CreateForm = ({ app, onComplete, projectId }: CreateFormProps) => {
      return <DigitalOceanConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Netlify:
      return <NetlifyConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.Northflank:
+      return <NorthflankConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Okta:
      return <OktaConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Redis:
@@ -335,6 +338,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
      return <SupabaseConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.DigitalOcean:
      return <DigitalOceanConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.Northflank:
+      return <NorthflankConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.Okta:
      return <OktaConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.Redis:
@@ -0,0 +1,135 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import {
+  Button,
+  FormControl,
+  ModalClose,
+  SecretInput,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import {
+  NorthflankConnectionMethod,
+  TNorthflankConnection
+} from "@app/hooks/api/appConnections/types/northflank-connection";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TNorthflankConnection;
+  onSubmit: (formData: FormData) => void;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.Northflank)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(NorthflankConnectionMethod.ApiToken),
+    credentials: z.object({
+      apiToken: z.string().trim().min(1, "API Token required")
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const NorthflankConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.Northflank,
+      method: NorthflankConnectionMethod.ApiToken
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {!isUpdate && <GenericAppConnectionsFields />}
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.Northflank].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Method"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(NorthflankConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.apiToken"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="API Token"
+            >
+              <SecretInput
+                containerClassName="text-gray-400 group-focus-within:border-primary-400/50! border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+              />
+            </FormControl>
+          )}
+        />
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Connect to Northflank"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
@@ -72,6 +72,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {

          return (
            <button
+              key={option.app}
              type="button"
              onClick={() =>
                enterprise && !subscription.enterpriseAppConnections
@@ -5,11 +5,12 @@ import {
  faEdit,
  faEllipsisV,
  faRightToBracket,
+  faRotate,
  faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { formatDistance } from "date-fns";
-import { FolderIcon, PackageOpenIcon, RefreshCwIcon } from "lucide-react";
+import { FolderIcon, PackageOpenIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";

 import { createNotification } from "@app/components/notifications";
@@ -101,10 +102,16 @@ export const PamAccountRow = ({
              </Badge>
            )}
            {account.lastRotatedAt && (
-              <Badge variant="info">
-                <RefreshCwIcon />
-                <span>Rotated {formatDistance(new Date(), account.lastRotatedAt)} ago</span>
-              </Badge>
+              <Tooltip
+                className="max-w-sm text-center"
+                isDisabled={!account.lastRotationMessage}
+                content={account.lastRotationMessage}
+              >
+                <Badge variant={account.rotationStatus === "failed" ? "danger" : "success"}>
+                  <FontAwesomeIcon icon={faRotate} />
+                  <span>Rotated {formatDistance(new Date(), account.lastRotatedAt)} ago</span>
+                </Badge>
+              </Tooltip>
            )}
          </div>
        </div>
@@ -0,0 +1,213 @@
+import { VaultMount } from "./VaultPolicyImportModal.utils";
+
+export type PolicyBlock = {
+  id: string;
+  path: string;
+  capabilities: string[];
+  rawText: string;
+  startLine: number;
+  endLine: number;
+  canTranslate: boolean;
+  reason?: string;
+};
+
+export type PolicyLine = {
+  id: string;
+  text: string;
+  lineNumber: number;
+  type: "comment" | "empty" | "part-of-block" | "other";
+  belongsToBlock?: string;
+};
+
+const hasTranslatableCapabilities = (capabilities: string[], isMetadataPath: boolean): boolean => {
+  if (isMetadataPath) {
+    // For metadata/folder paths, only these capabilities create permissions
+    return capabilities.some((cap) =>
+      ["create", "update", "patch", "delete"].includes(cap.toLowerCase())
+    );
+  }
+  // For data/secret paths, all these capabilities create permissions
+  return capabilities.some((cap) =>
+    ["create", "list", "read", "update", "patch", "delete"].includes(cap.toLowerCase())
+  );
+};
+
+const canTranslateBlock = (
+  path: string,
+  capabilities: string[],
+  mounts: VaultMount[]
+): { canTranslate: boolean; reason?: string } => {
+  if (path === "*" || path === "+") {
+    return { canTranslate: true };
+  }
+
+  const isWildcardMount = path.startsWith("*/") || path.startsWith("+/");
+  if (isWildcardMount) {
+    // Check if it's a metadata path
+    const isMetadata = path.includes("/metadata/");
+    if (!hasTranslatableCapabilities(capabilities, isMetadata)) {
+      return {
+        canTranslate: false,
+        reason: isMetadata
+          ? "Cannot translate list/read capabilities for metadata (Infisical only supports translation for create, update, delete)"
+          : "No translatable capabilities found"
+      };
+    }
+    return { canTranslate: true };
+  }
+
+  // Check for common non-KV system paths
+  if (path.startsWith("auth/")) {
+    return {
+      canTranslate: false,
+      reason: "Authentication paths (auth/*) cannot be translated"
+    };
+  }
+
+  if (path.startsWith("sys/")) {
+    return {
+      canTranslate: false,
+      reason: "System paths (sys/*) cannot be translated"
+    };
+  }
+
+  if (path.startsWith("identity/")) {
+    return {
+      canTranslate: false,
+      reason: "Identity paths (identity/*) cannot be translated"
+    };
+  }
+
+  const sortedMounts = [...mounts].sort((a, b) => b.path.length - a.path.length);
+  const mount = sortedMounts.find((m) => path.startsWith(m.path));
+
+  if (!mount) {
+    return {
+      canTranslate: false,
+      reason: "Mount path not found (only KV secret engines are supported)"
+    };
+  }
+
+  // Check if it's a KV secret engine
+  if (mount.type !== "kv" && mount.type !== "generic") {
+    return {
+      canTranslate: false,
+      reason: `Only KV secret engines are supported (found: ${mount.type})`
+    };
+  }
+
+  // Check if it's a metadata path and has valid capabilities
+  const isKvV2 = mount.version === "2";
+  const isMetadata = isKvV2 && path.includes("/metadata/");
+
+  if (!hasTranslatableCapabilities(capabilities, isMetadata)) {
+    return {
+      canTranslate: false,
+      reason: isMetadata
+        ? "Cannot translate list/read capabilities for metadata (Infisical only supports translation for create, update, delete)"
+        : "No translatable capabilities found"
+    };
+  }
+
+  return { canTranslate: true };
+};
+
+export const analyzeVaultPolicy = (
+  hclPolicy: string,
+  mounts: VaultMount[]
+): {
+  blocks: PolicyBlock[];
+  lines: PolicyLine[];
+  translatableCount: number;
+  nonTranslatableCount: number;
+} => {
+  const blocks: PolicyBlock[] = [];
+  const lines: PolicyLine[] = [];
+  let blockIdCounter = 0;
+
+  const policyLines = hclPolicy.split("\n");
+
+  // Track which lines belong to which blocks
+  const lineToBlockMap = new Map<number, string>();
+
+  // Step 1: Extract all path blocks
+  try {
+    const pathRegex = /path\s+"([^"]+)"\s*\{[^}]*capabilities\s*=\s*\[([^\]]+)\][^}]*\}/gi;
+    let match = pathRegex.exec(hclPolicy);
+
+    while (match !== null) {
+      const [fullMatch, path, capabilitiesStr] = match;
+
+      const capabilities = capabilitiesStr
+        .split(",")
+        .map((c) => c.trim().replace(/["'\s]/g, ""))
+        .filter((c) => c.length > 0);
+
+      // Find the line numbers for this block
+      const matchIndex = match.index;
+      const textBeforeMatch = hclPolicy.substring(0, matchIndex);
+      const textIncludingMatch = hclPolicy.substring(0, matchIndex + fullMatch.length);
+      const startLine = textBeforeMatch.split("\n").length;
+      const endLine = textIncludingMatch.split("\n").length;
+
+      // Determine if this block can be translated
+      const { canTranslate, reason } = canTranslateBlock(path, capabilities, mounts);
+
+      const blockId = `block-${blockIdCounter}`;
+      blockIdCounter += 1;
+      blocks.push({
+        id: blockId,
+        path,
+        capabilities,
+        rawText: fullMatch,
+        startLine,
+        endLine,
+        canTranslate,
+        reason
+      });
+
+      // Mark these lines as belonging to this block
+      for (let i = startLine; i <= endLine; i += 1) {
+        lineToBlockMap.set(i, blockId);
+      }
+
+      match = pathRegex.exec(hclPolicy);
+    }
+  } catch (err) {
+    console.error("Error analyzing HCL policy:", err);
+  }
+
+  // Step 2: Process each line
+  policyLines.forEach((lineText, index) => {
+    const lineNumber = index + 1;
+    const trimmedLine = lineText.trim();
+    const blockId = lineToBlockMap.get(lineNumber);
+
+    let type: PolicyLine["type"] = "other";
+    if (trimmedLine.startsWith("#") || trimmedLine.startsWith("//")) {
+      type = "comment";
+    } else if (trimmedLine === "") {
+      type = "empty";
+    } else if (blockId) {
+      type = "part-of-block";
+    }
+
+    lines.push({
+      id: `line-${lineNumber}`,
+      text: lineText,
+      lineNumber,
+      type,
+      belongsToBlock: blockId
+    });
+  });
+
+  const translatableCount = blocks.filter((b) => b.canTranslate).length;
+  const nonTranslatableCount = blocks.filter((b) => !b.canTranslate).length;
+
+  return {
+    blocks,
+    lines,
+    translatableCount,
+    nonTranslatableCount
+  };
+};
@@ -21,7 +21,9 @@ import {
 } from "@app/hooks/api/migration/queries";

 import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { analyzeVaultPolicy, PolicyBlock, PolicyLine } from "./VaultPolicyAnalyzer.utils";
 import { parseVaultPolicyToInfisical } from "./VaultPolicyImportModal.utils";
+import { VaultPolicyPreview } from "./VaultPolicyPreview";

 type Props = {
  isOpen: boolean;
@@ -39,6 +41,10 @@ const Content = ({ onClose }: ContentProps) => {
  const [hclPolicy, setHclPolicy] = useState<string>("");
  const [shouldFetchPolicies, setShouldFetchPolicies] = useState(false);
  const [shouldFetchMounts, setShouldFetchMounts] = useState(false);
+  const [analysisResult, setAnalysisResult] = useState<{
+    blocks: PolicyBlock[];
+    lines: PolicyLine[];
+  } | null>(null);

  const { data: namespaces, isLoading: isLoadingNamespaces } = useGetVaultNamespaces();
  const { data: policies, isLoading: isLoadingPolicies } = useGetVaultPolicies(
@@ -68,6 +74,49 @@ const Content = ({ onClose }: ContentProps) => {
    }
  }, [selectedPolicy, policies]);

+  // Automatically analyze policy when it changes (with debouncing)
+  useEffect(() => {
+    if (!hclPolicy.trim() || !mounts || mounts.length === 0) {
+      setAnalysisResult(null);
+      return undefined;
+    }
+
+    const timeoutId = setTimeout(() => {
+      const result = analyzeVaultPolicy(hclPolicy, mounts);
+      setAnalysisResult(result);
+    }, 300); // Debounce for 300ms
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [hclPolicy, mounts]);
+
+  const renderEmptyState = () => {
+    if (!selectedNamespace) {
+      return (
+        <div>
+          <p>Select a namespace to enable preview</p>
+        </div>
+      );
+    }
+
+    if (isLoadingMounts) {
+      return <div>Loading mounts...</div>;
+    }
+
+    if (!mounts || mounts.length === 0) {
+      return (
+        <div>
+          <p className="font-medium text-yellow-400">No KV mounts found</p>
+          <p className="mt-1 text-xs">This namespace has no KV secret engines configured.</p>
+          <p className="mt-1 text-xs">Policy translation requires KV mounts.</p>
+        </div>
+      );
+    }
+
+    return <div>Enter a policy to see translation preview</div>;
+  };
+
  const handleTranslateAndApply = () => {
    if (!hclPolicy.trim()) {
      createNotification({ type: "error", text: "Please provide a Vault HCL policy" });
@@ -211,27 +260,40 @@ const Content = ({ onClose }: ContentProps) => {
        </>
      </FormControl>

-      <FormControl label="Vault HCL Policy" className="mb-6">
-        <>
-          <TextArea
-            value={hclPolicy}
-            onChange={(e) => setHclPolicy(e.target.value)}
-            placeholder={`path "secret/data/prod/app/*" {
+      <div className="grid grid-cols-2 gap-4">
+        <FormControl label="Vault HCL Policy" className="mb-4">
+          <>
+            <TextArea
+              value={hclPolicy}
+              onChange={(e) => setHclPolicy(e.target.value)}
+              placeholder={`path "secret/data/prod/app/*" {
  capabilities = ["create", "read", "update", "delete"]
 }

 path "secret/metadata/prod/*" {
  capabilities = ["list"]
 }`}
-            rows={12}
-            className="font-mono text-sm"
-          />
-          <p className="mt-1 text-xs text-mineshaft-400">
-            Paste your HCL policy here or select one from the dropdown above. The translator will
-            extract environments and paths automatically.
-          </p>
-        </>
-      </FormControl>
+              rows={20}
+              className="h-[30rem] px-4 py-0.5 font-mono text-xs leading-6"
+            />
+            <p className="mt-1 text-xs text-mineshaft-400">
+              Paste your HCL policy here or select one from the dropdown above.
+            </p>
+          </>
+        </FormControl>
+
+        <div className="mb-4">
+          <FormControl label="Translation Preview" className="mb-4">
+            {analysisResult ? (
+              <VaultPolicyPreview blocks={analysisResult.blocks} lines={analysisResult.lines} />
+            ) : (
+              <div className="flex h-[30rem] items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-900 text-center text-sm text-mineshaft-400">
+                {renderEmptyState()}
+              </div>
+            )}
+          </FormControl>
+        </div>
+      </div>

      <div className="mt-8 flex space-x-4">
        <Button
@@ -256,7 +318,7 @@ export const VaultPolicyImportModal = ({ isOpen, onOpenChange }: Props) => {
      <ModalContent
        title="Import from HashiCorp Vault"
        subTitle="Select a policy from your Vault namespace or paste your own HCL policy to translate it into Infisical permissions."
-        className="max-w-3xl"
+        className="max-w-4xl"
      >
        <Content onClose={() => onOpenChange(false)} />
      </ModalContent>
@@ -0,0 +1,92 @@
+import { faCheckCircle, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { PolicyBlock, PolicyLine } from "./VaultPolicyAnalyzer.utils";
+
+type Props = {
+  blocks: PolicyBlock[];
+  lines: PolicyLine[];
+};
+
+export const VaultPolicyPreview = ({ blocks, lines }: Props) => {
+  // Create a map of block IDs to blocks for quick lookup
+  const blockMap = new Map(blocks.map((block) => [block.id, block]));
+
+  return (
+    <div className="flex h-[30rem] flex-col rounded-md border border-mineshaft-600 bg-mineshaft-900">
+      <div className="flex-1 overflow-auto font-mono text-xs">
+        {lines.map((line) => {
+          const block = line.belongsToBlock ? blockMap.get(line.belongsToBlock) : null;
+          const isPartOfBlock = line.type === "part-of-block";
+          const isComment = line.type === "comment";
+          const isEmpty = line.type === "empty";
+
+          let bgColorClass = "";
+          let borderColorClass = "";
+          let textColorClass = "text-mineshaft-300";
+          let showIndicator = false;
+          let indicator: JSX.Element | null = null;
+
+          if (isPartOfBlock && block) {
+            showIndicator = line.lineNumber === block.startLine;
+            if (block.canTranslate) {
+              bgColorClass = "bg-green-500/10";
+              borderColorClass = "border-l-2 border-green-500/50";
+              textColorClass = "text-green-100";
+              if (showIndicator) {
+                indicator = (
+                  <div className="flex items-center gap-2 text-green-400">
+                    <FontAwesomeIcon icon={faCheckCircle} className="h-3 w-3" />
+                    <span className="text-xs">Can translate</span>
+                  </div>
+                );
+              }
+            } else {
+              bgColorClass = "bg-red-500/10";
+              borderColorClass = "border-l-2 border-red-500/50";
+              textColorClass = "text-red-100";
+              if (showIndicator) {
+                indicator = (
+                  <div className="flex items-center gap-2 text-red-400">
+                    <FontAwesomeIcon icon={faTimesCircle} className="h-3 w-3" />
+                    <span className="text-xs">{block.reason || "Cannot translate"}</span>
+                  </div>
+                );
+              }
+            }
+          } else if (isComment) {
+            textColorClass = "text-mineshaft-500 italic";
+          }
+
+          return (
+            <div key={line.id} className="group relative">
+              {showIndicator && indicator && (
+                <div
+                  className={twMerge(
+                    "flex items-center px-4 py-1.5",
+                    block?.canTranslate ? "bg-green-500/5" : "bg-red-500/5"
+                  )}
+                >
+                  {indicator}
+                </div>
+              )}
+              <div
+                className={twMerge(
+                  "px-4 py-0.5 leading-6",
+                  bgColorClass,
+                  borderColorClass,
+                  isEmpty && "min-h-[1.5rem]"
+                )}
+              >
+                <span className={twMerge("font-mono whitespace-pre", textColorClass)}>
+                  {line.text || " "}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,14 @@
+import { TNorthflankSync } from "@app/hooks/api/secretSyncs/types/northflank-sync";
+
+import { getSecretSyncDestinationColValues } from "../helpers";
+import { SecretSyncTableCell } from "../SecretSyncTableCell";
+
+type Props = {
+  secretSync: TNorthflankSync;
+};
+
+export const NorthflankSyncDestinationCol = ({ secretSync }: Props) => {
+  const { primaryText, secondaryText } = getSecretSyncDestinationColValues(secretSync);
+
+  return <SecretSyncTableCell primaryText={primaryText} secondaryText={secondaryText} />;
+};
@@ -22,6 +22,7 @@ import { HerokuSyncDestinationCol } from "./HerokuSyncDestinationCol";
 import { HumanitecSyncDestinationCol } from "./HumanitecSyncDestinationCol";
 import { LaravelForgeSyncDestinationCol } from "./LaravelForgeSyncDestinationCol";
 import { NetlifySyncDestinationCol } from "./NetlifySyncDestinationCol";
+import { NorthflankSyncDestinationCol } from "./NorthflankSyncDestinationCol";
 import { OCIVaultSyncDestinationCol } from "./OCIVaultSyncDestinationCol";
 import { RailwaySyncDestinationCol } from "./RailwaySyncDestinationCol";
 import { RenderSyncDestinationCol } from "./RenderSyncDestinationCol";
@@ -97,6 +98,8 @@ export const SecretSyncDestinationCol = ({ secretSync }: Props) => {
      return <DigitalOceanAppPlatformSyncDestinationCol secretSync={secretSync} />;
    case SecretSync.Netlify:
      return <NetlifySyncDestinationCol secretSync={secretSync} />;
+    case SecretSync.Northflank:
+      return <NorthflankSyncDestinationCol secretSync={secretSync} />;
    case SecretSync.Bitbucket:
      return <BitbucketSyncDestinationCol secretSync={secretSync} />;
    case SecretSync.LaravelForge:
@@ -194,6 +194,10 @@ export const getSecretSyncDestinationColValues = (secretSync: TSecretSync) => {
      primaryText = destinationConfig.workspaceSlug;
      secondaryText = destinationConfig.repositorySlug;
      break;
+    case SecretSync.Northflank:
+      primaryText = destinationConfig.projectName || destinationConfig.projectId;
+      secondaryText = destinationConfig.secretGroupName || destinationConfig.secretGroupId;
+      break;
    case SecretSync.LaravelForge:
      primaryText = destinationConfig.siteName || destinationConfig.siteId;
      secondaryText = destinationConfig.orgName || destinationConfig.orgSlug;
@@ -0,0 +1,21 @@
+import { GenericFieldLabel } from "@app/components/secret-syncs";
+import { TNorthflankSync } from "@app/hooks/api/secretSyncs/types/northflank-sync";
+
+type Props = {
+  secretSync: TNorthflankSync;
+};
+
+export const NorthflankSyncDestinationSection = ({ secretSync }: Props) => {
+  const { destinationConfig } = secretSync;
+
+  return (
+    <>
+      <GenericFieldLabel label="Project">
+        {destinationConfig.projectName || destinationConfig.projectId}
+      </GenericFieldLabel>
+      <GenericFieldLabel label="Secret Group">
+        {destinationConfig.secretGroupName || destinationConfig.secretGroupId}
+      </GenericFieldLabel>
+    </>
+  );
+};
@@ -33,6 +33,7 @@ import { HerokuSyncDestinationSection } from "./HerokuSyncDestinationSection";
 import { HumanitecSyncDestinationSection } from "./HumanitecSyncDestinationSection";
 import { LaravelForgeSyncDestinationSection } from "./LaravelForgeSyncDestinationSection";
 import { NetlifySyncDestinationSection } from "./NetlifySyncDestinationSection";
+import { NorthflankSyncDestinationSection } from "./NorthflankSyncDestinationSection";
 import { OCIVaultSyncDestinationSection } from "./OCIVaultSyncDestinationSection";
 import { RailwaySyncDestinationSection } from "./RailwaySyncDestinationSection";
 import { RenderSyncDestinationSection } from "./RenderSyncDestinationSection";
@@ -147,6 +148,9 @@ export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }:
    case SecretSync.Netlify:
      DestinationComponents = <NetlifySyncDestinationSection secretSync={secretSync} />;
      break;
+    case SecretSync.Northflank:
+      DestinationComponents = <NorthflankSyncDestinationSection secretSync={secretSync} />;
+      break;
    case SecretSync.Bitbucket:
      DestinationComponents = <BitbucketSyncDestinationSection secretSync={secretSync} />;
      break;
@@ -71,6 +71,7 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
    case SecretSync.Checkly:
    case SecretSync.DigitalOceanAppPlatform:
    case SecretSync.Netlify:
+    case SecretSync.Northflank:
    case SecretSync.Bitbucket:
    case SecretSync.LaravelForge:
    case SecretSync.Chef: