Add Github Bulk Team Sync

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

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

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

@@ -40,3 +40,51 @@ export const useDeleteGithubSyncOrgConfig = () => {
     }
   });
 };
+
+export const useSyncAllGithubTeams = () => {
+  return useMutation({
+    mutationFn: async ({
+      githubOrgAccessToken
+    }: {
+      githubOrgAccessToken?: string;
+    } = {}): Promise<{
+      syncedUsersCount: number;
+      skippedUsersCount: number;
+      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", {
+        githubOrgAccessToken
+      });
+      return response.data;
+    }
+  });
+};
+
+export const useValidateGithubToken = () => {
+  return useMutation({
+    mutationFn: async ({
+      githubOrgAccessToken
+    }: {
+      githubOrgAccessToken: string;
+    }): Promise<{
+      valid: boolean;
+      organizationInfo?: {
+        id: number;
+        login: string;
+        name: string;
+        publicRepos?: number;
+        privateRepos?: number;
+      };
+    }> => {
+      const response = await apiRequest.post("/api/v1/github-org-sync-config/validate-token", {
+        githubOrgAccessToken
+      });
+      return response.data;
+    }
+  });
+};

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

@@ -1,10 +1,26 @@
+import { useState } from "react";
 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 {
+  Button,
+  FormControl,
+  Input,
+  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,
+  useValidateGithubToken
+} from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { GithubOrgSyncConfigModal } from "./GithubOrgSyncConfigModal";
@@ -14,9 +30,23 @@ export const OrgGithubSyncSection = () => {
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
     "upgradePlan",
     "githubOrgSyncConfig",
-    "deleteGithubOrgSyncConfig"
+    "deleteGithubOrgSyncConfig",
+    "syncAllTeamsToken"
   ] as const);
 
+  const [accessToken, setAccessToken] = useState("");
+  const [isValidatingToken, setIsValidatingToken] = useState(false);
+  const [tokenValidationResult, setTokenValidationResult] = useState<{
+    valid: boolean;
+    organizationInfo?: {
+      id: number;
+      login: string;
+      name: string;
+      publicRepos?: number;
+      privateRepos?: number;
+    };
+  } | null>(null);
+
   const githubOrgSyncConfig = useQuery({
     ...githubOrgSyncConfigQueryKeys.get(),
     enabled: subscription.githubOrgSync,
@@ -24,10 +54,133 @@ export const OrgGithubSyncSection = () => {
   });
 
   const updateGithubSyncOrgConfig = useUpdateGithubSyncOrgConfig();
+  const syncAllTeamsMutation = useSyncAllGithubTeams();
+  const validateGithubTokenMutation = useValidateGithubToken();
 
   const isPending = subscription.githubOrgSync && githubOrgSyncConfig.isPending;
   const data = !isPending && !githubOrgSyncConfig?.isError ? githubOrgSyncConfig?.data : undefined;
 
+  const handleBulkSync = async (token?: string) => {
+    try {
+      const result = await syncAllTeamsMutation.mutateAsync({
+        githubOrgAccessToken: token
+      });
+      let message = `Successfully synced teams for ${result.syncedUsersCount} out of ${result.totalUsers} users`;
+
+      const details = [];
+      if (result.createdTeams.length > 0) {
+        details.push(`${result.createdTeams.length} new teams created`);
+      }
+      if (result.updatedTeams.length > 0) {
+        details.push(`${result.updatedTeams.length} teams updated`);
+      }
+      if (result.removedMemberships > 0) {
+        details.push(`${result.removedMemberships} memberships removed`);
+      }
+      if (result.skippedUsersCount > 0) {
+        details.push(`${result.skippedUsersCount} users skipped`);
+      }
+
+      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);
+      }
+
+      setAccessToken("");
+      handlePopUpToggle("syncAllTeamsToken", false);
+    } 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"))
+      ) {
+        handlePopUpOpen("syncAllTeamsToken");
+        createNotification({
+          text: errorMessage,
+          type: "error"
+        });
+      } else {
+        createNotification({
+          text: `Failed to sync GitHub teams: ${errorMessage}`,
+          type: "error"
+        });
+      }
+    }
+  };
+
+  const validateToken = async () => {
+    if (!accessToken.trim()) {
+      createNotification({
+        text: "Please enter a GitHub access token",
+        type: "error"
+      });
+      return;
+    }
+
+    setIsValidatingToken(true);
+    try {
+      const result = await validateGithubTokenMutation.mutateAsync({
+        githubOrgAccessToken: accessToken.trim()
+      });
+
+      setTokenValidationResult(result);
+
+      if (result.valid && result.organizationInfo) {
+        createNotification({
+          text: `Token validated successfully for organization: ${result.organizationInfo.name}`,
+          type: "success"
+        });
+      }
+    } catch (error) {
+      const errorMessage =
+        (error as any)?.response?.data?.message ||
+        (error as Error)?.message ||
+        "Token validation failed";
+      createNotification({
+        text: errorMessage,
+        type: "error"
+      });
+      setTokenValidationResult({ valid: false });
+    } finally {
+      setIsValidatingToken(false);
+    }
+  };
+
+  const handleSyncWithToken = async () => {
+    if (!accessToken.trim()) {
+      createNotification({
+        text: "Please enter a GitHub access token",
+        type: "error"
+      });
+      return;
+    }
+
+    if (!tokenValidationResult?.valid) {
+      await validateToken();
+      if (!tokenValidationResult?.valid) {
+        return;
+      }
+    }
+
+    await handleBulkSync(accessToken.trim());
+  };
+
   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 +239,30 @@ 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.GithubOrgSync}>
+              {(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) => {
@@ -109,6 +286,100 @@ export const OrgGithubSyncSection = () => {
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use GitHub Organization Plan if you switch to Infisical's Enterprise plan."
       />
+      <Modal
+        isOpen={popUp?.syncAllTeamsToken?.isOpen}
+        onOpenChange={(isOpen) => {
+          handlePopUpToggle("syncAllTeamsToken", isOpen);
+          if (!isOpen) {
+            setAccessToken("");
+            setTokenValidationResult(null);
+          }
+        }}
+      >
+        <ModalContent
+          title="GitHub Access Token Required"
+          subTitle="Provide a GitHub access token with organization and team access permissions"
+        >
+          <div className="space-y-4">
+            <FormControl label="GitHub Access Token">
+              <div className="space-y-2">
+                <Input
+                  type="password"
+                  placeholder="ghp_xxxxxxxxxxxx"
+                  value={accessToken}
+                  onChange={(e) => {
+                    setAccessToken(e.target.value);
+                    if (tokenValidationResult) {
+                      setTokenValidationResult(null);
+                    }
+                  }}
+                  autoComplete="off"
+                />
+                {tokenValidationResult && (
+                  <div
+                    className={`rounded p-2 text-sm ${tokenValidationResult.valid ? "border border-green-800 bg-green-900/20 text-green-400" : "border border-red-800 bg-red-900/20 text-red-400"}`}
+                  >
+                    {tokenValidationResult.valid && tokenValidationResult.organizationInfo ? (
+                      <div>
+                        <div className="font-medium">✓ Token Valid</div>
+                        <div>
+                          Organization: {tokenValidationResult.organizationInfo.name} (
+                          {tokenValidationResult.organizationInfo.login})
+                        </div>
+                        {tokenValidationResult.organizationInfo.publicRepos !== undefined && (
+                          <div>
+                            Public repos: {tokenValidationResult.organizationInfo.publicRepos}
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="font-medium">✗ Token Invalid</div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </FormControl>
+            <p className="text-sm text-mineshaft-400">
+              The token needs <code>read:org</code> and <code>read:user</code> permissions to access
+              organization teams and members. Once provided and verified, the token will be securely
+              stored for future syncs.
+            </p>
+            <div className="flex justify-between">
+              <Button
+                colorSchema="secondary"
+                variant="outline_bg"
+                onClick={validateToken}
+                isLoading={isValidatingToken}
+                isDisabled={
+                  !accessToken.trim() || isValidatingToken || syncAllTeamsMutation.isPending
+                }
+              >
+                Validate Token
+              </Button>
+              <div className="flex space-x-2">
+                <Button
+                  colorSchema="secondary"
+                  onClick={() => {
+                    handlePopUpToggle("syncAllTeamsToken", false);
+                    setAccessToken("");
+                    setTokenValidationResult(null);
+                  }}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  colorSchema="primary"
+                  onClick={handleSyncWithToken}
+                  isLoading={syncAllTeamsMutation.isPending}
+                  isDisabled={!accessToken.trim() || syncAllTeamsMutation.isPending}
+                >
+                  Sync Teams
+                </Button>
+              </div>
+            </div>
+          </div>
+        </ModalContent>
+      </Modal>
     </div>
   );
 };