-
-
- - Infisical is excited to announce{" "} - - Secret Syncs - - , a new way to sync your secrets to third-party services using{" "} - - App Connections - - , offering deeper customization and re-configurability. -
-- Existing integrations (now called Native Integrations) will continue to be supported - as we build out our Secret Sync library. -
-
+
+ Legacy
+
+
+
+
+
+ + Native integrations are now a legacy feature and will begin deprecation in 2026. + We recommend migrating to our new{" "} + + Secret Syncs + {" "} + feature which offers the same functionality as Native Integrations with improved + stability, insights, re-configurability, and customization. +
+ null}
- role="button"
- tabIndex={0}
- className={`group relative ${
- cloudIntegration.isAvailable
- ? "cursor-pointer duration-200 hover:bg-mineshaft-700"
- : "opacity-50"
- } flex h-32 flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4`}
- onClick={() => {
- if (!cloudIntegration.isAvailable) return;
- if (
- permission.cannot(
- ProjectPermissionActions.Create,
- ProjectPermissionSub.Integrations
- )
- ) {
- createNotification({
- type: "error",
- text: "You do not have permission to create an integration"
- });
- return;
- }
- onIntegrationStart(cloudIntegration.slug);
- }}
- key={cloudIntegration.slug}
- >
- 
-
-
- {cloudIntegration.name}
-
- {cloudIntegration.isAvailable &&
- Boolean(integrationAuths?.[cloudIntegration.slug]) && (
-
- handlePopUpToggle("addSync", isOpen)}
/>
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/route.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/route.tsx
index 7a5f70622..c31773546 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/route.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/route.tsx
@@ -6,6 +6,7 @@ import { workspaceKeys } from "@app/hooks/api";
import { TIntegration } from "@app/hooks/api/integrations/types";
import {
fetchSecretSyncsByProjectId,
+ SecretSync,
secretSyncKeys,
TSecretSync
} from "@app/hooks/api/secretSyncs";
@@ -15,7 +16,8 @@ import { IntegrationsListPageTabs } from "@app/types/integrations";
import { IntegrationsListPage } from "./IntegrationsListPage";
const IntegrationsListPageQuerySchema = z.object({
- selectedTab: z.nativeEnum(IntegrationsListPageTabs).optional()
+ selectedTab: z.nativeEnum(IntegrationsListPageTabs).optional(),
+ addSync: z.nativeEnum(SecretSync).optional()
});
export const Route = createFileRoute(
-
- {
const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["addSync"] as const);
+ const { addSync, ...search } = useSearch({
+ from: ROUTE_PATHS.SecretManager.IntegrationsListPage.id
+ });
+
+ const navigate = useNavigate();
+
const { currentWorkspace } = useWorkspace();
+ useEffect(() => {
+ if (!addSync) return;
+
+ handlePopUpOpen("addSync", addSync);
+ navigate({
+ to: ROUTE_PATHS.SecretManager.IntegrationsListPage.path,
+ params: {
+ projectId: currentWorkspace.id
+ },
+ search
+ });
+ }, [addSync]);
+
const { data: secretSyncs = [], isPending: isSecretSyncsPending } = useListSecretSyncs(
currentWorkspace.id,
{
@@ -76,6 +98,7 @@ export const SecretSyncsTab = () => {
-
- null}
- role="button"
- tabIndex={0}
- onClick={async (event) => {
- event.stopPropagation();
- handlePopUpOpen("deleteConfirmation", {
- provider: cloudIntegration.slug
- });
- }}
- className="absolute right-0 top-0 flex h-0 w-12 cursor-pointer items-center justify-center overflow-hidden rounded-r-md bg-red text-xs opacity-50 transition-all duration-300 hover:opacity-100 group-hover:h-full"
- >
-
+ );
+ })
) : (
null}
+ role="button"
+ tabIndex={0}
+ className={`group relative ${
+ cloudIntegration.isAvailable
+ ? "cursor-pointer duration-200 hover:bg-mineshaft-700"
+ : "opacity-50"
+ } flex h-36 flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-3`}
+ onClick={() => {
+ if (isSyncAvailable) {
+ navigate({
+ to: ROUTE_PATHS.SecretManager.IntegrationsListPage.path,
+ params: {
+ projectId: currentWorkspace.id
+ },
+ search: {
+ selectedTab: IntegrationsListPageTabs.SecretSyncs,
+ addSync: syncSlug as SecretSync
+ }
+ });
+ return;
+ }
+ if (!cloudIntegration.isAvailable) return;
+ if (
+ permission.cannot(
+ ProjectPermissionActions.Create,
+ ProjectPermissionSub.Integrations
+ )
+ ) {
+ createNotification({
+ type: "error",
+ text: "You do not have permission to create an integration"
+ });
+ return;
+ }
+ onIntegrationStart(cloudIntegration.slug);
+ }}
+ key={cloudIntegration.slug}
+ >
+
- ))
+
+
+
+ {cloudIntegration.isAvailable &&
+ Boolean(integrationAuths?.[cloudIntegration.slug]) && (
+
+
+ {cloudIntegration.name}
+
+
+
+ )}
+ {isSyncAvailable && (
+
+
+
+
+
+
-
+ null}
+ role="button"
+ tabIndex={0}
+ onClick={async (event) => {
+ event.stopPropagation();
+ handlePopUpOpen("deleteConfirmation", {
+ provider: cloudIntegration.slug
+ });
+ }}
+ className="absolute right-0 top-0 flex h-0 w-12 cursor-pointer items-center justify-center overflow-hidden rounded-r-md bg-red text-xs opacity-50 transition-all duration-300 hover:opacity-100 group-hover:h-full"
+ >
+
+
+
)}
-
+
+ Secret Sync Available
+