awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-05 19:26:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

misc: added auto redirect to new connection flow

Browse Source
This commit is contained in:
Sheen Capadngan
2024-10-15 19:04:40 +08:00
parent 4a1adb76ab
commit 82c8ca9c3d
1 changed files with 72 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/integrations/select-integration-auth.tsx
+72 -52
View File
@@ -1,11 +1,11 @@
import crypto from "crypto"; import crypto from "crypto";
import { useCallback } from "react"; import { useCallback, useEffect } from "react";
import Head from "next/head"; import Head from "next/head";
import Image from "next/image"; import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Button, Card, CardTitle } from "@app/components/v2"; import { Button, Card, CardTitle, ContentLoader } from "@app/components/v2";
import { useOrganization, useWorkspace } from "@app/context"; import { useOrganization, useWorkspace } from "@app/context";
import { import {
useDuplicateIntegrationAuth, useDuplicateIntegrationAuth,
@@ -31,52 +31,77 @@ export default function SelectIntegrationAuthPage() {
// for Github, we want to reuse the same connection across the Infisical organization // for Github, we want to reuse the same connection across the Infisical organization
// when we do need to reuse this page for other integrations, add handling to fetch workspace integration auths instead // when we do need to reuse this page for other integrations, add handling to fetch workspace integration auths instead
const { data: integrationAuths, isLoading: isLoadingIntegrationAuths } = const {
useGetOrgIntegrationAuths( data: integrationAuths,
orgId, isLoading: isLoadingIntegrationAuths,
useCallback( isSuccess: isLoadingIntegrationAuthsSuccess
(data: IntegrationAuth[]) => { } = useGetOrgIntegrationAuths(
const filteredIntegrationAuths = data.filter( orgId,
(integrationAuth) => integrationAuth.integration === integrationSlug useCallback(
(data: IntegrationAuth[]) => {
const filteredIntegrationAuths = data.filter(
(integrationAuth) => integrationAuth.integration === integrationSlug
);
if (integrationSlug === "github") {
const sameProjectIntegrationAuths = filteredIntegrationAuths.filter(
(auth) => auth.projectId === currentWorkspace?.id
);
const differentProjectIntegrationAuths = filteredIntegrationAuths.filter(
(auth) => auth.projectId !== currentWorkspace?.id
); );
if (integrationSlug === "github") { const installationIds = new Set<string>();
const sameProjectIntegrationAuths = filteredIntegrationAuths.filter(
(auth) => auth.projectId === currentWorkspace?.id
);
const differentProjectIntegrationAuths = filteredIntegrationAuths.filter(
(auth) => auth.projectId !== currentWorkspace?.id
);
const installationIds = new Set<string>(); // for now, we only display the integration auths for Github apps
return (
// we concatenate it this way so that integration auths from the same project are prioritized for display
sameProjectIntegrationAuths
.concat(differentProjectIntegrationAuths)
.filter((integrationAuth) => Boolean(integrationAuth.metadata?.installationId))
// we filter it so that we only show unique installations because the same installation/connection
// can be used in multiple integration auths
.filter((integrationAuth) => {
const isProcessedInstallationId = installationIds.has(
integrationAuth.metadata.installationId as string
);
// for now, we only display the integration auths for Github apps if (!isProcessedInstallationId) {
return ( installationIds.add(integrationAuth.metadata.installationId as string);
// we concatenate it this way so that integration auths from the same project are prioritized for display }
sameProjectIntegrationAuths
.concat(differentProjectIntegrationAuths)
.filter((integrationAuth) => Boolean(integrationAuth.metadata?.installationId))
// we filter it so that we only show unique installations because the same installation/connection
// can be used in multiple integration auths
.filter((integrationAuth) => {
const isProcessedInstallationId = installationIds.has(
integrationAuth.metadata.installationId as string
);
if (!isProcessedInstallationId) { return !isProcessedInstallationId;
installationIds.add(integrationAuth.metadata.installationId as string); })
} );
}
return !isProcessedInstallationId; return [];
}) },
); [integrationSlug]
} )
);
return []; const handleNewConnection = () => {
}, const state = crypto.randomBytes(16).toString("hex");
[integrationSlug] localStorage.setItem("latestCSRFToken", state);
)
); if (integrationSlug === "github") {
// for now we only handle Github apps
window.location.assign(
`https://github.com/apps/${currentIntegration?.clientSlug}/installations/new?state=${state}`
);
}
};
useEffect(() => {
if (
!isLoadingIntegrationAuths &&
integrationAuths?.length === 0 &&
isLoadingIntegrationAuthsSuccess
) {
handleNewConnection();
}
}, [isLoadingIntegrationAuths, integrationAuths, isLoadingIntegrationAuthsSuccess]);
const logo = integrationSlug === "github" ? "/images/integrations/GitHub.png" : ""; const logo = integrationSlug === "github" ? "/images/integrations/GitHub.png" : "";
@@ -96,17 +121,12 @@ export default function SelectIntegrationAuthPage() {
} }
}; };
const handleNewConnection = () => { if (
const state = crypto.randomBytes(16).toString("hex"); isLoadingIntegrationAuths ||
localStorage.setItem("latestCSRFToken", state); (integrationAuths?.length === 0 && isLoadingIntegrationAuthsSuccess)
) {
if (integrationSlug === "github") { return <ContentLoader />;
// for now we only handle Github apps }
window.location.assign(
`https://github.com/apps/${currentIntegration?.clientSlug}/installations/new?state=${state}`
);
}
};
return ( return (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">