Merge remote-tracking branch 'origin' into daniel/permission-visualization

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityOidcAuthForm.tsx

@@ -1,12 +1,13 @@
 import { useEffect } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, IconButton, Input, TextArea } from "@app/components/v2";
+import { Button, FormControl, IconButton, Input, TextArea, Tooltip } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import { useAddIdentityOidcAuth, useUpdateIdentityOidcAuth } from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
@@ -258,7 +259,19 @@ export const IdentityOidcAuthForm = ({
         control={control}
         name="boundSubject"
         render={({ field, fieldState: { error } }) => (
-          <FormControl label="Subject" isError={Boolean(error)} errorText={error?.message}>
+          <FormControl
+            label="Subject"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            icon={
+              <Tooltip
+                className="text-center"
+                content={<span>This field supports glob patterns</span>}
+              >
+                <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+              </Tooltip>
+            }
+          >
             <Input {...field} type="text" />
           </FormControl>
         )}
@@ -267,7 +280,19 @@ export const IdentityOidcAuthForm = ({
         control={control}
         name="boundAudiences"
         render={({ field, fieldState: { error } }) => (
-          <FormControl label="Audiences" isError={Boolean(error)} errorText={error?.message}>
+          <FormControl
+            label="Audiences"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            icon={
+              <Tooltip
+                className="text-center"
+                content={<span>This field supports glob patterns</span>}
+              >
+                <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+              </Tooltip>
+            }
+          >
             <Input {...field} type="text" placeholder="service1, service2" />
           </FormControl>
         )}
@@ -282,6 +307,16 @@ export const IdentityOidcAuthForm = ({
                 <FormControl
                   className="mb-0 flex-grow"
                   label={index === 0 ? "Claims" : undefined}
+                  icon={
+                    index === 0 ? (
+                      <Tooltip
+                        className="text-center"
+                        content={<span>This field supports glob patterns</span>}
+                      >
+                        <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                      </Tooltip>
+                    ) : undefined
+                  }
                   isError={Boolean(error)}
                   errorText={error?.message}
                 >

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

@@ -22,6 +22,7 @@ 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 { CertificateTemplatesSection } from "../CertificatesPage/components/CertificatesTab/components/CertificateTemplatesSection";
 import {
   CaCertificatesSection,
   CaCrlsSection,
@@ -125,6 +126,7 @@ export const CaPage = withProjectPermission(
               </div>
               <div className="w-full">
                 <CaCertificatesSection caId={caId} />
+                <CertificateTemplatesSection caId={caId} />
                 <CaCrlsSection caId={caId} />
               </div>
             </div>

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

@@ -1,4 +1,4 @@
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCopy, faPencil } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
@@ -33,6 +33,28 @@ export const CaDetailsSection = ({ caId, handlePopUpOpen }: Props) => {
     <div className="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 Details</h3>
+        <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Identity}>
+          {(isAllowed) => {
+            return (
+              <Tooltip content="Edit CA">
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePopUpOpen("ca", {
+                      caId: ca.id
+                    });
+                  }}
+                >
+                  <FontAwesomeIcon icon={faPencil} />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </ProjectPermissionCan>
       </div>
       <div className="pt-4">
         <div className="mb-4">
@@ -115,6 +137,12 @@ export const CaDetailsSection = ({ caId, handlePopUpOpen }: Props) => {
             {ca.notAfter ? format(new Date(ca.notAfter), "yyyy-MM-dd") : "-"}
           </p>
         </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Template Issuance Required</p>
+          <p className="text-sm text-mineshaft-300">
+            {ca.requireTemplateForIssuance ? "True" : "False"}
+          </p>
+        </div>
         {ca.status === CaStatus.ACTIVE && (
           <ProjectPermissionCan
             I={ProjectPermissionActions.Edit}

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

@@ -12,11 +12,12 @@ import {
   Modal,
   ModalContent,
   Select,
-  SelectItem
+  SelectItem,
+  Switch
   // DatePicker
 } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
-import { CaType, useCreateCa, useGetCaById } from "@app/hooks/api/ca";
+import { CaType, useCreateCa, useGetCaById,useUpdateCa } from "@app/hooks/api/ca";
 import { certKeyAlgorithms } from "@app/hooks/api/certificates/constants";
 import { CertKeyAlgorithm } from "@app/hooks/api/certificates/enums";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -49,7 +50,8 @@ const schema = z
       CertKeyAlgorithm.RSA_4096,
       CertKeyAlgorithm.ECDSA_P256,
       CertKeyAlgorithm.ECDSA_P384
-    ])
+    ]),
+    requireTemplateForIssuance: z.boolean()
   })
   .required();
 
@@ -70,7 +72,9 @@ export const CaModal = ({ popUp, handlePopUpToggle }: Props) => {
   // const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
 
   const { data: ca } = useGetCaById((popUp?.ca?.data as { caId: string })?.caId || "");
+  
   const { mutateAsync: createMutateAsync } = useCreateCa();
+  const { mutateAsync: updateMutateAsync } = useUpdateCa();
 
   const {
     control,
@@ -110,7 +114,8 @@ export const CaModal = ({ popUp, handlePopUpToggle }: Props) => {
         commonName: ca.commonName,
         notAfter: ca.notAfter ? format(new Date(ca.notAfter), "yyyy-MM-dd") : "",
         maxPathLength: ca.maxPathLength ? String(ca.maxPathLength) : "",
-        keyAlgorithm: ca.keyAlgorithm
+        keyAlgorithm: ca.keyAlgorithm,
+        requireTemplateForIssuance: ca.requireTemplateForIssuance
       });
     } else {
       reset({
@@ -124,7 +129,8 @@ export const CaModal = ({ popUp, handlePopUpToggle }: Props) => {
         commonName: "",
         notAfter: getDateTenYearsFromToday(),
         maxPathLength: "-1",
-        keyAlgorithm: CertKeyAlgorithm.RSA_2048
+        keyAlgorithm: CertKeyAlgorithm.RSA_2048,
+        requireTemplateForIssuance: true
       });
     }
   }, [ca]);
@@ -140,31 +146,43 @@ export const CaModal = ({ popUp, handlePopUpToggle }: Props) => {
     province,
     notAfter,
     maxPathLength,
-    keyAlgorithm
+    keyAlgorithm,
+    requireTemplateForIssuance
   }: FormData) => {
     try {
       if (!currentWorkspace?.slug) return;
-
-      await createMutateAsync({
-        projectSlug: currentWorkspace.slug,
-        type,
-        friendlyName,
-        commonName,
-        organization,
-        ou,
-        country,
-        province,
-        locality,
-        notAfter,
-        maxPathLength: Number(maxPathLength),
-        keyAlgorithm
-      });
+      
+      if (ca) {
+        // update
+        await updateMutateAsync({
+          projectSlug: currentWorkspace.slug,
+          caId: ca.id,
+          requireTemplateForIssuance
+        });
+      } else {
+        // create
+        await createMutateAsync({
+          projectSlug: currentWorkspace.slug,
+          type,
+          friendlyName,
+          commonName,
+          organization,
+          ou,
+          country,
+          province,
+          locality,
+          notAfter,
+          maxPathLength: Number(maxPathLength),
+          keyAlgorithm,
+          requireTemplateForIssuance
+        });
+      }
 
       reset();
       handlePopUpToggle("ca", false);
 
       createNotification({
-        text: "Successfully created CA",
+        text: `Successfully ${ca ? "updated" : "created"} CA`,
         type: "success"
       });
     } catch (err) {
@@ -186,6 +204,11 @@ export const CaModal = ({ popUp, handlePopUpToggle }: Props) => {
     >
       <ModalContent title={`${ca ? "View" : "Create"} Private CA`}>
         <form onSubmit={handleSubmit(onFormSubmit)}>
+          {ca && (
+            <FormControl label="CA ID">
+              <Input value={ca.id} isDisabled className="bg-white/[0.07]" />
+            </FormControl>
+          )}
           <Controller
             control={control}
             name="type"
@@ -406,26 +429,41 @@ export const CaModal = ({ popUp, handlePopUpToggle }: Props) => {
               </FormControl>
             )}
           />
-          {!ca && (
-            <div className="flex items-center">
-              <Button
-                className="mr-4"
-                size="sm"
-                type="submit"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-              >
-                {popUp?.ca?.data ? "Update" : "Create"}
-              </Button>
-              <Button
-                colorSchema="secondary"
-                variant="plain"
-                onClick={() => handlePopUpToggle("ca", false)}
-              >
-                Cancel
-              </Button>
-            </div>
-          )}
+          <Controller
+            control={control}
+            name="requireTemplateForIssuance"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl isError={Boolean(error)} errorText={error?.message} className="my-8">
+                  <Switch
+                    id="is-active"
+                    onCheckedChange={(value) => field.onChange(value)}
+                    isChecked={field.value}
+                  >
+                    <p className="w-full">Require Template for Certificate Issuance</p>
+                  </Switch>
+                </FormControl>
+              );
+            }}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              {popUp?.ca?.data ? "Update" : "Create"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("ca", false)}
+            >
+              Cancel
+            </Button>
+          </div>
         </form>
       </ModalContent>
     </Modal>

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

@@ -3,7 +3,6 @@ import {
   faBan,
   faCertificate,
   faEllipsis,
-  faEye,
   faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -155,28 +154,6 @@ export const CaTable = ({ handlePopUpOpen }: Props) => {
                               )}
                             </ProjectPermissionCan>
                           )}
-                          <ProjectPermissionCan
-                            I={ProjectPermissionActions.Read}
-                            a={ProjectPermissionSub.CertificateAuthorities}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handlePopUpOpen("ca", {
-                                    caId: ca.id
-                                  });
-                                }}
-                                disabled={!isAllowed}
-                                icon={<FontAwesomeIcon icon={faEye} />}
-                              >
-                                View CA
-                              </DropdownMenuItem>
-                            )}
-                          </ProjectPermissionCan>
                           {(ca.status === CaStatus.ACTIVE || ca.status === CaStatus.DISABLED) && (
                             <ProjectPermissionCan
                               I={ProjectPermissionActions.Edit}

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

@@ -1,7 +1,7 @@
 import { motion } from "framer-motion";
 
 import { PkiCollectionSection } from "../PkiAlertsTab/components";
-import { CertificateTemplatesSection } from "./components/CertificateTemplatesSection";
+// import { CertificateTemplatesSection } from "./components/CertificateTemplatesSection";
 import { CertificatesSection } from "./components";
 
 export const CertificatesTab = () => {
@@ -14,7 +14,7 @@ export const CertificatesTab = () => {
       exit={{ opacity: 0, translateX: 30 }}
     >
       <PkiCollectionSection />
-      <CertificateTemplatesSection />
+      {/* <CertificateTemplatesSection /> */}
       <CertificatesSection />
     </motion.div>
   );

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

@@ -218,7 +218,6 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
                   }
                   errorText={error?.message}
                   isError={Boolean(error)}
-                  className="mt-4"
                   isRequired
                 >
                   <Select

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

@@ -21,11 +21,11 @@ import { useWorkspace } from "@app/context";
 import {
   CaStatus,
   useCreateCertTemplate,
+  useGetCaById,
   useGetCertTemplate,
   useListWorkspaceCas,
   useListWorkspacePkiCollections,
-  useUpdateCertTemplate
-} from "@app/hooks/api";
+  useUpdateCertTemplate} from "@app/hooks/api";
 import { caTypeToNameMap } from "@app/hooks/api/ca/constants";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -51,6 +51,7 @@ const schema = z.object({
 export type FormData = z.infer<typeof schema>;
 
 type Props = {
+  caId: string;
   popUp: UsePopUpState<["certificateTemplate"]>;
   handlePopUpToggle: (
     popUpName: keyof UsePopUpState<["certificateTemplate"]>,
@@ -58,8 +59,11 @@ type Props = {
   ) => void;
 };
 
-export const CertificateTemplateModal = ({ popUp, handlePopUpToggle }: Props) => {
+export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Props) => {
   const { currentWorkspace } = useWorkspace();
+  
+  const { data: ca } = useGetCaById(caId);
+  
   const { data: certTemplate } = useGetCertTemplate(
     (popUp?.certificateTemplate?.data as { id: string })?.id || ""
   );
@@ -97,16 +101,15 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle }: Props) =>
       });
     } else {
       reset({
-        caId: "",
+        caId,
         name: "",
         commonName: "",
         ttl: ""
       });
     }
-  }, [certTemplate]);
+  }, [certTemplate, ca]);
 
   const onFormSubmit = async ({
-    caId,
     collectionId,
     name,
     commonName,
@@ -172,6 +175,11 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle }: Props) =>
     >
       <ModalContent title={certTemplate ? "Certificate Template" : "Create Certificate Template"}>
         <form onSubmit={handleSubmit(onFormSubmit)}>
+          {certTemplate && (
+            <FormControl label="Certificate Template ID">
+              <Input value={certTemplate.id} isDisabled className="bg-white/[0.07]" />
+            </FormControl>
+          )}
           <Controller
             control={control}
             defaultValue=""
@@ -190,7 +198,7 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle }: Props) =>
           <Controller
             control={control}
             name="caId"
-            defaultValue=""
+            defaultValue={caId}
             render={({ field: { onChange, ...field }, fieldState: { error } }) => (
               <FormControl
                 label="Issuing CA"
@@ -204,6 +212,7 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle }: Props) =>
                   {...field}
                   onValueChange={(e) => onChange(e)}
                   className="w-full"
+                  isDisabled
                 >
                   {(cas || []).map(({ id, type, dn }) => (
                     <SelectItem value={id} key={`ca-${id}`}>

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

@@ -1,9 +1,13 @@
+/**
+ * TODO (dangtony98): Reevaluate if this component should be in main
+ * CertificateTab or under CA page in the future.
+ */
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, DeleteActionModal, UpgradePlanModal } from "@app/components/v2";
+import { DeleteActionModal, IconButton, UpgradePlanModal } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useDeleteCertTemplate } from "@app/hooks/api";
@@ -12,7 +16,11 @@ import { CertificateTemplateEnrollmentModal } from "./CertificateTemplateEnrollm
 import { CertificateTemplateModal } from "./CertificateTemplateModal";
 import { CertificateTemplatesTable } from "./CertificateTemplatesTable";
 
-export const CertificateTemplatesSection = () => {
+type Props = {
+  caId: string;
+}
+
+export const CertificateTemplatesSection = ({ caId }: Props) => {
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "certificateTemplate",
     "deleteCertificateTemplate",
@@ -50,28 +58,30 @@ export const CertificateTemplatesSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex justify-between">
-        <p className="text-xl font-semibold text-mineshaft-100">Certificate Templates</p>
+    <div className="mt-4 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">Certificate Templates</h3>
         <ProjectPermissionCan
           I={ProjectPermissionActions.Create}
           a={ProjectPermissionSub.CertificateTemplates}
         >
           {(isAllowed) => (
-            <Button
-              colorSchema="primary"
-              type="submit"
-              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+            <IconButton
+              ariaLabel="copy icon"
+              variant="plain"
+              className="group relative"
               onClick={() => handlePopUpOpen("certificateTemplate")}
               isDisabled={!isAllowed}
             >
-              Create
-            </Button>
+              <FontAwesomeIcon icon={faPlus} />
+            </IconButton>
           )}
         </ProjectPermissionCan>
       </div>
-      <CertificateTemplatesTable handlePopUpOpen={handlePopUpOpen} />
-      <CertificateTemplateModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <div className="py-4">
+        <CertificateTemplatesTable handlePopUpOpen={handlePopUpOpen} caId={caId} />
+      </div>
+      <CertificateTemplateModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} caId={caId} />
       <CertificateTemplateEnrollmentModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal
         isOpen={popUp.deleteCertificateTemplate.isOpen}

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

@@ -23,12 +23,15 @@ import {
   ProjectPermissionActions,
   ProjectPermissionSub,
   useSubscription,
-  useWorkspace
 } from "@app/context";
-import { useListWorkspaceCertificateTemplates } from "@app/hooks/api";
+import { 
+  // useListWorkspaceCertificateTemplates, 
+  useGetCaCertTemplates 
+} from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
+  caId: string;
   handlePopUpOpen: (
     popUpName: keyof UsePopUpState<
       ["certificateTemplate", "deleteCertificateTemplate", "enrollmentOptions", "upgradePlan"]
@@ -40,12 +43,10 @@ type Props = {
   ) => void;
 };
 
-export const CertificateTemplatesTable = ({ handlePopUpOpen }: Props) => {
-  const { currentWorkspace } = useWorkspace();
+export const CertificateTemplatesTable = ({ handlePopUpOpen, caId }: Props) => {
   const { subscription } = useSubscription();
-  const { data, isLoading } = useListWorkspaceCertificateTemplates({
-    workspaceId: currentWorkspace?.id ?? ""
-  });
+  
+  const { data, isLoading } = useGetCaCertTemplates(caId);
 
   return (
     <div>
@@ -54,7 +55,6 @@ export const CertificateTemplatesTable = ({ handlePopUpOpen }: Props) => {
           <THead>
             <Tr>
               <Th>Name</Th>
-              <Th>Certificate Authority</Th>
               <Th />
             </Tr>
           </THead>
@@ -65,13 +65,12 @@ export const CertificateTemplatesTable = ({ handlePopUpOpen }: Props) => {
                 return (
                   <Tr className="h-10" key={`certificate-${certificateTemplate.id}`}>
                     <Td>{certificateTemplate.name}</Td>
-                    <Td>{certificateTemplate.caName}</Td>
                     <Td className="flex justify-end">
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild className="rounded-lg">
                           <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
                             <Tooltip content="More options">
-                              <FontAwesomeIcon size="lg" icon={faEllipsis} />
+                              <FontAwesomeIcon size="sm" icon={faEllipsis} />
                             </Tooltip>
                           </div>
                         </DropdownMenuTrigger>
@@ -143,7 +142,7 @@ export const CertificateTemplatesTable = ({ handlePopUpOpen }: Props) => {
           </TBody>
         </Table>
         {!isLoading && !data?.certificateTemplates?.length && (
-          <EmptyState title="No certificate templates have been created" icon={faFileAlt} />
+          <EmptyState title="No certificate templates have been created for this CA" icon={faFileAlt} />
         )}
       </TableContainer>
     </div>

frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { DiRedis } from "react-icons/di";
-import { SiApachecassandra, SiElasticsearch, SiMongodb } from "react-icons/si";
+import { SiApachecassandra, SiElasticsearch, SiMongodb, SiRabbitmq } from "react-icons/si";
 import { faAws } from "@fortawesome/free-brands-svg-icons";
 import { faDatabase } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -14,6 +14,8 @@ import { AwsIamInputForm } from "./AwsIamInputForm";
 import { CassandraInputForm } from "./CassandraInputForm";
 import { ElasticSearchInputForm } from "./ElasticSearchInputForm";
 import { MongoAtlasInputForm } from "./MongoAtlasInputForm";
+import { MongoDBDatabaseInputForm } from "./MongoDBInputForm";
+import { RabbitMqInputForm } from "./RabbitMqInputForm";
 import { RedisInputForm } from "./RedisInputForm";
 import { SqlDatabaseInputForm } from "./SqlDatabaseInputForm";
 
@@ -61,10 +63,20 @@ const DYNAMIC_SECRET_LIST = [
     provider: DynamicSecretProviders.MongoAtlas,
     title: "Mongo Atlas"
   },
+  {
+    icon: <SiMongodb size="2rem" />,
+    provider: DynamicSecretProviders.MongoDB,
+    title: "Mongo DB"
+  },
   {
     icon: <SiElasticsearch size="2rem" />,
     provider: DynamicSecretProviders.ElasticSearch,
     title: "Elastic Search"
+  },
+  {
+    icon: <SiRabbitmq size="1.5rem" />,
+    provider: DynamicSecretProviders.RabbitMq,
+    title: "RabbitMQ"
   }
 ];
 
@@ -252,6 +264,42 @@ export const CreateDynamicSecretForm = ({
                 />
               </motion.div>
             )}
+          {wizardStep === WizardSteps.ProviderInputs &&
+            selectedProvider === DynamicSecretProviders.MongoDB && (
+              <motion.div
+                key="dynamic-mongodb-step"
+                transition={{ duration: 0.1 }}
+                initial={{ opacity: 0, translateX: 30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+                exit={{ opacity: 0, translateX: -30 }}
+              >
+                <MongoDBDatabaseInputForm
+                  onCompleted={handleFormReset}
+                  onCancel={handleFormReset}
+                  projectSlug={projectSlug}
+                  secretPath={secretPath}
+                  environment={environment}
+                />
+              </motion.div>
+            )}
+          {wizardStep === WizardSteps.ProviderInputs &&
+            selectedProvider === DynamicSecretProviders.RabbitMq && (
+              <motion.div
+                key="dynamic-rabbit-mq-step"
+                transition={{ duration: 0.1 }}
+                initial={{ opacity: 0, translateX: 30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+                exit={{ opacity: 0, translateX: -30 }}
+              >
+                <RabbitMqInputForm
+                  onCompleted={handleFormReset}
+                  onCancel={handleFormReset}
+                  projectSlug={projectSlug}
+                  secretPath={secretPath}
+                  environment={environment}
+                />
+              </motion.div>
+            )}
         </AnimatePresence>
       </ModalContent>
     </Modal>

frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/MongoDBInputForm.tsx

@@ -0,0 +1,338 @@
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, FormLabel, IconButton, Input, SecretInput } from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+  provider: z.object({
+    host: z.string().toLowerCase().min(1),
+    port: z.coerce.number().optional(),
+    database: z.string().min(1),
+    username: z.string().min(1),
+    password: z.string().min(1),
+    ca: z.string().optional(),
+    roles: z
+      .object({
+        roleName: z.string().min(1)
+      })
+      .array()
+      .min(1)
+  }),
+  defaultTTL: z.string().superRefine((val, ctx) => {
+    const valMs = ms(val);
+    if (valMs < 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+    // a day
+    if (valMs > 24 * 60 * 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+  }),
+  maxTTL: z
+    .string()
+    .optional()
+    .superRefine((val, ctx) => {
+      if (!val) return;
+      const valMs = ms(val);
+      if (valMs < 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+      // a day
+      if (valMs > 24 * 60 * 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+    }),
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onCompleted: () => void;
+  onCancel: () => void;
+  secretPath: string;
+  projectSlug: string;
+  environment: string;
+};
+
+export const MongoDBDatabaseInputForm = ({
+  onCompleted,
+  onCancel,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    setValue,
+    getValues,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      provider: {
+        roles: [{ roleName: "readWrite" }]
+      }
+    }
+  });
+
+  const roleFields = useFieldArray({
+    control,
+    name: "provider.roles"
+  });
+
+  const createDynamicSecret = useCreateDynamicSecret();
+
+  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+    // wait till previous request is finished
+    if (createDynamicSecret.isLoading) return;
+    try {
+      await createDynamicSecret.mutateAsync({
+        provider: {
+          type: DynamicSecretProviders.MongoDB,
+          inputs: {
+            ...provider,
+            port: provider?.port ? provider.port : undefined,
+            roles: provider.roles.map((el) => el.roleName)
+          }
+        },
+        maxTTL,
+        name,
+        path: secretPath,
+        defaultTTL,
+        projectSlug,
+        environmentSlug: environment
+      });
+      onCompleted();
+    } catch (err) {
+      createNotification({
+        type: "error",
+        text: "Failed to create dynamic secret"
+      });
+    }
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
+        <div>
+          <div className="flex items-center space-x-2">
+            <div className="flex-grow">
+              <Controller
+                control={control}
+                defaultValue=""
+                name="name"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Secret Name"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} placeholder="dynamic-secret" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="defaultTTL"
+                defaultValue="1h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Default TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="maxTTL"
+                defaultValue="24h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Max TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+          </div>
+          <div>
+            <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+              Configuration
+            </div>
+            <div className="flex flex-col">
+              <div className="flex items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="provider.host"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Host"
+                      className="flex-grow"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.port"
+                  defaultValue={27017}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Port"
+                      isOptional
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="number" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div className="flex items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="provider.username"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="User"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} autoComplete="off" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.password"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Password"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="password" autoComplete="new-password" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.database"
+                  defaultValue="default"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Database Name"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <FormLabel
+                label="Roles"
+                tooltipClassName="max-w-md whitespace-pre-line"
+                tooltipText={`Human-readable label that identifies a group of privileges assigned to a database user. This value can either be a built-in role or a custom role. 
+														Built-in: atlasAdmin, backup, clusterMonitor, dbAdmin, dbAdminAnyDatabase, enableSharding, read, readAnyDatabase, readWrite, readWriteAnyDatabase.`}
+              />
+              <div className="mb-3 mt-1 flex flex-col space-y-2">
+                {roleFields.fields.map(({ id: roleFieldId }, i) => (
+                  <div key={roleFieldId} className="flex items-end space-x-2">
+                    <div className="flex-grow">
+                      <Controller
+                        control={control}
+                        name={`provider.roles.${i}.roleName`}
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            className="mb-0 flex-grow"
+                          >
+                            <Input {...field} />
+                          </FormControl>
+                        )}
+                      />
+                    </div>
+                    <IconButton
+                      ariaLabel="delete key"
+                      className="bottom-0.5 h-9"
+                      variant="outline_bg"
+                      onClick={() => {
+                        const roles = getValues("provider.roles");
+                        if (roles && roles?.length > 1) {
+                          roleFields.remove(i);
+                        } else {
+                          setValue("provider.roles", [{ roleName: "" }]);
+                        }
+                      }}
+                    >
+                      <FontAwesomeIcon icon={faTrash} />
+                    </IconButton>
+                  </div>
+                ))}
+                <div>
+                  <Button
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    size="xs"
+                    variant="outline_bg"
+                    onClick={() => roleFields.append({ roleName: "" })}
+                  >
+                    Add Role
+                  </Button>
+                </div>
+              </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="provider.ca"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isOptional
+                      label="CA(SSL)"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <SecretInput
+                        {...field}
+                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+                      />
+                    </FormControl>
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-4 flex items-center space-x-4">
+          <Button type="submit" isLoading={isSubmitting}>
+            Submit
+          </Button>
+          <Button variant="outline_bg" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};

frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/RabbitMqInputForm.tsx

@@ -0,0 +1,421 @@
+import { Controller, useForm } from "react-hook-form";
+import Link from "next/link";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, FormLabel, IconButton, Input, SecretInput } from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+  provider: z.object({
+    host: z.string().trim().min(1),
+    port: z.coerce.number(), // important: this is the management plugin port
+
+    username: z.string(),
+    password: z.string(),
+
+    tags: z.array(z.string().trim()),
+    virtualHost: z.object({
+      name: z.string().trim().min(1),
+      permissions: z.object({
+        read: z.string().trim().min(1),
+        write: z.string().trim().min(1),
+        configure: z.string().trim().min(1)
+      })
+    }),
+    ca: z.string().optional()
+  }),
+  defaultTTL: z.string().superRefine((val, ctx) => {
+    const valMs = ms(val);
+    if (valMs < 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+    // a day
+    if (valMs > 24 * 60 * 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+  }),
+  maxTTL: z
+    .string()
+    .optional()
+    .superRefine((val, ctx) => {
+      if (!val) return;
+      const valMs = ms(val);
+      if (valMs < 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+      // a day
+      if (valMs > 24 * 60 * 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+    }),
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onCompleted: () => void;
+  onCancel: () => void;
+  secretPath: string;
+  projectSlug: string;
+  environment: string;
+};
+
+export const RabbitMqInputForm = ({
+  onCompleted,
+  onCancel,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    setValue,
+    watch
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      provider: {
+        port: 15672,
+        virtualHost: {
+          name: "/",
+          permissions: {
+            read: ".*",
+            write: ".*",
+            configure: ".*"
+          }
+        },
+        tags: []
+      }
+    }
+  });
+
+  const createDynamicSecret = useCreateDynamicSecret();
+
+  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+    // wait till previous request is finished
+    if (createDynamicSecret.isLoading) return;
+    try {
+      await createDynamicSecret.mutateAsync({
+        provider: { type: DynamicSecretProviders.RabbitMq, inputs: provider },
+        maxTTL,
+        name,
+        path: secretPath,
+        defaultTTL,
+        projectSlug,
+        environmentSlug: environment
+      });
+      onCompleted();
+    } catch (err) {
+      createNotification({
+        type: "error",
+        text: "Failed to create dynamic secret"
+      });
+    }
+  };
+
+  const selectedTags = watch("provider.tags");
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
+        <div>
+          <div className="flex items-center space-x-2">
+            <div className="flex-grow">
+              <Controller
+                control={control}
+                defaultValue=""
+                name="name"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Secret Name"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} placeholder="dynamic-secret" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="defaultTTL"
+                defaultValue="1h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Default TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="maxTTL"
+                defaultValue="24h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Max TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+          </div>
+          <div>
+            <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+              Configuration
+            </div>
+            <div className="flex flex-col">
+              <div className="flex items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="provider.host"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Host"
+                      className="flex-grow"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input placeholder="https://your-rabbitmq-host.com" {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.port"
+                  defaultValue={443}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      tooltipText="The port on which the RabbitMQ management plugin is running. Default is 15672."
+                      label="Management Port"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="number" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+
+              <div className="flex w-full items-center gap-2">
+                <Controller
+                  control={control}
+                  name="provider.username"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Username"
+                      className="w-full"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} autoComplete="off" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.password"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Password"
+                      className="w-full"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="password" autoComplete="new-password" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+
+              <div>
+                <FormLabel label="Virtual Host" className="mb-2" />
+                <div className="mt-2 flex items-center justify-evenly gap-2">
+                  <Controller
+                    control={control}
+                    name="provider.virtualHost.name"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Name"
+                        tooltipText="The virtual host to which the user will be assigned. Default is /."
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input placeholder="/virtual-host" {...field} autoComplete="off" />
+                      </FormControl>
+                    )}
+                  />
+
+                  <Controller
+                    control={control}
+                    name="provider.virtualHost.permissions.read"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Read Permissions"
+                        tooltipText="A regular expression matching resource names for which the user is granted read permissions."
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input placeholder=".*" {...field} autoComplete="off" />
+                      </FormControl>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="provider.virtualHost.permissions.write"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Write Permissions"
+                        tooltipText="A regular expression matching resource names for which the user is granted write permissions."
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input placeholder=".*" {...field} autoComplete="off" />
+                      </FormControl>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="provider.virtualHost.permissions.configure"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Configure Permissions"
+                        tooltipText="A regular expression matching resource names for which the user is granted configure permissions."
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input placeholder=".*" {...field} autoComplete="off" />
+                      </FormControl>
+                    )}
+                  />
+                </div>
+              </div>
+
+              <div className="flex flex-col">
+                <FormLabel
+                  isOptional
+                  className="mb-2"
+                  label="Tags"
+                  tooltipText={
+                    <div className="space-y-4">
+                      <p>Select which tag(s) to assign the users provisioned by Infisical.</p>
+                      <p>
+                        There is a wide range of in-built roles in RabbitMQ. Some include,
+                        management, policymaker, monitoring, administrator. <br />
+                        <Link passHref href="https://www.rabbitmq.com/docs/management#permissions">
+                          <a target="_blank" rel="noopener noreferrer">
+                            <span className="cursor-pointer text-primary-400">
+                              Read more about management tags here
+                            </span>
+                          </a>
+                        </Link>
+                        .
+                      </p>
+                      <p>
+                        You can also assign custom roles by providing the name of the custom role in
+                        the input field.
+                      </p>
+                    </div>
+                  }
+                />
+                <div className="flex flex-col -space-y-2">
+                  {selectedTags.map((_, i) => (
+                    <Controller
+                      control={control}
+                      name={`provider.tags.${i}`}
+                      // eslint-disable-next-line react/no-array-index-key
+                      key={`role-${i}`}
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
+                          <div className="flex h-9 items-center gap-2">
+                            <Input
+                              placeholder="Insert tag name, (management, policymaker, etc.)"
+                              className="mb-0 flex-grow"
+                              {...field}
+                            />
+                            <IconButton
+                              isDisabled={selectedTags.length === 1}
+                              ariaLabel="delete key"
+                              className="h-9"
+                              variant="outline_bg"
+                              onClick={() => {
+                                if (selectedTags && selectedTags?.length > 1) {
+                                  setValue(
+                                    "provider.tags",
+                                    selectedTags.filter((__, idx) => idx !== i)
+                                  );
+                                }
+                              }}
+                            >
+                              <FontAwesomeIcon icon={faTrash} />
+                            </IconButton>
+                          </div>
+                        </FormControl>
+                      )}
+                    />
+                  ))}
+                </div>
+              </div>
+              <div>
+                <Button
+                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                  size="xs"
+                  className="mb-4"
+                  variant="outline_bg"
+                  onClick={() => {
+                    setValue("provider.tags", [...selectedTags, ""]);
+                  }}
+                >
+                  Add Tag
+                </Button>
+              </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="provider.ca"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isOptional
+                      label="CA (SSL)"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <SecretInput
+                        {...field}
+                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+                      />
+                    </FormControl>
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-4 flex items-center space-x-4">
+          <Button type="submit" isLoading={isSubmitting}>
+            Submit
+          </Button>
+          <Button variant="outline_bg" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};

frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx

@@ -58,7 +58,8 @@ const renderOutputForm = (provider: DynamicSecretProviders, data: unknown) => {
   if (
     provider === DynamicSecretProviders.SqlDatabase ||
     provider === DynamicSecretProviders.Cassandra ||
-    provider === DynamicSecretProviders.MongoAtlas
+    provider === DynamicSecretProviders.MongoAtlas ||
+    provider === DynamicSecretProviders.MongoDB
   ) {
     const { DB_PASSWORD, DB_USERNAME } = data as { DB_USERNAME: string; DB_PASSWORD: string };
     return (
@@ -139,6 +140,24 @@ const renderOutputForm = (provider: DynamicSecretProviders, data: unknown) => {
     );
   }
 
+  if (provider === DynamicSecretProviders.RabbitMq) {
+    const { DB_USERNAME, DB_PASSWORD } = data as {
+      DB_USERNAME: string;
+      DB_PASSWORD: string;
+    };
+
+    return (
+      <div>
+        <OutputDisplay label="Username" value={DB_USERNAME} />
+        <OutputDisplay
+          label="Password"
+          value={DB_PASSWORD}
+          helperText="Important: Copy these credentials now. You will not be able to see them again after you close the modal."
+        />
+      </div>
+    );
+  }
+
   if (provider === DynamicSecretProviders.ElasticSearch) {
     const { DB_USERNAME, DB_PASSWORD } = data as {
       DB_USERNAME: string;

frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretForm.tsx

@@ -9,6 +9,8 @@ import { EditDynamicSecretAwsIamForm } from "./EditDynamicSecretAwsIamForm";
 import { EditDynamicSecretCassandraForm } from "./EditDynamicSecretCassandraForm";
 import { EditDynamicSecretElasticSearchForm } from "./EditDynamicSecretElasticSearchForm";
 import { EditDynamicSecretMongoAtlasForm } from "./EditDynamicSecretMongoAtlasForm";
+import { EditDynamicSecretMongoDBForm } from "./EditDynamicSecretMongoDBForm";
+import { EditDynamicSecretRabbitMqForm } from "./EditDynamicSecretRabbitMqForm";
 import { EditDynamicSecretRedisProviderForm } from "./EditDynamicSecretRedisProviderForm";
 import { EditDynamicSecretSqlProviderForm } from "./EditDynamicSecretSqlProviderForm";
 
@@ -165,6 +167,41 @@ export const EditDynamicSecretForm = ({
           />
         </motion.div>
       )}
+      {dynamicSecretDetails?.type === DynamicSecretProviders.MongoDB && (
+        <motion.div
+          key="mongodb-search-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretMongoDBForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
+
+      {dynamicSecretDetails?.type === DynamicSecretProviders.RabbitMq && (
+        <motion.div
+          key="rabbit-mq-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretRabbitMqForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
     </AnimatePresence>
   );
 };

frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoDBForm.tsx

@@ -0,0 +1,349 @@
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, FormLabel, IconButton, Input, SecretInput } from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+  inputs: z
+    .object({
+      host: z.string().toLowerCase().min(1),
+      port: z.coerce.number().optional(),
+      database: z.string().min(1),
+      username: z.string().min(1),
+      password: z.string().min(1),
+      ca: z.string().optional(),
+      roles: z
+        .object({
+          roleName: z.string().min(1)
+        })
+        .array()
+        .min(1)
+    })
+    .partial(),
+  defaultTTL: z.string().superRefine((val, ctx) => {
+    const valMs = ms(val);
+    if (valMs < 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+    // a day
+    if (valMs > 24 * 60 * 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+  }),
+  maxTTL: z
+    .string()
+    .optional()
+    .superRefine((val, ctx) => {
+      if (!val) return;
+      const valMs = ms(val);
+      if (valMs < 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+      // a day
+      if (valMs > 24 * 60 * 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+    })
+    .nullable(),
+  newName: z
+    .string()
+    .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+    .optional()
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onClose: () => void;
+  dynamicSecret: TDynamicSecret & { inputs: unknown };
+  secretPath: string;
+  environment: string;
+  projectSlug: string;
+};
+
+export const EditDynamicSecretMongoDBForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    getValues,
+    setValue,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      defaultTTL: dynamicSecret.defaultTTL,
+      maxTTL: dynamicSecret.maxTTL,
+      newName: dynamicSecret.name,
+      inputs: {
+        ...(dynamicSecret.inputs as TForm["inputs"]),
+        roles: (dynamicSecret.inputs as { roles: string[] }).roles?.map((roleName) => ({
+          roleName
+        }))
+      }
+    }
+  });
+
+  const roleFields = useFieldArray({
+    control,
+    name: "inputs.roles"
+  });
+
+  const updateDynamicSecret = useUpdateDynamicSecret();
+
+  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+    // wait till previous request is finished
+    if (updateDynamicSecret.isLoading) return;
+    try {
+      await updateDynamicSecret.mutateAsync({
+        name: dynamicSecret.name,
+        path: secretPath,
+        projectSlug,
+        environmentSlug: environment,
+        data: {
+          maxTTL: maxTTL || undefined,
+          defaultTTL,
+          inputs: {
+            ...inputs,
+            port: inputs?.port ? inputs.port : undefined,
+            roles: inputs?.roles?.map((el) => el.roleName)
+          },
+          newName: newName === dynamicSecret.name ? undefined : newName
+        }
+      });
+      onClose();
+      createNotification({
+        type: "success",
+        text: "Successfully updated dynamic secret"
+      });
+    } catch (err) {
+      createNotification({
+        type: "error",
+        text: "Failed to update dynamic secret"
+      });
+    }
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
+        <div className="flex items-center space-x-2">
+          <div className="flex-grow">
+            <Controller
+              control={control}
+              name="newName"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Secret Name"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="DYN-1" />
+                </FormControl>
+              )}
+            />
+          </div>
+          <div className="w-32">
+            <Controller
+              control={control}
+              name="defaultTTL"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label={<TtlFormLabel label="Default TTL" />}
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+          </div>
+          <div className="w-32">
+            <Controller
+              control={control}
+              name="maxTTL"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label={<TtlFormLabel label="Max TTL" />}
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} value={field.value || ""} />
+                </FormControl>
+              )}
+            />
+          </div>
+        </div>
+        <div>
+          <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            Configuration
+          </div>
+          <div className="flex flex-col">
+            <div className="flex items-center space-x-2">
+              <Controller
+                control={control}
+                name="inputs.host"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Host"
+                    className="flex-grow"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="inputs.port"
+                defaultValue={27017}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Port"
+                    isOptional
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} type="number" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="flex items-center space-x-2">
+              <Controller
+                control={control}
+                name="inputs.username"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="User"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} autoComplete="off" />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="inputs.password"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Password"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} type="password" autoComplete="new-password" />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="inputs.database"
+                defaultValue="default"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Database Name"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <FormLabel
+              label="Roles"
+              tooltipClassName="max-w-md whitespace-pre-line"
+              tooltipText={`Human-readable label that identifies a group of privileges assigned to a database user. This value can either be a built-in role or a custom role. 
+														Built-in: atlasAdmin, backup, clusterMonitor, dbAdmin, dbAdminAnyDatabase, enableSharding, read, readAnyDatabase, readWrite, readWriteAnyDatabase.`}
+            />
+            <div className="mb-3 mt-1 flex flex-col space-y-2">
+              {roleFields.fields.map(({ id: roleFieldId }, i) => (
+                <div key={roleFieldId} className="flex items-end space-x-2">
+                  <div className="flex-grow">
+                    <Controller
+                      control={control}
+                      name={`inputs.roles.${i}.roleName`}
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                          className="mb-0 flex-grow"
+                        >
+                          <Input {...field} />
+                        </FormControl>
+                      )}
+                    />
+                  </div>
+                  <IconButton
+                    ariaLabel="delete key"
+                    className="bottom-0.5 h-9"
+                    variant="outline_bg"
+                    onClick={() => {
+                      const roles = getValues("inputs.roles");
+                      if (roles && roles?.length > 1) {
+                        roleFields.remove(i);
+                      } else {
+                        setValue("inputs.roles", [{ roleName: "" }]);
+                      }
+                    }}
+                  >
+                    <FontAwesomeIcon icon={faTrash} />
+                  </IconButton>
+                </div>
+              ))}
+              <div>
+                <Button
+                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                  size="xs"
+                  variant="outline_bg"
+                  onClick={() => roleFields.append({ roleName: "" })}
+                >
+                  Add Role
+                </Button>
+              </div>
+            </div>
+            <div>
+              <Controller
+                control={control}
+                name="inputs.ca"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    isOptional
+                    label="CA(SSL)"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <SecretInput
+                      {...field}
+                      containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+                    />
+                  </FormControl>
+                )}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="mt-4 flex items-center space-x-4">
+          <Button type="submit" isLoading={isSubmitting}>
+            Save
+          </Button>
+          <Button variant="outline_bg" onClick={onClose}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};

frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRabbitMqForm.tsx

@@ -0,0 +1,421 @@
+import { Controller, useForm } from "react-hook-form";
+import Link from "next/link";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, FormLabel, IconButton, Input, SecretInput } from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+  inputs: z.object({
+    host: z.string().trim().min(1),
+    port: z.coerce.number(), // important: this is the management plugin port
+
+    username: z.string(),
+    password: z.string(),
+
+    tags: z.array(z.string().trim()),
+    virtualHost: z.object({
+      name: z.string().trim().min(1),
+      permissions: z.object({
+        read: z.string().trim().min(1),
+        write: z.string().trim().min(1),
+        configure: z.string().trim().min(1)
+      })
+    }),
+    ca: z.string().optional()
+  }),
+  defaultTTL: z.string().superRefine((val, ctx) => {
+    const valMs = ms(val);
+    if (valMs < 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+    // a day
+    if (valMs > 24 * 60 * 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+  }),
+  maxTTL: z
+    .string()
+    .optional()
+    .superRefine((val, ctx) => {
+      if (!val) return;
+      const valMs = ms(val);
+      if (valMs < 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+      // a day
+      if (valMs > 24 * 60 * 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+    }),
+  newName: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onClose: () => void;
+  dynamicSecret: TDynamicSecret & { inputs: unknown };
+  secretPath: string;
+  environment: string;
+  projectSlug: string;
+};
+export const EditDynamicSecretRabbitMqForm = ({
+  onClose,
+  dynamicSecret,
+  secretPath,
+  environment,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    setValue,
+    watch
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      defaultTTL: dynamicSecret.defaultTTL,
+      maxTTL: dynamicSecret.maxTTL,
+      newName: dynamicSecret.name,
+      inputs: {
+        ...(dynamicSecret.inputs as TForm["inputs"])
+      }
+    }
+  });
+
+  const updateDynamicSecret = useUpdateDynamicSecret();
+
+  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+    // wait till previous request is finished
+    if (updateDynamicSecret.isLoading) return;
+    try {
+      await updateDynamicSecret.mutateAsync({
+        name: dynamicSecret.name,
+        path: secretPath,
+        projectSlug,
+        environmentSlug: environment,
+        data: {
+          maxTTL: maxTTL || undefined,
+          defaultTTL,
+          inputs,
+          newName: newName === dynamicSecret.name ? undefined : newName
+        }
+      });
+      onClose();
+      createNotification({
+        type: "success",
+        text: "Successfully updated dynamic secret"
+      });
+    } catch (err) {
+      createNotification({
+        type: "error",
+        text: "Failed to update dynamic secret"
+      });
+    }
+  };
+
+  const selectedTags = watch("inputs.tags");
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
+        <div>
+          <div className="flex items-center space-x-2">
+            <div className="flex-grow">
+              <Controller
+                control={control}
+                defaultValue=""
+                name="newName"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Secret Name"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} placeholder="dynamic-secret" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="defaultTTL"
+                defaultValue="1h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Default TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="maxTTL"
+                defaultValue="24h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Max TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+          </div>
+          <div>
+            <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+              Configuration
+            </div>
+            <div className="flex flex-col">
+              <div className="flex items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="inputs.host"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Host"
+                      className="flex-grow"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input placeholder="https://your-rabbitmq-host.com" {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="inputs.port"
+                  defaultValue={443}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      tooltipText="The port on which the RabbitMQ management plugin is running. Default is 15672."
+                      label="Management Port"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="number" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+
+              <div className="flex w-full items-center gap-2">
+                <Controller
+                  control={control}
+                  name="inputs.username"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Username"
+                      className="w-full"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} autoComplete="off" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="inputs.password"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Password"
+                      className="w-full"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="password" autoComplete="new-password" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+
+              <div>
+                <FormLabel label="Virtual Host" className="mb-2" />
+                <div className="mt-2 flex items-center justify-evenly gap-2">
+                  <Controller
+                    control={control}
+                    name="inputs.virtualHost.name"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Name"
+                        tooltipText="The virtual host to which the user will be assigned. Default is /."
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input placeholder="/virtual-host" {...field} autoComplete="off" />
+                      </FormControl>
+                    )}
+                  />
+
+                  <Controller
+                    control={control}
+                    name="inputs.virtualHost.permissions.read"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Read Permissions"
+                        tooltipText="A regular expression matching resource names for which the user is granted read permissions."
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input placeholder=".*" {...field} autoComplete="off" />
+                      </FormControl>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="inputs.virtualHost.permissions.write"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Write Permissions"
+                        tooltipText="A regular expression matching resource names for which the user is granted write permissions."
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input placeholder=".*" {...field} autoComplete="off" />
+                      </FormControl>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="inputs.virtualHost.permissions.configure"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Configure Permissions"
+                        tooltipText="A regular expression matching resource names for which the user is granted configure permissions."
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input placeholder=".*" {...field} autoComplete="off" />
+                      </FormControl>
+                    )}
+                  />
+                </div>
+              </div>
+
+              <div className="flex flex-col">
+                <FormLabel
+                  isOptional
+                  className="mb-2"
+                  label="Tags"
+                  tooltipText={
+                    <div className="space-y-4">
+                      <p>Select which tag(s) to assign the users provisioned by Infisical.</p>
+                      <p>
+                        There is a wide range of in-built roles in RabbitMQ. Some include,
+                        management, policymaker, monitoring, administrator. <br />
+                        <Link passHref href="https://www.rabbitmq.com/docs/management#permissions">
+                          <a target="_blank" rel="noopener noreferrer">
+                            <span className="cursor-pointer text-primary-400">
+                              Read more about management tags here
+                            </span>
+                          </a>
+                        </Link>
+                        .
+                      </p>
+                      <p>
+                        You can also assign custom roles by providing the name of the custom role in
+                        the input field.
+                      </p>
+                    </div>
+                  }
+                />
+                <div className="flex flex-col -space-y-2">
+                  {selectedTags.map((_, i) => (
+                    <Controller
+                      control={control}
+                      name={`inputs.tags.${i}`}
+                      // eslint-disable-next-line react/no-array-index-key
+                      key={`role-${i}`}
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
+                          <div className="flex h-9 items-center gap-2">
+                            <Input
+                              placeholder="Insert tag name, (management, policymaker, etc.)"
+                              className="mb-0 flex-grow"
+                              {...field}
+                            />
+                            <IconButton
+                              isDisabled={selectedTags.length === 1}
+                              ariaLabel="delete key"
+                              className="h-9"
+                              variant="outline_bg"
+                              onClick={() => {
+                                if (selectedTags && selectedTags?.length > 1) {
+                                  setValue(
+                                    "inputs.tags",
+                                    selectedTags.filter((__, idx) => idx !== i)
+                                  );
+                                }
+                              }}
+                            >
+                              <FontAwesomeIcon icon={faTrash} />
+                            </IconButton>
+                          </div>
+                        </FormControl>
+                      )}
+                    />
+                  ))}
+                </div>
+              </div>
+              <div>
+                <Button
+                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                  size="xs"
+                  className="mb-4"
+                  variant="outline_bg"
+                  onClick={() => {
+                    setValue("inputs.tags", [...selectedTags, ""]);
+                  }}
+                >
+                  Add Tag
+                </Button>
+              </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="inputs.ca"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isOptional
+                      label="CA (SSL)"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <SecretInput
+                        {...field}
+                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+                      />
+                    </FormControl>
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-4 flex items-center space-x-4">
+          <Button type="submit" isLoading={isSubmitting}>
+            Submit
+          </Button>
+          <Button variant="outline_bg" onClick={onClose}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};