Merge branch 'main' into feat/remindersImprovement

2026-10-20 15:43:12 +00:00 · 2025-07-11 08:59:21 -03:00
parent 50ba2e543c a50a95ad6e
commit 3153450dc5
397 changed files with 9891 additions and 1520 deletions
@@ -65,6 +65,7 @@ export const createNotification = (
  toast(<NotificationContent {...myProps} />, {
    position: "bottom-right",
    ...toastProps,
+    autoClose: toastProps.autoClose || 15000,
    theme: "dark",
    type: myProps?.type || "info"
  });
@@ -0,0 +1,172 @@
+import { useEffect } from "react";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { MultiValue, SingleValue } from "react-select";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { FilterableSelect, FormControl, Select, SelectItem, Tooltip } from "@app/components/v2";
+import {
+  TBitbucketRepo,
+  TBitbucketWorkspace,
+  useBitbucketConnectionListRepositories,
+  useBitbucketConnectionListWorkspaces
+} from "@app/hooks/api/appConnections/bitbucket";
+import { SecretScanningDataSource } from "@app/hooks/api/secretScanningV2";
+
+import { TSecretScanningDataSourceForm } from "../schemas";
+import { SecretScanningDataSourceConnectionField } from "../SecretScanningDataSourceConnectionField";
+
+enum ScanMethod {
+  AllRepositories = "all-repositories",
+  SelectRepositories = "select-repositories"
+}
+
+export const BitbucketDataSourceConfigFields = () => {
+  const { control, watch, setValue } = useFormContext<
+    TSecretScanningDataSourceForm & {
+      type: SecretScanningDataSource.Bitbucket;
+    }
+  >();
+
+  const connectionId = useWatch({ control, name: "connection.id" });
+  const isUpdate = Boolean(watch("id"));
+
+  const selectedWorkspaceSlug = useWatch({ control, name: "config.workspaceSlug" });
+
+  const { data: workspaces, isPending: areWorkspacesLoading } =
+    useBitbucketConnectionListWorkspaces(connectionId, { enabled: Boolean(connectionId) });
+
+  const { data: repositories, isPending: areRepositoriesLoading } =
+    useBitbucketConnectionListRepositories(connectionId, selectedWorkspaceSlug, {
+      enabled: Boolean(connectionId) && Boolean(selectedWorkspaceSlug)
+    });
+
+  const includeRepos = watch("config.includeRepos");
+
+  const scanMethod =
+    !includeRepos || includeRepos[0] === "*"
+      ? ScanMethod.AllRepositories
+      : ScanMethod.SelectRepositories;
+
+  useEffect(() => {
+    if (!includeRepos) {
+      setValue("config.includeRepos", ["*"]);
+    }
+  }, [includeRepos, setValue]);
+
+  return (
+    <>
+      <SecretScanningDataSourceConnectionField
+        isUpdate={isUpdate}
+        onChange={() => {
+          if (scanMethod === ScanMethod.SelectRepositories) {
+            setValue("config.workspaceSlug", "");
+            setValue("config.includeRepos", []);
+          }
+        }}
+      />
+      <Controller
+        name="config.workspaceSlug"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Workspace"
+            helperText={
+              <Tooltip
+                className="max-w-md"
+                content={<>Ensure that your connection has the correct permissions.</>}
+              >
+                <div>
+                  <span>Don&#39;t see the workspaces you&#39;re looking for?</span>{" "}
+                  <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+                </div>
+              </Tooltip>
+            }
+          >
+            <FilterableSelect
+              menuPlacement="top"
+              isLoading={areWorkspacesLoading && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              value={value ? { slug: value } : null}
+              onChange={(newValue) => {
+                onChange((newValue as SingleValue<TBitbucketWorkspace>)?.slug);
+                if (scanMethod === ScanMethod.SelectRepositories) {
+                  setValue("config.includeRepos", []);
+                }
+              }}
+              options={workspaces}
+              placeholder="Select workspace..."
+              getOptionLabel={(option) => option.slug}
+              getOptionValue={(option) => option.slug}
+            />
+          </FormControl>
+        )}
+      />
+      <FormControl label="Scan Repositories">
+        <Select
+          value={scanMethod}
+          onValueChange={(val) => {
+            setValue("config.includeRepos", val === ScanMethod.AllRepositories ? ["*"] : []);
+          }}
+          className="w-full border border-mineshaft-500 capitalize"
+          position="popper"
+          dropdownContainerClassName="max-w-none"
+          isDisabled={!connectionId}
+        >
+          {Object.values(ScanMethod).map((method) => {
+            return (
+              <SelectItem className="capitalize" value={method} key={method}>
+                {method.replace("-", " ")}
+              </SelectItem>
+            );
+          })}
+        </Select>
+      </FormControl>
+      {scanMethod === ScanMethod.SelectRepositories && (
+        <Controller
+          name="config.includeRepos"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              isError={Boolean(error)}
+              errorText={error?.message}
+              label="Include Repositories"
+              helperText={
+                <Tooltip
+                  className="max-w-md"
+                  content={<>Ensure that your connection has the correct permissions.</>}
+                >
+                  <div>
+                    <span>Don&#39;t see the repository you&#39;re looking for?</span>{" "}
+                    <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+                  </div>
+                </Tooltip>
+              }
+            >
+              <FilterableSelect
+                menuPlacement="top"
+                isLoading={areRepositoriesLoading && Boolean(connectionId)}
+                isDisabled={!connectionId || !selectedWorkspaceSlug}
+                isMulti
+                value={repositories?.filter((repository) =>
+                  (value as string[]).includes(repository.full_name)
+                )}
+                onChange={(newValue) => {
+                  onChange(
+                    newValue ? (newValue as MultiValue<TBitbucketRepo>).map((p) => p.full_name) : []
+                  );
+                }}
+                options={repositories}
+                placeholder="Select repositories..."
+                getOptionLabel={(option) => option.full_name}
+                getOptionValue={(option) => option.full_name}
+              />
+            </FormControl>
+          )}
+        />
+      )}
+    </>
+  );
+};
@@ -5,10 +5,12 @@ import { RESOURCE_DESCRIPTION_HELPER } from "@app/helpers/secretScanningV2";
 import { SecretScanningDataSource } from "@app/hooks/api/secretScanningV2";

 import { TSecretScanningDataSourceForm } from "../schemas";
+import { BitbucketDataSourceConfigFields } from "./BitbucketDataSourceConfigFields";
 import { GitHubDataSourceConfigFields } from "./GitHubDataSourceConfigFields";

 const COMPONENT_MAP: Record<SecretScanningDataSource, React.FC> = {
-  [SecretScanningDataSource.GitHub]: GitHubDataSourceConfigFields
+  [SecretScanningDataSource.GitHub]: GitHubDataSourceConfigFields,
+  [SecretScanningDataSource.Bitbucket]: BitbucketDataSourceConfigFields
 };

 export const SecretScanningDataSourceConfigFields = () => {
@@ -0,0 +1,28 @@
+import { useFormContext } from "react-hook-form";
+
+import { GenericFieldLabel } from "@app/components/v2";
+import { SecretScanningDataSource } from "@app/hooks/api/secretScanningV2";
+
+import { TSecretScanningDataSourceForm } from "../schemas";
+import { SecretScanningDataSourceConfigReviewSection } from "./shared";
+
+export const BitbucketDataSourceReviewFields = () => {
+  const { watch } = useFormContext<
+    TSecretScanningDataSourceForm & {
+      type: SecretScanningDataSource.Bitbucket;
+    }
+  >();
+
+  const [{ includeRepos, workspaceSlug }, connection] = watch(["config", "connection"]);
+  const shouldScanAll = includeRepos[0] === "*";
+
+  return (
+    <SecretScanningDataSourceConfigReviewSection>
+      {connection && <GenericFieldLabel label="Connection">{connection.name}</GenericFieldLabel>}
+      <GenericFieldLabel label="Workspace Slug">{workspaceSlug}</GenericFieldLabel>
+      <GenericFieldLabel label="Scan Repositories">
+        {shouldScanAll ? "All" : includeRepos.join(", ")}
+      </GenericFieldLabel>
+    </SecretScanningDataSourceConfigReviewSection>
+  );
+};
@@ -4,10 +4,12 @@ import { GenericFieldLabel } from "@app/components/v2";
 import { SecretScanningDataSource } from "@app/hooks/api/secretScanningV2";

 import { TSecretScanningDataSourceForm } from "../schemas";
+import { BitbucketDataSourceReviewFields } from "./BitbucketDataSourceReviewFields";
 import { GitHubDataSourceReviewFields } from "./GitHubDataSourceReviewFields";

 const COMPONENT_MAP: Record<SecretScanningDataSource, React.FC> = {
-  [SecretScanningDataSource.GitHub]: GitHubDataSourceReviewFields
+  [SecretScanningDataSource.GitHub]: GitHubDataSourceReviewFields,
+  [SecretScanningDataSource.Bitbucket]: BitbucketDataSourceReviewFields
 };

 export const SecretScanningDataSourceReviewFields = () => {
@@ -0,0 +1,19 @@
+import { z } from "zod";
+
+import { SecretScanningDataSource } from "@app/hooks/api/secretScanningV2";
+
+import { BaseSecretScanningDataSourceSchema } from "./base-secret-scanning-data-source-schema";
+
+export const BitbucketDataSourceSchema = z
+  .object({
+    type: z.literal(SecretScanningDataSource.Bitbucket),
+    config: z.object({
+      workspaceSlug: z.string().min(1, "Workspace Required").max(128),
+      includeRepos: z
+        .string()
+        .array()
+        .min(1, "One or more repositories required")
+        .max(100, "Cannot configure more than 100 repositories")
+    })
+  })
+  .merge(BaseSecretScanningDataSourceSchema({ isConnectionRequired: true }));
@@ -1,9 +1,11 @@
 import { z } from "zod";

+import { BitbucketDataSourceSchema } from "./bitbucket-data-source-schema";
 import { GitHubDataSourceSchema } from "./github-data-source-schema";

 export const SecretScanningDataSourceSchema = z.discriminatedUnion("type", [
-  GitHubDataSourceSchema
+  GitHubDataSourceSchema,
+  BitbucketDataSourceSchema
 ]);

 export type TSecretScanningDataSourceForm = z.infer<typeof SecretScanningDataSourceSchema>;
@@ -60,7 +60,7 @@ export const OnePassSyncFields = () => {
              menuPlacement="top"
              isLoading={isVaultsLoading && Boolean(connectionId)}
              isDisabled={!connectionId}
-              value={vaults?.find((v) => v.id === value) ?? null}
+              value={vaults?.find((v) => v.id === value) || null}
              onChange={(option) => onChange((option as SingleValue<TOnePassVault>)?.id ?? null)}
              options={vaults}
              placeholder="Select a vault..."
@@ -120,7 +120,7 @@ export const OCIVaultSyncFields = () => {
              menuPlacement="top"
              isLoading={isVaultsLoading && Boolean(connectionId)}
              isDisabled={!connectionId || !selectedCompartment}
-              value={vaults?.find((v) => v.id === value) ?? null}
+              value={vaults?.find((v) => v.id === value) || null}
              onChange={(option) => {
                onChange((option as SingleValue<{ id: string }>)?.id ?? null);
                setValue("destinationConfig.keyOcid", "");
@@ -0,0 +1,138 @@
+import { useMemo } from "react";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { SingleValue } from "react-select";
+
+import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
+import { FilterableSelect, FormControl } from "@app/components/v2";
+import {
+  TRailwayProject,
+  useRailwayConnectionListProjects
+} from "@app/hooks/api/appConnections/railway";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+import { TSecretSyncForm } from "../schemas";
+
+export const RailwaySyncFields = () => {
+  const { control, setValue } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.Railway }
+  >();
+
+  const connectionId = useWatch({ name: "connection.id", control });
+  const projectId = useWatch({ name: "destinationConfig.projectId", control });
+
+  const { data: projects = [], isPending: isProjectsLoading } = useRailwayConnectionListProjects(
+    connectionId,
+    {
+      enabled: Boolean(connectionId)
+    }
+  );
+
+  const environments = useMemo(() => {
+    return projects.find((p) => p.id === projectId)?.environments ?? [];
+  }, [projects, projectId]);
+
+  const services = useMemo(() => {
+    return projects.find((p) => p.id === projectId)?.services ?? [];
+  }, [projects, projectId]);
+
+  return (
+    <>
+      <SecretSyncConnectionField
+        onChange={() => {
+          setValue("destinationConfig.environmentId", "");
+          setValue("destinationConfig.projectId", "");
+          setValue("destinationConfig.serviceId", "");
+          setValue("destinationConfig.projectName", "");
+          setValue("destinationConfig.environmentName", "");
+          setValue("destinationConfig.serviceName", "");
+        }}
+      />
+      <Controller
+        name="destinationConfig.projectId"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Select a project"
+            tooltipClassName="max-w-md"
+          >
+            <FilterableSelect
+              isLoading={isProjectsLoading && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              value={projects.find((p) => p.id === value) ?? null}
+              onChange={(option) => {
+                const v = option as SingleValue<TRailwayProject>;
+                onChange(v?.id ?? null);
+                setValue("destinationConfig.projectName", v?.name ?? "");
+              }}
+              options={projects}
+              placeholder="Select a project..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+      <Controller
+        name="destinationConfig.environmentId"
+        disabled={!connectionId || !projectId}
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Select an environment"
+            tooltipClassName="max-w-md"
+          >
+            <FilterableSelect
+              isLoading={isProjectsLoading && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              value={environments.find((p) => p.id === value) ?? null}
+              onChange={(option) => {
+                const v = option as SingleValue<TRailwayProject>;
+                onChange(v?.id ?? null);
+                setValue("destinationConfig.environmentName", v?.name ?? "");
+              }}
+              options={environments}
+              placeholder="Select an environment..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+
+      <Controller
+        name="destinationConfig.serviceId"
+        disabled={!connectionId || !projectId}
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Select a service"
+            tooltipClassName="max-w-md"
+            tooltipText="By default secrets are created as shared variables in Railway."
+            helperText="Scope your secrets to a specific service within the environment."
+          >
+            <FilterableSelect
+              isLoading={isProjectsLoading && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              value={services.find((p) => p.id === value) ?? null}
+              onChange={(option) => {
+                const v = option as SingleValue<TRailwayProject>;
+                onChange(v?.id ?? null);
+                setValue("destinationConfig.serviceName", v?.name ?? "");
+              }}
+              options={services}
+              placeholder="Select a service..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+    </>
+  );
+};
@@ -20,11 +20,13 @@ import { HCVaultSyncFields } from "./HCVaultSyncFields";
 import { HerokuSyncFields } from "./HerokuSyncFields";
 import { HumanitecSyncFields } from "./HumanitecSyncFields";
 import { OCIVaultSyncFields } from "./OCIVaultSyncFields";
+import { RailwaySyncFields } from "./RailwaySyncFields";
 import { RenderSyncFields } from "./RenderSyncFields";
 import { TeamCitySyncFields } from "./TeamCitySyncFields";
 import { TerraformCloudSyncFields } from "./TerraformCloudSyncFields";
 import { VercelSyncFields } from "./VercelSyncFields";
 import { WindmillSyncFields } from "./WindmillSyncFields";
+import { ZabbixSyncFields } from "./ZabbixSyncFields";

 export const SecretSyncDestinationFields = () => {
  const { watch } = useFormContext<TSecretSyncForm>();
@@ -76,6 +78,10 @@ export const SecretSyncDestinationFields = () => {
      return <GitLabSyncFields />;
    case SecretSync.CloudflarePages:
      return <CloudflarePagesSyncFields />;
+    case SecretSync.Zabbix:
+      return <ZabbixSyncFields />;
+    case SecretSync.Railway:
+      return <RailwaySyncFields />;
    default:
      throw new Error(`Unhandled Destination Config Field: ${destination}`);
  }
@@ -0,0 +1,147 @@
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { SingleValue } from "react-select";
+
+import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
+import { FilterableSelect, FormControl, Select, SelectItem } from "@app/components/v2";
+import {
+  TZabbixHost,
+  useZabbixConnectionListHosts,
+  ZABBIX_SYNC_SCOPES,
+  ZabbixMacroType,
+  ZabbixSyncScope
+} from "@app/hooks/api/appConnections/zabbix";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+import { TSecretSyncForm } from "../schemas";
+
+export const ZabbixSyncFields = () => {
+  const { control, watch, setValue } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.Zabbix }
+  >();
+
+  const connectionId = useWatch({ name: "connection.id", control });
+  const currentScope = watch("destinationConfig.scope");
+
+  const { data: hosts = [], isPending: isHostsPending } = useZabbixConnectionListHosts(
+    connectionId,
+    {
+      enabled: Boolean(connectionId)
+    }
+  );
+
+  return (
+    <>
+      <SecretSyncConnectionField
+        onChange={() => {
+          setValue("destinationConfig.scope", ZabbixSyncScope.Global);
+          setValue("destinationConfig.hostId", "");
+          setValue("destinationConfig.hostName", "");
+        }}
+      />
+      <Controller
+        name="destinationConfig.scope"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            errorText={error?.message}
+            isError={Boolean(error?.message)}
+            label="Scope"
+            tooltipClassName="max-w-lg py-3"
+            tooltipText={
+              <div className="flex flex-col gap-3">
+                <p>
+                  Specify how Infisical should manage secrets from Zabbix. The following options are
+                  available:
+                </p>
+                <ul className="flex list-disc flex-col gap-3 pl-4">
+                  {Object.values(ZABBIX_SYNC_SCOPES).map(({ name, description }) => {
+                    return (
+                      <li key={name}>
+                        <p className="text-mineshaft-300">
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
+                        </p>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            }
+          >
+            <Select
+              value={value}
+              onValueChange={(val) => {
+                onChange(val);
+                setValue("destinationConfig.hostId", "");
+                setValue("destinationConfig.hostName", "");
+              }}
+              className="w-full border border-mineshaft-500 capitalize"
+              position="popper"
+              placeholder="Select a scope..."
+              dropdownContainerClassName="max-w-none"
+            >
+              {Object.values(ZabbixSyncScope).map((scope) => (
+                <SelectItem className="capitalize" value={scope} key={scope}>
+                  {scope.replace("-", " ")}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+      {currentScope === ZabbixSyncScope.Host && (
+        <Controller
+          name="destinationConfig.hostId"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message} label="Host">
+              <FilterableSelect
+                menuPlacement="top"
+                isLoading={isHostsPending && Boolean(connectionId)}
+                isDisabled={!connectionId}
+                value={hosts.find((host) => host.hostId === value) ?? null}
+                onChange={(option) => {
+                  const selectedOption = option as SingleValue<TZabbixHost>;
+                  onChange(selectedOption?.hostId ?? null);
+
+                  if (selectedOption) {
+                    setValue("destinationConfig.hostName", selectedOption.host);
+                  } else {
+                    setValue("destinationConfig.hostName", "");
+                  }
+                }}
+                options={hosts}
+                placeholder="Select a host..."
+                getOptionLabel={(option) => option.host}
+                getOptionValue={(option) => option.hostId}
+              />
+            </FormControl>
+          )}
+        />
+      )}
+      <Controller
+        control={control}
+        name="destinationConfig.macroType"
+        defaultValue={ZabbixMacroType.Secret}
+        render={({ field: { onChange, value }, fieldState: { error } }) => (
+          <FormControl isError={Boolean(error)} errorText={error?.message} label="Macro Type">
+            <Select
+              value={String(value)}
+              onValueChange={(val) => onChange(parseInt(val, 10))}
+              className="w-full border border-mineshaft-500 capitalize"
+              position="popper"
+              placeholder="Select a macro type..."
+              dropdownContainerClassName="max-w-none"
+            >
+              <SelectItem value={String(ZabbixMacroType.Text)} key="text">
+                Text
+              </SelectItem>
+              <SelectItem value={String(ZabbixMacroType.Secret)} key="secret">
+                Secret
+              </SelectItem>
+            </Select>
+          </FormControl>
+        )}
+      />
+    </>
+  );
+};
@@ -23,6 +23,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
  const { control, watch } = useFormContext<TSecretSyncForm>();

  const destination = watch("destination");
+  const currentSyncOption = watch("syncOptions");

  const destinationName = SECRET_SYNC_MAP[destination].name;

@@ -57,6 +58,8 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
    case SecretSync.Flyio:
    case SecretSync.GitLab:
    case SecretSync.CloudflarePages:
+    case SecretSync.Zabbix:
+    case SecretSync.Railway:
      AdditionalSyncOptionsFieldsComponent = null;
      break;
    default:
@@ -127,8 +130,9 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
          {!syncOption?.canImportSecrets && (
            <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
              <FontAwesomeIcon className="mr-1" size="xs" icon={faTriangleExclamation} />
-              {destinationName} only supports overwriting destination secrets. Secrets not present
-              in Infisical will be removed from the destination.
+              {destinationName} only supports overwriting destination secrets.{" "}
+              {!currentSyncOption.disableSecretDeletion &&
+                "Secrets not present in Infisical will be removed from the destination."}
            </p>
          )}
        </>
@@ -0,0 +1,29 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { useRailwayConnectionListProjects } from "@app/hooks/api/appConnections/railway";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const RailwaySyncReviewFields = () => {
+  const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Railway }>();
+  const connectionId = watch("connection.id");
+  const projectId = watch("destinationConfig.projectId");
+  const environmentId = watch("destinationConfig.environmentId");
+
+  const { data: projects = [] } = useRailwayConnectionListProjects(connectionId, {
+    enabled: Boolean(connectionId)
+  });
+
+  const project = projects.find((p) => p.id === projectId);
+  const environment = project?.environments.find((e) => e.id === environmentId);
+
+  return (
+    <>
+      <GenericFieldLabel label="Project">{project?.name ?? projectId}</GenericFieldLabel>
+      <GenericFieldLabel label="Environment">
+        {environment?.name ?? environmentId}
+      </GenericFieldLabel>
+    </>
+  );
+};
@@ -30,11 +30,13 @@ import { HerokuSyncReviewFields } from "./HerokuSyncReviewFields";
 import { HumanitecSyncReviewFields } from "./HumanitecSyncReviewFields";
 import { OCIVaultSyncReviewFields } from "./OCIVaultSyncReviewFields";
 import { OnePassSyncReviewFields } from "./OnePassSyncReviewFields";
+import { RailwaySyncReviewFields } from "./RailwaySyncReviewFields";
 import { RenderSyncReviewFields } from "./RenderSyncReviewFields";
 import { TeamCitySyncReviewFields } from "./TeamCitySyncReviewFields";
 import { TerraformCloudSyncReviewFields } from "./TerraformCloudSyncReviewFields";
 import { VercelSyncReviewFields } from "./VercelSyncReviewFields";
 import { WindmillSyncReviewFields } from "./WindmillSyncReviewFields";
+import { ZabbixSyncReviewFields } from "./ZabbixSyncReviewFields";

 export const SecretSyncReviewFields = () => {
  const { watch } = useFormContext<TSecretSyncForm>();
@@ -124,6 +126,12 @@ export const SecretSyncReviewFields = () => {
    case SecretSync.CloudflarePages:
      DestinationFieldsComponent = <CloudflarePagesSyncReviewFields />;
      break;
+    case SecretSync.Zabbix:
+      DestinationFieldsComponent = <ZabbixSyncReviewFields />;
+      break;
+    case SecretSync.Railway:
+      DestinationFieldsComponent = <RailwaySyncReviewFields />;
+      break;
    default:
      throw new Error(`Unhandled Destination Review Fields: ${destination}`);
  }
@@ -0,0 +1,31 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { ZabbixSyncScope } from "@app/hooks/api/appConnections/zabbix";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+const isTextMacro = (macroType: number) => macroType === 0;
+
+export const ZabbixSyncReviewFields = () => {
+  const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Zabbix }>();
+  const scope = watch("destinationConfig.scope");
+  const hostId = watch("destinationConfig.hostId");
+  const hostName = watch("destinationConfig.hostName");
+  const macroType = watch("destinationConfig.macroType");
+
+  return (
+    <>
+      <GenericFieldLabel label="Scope">{scope}</GenericFieldLabel>
+      {scope === ZabbixSyncScope.Host && (
+        <>
+          <GenericFieldLabel label="Host ID">{hostId}</GenericFieldLabel>
+          <GenericFieldLabel label="Host Name">{hostName}</GenericFieldLabel>
+        </>
+      )}
+      <GenericFieldLabel label="Macro Type">
+        {isTextMacro(macroType) ? "Text" : "Secret"}
+      </GenericFieldLabel>
+    </>
+  );
+};
@@ -0,0 +1,18 @@
+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 RailwaySyncDestinationSchema = BaseSecretSyncSchema().merge(
+  z.object({
+    destination: z.literal(SecretSync.Railway),
+    destinationConfig: z.object({
+      projectId: z.string().min(1, "Project ID is required"),
+      projectName: z.string(),
+      environmentName: z.string(),
+      environmentId: z.string().min(1, "Environment is required"),
+      serviceId: z.string().optional(),
+      serviceName: z.string().optional()
+    })
+  })
+);
@@ -17,11 +17,13 @@ import { HCVaultSyncDestinationSchema } from "./hc-vault-sync-destination-schema
 import { HerokuSyncDestinationSchema } from "./heroku-sync-destination-schema";
 import { HumanitecSyncDestinationSchema } from "./humanitec-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";
 import { TeamCitySyncDestinationSchema } from "./teamcity-sync-destination-schema";
 import { TerraformCloudSyncDestinationSchema } from "./terraform-cloud-destination-schema";
 import { VercelSyncDestinationSchema } from "./vercel-sync-destination-schema";
 import { WindmillSyncDestinationSchema } from "./windmill-sync-destination-schema";
+import { ZabbixSyncDestinationSchema } from "./zabbix-sync-destination-schema";

 const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
  AwsParameterStoreSyncDestinationSchema,
@@ -45,7 +47,9 @@ const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
  RenderSyncDestinationSchema,
  FlyioSyncDestinationSchema,
  GitlabSyncDestinationSchema,
-  CloudflarePagesSyncDestinationSchema
+  CloudflarePagesSyncDestinationSchema,
+  ZabbixSyncDestinationSchema,
+  RailwaySyncDestinationSchema
 ]);

 export const SecretSyncFormSchema = SecretSyncUnionSchema;
@@ -0,0 +1,27 @@
+import { z } from "zod";
+
+import { BaseSecretSyncSchema } from "@app/components/secret-syncs/forms/schemas/base-secret-sync-schema";
+import { ZabbixMacroType, ZabbixSyncScope } from "@app/hooks/api/appConnections/zabbix";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const ZabbixSyncDestinationSchema = BaseSecretSyncSchema().merge(
+  z.object({
+    destination: z.literal(SecretSync.Zabbix),
+    destinationConfig: z.discriminatedUnion("scope", [
+      z.object({
+        scope: z.literal(ZabbixSyncScope.Host),
+        hostId: z.string().trim().min(1, "Host ID required"),
+        hostName: z.string().trim().min(1, "Host name required"),
+        macroType: z.nativeEnum(ZabbixMacroType, {
+          errorMap: () => ({ message: "Macro type must be either 'text' or 'secret'" })
+        })
+      }),
+      z.object({
+        scope: z.literal(ZabbixSyncScope.Global),
+        macroType: z.nativeEnum(ZabbixMacroType, {
+          errorMap: () => ({ message: "Macro type must be either 'text' or 'secret'" })
+        })
+      })
+    ])
+  })
+);
@@ -77,3 +77,91 @@ export const parseJson = (src: ArrayBuffer | string) => {
  });
  return env;
 };
+
+/**
+ * Parses simple flat YAML with support for multiline strings using |, |-, and >.
+ * @param {ArrayBuffer | string} src
+ * @returns {Record<string, { value: string, comments: string[] }>}
+ */
+export function parseYaml(src: ArrayBuffer | string) {
+  const result: Record<string, { value: string; comments: string[] }> = {};
+
+  const content = src.toString().replace(/\r\n?/g, "\n");
+  const lines = content.split("\n");
+
+  let i = 0;
+  let comments: string[] = [];
+
+  while (i < lines.length) {
+    const line = lines[i].trim();
+
+    // Collect comment
+    if (line.startsWith("#")) {
+      comments.push(line.slice(1).trim());
+      i += 1; // move to next line
+    } else {
+      // Match key: value or key: |, key: >, etc.
+      const keyMatch = lines[i].match(/^([\w.-]+)\s*:\s*(.*)$/);
+      if (keyMatch) {
+        const [, key, rawValue] = keyMatch;
+        let value = rawValue.trim();
+
+        // Multiline string handling
+        if (value === "|-" || value === "|" || value === ">") {
+          const isFolded = value === ">";
+
+          const baseIndent = lines[i + 1]?.match(/^(\s*)/)?.[1]?.length ?? 0;
+          const collectedLines: string[] = [];
+
+          i += 1; // move to first content line
+
+          while (i < lines.length) {
+            const current = lines[i];
+            const currentIndent = current.match(/^(\s*)/)?.[1]?.length ?? 0;
+
+            if (current.trim() === "" || currentIndent >= baseIndent) {
+              collectedLines.push(current.slice(baseIndent));
+              i += 1; // move to next line
+            } else {
+              break;
+            }
+          }
+
+          if (isFolded) {
+            // Join lines with space for `>` folded style
+            value = collectedLines.map((l) => l.trim()).join(" ");
+          } else {
+            // Keep lines with newlines for `|` and `|-`
+            value = collectedLines.join("\n");
+          }
+        } else {
+          // Inline value — strip quotes and inline comment
+          const commentIndex = value.indexOf(" #");
+          if (commentIndex !== -1) {
+            value = value.slice(0, commentIndex).trim();
+          }
+
+          // Remove surrounding quotes
+          if (
+            (value.startsWith('"') && value.endsWith('"')) ||
+            (value.startsWith("'") && value.endsWith("'"))
+          ) {
+            value = value.slice(1, -1);
+          }
+
+          i += 1; // advance to next line
+        }
+
+        result[key] = {
+          value,
+          comments: [...comments]
+        };
+        comments = []; // reset
+      } else {
+        i += 1; // skip unknown line
+      }
+    }
+  }
+
+  return result;
+}
@@ -33,7 +33,7 @@ export const ContentLoader = ({ text, frequency = 2000, className }: Props) => {
        className
      )}
    >
-      <Lottie icon="infisical_loading" className="h-32 w-32" />
+      <Lottie isAutoPlay icon="infisical_loading" className="h-32 w-32" />
      {text && isTextArray && (
        <AnimatePresence mode="wait">
          <motion.div
@@ -0,0 +1,36 @@
+import { MouseEventHandler } from "react";
+
+export const HeaderResizer = ({
+  onMouseDown,
+  isActive,
+  scrollOffset,
+  heightOffset
+}: {
+  onMouseDown: MouseEventHandler<HTMLDivElement>;
+  isActive: boolean;
+  scrollOffset: number;
+  heightOffset: number;
+}) => {
+  return (
+    <>
+      <div
+        tabIndex={-1}
+        role="button"
+        className={`absolute left-0 z-40 h-0.5 w-full cursor-ns-resize hover:bg-blue-400/20 ${
+          isActive ? "bg-blue-400/75" : "bg-transparent"
+        }`}
+        onMouseDown={onMouseDown}
+        style={{
+          transform: "translateY(50%)",
+          top: heightOffset
+        }}
+      />
+      <div
+        style={{ left: `calc(50% + ${scrollOffset}px)`, top: heightOffset }}
+        className="pointer-events-none absolute z-30 -translate-x-1/2"
+      >
+        <div className="h-1 w-8 rounded bg-gray-400 opacity-50" />
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,42 @@
+export const HighlightText = ({
+  text,
+  highlight,
+  highlightClassName
+}: {
+  text: string | undefined | null;
+  highlight: string;
+  highlightClassName?: string;
+}) => {
+  if (!text) return null;
+  const searchTerm = highlight.toLowerCase().trim();
+
+  if (!searchTerm) return <span>{text}</span>;
+
+  const parts: React.ReactNode[] = [];
+  let lastIndex = 0;
+
+  const escapedSearchTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const regex = new RegExp(escapedSearchTerm, "gi");
+
+  text.replace(regex, (match: string, offset: number) => {
+    if (offset > lastIndex) {
+      parts.push(<span key={`pre-${lastIndex}`}>{text.substring(lastIndex, offset)}</span>);
+    }
+
+    parts.push(
+      <span key={`match-${offset}`} className={highlightClassName || "bg-yellow/30"}>
+        {match}
+      </span>
+    );
+
+    lastIndex = offset + match.length;
+
+    return match;
+  });
+
+  if (lastIndex < text.length) {
+    parts.push(<span key={`post-${lastIndex}`}>{text.substring(lastIndex)}</span>);
+  }
+
+  return parts;
+};
@@ -0,0 +1 @@
+export { HighlightText } from "./HighlightText";
@@ -45,10 +45,14 @@ export const Table = ({ children, className }: TableProps): JSX.Element => (
 export type THeadProps = {
  children: ReactNode;
  className?: string;
+  style?: React.CSSProperties;
 };

-export const THead = ({ children, className }: THeadProps): JSX.Element => (
-  <thead className={twMerge("bg-mineshaft-800 text-xs uppercase text-bunker-300", className)}>
+export const THead = ({ children, className, style }: THeadProps): JSX.Element => (
+  <thead
+    className={twMerge("bg-mineshaft-800 text-xs uppercase text-bunker-300", className)}
+    style={style}
+  >
    {children}
  </thead>
 );
@@ -96,14 +100,16 @@ export const Tr = ({
 export type ThProps = {
  children?: ReactNode;
  className?: string;
+  style?: React.CSSProperties;
 };

-export const Th = ({ children, className }: ThProps): JSX.Element => (
+export const Th = ({ children, className, style }: ThProps): JSX.Element => (
  <th
    className={twMerge(
      "border-b-2 border-mineshaft-600 bg-mineshaft-800 px-5 pb-3.5 pt-4 font-semibold",
      className
    )}
+    style={style}
  >
    {children}
  </th>
@@ -43,23 +43,25 @@ export const Tooltip = ({
      onOpenChange={onOpenChange}
    >
      <TooltipPrimitive.Trigger asChild={asChild}>{children}</TooltipPrimitive.Trigger>
-      <TooltipPrimitive.Content
-        side={position}
-        align="center"
-        sideOffset={5}
-        {...props}
-        className={twMerge(
-          "z-50 max-w-[15rem] select-none border border-mineshaft-600 bg-mineshaft-800 font-light text-bunker-200 shadow-md data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade",
-          isDisabled && "!hidden",
-          center && "text-center",
-          size === "sm" && "rounded-sm px-2 py-1 text-xs",
-          size === "md" && "rounded-md px-4 py-2 text-sm",
-          className
-        )}
-      >
-        {content}
-        <TooltipPrimitive.Arrow width={11} height={5} className="fill-mineshaft-600" />
-      </TooltipPrimitive.Content>
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+          side={position}
+          align="center"
+          sideOffset={5}
+          {...props}
+          className={twMerge(
+            "z-50 max-w-[15rem] select-none border border-mineshaft-600 bg-mineshaft-800 font-light text-bunker-200 shadow-md data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade",
+            isDisabled && "!hidden",
+            center && "text-center",
+            size === "sm" && "rounded-sm px-2 py-1 text-xs",
+            size === "md" && "rounded-md px-4 py-2 text-sm",
+            className
+          )}
+        >
+          {content}
+          <TooltipPrimitive.Arrow width={11} height={5} className="fill-mineshaft-600" />
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
    </TooltipPrimitive.Root>
  ) : (
    // eslint-disable-next-line react/jsx-no-useless-fragment
				`@@ -0,0 +1 @@`
				`export { HighlightText } from "./HighlightText";`