Finish updating CRL impl

frontend/src/hooks/api/ca/index.tsx

@@ -1,4 +1,4 @@
-export { CaRenewalType,CaStatus, CaType } from "./enums";
+export { CaRenewalType, CaStatus, CaType } from "./enums";
 export {
   useCreateCa,
   useCreateCertificate,
@@ -6,5 +6,6 @@ export {
   useImportCaCertificate,
   useRenewCa,
   useSignIntermediate,
-  useUpdateCa} from "./mutations";
-export { useGetCaById, useGetCaCert, useGetCaCerts, useGetCaCrl, useGetCaCsr } from "./queries";
+  useUpdateCa
+} from "./mutations";
+export { useGetCaById, useGetCaCert, useGetCaCerts, useGetCaCrls,useGetCaCsr } from "./queries";

frontend/src/hooks/api/ca/queries.tsx

@@ -7,6 +7,7 @@ import { TCertificateAuthority } from "./types";
 export const caKeys = {
   getCaById: (caId: string) => [{ caId }, "ca"],
   getCaCerts: (caId: string) => [{ caId }, "ca-cert"],
+  getCaCrls: (caId: string) => [{ caId }, "ca-crls"],
   getCaCert: (caId: string) => [{ caId }, "ca-cert"],
   getCaCsr: (caId: string) => [{ caId }, "ca-csr"],
   getCaCrl: (caId: string) => [{ caId }, "ca-crl"]
@@ -73,16 +74,17 @@ export const useGetCaCsr = (caId: string) => {
   });
 };
 
-export const useGetCaCrl = (caId: string) => {
+export const useGetCaCrls = (caId: string) => {
   return useQuery({
-    queryKey: caKeys.getCaCrl(caId),
+    queryKey: caKeys.getCaCrls(caId),
     queryFn: async () => {
-      const {
-        data: { crl }
-      } = await apiRequest.get<{
-        crl: string;
-      }>(`/api/v1/pki/ca/${caId}/crl`);
-      return crl;
+      const { data } = await apiRequest.get<
+        {
+          id: string;
+          crl: string;
+        }[]
+      >(`/api/v1/pki/ca/${caId}/crls`);
+      return data;
     },
     enabled: Boolean(caId)
   });

frontend/src/views/Project/CaPage/CaPage.tsx

@@ -22,8 +22,12 @@ import { usePopUp } from "@app/hooks/usePopUp";
 import { CaModal } from "@app/views/Project/CertificatesPage/components/CaTab/components/CaModal";
 
 import { CaInstallCertModal } from "../CertificatesPage/components/CaTab/components/CaInstallCertModal";
-import { TabSections } from "../Types";
-import { CaCertificatesSection, CaDetailsSection, CaRenewalModal } from "./components";
+import {
+  CaCertificatesSection,
+  CaCrlsSection,
+  CaDetailsSection,
+  CaRenewalModal
+} from "./components";
 
 export const CaPage = withProjectPermission(
   () => {
@@ -119,7 +123,10 @@ export const CaPage = withProjectPermission(
               <div className="mr-4 w-96">
                 <CaDetailsSection caId={caId} handlePopUpOpen={handlePopUpOpen} />
               </div>
-              <CaCertificatesSection caId={caId} />
+              <div className="w-full">
+                <CaCertificatesSection caId={caId} />
+                <CaCrlsSection caId={caId} />
+              </div>
             </div>
           </div>
         )}

frontend/src/views/Project/CaPage/components/CaCrlsSection/CaCrlsSection.tsx

@@ -0,0 +1,20 @@
+import { CaCrlsTable } from "./CaCrlsTable";
+
+type Props = {
+  caId: string;
+};
+
+export const CaCrlsSection = ({ caId }: Props) => {
+  return (
+    <div className="mt-4 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">
+          CA Certificate Revocation Lists (CRLs)
+        </h3>
+      </div>
+      <div className="py-4">
+        <CaCrlsTable caId={caId} />
+      </div>
+    </div>
+  );
+};

frontend/src/views/Project/CaPage/components/CaCrlsSection/CaCrlsTable.tsx

@@ -0,0 +1,88 @@
+import { faCertificate, faFileDownload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+// import * as x509 from "@peculiar/x509";
+// import { format } from "date-fns";
+import FileSaver from "file-saver";
+
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { useGetCaCrls } from "@app/hooks/api";
+
+type Props = {
+  caId: string;
+};
+
+export const CaCrlsTable = ({ caId }: Props) => {
+  const { data: caCrls, isLoading } = useGetCaCrls(caId);
+
+  const downloadTxtFile = (filename: string, content: string) => {
+    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+    FileSaver.saveAs(blob, filename);
+  };
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Distribution Point URL</Th>
+            {/* <Th>This Update</Th> */}
+            {/* <Th>Next Update</Th> */}
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isLoading && <TableSkeleton columns={4} innerKey="ca-certificates" />}
+          {!isLoading &&
+            caCrls?.map(({ id, crl }) => {
+              //   const caCrlObj = new x509.X509Crl(crl);
+              return (
+                <Tr key={`ca-crl-${id}`}>
+                  <Td>
+                    <div className="flex items-center">
+                      {`${window.origin}/api/v1/pki/crl/${id}`}
+                    </div>
+                  </Td>
+                  {/* <Td>{format(new Date(caCrlObj.thisUpdate), "yyyy-MM-dd")}</Td> */}
+                  {/* <Td>
+                    {caCrlObj.nextUpdate
+                      ? format(new Date(caCrlObj.nextUpdate), "yyyy-MM-dd")
+                      : "-"}
+                  </Td> */}
+                  <Td>
+                    <Tooltip content="Download CRL">
+                      <IconButton
+                        ariaLabel="copy icon"
+                        variant="plain"
+                        className="group relative"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          downloadTxtFile("crl.pem", crl);
+                        }}
+                      >
+                        <FontAwesomeIcon icon={faFileDownload} />
+                      </IconButton>
+                    </Tooltip>
+                  </Td>
+                </Tr>
+              );
+            })}
+        </TBody>
+      </Table>
+      {!isLoading && !caCrls?.length && (
+        <EmptyState title="This CA does not have any CRLs" icon={faCertificate} />
+      )}
+    </TableContainer>
+  );
+};

frontend/src/views/Project/CaPage/components/CaCrlsSection/index.tsx

@@ -0,0 +1 @@
+export { CaCrlsSection } from "./CaCrlsSection";

frontend/src/views/Project/CaPage/components/index.tsx

@@ -1,3 +1,4 @@
 export { CaCertificatesSection } from "./CaCertificatesSection/CaCertificatesSection";
+export { CaCrlsSection } from "./CaCrlsSection";
 export { CaDetailsSection } from "./CaDetailsSection";
 export { CaRenewalModal } from "./CaRenewalModal";

frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaCrlModal.tsx

@@ -1,106 +0,0 @@
-import { useEffect } from "react";
-import { faCheck, faCopy, faDownload } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { IconButton, Modal, ModalContent } from "@app/components/v2";
-import { useToggle } from "@app/hooks";
-import { useGetCaCrl } from "@app/hooks/api";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-type Props = {
-  popUp: UsePopUpState<["caCrl"]>;
-  handlePopUpToggle: (popUpName: keyof UsePopUpState<["caCrl"]>, state?: boolean) => void;
-};
-
-export const CaCrlModal = ({ popUp, handlePopUpToggle }: Props) => {
-  const [isCrlCopied, setIsCrlCopied] = useToggle(false);
-  const { data: crl } = useGetCaCrl((popUp?.caCrl?.data as { caId: string })?.caId || "");
-
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-    if (isCrlCopied) {
-      timer = setTimeout(() => setIsCrlCopied.off(), 2000);
-    }
-
-    return () => clearTimeout(timer);
-  }, [isCrlCopied]);
-
-  const downloadTxtFile = (filename: string, content: string) => {
-    const blob = new Blob([content], { type: "text/plain" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = filename;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-
-  return (
-    <Modal
-      isOpen={popUp?.caCrl?.isOpen}
-      onOpenChange={(isOpen) => {
-        handlePopUpToggle("caCrl", isOpen);
-      }}
-    >
-      <ModalContent title="CA Certificate Revocation List (CRL)">
-        <div>
-          {crl && (
-            <>
-              {/* <div className="mb-4 flex items-center justify-between">
-                <h2>Manual CRL Rotation</h2>
-                <Button
-                  // isLoading={isLoading}
-                  // isDisabled={!isAllowed}
-                  colorSchema="primary"
-                  variant="outline_bg"
-                  type="submit"
-                  // onClick={() => handleAssignment(username, !isPartOfGroup)}
-                  onClick={() => {}}
-                >
-                  Rotate
-                </Button>
-              </div> */}
-              <div className="mb-4 flex items-center justify-between">
-                <h2>Certificate Revocation List</h2>
-                <div className="flex">
-                  <IconButton
-                    ariaLabel="copy icon"
-                    colorSchema="secondary"
-                    className="group relative"
-                    onClick={() => {
-                      navigator.clipboard.writeText(crl);
-                      setIsCrlCopied.on();
-                    }}
-                  >
-                    <FontAwesomeIcon icon={isCrlCopied ? faCheck : faCopy} />
-                    <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                      Copy
-                    </span>
-                  </IconButton>
-                  <IconButton
-                    ariaLabel="copy icon"
-                    colorSchema="secondary"
-                    className="group relative ml-2"
-                    onClick={() => {
-                      downloadTxtFile("crl.pem", crl);
-                    }}
-                  >
-                    <FontAwesomeIcon icon={faDownload} />
-                    <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                      Download
-                    </span>
-                  </IconButton>
-                </div>
-              </div>
-              <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-                <p className="mr-4 whitespace-pre-wrap break-all">{crl}</p>
-              </div>
-            </>
-          )}
-        </div>
-      </ModalContent>
-    </Modal>
-  );
-};

frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaSection.tsx

@@ -9,7 +9,6 @@ import { CaStatus, useDeleteCa, useUpdateCa } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { CaCertModal } from "./CaCertModal";
-import { CaCrlModal } from "./CaCrlModal";
 import { CaInstallCertModal } from "./CaInstallCertModal";
 import { CaModal } from "./CaModal";
 import { CaTable } from "./CaTable";
@@ -25,7 +24,6 @@ export const CaSection = () => {
     "installCaCert",
     "deleteCa",
     "caStatus", // enable / disable
-    "caCrl", // enable / disable
     "upgradePlan"
   ] as const);
 
@@ -95,7 +93,6 @@ export const CaSection = () => {
       <CaModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <CaInstallCertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <CaCertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-      <CaCrlModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <CaTable handlePopUpOpen={handlePopUpOpen} />
       <DeleteActionModal
         isOpen={popUp.deleteCa.isOpen}

frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaTable.tsx

@@ -4,7 +4,6 @@ import {
   faCertificate,
   faEllipsis,
   faEye,
-  faFile,
   faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -29,12 +28,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
-import {
-  ProjectPermissionActions,
-  ProjectPermissionSub,
-  useSubscription,
-  useWorkspace
-} from "@app/context";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { CaStatus, useListWorkspaceCas } from "@app/hooks/api";
 import {
   caStatusToNameMap,
@@ -46,7 +40,7 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 type Props = {
   handlePopUpOpen: (
     popUpName: keyof UsePopUpState<
-      ["installCaCert", "caCert", "ca", "deleteCa", "caStatus", "caCrl", "upgradePlan"]
+      ["installCaCert", "caCert", "ca", "deleteCa", "caStatus", "upgradePlan"]
     >,
     data?: {
       caId?: string;
@@ -59,7 +53,6 @@ type Props = {
 
 export const CaTable = ({ handlePopUpOpen }: Props) => {
   const router = useRouter();
-  const { subscription } = useSubscription();
   const { currentWorkspace } = useWorkspace();
   const { data, isLoading } = useListWorkspaceCas({
     projectSlug: currentWorkspace?.slug ?? ""
@@ -162,38 +155,6 @@ export const CaTable = ({ handlePopUpOpen }: Props) => {
                               )}
                             </ProjectPermissionCan>
                           )}
-                          {ca.status !== CaStatus.PENDING_CERTIFICATE && (
-                            <ProjectPermissionCan
-                              I={ProjectPermissionActions.Read}
-                              a={ProjectPermissionSub.CertificateAuthorities}
-                            >
-                              {(isAllowed) => (
-                                <DropdownMenuItem
-                                  className={twMerge(
-                                    !isAllowed &&
-                                      "pointer-events-none cursor-not-allowed opacity-50"
-                                  )}
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    if (!subscription?.caCrl) {
-                                      handlePopUpOpen("upgradePlan", {
-                                        description:
-                                          "You can use the certificate revocation list (CRL) feature if you upgrade your Infisical plan."
-                                      });
-                                    } else {
-                                      handlePopUpOpen("caCrl", {
-                                        caId: ca.id
-                                      });
-                                    }
-                                  }}
-                                  disabled={!isAllowed}
-                                  icon={<FontAwesomeIcon icon={faFile} />}
-                                >
-                                  View CRL
-                                </DropdownMenuItem>
-                              )}
-                            </ProjectPermissionCan>
-                          )}
                           <ProjectPermissionCan
                             I={ProjectPermissionActions.Read}
                             a={ProjectPermissionSub.CertificateAuthorities}

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

@@ -32,6 +32,7 @@ import {
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useListWorkspaceCertificates } from "@app/hooks/api";
+import { CertStatus } from "@app/hooks/api/certificates/enums";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { getCertValidUntilBadgeDetails } from "./CertificatesTable.utils";
@@ -82,9 +83,11 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
                 <Tr className="h-10" key={`certificate-${certificate.id}`}>
                   <Td>{certificate.friendlyName}</Td>
                   <Td>
-                    <Badge className="" variant={variant}>
-                      {label}
-                    </Badge>
+                    {certificate.status === CertStatus.REVOKED ? (
+                      <Badge variant="danger">Revoked</Badge>
+                    ) : (
+                      <Badge variant={variant}>{label}</Badge>
+                    )}
                   </Td>
                   <Td>
                     {certificate.notBefore