Rename pki alerting structures

2026-10-15 21:40:31 +00:00 · 2024-08-09 08:27:53 -07:00
parent 556e4d62c4
commit fc4a20caf2
54 changed files with 1443 additions and 161 deletions
@@ -2,7 +2,7 @@ import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { withProjectPermission } from "@app/hoc";

-import { AlertsTab, CaTab, CertificatesTab } from "./components";
+import { CaTab, CertificatesTab,PkiAlertsTab } from "./components";

 enum TabSections {
  Ca = "certificate-authorities",
@@ -29,7 +29,7 @@ export const CertificatesPage = withProjectPermission(
              <CaTab />
            </TabPanel>
            <TabPanel value={TabSections.Alerting}>
-              <AlertsTab />
+              <PkiAlertsTab />
            </TabPanel>
          </Tabs>
        </div>
@@ -1 +0,0 @@
-export { AlertsTab } from "./AlertsTab";
@@ -1,8 +1,8 @@
 import { motion } from "framer-motion";

-import { AlertsSection,PkiCollectionSection } from "./components";
+import { PkiAlertsSection, PkiCollectionSection } from "./components";

-export const AlertsTab = () => {
+export const PkiAlertsTab = () => {
  return (
    <motion.div
      key="panel-alerts"
@@ -12,7 +12,7 @@ export const AlertsTab = () => {
      exit={{ opacity: 0, translateX: 30 }}
    >
      <PkiCollectionSection />
-      <AlertsSection />
+      <PkiAlertsSection />
    </motion.div>
  );
 };
@@ -12,13 +12,15 @@ import {
  ModalContent,
  Select,
  SelectItem,
-  TextArea} from "@app/components/v2";
+  TextArea
+} from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import {
-  useCreateAlert,
-  useGetAlertById,
+  useCreatePkiAlert,
+  useGetPkiAlertById,
  useListWorkspacePkiCollections,
-  useUpdateAlert} from "@app/hooks/api";
+  useUpdatePkiAlert
+} from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";

 enum TimeUnit {
@@ -54,24 +56,24 @@ const convertToDays = (unit: TimeUnit, value: number) => {
 export type FormData = z.infer<typeof schema>;

 type Props = {
-  popUp: UsePopUpState<["alert"]>;
-  handlePopUpToggle: (popUpName: keyof UsePopUpState<["alert"]>, state?: boolean) => void;
+  popUp: UsePopUpState<["pkiAlert"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["pkiAlert"]>, state?: boolean) => void;
 };

-export const AlertModal = ({ popUp, handlePopUpToggle }: Props) => {
+export const PkiAlertModal = ({ popUp, handlePopUpToggle }: Props) => {
  const { currentWorkspace } = useWorkspace();
  const projectId = currentWorkspace?.id || "";

-  const { data: alert } = useGetAlertById(
-    (popUp?.alert?.data as { alertId: string })?.alertId || ""
+  const { data: alert } = useGetPkiAlertById(
+    (popUp?.pkiAlert?.data as { alertId: string })?.alertId || ""
  );

  const { data: pkiCollections } = useListWorkspacePkiCollections({
    workspaceId: projectId
  });

-  const { mutateAsync: createAlert } = useCreateAlert();
-  const { mutateAsync: updateAlert } = useUpdateAlert();
+  const { mutateAsync: createPkiAlert } = useCreatePkiAlert();
+  const { mutateAsync: updatePkiAlert } = useUpdatePkiAlert();

  const {
    control,
@@ -95,11 +97,15 @@ export const AlertModal = ({ popUp, handlePopUpToggle }: Props) => {
        emails: alert.recipientEmails
      });
    } else {
+      // TODO: add default collection?
      reset({
-        name: ""
+        name: "",
+        ...(pkiCollections?.collections?.[0] && {
+          pkiCollectionId: pkiCollections.collections[0].id
+        })
      });
    }
-  }, [alert]);
+  }, [alert, pkiCollections]);

  const onFormSubmit = async ({
    name,
@@ -120,7 +126,7 @@ export const AlertModal = ({ popUp, handlePopUpToggle }: Props) => {

      if (alert) {
        // update
-        await updateAlert({
+        await updatePkiAlert({
          alertId: alert.id,
          pkiCollectionId,
          name,
@@ -130,7 +136,7 @@ export const AlertModal = ({ popUp, handlePopUpToggle }: Props) => {
        });
      } else {
        // create
-        await createAlert({
+        await createPkiAlert({
          name,
          projectId,
          pkiCollectionId,
@@ -139,7 +145,7 @@ export const AlertModal = ({ popUp, handlePopUpToggle }: Props) => {
        });
      }

-      handlePopUpToggle("alert", false);
+      handlePopUpToggle("pkiAlert", false);

      reset();

@@ -158,9 +164,9 @@ export const AlertModal = ({ popUp, handlePopUpToggle }: Props) => {

  return (
    <Modal
-      isOpen={popUp?.alert?.isOpen}
+      isOpen={popUp?.pkiAlert?.isOpen}
      onOpenChange={(isOpen) => {
-        handlePopUpToggle("alert", isOpen);
+        handlePopUpToggle("pkiAlert", isOpen);
        reset();
      }}
    >
@@ -18,13 +18,16 @@ import { UsePopUpState } from "@app/hooks/usePopUp";

 type Props = {
  alert: TPkiAlert;
-  handlePopUpOpen: (popUpName: keyof UsePopUpState<["alert", "deleteAlert"]>, data?: {}) => void;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["pkiAlert", "deletePkiAlert"]>,
+    data?: {}
+  ) => void;
 };

-export const AlertRow = ({ alert, handlePopUpOpen }: Props) => {
+export const PkiAlertRow = ({ alert, handlePopUpOpen }: Props) => {
  const { data: pkiCollection } = useGetPkiCollectionById(alert.pkiCollectionId || "");
  return (
-    <Tr className="h-10" key={`alert-${alert.id}`}>
+    <Tr className="h-10" key={`pki-alert-${alert.id}`}>
      <Td>{alert.name}</Td>
      <Td>{alert.alertBeforeDays}</Td>
      <Td>{pkiCollection ? pkiCollection.name : "-"}</Td>
@@ -47,7 +50,7 @@ export const AlertRow = ({ alert, handlePopUpOpen }: Props) => {
                  )}
                  onClick={(e) => {
                    e.stopPropagation();
-                    handlePopUpOpen("alert", {
+                    handlePopUpOpen("pkiAlert", {
                      alertId: alert.id
                    });
                  }}
@@ -70,7 +73,7 @@ export const AlertRow = ({ alert, handlePopUpOpen }: Props) => {
                  )}
                  onClick={(e) => {
                    e.stopPropagation();
-                    handlePopUpOpen("deleteAlert", {
+                    handlePopUpOpen("deletePkiAlert", {
                      alertId: alert.id,
                      name: alert.name
                    });
@@ -5,37 +5,37 @@ import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { useDeleteAlert } from "@app/hooks/api";
+import { useDeletePkiAlert } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";

-import { AlertModal } from "./AlertModal";
-import { AlertsTable } from "./AlertsTable";
+import { PkiAlertModal } from "./PkiAlertModal";
+import { PkiAlertsTable } from "./PkiAlertsTable";

-export const AlertsSection = () => {
+export const PkiAlertsSection = () => {
  const { currentWorkspace } = useWorkspace();
  const projectId = currentWorkspace?.id || "";
-  const { mutateAsync: deleteAlert } = useDeleteAlert();
+  const { mutateAsync: deletePkiAlert } = useDeletePkiAlert();

  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-    "alert",
-    "deleteAlert"
+    "pkiAlert",
+    "deletePkiAlert"
  ] as const);

  const onRemoveAlertSubmit = async (alertId: string) => {
    try {
      if (!projectId) return;

-      await deleteAlert({
+      await deletePkiAlert({
        alertId,
        projectId
      });

-      await createNotification({
+      createNotification({
        text: "Successfully deleted alert",
        type: "success"
      });

-      handlePopUpClose("deleteAlert");
+      handlePopUpClose("deletePkiAlert");
    } catch (err) {
      console.error(err);
      createNotification({
@@ -58,7 +58,7 @@ export const AlertsSection = () => {
              colorSchema="primary"
              type="submit"
              leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              onClick={() => handlePopUpOpen("alert")}
+              onClick={() => handlePopUpOpen("pkiAlert")}
              isDisabled={!isAllowed}
            >
              Create
@@ -66,17 +66,17 @@ export const AlertsSection = () => {
          )}
        </ProjectPermissionCan>
      </div>
-      <AlertsTable handlePopUpOpen={handlePopUpOpen} />
-      <AlertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <PkiAlertsTable handlePopUpOpen={handlePopUpOpen} />
+      <PkiAlertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <DeleteActionModal
-        isOpen={popUp.deleteAlert.isOpen}
+        isOpen={popUp.deletePkiAlert.isOpen}
        title={`Are you sure want to remove the alert ${
-          (popUp?.deleteAlert?.data as { name: string })?.name || ""
+          (popUp?.deletePkiAlert?.data as { name: string })?.name || ""
        } from the project?`}
-        onChange={(isOpen) => handlePopUpToggle("deleteAlert", isOpen)}
+        onChange={(isOpen) => handlePopUpToggle("deletePkiAlert", isOpen)}
        deleteKey="confirm"
        onDeleteApproved={() =>
-          onRemoveAlertSubmit((popUp?.deleteAlert?.data as { alertId: string })?.alertId)
+          onRemoveAlertSubmit((popUp?.deletePkiAlert?.data as { alertId: string })?.alertId)
        }
      />
    </div>
@@ -11,20 +11,23 @@ import {
  Tr
 } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
-import { useListWorkspaceAlerts } from "@app/hooks/api";
+import { useListWorkspacePkiAlerts } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";

-import { AlertRow } from "./AlertRow";
+import { PkiAlertRow } from "./PkiAlertRow";

 type Props = {
-  handlePopUpOpen: (popUpName: keyof UsePopUpState<["alert", "deleteAlert"]>, data?: {}) => void;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["pkiAlert", "deletePkiAlert"]>,
+    data?: {}
+  ) => void;
 };

-export const AlertsTable = ({ handlePopUpOpen }: Props) => {
+export const PkiAlertsTable = ({ handlePopUpOpen }: Props) => {
  const { currentWorkspace } = useWorkspace();
  const projectId = currentWorkspace?.id || "";

-  const { data, isLoading } = useListWorkspaceAlerts({
+  const { data, isLoading } = useListWorkspacePkiAlerts({
    workspaceId: projectId
  });

@@ -35,16 +38,16 @@ export const AlertsTable = ({ handlePopUpOpen }: Props) => {
          <Tr>
            <Th>Alert Name</Th>
            <Th>Alert Before Days</Th>
-            <Th>Bound PKI Collection</Th>
+            <Th>Certificate Collection</Th>
            <Th className="w-5" />
          </Tr>
        </THead>
        <TBody>
-          {isLoading && <TableSkeleton columns={4} innerKey="project-alerts" />}
+          {isLoading && <TableSkeleton columns={4} innerKey="project-pki-alerts" />}
          {!isLoading &&
            data?.alerts.map((alert) => {
              return (
-                <AlertRow
+                <PkiAlertRow
                  key={`alert-${alert.id}`}
                  alert={alert}
                  handlePopUpOpen={handlePopUpOpen}
@@ -54,7 +57,7 @@ export const AlertsTable = ({ handlePopUpOpen }: Props) => {
        </TBody>
      </Table>
      {!isLoading && !data?.alerts?.length && (
-        <EmptyState title="No alerts have been created" icon={faExclamationCircle} />
+        <EmptyState title="No alerts have been created for any certificate collections" icon={faExclamationCircle} />
      )}
    </TableContainer>
  );
@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";

@@ -25,6 +26,7 @@ type Props = {
 };

 export const PkiCollectionModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const router = useRouter();
  const { currentWorkspace } = useWorkspace();
  const projectId = currentWorkspace?.id || "";

@@ -69,10 +71,12 @@ export const PkiCollectionModal = ({ popUp, handlePopUpToggle }: Props) => {
        });
      } else {
        // create
-        await createPkiCollection({
+        const { id: createdId } = await createPkiCollection({
          name,
          projectId
        });
+
+        router.push(`/project/${projectId}/pki-collections/${createdId}`);
      }

      handlePopUpToggle("pkiCollection", false);
@@ -100,7 +104,7 @@ export const PkiCollectionModal = ({ popUp, handlePopUpToggle }: Props) => {
        reset();
      }}
    >
-      <ModalContent title={`${pkiCollection ? "Edit" : "Create"} PKI Collection`}>
+      <ModalContent title={`${pkiCollection ? "Edit" : "Create"} Certificate Collection`}>
        <form onSubmit={handleSubmit(onFormSubmit)}>
          <Controller
            control={control}
@@ -125,7 +129,7 @@ export const PkiCollectionModal = ({ popUp, handlePopUpToggle }: Props) => {
              isLoading={isSubmitting}
              isDisabled={isSubmitting}
            >
-              Create
+              {pkiCollection ? "Update" : "Create"}
            </Button>
            <Button colorSchema="secondary" variant="plain">
              Cancel
@@ -48,7 +48,7 @@ export const PkiCollectionSection = () => {
  return (
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
      <div className="mb-4 flex justify-between">
-        <p className="text-xl font-semibold text-mineshaft-100">PKI Collection</p>
+        <p className="text-xl font-semibold text-mineshaft-100">Certificate Collection</p>
        <ProjectPermissionCan
          I={ProjectPermissionActions.Create}
          a={ProjectPermissionSub.PkiCollections}
@@ -1,3 +1,4 @@
+import { useRouter } from "next/router";
 import { faBoxesStacked, faEllipsis } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
@@ -30,6 +31,7 @@ type Props = {
 };

 export const PkiCollectionTable = ({ handlePopUpOpen }: Props) => {
+  const router = useRouter();
  const { currentWorkspace } = useWorkspace();
  const projectId = currentWorkspace?.id || "";

@@ -52,7 +54,13 @@ export const PkiCollectionTable = ({ handlePopUpOpen }: Props) => {
            {!isLoading &&
              data?.collections.map((pkiCollection) => {
                return (
-                  <Tr className="h-10" key={`pki-collection-${pkiCollection.id}`}>
+                  <Tr
+                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    key={`pki-collection-${pkiCollection.id}`}
+                    onClick={() =>
+                      router.push(`/project/${projectId}/pki-collections/${pkiCollection.id}`)
+                    }
+                  >
                    <Td>{pkiCollection.name}</Td>
                    <Td>
                      <DropdownMenu>
@@ -79,7 +87,7 @@ export const PkiCollectionTable = ({ handlePopUpOpen }: Props) => {
                                }}
                                disabled={!isAllowed}
                              >
-                                Edit PKI Collection
+                                Edit Collection
                              </DropdownMenuItem>
                            )}
                          </ProjectPermissionCan>
@@ -103,7 +111,7 @@ export const PkiCollectionTable = ({ handlePopUpOpen }: Props) => {
                                }}
                                disabled={!isAllowed}
                              >
-                                Delete PKI Collection
+                                Delete Collection
                              </DropdownMenuItem>
                            )}
                          </ProjectPermissionCan>
@@ -116,7 +124,7 @@ export const PkiCollectionTable = ({ handlePopUpOpen }: Props) => {
          </TBody>
        </Table>
        {!isLoading && !data?.collections?.length && (
-          <EmptyState title="No collections have been created" icon={faBoxesStacked} />
+          <EmptyState title="No certificate collections have been created" icon={faBoxesStacked} />
        )}
      </TableContainer>
    </div>
@@ -1,2 +1,2 @@
-export { AlertsSection } from "./AlertsSection";
+export { PkiAlertsSection } from "./PkiAlertsSection";
 export { PkiCollectionSection } from "./PkiCollectionSection";
@@ -0,0 +1 @@
+export { PkiAlertsTab } from "./PkiAlertsTab";
@@ -1,3 +1,3 @@
-export { AlertsTab } from "./AlertsTab";
 export { CaTab } from "./CaTab";
 export { CertificatesTab } from "./CertificatesTab";
+export { PkiAlertsTab } from "./PkiAlertsTab";
@@ -0,0 +1,160 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useRouter } from "next/router";
+import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+import { useDeletePkiCollection,useGetPkiCollectionById } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { PkiCollectionModal } from "../CertificatesPage/components/PkiAlertsTab/components/PkiCollectionModal";
+import { PkiCollectionDetailsSection, PkiCollectionItemsSection } from "./components";
+
+export const PkiCollectionPage = withProjectPermission(
+  () => {
+    const router = useRouter();
+    const collectionId = router.query.collectionId as string;
+    const { currentWorkspace } = useWorkspace();
+    const projectId = currentWorkspace?.id || "";
+
+    const { data } = useGetPkiCollectionById(collectionId);
+    const { mutateAsync: deletePkiCollection } = useDeletePkiCollection();
+
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+      "pkiCollection",
+      "deletePkiCollection"
+    ] as const);
+
+    const onDeletePkiCollectionSubmit = async (collectionIdToDelete: string) => {
+      try {
+        if (!projectId) return;
+
+        await deletePkiCollection({
+          projectId,
+          collectionId: collectionIdToDelete
+        });
+
+        createNotification({
+          text: "Successfully deleted PKI collection",
+          type: "success"
+        });
+        handlePopUpClose("deletePkiCollection");
+        router.push(`/project/${projectId}/certificates`);
+      } catch (err) {
+        console.error(err);
+      }
+    };
+
+    return (
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        {data && (
+          <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+            <Button
+              variant="link"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+              onClick={() => {
+                router.push(`/project/${projectId}/certificates`);
+              }}
+              className="mb-4"
+            >
+              Certificate Collections
+            </Button>
+            <div className="mb-4 flex items-center justify-between">
+              <p className="text-3xl font-semibold text-white">{data.name}</p>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild className="rounded-lg">
+                  <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                    <Tooltip content="More options">
+                      <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                    </Tooltip>
+                  </div>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="p-1">
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Edit}
+                    a={ProjectPermissionSub.PkiCollections}
+                  >
+                    {(isAllowed) => (
+                      <DropdownMenuItem
+                        className={twMerge(
+                          !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                        )}
+                        onClick={() => {
+                          handlePopUpOpen("pkiCollection", {
+                            collectionId
+                          });
+                        }}
+                        disabled={!isAllowed}
+                      >
+                        Edit PKI Collection
+                      </DropdownMenuItem>
+                    )}
+                  </ProjectPermissionCan>
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Delete}
+                    a={ProjectPermissionSub.PkiCollections}
+                  >
+                    {(isAllowed) => (
+                      <DropdownMenuItem
+                        className={twMerge(
+                          isAllowed
+                            ? "hover:!bg-red-500 hover:!text-white"
+                            : "pointer-events-none cursor-not-allowed opacity-50"
+                        )}
+                        onClick={() =>
+                          handlePopUpOpen("deletePkiCollection", {
+                            collectionId: data.id,
+                            name: data.name
+                          })
+                        }
+                        disabled={!isAllowed}
+                      >
+                        Delete PKI Collection
+                      </DropdownMenuItem>
+                    )}
+                  </ProjectPermissionCan>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+            <div className="flex">
+              <div className="mr-4 w-96">
+                <PkiCollectionDetailsSection
+                  collectionId={collectionId}
+                  handlePopUpOpen={handlePopUpOpen}
+                />
+              </div>
+              <PkiCollectionItemsSection collectionId={collectionId} />
+            </div>
+          </div>
+        )}
+        <PkiCollectionModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+        <DeleteActionModal
+          isOpen={popUp.deletePkiCollection.isOpen}
+          title={`Are you sure want to delete the PKI collection ${data?.name ?? ""}?`}
+          onChange={(isOpen) => handlePopUpToggle("deletePkiCollection", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() =>
+            onDeletePkiCollectionSubmit(
+              (popUp.deletePkiCollection.data as { collectionId: string })?.collectionId
+            )
+          }
+        />
+      </div>
+    );
+  },
+  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.PkiCollections }
+);
@@ -0,0 +1,199 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  CaStatus,
+  useAddItemToPkiCollection,
+  useListWorkspaceCas,
+  useListWorkspaceCertificates} from "@app/hooks/api";
+import { PkiItemType, pkiItemTypeToNameMap } from "@app/hooks/api/pkiCollections/constants";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z
+  .object({
+    type: z.nativeEnum(PkiItemType),
+    itemId: z.string()
+  })
+  .required();
+
+type FormData = z.infer<typeof schema>;
+
+type Props = {
+  collectionId: string;
+  popUp: UsePopUpState<["addPkiCollectionItem"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["addPkiCollectionItem"]>,
+    state?: boolean
+  ) => void;
+};
+
+// note: this component should be optimized so it is easier
+// to find certificates and CAs
+export const AddPkiCollectionItemModal = ({ collectionId, popUp, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+
+  const { data: cas } = useListWorkspaceCas({
+    projectSlug: currentWorkspace?.slug || "",
+    status: CaStatus.ACTIVE
+  });
+
+  const { data } = useListWorkspaceCertificates({
+    projectSlug: currentWorkspace?.slug || "",
+    offset: 0,
+    limit: 25
+  });
+
+  const { mutateAsync: addItemToPkiCollection } = useAddItemToPkiCollection();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting },
+    watch
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      type: PkiItemType.CA
+    }
+  });
+
+  const itemType = watch("type");
+
+  const onFormSubmit = async ({ type, itemId }: FormData) => {
+    try {
+      const item = await addItemToPkiCollection({
+        collectionId,
+        type,
+        itemId
+      });
+
+      createNotification({
+        text: `Successfully added ${
+          pkiItemTypeToNameMap[item.type as PkiItemType]
+        } to PKI collection`,
+        type: "success"
+      });
+
+      reset();
+      handlePopUpToggle("addPkiCollectionItem", false);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.addPkiCollectionItem?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addPkiCollectionItem", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Add CA / Certificate to Collection">
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            name="type"
+            defaultValue={PkiItemType.CA}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl label="Item Type" errorText={error?.message} isError={Boolean(error)}>
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  <SelectItem value={PkiItemType.CA} key="pki-item-type-ca">
+                    Certificate Authority
+                  </SelectItem>
+                  <SelectItem value={PkiItemType.CERTIFICATE} key="pki-item-type-ca">
+                    Certificate
+                  </SelectItem>
+                </Select>
+              </FormControl>
+            )}
+          />
+          {itemType === PkiItemType.CA && (
+            <Controller
+              control={control}
+              name="itemId"
+              defaultValue=""
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  label="CA"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                  className="mt-4"
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    {(cas || []).map(({ id, dn }) => (
+                      <SelectItem value={id} key={`pki-item-cert-${id}`}>
+                        {dn}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+          )}
+          {itemType === PkiItemType.CERTIFICATE && (
+            <Controller
+              control={control}
+              name="itemId"
+              defaultValue=""
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  label="Certificate"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                  className="mt-4"
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    {(data?.certificates || []).map(({ id, commonName }) => (
+                      <SelectItem value={id} key={`pki-item-cert-${id}`}>
+                        {`CN=${commonName}`}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+          )}
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              Add
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("addPkiCollectionItem", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -0,0 +1,83 @@
+import { faCheck, faCopy, faPencil } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { IconButton, Tooltip } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { useTimedReset } from "@app/hooks";
+import { useGetPkiCollectionById } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  collectionId: string;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["pkiCollection"]>, data?: {}) => void;
+};
+
+export const PkiCollectionDetailsSection = ({ collectionId, handlePopUpOpen }: Props) => {
+  const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
+    initialState: "Copy ID to clipboard"
+  });
+
+  const { data: pkiCollection } = useGetPkiCollectionById(collectionId);
+
+  return pkiCollection ? (
+    <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">Collection Details</h3>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Edit}
+          a={ProjectPermissionSub.PkiCollections}
+        >
+          {(isAllowed) => {
+            return (
+              <Tooltip content="Edit Identity">
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative"
+                  onClick={() =>
+                    handlePopUpOpen("pkiCollection", {
+                      collectionId
+                    })
+                  }
+                >
+                  <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 Collection ID</p>
+          <div className="group flex align-top">
+            <p className="text-sm text-mineshaft-300">{pkiCollection.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(pkiCollection.id);
+                    setCopyTextId("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingId ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+        <div>
+          <p className="text-sm font-semibold text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{pkiCollection.name}</p>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div />
+  );
+};
@@ -0,0 +1,83 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { DeleteActionModal, IconButton } from "@app/components/v2";
+import { useGetPkiCollectionById, useRemoveItemFromPkiCollection } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { AddPkiCollectionItemModal } from "./AddPkiCollectionItemModal";
+import { PkiCollectionItemsTable } from "./PkiCollectionItemsTable";
+
+type Props = {
+  collectionId: string;
+};
+
+export const PkiCollectionItemsSection = ({ collectionId }: Props) => {
+  const { data: pkiCollection } = useGetPkiCollectionById(collectionId);
+  const { mutateAsync: removeItemFromPkiCollection } = useRemoveItemFromPkiCollection();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "deletePkiCollectionItem",
+    "addPkiCollectionItem"
+  ] as const);
+
+  const onRemovePkiCollectionItemSubmit = async (itemId: string) => {
+    try {
+      await removeItemFromPkiCollection({
+        itemId,
+        collectionId
+      });
+
+      createNotification({
+        text: "Successfully removed item from PKI collection",
+        type: "success"
+      });
+
+      handlePopUpClose("deletePkiCollectionItem");
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return pkiCollection ? (
+    <div className="w-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">Items</h3>
+        <IconButton
+          ariaLabel="copy icon"
+          variant="plain"
+          className="group relative"
+          onClick={() => {
+            handlePopUpOpen("addPkiCollectionItem");
+          }}
+        >
+          <FontAwesomeIcon icon={faPlus} />
+        </IconButton>
+      </div>
+      <div className="py-4">
+        <PkiCollectionItemsTable collectionId={collectionId} handlePopUpOpen={handlePopUpOpen} />
+      </div>
+      <AddPkiCollectionItemModal
+        collectionId={collectionId}
+        popUp={popUp}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <DeleteActionModal
+        isOpen={popUp.deletePkiCollectionItem.isOpen}
+        title={`Are you sure want to remove the item from the collection ${pkiCollection.name}?`}
+        onChange={(isOpen) => handlePopUpToggle("deletePkiCollectionItem", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() => {
+          const popupData = popUp?.deletePkiCollectionItem?.data as {
+            itemId: string;
+          };
+
+          return onRemovePkiCollectionItemSubmit(popupData.itemId);
+        }}
+      />
+    </div>
+  ) : (
+    <div />
+  );
+};
@@ -0,0 +1,112 @@
+import { useState } from "react";
+import { faBoxesStacked, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  EmptyState,
+  IconButton,
+  Pagination,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { useListPkiCollectionItems } from "@app/hooks/api";
+import { PkiItemType,pkiItemTypeToNameMap } from "@app/hooks/api/pkiCollections/constants";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  collectionId: string;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["deletePkiCollectionItem"]>, data?: {}) => void;
+};
+
+const PER_PAGE_INIT = 25;
+
+export const PkiCollectionItemsTable = ({ collectionId, handlePopUpOpen }: Props) => {
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(PER_PAGE_INIT);
+
+  const { data, isLoading } = useListPkiCollectionItems({
+    collectionId,
+    offset: (page - 1) * perPage,
+    limit: perPage
+  });
+
+  return (
+    <div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Resource</Th>
+              <Th>ID</Th>
+              <Th className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isLoading && <TableSkeleton columns={2} innerKey="pki-collections" />}
+            {!isLoading &&
+              data?.collectionItems.map((collectionItem) => {
+                return (
+                  <Tr className="group" key={`pki-collection-item-${collectionItem.id}`}>
+                    <Td>{pkiItemTypeToNameMap[collectionItem.type as PkiItemType]}</Td>
+                    <Td>{collectionItem.itemId}</Td>
+                    <Td>
+                      <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Delete}
+                          a={ProjectPermissionSub.PkiCollections}
+                        >
+                          {(isAllowed) => (
+                            <Tooltip content="Remove">
+                              <IconButton
+                                colorSchema="danger"
+                                ariaLabel="copy icon"
+                                variant="plain"
+                                className="group relative"
+                                isDisabled={!isAllowed}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("deletePkiCollectionItem", {
+                                    collectionId,
+                                    itemId: collectionItem.id
+                                  });
+                                }}
+                              >
+                                <FontAwesomeIcon icon={faTrash} />
+                              </IconButton>
+                            </Tooltip>
+                          )}
+                        </ProjectPermissionCan>
+                      </div>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isLoading && data?.totalCount !== undefined && data.totalCount >= PER_PAGE_INIT && (
+          <Pagination
+            count={data.totalCount}
+            page={page}
+            perPage={perPage}
+            onChangePage={(newPage) => setPage(newPage)}
+            onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+          />
+        )}
+        {!isLoading && !data?.collectionItems?.length && (
+          <EmptyState
+            title="No CAs or certificates have been added to this collection"
+            icon={faBoxesStacked}
+          />
+        )}
+      </TableContainer>
+    </div>
+  );
+};
@@ -0,0 +1,2 @@
+export { PkiCollectionDetailsSection } from "./PkiCollectionDetailsSection";
+export { PkiCollectionItemsSection } from "./PkiCollectionItemsSection";
@@ -0,0 +1 @@
+export { PkiCollectionPage } from "./PkiCollectionPage";
				`@@ -0,0 +1 @@`
				`export { PkiAlertsTab } from "./PkiAlertsTab";`
				`@@ -0,0 +1 @@`
				`export { PkiCollectionPage } from "./PkiCollectionPage";`