checkpoint

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";
@@ -12,6 +12,7 @@ import { CertificateCertModal } from "./CertificateCertModal";
 import { CertificateModal } from "./CertificateModal";
 import { CertificateRevocationModal } from "./CertificateRevocationModal";
 import { CertificatesTable } from "./CertificatesTable";
+import { CertificateImportModal } from "./CertificateImportModal";
 
 export const CertificatesSection = () => {
   const { currentWorkspace } = useWorkspace();
@@ -19,6 +20,7 @@ export const CertificatesSection = () => {
 
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "certificate",
+    "certificateImport",
     "certificateCert",
     "deleteCertificate",
     "revokeCertificate"
@@ -54,20 +56,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