feat: added handling of using same connection with different projects

frontend/src/hooks/api/integrationAuth/index.tsx

@@ -1,3 +1,4 @@
+export { useDuplicateIntegrationAuth } from "./mutations";
 export {
   useAuthorizeIntegration,
   useDeleteIntegrationAuth,

frontend/src/hooks/api/integrationAuth/mutations.tsx

@@ -0,0 +1,19 @@
+import { useMutation } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { IntegrationAuth, TDuplicateIntegrationAuthDTO } from "./types";
+
+// For now, this should only be used in the Github app integration flow.
+export const useDuplicateIntegrationAuth = () => {
+  return useMutation<IntegrationAuth, {}, TDuplicateIntegrationAuthDTO>({
+    mutationFn: async (body) => {
+      const { data } = await apiRequest.post<{ integrationAuth: IntegrationAuth }>(
+        `/api/v1/integration-auth/${body.integrationAuthId}/duplicate`,
+        body
+      );
+
+      return data.integrationAuth;
+    }
+  });
+};

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

@@ -11,6 +11,7 @@ export type IntegrationAuth = {
   teamId?: string;
   metadata: {
     installationName?: string;
+    installationId?: string;
   };
 };
 
@@ -87,3 +88,8 @@ export type TeamCityBuildConfig = {
   name: string;
   buildConfigId: string;
 };
+
+export type TDuplicateIntegrationAuthDTO = {
+  integrationAuthId: string;
+  projectId: string;
+};

frontend/src/hooks/api/organization/index.ts

@@ -8,8 +8,9 @@ export {
   useDeleteOrgTaxId,
   useGetIdentityMembershipOrgs,
   useGetOrganizationGroups,
-  useGetOrganizations, 
+  useGetOrganizations,
   useGetOrgBillingDetails,
+  useGetOrgIntegrationAuths,
   useGetOrgInvoices,
   useGetOrgLicenses,
   useGetOrgPlanBillingInfo,
@@ -20,4 +21,4 @@ export {
   useGetOrgTrialUrl,
   useUpdateOrg,
   useUpdateOrgBillingDetails
-} from "./queries";
+} from "./queries";

frontend/src/hooks/api/organization/queries.tsx

@@ -4,6 +4,7 @@ import { apiRequest } from "@app/config/request";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 
 import { TGroupOrgMembership } from "../groups/types";
+import { IntegrationAuth } from "../types";
 import {
   BillingDetails,
   Invoice,
@@ -39,7 +40,8 @@ export const organizationKeys = {
     ...params
   }: TListOrgIdentitiesDTO) =>
     [...organizationKeys.getOrgIdentityMemberships(orgId), params] as const,
-  getOrgGroups: (orgId: string) => [{ orgId }, "organization-groups"] as const
+  getOrgGroups: (orgId: string) => [{ orgId }, "organization-groups"] as const,
+  getOrgIntegrationAuths: (orgId: string) => [{ orgId }, "integration-auths"] as const
 };
 
 export const fetchOrganizations = async () => {
@@ -463,3 +465,21 @@ export const useGetOrganizationGroups = (organizationId: string) => {
     }
   });
 };
+
+export const useGetOrgIntegrationAuths = <TData = IntegrationAuth[],>(
+  organizationId: string,
+  select?: (data: IntegrationAuth[]) => TData
+) => {
+  return useQuery({
+    queryKey: organizationKeys.getOrgIntegrationAuths(organizationId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ authorizations: IntegrationAuth[] }>(
+        `/api/v1/organization/${organizationId}/integration-authorizations`
+      );
+
+      return data.authorizations;
+    },
+    enabled: Boolean(organizationId),
+    select
+  });
+};

frontend/src/pages/integrations/github/auth-mode-selection.tsx

@@ -24,7 +24,7 @@ export default function GithubIntegrationAuthModeSelectionPage() {
       <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <CardTitle
           className="px-6 text-left text-xl"
-          subTitle="Select how you'd like to integrate with GitHub. For more precise control, we recommend using the GitHub App method."
+          subTitle="Select how you'd like to integrate with GitHub. We recommend using the GitHub App method for fine-grained access."
         >
           <div className="flex flex-row items-center">
             <div className="flex items-center pb-0.5">
@@ -61,7 +61,7 @@ export default function GithubIntegrationAuthModeSelectionPage() {
               router.push("/integrations/select-integration-auth?integrationSlug=github");
             }}
           >
-            Connect with Github App
+            Connect with App
           </Button>
           <Button
             colorSchema="primary"
@@ -78,7 +78,7 @@ export default function GithubIntegrationAuthModeSelectionPage() {
               );
             }}
           >
-            Connect with Github OAuth
+            Connect with OAuth
           </Button>
         </div>
       </Card>

frontend/src/pages/integrations/select-integration-auth.tsx

@@ -6,46 +6,93 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 
 import { Button, Card, CardTitle } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
-import { useGetCloudIntegrations, useGetWorkspaceAuthorizations } from "@app/hooks/api";
+import { useOrganization, useWorkspace } from "@app/context";
+import {
+  useDuplicateIntegrationAuth,
+  useGetCloudIntegrations,
+  useGetOrgIntegrationAuths
+} from "@app/hooks/api";
 import { IntegrationAuth } from "@app/hooks/api/types";
 
 export default function SelectIntegrationAuthPage() {
   const router = useRouter();
   const { data: cloudIntegrations } = useGetCloudIntegrations();
+  const { currentOrg } = useOrganization();
   const { currentWorkspace } = useWorkspace();
-  const workspaceId = currentWorkspace?.id || "";
+  const orgId = currentOrg?.id || "";
 
   const integrationSlug = router.query.integrationSlug as string;
 
   const currentIntegration = cloudIntegrations?.find(
     (integration) => integration.slug === integrationSlug
   );
+  const { mutateAsync: duplicateIntegrationAuth, isLoading: isIntegrationAuthSelectLoading } =
+    useDuplicateIntegrationAuth();
 
+  // 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
   const { data: integrationAuths, isLoading: isLoadingIntegrationAuths } =
-    useGetWorkspaceAuthorizations(
-      workspaceId,
-      useCallback((data: IntegrationAuth[]) => {
-        const filteredIntegrationAuths = data.filter(
-          (integrationAuth) => integrationAuth.integration === integrationSlug
-        );
-
-        if (integrationSlug === "github") {
-          // for now, we only display the integration auths for Github apps
-          return filteredIntegrationAuths.filter((integrationAuth) =>
-            Boolean(integrationAuth.metadata?.installationName)
+    useGetOrgIntegrationAuths(
+      orgId,
+      useCallback(
+        (data: IntegrationAuth[]) => {
+          const filteredIntegrationAuths = data.filter(
+            (integrationAuth) => integrationAuth.integration === integrationSlug
           );
-        }
 
-        return [];
-      }, [])
+          if (integrationSlug === "github") {
+            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
+                  );
+
+                  if (!isProcessedInstallationId) {
+                    installationIds.add(integrationAuth.metadata.installationId as string);
+                  }
+
+                  return !isProcessedInstallationId;
+                })
+            );
+          }
+
+          return [];
+        },
+        [integrationSlug]
+      )
     );
 
   const logo = integrationSlug === "github" ? "/images/integrations/GitHub.png" : "";
 
-  const handleConnectionSelect = (integrationAuthId: string) => {
+  const handleConnectionSelect = async (integrationAuth: IntegrationAuth) => {
     if (integrationSlug === "github") {
-      router.push(`/integrations/github/create?integrationAuthId=${integrationAuthId}`);
+      if (integrationAuth.projectId === currentWorkspace?.id) {
+        router.push(`/integrations/github/create?integrationAuthId=${integrationAuth.id}`);
+      } else {
+        // we create a copy of the existing integration auth from another project to the current project
+        const newIntegrationAuth = await duplicateIntegrationAuth({
+          projectId: currentWorkspace?.id || "",
+          integrationAuthId: integrationAuth.id
+        });
+
+        router.push(`/integrations/github/create?integrationAuthId=${newIntegrationAuth.id}`);
+      }
     }
   };
 
@@ -93,10 +140,11 @@ export default function SelectIntegrationAuthPage() {
                     colorSchema="gray"
                     variant="outline"
                     className="mt-3 w-3/4"
+                    isDisabled={isIntegrationAuthSelectLoading}
                     key={integrationAuth.id}
                     size="sm"
                     type="submit"
-                    onClick={() => handleConnectionSelect(integrationAuth.id)}
+                    onClick={() => handleConnectionSelect(integrationAuth)}
                   >
                     {connectionName}
                   </Button>