mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-12 16:29:14 +00:00
Merge branch 'main' into ENG-3506
This commit is contained in:
+46
-2
@@ -5,14 +5,15 @@ import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/Se
|
||||
import { FilterableSelect, FormControl } from "@app/components/v2";
|
||||
import {
|
||||
TChecklyAccount,
|
||||
useChecklyConnectionListAccounts
|
||||
useChecklyConnectionListAccounts,
|
||||
useChecklyConnectionListGroups
|
||||
} from "@app/hooks/api/appConnections/checkly";
|
||||
import { SecretSync } from "@app/hooks/api/secretSyncs";
|
||||
|
||||
import { TSecretSyncForm } from "../schemas";
|
||||
|
||||
export const ChecklySyncFields = () => {
|
||||
const { control, setValue } = useFormContext<
|
||||
const { control, setValue, watch } = useFormContext<
|
||||
TSecretSyncForm & { destination: SecretSync.Checkly }
|
||||
>();
|
||||
|
||||
@@ -25,12 +26,24 @@ export const ChecklySyncFields = () => {
|
||||
}
|
||||
);
|
||||
|
||||
const accountId = watch("destinationConfig.accountId");
|
||||
|
||||
const { data: groups = [], isPending: isGroupsLoading } = useChecklyConnectionListGroups(
|
||||
connectionId,
|
||||
accountId,
|
||||
{
|
||||
enabled: Boolean(connectionId && accountId)
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SecretSyncConnectionField
|
||||
onChange={() => {
|
||||
setValue("destinationConfig.accountId", "");
|
||||
setValue("destinationConfig.accountName", "");
|
||||
setValue("destinationConfig.groupId", undefined);
|
||||
setValue("destinationConfig.groupName", undefined);
|
||||
}}
|
||||
/>
|
||||
<Controller
|
||||
@@ -60,6 +73,37 @@ export const ChecklySyncFields = () => {
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="destinationConfig.groupId"
|
||||
control={control}
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
label="Select a group"
|
||||
isOptional
|
||||
helperText="If provided, secrets will be scoped to a check group instead"
|
||||
tooltipClassName="max-w-md"
|
||||
>
|
||||
<FilterableSelect
|
||||
isLoading={isGroupsLoading && Boolean(connectionId)}
|
||||
isDisabled={!connectionId}
|
||||
isClearable
|
||||
value={groups.find((p) => p.id === value) ?? null}
|
||||
onChange={(option) => {
|
||||
const v = option as SingleValue<TChecklyAccount>;
|
||||
onChange(v?.id ?? null);
|
||||
setValue("destinationConfig.groupName", v?.name ?? undefined);
|
||||
}}
|
||||
options={groups}
|
||||
placeholder="Select a group..."
|
||||
getOptionLabel={(option) => option.name}
|
||||
getOptionValue={(option) => option.id}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
+11
-2
@@ -6,7 +6,16 @@ import { SecretSync } from "@app/hooks/api/secretSyncs";
|
||||
|
||||
export const ChecklySyncReviewFields = () => {
|
||||
const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Checkly }>();
|
||||
const accountName = watch("destinationConfig.accountName");
|
||||
const config = watch("destinationConfig");
|
||||
|
||||
return <GenericFieldLabel label="Account">{accountName}</GenericFieldLabel>;
|
||||
return (
|
||||
<>
|
||||
<GenericFieldLabel label="Account">
|
||||
{config.accountName ?? config.accountId}
|
||||
</GenericFieldLabel>
|
||||
{config.groupId && (
|
||||
<GenericFieldLabel label="Group">{config.groupName ?? config.groupId}</GenericFieldLabel>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
+9
-1
@@ -8,7 +8,15 @@ export const ChecklySyncDestinationSchema = BaseSecretSyncSchema().merge(
|
||||
destination: z.literal(SecretSync.Checkly),
|
||||
destinationConfig: z.object({
|
||||
accountId: z.string(),
|
||||
accountName: z.string()
|
||||
accountName: z.string(),
|
||||
groupId: z
|
||||
.string()
|
||||
.nullish()
|
||||
.transform((val) => val || undefined),
|
||||
groupName: z
|
||||
.string()
|
||||
.nullish()
|
||||
.transform((val) => val || undefined)
|
||||
})
|
||||
})
|
||||
);
|
||||
|
||||
@@ -98,7 +98,7 @@ export const DatePicker = ({
|
||||
>
|
||||
{value
|
||||
? formatDateTime({ timestamp: value, timezone, dateFormat })
|
||||
: "Pick a date and time"}
|
||||
: `Select Date${hideTime ? "" : " and Time"}`}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
@@ -122,7 +122,8 @@ export const DatePicker = ({
|
||||
root: `text-mineshaft-300 ${defaultClassNames}`,
|
||||
[UI.DayButton]: "p-3 rounded hover:text-mineshaft-100",
|
||||
[UI.Weekday]: "px-3 pt-3",
|
||||
[UI.Chevron]: "fill-mineshaft-300"
|
||||
[UI.Chevron]: "fill-mineshaft-300/70 hover:fill-mineshaft-300",
|
||||
disabled: "text-mineshaft-400 pointer-events-none"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -13,6 +13,7 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";
|
||||
import {
|
||||
Auth0ConnectionMethod,
|
||||
AwsConnectionMethod,
|
||||
AzureADCSConnectionMethod,
|
||||
AzureAppConfigurationConnectionMethod,
|
||||
AzureClientSecretsConnectionMethod,
|
||||
AzureDevOpsConnectionMethod,
|
||||
@@ -76,6 +77,7 @@ export const APP_CONNECTION_MAP: Record<
|
||||
image: "Microsoft Azure.png"
|
||||
},
|
||||
[AppConnection.AzureDevOps]: { name: "Azure DevOps", image: "Microsoft Azure.png" },
|
||||
[AppConnection.AzureADCS]: { name: "Azure ADCS", image: "Microsoft Azure.png" },
|
||||
[AppConnection.Databricks]: { name: "Databricks", image: "Databricks.png" },
|
||||
[AppConnection.Humanitec]: { name: "Humanitec", image: "Humanitec.png" },
|
||||
[AppConnection.TerraformCloud]: { name: "Terraform Cloud", image: "Terraform Cloud.png" },
|
||||
@@ -151,6 +153,7 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
|
||||
case MsSqlConnectionMethod.UsernameAndPassword:
|
||||
case MySqlConnectionMethod.UsernameAndPassword:
|
||||
case OracleDBConnectionMethod.UsernameAndPassword:
|
||||
case AzureADCSConnectionMethod.UsernamePassword:
|
||||
return { name: "Username & Password", icon: faLock };
|
||||
case HCVaultConnectionMethod.AccessToken:
|
||||
case TeamCityConnectionMethod.AccessToken:
|
||||
|
||||
@@ -8,7 +8,9 @@ import { TChecklyAccount } from "./types";
|
||||
const checklyConnectionKeys = {
|
||||
all: [...appConnectionKeys.all, "checkly"] as const,
|
||||
listAccounts: (connectionId: string) =>
|
||||
[...checklyConnectionKeys.all, "workspace-scopes", connectionId] as const
|
||||
[...checklyConnectionKeys.all, "workspace-scopes", connectionId] as const,
|
||||
listGroups: (connectionId: string, accountId: string) =>
|
||||
[...checklyConnectionKeys.all, "groups", connectionId, accountId] as const
|
||||
};
|
||||
|
||||
export const useChecklyConnectionListAccounts = (
|
||||
@@ -35,3 +37,29 @@ export const useChecklyConnectionListAccounts = (
|
||||
...options
|
||||
});
|
||||
};
|
||||
|
||||
export const useChecklyConnectionListGroups = (
|
||||
connectionId: string,
|
||||
accountId: string,
|
||||
options?: Omit<
|
||||
UseQueryOptions<
|
||||
TChecklyAccount[],
|
||||
unknown,
|
||||
TChecklyAccount[],
|
||||
ReturnType<typeof checklyConnectionKeys.listGroups>
|
||||
>,
|
||||
"queryKey" | "queryFn"
|
||||
>
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: checklyConnectionKeys.listGroups(connectionId, accountId),
|
||||
queryFn: async () => {
|
||||
const { data } = await apiRequest.get<{ groups: TChecklyAccount[] }>(
|
||||
`/api/v1/app-connections/checkly/${connectionId}/accounts/${accountId}/groups`
|
||||
);
|
||||
|
||||
return data.groups;
|
||||
},
|
||||
...options
|
||||
});
|
||||
};
|
||||
|
||||
@@ -7,6 +7,7 @@ export enum AppConnection {
|
||||
AzureAppConfiguration = "azure-app-configuration",
|
||||
AzureClientSecrets = "azure-client-secrets",
|
||||
AzureDevOps = "azure-devops",
|
||||
AzureADCS = "azure-adcs",
|
||||
Databricks = "databricks",
|
||||
Humanitec = "humanitec",
|
||||
TerraformCloud = "terraform-cloud",
|
||||
|
||||
@@ -54,13 +54,13 @@ export const useAppConnectionOptions = (
|
||||
export const useGetAppConnectionOption = <T extends AppConnection>(app: T) => {
|
||||
const { data: options = [], isPending } = useAppConnectionOptions();
|
||||
|
||||
return useMemo(
|
||||
() => ({
|
||||
option: (options.find((opt) => opt.app === app) as TAppConnectionOptionMap[T]) ?? {},
|
||||
return useMemo(() => {
|
||||
const foundOption = options.find((opt) => opt.app === app);
|
||||
return {
|
||||
option: (foundOption as TAppConnectionOptionMap[T]) ?? {},
|
||||
isLoading: isPending
|
||||
}),
|
||||
[options, app, isPending]
|
||||
);
|
||||
};
|
||||
}, [options, app, isPending]);
|
||||
};
|
||||
|
||||
export const useListAppConnections = (
|
||||
|
||||
@@ -32,7 +32,7 @@ export type TAzureKeyVaultConnectionOption = TAppConnectionOptionBase & {
|
||||
};
|
||||
|
||||
export type TAzureAppConfigurationConnectionOption = TAppConnectionOptionBase & {
|
||||
app: AppConnection.AzureKeyVault;
|
||||
app: AppConnection.AzureAppConfiguration;
|
||||
oauthClientId?: string;
|
||||
};
|
||||
|
||||
@@ -164,9 +164,14 @@ export type TOktaConnectionOption = TAppConnectionOptionBase & {
|
||||
app: AppConnection.Okta;
|
||||
};
|
||||
|
||||
export type TAzureAdCsConnectionOption = TAppConnectionOptionBase & {
|
||||
app: AppConnection.AzureADCS;
|
||||
};
|
||||
|
||||
export type TAppConnectionOption =
|
||||
| TAwsConnectionOption
|
||||
| TGitHubConnectionOption
|
||||
| TGitHubRadarConnectionOption
|
||||
| TGcpConnectionOption
|
||||
| TAzureAppConfigurationConnectionOption
|
||||
| TAzureKeyVaultConnectionOption
|
||||
@@ -184,6 +189,7 @@ export type TAppConnectionOption =
|
||||
| TWindmillConnectionOption
|
||||
| TAuth0ConnectionOption
|
||||
| THCVaultConnectionOption
|
||||
| TLdapConnectionOption
|
||||
| TTeamCityConnectionOption
|
||||
| TOCIConnectionOption
|
||||
| TOnePassConnectionOption
|
||||
@@ -196,9 +202,11 @@ export type TAppConnectionOption =
|
||||
| TZabbixConnectionOption
|
||||
| TRailwayConnectionOption
|
||||
| TChecklyConnectionOption
|
||||
| TSupabaseConnectionOption
|
||||
| TDigitalOceanConnectionOption
|
||||
| TNetlifyConnectionOption
|
||||
| TOktaConnectionOption;
|
||||
| TOktaConnectionOption
|
||||
| TAzureAdCsConnectionOption;
|
||||
|
||||
export type TAppConnectionOptionMap = {
|
||||
[AppConnection.AWS]: TAwsConnectionOption;
|
||||
@@ -238,4 +246,5 @@ export type TAppConnectionOptionMap = {
|
||||
[AppConnection.DigitalOcean]: TDigitalOceanConnectionOption;
|
||||
[AppConnection.Netlify]: TNetlifyConnectionOption;
|
||||
[AppConnection.Okta]: TOktaConnectionOption;
|
||||
[AppConnection.AzureADCS]: TAzureAdCsConnectionOption;
|
||||
};
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import { z } from "zod";
|
||||
|
||||
import { AppConnection } from "../enums";
|
||||
import { TRootAppConnection } from "./root-connection";
|
||||
|
||||
export enum AzureADCSConnectionMethod {
|
||||
UsernamePassword = "username-password"
|
||||
}
|
||||
|
||||
export const CreateAzureADCSConnectionSchema = z.object({
|
||||
adcsUrl: z.string().url().min(1, "ADCS URL is required"),
|
||||
username: z.string().min(1, "Username is required"),
|
||||
password: z.string().min(1, "Password is required")
|
||||
});
|
||||
|
||||
export type TCreateAzureADCSConnection = z.infer<typeof CreateAzureADCSConnectionSchema>;
|
||||
|
||||
export type TAzureADCSConnection = TRootAppConnection & { app: AppConnection.AzureADCS } & {
|
||||
method: AzureADCSConnectionMethod.UsernamePassword;
|
||||
credentials: TCreateAzureADCSConnection;
|
||||
};
|
||||
@@ -3,6 +3,7 @@ import { TOnePassConnection } from "./1password-connection";
|
||||
import { TAppConnectionOption } from "./app-options";
|
||||
import { TAuth0Connection } from "./auth0-connection";
|
||||
import { TAwsConnection } from "./aws-connection";
|
||||
import { TAzureADCSConnection } from "./azure-adcs-connection";
|
||||
import { TAzureAppConfigurationConnection } from "./azure-app-configuration-connection";
|
||||
import { TAzureClientSecretsConnection } from "./azure-client-secrets-connection";
|
||||
import { TAzureDevOpsConnection } from "./azure-devops-connection";
|
||||
@@ -41,6 +42,7 @@ import { TZabbixConnection } from "./zabbix-connection";
|
||||
export * from "./1password-connection";
|
||||
export * from "./auth0-connection";
|
||||
export * from "./aws-connection";
|
||||
export * from "./azure-adcs-connection";
|
||||
export * from "./azure-app-configuration-connection";
|
||||
export * from "./azure-client-secrets-connection";
|
||||
export * from "./azure-devops-connection";
|
||||
@@ -83,6 +85,7 @@ export type TAppConnection =
|
||||
| TAzureAppConfigurationConnection
|
||||
| TAzureClientSecretsConnection
|
||||
| TAzureDevOpsConnection
|
||||
| TAzureADCSConnection
|
||||
| TDatabricksConnection
|
||||
| THumanitecConnection
|
||||
| TTerraformCloudConnection
|
||||
@@ -156,6 +159,7 @@ export type TAppConnectionMap = {
|
||||
[AppConnection.AzureAppConfiguration]: TAzureAppConfigurationConnection;
|
||||
[AppConnection.AzureClientSecrets]: TAzureClientSecretsConnection;
|
||||
[AppConnection.AzureDevOps]: TAzureDevOpsConnection;
|
||||
[AppConnection.AzureADCS]: TAzureADCSConnection;
|
||||
[AppConnection.Databricks]: TDatabricksConnection;
|
||||
[AppConnection.Humanitec]: THumanitecConnection;
|
||||
[AppConnection.TerraformCloud]: TTerraformCloudConnection;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { AppConnection } from "../appConnections/enums";
|
||||
import { SshCaStatus } from "../sshCa";
|
||||
import { SshCertTemplateStatus } from "../sshCertificateTemplates";
|
||||
import { AcmeDnsProvider, CaStatus, InternalCaType } from "./enums";
|
||||
import { AcmeDnsProvider, CaCapability, CaStatus, CaType, InternalCaType } from "./enums";
|
||||
|
||||
export const caTypeToNameMap: { [K in InternalCaType]: string } = {
|
||||
[InternalCaType.ROOT]: "Root",
|
||||
@@ -24,6 +24,28 @@ export const ACME_DNS_PROVIDER_APP_CONNECTION_MAP: Record<AcmeDnsProvider, AppCo
|
||||
[AcmeDnsProvider.Cloudflare]: AppConnection.Cloudflare
|
||||
};
|
||||
|
||||
export const CA_TYPE_CAPABILITIES_MAP: Record<CaType, CaCapability[]> = {
|
||||
[CaType.INTERNAL]: [
|
||||
CaCapability.ISSUE_CERTIFICATES,
|
||||
CaCapability.REVOKE_CERTIFICATES,
|
||||
CaCapability.RENEW_CERTIFICATES
|
||||
],
|
||||
[CaType.ACME]: [
|
||||
CaCapability.ISSUE_CERTIFICATES,
|
||||
CaCapability.REVOKE_CERTIFICATES,
|
||||
CaCapability.RENEW_CERTIFICATES
|
||||
],
|
||||
[CaType.AZURE_AD_CS]: [CaCapability.ISSUE_CERTIFICATES, CaCapability.RENEW_CERTIFICATES]
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if a certificate authority type supports a specific capability
|
||||
*/
|
||||
export const caSupportsCapability = (caType: CaType, capability: CaCapability): boolean => {
|
||||
const capabilities = CA_TYPE_CAPABILITIES_MAP[caType] || [];
|
||||
return capabilities.includes(capability);
|
||||
};
|
||||
|
||||
export const getCaStatusBadgeVariant = (status: CaStatus | SshCaStatus | SshCertTemplateStatus) => {
|
||||
switch (status) {
|
||||
case CaStatus.ACTIVE:
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
export enum CaType {
|
||||
INTERNAL = "internal",
|
||||
ACME = "acme"
|
||||
ACME = "acme",
|
||||
AZURE_AD_CS = "azure-ad-cs"
|
||||
}
|
||||
|
||||
export enum InternalCaType {
|
||||
@@ -22,3 +23,9 @@ export enum AcmeDnsProvider {
|
||||
ROUTE53 = "route53",
|
||||
Cloudflare = "cloudflare"
|
||||
}
|
||||
|
||||
export enum CaCapability {
|
||||
ISSUE_CERTIFICATES = "issue-certificates",
|
||||
REVOKE_CERTIFICATES = "revoke-certificates",
|
||||
RENEW_CERTIFICATES = "renew-certificates"
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ export {
|
||||
useUpdateCa
|
||||
} from "./mutations";
|
||||
export {
|
||||
useGetAzureAdcsTemplates,
|
||||
useGetCa,
|
||||
useGetCaById,
|
||||
useGetCaCert,
|
||||
@@ -17,5 +18,6 @@ export {
|
||||
useGetCaCrls,
|
||||
useGetCaCsr,
|
||||
useListCasByProjectId,
|
||||
useListCasByTypeAndProjectId
|
||||
useListCasByTypeAndProjectId,
|
||||
useListExternalCasByProjectId
|
||||
} from "./queries";
|
||||
|
||||
@@ -39,6 +39,10 @@ export const useUpdateCa = () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: caKeys.getCaByNameAndProjectId(caName, projectId)
|
||||
});
|
||||
// Invalidate external CAs list
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: caKeys.listExternalCasByProjectId(projectId)
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -57,6 +61,10 @@ export const useCreateCa = () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: caKeys.listCasByTypeAndProjectId(type, projectId)
|
||||
});
|
||||
// Invalidate external CAs list
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: caKeys.listExternalCasByProjectId(projectId)
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -79,6 +87,10 @@ export const useDeleteCa = () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: caKeys.listCasByTypeAndProjectId(type, projectId)
|
||||
});
|
||||
// Invalidate external CAs list
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: caKeys.listExternalCasByProjectId(projectId)
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@@ -4,20 +4,25 @@ import { apiRequest } from "@app/config/request";
|
||||
|
||||
import { TCertificateTemplate } from "../certificateTemplates/types";
|
||||
import { CaType } from "./enums";
|
||||
import { TCertificateAuthority, TUnifiedCertificateAuthority } from "./types";
|
||||
import { TAzureAdCsTemplate, TCertificateAuthority, TUnifiedCertificateAuthority } from "./types";
|
||||
|
||||
export const caKeys = {
|
||||
getCaById: (caId: string) => [{ caId }, "ca"],
|
||||
getCaByNameAndProjectId: (caName: string, projectId: string) => [{ caName, projectId }, "ca"],
|
||||
listCasByTypeAndProjectId: (type: CaType, projectId: string) => [{ type, projectId }, "cas"],
|
||||
listCasByProjectId: (projectId: string) => [{ projectId }, "cas"],
|
||||
listExternalCasByProjectId: (projectId: string) => [{ projectId }, "external-cas"],
|
||||
getCaCerts: (caId: string) => [{ caId }, "ca-cert"],
|
||||
getCaCrls: (caId: string) => [{ caId }, "ca-crls"],
|
||||
getCaCert: (caId: string) => [{ caId }, "ca-cert"],
|
||||
getCaCsr: (caId: string) => [{ caId }, "ca-csr"],
|
||||
getCaCrl: (caId: string) => [{ caId }, "ca-crl"],
|
||||
getCaCertTemplates: (caId: string) => [{ caId }, "ca-cert-templates"],
|
||||
getCaEstConfig: (caId: string) => [{ caId }, "ca-est-config"]
|
||||
getCaEstConfig: (caId: string) => [{ caId }, "ca-est-config"],
|
||||
getAzureAdcsTemplates: (caId: string, projectId: string) => [
|
||||
{ caId, projectId },
|
||||
"azure-adcs-templates"
|
||||
]
|
||||
};
|
||||
|
||||
export const useGetCa = ({
|
||||
@@ -67,6 +72,34 @@ export const useListCasByProjectId = (projectId: string) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const useListExternalCasByProjectId = (projectId: string) => {
|
||||
return useQuery({
|
||||
queryKey: caKeys.listExternalCasByProjectId(projectId),
|
||||
queryFn: async () => {
|
||||
const [acmeResponse, azureAdCsResponse] = await Promise.allSettled([
|
||||
apiRequest.get<TUnifiedCertificateAuthority[]>(
|
||||
`/api/v1/pki/ca/${CaType.ACME}?projectId=${projectId}`
|
||||
),
|
||||
apiRequest.get<TUnifiedCertificateAuthority[]>(
|
||||
`/api/v1/pki/ca/${CaType.AZURE_AD_CS}?projectId=${projectId}`
|
||||
)
|
||||
]);
|
||||
|
||||
const allCas: TUnifiedCertificateAuthority[] = [];
|
||||
|
||||
if (acmeResponse.status === "fulfilled") {
|
||||
allCas.push(...acmeResponse.value.data);
|
||||
}
|
||||
|
||||
if (azureAdCsResponse.status === "fulfilled") {
|
||||
allCas.push(...azureAdCsResponse.value.data);
|
||||
}
|
||||
|
||||
return allCas;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetCaById = (caId: string) => {
|
||||
return useQuery({
|
||||
queryKey: caKeys.getCaById(caId),
|
||||
@@ -156,3 +189,22 @@ export const useGetCaCertTemplates = (caId: string) => {
|
||||
enabled: Boolean(caId)
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetAzureAdcsTemplates = ({
|
||||
caId,
|
||||
projectId
|
||||
}: {
|
||||
caId: string;
|
||||
projectId: string;
|
||||
}) => {
|
||||
return useQuery({
|
||||
queryKey: caKeys.getAzureAdcsTemplates(caId, projectId),
|
||||
queryFn: async () => {
|
||||
const { data } = await apiRequest.get<{
|
||||
templates: TAzureAdCsTemplate[];
|
||||
}>(`/api/v1/pki/ca/azure-ad-cs/${caId}/templates?projectId=${projectId}`);
|
||||
return data;
|
||||
},
|
||||
enabled: Boolean(caId && projectId)
|
||||
});
|
||||
};
|
||||
|
||||
@@ -19,6 +19,19 @@ export type TAcmeCertificateAuthority = {
|
||||
};
|
||||
};
|
||||
|
||||
export type TAzureAdCsCertificateAuthority = {
|
||||
id: string;
|
||||
projectId: string;
|
||||
type: CaType.AZURE_AD_CS;
|
||||
status: CaStatus;
|
||||
name: string;
|
||||
enableDirectIssuance: boolean;
|
||||
configuration: {
|
||||
azureAdcsConnectionId: string;
|
||||
templateName: string;
|
||||
};
|
||||
};
|
||||
|
||||
export type TInternalCertificateAuthority = {
|
||||
id: string;
|
||||
projectId: string;
|
||||
@@ -48,6 +61,7 @@ export type TInternalCertificateAuthority = {
|
||||
|
||||
export type TUnifiedCertificateAuthority =
|
||||
| TAcmeCertificateAuthority
|
||||
| TAzureAdCsCertificateAuthority
|
||||
| TInternalCertificateAuthority;
|
||||
|
||||
export type TCreateCertificateAuthorityDTO = Omit<TUnifiedCertificateAuthority, "id">;
|
||||
@@ -114,6 +128,12 @@ export type TSignIntermediateResponse = {
|
||||
serialNumber: string;
|
||||
};
|
||||
|
||||
export type TAzureAdCsTemplate = {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
export type TImportCaCertificateDTO = {
|
||||
caId: string;
|
||||
projectSlug: string;
|
||||
|
||||
@@ -10,6 +10,16 @@ export enum SubscriberOperationStatus {
|
||||
FAILED = "failed"
|
||||
}
|
||||
|
||||
export type TPkiSubscriberProperties = {
|
||||
azureTemplateType?: string;
|
||||
organization?: string;
|
||||
organizationalUnit?: string;
|
||||
country?: string;
|
||||
state?: string;
|
||||
locality?: string;
|
||||
emailAddress?: string;
|
||||
};
|
||||
|
||||
export type TPkiSubscriber = {
|
||||
id: string;
|
||||
projectId: string;
|
||||
@@ -27,6 +37,7 @@ export type TPkiSubscriber = {
|
||||
lastOperationStatus?: SubscriberOperationStatus;
|
||||
lastOperationMessage?: string;
|
||||
lastOperationAt?: string;
|
||||
properties?: TPkiSubscriberProperties;
|
||||
};
|
||||
|
||||
export type TCreatePkiSubscriberDTO = {
|
||||
@@ -40,6 +51,7 @@ export type TCreatePkiSubscriberDTO = {
|
||||
extendedKeyUsages: CertExtendedKeyUsage[];
|
||||
enableAutoRenewal?: boolean;
|
||||
autoRenewalPeriodInDays?: number;
|
||||
properties?: TPkiSubscriberProperties;
|
||||
};
|
||||
|
||||
export type TUpdatePkiSubscriberDTO = {
|
||||
@@ -55,6 +67,7 @@ export type TUpdatePkiSubscriberDTO = {
|
||||
extendedKeyUsages?: CertExtendedKeyUsage[];
|
||||
enableAutoRenewal?: boolean;
|
||||
autoRenewalPeriodInDays?: number;
|
||||
properties?: TPkiSubscriberProperties;
|
||||
};
|
||||
|
||||
export type TDeletePkiSubscriberDTO = {
|
||||
|
||||
@@ -3,11 +3,17 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";
|
||||
import { SecretSync } from "@app/hooks/api/secretSyncs";
|
||||
import { TRootSecretSync } from "@app/hooks/api/secretSyncs/types/root-sync";
|
||||
|
||||
export enum ChecklySyncScope {
|
||||
Global = "global",
|
||||
Group = "group"
|
||||
}
|
||||
export type TChecklySync = TRootSecretSync & {
|
||||
destination: SecretSync.Checkly;
|
||||
destinationConfig: {
|
||||
accountId: string;
|
||||
accountName: string;
|
||||
groupId?: string;
|
||||
groupName?: string;
|
||||
};
|
||||
connection: {
|
||||
app: AppConnection.Checkly;
|
||||
|
||||
+208
-84
@@ -42,29 +42,45 @@ import {
|
||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
||||
import { slugSchema } from "@app/lib/schemas";
|
||||
|
||||
const schema = z
|
||||
.object({
|
||||
type: z.nativeEnum(CaType),
|
||||
name: slugSchema({
|
||||
field: "Name"
|
||||
}),
|
||||
enableDirectIssuance: z.boolean(),
|
||||
status: z.nativeEnum(CaStatus),
|
||||
configuration: z.object({
|
||||
dnsAppConnection: z.object({
|
||||
id: z.string(),
|
||||
name: z.string()
|
||||
}),
|
||||
// currently specific to Route53 & Cloudflare but can be extended to others by differentiating via the provider property
|
||||
dnsProviderConfig: z.object({
|
||||
provider: z.nativeEnum(AcmeDnsProvider),
|
||||
hostedZoneId: z.string()
|
||||
}),
|
||||
directoryUrl: z.string(),
|
||||
accountEmail: z.string()
|
||||
})
|
||||
const baseSchema = z.object({
|
||||
type: z.nativeEnum(CaType),
|
||||
name: slugSchema({
|
||||
field: "Name"
|
||||
}),
|
||||
enableDirectIssuance: z.boolean(),
|
||||
status: z.nativeEnum(CaStatus)
|
||||
});
|
||||
|
||||
const acmeConfigurationSchema = z.object({
|
||||
dnsAppConnection: z.object({
|
||||
id: z.string(),
|
||||
name: z.string()
|
||||
}),
|
||||
dnsProviderConfig: z.object({
|
||||
provider: z.nativeEnum(AcmeDnsProvider),
|
||||
hostedZoneId: z.string()
|
||||
}),
|
||||
directoryUrl: z.string(),
|
||||
accountEmail: z.string()
|
||||
});
|
||||
|
||||
const azureAdCsConfigurationSchema = z.object({
|
||||
azureAdcsConnection: z.object({
|
||||
id: z.string(),
|
||||
name: z.string()
|
||||
})
|
||||
.required();
|
||||
});
|
||||
|
||||
const schema = z.discriminatedUnion("type", [
|
||||
baseSchema.extend({
|
||||
type: z.literal(CaType.ACME),
|
||||
configuration: acmeConfigurationSchema
|
||||
}),
|
||||
baseSchema.extend({
|
||||
type: z.literal(CaType.AZURE_AD_CS),
|
||||
configuration: azureAdCsConfigurationSchema
|
||||
})
|
||||
]);
|
||||
|
||||
export type FormData = z.infer<typeof schema>;
|
||||
|
||||
@@ -73,12 +89,15 @@ type Props = {
|
||||
handlePopUpToggle: (popUpName: keyof UsePopUpState<["ca"]>, state?: boolean) => void;
|
||||
};
|
||||
|
||||
const caTypes = [{ label: "ACME", value: CaType.ACME }];
|
||||
const caTypes = [
|
||||
{ label: "ACME", value: CaType.ACME },
|
||||
{ label: "Azure AD Certificate Service", value: CaType.AZURE_AD_CS }
|
||||
];
|
||||
|
||||
export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
|
||||
const { data: ca } = useGetCa({
|
||||
const { data: ca, isLoading: isCaLoading } = useGetCa({
|
||||
caName: (popUp?.ca?.data as { name: string })?.name || "",
|
||||
projectId: currentWorkspace?.id || "",
|
||||
type: (popUp?.ca?.data as { type: CaType })?.type || ""
|
||||
@@ -94,29 +113,54 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
formState: { isSubmitting },
|
||||
watch
|
||||
} = useForm<FormData>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
type: CaType.ACME,
|
||||
name: "",
|
||||
status: CaStatus.ACTIVE,
|
||||
enableDirectIssuance: true,
|
||||
configuration: {
|
||||
dnsAppConnection: {
|
||||
id: "",
|
||||
name: ""
|
||||
},
|
||||
dnsProviderConfig: {
|
||||
provider: AcmeDnsProvider.ROUTE53,
|
||||
hostedZoneId: ""
|
||||
},
|
||||
directoryUrl: "",
|
||||
accountEmail: ""
|
||||
}
|
||||
}
|
||||
resolver: zodResolver(schema)
|
||||
});
|
||||
|
||||
const caType = watch("type");
|
||||
const dnsProvider = watch("configuration.dnsProviderConfig.provider");
|
||||
const configuration = watch("configuration");
|
||||
const dnsProvider =
|
||||
caType === CaType.ACME && configuration && "dnsProviderConfig" in configuration
|
||||
? configuration.dnsProviderConfig.provider
|
||||
: undefined;
|
||||
|
||||
useEffect(() => {
|
||||
const initialType = (popUp?.ca?.data as { type: CaType })?.type;
|
||||
if (!ca && popUp?.ca?.isOpen) {
|
||||
if (initialType === CaType.AZURE_AD_CS) {
|
||||
reset({
|
||||
type: CaType.AZURE_AD_CS,
|
||||
name: "",
|
||||
status: CaStatus.ACTIVE,
|
||||
enableDirectIssuance: false,
|
||||
configuration: {
|
||||
azureAdcsConnection: {
|
||||
id: "",
|
||||
name: ""
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
reset({
|
||||
type: CaType.ACME,
|
||||
name: "",
|
||||
status: CaStatus.ACTIVE,
|
||||
enableDirectIssuance: true,
|
||||
configuration: {
|
||||
dnsAppConnection: {
|
||||
id: "",
|
||||
name: ""
|
||||
},
|
||||
dnsProviderConfig: {
|
||||
provider: AcmeDnsProvider.ROUTE53,
|
||||
hostedZoneId: ""
|
||||
},
|
||||
directoryUrl: "",
|
||||
accountEmail: ""
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [popUp?.ca?.isOpen, popUp?.ca?.data, reset, ca]);
|
||||
|
||||
const { data: availableRoute53Connections, isPending: isRoute53Pending } =
|
||||
useListAvailableAppConnections(AppConnection.AWS, {
|
||||
@@ -128,25 +172,44 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
enabled: caType === CaType.ACME
|
||||
});
|
||||
|
||||
const availableConnections: TAvailableAppConnection[] = useMemo(
|
||||
() => [...(availableRoute53Connections || []), ...(availableCloudflareConnections || [])],
|
||||
[availableRoute53Connections, availableCloudflareConnections]
|
||||
);
|
||||
const { data: availableAzureConnections, isPending: isAzurePending } =
|
||||
useListAvailableAppConnections(AppConnection.AzureADCS, {
|
||||
enabled: caType === CaType.AZURE_AD_CS
|
||||
});
|
||||
|
||||
const isPending = isRoute53Pending || isCloudflarePending;
|
||||
const availableConnections: TAvailableAppConnection[] = useMemo(() => {
|
||||
if (caType === CaType.ACME) {
|
||||
return [...(availableRoute53Connections || []), ...(availableCloudflareConnections || [])];
|
||||
}
|
||||
if (caType === CaType.AZURE_AD_CS) {
|
||||
return availableAzureConnections || [];
|
||||
}
|
||||
return [];
|
||||
}, [
|
||||
caType,
|
||||
availableRoute53Connections,
|
||||
availableCloudflareConnections,
|
||||
availableAzureConnections
|
||||
]);
|
||||
|
||||
const dnsAppConnection = watch("configuration.dnsAppConnection");
|
||||
const isPending = isRoute53Pending || isCloudflarePending || isAzurePending;
|
||||
|
||||
const dnsAppConnection =
|
||||
caType === CaType.ACME && configuration && "dnsAppConnection" in configuration
|
||||
? configuration.dnsAppConnection
|
||||
: { id: "", name: "" };
|
||||
|
||||
const { data: cloudflareZones = [], isPending: isZonesPending } =
|
||||
useCloudflareConnectionListZones(dnsAppConnection.id, {
|
||||
enabled: dnsProvider === AcmeDnsProvider.Cloudflare && !!dnsAppConnection.id
|
||||
});
|
||||
|
||||
// Populate form with CA data when editing
|
||||
useEffect(() => {
|
||||
if (ca) {
|
||||
if (ca.type !== CaType.INTERNAL && availableConnections?.length) {
|
||||
if (ca && !isCaLoading) {
|
||||
if (ca.type === CaType.ACME && availableConnections?.length) {
|
||||
const selectedConnection = availableConnections?.find(
|
||||
(connection) => connection.id === ca?.configuration.dnsAppConnectionId
|
||||
(connection) => connection.id === ca.configuration.dnsAppConnectionId
|
||||
);
|
||||
|
||||
reset({
|
||||
@@ -167,32 +230,63 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
accountEmail: ca.configuration.accountEmail
|
||||
}
|
||||
});
|
||||
} else if (ca.type === CaType.AZURE_AD_CS && availableConnections?.length) {
|
||||
const selectedConnection = availableConnections?.find(
|
||||
(connection) => connection.id === ca.configuration.azureAdcsConnectionId
|
||||
);
|
||||
|
||||
reset({
|
||||
type: ca.type,
|
||||
name: ca.name,
|
||||
status: ca.status,
|
||||
enableDirectIssuance: false,
|
||||
configuration: {
|
||||
azureAdcsConnection: {
|
||||
id: ca.configuration.azureAdcsConnectionId,
|
||||
name: selectedConnection?.name || ""
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [ca, availableConnections]);
|
||||
}, [ca, availableConnections, reset, isCaLoading]);
|
||||
|
||||
const onFormSubmit = async ({
|
||||
type,
|
||||
name,
|
||||
enableDirectIssuance,
|
||||
status,
|
||||
configuration
|
||||
configuration: formConfiguration
|
||||
}: FormData) => {
|
||||
try {
|
||||
if (!currentWorkspace?.slug) return;
|
||||
|
||||
if (ca && type !== CaType.INTERNAL) {
|
||||
let configPayload: any;
|
||||
|
||||
if (type === CaType.ACME && "dnsAppConnection" in formConfiguration) {
|
||||
configPayload = {
|
||||
dnsProviderConfig: formConfiguration.dnsProviderConfig,
|
||||
directoryUrl: formConfiguration.directoryUrl,
|
||||
accountEmail: formConfiguration.accountEmail,
|
||||
dnsAppConnectionId: formConfiguration.dnsAppConnection.id
|
||||
};
|
||||
} else if (type === CaType.AZURE_AD_CS && "azureAdcsConnection" in formConfiguration) {
|
||||
configPayload = {
|
||||
azureAdcsConnectionId: formConfiguration.azureAdcsConnection.id
|
||||
};
|
||||
} else {
|
||||
throw new Error("Invalid certificate authority configuration");
|
||||
}
|
||||
|
||||
if (ca) {
|
||||
await updateMutateAsync({
|
||||
caName: ca.name,
|
||||
projectId: currentWorkspace.id,
|
||||
name,
|
||||
type,
|
||||
status,
|
||||
enableDirectIssuance,
|
||||
configuration: {
|
||||
...configuration,
|
||||
dnsAppConnectionId: configuration.dnsAppConnection.id
|
||||
}
|
||||
enableDirectIssuance: type === CaType.AZURE_AD_CS ? false : enableDirectIssuance,
|
||||
configuration: configPayload
|
||||
});
|
||||
} else {
|
||||
await createMutateAsync({
|
||||
@@ -200,11 +294,8 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
name,
|
||||
type,
|
||||
status,
|
||||
enableDirectIssuance,
|
||||
configuration: {
|
||||
...configuration,
|
||||
dnsAppConnectionId: configuration.dnsAppConnection.id
|
||||
}
|
||||
enableDirectIssuance: type === CaType.AZURE_AD_CS ? false : enableDirectIssuance,
|
||||
configuration: configPayload
|
||||
});
|
||||
}
|
||||
|
||||
@@ -232,7 +323,7 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
handlePopUpToggle("ca", isOpen);
|
||||
}}
|
||||
>
|
||||
<ModalContent title={`${ca ? "View" : "Create"} External CA`}>
|
||||
<ModalContent title={`${ca ? "Edit" : "Create"} External CA`}>
|
||||
<form onSubmit={handleSubmit(onFormSubmit)}>
|
||||
{ca && (
|
||||
<FormControl label="CA ID">
|
||||
@@ -307,7 +398,11 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
<Controller
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
tooltipText={`${ACME_DNS_PROVIDER_NAME_MAP[dnsProvider]} uses the ${APP_CONNECTION_MAP[ACME_DNS_PROVIDER_APP_CONNECTION_MAP[dnsProvider]].name} App Connection. You can create one in the Organization Settings page.`}
|
||||
tooltipText={
|
||||
dnsProvider
|
||||
? `${ACME_DNS_PROVIDER_NAME_MAP[dnsProvider]} uses the ${APP_CONNECTION_MAP[ACME_DNS_PROVIDER_APP_CONNECTION_MAP[dnsProvider]].name} App Connection. You can create one in the Organization Settings page.`
|
||||
: "Select a DNS provider first"
|
||||
}
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
label="DNS App Connection"
|
||||
@@ -406,23 +501,52 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="enableDirectIssuance"
|
||||
render={({ field, fieldState: { error } }) => {
|
||||
return (
|
||||
<FormControl isError={Boolean(error)} errorText={error?.message} className="my-8">
|
||||
<Switch
|
||||
id="is-active"
|
||||
onCheckedChange={(value) => field.onChange(value)}
|
||||
isChecked={field.value}
|
||||
>
|
||||
<p className="w-full">Enable Direct Issuance</p>
|
||||
</Switch>
|
||||
{caType === CaType.AZURE_AD_CS && (
|
||||
<Controller
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
tooltipText="Azure ADCS App Connection contains the Windows domain credentials and ADCS server URL for certificate requests."
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
label="Azure ADCS Connection"
|
||||
>
|
||||
<FilterableSelect
|
||||
menuPlacement="top"
|
||||
value={value}
|
||||
onChange={(newValue) => {
|
||||
onChange(newValue);
|
||||
}}
|
||||
isLoading={isPending}
|
||||
options={availableConnections}
|
||||
placeholder="Select connection..."
|
||||
getOptionLabel={(option) => option.name}
|
||||
getOptionValue={(option) => option.id}
|
||||
/>
|
||||
</FormControl>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
control={control}
|
||||
name="configuration.azureAdcsConnection"
|
||||
/>
|
||||
)}
|
||||
{caType === CaType.ACME && (
|
||||
<Controller
|
||||
control={control}
|
||||
name="enableDirectIssuance"
|
||||
render={({ field, fieldState: { error } }) => {
|
||||
return (
|
||||
<FormControl isError={Boolean(error)} errorText={error?.message} className="my-8">
|
||||
<Switch
|
||||
id="is-active"
|
||||
onCheckedChange={(value) => field.onChange(value)}
|
||||
isChecked={field.value}
|
||||
>
|
||||
<p className="w-full">Enable Direct Issuance</p>
|
||||
</Switch>
|
||||
</FormControl>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
className="mr-4"
|
||||
|
||||
+2
-2
@@ -27,7 +27,7 @@ import {
|
||||
Tr
|
||||
} from "@app/components/v2";
|
||||
import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
|
||||
import { CaStatus, CaType, useListCasByTypeAndProjectId } from "@app/hooks/api";
|
||||
import { CaStatus, CaType, useListExternalCasByProjectId } from "@app/hooks/api";
|
||||
import { caStatusToNameMap, getCaStatusBadgeVariant } from "@app/hooks/api/ca/constants";
|
||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
||||
|
||||
@@ -45,7 +45,7 @@ type Props = {
|
||||
|
||||
export const ExternalCaTable = ({ handlePopUpOpen }: Props) => {
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { data, isPending } = useListCasByTypeAndProjectId(CaType.ACME, currentWorkspace.id);
|
||||
const { data, isPending } = useListExternalCasByProjectId(currentWorkspace.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import {
|
||||
faBan,
|
||||
faCertificate,
|
||||
@@ -36,6 +36,9 @@ import {
|
||||
useWorkspace
|
||||
} from "@app/context";
|
||||
import { useListWorkspaceCertificates } from "@app/hooks/api";
|
||||
import { caSupportsCapability } from "@app/hooks/api/ca/constants";
|
||||
import { CaCapability, CaType } from "@app/hooks/api/ca/enums";
|
||||
import { useListCasByProjectId } from "@app/hooks/api/ca/queries";
|
||||
import { CertStatus } from "@app/hooks/api/certificates/enums";
|
||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
||||
|
||||
@@ -66,6 +69,20 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
|
||||
limit: perPage
|
||||
});
|
||||
|
||||
// Fetch CA data to determine capabilities
|
||||
const { data: caData } = useListCasByProjectId(currentWorkspace?.id ?? "");
|
||||
|
||||
// Create mapping from caId to CA type for capability checking
|
||||
const caCapabilityMap = useMemo(() => {
|
||||
if (!caData) return {};
|
||||
|
||||
const map: Record<string, CaType> = {};
|
||||
caData.forEach((ca) => {
|
||||
map[ca.id] = ca.type;
|
||||
});
|
||||
return map;
|
||||
}, [caData]);
|
||||
|
||||
return (
|
||||
<TableContainer>
|
||||
<Table>
|
||||
@@ -155,27 +172,43 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</ProjectPermissionCan>
|
||||
<ProjectPermissionCan
|
||||
I={ProjectPermissionCertificateActions.Delete}
|
||||
a={ProjectPermissionSub.Certificates}
|
||||
>
|
||||
{(isAllowed) => (
|
||||
<DropdownMenuItem
|
||||
className={twMerge(
|
||||
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
|
||||
)}
|
||||
onClick={async () =>
|
||||
handlePopUpOpen("revokeCertificate", {
|
||||
serialNumber: certificate.serialNumber
|
||||
})
|
||||
}
|
||||
disabled={!isAllowed}
|
||||
icon={<FontAwesomeIcon icon={faBan} />}
|
||||
{/* Only show revoke button if CA supports revocation */}
|
||||
{(() => {
|
||||
const caType = caCapabilityMap[certificate.caId];
|
||||
// If caId not found in map, assume CA supports revocation to avoid hiding revoke option
|
||||
const supportsRevocation =
|
||||
!caType ||
|
||||
caSupportsCapability(caType, CaCapability.REVOKE_CERTIFICATES);
|
||||
|
||||
if (!supportsRevocation) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<ProjectPermissionCan
|
||||
I={ProjectPermissionCertificateActions.Delete}
|
||||
a={ProjectPermissionSub.Certificates}
|
||||
>
|
||||
Revoke Certificate
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</ProjectPermissionCan>
|
||||
{(isAllowed) => (
|
||||
<DropdownMenuItem
|
||||
className={twMerge(
|
||||
!isAllowed &&
|
||||
"pointer-events-none cursor-not-allowed opacity-50"
|
||||
)}
|
||||
onClick={async () =>
|
||||
handlePopUpOpen("revokeCertificate", {
|
||||
serialNumber: certificate.serialNumber
|
||||
})
|
||||
}
|
||||
disabled={!isAllowed}
|
||||
icon={<FontAwesomeIcon icon={faBan} />}
|
||||
>
|
||||
Revoke Certificate
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</ProjectPermissionCan>
|
||||
);
|
||||
})()}
|
||||
<ProjectPermissionCan
|
||||
I={ProjectPermissionCertificateActions.Delete}
|
||||
a={ProjectPermissionSub.Certificates}
|
||||
|
||||
+64
-33
@@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { subject } from "@casl/ability";
|
||||
import { faCertificate, faEllipsis, faTrash } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
@@ -31,6 +31,9 @@ import {
|
||||
useWorkspace
|
||||
} from "@app/context";
|
||||
import { useGetPkiSubscriberCertificates } from "@app/hooks/api";
|
||||
import { caSupportsCapability } from "@app/hooks/api/ca/constants";
|
||||
import { CaCapability, CaType } from "@app/hooks/api/ca/enums";
|
||||
import { useListCasByProjectId } from "@app/hooks/api/ca/queries";
|
||||
import { CertStatus } from "@app/hooks/api/certificates/enums";
|
||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
||||
|
||||
@@ -60,6 +63,20 @@ export const PkiSubscriberCertificatesTable = ({ subscriberName, handlePopUpOpen
|
||||
}
|
||||
);
|
||||
|
||||
// Fetch CA data to determine capabilities
|
||||
const { data: caData } = useListCasByProjectId(currentWorkspace.id);
|
||||
|
||||
// Create mapping from caId to CA type for capability checking
|
||||
const caCapabilityMap = useMemo(() => {
|
||||
if (!caData) return {};
|
||||
|
||||
const map: Record<string, CaType> = {};
|
||||
caData.forEach((ca) => {
|
||||
map[ca.id] = ca.type;
|
||||
});
|
||||
return map;
|
||||
}, [caData]);
|
||||
|
||||
const getCertStatusBadge = (status: string, notAfter: string) => {
|
||||
if (status === CertStatus.REVOKED) {
|
||||
return <Badge variant="danger">Revoked</Badge>;
|
||||
@@ -121,39 +138,53 @@ export const PkiSubscriberCertificatesTable = ({ subscriberName, handlePopUpOpen
|
||||
: "-"}
|
||||
</Td>
|
||||
<Td className="flex justify-end">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild className="rounded-lg">
|
||||
<div className="hover:text-primary-400 data-[state=open]:text-primary-400">
|
||||
<Tooltip content="More options">
|
||||
<FontAwesomeIcon size="lg" icon={faEllipsis} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="p-1">
|
||||
<ProjectPermissionCan
|
||||
I={ProjectPermissionPkiSubscriberActions.Delete}
|
||||
a={ProjectPermissionSub.PkiSubscribers}
|
||||
>
|
||||
{(isAllowed) => (
|
||||
<DropdownMenuItem
|
||||
className={twMerge(
|
||||
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
|
||||
)}
|
||||
onClick={() =>
|
||||
handlePopUpOpen &&
|
||||
handlePopUpOpen("revokeCertificate", {
|
||||
serialNumber: certificate.serialNumber
|
||||
})
|
||||
}
|
||||
disabled={!isAllowed}
|
||||
icon={<FontAwesomeIcon icon={faTrash} />}
|
||||
{(() => {
|
||||
const caType = caCapabilityMap[certificate.caId];
|
||||
const supportsRevocation =
|
||||
caType && caSupportsCapability(caType, CaCapability.REVOKE_CERTIFICATES);
|
||||
|
||||
// Don't show dropdown for CAs that don't support revocation
|
||||
if (!supportsRevocation) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild className="rounded-lg">
|
||||
<div className="hover:text-primary-400 data-[state=open]:text-primary-400">
|
||||
<Tooltip content="More options">
|
||||
<FontAwesomeIcon size="lg" icon={faEllipsis} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="p-1">
|
||||
<ProjectPermissionCan
|
||||
I={ProjectPermissionPkiSubscriberActions.Delete}
|
||||
a={ProjectPermissionSub.PkiSubscribers}
|
||||
>
|
||||
Revoke Certificate
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</ProjectPermissionCan>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
{(isAllowed) => (
|
||||
<DropdownMenuItem
|
||||
className={twMerge(
|
||||
!isAllowed &&
|
||||
"pointer-events-none cursor-not-allowed opacity-50"
|
||||
)}
|
||||
onClick={() =>
|
||||
handlePopUpOpen &&
|
||||
handlePopUpOpen("revokeCertificate", {
|
||||
serialNumber: certificate.serialNumber
|
||||
})
|
||||
}
|
||||
disabled={!isAllowed}
|
||||
icon={<FontAwesomeIcon icon={faTrash} />}
|
||||
>
|
||||
Revoke Certificate
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</ProjectPermissionCan>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
})()}
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
|
||||
+312
-60
@@ -26,6 +26,7 @@ import { useWorkspace } from "@app/context";
|
||||
import {
|
||||
CaType,
|
||||
useCreatePkiSubscriber,
|
||||
useGetAzureAdcsTemplates,
|
||||
useGetPkiSubscriber,
|
||||
useListCasByProjectId,
|
||||
useListWorkspacePkiSubscribers,
|
||||
@@ -77,7 +78,80 @@ const schema = z
|
||||
}),
|
||||
enableAutoRenewal: z.boolean().optional().default(false),
|
||||
renewalBefore: z.number().min(1).optional(),
|
||||
renewalUnit: z.nativeEnum(TimeUnit).optional()
|
||||
renewalUnit: z.nativeEnum(TimeUnit).optional(),
|
||||
// Properties for Azure ADCS only
|
||||
azureTemplateType: z.string().optional(),
|
||||
organization: z
|
||||
.string()
|
||||
.trim()
|
||||
.max(64, "Organization cannot exceed 64 characters")
|
||||
.regex(
|
||||
/^[^,=+<>#;\\"/\r\n\t]*$/,
|
||||
'Organization contains invalid characters: , = + < > # ; \\ " / \\r \\n \\t'
|
||||
)
|
||||
.regex(
|
||||
/^[^\s\-_.]+.*[^\s\-_.]+$|^[^\s\-_.]{1}$/,
|
||||
"Organization cannot start or end with spaces, hyphens, underscores, or periods"
|
||||
)
|
||||
.optional()
|
||||
.or(z.literal("")),
|
||||
organizationalUnit: z
|
||||
.string()
|
||||
.trim()
|
||||
.max(64, "Organizational Unit cannot exceed 64 characters")
|
||||
.regex(
|
||||
/^[^,=+<>#;\\"/\r\n\t]*$/,
|
||||
'Organizational Unit contains invalid characters: , = + < > # ; \\ " / \\r \\n \\t'
|
||||
)
|
||||
.regex(
|
||||
/^[^\s\-_.]+.*[^\s\-_.]+$|^[^\s\-_.]{1}$/,
|
||||
"Organizational Unit cannot start or end with spaces, hyphens, underscores, or periods"
|
||||
)
|
||||
.optional()
|
||||
.or(z.literal("")),
|
||||
country: z
|
||||
.string()
|
||||
.trim()
|
||||
.length(2, "Country must be exactly 2 characters")
|
||||
.regex(/^[A-Z]{2}$/, "Country must be exactly 2 uppercase letters")
|
||||
.optional()
|
||||
.or(z.literal("")),
|
||||
state: z
|
||||
.string()
|
||||
.trim()
|
||||
.max(64, "State cannot exceed 64 characters")
|
||||
.regex(
|
||||
/^[^,=+<>#;\\"/\r\n\t]*$/,
|
||||
'State contains invalid characters: , = + < > # ; \\ " / \\r \\n \\t'
|
||||
)
|
||||
.regex(
|
||||
/^[^\s\-_.]+.*[^\s\-_.]+$|^[^\s\-_.]{1}$/,
|
||||
"State cannot start or end with spaces, hyphens, underscores, or periods"
|
||||
)
|
||||
.optional()
|
||||
.or(z.literal("")),
|
||||
locality: z
|
||||
.string()
|
||||
.trim()
|
||||
.max(64, "Locality cannot exceed 64 characters")
|
||||
.regex(
|
||||
/^[^,=+<>#;\\"/\r\n\t]*$/,
|
||||
'Locality contains invalid characters: , = + < > # ; \\ " / \\r \\n \\t'
|
||||
)
|
||||
.regex(
|
||||
/^[^\s\-_.]+.*[^\s\-_.]+$|^[^\s\-_.]{1}$/,
|
||||
"Locality cannot start or end with spaces, hyphens, underscores, or periods"
|
||||
)
|
||||
.optional()
|
||||
.or(z.literal("")),
|
||||
emailAddress: z
|
||||
.string()
|
||||
.trim()
|
||||
.email("Email Address must be a valid email format")
|
||||
.min(6, "Email Address must be at least 6 characters")
|
||||
.max(64, "Email Address cannot exceed 64 characters")
|
||||
.optional()
|
||||
.or(z.literal(""))
|
||||
})
|
||||
.required();
|
||||
|
||||
@@ -121,7 +195,14 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
extendedKeyUsages: {},
|
||||
enableAutoRenewal: false,
|
||||
renewalBefore: 7,
|
||||
renewalUnit: TimeUnit.DAY
|
||||
renewalUnit: TimeUnit.DAY,
|
||||
azureTemplateType: "",
|
||||
organization: "",
|
||||
organizationalUnit: "",
|
||||
country: "",
|
||||
state: "",
|
||||
locality: "",
|
||||
emailAddress: ""
|
||||
}
|
||||
});
|
||||
|
||||
@@ -129,46 +210,52 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
const selectedCa = cas?.find((ca) => ca.id === selectedCaId);
|
||||
const selectedAutoRenewalState = watch("enableAutoRenewal");
|
||||
|
||||
// Fetch Azure ADCS templates when Azure CA is selected
|
||||
const { data: azureTemplates } = useGetAzureAdcsTemplates({
|
||||
caId: selectedCa?.type === CaType.AZURE_AD_CS ? selectedCaId : "",
|
||||
projectId
|
||||
});
|
||||
|
||||
// Initialize form with ALL subscriber data including template
|
||||
useEffect(() => {
|
||||
if (pkiSubscriber) {
|
||||
reset({
|
||||
name: pkiSubscriber.name,
|
||||
caId: pkiSubscriber.caId || "",
|
||||
commonName: pkiSubscriber.commonName,
|
||||
subjectAlternativeNames: pkiSubscriber.subjectAlternativeNames.join(", ") || "",
|
||||
ttl: pkiSubscriber.ttl || "",
|
||||
keyUsages: Object.fromEntries((pkiSubscriber.keyUsages || []).map((name) => [name, true])),
|
||||
extendedKeyUsages: Object.fromEntries(
|
||||
(pkiSubscriber.extendedKeyUsages || []).map((name) => [name, true])
|
||||
),
|
||||
enableAutoRenewal: pkiSubscriber.enableAutoRenewal || false,
|
||||
renewalBefore: pkiSubscriber.autoRenewalPeriodInDays || 7,
|
||||
renewalUnit: TimeUnit.DAY
|
||||
});
|
||||
} else {
|
||||
reset({
|
||||
name: "",
|
||||
caId: "",
|
||||
commonName: "",
|
||||
subjectAlternativeNames: "",
|
||||
ttl: "",
|
||||
keyUsages: {
|
||||
[CertKeyUsage.DIGITAL_SIGNATURE]: true,
|
||||
[CertKeyUsage.KEY_ENCIPHERMENT]: true
|
||||
},
|
||||
extendedKeyUsages: {},
|
||||
enableAutoRenewal: false,
|
||||
renewalBefore: 7,
|
||||
renewalUnit: TimeUnit.DAY
|
||||
});
|
||||
// Set all values directly and immediately
|
||||
setValue("name", pkiSubscriber.name);
|
||||
setValue("caId", pkiSubscriber.caId || "");
|
||||
setValue("commonName", pkiSubscriber.commonName);
|
||||
setValue("subjectAlternativeNames", pkiSubscriber.subjectAlternativeNames.join(", "));
|
||||
setValue("ttl", pkiSubscriber.ttl || "");
|
||||
setValue(
|
||||
"keyUsages",
|
||||
Object.fromEntries((pkiSubscriber.keyUsages || []).map((name) => [name, true]))
|
||||
);
|
||||
setValue(
|
||||
"extendedKeyUsages",
|
||||
Object.fromEntries((pkiSubscriber.extendedKeyUsages || []).map((name) => [name, true]))
|
||||
);
|
||||
setValue("enableAutoRenewal", pkiSubscriber.enableAutoRenewal || false);
|
||||
setValue("renewalBefore", pkiSubscriber.autoRenewalPeriodInDays || 7);
|
||||
setValue("renewalUnit", TimeUnit.DAY);
|
||||
|
||||
// Set Azure template immediately
|
||||
setValue("azureTemplateType", pkiSubscriber.properties?.azureTemplateType || "");
|
||||
|
||||
// Set all Additional Subject Fields immediately
|
||||
setValue("organization", pkiSubscriber.properties?.organization || "");
|
||||
setValue("organizationalUnit", pkiSubscriber.properties?.organizationalUnit || "");
|
||||
setValue("country", pkiSubscriber.properties?.country || "");
|
||||
setValue("state", pkiSubscriber.properties?.state || "");
|
||||
setValue("locality", pkiSubscriber.properties?.locality || "");
|
||||
setValue("emailAddress", pkiSubscriber.properties?.emailAddress || "");
|
||||
}
|
||||
}, [pkiSubscriber, reset]);
|
||||
}, [pkiSubscriber, setValue]);
|
||||
|
||||
useEffect(() => {
|
||||
if (cas?.length) {
|
||||
if (cas?.length && !pkiSubscriber) {
|
||||
// Only auto-select first CA when creating new subscriber, not when updating
|
||||
setValue("caId", cas[0].id);
|
||||
}
|
||||
}, [cas, setValue]);
|
||||
}, [cas, setValue, pkiSubscriber]);
|
||||
|
||||
const onFormSubmit = async ({
|
||||
name,
|
||||
@@ -180,7 +267,14 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
extendedKeyUsages,
|
||||
enableAutoRenewal,
|
||||
renewalBefore,
|
||||
renewalUnit
|
||||
renewalUnit,
|
||||
azureTemplateType,
|
||||
organization,
|
||||
organizationalUnit,
|
||||
country,
|
||||
state,
|
||||
locality,
|
||||
emailAddress
|
||||
}: FormData) => {
|
||||
try {
|
||||
if (!projectId) return;
|
||||
@@ -205,13 +299,28 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
return;
|
||||
}
|
||||
|
||||
const keyUsagesList = Object.entries(keyUsages)
|
||||
.filter(([, value]) => value)
|
||||
.map(([key]) => key as CertKeyUsage);
|
||||
// Validate Azure template for Azure ADCS CA
|
||||
if (selectedCa?.type === CaType.AZURE_AD_CS && !azureTemplateType) {
|
||||
createNotification({
|
||||
text: "Please select an Azure certificate template",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const extendedKeyUsagesList = Object.entries(extendedKeyUsages)
|
||||
.filter(([, value]) => value)
|
||||
.map(([key]) => key as CertExtendedKeyUsage);
|
||||
const keyUsagesList =
|
||||
selectedCa?.type === CaType.AZURE_AD_CS
|
||||
? []
|
||||
: Object.entries(keyUsages)
|
||||
.filter(([, value]) => value)
|
||||
.map(([key]) => key as CertKeyUsage);
|
||||
|
||||
const extendedKeyUsagesList =
|
||||
selectedCa?.type === CaType.AZURE_AD_CS
|
||||
? []
|
||||
: Object.entries(extendedKeyUsages)
|
||||
.filter(([, value]) => value)
|
||||
.map(([key]) => key as CertExtendedKeyUsage);
|
||||
|
||||
const subjectAlternativeNamesList = subjectAlternativeNames
|
||||
.split(",")
|
||||
@@ -222,6 +331,17 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
? convertTimeUnitValueToDays(renewalUnit, renewalBefore)
|
||||
: undefined;
|
||||
|
||||
// Build properties object
|
||||
const properties = {
|
||||
...(selectedCa?.type === CaType.AZURE_AD_CS && azureTemplateType && { azureTemplateType }),
|
||||
...(organization && { organization }),
|
||||
...(organizationalUnit && { organizationalUnit }),
|
||||
...(country && { country }),
|
||||
...(state && { state }),
|
||||
...(locality && { locality }),
|
||||
...(emailAddress && { emailAddress })
|
||||
};
|
||||
|
||||
if (pkiSubscriber) {
|
||||
await updateMutateAsync({
|
||||
subscriberName: pkiSubscriber.name,
|
||||
@@ -234,7 +354,8 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
keyUsages: keyUsagesList,
|
||||
extendedKeyUsages: extendedKeyUsagesList,
|
||||
enableAutoRenewal,
|
||||
autoRenewalPeriodInDays
|
||||
autoRenewalPeriodInDays,
|
||||
properties: Object.keys(properties).length > 0 ? properties : undefined
|
||||
});
|
||||
} else {
|
||||
await createMutateAsync({
|
||||
@@ -247,7 +368,8 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
keyUsages: keyUsagesList,
|
||||
extendedKeyUsages: extendedKeyUsagesList,
|
||||
enableAutoRenewal,
|
||||
autoRenewalPeriodInDays
|
||||
autoRenewalPeriodInDays,
|
||||
properties: Object.keys(properties).length > 0 ? properties : undefined
|
||||
});
|
||||
}
|
||||
|
||||
@@ -276,17 +398,7 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
}}
|
||||
>
|
||||
<ModalContent title={`${pkiSubscriber ? "Update" : "Add"} PKI Subscriber`}>
|
||||
<form
|
||||
onSubmit={handleSubmit(onFormSubmit, (fields) => {
|
||||
setTabValue(
|
||||
["name", "caId", "commonName", "subjectAlternativeNames", "ttl"].includes(
|
||||
Object.keys(fields)[0]
|
||||
)
|
||||
? FormTab.Configuration
|
||||
: FormTab.Advanced
|
||||
);
|
||||
})}
|
||||
>
|
||||
<form key={pkiSubscriber?.id || "new"} onSubmit={handleSubmit(onFormSubmit)}>
|
||||
<Tabs value={tabValue} onValueChange={(value) => setTabValue(value as FormTab)}>
|
||||
<TabList>
|
||||
<Tab value={FormTab.Configuration}>Configuration</Tab>
|
||||
@@ -323,8 +435,7 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
isRequired
|
||||
>
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-full"
|
||||
>
|
||||
@@ -342,6 +453,34 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
{selectedCa?.type === CaType.AZURE_AD_CS && (
|
||||
<Controller
|
||||
control={control}
|
||||
name="azureTemplateType"
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Certificate Template"
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
isRequired
|
||||
>
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-full"
|
||||
>
|
||||
{(azureTemplates?.templates || []).map(
|
||||
(template: { id: string; name: string }) => (
|
||||
<SelectItem value={template.id} key={template.id}>
|
||||
{template.name}
|
||||
</SelectItem>
|
||||
)
|
||||
)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="commonName"
|
||||
@@ -369,6 +508,120 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Additional Subject Fields - Only for Azure ADCS CAs */}
|
||||
{selectedCa?.type === CaType.AZURE_AD_CS && (
|
||||
<Accordion type="single" collapsible className="mb-4 w-full">
|
||||
<AccordionItem value="subject-fields" className="data-[state=open]:border-none">
|
||||
<AccordionTrigger className="h-fit flex-none pl-1 text-sm">
|
||||
<div className="order-1 ml-3">Additional Subject Fields</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<Controller
|
||||
control={control}
|
||||
name="organization"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Organization (O)"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
tooltipText="Maximum 64 characters. No special DN characters allowed. Cannot start/end with spaces, hyphens, underscores, or periods."
|
||||
>
|
||||
<Input {...field} placeholder="Example Corp" maxLength={64} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="organizationalUnit"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Organizational Unit (OU)"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
tooltipText="Maximum 64 characters. No special DN characters allowed. Cannot start/end with spaces, hyphens, underscores, or periods."
|
||||
>
|
||||
<Input {...field} placeholder="IT Department" maxLength={64} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Controller
|
||||
control={control}
|
||||
name="country"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Country (C)"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
tooltipText="Exactly 2 uppercase letters (ISO 3166-1 alpha-2 code). Examples: US, CA, GB, DE"
|
||||
>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="US"
|
||||
maxLength={2}
|
||||
style={{ textTransform: "uppercase" }}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="state"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="State/Province (ST)"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
tooltipText="Maximum 64 characters. No special DN characters allowed. Cannot start/end with spaces, hyphens, underscores, or periods."
|
||||
>
|
||||
<Input {...field} placeholder="California" maxLength={64} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Controller
|
||||
control={control}
|
||||
name="locality"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Locality (L)"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
tooltipText="Maximum 64 characters. No special DN characters allowed. Cannot start/end with spaces, hyphens, underscores, or periods."
|
||||
>
|
||||
<Input {...field} placeholder="San Francisco" maxLength={64} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="emailAddress"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Email Address"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
tooltipText="Valid email format, 6-64 characters. Example: [email protected]"
|
||||
>
|
||||
<Input
|
||||
{...field}
|
||||
type="email"
|
||||
placeholder="[email protected]"
|
||||
maxLength={64}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
)}
|
||||
|
||||
{selectedCa?.type !== CaType.ACME && (
|
||||
<Controller
|
||||
control={control}
|
||||
@@ -385,7 +638,7 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{selectedCa?.type !== CaType.ACME && (
|
||||
{selectedCa?.type !== CaType.ACME && selectedCa?.type !== CaType.AZURE_AD_CS && (
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
<AccordionItem value="key-usages" className="data-[state=open]:border-none">
|
||||
<AccordionTrigger className="h-fit flex-none pl-1 text-sm">
|
||||
@@ -517,8 +770,7 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-48"
|
||||
>
|
||||
|
||||
+5
@@ -12,6 +12,7 @@ import { AppConnectionHeader } from "../AppConnectionHeader";
|
||||
import { OnePassConnectionForm } from "./1PasswordConnectionForm";
|
||||
import { Auth0ConnectionForm } from "./Auth0ConnectionForm";
|
||||
import { AwsConnectionForm } from "./AwsConnectionForm";
|
||||
import { AzureADCSConnectionForm } from "./AzureADCSConnectionForm";
|
||||
import { AzureAppConfigurationConnectionForm } from "./AzureAppConfigurationConnectionForm";
|
||||
import { AzureClientSecretsConnectionForm } from "./AzureClientSecretsConnectionForm";
|
||||
import { AzureDevOpsConnectionForm } from "./AzureDevOpsConnectionForm";
|
||||
@@ -96,6 +97,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
|
||||
return <AzureKeyVaultConnectionForm onSubmit={onSubmit} />;
|
||||
case AppConnection.AzureAppConfiguration:
|
||||
return <AzureAppConfigurationConnectionForm onSubmit={onSubmit} />;
|
||||
case AppConnection.AzureADCS:
|
||||
return <AzureADCSConnectionForm onSubmit={onSubmit} />;
|
||||
case AppConnection.Databricks:
|
||||
return <DatabricksConnectionForm onSubmit={onSubmit} />;
|
||||
case AppConnection.Humanitec:
|
||||
@@ -208,6 +211,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
|
||||
return (
|
||||
<AzureAppConfigurationConnectionForm appConnection={appConnection} onSubmit={onSubmit} />
|
||||
);
|
||||
case AppConnection.AzureADCS:
|
||||
return <AzureADCSConnectionForm appConnection={appConnection} onSubmit={onSubmit} />;
|
||||
case AppConnection.Databricks:
|
||||
return <DatabricksConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
|
||||
case AppConnection.Humanitec:
|
||||
|
||||
+294
@@ -0,0 +1,294 @@
|
||||
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 { AzureADCSConnectionMethod, TAzureADCSConnection } from "@app/hooks/api/appConnections";
|
||||
import { AppConnection } from "@app/hooks/api/appConnections/enums";
|
||||
|
||||
import {
|
||||
genericAppConnectionFieldsSchema,
|
||||
GenericAppConnectionsFields
|
||||
} from "./GenericAppConnectionFields";
|
||||
|
||||
type Props = {
|
||||
appConnection?: TAzureADCSConnection;
|
||||
onSubmit: (formData: FormData) => Promise<void>;
|
||||
};
|
||||
|
||||
const rootSchema = genericAppConnectionFieldsSchema.extend({
|
||||
app: z.literal(AppConnection.AzureADCS)
|
||||
});
|
||||
|
||||
const formSchema = z.discriminatedUnion("method", [
|
||||
rootSchema.extend({
|
||||
method: z.literal(AzureADCSConnectionMethod.UsernamePassword),
|
||||
credentials: z.object({
|
||||
adcsUrl: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(1, "ADCS URL required")
|
||||
.refine((value) => value.startsWith("https://"), "ADCS URL must use HTTPS"),
|
||||
username: z.string().trim().min(1, "Username required"),
|
||||
password: z.string().trim().min(1, "Password required"),
|
||||
sslRejectUnauthorized: z.boolean().optional(),
|
||||
sslCertificate: z
|
||||
.string()
|
||||
.trim()
|
||||
.transform((value) => value || undefined)
|
||||
.optional()
|
||||
})
|
||||
})
|
||||
]);
|
||||
|
||||
type FormData = z.infer<typeof formSchema>;
|
||||
|
||||
export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
|
||||
const isUpdate = Boolean(appConnection);
|
||||
const [selectedTabIndex, setSelectedTabIndex] = useState(0);
|
||||
|
||||
const form = useForm<FormData>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: appConnection ?? {
|
||||
app: AppConnection.AzureADCS,
|
||||
method: AzureADCSConnectionMethod.UsernamePassword,
|
||||
name: "",
|
||||
description: "",
|
||||
credentials: {
|
||||
adcsUrl: "",
|
||||
username: "",
|
||||
password: "",
|
||||
sslRejectUnauthorized: true,
|
||||
sslCertificate: undefined
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
formState: { isSubmitting, isDirty },
|
||||
watch
|
||||
} = form;
|
||||
|
||||
const sslEnabled = watch("credentials.adcsUrl")?.startsWith("https://") ?? false;
|
||||
|
||||
return (
|
||||
<FormProvider {...form}>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
setSelectedTabIndex(0);
|
||||
handleSubmit(onSubmit)(e);
|
||||
}}
|
||||
>
|
||||
{!isUpdate && <GenericAppConnectionsFields />}
|
||||
<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.AzureADCS].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(AzureADCSConnectionMethod).map((method) => {
|
||||
return (
|
||||
<SelectItem value={method} key={method}>
|
||||
{getAppConnectionMethodDetails(method).name}
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<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">
|
||||
SSL configuration for HTTPS connections
|
||||
</div>
|
||||
)}
|
||||
<Tab.Panels className="mb-4 rounded border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
|
||||
<Tab.Panel>
|
||||
<Controller
|
||||
name="credentials.adcsUrl"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error?.message)}
|
||||
label="ADCS URL"
|
||||
>
|
||||
<Input {...field} placeholder="https://your-adcs-server.com/certsrv" />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Controller
|
||||
name="credentials.username"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error?.message)}
|
||||
label="Username"
|
||||
>
|
||||
<Input {...field} placeholder="DOMAIN\\username or [email protected]" />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="credentials.password"
|
||||
control={control}
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error?.message)}
|
||||
label="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}
|
||||
placeholder="-----BEGIN CERTIFICATE-----
|
||||
...
|
||||
-----END CERTIFICATE-----"
|
||||
/>
|
||||
</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 ADCS server if it has a
|
||||
valid, trusted SSL certificate. Disable only in test environments with
|
||||
self-signed certificates.
|
||||
</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"
|
||||
size="sm"
|
||||
type="submit"
|
||||
colorSchema="secondary"
|
||||
isLoading={isSubmitting}
|
||||
isDisabled={isSubmitting || !isDirty}
|
||||
>
|
||||
{isUpdate ? "Update Credentials" : "Connect to Azure ADCS"}
|
||||
</Button>
|
||||
<ModalClose asChild>
|
||||
<Button colorSchema="secondary" variant="plain">
|
||||
Cancel
|
||||
</Button>
|
||||
</ModalClose>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
@@ -11,7 +11,7 @@ import { usePopUp } from "@app/hooks/usePopUp";
|
||||
|
||||
import { AllProjectView } from "./components/AllProjectView";
|
||||
import { MyProjectView } from "./components/MyProjectView";
|
||||
import { ProjectListToggle, ProjectListView } from "./components/ProjectListToggle";
|
||||
import { ProjectListView } from "./components/ProjectListToggle";
|
||||
|
||||
// const formatDescription = (type: ProjectType) => {
|
||||
// if (type === ProjectType.SecretManager)
|
||||
@@ -28,7 +28,23 @@ import { ProjectListToggle, ProjectListView } from "./components/ProjectListTogg
|
||||
export const ProjectsPage = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [projectListView, setProjectListView] = useState(ProjectListView.MyProjects);
|
||||
const [projectListView, setProjectListView] = useState<ProjectListView>(() => {
|
||||
const storedView = localStorage.getItem("projectListView");
|
||||
|
||||
if (
|
||||
storedView &&
|
||||
(storedView === ProjectListView.AllProjects || storedView === ProjectListView.MyProjects)
|
||||
) {
|
||||
return storedView;
|
||||
}
|
||||
|
||||
return ProjectListView.MyProjects;
|
||||
});
|
||||
|
||||
const handleSetProjectListView = (value: ProjectListView) => {
|
||||
localStorage.setItem("projectListView", value);
|
||||
setProjectListView(value);
|
||||
};
|
||||
|
||||
const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
|
||||
"addNewWs",
|
||||
@@ -49,11 +65,7 @@ export const ProjectsPage = () => {
|
||||
</Helmet>
|
||||
<div className="mb-4 flex flex-col items-start justify-start">
|
||||
<PageHeader
|
||||
title={
|
||||
<div className="flex items-center gap-4">
|
||||
<ProjectListToggle value={projectListView} onChange={setProjectListView} />
|
||||
</div>
|
||||
}
|
||||
title="Projects"
|
||||
description="Your team's complete security toolkit - organized and ready when you need them."
|
||||
/>
|
||||
</div>
|
||||
@@ -62,12 +74,16 @@ export const ProjectsPage = () => {
|
||||
onAddNewProject={() => handlePopUpOpen("addNewWs")}
|
||||
onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
|
||||
isAddingProjectsAllowed={isAddingProjectsAllowed}
|
||||
projectListView={projectListView}
|
||||
onProjectListViewChange={handleSetProjectListView}
|
||||
/>
|
||||
) : (
|
||||
<AllProjectView
|
||||
onAddNewProject={() => handlePopUpOpen("addNewWs")}
|
||||
onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
|
||||
isAddingProjectsAllowed={isAddingProjectsAllowed}
|
||||
projectListView={projectListView}
|
||||
onProjectListViewChange={handleSetProjectListView}
|
||||
/>
|
||||
)}
|
||||
<NewProjectModal
|
||||
|
||||
@@ -49,11 +49,17 @@ import {
|
||||
useSearchProjects
|
||||
} from "@app/hooks/api";
|
||||
import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
|
||||
import {
|
||||
ProjectListToggle,
|
||||
ProjectListView
|
||||
} from "@app/pages/organization/ProjectsPage/components/ProjectListToggle";
|
||||
|
||||
type Props = {
|
||||
onAddNewProject: () => void;
|
||||
onUpgradePlan: () => void;
|
||||
isAddingProjectsAllowed: boolean;
|
||||
projectListView: ProjectListView;
|
||||
onProjectListViewChange: (value: ProjectListView) => void;
|
||||
};
|
||||
|
||||
type RequestAccessModalProps = {
|
||||
@@ -106,7 +112,9 @@ const RequestAccessModal = ({ projectId, onPopUpToggle }: RequestAccessModalProp
|
||||
export const AllProjectView = ({
|
||||
onAddNewProject,
|
||||
onUpgradePlan,
|
||||
isAddingProjectsAllowed
|
||||
isAddingProjectsAllowed,
|
||||
projectListView,
|
||||
onProjectListViewChange
|
||||
}: Props) => {
|
||||
const navigate = useNavigate();
|
||||
const [searchFilter, setSearchFilter] = useState("");
|
||||
@@ -176,10 +184,10 @@ export const AllProjectView = ({
|
||||
return (
|
||||
<div>
|
||||
<div className="flex w-full flex-row">
|
||||
<div className="flex-grow" />
|
||||
<ProjectListToggle value={projectListView} onChange={onProjectListViewChange} />
|
||||
<Input
|
||||
className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
|
||||
containerClassName="w-full"
|
||||
containerClassName="w-full ml-2"
|
||||
placeholder="Search by project name..."
|
||||
value={searchFilter}
|
||||
onChange={(e) => setSearchFilter(e.target.value)}
|
||||
@@ -242,7 +250,7 @@ export const AllProjectView = ({
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
|
||||
<div className="ml-2 flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
|
||||
<Tooltip content="Disabled across All Project view.">
|
||||
<div className="flex cursor-not-allowed items-center justify-center">
|
||||
<IconButton
|
||||
|
||||
@@ -44,11 +44,17 @@ import { OrderByDirection } from "@app/hooks/api/generic/types";
|
||||
import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
|
||||
import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
|
||||
import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
|
||||
import {
|
||||
ProjectListToggle,
|
||||
ProjectListView
|
||||
} from "@app/pages/organization/ProjectsPage/components/ProjectListToggle";
|
||||
|
||||
type Props = {
|
||||
onAddNewProject: () => void;
|
||||
onUpgradePlan: () => void;
|
||||
isAddingProjectsAllowed: boolean;
|
||||
projectListView: ProjectListView;
|
||||
onProjectListViewChange: (value: ProjectListView) => void;
|
||||
};
|
||||
|
||||
enum ProjectOrderBy {
|
||||
@@ -63,7 +69,9 @@ enum ProjectsViewMode {
|
||||
export const MyProjectView = ({
|
||||
onAddNewProject,
|
||||
onUpgradePlan,
|
||||
isAddingProjectsAllowed
|
||||
isAddingProjectsAllowed,
|
||||
projectListView,
|
||||
onProjectListViewChange
|
||||
}: Props) => {
|
||||
const navigate = useNavigate();
|
||||
const { currentOrg } = useOrganization();
|
||||
@@ -371,10 +379,10 @@ export const MyProjectView = ({
|
||||
return (
|
||||
<div>
|
||||
<div className="flex w-full flex-row">
|
||||
<div className="flex-grow" />
|
||||
<ProjectListToggle value={projectListView} onChange={onProjectListViewChange} />
|
||||
<Input
|
||||
className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
|
||||
containerClassName="w-full"
|
||||
containerClassName="w-full ml-2"
|
||||
placeholder="Search by project name..."
|
||||
value={searchFilter}
|
||||
onChange={(e) => setSearchFilter(e.target.value)}
|
||||
@@ -441,7 +449,7 @@ export const MyProjectView = ({
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
|
||||
<div className="ml-2 flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
|
||||
<IconButton
|
||||
variant="outline_bg"
|
||||
onClick={() => {
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { Select, SelectItem } from "@app/components/v2";
|
||||
import { Button } from "@app/components/v2";
|
||||
|
||||
export enum ProjectListView {
|
||||
MyProjects = "my-projects",
|
||||
@@ -14,28 +11,32 @@ type Props = {
|
||||
};
|
||||
|
||||
export const ProjectListToggle = ({ value, onChange }: Props) => {
|
||||
const getDisplayText = (listView: ProjectListView) => {
|
||||
return listView === ProjectListView.MyProjects ? "My Projects" : "All Projects";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="group relative flex cursor-pointer items-center gap-2">
|
||||
<h1 className="text-3xl font-semibold transition-colors group-hover:text-gray-500">
|
||||
{getDisplayText(value)}
|
||||
</h1>
|
||||
<Select
|
||||
value={value}
|
||||
onValueChange={onChange}
|
||||
className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0"
|
||||
position="popper"
|
||||
<div className="flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
|
||||
<Button
|
||||
variant="outline_bg"
|
||||
onClick={() => {
|
||||
onChange(ProjectListView.MyProjects);
|
||||
}}
|
||||
size="xs"
|
||||
className={`${
|
||||
value === ProjectListView.MyProjects ? "bg-mineshaft-500" : "bg-transparent"
|
||||
} min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
|
||||
>
|
||||
<SelectItem value={ProjectListView.MyProjects}>My Projects</SelectItem>
|
||||
<SelectItem value={ProjectListView.AllProjects}>All Projects</SelectItem>
|
||||
</Select>
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronDown}
|
||||
className="text-lg transition-colors group-hover:text-gray-500"
|
||||
/>
|
||||
My Projects
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline_bg"
|
||||
onClick={() => {
|
||||
onChange(ProjectListView.AllProjects);
|
||||
}}
|
||||
size="xs"
|
||||
className={`${
|
||||
value === ProjectListView.AllProjects ? "bg-mineshaft-500" : "bg-transparent"
|
||||
} min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
|
||||
>
|
||||
All Projects
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
+2
-2
@@ -175,8 +175,8 @@ export const getSecretSyncDestinationColValues = (secretSync: TSecretSync) => {
|
||||
secondaryText = "Railway Project";
|
||||
break;
|
||||
case SecretSync.Checkly:
|
||||
primaryText = destinationConfig.accountName;
|
||||
secondaryText = "Checkly Account";
|
||||
primaryText = destinationConfig.accountName || destinationConfig.accountId;
|
||||
secondaryText = destinationConfig.groupName || destinationConfig.groupId || "Checkly Account";
|
||||
break;
|
||||
case SecretSync.Supabase:
|
||||
primaryText = destinationConfig.projectName;
|
||||
|
||||
+1
-1
@@ -233,7 +233,7 @@ export const SecretApprovalRequestChanges = ({
|
||||
return (
|
||||
<div className="flex flex-col space-x-6 lg:flex-row">
|
||||
<div className="flex-1 lg:max-w-[calc(100%-17rem)]">
|
||||
<div className="sticky top-0 z-20 flex items-center space-x-4 bg-bunker-800 pb-6 pt-2">
|
||||
<div className="sticky -top-8 z-20 flex items-center space-x-4 bg-bunker-800 pb-6 pt-2">
|
||||
<IconButton variant="outline_bg" ariaLabel="go-back" onClick={onGoBack}>
|
||||
<FontAwesomeIcon icon={faArrowLeft} />
|
||||
</IconButton>
|
||||
|
||||
+12
-8
@@ -396,9 +396,11 @@ export const CreateReminderForm = ({
|
||||
open: isDatePickerOpen,
|
||||
onOpenChange: setIsDatePickerOpen
|
||||
}}
|
||||
popUpContentProps={{}}
|
||||
popUpContentProps={{
|
||||
align: "end"
|
||||
}}
|
||||
hideTime
|
||||
hidden={{ before: new Date(Date.now() + ONE_DAY_IN_MILLIS) }}
|
||||
disabled={{ before: new Date(Date.now() + ONE_DAY_IN_MILLIS) }}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
@@ -426,9 +428,11 @@ export const CreateReminderForm = ({
|
||||
open: isDatePickerOpen,
|
||||
onOpenChange: setIsDatePickerOpen
|
||||
}}
|
||||
popUpContentProps={{}}
|
||||
popUpContentProps={{
|
||||
align: "start"
|
||||
}}
|
||||
hideTime
|
||||
hidden={{ before: new Date(Date.now() + ONE_DAY_IN_MILLIS) }}
|
||||
disabled={{ before: new Date(Date.now() + ONE_DAY_IN_MILLIS) }}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
@@ -479,15 +483,15 @@ export const CreateReminderForm = ({
|
||||
/>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center space-x-4 pt-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
isDisabled={isSubmitting}
|
||||
isLoading={isSubmitting}
|
||||
className=""
|
||||
variant="outline_bg"
|
||||
leftIcon={<FontAwesomeIcon icon={faClock} />}
|
||||
type="submit"
|
||||
>
|
||||
{isEditMode ? "Update" : "Create"} reminder
|
||||
{isEditMode ? "Update" : "Create"} Reminder
|
||||
</Button>
|
||||
|
||||
{isEditMode && (
|
||||
@@ -499,7 +503,7 @@ export const CreateReminderForm = ({
|
||||
type="button"
|
||||
isDisabled={isSubmitting}
|
||||
>
|
||||
Delete reminder
|
||||
Delete Reminder
|
||||
</Button>
|
||||
)}
|
||||
|
||||
|
||||
+8
-1
@@ -8,5 +8,12 @@ type Props = {
|
||||
export const ChecklySyncDestinationSection = ({ secretSync }: Props) => {
|
||||
const { destinationConfig } = secretSync;
|
||||
|
||||
return <GenericFieldLabel label="Account">{destinationConfig.accountName}</GenericFieldLabel>;
|
||||
return (
|
||||
<>
|
||||
<GenericFieldLabel label="Account">{destinationConfig.accountName}</GenericFieldLabel>
|
||||
{destinationConfig.groupId && (
|
||||
<GenericFieldLabel label="Group">{destinationConfig.groupName}</GenericFieldLabel>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user