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

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/NorthflankSyncFields.tsx

@@ -0,0 +1,123 @@
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { SingleValue } from "react-select";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
+import { FilterableSelect, FormControl, Tooltip } from "@app/components/v2";
+import {
+  TNorthflankProject,
+  TNorthflankSecretGroup,
+  useNorthflankConnectionListProjects,
+  useNorthflankConnectionListSecretGroups
+} from "@app/hooks/api/appConnections/northflank";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+import { TSecretSyncForm } from "../schemas";
+
+export const NorthflankSyncFields = () => {
+  const { control, setValue } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.Northflank }
+  >();
+
+  const connectionId = useWatch({ name: "connection.id", control });
+  const projectId = useWatch({ name: "destinationConfig.projectId", control });
+
+  const { data: projects = [], isPending: isProjectsLoading } = useNorthflankConnectionListProjects(
+    connectionId,
+    {
+      enabled: Boolean(connectionId)
+    }
+  );
+
+  const { data: secretGroups = [], isPending: isSecretGroupsLoading } =
+    useNorthflankConnectionListSecretGroups(connectionId, projectId, {
+      enabled: Boolean(connectionId) && Boolean(projectId)
+    });
+
+  return (
+    <>
+      <SecretSyncConnectionField
+        onChange={() => {
+          setValue("destinationConfig.projectId", "");
+          setValue("destinationConfig.projectName", "");
+          setValue("destinationConfig.secretGroupId", "");
+          setValue("destinationConfig.secretGroupName", "");
+        }}
+      />
+      <Controller
+        name="destinationConfig.projectId"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Project"
+            isRequired
+            helperText={
+              <Tooltip content="Ensure the project exists in the connection's Northflank team and the connection has access to it.">
+                <div>
+                  <span>Don&#39;t see the project you&#39;re looking for?</span>{" "}
+                  <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+                </div>
+              </Tooltip>
+            }
+          >
+            <FilterableSelect
+              menuPlacement="top"
+              isLoading={isProjectsLoading && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              value={projects.find((p) => p.id === value) ?? null}
+              onChange={(option) => {
+                const v = option as SingleValue<TNorthflankProject>;
+                onChange(v?.id ?? null);
+                setValue("destinationConfig.projectName", v?.name ?? "");
+                setValue("destinationConfig.secretGroupId", "");
+                setValue("destinationConfig.secretGroupName", "");
+              }}
+              options={projects}
+              placeholder="Select a project..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+      <Controller
+        name="destinationConfig.secretGroupId"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Secret Group"
+            isRequired
+            helperText={
+              <Tooltip content="Ensure the secret group exists in the connection's Northflank project and the connection has access to it.">
+                <div>
+                  <span>Don&#39;t see the secret group you&#39;re looking for?</span>{" "}
+                  <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+                </div>
+              </Tooltip>
+            }
+          >
+            <FilterableSelect
+              isLoading={isSecretGroupsLoading && Boolean(projectId)}
+              isDisabled={!projectId}
+              value={secretGroups.find((sg) => sg.id === value) ?? null}
+              onChange={(option) => {
+                const v = option as SingleValue<TNorthflankSecretGroup>;
+                onChange(v?.id ?? null);
+                setValue("destinationConfig.secretGroupName", v?.name ?? "");
+              }}
+              options={secretGroups}
+              placeholder="Select a secret group..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/SecretSyncDestinationFields.tsx

@@ -25,6 +25,7 @@ import { HerokuSyncFields } from "./HerokuSyncFields";
 import { HumanitecSyncFields } from "./HumanitecSyncFields";
 import { LaravelForgeSyncFields } from "./LaravelForgeSyncFields";
 import { NetlifySyncFields } from "./NetlifySyncFields";
+import { NorthflankSyncFields } from "./NorthflankSyncFields";
 import { OCIVaultSyncFields } from "./OCIVaultSyncFields";
 import { RailwaySyncFields } from "./RailwaySyncFields";
 import { RenderSyncFields } from "./RenderSyncFields";
@@ -106,6 +107,8 @@ export const SecretSyncDestinationFields = () => {
       return <LaravelForgeSyncFields />;
     case SecretSync.Chef:
       return <ChefSyncFields />;
+    case SecretSync.Northflank:
+      return <NorthflankSyncFields />;
     default:
       throw new Error(`Unhandled Destination Config Field: ${destination}`);
   }

frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx

@@ -68,6 +68,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
     case SecretSync.Supabase:
     case SecretSync.DigitalOceanAppPlatform:
     case SecretSync.Netlify:
+    case SecretSync.Northflank:
     case SecretSync.Bitbucket:
     case SecretSync.LaravelForge:
     case SecretSync.Chef:

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/NorthflankSyncReviewFields.tsx

@@ -0,0 +1,20 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const NorthflankSyncReviewFields = () => {
+  const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Northflank }>();
+  const projectName = watch("destinationConfig.projectName");
+  const projectId = watch("destinationConfig.projectId");
+  const secretGroupName = watch("destinationConfig.secretGroupName");
+  const secretGroupId = watch("destinationConfig.secretGroupId");
+
+  return (
+    <>
+      <GenericFieldLabel label="Project">{projectName || projectId}</GenericFieldLabel>
+      <GenericFieldLabel label="Secret Group">{secretGroupName || secretGroupId}</GenericFieldLabel>
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx

@@ -37,6 +37,7 @@ import { HerokuSyncReviewFields } from "./HerokuSyncReviewFields";
 import { HumanitecSyncReviewFields } from "./HumanitecSyncReviewFields";
 import { LaravelForgeSyncReviewFields } from "./LaravelForgeSyncReviewFields";
 import { NetlifySyncReviewFields } from "./NetlifySyncReviewFields";
+import { NorthflankSyncReviewFields } from "./NorthflankSyncReviewFields";
 import { OCIVaultSyncReviewFields } from "./OCIVaultSyncReviewFields";
 import { OnePassSyncReviewFields } from "./OnePassSyncReviewFields";
 import { RailwaySyncReviewFields } from "./RailwaySyncReviewFields";
@@ -168,6 +169,9 @@ export const SecretSyncReviewFields = () => {
     case SecretSync.Netlify:
       DestinationFieldsComponent = <NetlifySyncReviewFields />;
       break;
+    case SecretSync.Northflank:
+      DestinationFieldsComponent = <NorthflankSyncReviewFields />;
+      break;
     case SecretSync.Bitbucket:
       DestinationFieldsComponent = <BitbucketSyncReviewFields />;
       break;

frontend/src/components/secret-syncs/forms/schemas/northflank-sync-destination-schema.ts

@@ -0,0 +1,16 @@
+import { z } from "zod";
+
+import { BaseSecretSyncSchema } from "@app/components/secret-syncs/forms/schemas/base-secret-sync-schema";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const NorthflankSyncDestinationSchema = BaseSecretSyncSchema().merge(
+  z.object({
+    destination: z.literal(SecretSync.Northflank),
+    destinationConfig: z.object({
+      projectId: z.string().trim().min(1, "Project ID is required"),
+      projectName: z.string().trim().optional(),
+      secretGroupId: z.string().trim().min(1, "Secret Group ID is required"),
+      secretGroupName: z.string().trim().optional()
+    })
+  })
+);

frontend/src/components/secret-syncs/forms/schemas/secret-sync-schema.ts

@@ -22,6 +22,7 @@ import { HerokuSyncDestinationSchema } from "./heroku-sync-destination-schema";
 import { HumanitecSyncDestinationSchema } from "./humanitec-sync-destination-schema";
 import { LaravelForgeSyncDestinationSchema } from "./laravel-forge-sync-destination-schema";
 import { NetlifySyncDestinationSchema } from "./netlify-sync-destination-schema";
+import { NorthflankSyncDestinationSchema } from "./northflank-sync-destination-schema";
 import { OCIVaultSyncDestinationSchema } from "./oci-vault-sync-destination-schema";
 import { RailwaySyncDestinationSchema } from "./railway-sync-destination-schema";
 import { RenderSyncDestinationSchema } from "./render-sync-destination-schema";
@@ -63,6 +64,7 @@ const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
   ChecklySyncDestinationSchema,
   DigitalOceanAppPlatformSyncDestinationSchema,
   NetlifySyncDestinationSchema,
+  NorthflankSyncDestinationSchema,
   BitbucketSyncDestinationSchema,
   LaravelForgeSyncDestinationSchema,
   ChefSyncDestinationSchema

frontend/src/components/v2/Modal/Modal.tsx

@@ -14,6 +14,7 @@ export type ModalContentProps = Omit<DialogPrimitive.DialogContentProps, "title"
   bodyClassName?: string;
   onClose?: () => void;
   overlayClassName?: string;
+  showCloseButton?: boolean;
 };
 
 export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
@@ -27,6 +28,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
       footerContent,
       bodyClassName,
       onClose,
+      showCloseButton = true,
       ...props
     },
     forwardedRef
@@ -57,15 +59,17 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
             {children}
           </CardBody>
           {footerContent && <CardFooter>{footerContent}</CardFooter>}
-          <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
-            <IconButton
-              variant="plain"
-              ariaLabel="close"
-              className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
-            >
-              <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
-            </IconButton>
-          </DialogPrimitive.Close>
+          {showCloseButton && (
+            <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
+              <IconButton
+                variant="plain"
+                ariaLabel="close"
+                className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
+              >
+                <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
+              </IconButton>
+            </DialogPrimitive.Close>
+          )}
         </Card>
       </DialogPrimitive.Content>
     </DialogPrimitive.Portal>
@@ -74,7 +78,9 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
 
 ModalContent.displayName = "ModalContent";
 
-export type ModalProps = Omit<DialogPrimitive.DialogProps, "open"> & { isOpen?: boolean };
+export type ModalProps = Omit<DialogPrimitive.DialogProps, "open"> & {
+  isOpen?: boolean;
+};
 export const Modal = ({ isOpen, ...props }: ModalProps) => (
   <DialogPrimitive.Root open={isOpen} {...props} />
 );

frontend/src/helpers/appConnections.ts

@@ -50,6 +50,7 @@ import { DigitalOceanConnectionMethod } from "@app/hooks/api/appConnections/type
 import { HerokuConnectionMethod } from "@app/hooks/api/appConnections/types/heroku-connection";
 import { LaravelForgeConnectionMethod } from "@app/hooks/api/appConnections/types/laravel-forge-connection";
 import { NetlifyConnectionMethod } from "@app/hooks/api/appConnections/types/netlify-connection";
+import { NorthflankConnectionMethod } from "@app/hooks/api/appConnections/types/northflank-connection";
 import { OCIConnectionMethod } from "@app/hooks/api/appConnections/types/oci-connection";
 import { RailwayConnectionMethod } from "@app/hooks/api/appConnections/types/railway-connection";
 import { RenderConnectionMethod } from "@app/hooks/api/appConnections/types/render-connection";
@@ -122,6 +123,7 @@ export const APP_CONNECTION_MAP: Record<
     name: "Netlify",
     image: "Netlify.png"
   },
+  [AppConnection.Northflank]: { name: "Northflank", image: "Northflank.png" },
   [AppConnection.Okta]: { name: "Okta", image: "Okta.png" },
   [AppConnection.Redis]: { name: "Redis", image: "Redis.png" },
   [AppConnection.LaravelForge]: {
@@ -166,6 +168,7 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
     case BitbucketConnectionMethod.ApiToken:
     case ZabbixConnectionMethod.ApiToken:
     case DigitalOceanConnectionMethod.ApiToken:
+    case NorthflankConnectionMethod.ApiToken:
     case OktaConnectionMethod.ApiToken:
     case LaravelForgeConnectionMethod.ApiToken:
       return { name: "API Token", icon: faKey };

frontend/src/helpers/secretSyncs.ts

@@ -114,6 +114,10 @@ export const SECRET_SYNC_MAP: Record<SecretSync, { name: string; image: string }
     name: "Bitbucket",
     image: "Bitbucket.png"
   },
+  [SecretSync.Northflank]: {
+    name: "Northflank",
+    image: "Northflank.png"
+  },
   [SecretSync.LaravelForge]: {
     name: "Laravel Forge",
     image: "Laravel Forge.png"
@@ -154,6 +158,7 @@ export const SECRET_SYNC_CONNECTION_MAP: Record<SecretSync, AppConnection> = {
   [SecretSync.Checkly]: AppConnection.Checkly,
   [SecretSync.DigitalOceanAppPlatform]: AppConnection.DigitalOcean,
   [SecretSync.Netlify]: AppConnection.Netlify,
+  [SecretSync.Northflank]: AppConnection.Northflank,
   [SecretSync.Bitbucket]: AppConnection.Bitbucket,
   [SecretSync.LaravelForge]: AppConnection.LaravelForge,
   [SecretSync.Chef]: AppConnection.Chef

frontend/src/hooks/api/appConnections/enums.ts

@@ -36,6 +36,7 @@ export enum AppConnection {
   Supabase = "supabase",
   DigitalOcean = "digital-ocean",
   Netlify = "netlify",
+  Northflank = "northflank",
   Okta = "okta",
   Redis = "redis",
   LaravelForge = "laravel-forge",

frontend/src/hooks/api/appConnections/northflank/index.ts

@@ -0,0 +1,2 @@
+export * from "./queries";
+export * from "./types";

frontend/src/hooks/api/appConnections/northflank/queries.tsx

@@ -0,0 +1,65 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+import { appConnectionKeys } from "@app/hooks/api/appConnections";
+
+import { TNorthflankProject, TNorthflankSecretGroup } from "./types";
+
+const northflankConnectionKeys = {
+  all: [...appConnectionKeys.all, "northflank"] as const,
+  listProjects: (connectionId: string) =>
+    [...northflankConnectionKeys.all, "projects", connectionId] as const,
+  listSecretGroups: (connectionId: string, projectId: string) =>
+    [...northflankConnectionKeys.all, "secret-groups", connectionId, projectId] as const
+};
+
+export const useNorthflankConnectionListProjects = (
+  connectionId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TNorthflankProject[],
+      unknown,
+      TNorthflankProject[],
+      ReturnType<typeof northflankConnectionKeys.listProjects>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: northflankConnectionKeys.listProjects(connectionId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ projects: TNorthflankProject[] }>(
+        `/api/v1/app-connections/northflank/${connectionId}/projects`
+      );
+
+      return data.projects;
+    },
+    ...options
+  });
+};
+
+export const useNorthflankConnectionListSecretGroups = (
+  connectionId: string,
+  projectId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TNorthflankSecretGroup[],
+      unknown,
+      TNorthflankSecretGroup[],
+      ReturnType<typeof northflankConnectionKeys.listSecretGroups>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: northflankConnectionKeys.listSecretGroups(connectionId, projectId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ secretGroups: TNorthflankSecretGroup[] }>(
+        `/api/v1/app-connections/northflank/${connectionId}/projects/${projectId}/secret-groups`
+      );
+
+      return data.secretGroups;
+    },
+    ...options
+  });
+};

frontend/src/hooks/api/appConnections/northflank/types.ts

@@ -0,0 +1,9 @@
+export type TNorthflankProject = {
+  id: string;
+  name: string;
+};
+
+export type TNorthflankSecretGroup = {
+  id: string;
+  name: string;
+};

frontend/src/hooks/api/appConnections/types/app-options.ts

@@ -172,6 +172,10 @@ export type TLaravelForgeConnectionOption = TAppConnectionOptionBase & {
   app: AppConnection.LaravelForge;
 };
 
+export type TNorthflankConnectionOption = TAppConnectionOptionBase & {
+  app: AppConnection.Northflank;
+};
+
 export type TAzureAdCsConnectionOption = TAppConnectionOptionBase & {
   app: AppConnection.AzureADCS;
 };
@@ -217,6 +221,7 @@ export type TAppConnectionOption =
   | TSupabaseConnectionOption
   | TDigitalOceanConnectionOption
   | TNetlifyConnectionOption
+  | TNorthflankConnectionOption
   | TOktaConnectionOption
   | TAzureAdCsConnectionOption
   | TLaravelForgeConnectionOption
@@ -259,6 +264,7 @@ export type TAppConnectionOptionMap = {
   [AppConnection.Supabase]: TSupabaseConnectionOption;
   [AppConnection.DigitalOcean]: TDigitalOceanConnectionOption;
   [AppConnection.Netlify]: TNetlifyConnectionOption;
+  [AppConnection.Northflank]: TNorthflankConnectionOption;
   [AppConnection.Okta]: TOktaConnectionOption;
   [AppConnection.AzureADCS]: TAzureAdCsConnectionOption;
   [AppConnection.Redis]: TRedisConnectionOption;

frontend/src/hooks/api/appConnections/types/index.ts

@@ -27,6 +27,7 @@ import { TLdapConnection } from "./ldap-connection";
 import { TMsSqlConnection } from "./mssql-connection";
 import { TMySqlConnection } from "./mysql-connection";
 import { TNetlifyConnection } from "./netlify-connection";
+import { TNorthflankConnection } from "./northflank-connection";
 import { TOCIConnection } from "./oci-connection";
 import { TOktaConnection } from "./okta-connection";
 import { TOracleDBConnection } from "./oracledb-connection";
@@ -67,6 +68,8 @@ export * from "./laravel-forge-connection";
 export * from "./ldap-connection";
 export * from "./mssql-connection";
 export * from "./mysql-connection";
+export * from "./netlify-connection";
+export * from "./northflank-connection";
 export * from "./oci-connection";
 export * from "./okta-connection";
 export * from "./oracledb-connection";
@@ -121,6 +124,7 @@ export type TAppConnection =
   | TSupabaseConnection
   | TDigitalOceanConnection
   | TNetlifyConnection
+  | TNorthflankConnection
   | TOktaConnection
   | TRedisConnection
   | TChefConnection;

frontend/src/hooks/api/appConnections/types/northflank-connection.ts

@@ -0,0 +1,13 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
+
+export enum NorthflankConnectionMethod {
+  ApiToken = "api-token"
+}
+
+export type TNorthflankConnection = TRootAppConnection & { app: AppConnection.Northflank } & {
+  method: NorthflankConnectionMethod.ApiToken;
+  credentials: {
+    apiToken: string;
+  };
+};

frontend/src/hooks/api/pam/types/base-account.ts

@@ -16,6 +16,8 @@ export interface TBasePamAccount {
   rotationEnabled: boolean;
   rotationIntervalSeconds?: number | null;
   lastRotatedAt?: string | null;
+  lastRotationMessage?: string | null;
+  rotationStatus?: string | null;
   createdAt: string;
   updatedAt: string;
 }

frontend/src/hooks/api/secretSyncs/enums.ts

@@ -28,6 +28,7 @@ export enum SecretSync {
   Checkly = "checkly",
   DigitalOceanAppPlatform = "digital-ocean-app-platform",
   Netlify = "netlify",
+  Northflank = "northflank",
   Bitbucket = "bitbucket",
   LaravelForge = "laravel-forge",
   Chef = "chef"

frontend/src/hooks/api/secretSyncs/types/index.ts

@@ -23,6 +23,7 @@ import { THerokuSync } from "./heroku-sync";
 import { THumanitecSync } from "./humanitec-sync";
 import { TLaravelForgeSync } from "./laravel-forge-sync";
 import { TNetlifySync } from "./netlify-sync";
+import { TNorthflankSync } from "./northflank-sync";
 import { TOCIVaultSync } from "./oci-vault-sync";
 import { TRailwaySync } from "./railway-sync";
 import { TRenderSync } from "./render-sync";
@@ -71,6 +72,7 @@ export type TSecretSync =
   | TSupabaseSync
   | TDigitalOceanAppPlatformSync
   | TNetlifySync
+  | TNorthflankSync
   | TBitbucketSync
   | TLaravelForgeSync
   | TChefSync;

frontend/src/hooks/api/secretSyncs/types/northflank-sync.ts

@@ -0,0 +1,19 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+import { TRootSecretSync } from "@app/hooks/api/secretSyncs/types/root-sync";
+
+export type TNorthflankSync = TRootSecretSync & {
+  destination: SecretSync.Northflank;
+  destinationConfig: {
+    projectId: string;
+    projectName?: string;
+    secretGroupId: string;
+    secretGroupName?: string;
+  };
+
+  connection: {
+    app: AppConnection.Northflank;
+    name: string;
+    id: string;
+  };
+};

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

@@ -59,6 +59,7 @@ export type SubscriptionPlan = {
   enterpriseAppConnections: boolean;
   cardDeclined?: boolean;
   cardDeclinedReason?: string;
+  cardDeclinedDays?: number;
   machineIdentityAuthTemplates: boolean;
   pam: boolean;
 };

frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx

@@ -141,12 +141,10 @@ export const Navbar = () => {
     enabled: Boolean(subscription.subOrganization)
   });
 
-  useEffect(() => {
-    if (subscription?.cardDeclined && !sessionStorage.getItem("paymentFailed")) {
-      sessionStorage.setItem("paymentFailed", "true");
-      setShowCardDeclinedModal(true);
-    }
-  }, [subscription]);
+  const isCardDeclined = Boolean(subscription?.cardDeclined);
+  const isCardDeclinedMoreThan30Days = Boolean(
+    isCardDeclined && subscription?.cardDeclinedDays && subscription?.cardDeclinedDays >= 30
+  );
 
   const { data: orgs } = useGetOrganizations();
   const navigate = useNavigate();
@@ -158,6 +156,23 @@ export const Navbar = () => {
   const [isOrgSelectOpen, setIsOrgSelectOpen] = useState(false);
 
   const location = useLocation();
+  const isBillingPage = location.pathname === "/organization/billing";
+
+  const isModalIntrusive = Boolean(!isBillingPage && isCardDeclinedMoreThan30Days);
+
+  useEffect(() => {
+    if (isModalIntrusive) {
+      setShowCardDeclinedModal(true);
+      sessionStorage.setItem("paymentFailed", "true");
+      return;
+    }
+
+    if (isCardDeclined && !sessionStorage.getItem("paymentFailed")) {
+      sessionStorage.setItem("paymentFailed", "true");
+      setShowCardDeclinedModal(true);
+    }
+  }, [subscription, isBillingPage, isModalIntrusive]);
+
   const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
   const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
 
@@ -689,7 +704,10 @@ export const Navbar = () => {
         </DropdownMenuContent>
       </DropdownMenu>
 
-      <Modal isOpen={showCardDeclinedModal} onOpenChange={setShowCardDeclinedModal}>
+      <Modal
+        isOpen={showCardDeclinedModal}
+        onOpenChange={() => !isModalIntrusive && setShowCardDeclinedModal(false)}
+      >
         <ModalContent
           title={
             <div className="flex items-center gap-2">
@@ -697,6 +715,7 @@ export const Navbar = () => {
               Your payment could not be processed.
             </div>
           }
+          showCloseButton={!isModalIntrusive}
         >
           <div>
             <div>
@@ -717,15 +736,16 @@ export const Navbar = () => {
                     >
                       Update Payment Method
                     </Button>
+                  </Link>
+                  {!isModalIntrusive && (
                     <Button
                       colorSchema="secondary"
                       variant="outline"
-                      className="ml-2"
                       onClick={() => setShowCardDeclinedModal(false)}
                     >
                       Dismiss
                     </Button>
-                  </Link>
+                  )}
                 </div>
               </div>
             </div>

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AppConnectionForm.tsx

@@ -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:

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/NorthflankConnectionForm.tsx

@@ -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>
+  );
+};

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx

@@ -72,6 +72,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
 
           return (
             <button
+              key={option.app}
               type="button"
               onClick={() =>
                 enterprise && !subscription.enterpriseAppConnections

frontend/src/pages/pam/PamAccountsPage/components/PamAccountRow.tsx

@@ -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>

frontend/src/pages/project/RoleDetailsBySlugPage/components/VaultPolicyAnalyzer.utils.ts

@@ -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
+  };
+};

frontend/src/pages/project/RoleDetailsBySlugPage/components/VaultPolicyImportModal.tsx

@@ -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>

frontend/src/pages/project/RoleDetailsBySlugPage/components/VaultPolicyPreview.tsx

@@ -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>
+  );
+};

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/NorthflankSyncDestinationCol.tsx

@@ -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} />;
+};

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/SecretSyncDestinationCol.tsx

@@ -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:

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/helpers/index.ts

@@ -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;

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/NorthflankSyncDestinationSection.tsx

@@ -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>
+    </>
+  );
+};

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx

@@ -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;

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx

@@ -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: