mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-15 23:47:06 +00:00
solved merge conflicts
This commit is contained in:
x
+6
@@ -19,6 +19,7 @@ import { GcpConnectionForm } from "./GcpConnectionForm";
|
||||
import { GitHubConnectionForm } from "./GitHubConnectionForm";
|
||||
import { HCVaultConnectionForm } from "./HCVaultConnectionForm";
|
||||
import { HumanitecConnectionForm } from "./HumanitecConnectionForm";
|
||||
import { LdapConnectionForm } from "./LdapConnectionForm";
|
||||
import { MsSqlConnectionForm } from "./MsSqlConnectionForm";
|
||||
import { PostgresConnectionForm } from "./PostgresConnectionForm";
|
||||
import { TeamCityConnectionForm } from "./TeamCityConnectionForm";
|
||||
@@ -93,6 +94,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
|
||||
return <Auth0ConnectionForm onSubmit={onSubmit} />;
|
||||
case AppConnection.HCVault:
|
||||
return <HCVaultConnectionForm onSubmit={onSubmit} />;
|
||||
case AppConnection.LDAP:
|
||||
return <LdapConnectionForm onSubmit={onSubmit} />;
|
||||
case AppConnection.TeamCity:
|
||||
return <TeamCityConnectionForm onSubmit={onSubmit} />;
|
||||
default:
|
||||
@@ -161,8 +164,11 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
|
||||
return <Auth0ConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
|
||||
case AppConnection.HCVault:
|
||||
return <HCVaultConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
|
||||
case AppConnection.LDAP:
|
||||
return <LdapConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
|
||||
case AppConnection.TeamCity:
|
||||
return <TeamCityConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
|
||||
|
||||
default:
|
||||
throw new Error(`Unhandled App ${(appConnection as TAppConnection).app}`);
|
||||
}
|
||||
|
||||
+329
@@ -0,0 +1,329 @@
|
||||
import { useState } from "react";
|
||||
import { Controller, FormProvider, useForm } from "react-hook-form";
|
||||
import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import {
|
||||
Button,
|
||||
FormControl,
|
||||
Input,
|
||||
ModalClose,
|
||||
SecretInput,
|
||||
Select,
|
||||
SelectItem,
|
||||
Switch,
|
||||
TextArea,
|
||||
Tooltip
|
||||
} from "@app/components/v2";
|
||||
import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
|
||||
import { DistinguishedNameRegex } from "@app/helpers/string";
|
||||
import {
|
||||
LdapConnectionMethod,
|
||||
LdapConnectionProvider,
|
||||
TLdapConnection
|
||||
} from "@app/hooks/api/appConnections";
|
||||
import { AppConnection } from "@app/hooks/api/appConnections/enums";
|
||||
|
||||
import {
|
||||
genericAppConnectionFieldsSchema,
|
||||
GenericAppConnectionsFields
|
||||
} from "./GenericAppConnectionFields";
|
||||
|
||||
type Props = {
|
||||
appConnection?: TLdapConnection;
|
||||
onSubmit: (formData: FormData) => Promise<void>;
|
||||
};
|
||||
|
||||
const rootSchema = genericAppConnectionFieldsSchema.extend({
|
||||
app: z.literal(AppConnection.LDAP)
|
||||
});
|
||||
|
||||
const formSchema = z.discriminatedUnion("method", [
|
||||
rootSchema.extend({
|
||||
method: z.literal(LdapConnectionMethod.SimpleBind),
|
||||
credentials: z.object({
|
||||
provider: z.nativeEnum(LdapConnectionProvider),
|
||||
url: z
|
||||
.string()
|
||||
.regex(/^ldaps?:\/\//, 'Must start with "ldaps://" or "ldap://"')
|
||||
.url()
|
||||
.trim()
|
||||
.min(1, "LDAP URL required"),
|
||||
dn: z
|
||||
.string()
|
||||
.trim()
|
||||
.regex(DistinguishedNameRegex, "Invalid Distinguished Name format")
|
||||
.min(1, "Distinguished Name (DN) required"),
|
||||
password: z.string().trim().min(1, "Password required"),
|
||||
sslRejectUnauthorized: z.boolean(),
|
||||
sslCertificate: z
|
||||
.string()
|
||||
.trim()
|
||||
.transform((value) => value || undefined)
|
||||
.optional()
|
||||
})
|
||||
})
|
||||
]);
|
||||
|
||||
type FormData = z.infer<typeof formSchema>;
|
||||
|
||||
export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
|
||||
const isUpdate = Boolean(appConnection);
|
||||
const [selectedTabIndex, setSelectedTabIndex] = useState(0);
|
||||
|
||||
const form = useForm<FormData>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: appConnection ?? {
|
||||
app: AppConnection.LDAP,
|
||||
method: LdapConnectionMethod.SimpleBind,
|
||||
credentials: {
|
||||
provider: LdapConnectionProvider.ActiveDirectory,
|
||||
url: "",
|
||||
dn: "",
|
||||
password: "",
|
||||
sslRejectUnauthorized: true,
|
||||
sslCertificate: undefined
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
formState: { isSubmitting, isDirty },
|
||||
watch
|
||||
} = form;
|
||||
|
||||
const selectedProvider = watch("credentials.provider");
|
||||
const sslEnabled = watch("credentials.url")?.startsWith("ldaps://") ?? false;
|
||||
|
||||
return (
|
||||
<FormProvider {...form}>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
setSelectedTabIndex(0);
|
||||
handleSubmit(onSubmit)(e);
|
||||
}}
|
||||
>
|
||||
{!isUpdate && <GenericAppConnectionsFields />}
|
||||
<div className="grid grid-cols-2 items-center gap-2">
|
||||
<Controller
|
||||
name="method"
|
||||
control={control}
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
tooltipText={`The method you would like to use to connect with ${
|
||||
APP_CONNECTION_MAP[AppConnection.LDAP].name
|
||||
}. This field cannot be changed after creation.`}
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error?.message)}
|
||||
label="Method"
|
||||
>
|
||||
<Select
|
||||
isDisabled={isUpdate}
|
||||
value={value}
|
||||
onValueChange={(val) => onChange(val)}
|
||||
className="w-full border border-mineshaft-500"
|
||||
position="popper"
|
||||
dropdownContainerClassName="max-w-none"
|
||||
>
|
||||
{Object.values(LdapConnectionMethod).map((method) => {
|
||||
return (
|
||||
<SelectItem value={method} key={method}>
|
||||
{getAppConnectionMethodDetails(method).name}
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="credentials.provider"
|
||||
control={control}
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error?.message)}
|
||||
label="LDAP Provider"
|
||||
>
|
||||
<Select
|
||||
isDisabled={isUpdate}
|
||||
value={value}
|
||||
onValueChange={(val) => onChange(val)}
|
||||
className="w-full border border-mineshaft-500 capitalize"
|
||||
position="popper"
|
||||
dropdownContainerClassName="max-w-none"
|
||||
>
|
||||
{Object.values(LdapConnectionProvider).map((provider) => {
|
||||
return (
|
||||
<SelectItem value={provider} className="capitalize" key={provider}>
|
||||
{provider.replace("-", " ")}
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
|
||||
<Tab.List
|
||||
className={`-pb-1 ${selectedTabIndex === 1 ? "mb-3" : "mb-6"} w-full border-b-2 border-mineshaft-600`}
|
||||
>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-30 -mb-[0.14rem] px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
|
||||
selected
|
||||
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
|
||||
: "text-bunker-300"
|
||||
}`
|
||||
}
|
||||
>
|
||||
Configuration
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-30 -mb-[0.14rem] px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
|
||||
selected
|
||||
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
|
||||
: "text-bunker-300"
|
||||
}`
|
||||
}
|
||||
>
|
||||
SSL ({sslEnabled ? "Enabled" : "Disabled"})
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
{selectedTabIndex === 1 && (
|
||||
<div className="mb-2 text-xs text-mineshaft-300">Requires ldaps:// URL</div>
|
||||
)}
|
||||
<Tab.Panels className="mb-4 rounded border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
|
||||
<Tab.Panel>
|
||||
<Controller
|
||||
name="credentials.url"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error?.message)}
|
||||
label="LDAP URL"
|
||||
>
|
||||
<Input {...field} placeholder="ldap://domain-or-ip:389" />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Controller
|
||||
name="credentials.dn"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error?.message)}
|
||||
label="Binding Distinguished Name (DN)"
|
||||
>
|
||||
<Input {...field} placeholder="CN=John,OU=Users,DC=example,DC=com" />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="credentials.password"
|
||||
control={control}
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error?.message)}
|
||||
label="Binding Password"
|
||||
>
|
||||
<SecretInput
|
||||
containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<Controller
|
||||
name="credentials.sslCertificate"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error?.message)}
|
||||
className={sslEnabled ? "" : "opacity-50"}
|
||||
label="SSL Certificate"
|
||||
isOptional
|
||||
>
|
||||
<TextArea
|
||||
className="h-[3.6rem] !resize-none"
|
||||
{...field}
|
||||
isDisabled={!sslEnabled}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="credentials.sslRejectUnauthorized"
|
||||
control={control}
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
className={sslEnabled ? "" : "opacity-50"}
|
||||
isError={Boolean(error?.message)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<Switch
|
||||
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
|
||||
id="ssl-reject-unauthorized"
|
||||
thumbClassName="bg-mineshaft-800"
|
||||
isChecked={sslEnabled ? value : false}
|
||||
onCheckedChange={onChange}
|
||||
isDisabled={!sslEnabled}
|
||||
>
|
||||
<p className="w-[9.5rem]">
|
||||
Reject Unauthorized
|
||||
<Tooltip
|
||||
className="max-w-md"
|
||||
content={
|
||||
<p>
|
||||
If enabled, Infisical will only connect to the server if it has a
|
||||
valid, trusted SSL certificate.
|
||||
</p>
|
||||
}
|
||||
>
|
||||
<FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
|
||||
</Tooltip>
|
||||
</p>
|
||||
</Switch>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
<div className="mt-8 flex items-center">
|
||||
<Button
|
||||
className="mr-4 capitalize"
|
||||
size="sm"
|
||||
type="submit"
|
||||
colorSchema="secondary"
|
||||
isLoading={isSubmitting}
|
||||
isDisabled={isSubmitting || !isDirty}
|
||||
>
|
||||
{isUpdate ? "Update Credentials" : `Connect to ${selectedProvider.replace("-", " ")}`}
|
||||
</Button>
|
||||
<ModalClose asChild>
|
||||
<Button colorSchema="secondary" variant="plain">
|
||||
Cancel
|
||||
</Button>
|
||||
</ModalClose>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
+1
-1
@@ -125,7 +125,7 @@ export const AppConnectionRow = ({
|
||||
<FontAwesomeIcon icon={faEllipsisV} />
|
||||
</IconButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuContent sideOffset={2} align="end">
|
||||
<DropdownMenuItem
|
||||
icon={<FontAwesomeIcon icon={isIdCopied ? faCheck : faCopy} />}
|
||||
onClick={() => handleCopyId()}
|
||||
|
||||
@@ -110,6 +110,7 @@ export const formSchema = z.object({
|
||||
"secret-scanning": generalPermissionSchema,
|
||||
sso: generalPermissionSchema,
|
||||
scim: generalPermissionSchema,
|
||||
[OrgPermissionSubjects.GithubOrgSync]: generalPermissionSchema,
|
||||
ldap: generalPermissionSchema,
|
||||
billing: generalPermissionSchema,
|
||||
identity: identityPermissionSchema,
|
||||
|
||||
+4
@@ -63,6 +63,10 @@ const SIMPLE_PERMISSION_OPTIONS = [
|
||||
title: "SCIM",
|
||||
formName: "scim"
|
||||
},
|
||||
{
|
||||
title: "GitHub Organization Sync",
|
||||
formName: OrgPermissionSubjects.GithubOrgSync
|
||||
},
|
||||
{
|
||||
title: "External KMS",
|
||||
formName: OrgPermissionSubjects.Kms
|
||||
|
||||
+172
@@ -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("githubOrgSyncConfig", 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("deleteGithubOrgSyncConfig", isOpen)}
|
||||
deleteKey="confirm"
|
||||
onDeleteApproved={onDelete}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -387,6 +387,7 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
|
||||
<SelectItem value={OIDCJWTSignatureAlgorithm.RS256}>RS256</SelectItem>
|
||||
<SelectItem value={OIDCJWTSignatureAlgorithm.RS512}>RS512</SelectItem>
|
||||
<SelectItem value={OIDCJWTSignatureAlgorithm.HS256}>HS256</SelectItem>
|
||||
<SelectItem value={OIDCJWTSignatureAlgorithm.EDDSA}>EdDSA</SelectItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
|
||||
@@ -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)}
|
||||
|
||||
+114
@@ -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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user