awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-12 07:29:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

PKI revamp: UI improvements

Browse Source
This commit is contained in:
Carlos Monastyrski
2025-10-10 19:49:15 -03:00
parent ef9a1961f1
commit 8905885254
45 changed files with 1156 additions and 2089 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/hooks/api/certificateProfiles/types.ts
+2 -4
View File
@@ -3,7 +3,6 @@ export type TCertificateProfile = {
projectId: string;
caId: string;
certificateTemplateId: string;
name: string;
slug: string;
description?: string;
enrollmentType: "api" | "est";
@@ -24,7 +23,7 @@ export type TCertificateProfileWithDetails = TCertificateProfile & {
certificateTemplate?: {
id: string;
projectId: string;
name: string;
slug: string;
description?: string;
};
estConfig?: {
@@ -44,7 +43,6 @@ export type TCreateCertificateProfileDTO = {
projectId: string;
caId: string;
certificateTemplateId: string;
name: string;
slug: string;
description?: string;
enrollmentType: "api" | "est";
@@ -61,7 +59,7 @@ export type TCreateCertificateProfileDTO = {
export type TUpdateCertificateProfileDTO = {
profileId: string;
name?: string;
slug?: string;
description?: string;
estConfig?: {
disableBootstrapCaValidation?: boolean;
frontend/src/hooks/api/certificateTemplates/types.ts
+3 -3
View File
@@ -167,7 +167,7 @@ export type TCertificateTemplateV2Policy = {
export type TCertificateTemplateV2New = {
id: string;
projectId: string;
name: string;
slug: string;
description?: string;
attributes: any;
keyUsages: any;
@@ -182,7 +182,7 @@ export type TCertificateTemplateV2New = {
export type TCreateCertificateTemplateV2NewDTO = {
projectId: string;
name: string;
slug: string;
description?: string;
attributes: TCertificateTemplateV2Policy["attributes"];
keyUsages: TCertificateTemplateV2Policy["keyUsages"];
@@ -195,7 +195,7 @@ export type TCreateCertificateTemplateV2NewDTO = {
export type TUpdateCertificateTemplateV2NewDTO = {
templateId: string;
name?: string;
slug?: string;
description?: string;
attributes?: TCertificateTemplateV2Policy["attributes"];
keyUsages?: TCertificateTemplateV2Policy["keyUsages"];
frontend/src/pages/cert-manager/CertificatesPage/components/CertificateIssuanceModal.tsx
+65 -98
View File
@@ -15,6 +15,7 @@ import {
AccordionItem,
AccordionTrigger,
Button,
Checkbox,
FormControl,
FormLabel,
IconButton,
@@ -26,7 +27,7 @@ import {
Tooltip
} from "@app/components/v2";
import { useProject } from "@app/context";
import { useCreateCertificateV3, useGetCert, useListWorkspacePkiCollections } from "@app/hooks/api";
import { useCreateCertificateV3, useGetCert } from "@app/hooks/api";
import { useListCertificateProfiles } from "@app/hooks/api/certificateProfiles";
import {
certKeyAlgorithms,
@@ -44,53 +45,15 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
import { CertificateContent } from "./CertificateContent";
type TriStateToggleProps = {
value: boolean | undefined;
onChange: (value: boolean | undefined) => void;
leftLabel: string;
rightLabel: string;
};
const TriStateToggle = ({ value, onChange, leftLabel, rightLabel }: TriStateToggleProps) => {
return (
<div className="flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
<Button
variant="outline_bg"
onClick={() => {
onChange(value === false ? undefined : false);
}}
size="xs"
className={`${
value === false ? "bg-mineshaft-500" : "bg-transparent"
} min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
>
{leftLabel}
</Button>
<Button
variant="outline_bg"
onClick={() => {
onChange(value === true ? undefined : true);
}}
size="xs"
className={`${
value === true ? "bg-mineshaft-500" : "bg-transparent"
} min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
>
{rightLabel}
</Button>
</div>
);
};
const schema = z.object({
profileId: z.string().min(1, "Profile is required"),
collectionId: z.string().optional(),
friendlyName: z.string(),
subjectAttributes: z
.array(
z.object({
type: z.enum(["common_name"]),
value: z.string().min(1, "Value is required")
value: z.string().min(1, "Value is required"),
include: z.enum(["mandatory", "optional", "prohibit"]).optional()
})
)
.min(1, "At least one subject attribute is required"),
@@ -98,7 +61,8 @@ const schema = z.object({
.array(
z.object({
type: z.enum(["dns", "ip", "email", "uri"]),
value: z.string().min(1, "Value is required")
value: z.string().min(1, "Value is required"),
include: z.enum(["mandatory", "optional", "prohibit"]).optional()
})
)
.default([]),
@@ -159,10 +123,6 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle }: Props) =>
includeMetrics: false
});
const { data: collectionsData } = useListWorkspacePkiCollections({
projectId: currentProject?.id || ""
});
const { mutateAsync: createCertificate } = useCreateCertificateV3();
const {
@@ -461,7 +421,6 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle }: Props) =>
const onFormSubmit = async ({
profileId,
friendlyName,
collectionId,
subjectAttributes,
altNames,
ttl,
@@ -481,7 +440,6 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle }: Props) =>
const { serialNumber, certificate, certificateChain, privateKey } = await createCertificate({
profileId,
projectSlug: currentProject.slug,
pkiCollectionId: collectionId,
friendlyName,
commonName: getAttributeValue("common_name"),
altNames: altNames
@@ -628,34 +586,7 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle }: Props) =>
>
{profilesData?.certificateProfiles?.map((profile) => (
<SelectItem key={profile.id} value={profile.id}>
{profile.name}
</SelectItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
control={control}
name="collectionId"
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="PKI Collection (Optional)"
errorText={error?.message}
isError={Boolean(error)}
>
<Select
defaultValue=""
{...field}
onValueChange={(e) => onChange(e)}
className="w-full"
placeholder="Select a collection (optional)"
position="popper"
>
{collectionsData?.collections?.map((collection: any) => (
<SelectItem key={collection.id} value={collection.id}>
{collection.name}
{profile.slug}
</SelectItem>
))}
</Select>
@@ -701,10 +632,25 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle }: Props) =>
onChange(newValue);
}}
className="w-48"
position="popper"
>
<SelectItem value="common_name">Common Name</SelectItem>
</Select>
<Select
value={attr.include || "optional"}
onValueChange={(newInclude) => {
const newValue = [...value];
newValue[index] = {
...attr,
include: newInclude as "mandatory" | "optional" | "prohibit"
};
onChange(newValue);
}}
className="w-32"
>
<SelectItem value="mandatory">Mandatory</SelectItem>
<SelectItem value="optional">Optional</SelectItem>
<SelectItem value="prohibit">Prohibited</SelectItem>
</Select>
<Input
value={attr.value}
onChange={(e) => {
@@ -769,14 +715,29 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle }: Props) =>
};
onChange(newValue);
}}
className="w-32"
position="popper"
className="w-24"
>
<SelectItem value="dns">DNS</SelectItem>
<SelectItem value="ip">IP</SelectItem>
<SelectItem value="email">Email</SelectItem>
<SelectItem value="uri">URI</SelectItem>
</Select>
<Select
value={san.include || "optional"}
onValueChange={(newInclude) => {
const newValue = [...value];
newValue[index] = {
...san,
include: newInclude as "mandatory" | "optional" | "prohibit"
};
onChange(newValue);
}}
className="w-32"
>
<SelectItem value="mandatory">Mandatory</SelectItem>
<SelectItem value="optional">Optional</SelectItem>
<SelectItem value="prohibit">Prohibited</SelectItem>
</Select>
<Input
value={san.value}
onChange={(e) => {
@@ -908,11 +869,11 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle }: Props) =>
</div>
</div>
<Accordion type="single" collapsible>
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="key-usages">
<AccordionTrigger>Key Usages</AccordionTrigger>
<AccordionContent>
<div className="grid grid-cols-1 gap-3">
<div className="grid grid-cols-2 gap-2 pl-2">
{KEY_USAGES_OPTIONS.filter(({ value }) => {
if (allowedKeyUsages.length === 0) return true;
const templateToEnumMap = {
@@ -933,15 +894,18 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle }: Props) =>
<Controller
key={label}
control={control}
name={`keyUsages.${value}`}
name={`keyUsages.${value}` as any}
render={({ field }) => (
<div className="flex items-center justify-between">
<span className="text-sm text-mineshaft-300">{label}</span>
<TriStateToggle
value={field.value}
onChange={field.onChange}
leftLabel="None"
rightLabel="Include"
<div className="flex items-center space-x-3">
<Checkbox
id={`key-usage-${value}`}
isChecked={field.value || false}
onCheckedChange={(checked) => field.onChange(checked)}
/>
<FormLabel
id={`key-usage-${value}`}
className="cursor-pointer text-sm text-mineshaft-300"
label={label}
/>
</div>
)}
@@ -954,7 +918,7 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle }: Props) =>
<AccordionItem value="extended-key-usages">
<AccordionTrigger>Extended Key Usages</AccordionTrigger>
<AccordionContent>
<div className="grid grid-cols-1 gap-3">
<div className="grid grid-cols-2 gap-2 pl-2">
{EXTENDED_KEY_USAGES_OPTIONS.filter(({ value }) => {
if (allowedExtendedKeyUsages.length === 0) return true;
const templateToEnumMap = {
@@ -973,15 +937,18 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle }: Props) =>
<Controller
key={label}
control={control}
name={`extendedKeyUsages.${value}`}
name={`extendedKeyUsages.${value}` as any}
render={({ field }) => (
<div className="flex items-center justify-between">
<span className="text-sm text-mineshaft-300">{label}</span>
<TriStateToggle
value={field.value}
onChange={field.onChange}
leftLabel="None"
rightLabel="Include"
<div className="flex items-center space-x-3">
<Checkbox
id={`ext-key-usage-${value}`}
isChecked={field.value || false}
onCheckedChange={(checked) => field.onChange(checked)}
/>
<FormLabel
id={`ext-key-usage-${value}`}
className="cursor-pointer text-sm text-mineshaft-300"
label={label}
/>
</div>
)}
frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/CertificateProfilesTab.tsx
+4 -4
View File
@@ -14,7 +14,6 @@ import {
} from "@app/hooks/api/certificateProfiles";
import { CreateProfileModal } from "./CreateProfileModal";
import { EditProfileModal } from "./EditProfileModal";
import { ProfileList } from "./ProfileList";
export const CertificateProfilesTab = () => {
@@ -89,23 +88,24 @@ export const CertificateProfilesTab = () => {
{selectedProfile && (
<>
<EditProfileModal
<CreateProfileModal
isOpen={isEditModalOpen}
onClose={() => {
setIsEditModalOpen(false);
setSelectedProfile(null);
}}
profile={selectedProfile}
mode="edit"
/>
<DeleteActionModal
isOpen={isDeleteModalOpen}
title={`Delete Certificate Profile ${selectedProfile.name}?`}
title={`Delete Certificate Profile ${selectedProfile.slug}?`}
onChange={(isOpen) => {
setIsDeleteModalOpen(isOpen);
if (!isOpen) setSelectedProfile(null);
}}
deleteKey={selectedProfile.name}
deleteKey={selectedProfile.slug}
onDeleteApproved={handleDeleteConfirm}
/>
</>
frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/CreateProfileModal.tsx
+145 -87
View File
@@ -1,5 +1,3 @@
/* eslint-disable jsx-a11y/label-has-associated-control */
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
@@ -18,12 +16,15 @@ import {
} from "@app/components/v2";
import { useProject } from "@app/context";
import { useListCasByProjectId } from "@app/hooks/api/ca/queries";
import { useCreateCertificateProfile } from "@app/hooks/api/certificateProfiles";
import {
TCertificateProfileWithDetails,
useCreateCertificateProfile,
useUpdateCertificateProfile
} from "@app/hooks/api/certificateProfiles";
import { useListCertificateTemplatesV2 } from "@app/hooks/api/certificateTemplates/queries";
const schema = z
const createSchema = z
.object({
name: z.string().trim().min(1, "Profile name is required"),
slug: z.string().trim().min(1, "Profile slug is required"),
description: z.string().optional(),
enrollmentType: z.enum(["api", "est"]),
@@ -58,14 +59,52 @@ const schema = z
}
);
export type FormData = z.infer<typeof schema>;
const editSchema = z
.object({
slug: z.string().trim().min(1, "Profile slug is required"),
description: z.string().optional(),
enrollmentType: z.enum(["api", "est"]),
certificateAuthorityId: z.string().optional(),
certificateTemplateId: z.string().optional(),
estConfig: z
.object({
disableBootstrapCaValidation: z.boolean().optional(),
passphrase: z.string().optional(),
caChain: z.string().optional()
})
.optional(),
apiConfig: z
.object({
autoRenew: z.boolean().optional(),
autoRenewDays: z.number().min(1).max(365).optional()
})
.optional()
})
.refine(
(data) => {
if (data.enrollmentType === "est" && !data.estConfig) {
return false;
}
if (data.enrollmentType === "api" && !data.apiConfig) {
return false;
}
return true;
},
{
message: "Configuration is required for selected enrollment type"
}
);
export type FormData = z.infer<typeof createSchema>;
interface Props {
isOpen: boolean;
onClose: () => void;
profile?: TCertificateProfileWithDetails;
mode?: "create" | "edit";
}
export const CreateProfileModal = ({ isOpen, onClose }: Props) => {
export const CreateProfileModal = ({ isOpen, onClose, profile, mode = "create" }: Props) => {
const { currentProject } = useProject();
const { data: caData } = useListCasByProjectId(currentProject?.id || "");
@@ -76,80 +115,97 @@ export const CreateProfileModal = ({ isOpen, onClose }: Props) => {
});
const createProfile = useCreateCertificateProfile();
const updateProfile = useUpdateCertificateProfile();
const isEdit = mode === "edit" && profile;
const certificateAuthorities = caData || [];
const certificateTemplates = templateData?.certificateTemplates || [];
const {
control,
handleSubmit,
reset,
watch,
setValue,
formState: { isSubmitting }
} = useForm<FormData>({
resolver: zodResolver(schema),
defaultValues: {
name: "",
slug: "",
description: "",
enrollmentType: "api",
certificateAuthorityId: "",
certificateTemplateId: "",
apiConfig: {
autoRenew: false,
autoRenewDays: 30
}
}
const { control, handleSubmit, reset, watch, setValue } = useForm<FormData>({
resolver: zodResolver(isEdit ? editSchema : createSchema),
defaultValues: isEdit
? {
slug: profile.slug,
description: profile.description || "",
enrollmentType: profile.enrollmentType,
certificateAuthorityId: profile.caId,
certificateTemplateId: profile.certificateTemplateId,
estConfig: {
disableBootstrapCaValidation: profile.estConfig?.disableBootstrapCaValidation || false,
passphrase: "",
caChain: ""
},
apiConfig: {
autoRenew: profile.apiConfig?.autoRenew || false,
autoRenewDays: profile.apiConfig?.autoRenewDays || 30
}
}
: {
slug: "",
description: "",
enrollmentType: "api",
certificateAuthorityId: "",
certificateTemplateId: "",
apiConfig: {
autoRenew: false,
autoRenewDays: 30
}
}
});
const watchedName = watch("name");
const watchedEnrollmentType = watch("enrollmentType");
const watchedDisableBootstrapValidation = watch("estConfig.disableBootstrapCaValidation");
const watchedAutoRenew = watch("apiConfig.autoRenew");
useEffect(() => {
if (watchedName && !watch("slug")) {
const slug = watchedName
.toLowerCase()
.replace(/[^a-z0-9]+/g, "-")
.replace(/(^-|-$)/g, "");
setValue("slug", slug);
}
}, [watchedName, setValue, watch]);
const onFormSubmit = async (data: FormData) => {
try {
if (!currentProject?.id) return;
if (!currentProject?.id && !isEdit) return;
const payload: any = {
projectId: currentProject.id,
name: data.name,
slug: data.slug,
description: data.description,
enrollmentType: data.enrollmentType,
caId: data.certificateAuthorityId,
certificateTemplateId: data.certificateTemplateId
};
if (isEdit) {
const updateData: any = {
profileId: profile.id,
name: data.slug,
description: data.description
};
if (data.enrollmentType === "est" && data.estConfig) {
payload.estConfig = data.estConfig;
} else if (data.enrollmentType === "api" && data.apiConfig) {
payload.apiConfig = data.apiConfig;
if (data.enrollmentType === "est" && data.estConfig) {
updateData.estConfig = data.estConfig;
} else if (data.enrollmentType === "api" && data.apiConfig) {
updateData.apiConfig = data.apiConfig;
}
await updateProfile.mutateAsync(updateData);
} else {
const createData: any = {
projectId: currentProject!.id,
slug: data.slug,
description: data.description,
enrollmentType: data.enrollmentType,
caId: data.certificateAuthorityId,
certificateTemplateId: data.certificateTemplateId
};
if (data.enrollmentType === "est" && data.estConfig) {
createData.estConfig = data.estConfig;
} else if (data.enrollmentType === "api" && data.apiConfig) {
createData.apiConfig = data.apiConfig;
}
await createProfile.mutateAsync(createData);
}
await createProfile.mutateAsync(payload);
createNotification({
text: "Certificate profile created successfully",
text: `Certificate profile ${isEdit ? "updated" : "created"} successfully`,
type: "success"
});
reset();
onClose();
} catch (error) {
console.error("Error creating profile:", error);
console.error(`Error ${isEdit ? "updating" : "creating"} profile:`, error);
createNotification({
text: "Failed to create certificate profile",
text: `Failed to ${isEdit ? "update" : "create"} certificate profile`,
type: "error"
});
}
@@ -166,25 +222,14 @@ export const CreateProfileModal = ({ isOpen, onClose }: Props) => {
}}
>
<ModalContent
title="Create Certificate Profile"
subTitle="Configure a new certificate profile for unified certificate issuance"
title={isEdit ? "Edit Certificate Profile" : "Create Certificate Profile"}
subTitle={
isEdit
? `Update configuration for ${profile?.slug}`
: "Configure a new certificate profile for unified certificate issuance"
}
>
<form onSubmit={handleSubmit(onFormSubmit)}>
<Controller
control={control}
name="name"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Profile Name"
isRequired
isError={Boolean(error)}
errorText={error?.message}
>
<Input {...field} placeholder="Enter profile name" />
</FormControl>
)}
/>
<Controller
control={control}
name="slug"
@@ -195,7 +240,7 @@ export const CreateProfileModal = ({ isOpen, onClose }: Props) => {
isError={Boolean(error)}
errorText={error?.message}
>
<Input {...field} placeholder="auto-generated-from-name" />
<Input {...field} placeholder="your-profile-name" isDisabled={Boolean(isEdit)} />
</FormControl>
)}
/>
@@ -226,6 +271,7 @@ export const CreateProfileModal = ({ isOpen, onClose }: Props) => {
placeholder="Select a certificate authority"
className="w-full"
position="popper"
isDisabled={Boolean(isEdit)}
>
{certificateAuthorities.map((ca: any) => (
<SelectItem key={ca.id} value={ca.id}>
@@ -269,10 +315,11 @@ export const CreateProfileModal = ({ isOpen, onClose }: Props) => {
placeholder="Select a certificate template"
className="w-full"
position="popper"
isDisabled={Boolean(isEdit)}
>
{certificateTemplates.map((template) => (
<SelectItem key={template.id} value={template.id}>
{template.name}
{template.slug}
</SelectItem>
))}
</Select>
@@ -290,7 +337,13 @@ export const CreateProfileModal = ({ isOpen, onClose }: Props) => {
isError={Boolean(error)}
errorText={error?.message}
>
<Select {...field} onValueChange={onChange} className="w-full" position="popper">
<Select
{...field}
onValueChange={onChange}
className="w-full"
position="popper"
isDisabled={Boolean(isEdit)}
>
<SelectItem value="api">API</SelectItem>
<SelectItem value="est">EST</SelectItem>
</Select>
@@ -314,12 +367,9 @@ export const CreateProfileModal = ({ isOpen, onClose }: Props) => {
onCheckedChange={onChange}
/>
<div className="space-y-1">
<label
htmlFor="disableBootstrapCaValidation"
className="text-sm font-medium text-mineshaft-100"
>
<span className="text-sm font-medium text-mineshaft-100">
Disable Bootstrap CA Validation
</label>
</span>
<p className="text-xs text-bunker-300">
Skip CA certificate validation during EST bootstrap phase
</p>
@@ -335,7 +385,7 @@ export const CreateProfileModal = ({ isOpen, onClose }: Props) => {
render={({ field, fieldState: { error } }) => (
<FormControl
label="EST Passphrase"
isRequired
isRequired={!isEdit}
isError={Boolean(error)}
errorText={error?.message}
>
@@ -356,7 +406,7 @@ export const CreateProfileModal = ({ isOpen, onClose }: Props) => {
render={({ field, fieldState: { error } }) => (
<FormControl
label="CA Chain Certificate"
isRequired
isRequired={!isEdit}
isError={Boolean(error)}
errorText={error?.message}
>
@@ -424,10 +474,18 @@ export const CreateProfileModal = ({ isOpen, onClose }: Props) => {
)}
<div className="flex gap-3">
<Button type="submit" colorSchema="primary" isLoading={isSubmitting}>
Create
<Button
type="submit"
colorSchema="primary"
isLoading={isEdit ? updateProfile.isPending : createProfile.isPending}
>
{isEdit ? "Save Changes" : "Create"}
</Button>
<Button variant="outline_bg" onClick={onClose} disabled={isSubmitting}>
<Button
variant="outline_bg"
onClick={onClose}
disabled={isEdit ? updateProfile.isPending : createProfile.isPending}
>
Cancel
</Button>
</div>
frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/EditProfileModal.tsx
-303
View File
@@ -1,303 +0,0 @@
import { useEffect, useState } from "react";
import { faSave } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { createNotification } from "@app/components/notifications";
import {
Button,
Checkbox,
FormControl,
Input,
Modal,
ModalContent,
Select,
SelectItem,
TextArea
} from "@app/components/v2";
import { useProject } from "@app/context";
import { useListCasByProjectId } from "@app/hooks/api/ca/queries";
import {
TCertificateProfileWithDetails,
useUpdateCertificateProfile
} from "@app/hooks/api/certificateProfiles";
import { useListCertificateTemplatesV2 } from "@app/hooks/api/certificateTemplates/queries";
interface Props {
isOpen: boolean;
onClose: () => void;
profile: TCertificateProfileWithDetails;
}
export const EditProfileModal = ({ isOpen, onClose, profile }: Props) => {
const { currentProject } = useProject();
const updateProfile = useUpdateCertificateProfile();
const { data: caData } = useListCasByProjectId(currentProject?.id || "");
const { data: templateData } = useListCertificateTemplatesV2({
projectId: currentProject?.id || "",
limit: 100,
offset: 0
});
const certificateAuthorities = caData || [];
const certificateTemplates = templateData?.certificateTemplates || [];
const [formData, setFormData] = useState({
name: "",
slug: "",
description: "",
enrollmentType: "api" as "api" | "est",
certificateAuthorityId: "",
certificateTemplateId: "",
estConfig: {
disableBootstrapCaValidation: false,
passphrase: "",
caChain: ""
},
apiConfig: {
autoRenew: false,
autoRenewDays: 30
}
});
useEffect(() => {
if (profile) {
setFormData({
name: profile.name,
slug: profile.slug,
description: profile.description || "",
enrollmentType: profile.enrollmentType,
certificateAuthorityId: profile.caId,
certificateTemplateId: profile.certificateTemplateId,
estConfig: {
disableBootstrapCaValidation: profile.estConfig?.disableBootstrapCaValidation || false,
passphrase: "",
caChain: ""
},
apiConfig: {
autoRenew: profile.apiConfig?.autoRenew || false,
autoRenewDays: profile.apiConfig?.autoRenewDays || 30
}
});
}
}, [profile]);
const handleInputChange = (field: string, value: string | boolean | number) => {
if (field.includes(".")) {
const [parent, child] = field.split(".");
setFormData((prev) => ({
...prev,
[parent]: {
...(prev as any)[parent],
[child]: value
}
}));
} else {
setFormData((prev) => ({
...prev,
[field]: value
}));
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!formData.name) {
return;
}
try {
const payload: any = {
profileId: profile.id,
name: formData.name,
description: formData.description
};
if (formData.enrollmentType === "est") {
payload.estConfig = {
disableBootstrapCaValidation: formData.estConfig.disableBootstrapCaValidation,
passphrase: formData.estConfig.passphrase,
caChain: formData.estConfig.caChain
};
} else if (formData.enrollmentType === "api") {
payload.apiConfig = {
autoRenew: formData.apiConfig.autoRenew,
autoRenewDays: formData.apiConfig.autoRenewDays
};
}
await updateProfile.mutateAsync(payload);
createNotification({
text: "Certificate profile updated successfully",
type: "success"
});
onClose();
} catch (error) {
console.error("Error updating profile:", error);
createNotification({
text: "Failed to update certificate profile",
type: "error"
});
}
};
return (
<Modal isOpen={isOpen} onOpenChange={onClose}>
<ModalContent
title="Edit Certificate Profile"
subTitle={`Update configuration for ${profile?.name}`}
>
<form onSubmit={handleSubmit} className="space-y-4">
<FormControl label="Profile Name" isRequired>
<Input
placeholder="Enter profile name"
value={formData.name}
onChange={(e) => handleInputChange("name", e.target.value)}
/>
</FormControl>
<FormControl label="Profile Slug" isRequired>
<Input
placeholder="profile-slug"
value={formData.slug}
onChange={(e) => handleInputChange("slug", e.target.value)}
disabled
/>
</FormControl>
<FormControl label="Description">
<TextArea
placeholder="Enter profile description"
value={formData.description}
onChange={(e) => handleInputChange("description", e.target.value)}
rows={3}
/>
</FormControl>
<FormControl label="Enrollment Type">
<Select
value={formData.enrollmentType}
onValueChange={(value) => handleInputChange("enrollmentType", value)}
isDisabled
>
<SelectItem value="api">API - Programmatic certificate enrollment</SelectItem>
<SelectItem value="est">EST - RFC 7030 certificate enrollment</SelectItem>
</Select>
</FormControl>
<FormControl label="Certificate Authority">
<Select
value={formData.certificateAuthorityId}
onValueChange={(value) => handleInputChange("certificateAuthorityId", value)}
placeholder="Select a certificate authority"
isDisabled
>
{certificateAuthorities.map((ca: any) => (
<SelectItem key={ca.id} value={ca.id}>
{ca.friendlyName || ca.name || ca.commonName}
</SelectItem>
))}
</Select>
</FormControl>
<FormControl label="Certificate Template">
<Select
value={formData.certificateTemplateId}
onValueChange={(value) => handleInputChange("certificateTemplateId", value)}
placeholder="Select a certificate template"
isDisabled
>
{certificateTemplates.map((template) => (
<SelectItem key={template.id} value={template.id}>
{template.name}
</SelectItem>
))}
</Select>
</FormControl>
{/* EST Configuration */}
{formData.enrollmentType === "est" && (
<div className="space-y-4 rounded border border-mineshaft-600 p-4">
<FormControl>
<Checkbox
id="disableBootstrapCaValidation"
isChecked={formData.estConfig.disableBootstrapCaValidation}
onCheckedChange={(checked) =>
handleInputChange("estConfig.disableBootstrapCaValidation", checked)
}
>
Disable Bootstrap CA Validation
</Checkbox>
</FormControl>
<FormControl label="EST Passphrase" isRequired>
<Input
type="password"
placeholder="Enter EST passphrase"
value={formData.estConfig.passphrase}
onChange={(e) => handleInputChange("estConfig.passphrase", e.target.value)}
/>
</FormControl>
<FormControl label="CA Chain" isRequired>
<TextArea
placeholder="Enter CA chain (PEM format)"
value={formData.estConfig.caChain}
onChange={(e) => handleInputChange("estConfig.caChain", e.target.value)}
rows={6}
className="font-mono"
/>
</FormControl>
</div>
)}
{/* API Configuration */}
{formData.enrollmentType === "api" && (
<div className="space-y-4 rounded border border-mineshaft-600 p-4">
<FormControl>
<Checkbox
id="autoRenew"
isChecked={formData.apiConfig.autoRenew}
onCheckedChange={(checked) => handleInputChange("apiConfig.autoRenew", checked)}
>
Enable Auto-Renewal
</Checkbox>
</FormControl>
<FormControl label="Auto-Renewal Days">
<Input
type="number"
placeholder="30"
min="1"
max="365"
value={formData.apiConfig.autoRenewDays}
onChange={(e) =>
handleInputChange("apiConfig.autoRenewDays", parseInt(e.target.value, 10) || 30)
}
/>
</FormControl>
</div>
)}
<div className="flex gap-3 pt-4">
<Button
type="submit"
colorSchema="primary"
leftIcon={<FontAwesomeIcon icon={faSave} />}
isLoading={updateProfile.isPending}
disabled={!formData.name}
>
Save Changes
</Button>
<Button variant="outline_bg" onClick={onClose} disabled={updateProfile.isPending}>
Cancel
</Button>
</div>
</form>
</ModalContent>
</Modal>
);
};
frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/ProfileList.tsx
+1 -2
View File
@@ -34,7 +34,7 @@ export const ProfileList = ({ onEditProfile, onDeleteProfile }: Props) => {
const profiles = data?.certificateProfiles || [];
if (isLoading) {
return <TableSkeleton columns={7} innerKey="certificate-profiles" />;
return <TableSkeleton columns={6} innerKey="certificate-profiles" />;
}
if (!profiles || profiles.length === 0) {
@@ -51,7 +51,6 @@ export const ProfileList = ({ onEditProfile, onDeleteProfile }: Props) => {
<Th>Certificate Authority</Th>
<Th>Template</Th>
<Th>Certificates</Th>
<Th>Created</Th>
<Th className="w-5" />
</Tr>
</THead>
frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/ProfileRow.tsx
+26 -50
View File
@@ -57,23 +57,16 @@ export const ProfileRow = ({ profile, onEditProfile, onDeleteProfile }: Props) =
return <Badge variant={variant}>{label}</Badge>;
};
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString();
};
return (
<Tr key={profile.id} className="h-10 transition-colors duration-100 hover:bg-mineshaft-700">
<Td>
<div>
<div className="flex items-center gap-2">
<div className="font-medium text-mineshaft-100">{profile.name}</div>
{profile.description && (
<Tooltip content={profile.description}>
<FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
</Tooltip>
)}
</div>
<div className="text-xs text-bunker-300">{profile.slug}</div>
<div className="flex items-center gap-2">
<div className="font-medium text-mineshaft-100">{profile.slug}</div>
{profile.description && (
<Tooltip content={profile.description}>
<FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
</Tooltip>
)}
</div>
</Td>
<Td className="text-center">{getEnrollmentTypeBadge(profile.enrollmentType)}</Td>
@@ -84,64 +77,47 @@ export const ProfileRow = ({ profile, onEditProfile, onDeleteProfile }: Props) =
</Td>
<Td>
<span className="text-sm text-mineshaft-300">
{templateData?.name || profile.certificateTemplateId}
{templateData?.slug || profile.certificateTemplateId}
</span>
</Td>
<Td>
<div className="flex gap-2 text-xs">
<div className="flex flex-wrap gap-1">
{profile.metrics ? (
profile.metrics.totalCertificates === 0 ? (
<span className="text-bunker-300">No certificates attached</span>
<Badge variant="primary" className="text-xs">
No certificates
</Badge>
) : (
<>
{profile.metrics.activeCertificates > 0 && (
<span className="text-green-400">
<Badge variant="success" className="text-xs">
{profile.metrics.activeCertificates} active
</span>
</Badge>
)}
{profile.metrics.expiringCertificates > 0 && (
<>
{profile.metrics.activeCertificates > 0 && (
<span className="text-gray-400">•</span>
)}
<span className="text-yellow-400">
{profile.metrics.expiringCertificates} expiring
</span>
</>
<Badge variant="primary" className="text-xs">
{profile.metrics.expiringCertificates} expiring
</Badge>
)}
{profile.metrics.expiredCertificates > 0 && (
<>
{(profile.metrics.activeCertificates > 0 ||
profile.metrics.expiringCertificates > 0) && (
<span className="text-gray-400">•</span>
)}
<span className="text-red-300">
{profile.metrics.expiredCertificates} expired
</span>
</>
<Badge variant="danger" className="text-xs">
{profile.metrics.expiredCertificates} expired
</Badge>
)}
{profile.metrics.revokedCertificates > 0 && (
<>
{(profile.metrics.activeCertificates > 0 ||
profile.metrics.expiringCertificates > 0 ||
profile.metrics.expiredCertificates > 0) && (
<span className="text-gray-400">•</span>
)}
<span className="text-red-400">
{profile.metrics.revokedCertificates} revoked
</span>
</>
<Badge variant="danger" className="text-xs">
{profile.metrics.revokedCertificates} revoked
</Badge>
)}
</>
)
) : (
<span className="text-bunker-300">No metrics available</span>
<Badge variant="primary" className="text-xs">
No metrics
</Badge>
)}
</div>
</Td>
<Td>
<span className="text-sm text-bunker-300">{formatDate(profile.createdAt)}</span>
</Td>
<Td className="text-right">
<DropdownMenu>
<DropdownMenuTrigger asChild className="rounded-lg">
frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/index.ts
-1
View File
@@ -1,4 +1,3 @@
export { CertificateProfilesTab } from "./CertificateProfilesTab";
export { CreateProfileModal } from "./CreateProfileModal";
export { EditProfileModal } from "./EditProfileModal";
export { ProfileList } from "./ProfileList";
frontend/src/pages/cert-manager/PoliciesPage/components/CertificateTemplatesV2Tab/CertificateTemplatesV2Tab.tsx
+4 -4
View File
@@ -12,7 +12,6 @@ import { useDeleteCertificateTemplateV2New } from "@app/hooks/api/certificateTem
import { TCertificateTemplateV2New } from "@app/hooks/api/certificateTemplates/types";
import { CreateTemplateModal } from "./CreateTemplateModal";
import { EditTemplateModal } from "./EditTemplateModal";
import { TemplateList } from "./TemplateList";
export const CertificateTemplatesV2Tab = () => {
@@ -87,23 +86,24 @@ export const CertificateTemplatesV2Tab = () => {
{selectedTemplate && (
<>
<EditTemplateModal
<CreateTemplateModal
isOpen={isEditModalOpen}
onClose={() => {
setIsEditModalOpen(false);
setSelectedTemplate(null);
}}
template={selectedTemplate}
mode="edit"
/>
<DeleteActionModal
isOpen={isDeleteModalOpen}
title={`Delete Certificate Template ${selectedTemplate.name}?`}
title={`Delete Certificate Template ${selectedTemplate.slug}?`}
onChange={(isOpen) => {
setIsDeleteModalOpen(isOpen);
if (!isOpen) setSelectedTemplate(null);
}}
deleteKey={selectedTemplate.name}
deleteKey={selectedTemplate.slug}
onDeleteApproved={handleDeleteConfirm}
/>
</>
frontend/src/pages/cert-manager/PoliciesPage/components/CertificateTemplatesV2Tab/CreateTemplateModal.tsx
+585 -501
View File
File diff suppressed because it is too large Load Diff
frontend/src/pages/cert-manager/PoliciesPage/components/CertificateTemplatesV2Tab/EditTemplateModal.tsx
-778
View File
@@ -1,778 +0,0 @@
import { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { createNotification } from "@app/components/notifications";
import {
Button,
FormControl,
Input,
Modal,
ModalContent,
Select,
SelectItem,
TextArea
} from "@app/components/v2";
import { useUpdateCertificateTemplateV2New } from "@app/hooks/api/certificateTemplates/mutations";
import { TCertificateTemplateV2New } from "@app/hooks/api/certificateTemplates/types";
import { KeyUsagesSection } from "./shared";
const attributeSchema = z.object({
type: z.enum(["common_name"]),
include: z.enum(["mandatory", "optional", "prohibit"]),
value: z.array(z.string()).optional()
});
const sanSchema = z.object({
type: z.enum(["dns_name", "ip_address", "email", "uri"]),
include: z.enum(["mandatory", "optional", "prohibit"]),
value: z.array(z.string()).optional()
});
const schema = z.object({
name: z.string().trim().min(1, "Template name is required"),
description: z.string().optional(),
attributes: z.array(attributeSchema).optional(),
keyUsages: z
.object({
requiredUsages: z.array(z.string()),
optionalUsages: z.array(z.string())
})
.optional(),
extendedKeyUsages: z
.object({
requiredUsages: z.array(z.string()),
optionalUsages: z.array(z.string())
})
.optional(),
subjectAlternativeNames: z.array(sanSchema).optional(),
validity: z
.object({
maxDuration: z.object({
value: z.number().positive(),
unit: z.enum(["days", "months", "years"])
}),
minDuration: z
.object({
value: z.number().positive(),
unit: z.enum(["days", "months", "years"])
})
.optional()
})
.optional(),
signatureAlgorithm: z
.object({
allowedAlgorithms: z.array(z.string()).min(1),
defaultAlgorithm: z.string()
})
.optional(),
keyAlgorithm: z
.object({
allowedKeyTypes: z.array(z.string()).min(1),
defaultKeyType: z.string()
})
.optional()
});
export type FormData = z.infer<typeof schema>;
interface Props {
isOpen: boolean;
onClose: () => void;
template: TCertificateTemplateV2New;
}
const ATTRIBUTE_TYPES = [
{ value: "common_name", label: "Common Name (CN)" }
];
const SAN_TYPES = [
{ value: "dns_name", label: "DNS Name" },
{ value: "ip_address", label: "IP Address" },
{ value: "email", label: "Email" },
{ value: "uri", label: "URI" }
];
const INCLUDE_TYPES = [
{ value: "mandatory", label: "Mandatory", color: "red" },
{ value: "optional", label: "Optional", color: "blue" },
{ value: "prohibit", label: "Prohibited", color: "gray" }
];
const SIGNATURE_ALGORITHMS = [
"SHA256-RSA",
"SHA384-RSA",
"SHA512-RSA",
"SHA256-ECDSA",
"SHA384-ECDSA",
"SHA512-ECDSA"
];
const KEY_ALGORITHMS = [
"RSA-2048",
"RSA-3072",
"RSA-4096",
"ECDSA-P256",
"ECDSA-P384",
"ECDSA-P521"
];
export const EditTemplateModal = ({ isOpen, onClose, template }: Props) => {
const updateTemplate = useUpdateCertificateTemplateV2New();
const [activeTab, setActiveTab] = useState<string>("basic");
const getFormDefaultValues = () => {
if (!template) {
return {
name: "",
description: "",
attributes: [],
keyUsages: { requiredUsages: [], optionalUsages: [] },
extendedKeyUsages: { requiredUsages: [], optionalUsages: [] },
subjectAlternativeNames: [],
validity: { maxDuration: { value: 365, unit: "days" as const } },
signatureAlgorithm: { allowedAlgorithms: ["SHA256-RSA"], defaultAlgorithm: "SHA256-RSA" },
keyAlgorithm: { allowedKeyTypes: ["RSA-2048"], defaultKeyType: "RSA-2048" }
};
}
const backendKeyUsages = template.keyUsages || {
requiredUsages: { all: [] },
optionalUsages: { all: [] }
};
const backendExtendedKeyUsages = template.extendedKeyUsages || {
requiredUsages: { all: [] },
optionalUsages: { all: [] }
};
return {
name: template.name,
description: template.description || "",
attributes: template.attributes || [],
keyUsages: {
requiredUsages: backendKeyUsages.requiredUsages?.all || [],
optionalUsages: backendKeyUsages.optionalUsages?.all || []
},
extendedKeyUsages: {
requiredUsages: backendExtendedKeyUsages.requiredUsages?.all || [],
optionalUsages: backendExtendedKeyUsages.optionalUsages?.all || []
},
subjectAlternativeNames: template.subjectAlternativeNames || [],
validity: template.validity || { maxDuration: { value: 365, unit: "days" as const } },
signatureAlgorithm: template.signatureAlgorithm || {
allowedAlgorithms: ["SHA256-RSA"],
defaultAlgorithm: "SHA256-RSA"
},
keyAlgorithm: template.keyAlgorithm || {
allowedKeyTypes: ["RSA-2048"],
defaultKeyType: "RSA-2048"
}
};
};
const { control, handleSubmit, reset, watch, setValue } = useForm<FormData>({
resolver: zodResolver(schema),
defaultValues: getFormDefaultValues()
});
const watchedAttributes = watch("attributes") || [];
const watchedSans = watch("subjectAlternativeNames") || [];
const watchedKeyUsages = watch("keyUsages");
const watchedExtendedKeyUsages = watch("extendedKeyUsages");
useEffect(() => {
if (template) {
reset(getFormDefaultValues());
}
}, [template, reset]);
const onFormSubmit = async (data: FormData) => {
try {
const templateData = {
templateId: template.id,
name: data.name,
description: data.description,
attributes: data.attributes || [],
keyUsages: {
requiredUsages: { all: data.keyUsages?.requiredUsages || [] },
optionalUsages: { all: data.keyUsages?.optionalUsages || [] }
},
extendedKeyUsages: {
requiredUsages: { all: data.extendedKeyUsages?.requiredUsages || [] },
optionalUsages: { all: data.extendedKeyUsages?.optionalUsages || [] }
},
subjectAlternativeNames: data.subjectAlternativeNames || [],
validity: data.validity || {
maxDuration: { value: 365, unit: "days" as const }
},
signatureAlgorithm: data.signatureAlgorithm || {
allowedAlgorithms: ["SHA256-RSA"],
defaultAlgorithm: "SHA256-RSA"
},
keyAlgorithm: data.keyAlgorithm || {
allowedKeyTypes: ["RSA-2048"],
defaultKeyType: "RSA-2048"
}
};
await updateTemplate.mutateAsync(templateData);
createNotification({
text: "Certificate template updated successfully",
type: "success"
});
onClose();
} catch (error) {
console.error("Error updating template:", error);
createNotification({
text: "Failed to update certificate template",
type: "error"
});
}
};
const addAttribute = () => {
const newAttribute = {
type: "common_name" as const,
include: "optional" as const,
value: []
};
setValue("attributes", [...watchedAttributes, newAttribute]);
};
const removeAttribute = (index: number) => {
const newAttributes = watchedAttributes.filter((_, i) => i !== index);
setValue("attributes", newAttributes);
};
const addSan = () => {
const newSan = {
type: "dns_name" as const,
include: "optional" as const,
value: []
};
setValue("subjectAlternativeNames", [...watchedSans, newSan]);
};
const removeSan = (index: number) => {
const newSans = watchedSans.filter((_, i) => i !== index);
setValue("subjectAlternativeNames", newSans);
};
const toggleKeyUsage = (usage: string, type: "required" | "optional") => {
const current = watchedKeyUsages || { requiredUsages: [], optionalUsages: [] };
const otherType = type === "required" ? "optional" : "required";
const currentList = Array.isArray(current[`${type}Usages`]) ? current[`${type}Usages`] : [];
const otherList = Array.isArray(current[`${otherType}Usages`])
? current[`${otherType}Usages`]
: [];
const newOtherList = otherList.filter((u) => u !== usage);
const newCurrentList = currentList.includes(usage)
? currentList.filter((u) => u !== usage)
: [...currentList, usage];
setValue("keyUsages", {
[`${type}Usages`]: newCurrentList,
[`${otherType}Usages`]: newOtherList
} as any);
};
const toggleExtendedKeyUsage = (usage: string, type: "required" | "optional") => {
const current = watchedExtendedKeyUsages || { requiredUsages: [], optionalUsages: [] };
const otherType = type === "required" ? "optional" : "required";
const currentList = Array.isArray(current[`${type}Usages`]) ? current[`${type}Usages`] : [];
const otherList = Array.isArray(current[`${otherType}Usages`])
? current[`${otherType}Usages`]
: [];
const newOtherList = otherList.filter((u) => u !== usage);
const newCurrentList = currentList.includes(usage)
? currentList.filter((u) => u !== usage)
: [...currentList, usage];
setValue("extendedKeyUsages", {
[`${type}Usages`]: newCurrentList,
[`${otherType}Usages`]: newOtherList
} as any);
};
const tabs = [
{ id: "basic", label: "Basic Info" },
{ id: "attributes", label: "Subject Attributes" },
{ id: "san", label: "Subject Alternative Names" },
{ id: "usages", label: "Key Usages" },
{ id: "constraints", label: "Constraints" }
];
return (
<Modal
isOpen={isOpen}
onOpenChange={(open) => {
if (!open) {
reset();
}
onClose();
}}
>
<ModalContent
className="max-w-4xl"
title="Edit Certificate Template"
subTitle={`Update configuration for ${template?.name}`}
>
<form onSubmit={handleSubmit(onFormSubmit)} className="space-y-6">
{/* Tab Navigation */}
<div className="flex border-b border-mineshaft-600">
{tabs.map((tab) => (
<button
key={tab.id}
type="button"
onClick={() => setActiveTab(tab.id)}
className={`border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
activeTab === tab.id
? "border-primary-500 text-primary-400"
: "border-transparent text-bunker-300 hover:text-mineshaft-200"
}`}
>
{tab.label}
</button>
))}
</div>
{/* Tab Content */}
<div className="max-h-80 overflow-y-auto">
{activeTab === "basic" && (
<div className="space-y-4">
<Controller
control={control}
name="name"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Template Name"
isRequired
isError={Boolean(error)}
errorText={error?.message}
>
<Input {...field} placeholder="Enter template name" className="w-full" />
</FormControl>
)}
/>
<Controller
control={control}
name="description"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Description"
isError={Boolean(error)}
errorText={error?.message}
>
<TextArea {...field} placeholder="Enter template description" rows={3} />
</FormControl>
)}
/>
</div>
)}
{activeTab === "attributes" && (
<div className="space-y-4">
<div className="flex items-center justify-between">
<Button
type="button"
onClick={addAttribute}
size="sm"
leftIcon={<FontAwesomeIcon icon={faPlus} />}
>
Add Attribute
</Button>
</div>
<div className="space-y-3">
{watchedAttributes.length === 0 ? (
<div className="py-8 text-center text-bunker-300">
No subject attributes configured yet. Click &quot;Add Attribute&quot; to get
started.
</div>
) : (
watchedAttributes.map((attr, index) => (
<div
key={`attr-${attr.type}`}
className="flex items-center gap-3 rounded border border-mineshaft-600 p-3"
>
<Select
value={attr.type}
onValueChange={(value) => {
const newAttributes = [...watchedAttributes];
newAttributes[index] = { ...attr, type: value as any };
setValue("attributes", newAttributes);
}}
className="w-56"
>
{ATTRIBUTE_TYPES.map((type) => (
<SelectItem key={type.value} value={type.value}>
{type.label}
</SelectItem>
))}
</Select>
<Select
value={attr.include}
onValueChange={(value) => {
const newAttributes = [...watchedAttributes];
newAttributes[index] = { ...attr, include: value as any };
setValue("attributes", newAttributes);
}}
className="w-36"
>
{INCLUDE_TYPES.map((type) => (
<SelectItem key={type.value} value={type.value}>
{type.label}
</SelectItem>
))}
</Select>
<Input
placeholder="Pattern/Value (optional)"
value={attr.value?.[0] || ""}
onChange={(e) => {
const newAttributes = [...watchedAttributes];
newAttributes[index] = {
...attr,
value: e.target.value ? [e.target.value] : []
};
setValue("attributes", newAttributes);
}}
className="flex-1"
/>
<Button
type="button"
onClick={() => removeAttribute(index)}
variant="outline"
size="sm"
colorSchema="danger"
>
<FontAwesomeIcon icon={faTrash} />
</Button>
</div>
))
)}
</div>
</div>
)}
{activeTab === "san" && (
<div className="space-y-4">
<div className="flex items-center justify-between">
<Button
type="button"
onClick={addSan}
size="sm"
leftIcon={<FontAwesomeIcon icon={faPlus} />}
>
Add SAN
</Button>
</div>
<div className="space-y-3">
{watchedSans.length === 0 ? (
<div className="py-8 text-center text-bunker-300">
No subject alternative names configured yet. Click &quot;Add SAN&quot; to get
started.
</div>
) : (
watchedSans.map((san, index) => (
<div
key={`san-${san.type}`}
className="flex items-center gap-3 rounded border border-mineshaft-600 p-3"
>
<Select
value={san.type}
onValueChange={(value) => {
const newSans = [...watchedSans];
newSans[index] = { ...san, type: value as any };
setValue("subjectAlternativeNames", newSans);
}}
className="w-36"
>
{SAN_TYPES.map((type) => (
<SelectItem key={type.value} value={type.value}>
{type.label}
</SelectItem>
))}
</Select>
<Select
value={san.include}
onValueChange={(value) => {
const newSans = [...watchedSans];
newSans[index] = { ...san, include: value as any };
setValue("subjectAlternativeNames", newSans);
}}
className="w-36"
>
{INCLUDE_TYPES.map((type) => (
<SelectItem key={type.value} value={type.value}>
{type.label}
</SelectItem>
))}
</Select>
<Input
placeholder="Pattern/Value (optional)"
value={san.value?.[0] || ""}
onChange={(e) => {
const newSans = [...watchedSans];
newSans[index] = {
...san,
value: e.target.value ? [e.target.value] : []
};
setValue("subjectAlternativeNames", newSans);
}}
className="flex-1"
/>
<Button
type="button"
onClick={() => removeSan(index)}
variant="outline"
size="sm"
colorSchema="danger"
>
<FontAwesomeIcon icon={faTrash} />
</Button>
</div>
))
)}
</div>
</div>
)}
{activeTab === "usages" && (
<KeyUsagesSection
watchedKeyUsages={watchedKeyUsages}
watchedExtendedKeyUsages={watchedExtendedKeyUsages}
toggleKeyUsage={toggleKeyUsage}
toggleExtendedKeyUsage={toggleExtendedKeyUsage}
/>
)}
{activeTab === "constraints" && (
<div className="space-y-4">
<div className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<Controller
control={control}
name="validity.maxDuration.value"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Max Duration"
isError={Boolean(error)}
errorText={error?.message}
>
<Input {...field} type="number" placeholder="365" className="w-full" />
</FormControl>
)}
/>
<Controller
control={control}
name="validity.maxDuration.unit"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Unit"
isError={Boolean(error)}
errorText={error?.message}
>
<Select {...field} onValueChange={field.onChange} className="w-full">
<SelectItem value="days">Days</SelectItem>
<SelectItem value="months">Months</SelectItem>
<SelectItem value="years">Years</SelectItem>
</Select>
</FormControl>
)}
/>
</div>
</div>
<div className="space-y-3">
<div className="space-y-4">
<Controller
control={control}
name="signatureAlgorithm.allowedAlgorithms"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Allowed Signature Algorithms"
isError={Boolean(error)}
errorText={error?.message}
>
<div className="space-y-2">
<div className="flex flex-wrap gap-2">
{SIGNATURE_ALGORITHMS.map((alg) => {
const isSelected = field.value?.includes(alg);
return (
<Button
key={alg}
type="button"
size="xs"
variant={isSelected ? "solid" : "outline"}
colorSchema={isSelected ? "primary" : "gray"}
onClick={() => {
const current = field.value || [];
let newValue;
if (isSelected) {
if (current.length > 1) {
newValue = current.filter((a) => a !== alg);
} else {
return;
}
} else {
newValue = [...current, alg];
}
field.onChange(newValue);
const currentDefault = watch(
"signatureAlgorithm.defaultAlgorithm"
);
if (!newValue.includes(currentDefault)) {
setValue(
"signatureAlgorithm.defaultAlgorithm",
newValue[0]
);
}
}}
>
{alg}
</Button>
);
})}
</div>
</div>
</FormControl>
)}
/>
<Controller
control={control}
name="signatureAlgorithm.defaultAlgorithm"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Default Signature Algorithm"
isError={Boolean(error)}
errorText={error?.message}
>
<Select
value={field.value || ""}
onValueChange={field.onChange}
className="w-full"
>
{(watch("signatureAlgorithm.allowedAlgorithms") || []).map(
(alg: string) => (
<SelectItem key={alg} value={alg}>
{alg}
</SelectItem>
)
)}
</Select>
</FormControl>
)}
/>
<Controller
control={control}
name="keyAlgorithm.allowedKeyTypes"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Allowed Key Algorithms"
isError={Boolean(error)}
errorText={error?.message}
>
<div className="space-y-2">
<div className="flex flex-wrap gap-2">
{KEY_ALGORITHMS.map((alg) => {
const isSelected = field.value?.includes(alg);
return (
<Button
key={alg}
type="button"
size="xs"
variant={isSelected ? "solid" : "outline"}
colorSchema={isSelected ? "primary" : "gray"}
onClick={() => {
const current = field.value || [];
let newValue;
if (isSelected) {
if (current.length > 1) {
newValue = current.filter((a) => a !== alg);
} else {
return;
}
} else {
newValue = [...current, alg];
}
field.onChange(newValue);
const currentDefault = watch("keyAlgorithm.defaultKeyType");
if (!newValue.includes(currentDefault)) {
setValue("keyAlgorithm.defaultKeyType", newValue[0]);
}
}}
>
{alg}
</Button>
);
})}
</div>
</div>
</FormControl>
)}
/>
<Controller
control={control}
name="keyAlgorithm.defaultKeyType"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Default Key Algorithm"
isError={Boolean(error)}
errorText={error?.message}
>
<Select
value={field.value || ""}
onValueChange={field.onChange}
className="w-full"
>
{(watch("keyAlgorithm.allowedKeyTypes") || []).map((alg: string) => (
<SelectItem key={alg} value={alg}>
{alg}
</SelectItem>
))}
</Select>
</FormControl>
)}
/>
</div>
</div>
</div>
)}
</div>
<div className="flex gap-3">
<Button type="submit" colorSchema="primary" isLoading={updateTemplate.isPending}>
Save Changes
</Button>
<Button variant="outline_bg" onClick={onClose} disabled={updateTemplate.isPending}>
Cancel
</Button>
</div>
</form>
</ModalContent>
</Modal>
);
};
frontend/src/pages/cert-manager/PoliciesPage/components/CertificateTemplatesV2Tab/TemplateList.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ export const TemplateList = ({ onEditTemplate, onDeleteTemplate }: Props) => {
>
<Td>
<div className="flex items-center gap-2">
<div className="font-medium">{template.name}</div>
<div className="font-medium">{template.slug}</div>
{template.description && (
<Tooltip content={template.description}>
<FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
frontend/src/pages/cert-manager/PoliciesPage/components/CertificateTemplatesV2Tab/index.ts
-1
View File
@@ -1,4 +1,3 @@
export { CertificateTemplatesV2Tab } from "./CertificateTemplatesV2Tab";
export { CreateTemplateModal } from "./CreateTemplateModal";
export { EditTemplateModal } from "./EditTemplateModal";
export { TemplateList } from "./TemplateList";
frontend/src/pages/cert-manager/PoliciesPage/components/CertificateTemplatesV2Tab/shared/schemas.ts
+1 -1
View File
@@ -15,7 +15,7 @@ export const sanSchema = z.object({
});
export const templateSchema = z.object({
name: z.string().trim().min(1, "Template name is required"),
slug: z.string().trim().min(1, "Template name is required"),
description: z.string().optional(),
attributes: z.array(attributeSchema).optional(),
keyUsages: z