feat: completed github org sync

frontend/src/context/OrgPermissionContext/types.ts

@@ -35,7 +35,8 @@ export enum OrgPermissionSubjects {
   AppConnections = "app-connections",
   Kmip = "kmip",
   Gateway = "gateway",
-  SecretShare = "secret-share"
+  SecretShare = "secret-share",
+  GithubOrgSync = "github-org-sync"
 }
 
 export enum OrgPermissionAdminConsoleAction {
@@ -93,6 +94,7 @@ export type OrgPermissionSet =
   | [OrgPermissionActions, OrgPermissionSubjects.Settings]
   | [OrgPermissionActions, OrgPermissionSubjects.IncidentAccount]
   | [OrgPermissionActions, OrgPermissionSubjects.Scim]
+  | [OrgPermissionActions, OrgPermissionSubjects.GithubOrgSync]
   | [OrgPermissionActions, OrgPermissionSubjects.Sso]
   | [OrgPermissionActions, OrgPermissionSubjects.Ldap]
   | [OrgPermissionGroupActions, OrgPermissionSubjects.Groups]

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

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

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

@@ -0,0 +1,42 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { githubOrgSyncConfigQueryKeys } from "./queries";
+import { TCreateGithubOrgSyncDTO, TUpdateGithubOrgSyncDTO } from "./types";
+
+export const useCreateGithubSyncOrgConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (dto: TCreateGithubOrgSyncDTO) => {
+      return apiRequest.post("/api/v1/github-org-sync-config", dto);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(githubOrgSyncConfigQueryKeys.get());
+    }
+  });
+};
+
+export const useUpdateGithubSyncOrgConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (dto: TUpdateGithubOrgSyncDTO) => {
+      return apiRequest.patch("/api/v1/github-org-sync-config", dto);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(githubOrgSyncConfigQueryKeys.get());
+    }
+  });
+};
+
+export const useDeleteGithubSyncOrgConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: () => {
+      return apiRequest.delete("/api/v1/github-org-sync-config");
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(githubOrgSyncConfigQueryKeys.get());
+    }
+  });
+};

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

@@ -0,0 +1,20 @@
+import { queryOptions } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TGithubOrgSyncConfig } from "./types";
+
+export const githubOrgSyncConfigQueryKeys = {
+  allKey: () => ["github-org-sync-config"],
+  getKey: () => [...githubOrgSyncConfigQueryKeys.allKey(), "list"],
+  get: () =>
+    queryOptions({
+      queryKey: githubOrgSyncConfigQueryKeys.getKey(),
+      queryFn: async () => {
+        const { data } = await apiRequest.get<{ githubOrgSyncConfig: TGithubOrgSyncConfig }>(
+          "/api/v1/github-org-sync-config"
+        );
+        return data.githubOrgSyncConfig;
+      }
+    })
+};

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

@@ -0,0 +1,20 @@
+export type TGithubOrgSyncConfig = {
+  id: string;
+  orgId: string;
+  githubAccessToken: string;
+  githubOrgName: string;
+  createdAt: string;
+  isActive?: boolean;
+};
+
+export interface TCreateGithubOrgSyncDTO {
+  githubOrgName: string;
+  githubOrgAccessToken?: string;
+  isActive?: boolean;
+}
+
+export interface TUpdateGithubOrgSyncDTO {
+  githubOrgName?: string;
+  githubOrgAccessToken?: string;
+  isActive?: boolean;
+}

frontend/src/hooks/api/index.tsx

@@ -12,6 +12,7 @@ export * from "./certificateTemplates";
 export * from "./dynamicSecret";
 export * from "./dynamicSecretLease";
 export * from "./gateways";
+export * from "./githubOrgSyncConfig";
 export * from "./groups";
 export * from "./identities";
 export * from "./identityProjectAdditionalPrivilege";

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

@@ -12,6 +12,7 @@ export type SubscriptionPlan = {
   customAlerts: boolean;
   customRateLimits: boolean;
   pitRecovery: boolean;
+  githubOrgSync: boolean;
   ipAllowlisting: boolean;
   rbac: boolean;
   secretVersioning: boolean;

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

@@ -0,0 +1,172 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, DeleteActionModal, FormControl, Input } from "@app/components/v2";
+import {
+  useCreateGithubSyncOrgConfig,
+  useDeleteGithubSyncOrgConfig,
+  useUpdateGithubSyncOrgConfig
+} from "@app/hooks/api";
+import { TGithubOrgSyncConfig } from "@app/hooks/api/githubOrgSyncConfig/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+  githubOrgName: z.string(),
+  githubOrgAccessToken: z.string().optional()
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  data?: TGithubOrgSyncConfig;
+  popUp: UsePopUpState<["githubOrgSyncConfig", "deleteGithubOrgSyncConfig"]>;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteGithubOrgSyncConfig"]>,
+    data?: {
+      scimTokenId: string;
+    }
+  ) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["githubOrgSyncConfig", "deleteGithubOrgSyncConfig"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const GithubOrgSyncConfigModal = ({
+  popUp,
+  handlePopUpOpen,
+  handlePopUpToggle,
+  data
+}: Props) => {
+  const isUpdate = Boolean(data);
+  const { mutateAsync: createGithubSyncOrgConfig } = useCreateGithubSyncOrgConfig();
+  const { mutateAsync: updateGithubSyncOrgConfig } = useUpdateGithubSyncOrgConfig();
+  const { mutateAsync: deleteGithubSyncOrgConfig } = useDeleteGithubSyncOrgConfig();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    values: data ? { githubOrgName: data.githubOrgName } : undefined
+  });
+
+  const onFormSubmit = async ({ githubOrgName, githubOrgAccessToken }: FormData) => {
+    try {
+      if (isUpdate) {
+        await updateGithubSyncOrgConfig({
+          githubOrgName,
+          githubOrgAccessToken
+        });
+
+        createNotification({
+          text: "Successfully updated GitHub Organization Sync",
+          type: "success"
+        });
+      } else {
+        await createGithubSyncOrgConfig({
+          githubOrgName,
+          githubOrgAccessToken,
+          isActive: false
+        });
+
+        createNotification({
+          text: "Successfully created GitHub Organization Sync",
+          type: "success"
+        });
+      }
+      handlePopUpToggle("githubOrgSyncConfig");
+    } catch {
+      createNotification({
+        text: "Failed to setup GitHub Organization Sync",
+        type: "error"
+      });
+    }
+  };
+
+  const onDelete = async () => {
+    try {
+      await deleteGithubSyncOrgConfig();
+
+      handlePopUpToggle("deleteGithubOrgSyncConfig", false);
+      handlePopUpToggle("githubOrgSyncConfig", false);
+      createNotification({
+        text: "Successfully deleted GitHub Organization Sync",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete GitHub Organization Sync",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onFormSubmit)}>
+        <Controller
+          control={control}
+          defaultValue=""
+          name="githubOrgName"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="GitHub Organization Name"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input {...field} placeholder="example" />
+            </FormControl>
+          )}
+        />
+        {/* <Controller
+          control={control}
+          name="githubOrgAccessToken"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="GitHub Org Scoped 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."
+            >
+              <Input {...field} placeholder="example" />
+            </FormControl>
+          )}
+        /> */}
+        <div className="flex gap-8 pt-4">
+          <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
+            {isUpdate ? "Update" : "Configure"}
+          </Button>
+          <Button
+            variant="plain"
+            colorSchema="secondary"
+            onClick={() => handlePopUpToggle("deleteGithubOrgSyncConfig", false)}
+          >
+            Cancel
+          </Button>
+          <div className="flex-grow" />
+          {isUpdate && (
+            <Button
+              onClick={() => handlePopUpOpen("deleteGithubOrgSyncConfig")}
+              colorSchema="danger"
+            >
+              Delete
+            </Button>
+          )}
+        </div>
+      </form>
+      <DeleteActionModal
+        isOpen={popUp.deleteGithubOrgSyncConfig.isOpen}
+        title="Are you sure want to remove GitHub organization sync?"
+        onChange={(isOpen) => handlePopUpToggle("githubOrgSyncConfig", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={onDelete}
+      />
+    </>
+  );
+};

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OrgAuthTab.tsx

@@ -18,6 +18,7 @@ import { LDAPModal } from "./LDAPModal";
 import { OIDCModal } from "./OIDCModal";
 import { OrgGeneralAuthSection } from "./OrgGeneralAuthSection";
 import { OrgGenericAuthSection } from "./OrgGenericAuthSection";
+import { OrgGithubSyncSection } from "./OrgGithubSyncSection";
 import { OrgLDAPSection } from "./OrgLDAPSection";
 import { OrgOIDCSection } from "./OrgOIDCSection";
 import { OrgScimSection } from "./OrgSCIMSection";
@@ -181,6 +182,7 @@ export const OrgAuthTab = withPermission(
           </>
         )}
         <OrgScimSection />
+        <OrgGithubSyncSection />
         <UpgradePlanModal
           isOpen={popUp.upgradePlan.isOpen}
           onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}

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

@@ -0,0 +1,114 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+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 { usePopUp } from "@app/hooks/usePopUp";
+
+import { GithubOrgSyncConfigModal } from "./GithubOrgSyncConfigModal";
+
+export const OrgGithubSyncSection = () => {
+  const { subscription } = useSubscription();
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "upgradePlan",
+    "githubOrgSyncConfig",
+    "deleteGithubOrgSyncConfig"
+  ] as const);
+
+  const githubOrgSyncConfig = useQuery({
+    ...githubOrgSyncConfigQueryKeys.get(),
+    enabled: subscription.githubOrgSync,
+    retry: false
+  });
+
+  const updateGithubSyncOrgConfig = useUpdateGithubSyncOrgConfig();
+
+  const isPending = subscription.githubOrgSync && githubOrgSyncConfig.isPending;
+  const data = !isPending && !githubOrgSyncConfig?.isError ? githubOrgSyncConfig?.data : undefined;
+
+  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">
+        Sync user groups from your GitHub Organization
+      </p>
+      <div className="py-4">
+        <div className="mb-2 flex items-center justify-between">
+          <h2 className="text-md text-mineshaft-100">GitHub Organization</h2>
+          <div className="flex gap-4">
+            <OrgPermissionCan I={OrgPermissionActions.Read} a={OrgPermissionSubjects.GithubOrgSync}>
+              {(isAllowed) => (
+                <Button
+                  onClick={() =>
+                    subscription.githubOrgSync
+                      ? handlePopUpOpen("githubOrgSyncConfig")
+                      : handlePopUpOpen("upgradePlan")
+                  }
+                  colorSchema="secondary"
+                  isDisabled={!isAllowed}
+                  isLoading={isPending}
+                >
+                  Configure
+                </Button>
+              )}
+            </OrgPermissionCan>
+          </div>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          {isPending ? <Skeleton /> : null}
+          {data ? data?.githubOrgName : "Not configured"}
+        </p>
+      </div>
+      {data && (
+        <div className="py-4">
+          <div className="mb-2 flex items-center justify-between">
+            <h2 className="text-md text-mineshaft-100">Enable GitHub Sync</h2>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.GithubOrgSync}>
+              {(isAllowed) => (
+                <Switch
+                  id="enable-sync"
+                  onCheckedChange={(value) =>
+                    updateGithubSyncOrgConfig.mutate({
+                      isActive: value
+                    })
+                  }
+                  isChecked={githubOrgSyncConfig?.data?.isActive ?? false}
+                  isDisabled={!isAllowed}
+                >
+                  {updateGithubSyncOrgConfig?.isPending && <Spinner size="xs" />}
+                </Switch>
+              )}
+            </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            Allow group provisioning/deprovisioning with GitHub
+          </p>
+        </div>
+      )}
+      <Modal
+        isOpen={popUp?.githubOrgSyncConfig?.isOpen}
+        onOpenChange={(isOpen) => {
+          handlePopUpToggle("githubOrgSyncConfig", isOpen);
+        }}
+      >
+        <ModalContent
+          title="Manage GitHub Organization Sync"
+          subTitle="Sync your GitHub teams to Infisical organization groups"
+        >
+          <GithubOrgSyncConfigModal
+            data={data}
+            popUp={popUp}
+            handlePopUpOpen={handlePopUpOpen}
+            handlePopUpToggle={handlePopUpToggle}
+          />
+        </ModalContent>
+      </Modal>
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can use GitHub Organization Plan if you switch to Infisical's Enterprise plan."
+      />
+    </div>
+  );
+};