Merge pull request #4429 from Infisical/ENG-3533

Add Github Bulk Team Sync

frontend/src/context/OrgPermissionContext/types.ts

@@ -52,6 +52,7 @@ export enum OrgPermissionSubjects {
   Gateway = "gateway",
   SecretShare = "secret-share",
   GithubOrgSync = "github-org-sync",
+  GithubOrgSyncManual = "github-org-sync-manual",
   MachineIdentityAuthTemplate = "machine-identity-auth-template"
 }
 
@@ -115,6 +116,7 @@ export type OrgPermissionSet =
   | [OrgPermissionActions, OrgPermissionSubjects.IncidentAccount]
   | [OrgPermissionActions, OrgPermissionSubjects.Scim]
   | [OrgPermissionActions, OrgPermissionSubjects.GithubOrgSync]
+  | [OrgPermissionActions, OrgPermissionSubjects.GithubOrgSyncManual]
   | [OrgPermissionActions, OrgPermissionSubjects.Sso]
   | [OrgPermissionActions, OrgPermissionSubjects.Ldap]
   | [OrgPermissionGroupActions, OrgPermissionSubjects.Groups]

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

@@ -1,6 +1,7 @@
 export {
   useCreateGithubSyncOrgConfig,
   useDeleteGithubSyncOrgConfig,
+  useSyncAllGithubTeams,
   useUpdateGithubSyncOrgConfig
 } from "./mutations";
 export { githubOrgSyncConfigQueryKeys } from "./queries";

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

@@ -40,3 +40,19 @@ export const useDeleteGithubSyncOrgConfig = () => {
     }
   });
 };
+
+export const useSyncAllGithubTeams = () => {
+  return useMutation({
+    mutationFn: async (): Promise<{
+      totalUsers: number;
+      errors: string[];
+      createdTeams: string[];
+      updatedTeams: string[];
+      removedMemberships: number;
+      syncDuration: number;
+    }> => {
+      const response = await apiRequest.post("/api/v1/github-org-sync-config/sync-all-teams");
+      return response.data;
+    }
+  });
+};

frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/GithubOrgSyncConfigModal.tsx

@@ -51,7 +51,7 @@ export const GithubOrgSyncConfigModal = ({
     formState: { isSubmitting }
   } = useForm<FormData>({
     resolver: zodResolver(schema),
-    values: data ? { githubOrgName: data.githubOrgName } : undefined
+    values: data ? { githubOrgName: data.githubOrgName, githubOrgAccessToken: "" } : undefined
   });
 
   const onFormSubmit = async ({ githubOrgName, githubOrgAccessToken }: FormData) => {
@@ -123,21 +123,21 @@ export const GithubOrgSyncConfigModal = ({
             </FormControl>
           )}
         />
-        {/* <Controller
+        <Controller
           control={control}
           name="githubOrgAccessToken"
           render={({ field, fieldState: { error } }) => (
             <FormControl
-              label="GitHub Org Scoped Access Token"
+              label="GitHub Access Token"
               isError={Boolean(error)}
               isOptional
               errorText={error?.message}
-              helperText="A GitHub access token is required only for private organizations. It will not be visible after saving."
+              helperText="Required for manual sync operations. The token must have 'read:org' permissions."
             >
-              <Input {...field} placeholder="example" />
+              <Input {...field} type="password" placeholder="ghp_xxxxxxxxxxxx" />
             </FormControl>
           )}
-        /> */}
+        />
         <div className="flex gap-8 pt-4">
           <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
             {isUpdate ? "Update" : "Configure"}

frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/OrgGithubSyncSection.tsx

@@ -1,10 +1,15 @@
 import { useQuery } from "@tanstack/react-query";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, Modal, ModalContent, Skeleton, Spinner, Switch } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
-import { githubOrgSyncConfigQueryKeys, useUpdateGithubSyncOrgConfig } from "@app/hooks/api";
+import {
+  githubOrgSyncConfigQueryKeys,
+  useSyncAllGithubTeams,
+  useUpdateGithubSyncOrgConfig
+} from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { GithubOrgSyncConfigModal } from "./GithubOrgSyncConfigModal";
@@ -24,10 +29,73 @@ export const OrgGithubSyncSection = () => {
   });
 
   const updateGithubSyncOrgConfig = useUpdateGithubSyncOrgConfig();
+  const syncAllTeamsMutation = useSyncAllGithubTeams();
 
   const isPending = subscription.githubOrgSync && githubOrgSyncConfig.isPending;
   const data = !isPending && !githubOrgSyncConfig?.isError ? githubOrgSyncConfig?.data : undefined;
 
+  const handleBulkSync = async () => {
+    try {
+      const result = await syncAllTeamsMutation.mutateAsync();
+      let message = "Successfully synced teams";
+
+      const details = [];
+      if (result.createdTeams.length > 0) {
+        details.push(
+          `${result.createdTeams.length} new team${result.createdTeams.length === 1 ? "" : "s"} created`
+        );
+      }
+      if (result.updatedTeams.length > 0) {
+        details.push(
+          `${result.updatedTeams.length} team${result.updatedTeams.length === 1 ? "" : "s"} updated`
+        );
+      }
+      if (result.removedMemberships > 0) {
+        details.push(
+          `${result.removedMemberships} membership${result.removedMemberships === 1 ? "" : "s"} removed`
+        );
+      }
+
+      if (details.length > 0) {
+        message += `. ${details.join(", ")}`;
+      }
+
+      createNotification({
+        text: message,
+        type: "success"
+      });
+
+      if (result.errors && result.errors.length > 0) {
+        createNotification({
+          text: `Sync completed with ${result.errors.length} warnings. Check the console for details.`,
+          type: "warning"
+        });
+        console.warn("Sync errors:", result.errors);
+      }
+    } catch (error) {
+      const errorMessage =
+        (error as any)?.response?.data?.message || (error as Error)?.message || "Unknown error";
+
+      if (
+        errorMessage.includes("token") &&
+        (errorMessage.includes("required") ||
+          errorMessage.includes("invalid") ||
+          errorMessage.includes("expired") ||
+          errorMessage.includes("set a token first"))
+      ) {
+        createNotification({
+          text: "Please set a GitHub access token in the configuration modal to continue with the sync",
+          type: "error"
+        });
+      } else {
+        createNotification({
+          text: `Failed to sync GitHub teams: ${errorMessage}`,
+          type: "error"
+        });
+      }
+    }
+  };
+
   return (
     <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
       <p className="text-xl font-semibold text-gray-200">
@@ -86,6 +154,33 @@ export const OrgGithubSyncSection = () => {
           </p>
         </div>
       )}
+      {data && data.isActive && (
+        <div className="py-4">
+          <div className="mb-2 flex items-center justify-between">
+            <h2 className="text-md text-mineshaft-100">Sync Now</h2>
+            <OrgPermissionCan
+              I={OrgPermissionActions.Edit}
+              a={OrgPermissionSubjects.GithubOrgSyncManual}
+            >
+              {(isAllowed) => (
+                <Button
+                  onClick={() => handleBulkSync()}
+                  colorSchema="primary"
+                  variant="outline_bg"
+                  isDisabled={!isAllowed || syncAllTeamsMutation.isPending}
+                  isLoading={syncAllTeamsMutation.isPending}
+                >
+                  Sync Now
+                </Button>
+              )}
+            </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            Manually sync GitHub teams for all organization members. This will update team
+            memberships for users who have previously logged in with GitHub.
+          </p>
+        </div>
+      )}
       <Modal
         isOpen={popUp?.githubOrgSyncConfig?.isOpen}
         onOpenChange={(isOpen) => {