Add preliminary dynamically generated CRLs on fetching CA CRL

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateContent.tsx

@@ -98,7 +98,7 @@ export const CertificateContent = ({
             colorSchema="secondary"
             className="group relative ml-2"
             onClick={() => {
-              downloadTxtFile("certificate.txt", certificate);
+              downloadTxtFile("certificate.pem", certificate);
             }}
           >
             <FontAwesomeIcon icon={faDownload} />
@@ -135,7 +135,7 @@ export const CertificateContent = ({
                 colorSchema="secondary"
                 className="group relative ml-2"
                 onClick={() => {
-                  downloadTxtFile("certificate_chain.txt", certificateChain);
+                  downloadTxtFile("chain.pem", certificateChain);
                 }}
               >
                 <FontAwesomeIcon icon={faDownload} />

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateRevocationModal.tsx

@@ -0,0 +1,131 @@
+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 { useRevokeCert } from "@app/hooks/api";
+import { crlReasons } from "@app/hooks/api/certificates/constants";
+import { CrlReason } from "@app/hooks/api/certificates/enums";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+  revocationReason: z.enum([
+    CrlReason.UNSPECIFIED,
+    CrlReason.KEY_COMPROMISE,
+    CrlReason.CA_COMPROMISE,
+    CrlReason.AFFILIATION_CHANGED,
+    CrlReason.SUPERSEDED,
+    CrlReason.CESSATION_OF_OPERATION,
+    CrlReason.CERTIFICATE_HOLD,
+    CrlReason.PRIVILEGE_WITHDRAWN,
+    CrlReason.A_A_COMPROMISE
+  ])
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["revokeCertificate"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["revokeCertificate"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const CertificateRevocationModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync: revokeCertificate } = useRevokeCert();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  const onFormSubmit = async ({ revocationReason }: FormData) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      const {serialNumber} = popUp.revokeCertificate.data as { serialNumber: string };
+
+      await revokeCertificate({
+        projectSlug: currentWorkspace.slug,
+        serialNumber,
+        revocationReason
+      });
+
+      reset();
+      handlePopUpToggle("revokeCertificate", false);
+
+      createNotification({
+        text: "Successfully revoked certificate",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to revoke certificate",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.revokeCertificate?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("revokeCertificate", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Revoke Certificate">
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            name="revocationReason"
+            defaultValue={CrlReason.UNSPECIFIED}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Revocation Reason"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {crlReasons.map(({ label, value }) => (
+                    <SelectItem value={String(value || "")} key={label}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              Revoke
+            </Button>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificatesSection.tsx

@@ -5,17 +5,17 @@ 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 { useDeleteCert, useRevokeCert } from "@app/hooks/api";
+import { useDeleteCert } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { CertificateCertModal } from "./CertificateCertModal";
 import { CertificateModal } from "./CertificateModal";
+import { CertificateRevocationModal } from "./CertificateRevocationModal";
 import { CertificatesTable } from "./CertificatesTable";
 
 export const CertificatesSection = () => {
   const { currentWorkspace } = useWorkspace();
   const { mutateAsync: deleteCert } = useDeleteCert();
-  const { mutateAsync: revokeCert } = useRevokeCert();
 
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "certificate",
@@ -45,27 +45,6 @@ export const CertificatesSection = () => {
     }
   };
 
-  const onRevokeCertificateSubmit = async (serialNumber: string) => {
-    try {
-      if (!currentWorkspace?.slug) return;
-
-      await revokeCert({ serialNumber, projectSlug: currentWorkspace.slug });
-
-      await createNotification({
-        text: "Successfully revoked certificate",
-        type: "success"
-      });
-
-      handlePopUpClose("revokeCertificate");
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to revoke certificate",
-        type: "error"
-      });
-    }
-  };
-
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
@@ -90,6 +69,7 @@ export const CertificatesSection = () => {
       <CertificatesTable handlePopUpOpen={handlePopUpOpen} />
       <CertificateModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <CertificateCertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CertificateRevocationModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal
         isOpen={popUp.deleteCertificate.isOpen}
         title={`Are you sure want to remove the certificate ${
@@ -103,20 +83,6 @@ export const CertificatesSection = () => {
           )
         }
       />
-      <DeleteActionModal
-        isOpen={popUp.revokeCertificate.isOpen}
-        title={`Are you sure want to revoke the certificate ${
-          (popUp?.revokeCertificate?.data as { commonName: string })?.commonName || ""
-        } from the project?`}
-        subTitle="This action is irreversible and will add the certificate to the CRL"
-        onChange={(isOpen) => handlePopUpToggle("revokeCertificate", isOpen)}
-        deleteKey="confirm"
-        onDeleteApproved={() =>
-          onRevokeCertificateSubmit(
-            (popUp?.revokeCertificate?.data as { serialNumber: string }).serialNumber
-          )
-        }
-      />
     </div>
   );
 };