misc: updated est configuration to be binded to certificate template

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

@@ -15,7 +15,7 @@ import {
   Switch,
   TextArea
 } from "@app/components/v2";
-import { useCreateCaEstConfig, useGetCaEstConfig, useUpdateCaEstConfig } from "@app/hooks/api";
+import { useCreateEstConfig, useGetEstConfig, useUpdateEstConfig } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 enum EnrollmentMethod {
@@ -39,13 +39,13 @@ const schema = z.object({
 
 export type FormData = z.infer<typeof schema>;
 
-export const CaEnrollmentModal = ({ popUp, handlePopUpToggle }: Props) => {
+export const CertificateTemplateEnrollmentModal = ({ popUp, handlePopUpToggle }: Props) => {
   const popUpData = popUp?.enrollmentOptions?.data as {
-    caId: string;
+    id: string;
   };
-  const caId = popUpData?.caId;
+  const certificateTemplateId = popUpData?.id;
 
-  const { data } = useGetCaEstConfig(caId);
+  const { data } = useGetEstConfig(certificateTemplateId);
 
   const {
     control,
@@ -57,8 +57,8 @@ export const CaEnrollmentModal = ({ popUp, handlePopUpToggle }: Props) => {
     resolver: zodResolver(schema)
   });
 
-  const { mutateAsync: createCaEstConfig } = useCreateCaEstConfig();
-  const { mutateAsync: updateCaEstConfig } = useUpdateCaEstConfig();
+  const { mutateAsync: createEstConfig } = useCreateEstConfig();
+  const { mutateAsync: updateEstConfig } = useUpdateEstConfig();
 
   useEffect(() => {
     if (data) {
@@ -77,8 +77,8 @@ export const CaEnrollmentModal = ({ popUp, handlePopUpToggle }: Props) => {
   const onFormSubmit = async ({ caChain, passphrase, isEnabled }: FormData) => {
     try {
       if (data) {
-        await updateCaEstConfig({
-          caId,
+        await updateEstConfig({
+          certificateTemplateId,
           caChain,
           passphrase,
           isEnabled
@@ -89,8 +89,8 @@ export const CaEnrollmentModal = ({ popUp, handlePopUpToggle }: Props) => {
           return;
         }
 
-        await createCaEstConfig({
-          caId,
+        await createEstConfig({
+          certificateTemplateId,
           caChain,
           passphrase,
           isEnabled

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

@@ -8,13 +8,15 @@ import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@a
 import { usePopUp } from "@app/hooks";
 import { useDeleteCertTemplate } from "@app/hooks/api";
 
+import { CertificateTemplateEnrollmentModal } from "./CertificateTemplateEnrollmentModal";
 import { CertificateTemplateModal } from "./CertificateTemplateModal";
 import { CertificateTemplatesTable } from "./CertificateTemplatesTable";
 
 export const CertificateTemplatesSection = () => {
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "certificateTemplate",
-    "deleteCertificateTemplate"
+    "deleteCertificateTemplate",
+    "enrollmentOptions"
   ] as const);
 
   const { currentWorkspace } = useWorkspace();
@@ -69,6 +71,7 @@ export const CertificateTemplatesSection = () => {
       </div>
       <CertificateTemplatesTable handlePopUpOpen={handlePopUpOpen} />
       <CertificateTemplateModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CertificateTemplateEnrollmentModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal
         isOpen={popUp.deleteCertificateTemplate.isOpen}
         title={`Are you sure want to delete the certificate template ${

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

@@ -1,4 +1,4 @@
-import { faEllipsis, faFileAlt, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis, faFileAlt, faTrash, faUserPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
@@ -25,7 +25,9 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
   handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["certificateTemplate", "deleteCertificateTemplate"]>,
+    popUpName: keyof UsePopUpState<
+      ["certificateTemplate", "deleteCertificateTemplate", "enrollmentOptions"]
+    >,
     data?: {
       id?: string;
       name?: string;
@@ -78,6 +80,16 @@ export const CertificateTemplatesTable = ({ handlePopUpOpen }: Props) => {
                           >
                             Manage Policies
                           </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={() =>
+                              handlePopUpOpen("enrollmentOptions", {
+                                id: certificateTemplate.id
+                              })
+                            }
+                            icon={<FontAwesomeIcon icon={faUserPlus} />}
+                          >
+                            Manage Enrollment
+                          </DropdownMenuItem>
                           <ProjectPermissionCan
                             I={ProjectPermissionActions.Delete}
                             a={ProjectPermissionSub.CertificateTemplates}