feat: finished up integration for est config management

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

@@ -125,7 +125,9 @@ export const CaDetailsSection = ({ caId, handlePopUpOpen }: Props) => {
                     colorSchema="secondary"
                     type="submit"
                     onClick={() => {
-                      handlePopUpOpen("enrollmentOptions");
+                      handlePopUpOpen("enrollmentOptions", {
+                        caId
+                      });
                     }}
                   >
                     Enrollment Options

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

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import z from "zod";
@@ -14,6 +15,7 @@ import {
   Switch,
   TextArea
 } from "@app/components/v2";
+import { useCreateCaEstConfig, useGetCaEstConfig, useUpdateCaEstConfig } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 enum EnrollmentMethod {
@@ -28,32 +30,73 @@ type Props = {
   ) => void;
 };
 
-const schema = z
-  .object({
-    method: z.nativeEnum(EnrollmentMethod),
-    caChain: z.string(),
-    passphrase: z.string(),
-    isEnabled: z.boolean()
-  })
-  .required();
+const schema = z.object({
+  method: z.nativeEnum(EnrollmentMethod),
+  caChain: z.string(),
+  passphrase: z.string().optional(),
+  isEnabled: z.boolean()
+});
 
 export type FormData = z.infer<typeof schema>;
 
 export const CaEnrollmentModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const popUpData = popUp?.enrollmentOptions?.data as {
+    caId: string;
+  };
+  const caId = popUpData?.caId;
+
+  const { data } = useGetCaEstConfig(caId);
+
   const {
     control,
     handleSubmit,
     reset,
+    setError,
     formState: { isSubmitting }
   } = useForm<FormData>({
-    resolver: zodResolver(schema),
-    defaultValues: {
-      isEnabled: false
-    }
+    resolver: zodResolver(schema)
   });
 
+  const { mutateAsync: createCaEstConfig } = useCreateCaEstConfig();
+  const { mutateAsync: updateCaEstConfig } = useUpdateCaEstConfig();
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        caChain: data.caChain,
+        isEnabled: data.isEnabled
+      });
+    } else {
+      reset({
+        caChain: "",
+        isEnabled: false
+      });
+    }
+  }, [data]);
+
   const onFormSubmit = async ({ caChain, passphrase, isEnabled }: FormData) => {
     try {
+      if (data) {
+        await updateCaEstConfig({
+          caId,
+          caChain,
+          passphrase,
+          isEnabled
+        });
+      } else {
+        if (!passphrase) {
+          setError("passphrase", { message: "Passphrase is required to setup EST enrollment." });
+          return;
+        }
+
+        await createCaEstConfig({
+          caId,
+          caChain,
+          passphrase,
+          isEnabled
+        });
+      }
+
       handlePopUpToggle("enrollmentOptions", false);
 
       createNotification({
@@ -102,7 +145,6 @@ export const CaEnrollmentModal = ({ popUp, handlePopUpToggle }: Props) => {
           />
           <Controller
             control={control}
-            defaultValue=""
             name="caChain"
             render={({ field, fieldState: { error } }) => (
               <FormControl
@@ -117,15 +159,9 @@ export const CaEnrollmentModal = ({ popUp, handlePopUpToggle }: Props) => {
           />
           <Controller
             control={control}
-            defaultValue=""
             name="passphrase"
             render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Passphrase"
-                isError={Boolean(error)}
-                errorText={error?.message}
-                isRequired
-              >
+              <FormControl label="Passphrase" isError={Boolean(error)} errorText={error?.message}>
                 <Input {...field} type="password" />
               </FormControl>
             )}