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

Complete preliminary docs for pki subscribers

Browse Source
This commit is contained in:
Tuan Dang
2025-05-08 08:52:10 -07:00
parent c891b8f5d3
commit 107cca0b62
71 changed files with 1702 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
+4 -1
View File
@@ -15,7 +15,10 @@ export const AlertingPage = () => {
<title>{t("common.head-title", { title: "Alerting" })}</title>
</Helmet>
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title="Alerting" />
<PageHeader
title="Alerting"
description="Configure alerts for expiring certificates and CAs to maintain security and compliance."
/>
<ProjectPermissionCan
renderGuardBanner
I={ProjectPermissionActions.Read}
frontend/src/pages/cert-manager/CertificateAuthoritiesPage/CertificateAuthoritiesPage.tsx
+4 -1
View File
@@ -15,7 +15,10 @@ export const CertificateAuthoritiesPage = () => {
<title>{t("common.head-title", { title: "Certificate Authorities" })}</title>
</Helmet>
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title="Certificate Authorities" />
<PageHeader
title="Certificate Authorities"
description="Manage internal private certificate authorities for issuing and signing certificates, including root and intermediate CAs."
/>
<ProjectPermissionCan
renderGuardBanner
I={ProjectPermissionActions.Read}
frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx
+4 -1
View File
@@ -32,7 +32,10 @@ export const CertificatesPage = () => {
<title>{t("common.head-title", { title: "Certificates" })}</title>
</Helmet>
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title="Certificates" />
<PageHeader
title="Certificates"
description="View and track issued certificates, monitor expiration dates, and manage certificate lifecycles."
/>
{/* If both are false, the section does not render. This is to prevent duplicate banners. */}
{(canAccessCerts || canAccessPkiColl) && (
<ProjectPermissionCan
frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.tsx
+2 -2
View File
@@ -71,7 +71,7 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
<Table>
<THead>
<Tr>
<Th>Friendly Name</Th>
<Th>Common Name</Th>
<Th>Status</Th>
<Th>Not Before</Th>
<Th>Not After</Th>
@@ -85,7 +85,7 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
const { variant, label } = getCertValidUntilBadgeDetails(certificate.notAfter);
return (
<Tr className="h-10" key={`certificate-${certificate.id}`}>
<Td>{certificate.friendlyName}</Td>
<Td>{certificate.commonName}</Td>
<Td>
{certificate.status === CertStatus.REVOKED ? (
<Badge variant="danger">Revoked</Badge>
frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/PkiSubscriberDetailsByIDPage.tsx
+20 -33
View File
@@ -21,22 +21,25 @@ import {
ProjectPermissionSub,
useWorkspace
} from "@app/context";
import { useDeletePkiSubscriber, useGetPkiSubscriberById } from "@app/hooks/api";
import { useDeletePkiSubscriber, useGetPkiSubscriber } from "@app/hooks/api";
import { ProjectType } from "@app/hooks/api/workspace/types";
import { usePopUp } from "@app/hooks/usePopUp";
import { PkiSubscriberModal } from "../PkiSubscribersPage/components/PkiSubscriberModal";
// import { PkiSubscriberCertificatesSection, PkiSubscriberDetailsSection } from "./components";
import { PkiSubscriberCertificatesSection, PkiSubscriberDetailsSection } from "./components";
const Page = () => {
const { currentWorkspace } = useWorkspace();
const navigate = useNavigate();
const projectId = currentWorkspace?.id || "";
const subscriberId = useParams({
const { currentWorkspace } = useWorkspace();
const projectId = currentWorkspace.id;
const subscriberName = useParams({
from: ROUTE_PATHS.CertManager.PkiSubscriberDetailsByIDPage.id,
select: (el) => el.subscriberId
select: (el) => el.subscriberName
});
const { data } = useGetPkiSubscriber({
subscriberName,
projectId
});
const { data } = useGetPkiSubscriberById(subscriberId);
const { mutateAsync: deletePkiSubscriber } = useDeletePkiSubscriber();
@@ -45,14 +48,14 @@ const Page = () => {
"deletePkiSubscriber"
] as const);
const onRemoveSubscriberSubmit = async (subscriberIdToDelete: string) => {
const onRemoveSubscriberSubmit = async (subscriberNameToDelete: string) => {
try {
if (!projectId) return;
await deletePkiSubscriber({ subscriberId: subscriberIdToDelete });
await deletePkiSubscriber({ subscriberName: subscriberNameToDelete, projectId });
createNotification({
text: "Successfully deleted PKI subscriber",
text: "Successfully deleted subscriber",
type: "success"
});
@@ -66,7 +69,7 @@ const Page = () => {
} catch (err) {
console.error(err);
createNotification({
text: "Failed to delete PKI subscriber",
text: "Failed to delete subscriber",
type: "error"
});
}
@@ -114,15 +117,13 @@ const Page = () => {
</PageHeader>
<div className="flex">
<div className="mr-4 w-96">
TODO: PkiSubscriberDetailsSection
{/* <PkiSubscriberDetailsSection
subscriberId={subscriberId}
<PkiSubscriberDetailsSection
subscriberName={data.name}
handlePopUpOpen={handlePopUpOpen}
/> */}
/>
</div>
<div className="w-full">
TODO: PkiSubscriberCertificatesSection
{/* <PkiSubscriberCertificatesSection subscriberId={subscriberId} /> */}
<PkiSubscriberCertificatesSection subscriberName={data.name} />
</div>
</div>
</div>
@@ -152,28 +153,14 @@ export const PkiSubscriberDetailsByIDPage = () => {
<Helmet>
<title>{t("common.head-title", { title: "PKI Subscriber" })}</title>
</Helmet>
{/* <ProjectPermissionCan
<ProjectPermissionCan
I={ProjectPermissionPkiSubscriberActions.Read}
a={ProjectPermissionSub.PkiSubscribers}
passThrough={false}
renderGuardBanner
>
<Page />
</ProjectPermissionCan> */}
TESTTT
</ProjectPermissionCan>
</>
);
};
/**
* import { createFileRoute } from "@tanstack/react-router";
import { PkiSubscriberDetailsByIDPage } from "./PkiSubscriberDetailsByIDPage";
export const Route = createFileRoute(
"/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers/$subscriberId"
)({
component: PkiSubscriberDetailsByIDPage
});
*/
frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesSection.tsx
+27
View File
@@ -0,0 +1,27 @@
import { usePopUp } from "@app/hooks";
import { CertificateRevocationModal } from "@app/pages/cert-manager/CertificatesPage/components/CertificateRevocationModal";
import { PkiSubscriberCertificatesTable } from "./PkiSubscriberCertificatesTable";
type Props = {
subscriberName: string;
};
export const PkiSubscriberCertificatesSection = ({ subscriberName }: Props) => {
const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["revokeCertificate"] as const);
return (
<div className="h-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">Certificates</h3>
</div>
<div className="py-4">
<PkiSubscriberCertificatesTable
subscriberName={subscriberName}
handlePopUpOpen={handlePopUpOpen}
/>
</div>
<CertificateRevocationModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
</div>
);
};
frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesTable.tsx
+166
View File
@@ -0,0 +1,166 @@
import { useState } from "react";
import { faCertificate, faEllipsis, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { format } from "date-fns";
import { twMerge } from "tailwind-merge";
import { ProjectPermissionCan } from "@app/components/permissions";
import {
Badge,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
EmptyState,
Pagination,
Table,
TableContainer,
TableSkeleton,
TBody,
Td,
Th,
THead,
Tooltip,
Tr
} from "@app/components/v2";
import {
ProjectPermissionPkiSubscriberActions,
ProjectPermissionSub,
useWorkspace
} from "@app/context";
import { useGetPkiSubscriberCertificates } from "@app/hooks/api";
import { CertStatus } from "@app/hooks/api/certificates/enums";
import { UsePopUpState } from "@app/hooks/usePopUp";
type Props = {
subscriberName: string;
handlePopUpOpen?: (popUpName: keyof UsePopUpState<["revokeCertificate"]>, data?: object) => void;
};
const PER_PAGE_INIT = 25;
export const PkiSubscriberCertificatesTable = ({ subscriberName, handlePopUpOpen }: Props) => {
const { currentWorkspace } = useWorkspace();
const projectId = currentWorkspace.id;
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(PER_PAGE_INIT);
const { data, isPending } = useGetPkiSubscriberCertificates({
subscriberName,
projectId,
offset: (page - 1) * perPage,
limit: perPage
});
const getCertStatusBadge = (status: string, notAfter: string) => {
if (status === CertStatus.REVOKED) {
return <Badge variant="danger">Revoked</Badge>;
}
const expiryDate = new Date(notAfter);
const now = new Date();
const daysUntilExpiry = Math.floor(
(expiryDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
);
if (daysUntilExpiry < 0) {
return <Badge variant="danger">Expired</Badge>;
}
if (daysUntilExpiry < 30) {
return <Badge variant="primary">Expiring Soon</Badge>;
}
return <Badge variant="success">Valid</Badge>;
};
return (
<div>
<TableContainer>
<Table>
<THead>
<Tr>
<Th>Common Name</Th>
<Th>Status</Th>
<Th>Not Before</Th>
<Th>Not After</Th>
<Th />
</Tr>
</THead>
<TBody>
{isPending && <TableSkeleton columns={5} innerKey="pki-subscriber-certificates" />}
{!isPending &&
data?.certificates?.map((certificate) => {
return (
<Tr className="h-10" key={`certificate-${certificate.id}`}>
<Td>{certificate.commonName}</Td>
<Td>{getCertStatusBadge(certificate.status, certificate.notAfter)}</Td>
<Td>
{certificate.notBefore
? format(new Date(certificate.notBefore), "yyyy-MM-dd")
: "-"}
</Td>
<Td>
{certificate.notAfter
? format(new Date(certificate.notAfter), "yyyy-MM-dd")
: "-"}
</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} />}
>
Revoke Certificate
</DropdownMenuItem>
)}
</ProjectPermissionCan>
</DropdownMenuContent>
</DropdownMenu>
</Td>
</Tr>
);
})}
</TBody>
</Table>
{!isPending && data?.totalCount !== undefined && data.totalCount >= PER_PAGE_INIT && (
<Pagination
count={data.totalCount}
page={page}
perPage={perPage}
onChangePage={(newPage) => setPage(newPage)}
onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
/>
)}
{!isPending && !data?.certificates?.length && (
<EmptyState
title="No certificates have been issued for this subscriber"
icon={faCertificate}
/>
)}
</TableContainer>
</div>
);
};
frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberDetailsSection.tsx
+183
View File
@@ -0,0 +1,183 @@
import { useState } from "react";
import { subject } from "@casl/ability";
import { faCheck, faCopy, faPencil } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { createNotification } from "@app/components/notifications";
import { ProjectPermissionCan } from "@app/components/permissions";
import { Button, IconButton, Modal, ModalContent, Tooltip } from "@app/components/v2";
import {
ProjectPermissionPkiSubscriberActions,
ProjectPermissionSub,
useProjectPermission,
useWorkspace
} from "@app/context";
import { useTimedReset } from "@app/hooks";
import { useGetPkiSubscriber, useIssuePkiSubscriberCert } from "@app/hooks/api";
import { UsePopUpState } from "@app/hooks/usePopUp";
import { CertificateContent } from "../../CertificatesPage/components/CertificateContent";
type Props = {
subscriberName: string;
handlePopUpOpen: (popUpName: keyof UsePopUpState<["pkiSubscriber"]>, data?: object) => void;
};
type TCertificateDetails = {
serialNumber: string;
certificate: string;
certificateChain: string;
privateKey: string;
};
export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }: Props) => {
const { currentWorkspace } = useWorkspace();
const projectId = currentWorkspace.id;
const { permission } = useProjectPermission();
const [certificateDetails, setCertificateDetails] = useState<TCertificateDetails | null>(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
initialState: "Copy ID to clipboard"
});
const { data: pkiSubscriber } = useGetPkiSubscriber({
subscriberName,
projectId
});
const { mutateAsync: issuePkiSubscriberCert, isPending: isIssuingCert } =
useIssuePkiSubscriberCert();
const onIssuePkiSubscriberCert = async () => {
try {
const response = await issuePkiSubscriberCert({ subscriberName, projectId });
setCertificateDetails({
serialNumber: response.serialNumber,
certificate: response.certificate,
certificateChain: response.certificateChain,
privateKey: response.privateKey
});
setIsModalOpen(true);
createNotification({
text: "Successfully issued certificate",
type: "success"
});
} catch (err) {
console.error(err);
createNotification({
text: "Failed to issue certificate",
type: "error"
});
}
};
const canIssuePkiSubscriberCert = permission.can(
ProjectPermissionPkiSubscriberActions.IssueCert,
subject(ProjectPermissionSub.PkiSubscribers, {
name: pkiSubscriber?.name ?? ""
})
);
return pkiSubscriber ? (
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">PKI Subscriber Details</h3>
<ProjectPermissionCan
I={ProjectPermissionPkiSubscriberActions.Edit}
a={ProjectPermissionSub.PkiSubscribers}
>
{(isAllowed) => {
return (
<Tooltip content="Edit PKI Subscriber">
<IconButton
isDisabled={!isAllowed}
ariaLabel="edit icon"
variant="plain"
className="group relative"
onClick={(e) => {
e.stopPropagation();
handlePopUpOpen("pkiSubscriber", {
subscriberName: pkiSubscriber.name
});
}}
>
<FontAwesomeIcon icon={faPencil} />
</IconButton>
</Tooltip>
);
}}
</ProjectPermissionCan>
</div>
<div className="pt-4">
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">PKI Subscriber ID</p>
<div className="group flex align-top">
<p className="text-sm text-mineshaft-300">{pkiSubscriber.id}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<Tooltip content={copyTextId}>
<IconButton
ariaLabel="copy icon"
variant="plain"
className="group relative ml-2"
onClick={() => {
navigator.clipboard.writeText(pkiSubscriber.id);
setCopyTextId("Copied");
}}
>
<FontAwesomeIcon icon={isCopyingId ? faCheck : faCopy} />
</IconButton>
</Tooltip>
</div>
</div>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Name</p>
<p className="text-sm text-mineshaft-300">{pkiSubscriber.name}</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Common Name</p>
<p className="text-sm text-mineshaft-300">{pkiSubscriber.commonName}</p>
</div>
{canIssuePkiSubscriberCert && (
<Button
isDisabled={!canIssuePkiSubscriberCert}
className="mt-4 w-full"
colorSchema="primary"
type="submit"
isLoading={isIssuingCert}
onClick={() => {
onIssuePkiSubscriberCert();
}}
>
Issue Certificate
</Button>
)}
</div>
<Modal
isOpen={isModalOpen}
onOpenChange={(isOpen) => {
setIsModalOpen(isOpen);
if (!isOpen) {
setCertificateDetails(null);
}
}}
>
<ModalContent title="Certificate Details">
{certificateDetails && (
<CertificateContent
serialNumber={certificateDetails.serialNumber}
certificate={certificateDetails.certificate}
certificateChain={certificateDetails.certificateChain}
privateKey={certificateDetails.privateKey}
/>
)}
</ModalContent>
</Modal>
</div>
) : (
<div />
);
};
frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/index.tsx
+2
View File
@@ -0,0 +1,2 @@
export { PkiSubscriberCertificatesSection } from "./PkiSubscriberCertificatesSection";
export { PkiSubscriberDetailsSection } from "./PkiSubscriberDetailsSection";
frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/route.tsx
+3 -10
View File
@@ -1,16 +1,9 @@
import { createFileRoute } from "@tanstack/react-router";
function RouteComponent() {
return (
<div>
Hello
"/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers/$subscriberId"!
</div>
);
}
import { PkiSubscriberDetailsByIDPage } from "./PkiSubscriberDetailsByIDPage";
export const Route = createFileRoute(
"/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers/$subscriberId"
"/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers/$subscriberName"
)({
component: RouteComponent
component: PkiSubscriberDetailsByIDPage
});
frontend/src/pages/cert-manager/PkiSubscribersPage/PkiSubscribersPage.tsx
+4 -1
View File
@@ -15,7 +15,10 @@ export const PkiSubscribersPage = () => {
<div className="h-full bg-bunker-800">
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title="Subscribers" description="Manage your PKI subscribers." />
<PageHeader
title="Subscribers"
description="Manage subscribers that request and receive certificates, including user devices, servers, and services."
/>
<PkiSubscriberSection />
</div>
</div>
frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx
+10 -7
View File
@@ -22,7 +22,7 @@ import { useWorkspace } from "@app/context";
import {
CaStatus,
useCreatePkiSubscriber,
useGetPkiSubscriberById,
useGetPkiSubscriber,
useListWorkspaceCas,
useListWorkspacePkiSubscribers,
useUpdatePkiSubscriber
@@ -72,16 +72,18 @@ export type FormData = z.infer<typeof schema>;
export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
const { currentWorkspace } = useWorkspace();
const projectId = currentWorkspace?.id || "";
const projectId = currentWorkspace.id;
const { data: subscribers } = useListWorkspacePkiSubscribers(projectId);
const { data: cas } = useListWorkspaceCas({
projectSlug: currentWorkspace?.slug ?? "",
status: CaStatus.ACTIVE
});
const { data: pkiSubscriber } = useGetPkiSubscriberById(
(popUp?.pkiSubscriber?.data as { subscriberId: string })?.subscriberId || ""
);
const { data: pkiSubscriber } = useGetPkiSubscriber({
subscriberName:
(popUp?.pkiSubscriber?.data as { subscriberName: string })?.subscriberName || "",
projectId
});
const { mutateAsync: createMutateAsync } = useCreatePkiSubscriber();
const { mutateAsync: updateMutateAsync } = useUpdatePkiSubscriber();
@@ -200,7 +202,8 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
if (pkiSubscriber) {
await updateMutateAsync({
subscriberId: pkiSubscriber.id,
subscriberName: pkiSubscriber.name,
projectId,
name,
caId,
commonName,
@@ -258,7 +261,7 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
name="name"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Name"
label="Subscriber Name"
isError={Boolean(error)}
errorText={error?.message}
isRequired
frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberSection.tsx
+64 -6
View File
@@ -4,24 +4,33 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { createNotification } from "@app/components/notifications";
import { ProjectPermissionCan } from "@app/components/permissions";
import { Button, DeleteActionModal } from "@app/components/v2";
import { ProjectPermissionPkiSubscriberActions, ProjectPermissionSub } from "@app/context";
import { useDeletePkiSubscriber } from "@app/hooks/api";
import {
ProjectPermissionPkiSubscriberActions,
ProjectPermissionSub,
useWorkspace
} from "@app/context";
import { useDeletePkiSubscriber, useUpdatePkiSubscriber } from "@app/hooks/api";
import { PkiSubscriberStatus } from "@app/hooks/api/pkiSubscriber/types";
import { usePopUp } from "@app/hooks/usePopUp";
import { PkiSubscriberModal } from "./PkiSubscriberModal";
import { PkiSubscribersTable } from "./PkiSubscribersTable";
export const PkiSubscriberSection = () => {
const { currentWorkspace } = useWorkspace();
const projectId = currentWorkspace.id;
const { mutateAsync: deletePkiSubscriber } = useDeletePkiSubscriber();
const { mutateAsync: updatePkiSubscriber } = useUpdatePkiSubscriber();
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
"pkiSubscriber",
"pkiSubscriberStatus", // enable / disable
"deletePkiSubscriber"
] as const);
const onRemovePkiSubscriberSubmit = async (subscriberId: string) => {
const onRemovePkiSubscriberSubmit = async (subscriberName: string) => {
try {
const subscriber = await deletePkiSubscriber({ subscriberId });
const subscriber = await deletePkiSubscriber({ subscriberName, projectId });
createNotification({
text: `Successfully deleted PKI subscriber: ${subscriber.name}`,
@@ -38,6 +47,41 @@ export const PkiSubscriberSection = () => {
}
};
const onUpdatePkiSubscriberStatus = async ({
subscriberName,
status
}: {
subscriberName: string;
status: PkiSubscriberStatus;
}) => {
try {
if (!currentWorkspace?.slug) return;
await updatePkiSubscriber({ subscriberName, projectId, status });
createNotification({
text: `Successfully ${status === PkiSubscriberStatus.ACTIVE ? "enabled" : "disabled"} subscriber`,
type: "success"
});
handlePopUpClose("pkiSubscriberStatus");
} catch (err) {
console.error(err);
createNotification({
text: `Failed to ${status === PkiSubscriberStatus.ACTIVE ? "enabled" : "disabled"} subscriber`,
type: "error"
});
}
};
const subscriberStatusData = popUp?.pkiSubscriberStatus?.data as {
status: PkiSubscriberStatus;
subscriberName: string;
};
const isEnabling = subscriberStatusData?.status === PkiSubscriberStatus.ACTIVE;
const subscriberName = subscriberStatusData?.subscriberName || "";
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex justify-between">
@@ -46,7 +90,7 @@ export const PkiSubscriberSection = () => {
<a
target="_blank"
rel="noopener noreferrer"
href="https://infisical.com/docs/documentation/platform/pki"
href="https://infisical.com/docs/documentation/platform/pki/subscribers"
>
<span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
Documentation{" "}
@@ -77,6 +121,20 @@ export const PkiSubscriberSection = () => {
</div>
<PkiSubscribersTable handlePopUpOpen={handlePopUpOpen} />
<PkiSubscriberModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
<DeleteActionModal
isOpen={popUp.pkiSubscriberStatus.isOpen}
title={`Are you sure want to ${isEnabling ? "enable" : "disable"} the subscriber ${subscriberName}?`}
subTitle={
isEnabling
? "This action will allow issuing certificates for this subscriber again."
: "This action will prevent issuing certificates for this subscriber."
}
onChange={(isOpen) => handlePopUpToggle("pkiSubscriberStatus", isOpen)}
deleteKey="confirm"
buttonColorSchema={isEnabling ? "primary" : "danger"}
buttonText={isEnabling ? "Enable" : "Disable"}
onDeleteApproved={() => onUpdatePkiSubscriberStatus(subscriberStatusData)}
/>
<DeleteActionModal
isOpen={popUp.deletePkiSubscriber.isOpen}
title="Are you sure you want to remove the PKI subscriber?"
@@ -84,7 +142,7 @@ export const PkiSubscriberSection = () => {
deleteKey="confirm"
onDeleteApproved={() =>
onRemovePkiSubscriberSubmit(
(popUp?.deletePkiSubscriber?.data as { subscriberId: string })?.subscriberId
(popUp?.deletePkiSubscriber?.data as { subscriberName: string })?.subscriberName
)
}
/>
frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscribersTable.tsx
+55 -12
View File
@@ -1,10 +1,17 @@
import { faEllipsis, faPencil, faServer, faTrash } from "@fortawesome/free-solid-svg-icons";
import {
faBan,
faEllipsis,
faPencil,
faTrash,
faUserShield
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useNavigate } from "@tanstack/react-router";
import { twMerge } from "tailwind-merge";
import { ProjectPermissionCan } from "@app/components/permissions";
import {
Badge,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
@@ -26,12 +33,17 @@ import {
useWorkspace
} from "@app/context";
import { useListWorkspacePkiSubscribers } from "@app/hooks/api";
import {
getPkiSubscriberStatusBadgeVariant,
PkiSubscriberStatus,
pkiSubscriberStatusToNameMap
} from "@app/hooks/api/pkiSubscriber/constants";
import { ProjectType } from "@app/hooks/api/workspace/types";
import { UsePopUpState } from "@app/hooks/usePopUp";
type Props = {
handlePopUpOpen: (
popUpName: keyof UsePopUpState<["deletePkiSubscriber", "pkiSubscriber"]>,
popUpName: keyof UsePopUpState<["deletePkiSubscriber", "pkiSubscriber", "pkiSubscriberStatus"]>,
data?: object
) => void;
};
@@ -47,12 +59,13 @@ export const PkiSubscribersTable = ({ handlePopUpOpen }: Props) => {
<THead>
<Tr>
<Th>Name</Th>
<Th>Status</Th>
<Th>Common Name</Th>
<Th />
</Tr>
</THead>
<TBody>
{isPending && <TableSkeleton columns={3} innerKey="pki-subscribers" />}
{isPending && <TableSkeleton columns={4} innerKey="pki-subscribers" />}
{!isPending &&
data &&
data.length > 0 &&
@@ -61,18 +74,22 @@ export const PkiSubscribersTable = ({ handlePopUpOpen }: Props) => {
<Tr
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
key={`pki-subscriber-${subscriber.id}`}
onClick={(e) => {
e.preventDefault();
onClick={() =>
navigate({
to: `/${ProjectType.CertificateManager}/$projectId/subscribers/$subscriberId` as const,
to: `/${ProjectType.CertificateManager}/$projectId/subscribers/$subscriberName` as const,
params: {
projectId: currentWorkspace.id,
subscriberId: subscriber.id
subscriberName: subscriber.name
}
});
}}
})
}
>
<Td>{subscriber.name}</Td>
<Td>
<Badge variant={getPkiSubscriberStatusBadgeVariant(subscriber.status)}>
{pkiSubscriberStatusToNameMap[subscriber.status]}
</Badge>
</Td>
<Td>{subscriber.commonName}</Td>
<Td className="text-right align-middle">
<DropdownMenu>
@@ -96,7 +113,7 @@ export const PkiSubscribersTable = ({ handlePopUpOpen }: Props) => {
onClick={(e) => {
e.stopPropagation();
handlePopUpOpen("pkiSubscriber", {
subscriberId: subscriber.id
subscriberName: subscriber.name
});
}}
disabled={!isAllowed}
@@ -106,6 +123,32 @@ export const PkiSubscribersTable = ({ handlePopUpOpen }: Props) => {
</DropdownMenuItem>
)}
</ProjectPermissionCan>
<ProjectPermissionCan
I={ProjectPermissionPkiSubscriberActions.Edit}
a={ProjectPermissionSub.PkiSubscribers}
>
{(isAllowed) => (
<DropdownMenuItem
className={twMerge(
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={(e) => {
e.stopPropagation();
handlePopUpOpen("pkiSubscriberStatus", {
subscriberName: subscriber.name,
status:
subscriber.status === PkiSubscriberStatus.ACTIVE
? PkiSubscriberStatus.DISABLED
: PkiSubscriberStatus.ACTIVE
});
}}
disabled={!isAllowed}
icon={<FontAwesomeIcon icon={faBan} />}
>
{`${subscriber.status === PkiSubscriberStatus.ACTIVE ? "Disable" : "Enable"} Subscriber`}
</DropdownMenuItem>
)}
</ProjectPermissionCan>
<ProjectPermissionCan
I={ProjectPermissionPkiSubscriberActions.Delete}
a={ProjectPermissionSub.PkiSubscribers}
@@ -118,7 +161,7 @@ export const PkiSubscribersTable = ({ handlePopUpOpen }: Props) => {
onClick={(e) => {
e.stopPropagation();
handlePopUpOpen("deletePkiSubscriber", {
subscriberId: subscriber.id
subscriberName: subscriber.name
});
}}
disabled={!isAllowed}
@@ -137,7 +180,7 @@ export const PkiSubscribersTable = ({ handlePopUpOpen }: Props) => {
</TBody>
</Table>
{!isPending && data?.length === 0 && (
<EmptyState title="No PKI subscribers have been added" icon={faServer} />
<EmptyState title="No PKI subscribers have been added" icon={faUserShield} />
)}
</TableContainer>
</div>
frontend/src/pages/cert-manager/PkiSubscribersPage/route.tsx
+5 -14
View File
@@ -1,18 +1,9 @@
import { createFileRoute } from '@tanstack/react-router'
import { createFileRoute } from "@tanstack/react-router";
import { PkiSubscribersPage } from './PkiSubscribersPage'
import { PkiSubscribersPage } from "./PkiSubscribersPage";
export const Route = createFileRoute(
'/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers/',
"/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers/"
)({
component: PkiSubscribersPage,
})
function RouteComponent() {
return (
<div>
Hello
"/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers"!
</div>
)
}
component: PkiSubscribersPage
});