Merge branch 'ENG-2661' into feat/acme-and-external-ca

frontend/src/hooks/api/auditLogs/constants.tsx

@@ -68,6 +68,7 @@ export const eventToNameMap: { [K in EventType]: string } = {
   [EventType.IMPORT_CA_CERT]: "Import CA certificate",
   [EventType.GET_CA_CRL]: "Get CA CRL",
   [EventType.ISSUE_CERT]: "Issue certificate",
+  [EventType.IMPORT_CERT]: "Import certificate",
   [EventType.GET_CERT]: "Get certificate",
   [EventType.DELETE_CERT]: "Delete certificate",
   [EventType.REVOKE_CERT]: "Revoke certificate",

frontend/src/hooks/api/auditLogs/enums.tsx

@@ -81,6 +81,7 @@ export enum EventType {
   IMPORT_CA_CERT = "import-certificate-authority-cert",
   GET_CA_CRL = "get-certificate-authority-crl",
   ISSUE_CERT = "issue-cert",
+  IMPORT_CERT = "import-cert",
   GET_CERT = "get-cert",
   DELETE_CERT = "delete-cert",
   REVOKE_CERT = "revoke-cert",

frontend/src/hooks/api/auditLogs/types.tsx

@@ -583,6 +583,14 @@ interface IssueCert {
     serialNumber: string;
   };
 }
+interface ImportCert {
+  type: EventType.IMPORT_CERT;
+  metadata: {
+    certId: string;
+    cn: string;
+    serialNumber: string;
+  };
+}
 
 interface GetCert {
   type: EventType.GET_CERT;
@@ -895,6 +903,7 @@ export type Event =
   | ImportCaCert
   | GetCaCrl
   | IssueCert
+  | ImportCert
   | GetCert
   | DeleteCert
   | RevokeCert

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

@@ -1,2 +1,2 @@
-export { useDeleteCert, useRevokeCert } from "./mutations";
+export { useDeleteCert, useImportCertificate, useRevokeCert } from "./mutations";
 export { useGetCert, useGetCertBody } from "./queries";

frontend/src/hooks/api/certificates/mutations.tsx

@@ -4,7 +4,13 @@ import { apiRequest } from "@app/config/request";
 
 import { pkiSubscriberKeys } from "../pkiSubscriber/queries";
 import { workspaceKeys } from "../workspace";
-import { TCertificate, TDeleteCertDTO, TRevokeCertDTO } from "./types";
+import {
+  TCertificate,
+  TDeleteCertDTO,
+  TImportCertificateDTO,
+  TImportCertificateResponse,
+  TRevokeCertDTO
+} from "./types";
 
 export const useDeleteCert = () => {
   const queryClient = useQueryClient();
@@ -49,3 +55,21 @@ export const useRevokeCert = () => {
     }
   });
 };
+
+export const useImportCertificate = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TImportCertificateResponse, object, TImportCertificateDTO>({
+    mutationFn: async (body) => {
+      const { data } = await apiRequest.post<TImportCertificateResponse>(
+        "/api/v1/pki/certificates/import-certificate",
+        body
+      );
+      return data;
+    },
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries({
+        queryKey: workspaceKeys.forWorkspaceCertificates(projectSlug)
+      });
+    }
+  });
+};

frontend/src/hooks/api/certificates/types.ts

@@ -25,3 +25,21 @@ export type TRevokeCertDTO = {
   serialNumber: string;
   revocationReason: string;
 };
+
+export type TImportCertificateDTO = {
+  projectSlug: string;
+
+  certificatePem: string;
+  privateKeyPem: string;
+  chainPem: string;
+
+  pkiCollectionId?: string;
+  friendlyName?: string;
+};
+
+export type TImportCertificateResponse = {
+  certificate: string;
+  certificateChain: string;
+  privateKey: string;
+  serialNumber: string;
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificateImportModal.tsx

@@ -0,0 +1,244 @@
+import { useState } from "react";
+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,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  TextArea
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useGetCert, useImportCertificate, useListWorkspacePkiCollections } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { CertificateContent } from "./CertificateContent";
+
+const schema = z.object({
+  certificatePem: z.string().trim().min(1, "Certificate PEM is required"),
+  privateKeyPem: z.string().trim().min(1, "Private Key PEM is required"),
+  chainPem: z.string().trim().min(1, "Certificate Chain PEM is required"),
+
+  friendlyName: z.string(),
+  collectionId: z.string().optional()
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["certificateImport"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["certificateImport"]>,
+    state?: boolean
+  ) => void;
+};
+
+type TCertificateDetails = {
+  serialNumber: string;
+  certificate: string;
+  certificateChain: string;
+  privateKey: string;
+};
+
+export const CertificateImportModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const [certificateDetails, setCertificateDetails] = useState<TCertificateDetails | null>(null);
+  const { currentWorkspace } = useWorkspace();
+  const { data: cert } = useGetCert(
+    (popUp?.certificateImport?.data as { serialNumber: string })?.serialNumber || ""
+  );
+
+  const { data } = useListWorkspacePkiCollections({
+    workspaceId: currentWorkspace?.id || ""
+  });
+
+  const { mutateAsync: importCertificate } = useImportCertificate();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  const onFormSubmit = async ({
+    certificatePem,
+    privateKeyPem,
+    chainPem,
+    friendlyName,
+    collectionId
+  }: FormData) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      const { serialNumber, certificate, certificateChain, privateKey } = await importCertificate({
+        projectSlug: currentWorkspace.slug,
+
+        certificatePem,
+        privateKeyPem,
+        chainPem,
+
+        friendlyName,
+        pkiCollectionId: collectionId
+      });
+
+      reset();
+
+      setCertificateDetails({
+        serialNumber,
+        certificate,
+        certificateChain,
+        privateKey
+      });
+
+      createNotification({
+        text: "Successfully imported certificate",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to import certificate",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.certificateImport?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("certificateImport", isOpen);
+        reset();
+        setCertificateDetails(null);
+      }}
+    >
+      <ModalContent title={`${cert ? "View" : "Import"} Certificate`}>
+        {!certificateDetails ? (
+          <form onSubmit={handleSubmit(onFormSubmit)}>
+            <Controller
+              control={control}
+              name="collectionId"
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  label="Certificate Collection"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                  isOptional
+                  className="mt-4"
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                    isDisabled={Boolean(cert)}
+                  >
+                    {(data?.collections || []).map(({ id, name }) => (
+                      <SelectItem value={id} key={`pki-collection-${id}`}>
+                        {name}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              defaultValue=""
+              name="friendlyName"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Friendly Name"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="My Certificate" isDisabled={Boolean(cert)} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              defaultValue=""
+              name="certificatePem"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Leaf Certificate PEM"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  isRequired
+                >
+                  <TextArea {...field} isDisabled={Boolean(cert)} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              defaultValue=""
+              name="privateKeyPem"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Private Key PEM"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  isRequired
+                >
+                  <TextArea {...field} isDisabled={Boolean(cert)} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              defaultValue=""
+              name="chainPem"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Certificate Chain PEM"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  isRequired
+                >
+                  <TextArea {...field} isDisabled={Boolean(cert)} />
+                </FormControl>
+              )}
+            />
+            {!cert && (
+              <div className="mt-4 flex items-center">
+                <Button
+                  className="mr-4"
+                  size="sm"
+                  type="submit"
+                  isLoading={isSubmitting}
+                  isDisabled={isSubmitting}
+                >
+                  Create
+                </Button>
+                <Button
+                  colorSchema="secondary"
+                  variant="plain"
+                  onClick={() => handlePopUpToggle("certificateImport", false)}
+                >
+                  Cancel
+                </Button>
+              </div>
+            )}
+          </form>
+        ) : (
+          <CertificateContent
+            serialNumber={certificateDetails.serialNumber}
+            certificate={certificateDetails.certificate}
+            certificateChain={certificateDetails.certificateChain}
+            privateKey={certificateDetails.privateKey}
+          />
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx

@@ -1,4 +1,4 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
@@ -13,6 +13,7 @@ import { useDeleteCert } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { CertificateCertModal } from "./CertificateCertModal";
+import { CertificateImportModal } from "./CertificateImportModal";
 import { CertificateModal } from "./CertificateModal";
 import { CertificateRevocationModal } from "./CertificateRevocationModal";
 import { CertificatesTable } from "./CertificatesTable";
@@ -23,6 +24,7 @@ export const CertificatesSection = () => {
 
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "certificate",
+    "certificateImport",
     "certificateCert",
     "deleteCertificate",
     "revokeCertificate"
@@ -58,20 +60,31 @@ export const CertificatesSection = () => {
           a={ProjectPermissionSub.Certificates}
         >
           {(isAllowed) => (
-            <Button
-              colorSchema="primary"
-              type="submit"
-              leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              onClick={() => handlePopUpOpen("certificate")}
-              isDisabled={!isAllowed}
-            >
-              Issue
-            </Button>
+            <div className="flex gap-2">
+              <Button
+                variant="outline_bg"
+                leftIcon={<FontAwesomeIcon icon={faArrowRight} />}
+                onClick={() => handlePopUpOpen("certificateImport")}
+                isDisabled={!isAllowed}
+              >
+                Import
+              </Button>
+              <Button
+                colorSchema="primary"
+                type="submit"
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() => handlePopUpOpen("certificate")}
+                isDisabled={!isAllowed}
+              >
+                Issue
+              </Button>
+            </div>
           )}
         </ProjectPermissionCan>
       </div>
       <CertificatesTable handlePopUpOpen={handlePopUpOpen} />
       <CertificateModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CertificateImportModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <CertificateCertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <CertificateRevocationModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal