Complete preliminary docs for pki subscribers

frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx

@@ -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

@@ -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

@@ -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>