feat: renamed old frontend and fixed some minor bugs

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx

@@ -0,0 +1,482 @@
+import { ReactNode, useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheck, faClock, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AnimatePresence, motion } from "framer-motion";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  SecretInput,
+  Spinner,
+  Tooltip
+} from "@app/components/v2";
+import { useTimedReset, useToggle } from "@app/hooks";
+import { useCreateDynamicSecretLease } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const OutputDisplay = ({
+  value,
+  label,
+  helperText
+}: {
+  value: string;
+  label: string;
+  helperText?: ReactNode;
+}) => {
+  const [copyText, isCopying, setCopyText] = useTimedReset<string>({
+    initialState: "Copy to clipboard"
+  });
+
+  return (
+    <div className="relative">
+      <FormControl label={label} className="flex-grow" helperText={helperText}>
+        <SecretInput
+          isReadOnly
+          value={value}
+          containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+        />
+      </FormControl>
+      <Tooltip content={copyText}>
+        <IconButton
+          ariaLabel="Copy to clipboard"
+          variant="plain"
+          size="md"
+          className="absolute right-2 top-7"
+          onClick={() => {
+            navigator.clipboard.writeText(value as string);
+            setCopyText("Copied");
+          }}
+        >
+          <FontAwesomeIcon icon={isCopying ? faCheck : faCopy} />
+        </IconButton>
+      </Tooltip>
+    </div>
+  );
+};
+
+const TotpOutputDisplay = ({
+  totp,
+  remainingSeconds,
+  triggerLeaseRegeneration
+}: {
+  totp: string;
+  remainingSeconds: number;
+  triggerLeaseRegeneration: (details: { ttl?: string }) => Promise<void>;
+}) => {
+  const [remainingTime, setRemainingTime] = useState(remainingSeconds);
+  const [shouldShowRegenerate, setShouldShowRegenerate] = useToggle(false);
+
+  useEffect(() => {
+    setRemainingTime(remainingSeconds);
+    setShouldShowRegenerate.off();
+
+    // Set up countdown interval
+    const intervalId = setInterval(() => {
+      setRemainingTime((prevTime) => {
+        if (prevTime <= 1) {
+          clearInterval(intervalId);
+          setShouldShowRegenerate.on();
+          return 0;
+        }
+        return prevTime - 1;
+      });
+    }, 1000);
+
+    // Cleanup interval on unmount or when totp changes
+    return () => clearInterval(intervalId);
+  }, [totp, remainingSeconds]);
+
+  return (
+    <div className="h-36">
+      <OutputDisplay label="Time-based one-time password" value={totp} />
+      {remainingTime > 0 ? (
+        <div
+          className={`ml-2 flex items-center text-sm ${
+            remainingTime < 10 ? "text-red-500" : "text-yellow-500"
+          } transition-colors duration-500`}
+        >
+          <FontAwesomeIcon className="mr-1" icon={faClock} size="sm" />
+          <span>
+            Expires in {remainingTime} {remainingTime > 1 ? "seconds" : "second"}
+          </span>
+        </div>
+      ) : (
+        <div className="ml-2 flex items-center text-sm text-red-500">
+          <FontAwesomeIcon className="mr-1" icon={faClock} size="sm" />
+          Expired
+        </div>
+      )}
+      {shouldShowRegenerate && (
+        <Button
+          colorSchema="secondary"
+          className="mt-2"
+          onClick={() => triggerLeaseRegeneration({})}
+        >
+          Regenerate
+        </Button>
+      )}
+    </div>
+  );
+};
+
+const renderOutputForm = (
+  provider: DynamicSecretProviders,
+  data: unknown,
+  triggerLeaseRegeneration: (details: { ttl?: string }) => Promise<void>
+) => {
+  if (
+    provider === DynamicSecretProviders.SqlDatabase ||
+    provider === DynamicSecretProviders.Cassandra ||
+    provider === DynamicSecretProviders.MongoAtlas ||
+    provider === DynamicSecretProviders.MongoDB ||
+    provider === DynamicSecretProviders.SapAse
+  ) {
+    const { DB_PASSWORD, DB_USERNAME } = data as { DB_USERNAME: string; DB_PASSWORD: string };
+    return (
+      <div>
+        <OutputDisplay label="Database User" value={DB_USERNAME} />
+        <OutputDisplay
+          label="Database 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.AwsIam) {
+    const { USERNAME, ACCESS_KEY, SECRET_ACCESS_KEY } = data as {
+      ACCESS_KEY: string;
+      SECRET_ACCESS_KEY: string;
+      USERNAME: string;
+    };
+    return (
+      <div>
+        <OutputDisplay label="AWS Username" value={USERNAME} />
+        <OutputDisplay label="AWS IAM Access Key" value={ACCESS_KEY} />
+        <OutputDisplay
+          label="AWS IAM Secret Key"
+          value={SECRET_ACCESS_KEY}
+          helperText="Important: Copy these credentials now. You will not be able to see them again after you close the modal."
+        />
+      </div>
+    );
+  }
+
+  if (provider === DynamicSecretProviders.Redis) {
+    const { DB_USERNAME, DB_PASSWORD } = data as {
+      DB_USERNAME: string;
+      DB_PASSWORD: string;
+    };
+
+    return (
+      <div>
+        <OutputDisplay label="Redis Username" value={DB_USERNAME} />
+        <OutputDisplay
+          label="Redis 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.AwsElastiCache) {
+    const { DB_USERNAME, DB_PASSWORD } = data as {
+      DB_USERNAME: string;
+      DB_PASSWORD: string;
+    };
+
+    return (
+      <div>
+        <OutputDisplay label="Cluster Username" value={DB_USERNAME} />
+        <OutputDisplay
+          label="Cluster Password"
+          value={DB_PASSWORD}
+          helperText={
+            <div className="space-y-4">
+              <p>
+                Important: Copy these credentials now. You will not be able to see them again after
+                you close the modal.
+              </p>
+              <p className="font-medium">
+                Please note that it may take a few minutes before the credentials are available for
+                use.
+              </p>
+            </div>
+          }
+        />
+      </div>
+    );
+  }
+
+  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;
+      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.AzureEntraId) {
+    const { email, password } = data as {
+      email: string;
+      password: string;
+    };
+
+    return (
+      <div>
+        <OutputDisplay label="Email" value={email} />
+        <OutputDisplay
+          label="Password"
+          value={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.Ldap) {
+    const { USERNAME, PASSWORD, DN_ARRAY } = data as {
+      USERNAME: string;
+      PASSWORD: string;
+      DN_ARRAY: string[];
+    };
+
+    return (
+      <div>
+        <OutputDisplay label="Username" value={USERNAME} />
+        <OutputDisplay
+          label="Password"
+          value={PASSWORD}
+          helperText="Important: Copy these credentials now. You will not be able to see them again after you close the modal."
+        />
+        <FormControl label="DNs" className="flex-grow">
+          <SecretInput
+            isReadOnly
+            isVisible
+            value={JSON.stringify(DN_ARRAY)}
+            containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+          />
+        </FormControl>
+      </div>
+    );
+  }
+
+  if (
+    provider === DynamicSecretProviders.SapHana ||
+    provider === DynamicSecretProviders.Snowflake
+  ) {
+    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.Totp) {
+    const { TOTP, TIME_REMAINING } = data as {
+      TOTP: string;
+      TIME_REMAINING: number;
+    };
+
+    return (
+      <TotpOutputDisplay
+        totp={TOTP}
+        remainingSeconds={TIME_REMAINING}
+        triggerLeaseRegeneration={triggerLeaseRegeneration}
+      />
+    );
+  }
+
+  return null;
+};
+
+const formSchema = z.object({
+  ttl: z
+    .string()
+    .refine((val) => ms(val) > 0, "TTL must be a positive number")
+    .optional()
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onClose: () => void;
+  dynamicSecretName: string;
+  provider: DynamicSecretProviders;
+  projectSlug: string;
+  environment: string;
+  secretPath: string;
+};
+
+const PROVIDERS_WITH_AUTOGENERATE_SUPPORT = [DynamicSecretProviders.Totp];
+
+export const CreateDynamicSecretLease = ({
+  onClose,
+  projectSlug,
+  dynamicSecretName,
+  provider,
+  secretPath,
+  environment
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      ttl: "1h"
+    }
+  });
+  const [isPreloading, setIsPreloading] = useToggle(
+    PROVIDERS_WITH_AUTOGENERATE_SUPPORT.includes(provider)
+  );
+
+  const createDynamicSecretLease = useCreateDynamicSecretLease();
+
+  const handleDynamicSecretLeaseCreate = async ({ ttl }: TForm) => {
+    if (createDynamicSecretLease.isPending) return;
+    try {
+      await createDynamicSecretLease.mutateAsync({
+        environmentSlug: environment,
+        projectSlug,
+        path: secretPath,
+        ttl,
+        dynamicSecretName
+      });
+
+      createNotification({
+        type: "success",
+        text: "Successfully leased dynamic secret"
+      });
+
+      setIsPreloading.off();
+    } catch (error) {
+      console.log(error);
+      createNotification({
+        type: "error",
+        text: "Failed to lease dynamic secret"
+      });
+    }
+  };
+
+  const handleLeaseRegeneration = async (data: { ttl?: string }) => {
+    setIsPreloading.on();
+    handleDynamicSecretLeaseCreate(data);
+  };
+
+  useEffect(() => {
+    if (provider === DynamicSecretProviders.Totp) {
+      handleDynamicSecretLeaseCreate({});
+    }
+  }, [provider]);
+
+  const isOutputMode = Boolean(createDynamicSecretLease?.data);
+
+  if (isPreloading) {
+    return <Spinner className="mx-auto h-40 text-mineshaft-700" />;
+  }
+
+  return (
+    <div>
+      <AnimatePresence>
+        {!isOutputMode && (
+          <motion.div
+            key="lease-input"
+            transition={{ duration: 0.1 }}
+            initial={{ opacity: 0, translateX: 30 }}
+            animate={{ opacity: 1, translateX: 0 }}
+            exit={{ opacity: 0, translateX: 30 }}
+          >
+            <form onSubmit={handleSubmit(handleDynamicSecretLeaseCreate)}>
+              <Controller
+                control={control}
+                name="ttl"
+                defaultValue="1h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Default TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+              <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>
+          </motion.div>
+        )}
+        {isOutputMode && (
+          <motion.div
+            key="lease-output"
+            transition={{ duration: 0.1 }}
+            initial={{ opacity: 0, translateX: 30 }}
+            animate={{ opacity: 1, translateX: 0 }}
+            exit={{ opacity: 0, translateX: 30 }}
+          >
+            {renderOutputForm(
+              provider,
+              createDynamicSecretLease.data?.data,
+              handleLeaseRegeneration
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/DynamicSecretLease.tsx

@@ -0,0 +1,256 @@
+import { subject } from "@casl/ability";
+import {
+  faClose,
+  faFileContract,
+  faRepeat,
+  faTrash,
+  faWarning
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format, formatDistance } from "date-fns";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  EmptyState,
+  IconButton,
+  Modal,
+  ModalContent,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionDynamicSecretActions, ProjectPermissionSub } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useGetDynamicSecretLeases, useRevokeDynamicSecretLease } from "@app/hooks/api";
+import { DynamicSecretLeaseStatus } from "@app/hooks/api/dynamicSecretLease/types";
+
+import { RenewDynamicSecretLease } from "./RenewDynamicSecretLease";
+
+type Props = {
+  dynamicSecretName: string;
+  projectSlug: string;
+  environment: string;
+  secretPath: string;
+  onClickNewLease: () => void;
+  onClose: () => void;
+};
+
+export const DynamicSecretLease = ({
+  projectSlug,
+  dynamicSecretName,
+  environment,
+  secretPath,
+  onClickNewLease,
+  onClose
+}: Props) => {
+  const { handlePopUpOpen, popUp, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "deleteSecret",
+    "renewSecret"
+  ] as const);
+  const { data: leases, isPending: isLeaseLoading } = useGetDynamicSecretLeases({
+    projectSlug,
+    environmentSlug: environment,
+    path: secretPath,
+    dynamicSecretName
+  });
+
+  const deleteDynamicSecretLease = useRevokeDynamicSecretLease();
+
+  const handleDynamicSecretDeleteLease = async () => {
+    try {
+      const { leaseId, isForced } = popUp.deleteSecret.data as {
+        leaseId: string;
+        isForced?: boolean;
+      };
+      await deleteDynamicSecretLease.mutateAsync({
+        environmentSlug: environment,
+        projectSlug,
+        path: secretPath,
+        dynamicSecretName,
+        leaseId,
+        isForced
+      });
+      handlePopUpClose("deleteSecret");
+      createNotification({
+        type: "success",
+        text: "Successfully deleted lease"
+      });
+    } catch (error) {
+      console.log(error);
+      createNotification({
+        type: "error",
+        text: "Failed to delete lease"
+      });
+    }
+  };
+
+  return (
+    <div>
+      <TableContainer>
+        <Table className="bg-mineshaft-600">
+          <THead>
+            <Tr>
+              <Td>Lease ID</Td>
+              <Td>Expire At</Td>
+              <Td />
+            </Tr>
+          </THead>
+          <TBody>
+            {!isLeaseLoading && leases?.length === 0 && (
+              <tr>
+                <td colSpan={3}>
+                  <EmptyState title="No leases found" icon={faFileContract}>
+                    <Button
+                      onClick={onClickNewLease}
+                      className="mt-4"
+                      colorSchema="primary"
+                      size="sm"
+                    >
+                      New Lease
+                    </Button>
+                  </EmptyState>
+                </td>
+              </tr>
+            )}
+            {(leases || []).map(({ id, expireAt, status, statusDetails }) => (
+              <Tr key={id}>
+                <Td>
+                  {id}
+                  {Boolean(status) && (
+                    <Tooltip content={statusDetails || status || ""}>
+                      <FontAwesomeIcon className="ml-2 text-yellow-600" icon={faWarning} />
+                    </Tooltip>
+                  )}
+                </Td>
+                <Td>
+                  <Tooltip content={format(new Date(expireAt), "yyyy-MM-dd, hh:mm aaa")}>
+                    <span className="capitalize">
+                      {formatDistance(new Date(expireAt), new Date())}
+                    </span>
+                  </Tooltip>
+                </Td>
+                <Td>
+                  <div className="flex items-center space-x-4">
+                    <ProjectPermissionCan
+                      I={ProjectPermissionDynamicSecretActions.Lease}
+                      a={subject(ProjectPermissionSub.DynamicSecrets, { environment, secretPath })}
+                      renderTooltip
+                      allowedLabel="Renew"
+                    >
+                      {(isAllowed) => (
+                        <IconButton
+                          ariaLabel="edit-folder"
+                          variant="plain"
+                          size="sm"
+                          className="p-0"
+                          isDisabled={!isAllowed}
+                          onClick={() => handlePopUpOpen("renewSecret", { leaseId: id })}
+                        >
+                          <FontAwesomeIcon icon={faRepeat} size="lg" />
+                        </IconButton>
+                      )}
+                    </ProjectPermissionCan>
+                    <ProjectPermissionCan
+                      I={ProjectPermissionDynamicSecretActions.Lease}
+                      a={subject(ProjectPermissionSub.DynamicSecrets, { environment, secretPath })}
+                      renderTooltip
+                      allowedLabel="Delete"
+                    >
+                      {(isAllowed) => (
+                        <IconButton
+                          ariaLabel="delete-folder"
+                          variant="plain"
+                          size="md"
+                          className="p-0"
+                          isDisabled={!isAllowed}
+                          onClick={() => handlePopUpOpen("deleteSecret", { leaseId: id })}
+                        >
+                          <FontAwesomeIcon icon={faClose} size="lg" />
+                        </IconButton>
+                      )}
+                    </ProjectPermissionCan>
+                    {status === DynamicSecretLeaseStatus.FailedDeletion && (
+                      <ProjectPermissionCan
+                        I={ProjectPermissionDynamicSecretActions.Lease}
+                        a={subject(ProjectPermissionSub.DynamicSecrets, {
+                          environment,
+                          secretPath
+                        })}
+                        renderTooltip
+                        allowedLabel="Force Delete. This action will remove the secret from internal storage, but it will remain in external systems."
+                      >
+                        {(isAllowed) => (
+                          <IconButton
+                            ariaLabel="delete-folder"
+                            variant="plain"
+                            size="md"
+                            className="p-0 text-red-600"
+                            isDisabled={!isAllowed}
+                            onClick={() =>
+                              handlePopUpOpen("deleteSecret", { leaseId: id, isForced: true })
+                            }
+                          >
+                            <FontAwesomeIcon icon={faTrash} />
+                          </IconButton>
+                        )}
+                      </ProjectPermissionCan>
+                    )}
+                  </div>
+                </Td>
+              </Tr>
+            ))}
+          </TBody>
+        </Table>
+      </TableContainer>
+      {!isLeaseLoading && Boolean(leases?.length) && (
+        <div className="mt-6 flex items-center space-x-4">
+          <ProjectPermissionCan
+            I={ProjectPermissionDynamicSecretActions.Lease}
+            a={subject(ProjectPermissionSub.DynamicSecrets, {
+              environment,
+              secretPath
+            })}
+          >
+            {(isAllowed) => (
+              <Button onClick={onClickNewLease} size="xs" isDisabled={!isAllowed}>
+                New Lease
+              </Button>
+            )}
+          </ProjectPermissionCan>
+          <Button onClick={onClose} variant="plain" colorSchema="secondary" size="xs">
+            Close
+          </Button>
+        </div>
+      )}
+      <Modal
+        isOpen={popUp.renewSecret.isOpen}
+        onOpenChange={(state) => handlePopUpToggle("renewSecret", state)}
+      >
+        <ModalContent title="Renew Lease">
+          <RenewDynamicSecretLease
+            onClose={() => handlePopUpClose("renewSecret")}
+            projectSlug={projectSlug}
+            leaseId={(popUp.renewSecret?.data as { leaseId: string })?.leaseId}
+            dynamicSecretName={dynamicSecretName}
+            secretPath={secretPath}
+            environment={environment}
+          />
+        </ModalContent>
+      </Modal>
+      <DeleteActionModal
+        isOpen={popUp.deleteSecret.isOpen}
+        deleteKey="delete"
+        title="Do you want to delete this lease?"
+        onChange={(isOpen) => handlePopUpToggle("deleteSecret", isOpen)}
+        onDeleteApproved={handleDynamicSecretDeleteLease}
+      />
+    </div>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/DynamicSecretListView.tsx

@@ -0,0 +1,295 @@
+import { subject } from "@casl/ability";
+import {
+  faClose,
+  faFingerprint,
+  faPencilSquare,
+  faWarning
+} 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,
+  IconButton,
+  Modal,
+  ModalContent,
+  Tag,
+  Tooltip
+} from "@app/components/v2";
+import { ProjectPermissionDynamicSecretActions, ProjectPermissionSub } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteDynamicSecret } from "@app/hooks/api";
+import {
+  DynamicSecretProviders,
+  DynamicSecretStatus,
+  TDynamicSecret
+} from "@app/hooks/api/dynamicSecret/types";
+
+import { CreateDynamicSecretLease } from "./CreateDynamicSecretLease";
+import { DynamicSecretLease } from "./DynamicSecretLease";
+import { EditDynamicSecretForm } from "./EditDynamicSecretForm";
+
+const formatProviderName = (type: DynamicSecretProviders) => {
+  if (type === DynamicSecretProviders.SqlDatabase) return "SQL Database";
+  return "";
+};
+
+type Props = {
+  dynamicSecrets?: TDynamicSecret[];
+  environment: string;
+  projectSlug: string;
+  secretPath?: string;
+};
+
+export const DynamicSecretListView = ({
+  dynamicSecrets = [],
+  environment,
+  projectSlug,
+  secretPath = "/"
+}: Props) => {
+  const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "dynamicSecretLeases",
+    "createDynamicSecretLease",
+    "updateDynamicSecret",
+    "deleteDynamicSecret"
+  ] as const);
+
+  const deleteDynamicSecret = useDeleteDynamicSecret();
+
+  const handleDynamicSecretDelete = async () => {
+    try {
+      const { name, isForced } = popUp.deleteDynamicSecret.data as TDynamicSecret & {
+        isForced?: boolean;
+      };
+      await deleteDynamicSecret.mutateAsync({
+        environmentSlug: environment,
+        projectSlug,
+        path: secretPath,
+        name,
+        isForced
+      });
+      handlePopUpClose("deleteDynamicSecret");
+      createNotification({
+        type: "success",
+        text: "Successfully deleted dynamic secret"
+      });
+    } catch (error) {
+      console.log(error);
+      createNotification({
+        type: "error",
+        text: "Failed to delete dynamic secret"
+      });
+    }
+  };
+
+  return (
+    <>
+      {dynamicSecrets.map((secret) => {
+        const isRevoking = secret.status === DynamicSecretStatus.Deleting;
+        return (
+          <Modal
+            key={secret.id}
+            isOpen={
+              popUp.dynamicSecretLeases.isOpen && popUp.dynamicSecretLeases.data === secret.id
+            }
+            onOpenChange={(state) => handlePopUpToggle("dynamicSecretLeases", state)}
+          >
+            <div
+              className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
+              role="button"
+              tabIndex={0}
+              onKeyDown={(evt) => {
+                // no lease view for TOTP because it's irrelevant
+                if (secret.type === DynamicSecretProviders.Totp) {
+                  return;
+                }
+
+                if (evt.key === "Enter" && !isRevoking)
+                  handlePopUpOpen("dynamicSecretLeases", secret.id);
+              }}
+              onClick={() => {
+                // no lease view for TOTP because it's irrelevant
+                if (secret.type === DynamicSecretProviders.Totp) {
+                  return;
+                }
+
+                if (!isRevoking) {
+                  handlePopUpOpen("dynamicSecretLeases", secret.id);
+                }
+              }}
+            >
+              <div className="flex w-11 items-center px-5 py-3 text-yellow-700">
+                <FontAwesomeIcon icon={faFingerprint} />
+              </div>
+              <div className="flex flex-grow items-center px-4 py-3" role="button" tabIndex={0}>
+                {secret.name}
+                <Tag className="ml-4 px-2 py-0 text-xs normal-case">
+                  {formatProviderName(secret.type)}
+                </Tag>
+                {Boolean(secret.status) && (
+                  <Tooltip content={secret?.statusDetails || secret.status || ""}>
+                    <FontAwesomeIcon
+                      className={
+                        secret.status === DynamicSecretStatus.Deleting
+                          ? "text-yellow-600"
+                          : "text-red-600"
+                      }
+                      icon={faWarning}
+                    />
+                  </Tooltip>
+                )}
+              </div>
+              <div className="flex items-center space-x-2 px-4 py-2">
+                <ProjectPermissionCan
+                  I={ProjectPermissionDynamicSecretActions.Lease}
+                  a={subject(ProjectPermissionSub.DynamicSecrets, { environment, secretPath })}
+                  renderTooltip
+                  allowedLabel="Edit"
+                >
+                  {(isAllowed) => (
+                    <Button
+                      size="xs"
+                      className="m-0 px-2 py-0.5 opacity-0 group-hover:opacity-100"
+                      isDisabled={isRevoking || !isAllowed}
+                      onClick={(evt) => {
+                        evt.stopPropagation();
+                        handlePopUpOpen("createDynamicSecretLease", secret);
+                      }}
+                    >
+                      Generate
+                    </Button>
+                  )}
+                </ProjectPermissionCan>
+
+                {secret.status === DynamicSecretStatus.FailedDeletion && (
+                  <Tooltip content="This action will remove the secret from internal storage, but it will remain in external systems. Use this option only after you've confirmed that your external leases are handled.">
+                    <Button
+                      size="xs"
+                      className="m-0 px-2 py-0.5"
+                      colorSchema="danger"
+                      isDisabled={isRevoking}
+                      onClick={(evt) => {
+                        evt.stopPropagation();
+                        handlePopUpOpen("deleteDynamicSecret", {
+                          ...secret,
+                          isForced: true
+                        });
+                      }}
+                    >
+                      Force Delete
+                    </Button>
+                  </Tooltip>
+                )}
+              </div>
+              <div className="flex items-center space-x-4 border-l border-mineshaft-600 px-3 py-3">
+                <ProjectPermissionCan
+                  I={ProjectPermissionDynamicSecretActions.EditRootCredential}
+                  a={subject(ProjectPermissionSub.DynamicSecrets, { environment, secretPath })}
+                  renderTooltip
+                  allowedLabel="Edit"
+                >
+                  {(isAllowed) => (
+                    <IconButton
+                      ariaLabel="edit-dynamic-secret"
+                      variant="plain"
+                      size="sm"
+                      className="p-0 opacity-0 group-hover:opacity-100"
+                      onClick={(evt) => {
+                        evt.stopPropagation();
+                        handlePopUpOpen("updateDynamicSecret", secret);
+                      }}
+                      isDisabled={!isAllowed || isRevoking}
+                    >
+                      <FontAwesomeIcon icon={faPencilSquare} size="lg" />
+                    </IconButton>
+                  )}
+                </ProjectPermissionCan>
+                <ProjectPermissionCan
+                  I={ProjectPermissionDynamicSecretActions.DeleteRootCredential}
+                  a={subject(ProjectPermissionSub.DynamicSecrets, { environment, secretPath })}
+                  renderTooltip
+                  allowedLabel="Delete"
+                >
+                  {(isAllowed) => (
+                    <IconButton
+                      ariaLabel="delete-dynamic-secret"
+                      variant="plain"
+                      size="md"
+                      className="p-0 opacity-0 group-hover:opacity-100"
+                      onClick={(evt) => {
+                        evt.stopPropagation();
+                        handlePopUpOpen("deleteDynamicSecret", secret);
+                      }}
+                      isDisabled={!isAllowed || isRevoking}
+                    >
+                      <FontAwesomeIcon icon={faClose} size="lg" />
+                    </IconButton>
+                  )}
+                </ProjectPermissionCan>
+              </div>
+            </div>
+            <ModalContent
+              title="Dynamic secret leases"
+              subTitle="Revoke or renew your secret leases"
+              className="max-w-3xl"
+            >
+              <DynamicSecretLease
+                onClickNewLease={() => handlePopUpOpen("createDynamicSecretLease", secret)}
+                onClose={() => handlePopUpClose("dynamicSecretLeases")}
+                projectSlug={projectSlug}
+                key={secret.id}
+                dynamicSecretName={secret.name}
+                secretPath={secretPath}
+                environment={environment}
+              />
+            </ModalContent>
+          </Modal>
+        );
+      })}
+      <Modal
+        isOpen={popUp.createDynamicSecretLease.isOpen}
+        onOpenChange={(state) => handlePopUpToggle("createDynamicSecretLease", state)}
+      >
+        <ModalContent title="Provision lease">
+          <CreateDynamicSecretLease
+            provider={
+              (popUp.createDynamicSecretLease?.data as { type: DynamicSecretProviders })?.type
+            }
+            onClose={() => handlePopUpClose("createDynamicSecretLease")}
+            projectSlug={projectSlug}
+            dynamicSecretName={(popUp.createDynamicSecretLease?.data as { name: string })?.name}
+            secretPath={secretPath}
+            environment={environment}
+          />
+        </ModalContent>
+      </Modal>
+      <Modal
+        isOpen={popUp.updateDynamicSecret.isOpen}
+        onOpenChange={(state) => handlePopUpToggle("updateDynamicSecret", state)}
+      >
+        <ModalContent title="Edit dynamic secret" className="max-w-3xl">
+          <EditDynamicSecretForm
+            onClose={() => handlePopUpClose("updateDynamicSecret")}
+            projectSlug={projectSlug}
+            dynamicSecretName={(popUp.updateDynamicSecret?.data as TDynamicSecret)?.name}
+            secretPath={secretPath}
+            environment={environment}
+          />
+        </ModalContent>
+      </Modal>
+      <DeleteActionModal
+        isOpen={popUp.deleteDynamicSecret.isOpen}
+        deleteKey={(popUp.deleteDynamicSecret?.data as TDynamicSecret)?.name}
+        title={
+          (popUp.deleteDynamicSecret?.data as { isForced?: boolean })?.isForced
+            ? "Do you want to force delete this dynamic secret?"
+            : "Do you want to delete this dynamic secret?"
+        }
+        onChange={(isOpen) => handlePopUpToggle("deleteDynamicSecret", isOpen)}
+        onDeleteApproved={handleDynamicSecretDelete}
+      />
+    </>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAwsElastiCacheProviderForm.tsx

@@ -0,0 +1,319 @@
+import { Controller, useForm } from "react-hook-form";
+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 {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  Input,
+  SecretInput,
+  TextArea
+} 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({
+      clusterName: z.string().trim().min(1),
+      accessKeyId: z.string().trim().min(1),
+      secretAccessKey: z.string().trim().min(1),
+
+      region: z.string().trim(),
+      creationStatement: z.string().trim(),
+      revocationStatement: z.string().trim(),
+      ca: z.string().optional()
+    })
+    .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 EditDynamicSecretAwsElastiCacheProviderForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = 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.isPending) 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 {
+      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.clusterName"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Cluster name"
+                    className="flex-grow"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} placeholder="redis-oss-cluster" />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                defaultValue=""
+                name="inputs.region"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Region"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input placeholder="us-east-1" {...field} type="text" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="flex w-full items-center space-x-2">
+              <Controller
+                control={control}
+                name="inputs.accessKeyId"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Access Key ID"
+                    className="w-full"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} autoComplete="off" />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="inputs.secretAccessKey"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Secret Access Key"
+                    className="w-full"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} type="password" autoComplete="new-password" />
+                  </FormControl>
+                )}
+              />
+            </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>
+                )}
+              />
+              <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                <AccordionItem value="advance-statements">
+                  <AccordionTrigger>Modify ElastiCache Statements</AccordionTrigger>
+                  <AccordionContent>
+                    <Controller
+                      control={control}
+                      name="inputs.creationStatement"
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Creation Statement"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                          helperText="username, password and expiration are dynamically provisioned"
+                        >
+                          <TextArea
+                            {...field}
+                            reSize="none"
+                            rows={3}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
+                    <Controller
+                      control={control}
+                      name="inputs.revocationStatement"
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Revocation Statement"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                          helperText="username is dynamically provisioned"
+                        >
+                          <TextArea
+                            {...field}
+                            reSize="none"
+                            rows={3}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </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/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAwsIamForm.tsx

@@ -0,0 +1,313 @@
+import { Controller, useForm } from "react-hook-form";
+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, Input, TextArea } 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({
+      accessKey: z.string().trim().min(1),
+      secretAccessKey: z.string().trim().min(1),
+      region: z.string().trim().min(1),
+      awsPath: z.string().trim().optional(),
+      permissionBoundaryPolicyArn: z.string().trim().optional(),
+      policyDocument: z.string().trim().optional(),
+      userGroups: z.string().trim().optional(),
+      policyArns: z.string().trim().optional()
+    })
+    .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 EditDynamicSecretAwsIamForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = 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.isPending) 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 {
+      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 border-b border-b-mineshaft-600 pb-2">Configuration</div>
+          <div className="flex flex-col">
+            <div className="flex items-center space-x-2">
+              <Controller
+                control={control}
+                name="inputs.accessKey"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="AWS Access Key"
+                    className="flex-grow"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="inputs.secretAccessKey"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="AWS Secret Key"
+                    className="flex-grow"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} type="password" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="flex items-center space-x-2">
+              <Controller
+                control={control}
+                name="inputs.awsPath"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="AWS IAM Path"
+                    className="flex-grow"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="inputs.region"
+                defaultValue="us-east-1"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="AWS Region"
+                    className="flex-grow"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <Controller
+              control={control}
+              name="inputs.userGroups"
+              defaultValue=""
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="AWS IAM Groups"
+                  isError={Boolean(error?.message)}
+                  isOptional
+                  errorText={error?.message}
+                  helperText="Generated users will get attached to given groups."
+                >
+                  <Input {...field} placeholder="group1,group2" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="inputs.permissionBoundaryPolicyArn"
+              defaultValue=""
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="IAM User Permission Boundary ARN"
+                  isError={Boolean(error?.message)}
+                  isOptional
+                  errorText={error?.message}
+                  helperText="ARN to be attached to the generated user for AWS Permission Boundary."
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="inputs.policyArns"
+              defaultValue="datacenter1"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="AWS Policy ARNs"
+                  isError={Boolean(error?.message)}
+                  isOptional
+                  errorText={error?.message}
+                  helperText="Generated users will get attached to given policy arns."
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="inputs.policyDocument"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="AWS IAM Policy Document"
+                  isOptional
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                  helperText="Generated users will have the inline policy."
+                >
+                  <TextArea
+                    {...field}
+                    reSize="none"
+                    rows={3}
+                    className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                  />
+                </FormControl>
+              )}
+            />
+          </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/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAzureEntraIdForm.tsx

@@ -0,0 +1,266 @@
+import { Controller, useForm } from "react-hook-form";
+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, 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({
+    email: z.string(),
+    userId: z.string(),
+    tenantId: z.string(),
+    applicationId: z.string(),
+    clientSecret: z.string()
+  }),
+  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")
+    .optional()
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onClose: () => void;
+  dynamicSecret: TDynamicSecret & { inputs: unknown };
+  secretPath: string;
+  environment: string;
+  projectSlug: string;
+};
+
+export const EditDynamicSecretAzureEntraIdForm = ({
+  onClose,
+  dynamicSecret,
+  secretPath,
+  environment,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = 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 ({ maxTTL, defaultTTL, newName, inputs }: TForm) => {
+    // wait till previous request is finished
+    if (updateDynamicSecret.isPending) return;
+    try {
+      await updateDynamicSecret.mutateAsync({
+        name: dynamicSecret.name,
+        path: secretPath,
+        projectSlug,
+        environmentSlug: environment,
+        data: {
+          maxTTL: maxTTL || undefined,
+          defaultTTL,
+          newName: newName === dynamicSecret.name ? undefined : newName,
+          inputs
+        }
+      });
+      onClose();
+      createNotification({
+        type: "success",
+        text: "Successfully updated dynamic secret"
+      });
+    } catch {
+      createNotification({
+        type: "error",
+        text: "Failed to update dynamic secret"
+      });
+    }
+  };
+
+  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="flex items-center space-x-2">
+          <div className="flex-grow">
+            <Controller
+              control={control}
+              defaultValue=""
+              name="inputs.email"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Email" isError={Boolean(error)} errorText={error?.message}>
+                  <SecretInput
+                    value={field.value}
+                    containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+                  />
+                </FormControl>
+              )}
+            />
+          </div>
+          <div className="flex-grow">
+            <Controller
+              control={control}
+              defaultValue=""
+              name="inputs.userId"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="User ID" isError={Boolean(error)} errorText={error?.message}>
+                  <SecretInput
+                    isReadOnly
+                    value={field.value}
+                    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 className="flex items-center space-x-2">
+          <div className="flex-grow">
+            <Controller
+              control={control}
+              defaultValue=""
+              name="inputs.tenantId"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Tenant ID" isError={Boolean(error)} errorText={error?.message}>
+                  <SecretInput
+                    isReadOnly
+                    value={field.value}
+                    containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+                  />
+                </FormControl>
+              )}
+            />
+          </div>
+          <div className="flex-grow">
+            <Controller
+              control={control}
+              defaultValue=""
+              name="inputs.applicationId"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Application ID"
+                  isError={Boolean(error)}
+                  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 className="flex items-center space-x-2">
+          <div className="flex-grow">
+            <Controller
+              control={control}
+              defaultValue=""
+              name="inputs.clientSecret"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Client Secret"
+                  isError={Boolean(error)}
+                  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 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>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretCassandraForm.tsx

@@ -0,0 +1,374 @@
+import { Controller, useForm } from "react-hook-form";
+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 {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  Input,
+  SecretInput,
+  TextArea
+} 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(),
+      keyspace: z.string().optional(),
+      localDataCenter: z.string().min(1),
+      username: z.string().min(1),
+      password: z.string().min(1),
+      creationStatement: z.string().min(1),
+      revocationStatement: z.string().min(1),
+      renewStatement: z.string().optional(),
+      ca: z.string().optional()
+    })
+    .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 EditDynamicSecretCassandraForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = 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.isPending) 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 {
+      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 border-b border-b-mineshaft-600 pb-2">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={9042}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Port"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input
+                      {...field}
+                      type="number"
+                      onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
+                    />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <Controller
+              control={control}
+              name="inputs.localDataCenter"
+              defaultValue="datacenter1"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Local Data Center"
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+            <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.keyspace"
+                defaultValue="default"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Keyspace"
+                    isOptional
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </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>
+                )}
+              />
+              <Accordion type="multiple" className="w-full bg-mineshaft-700">
+                <AccordionItem value="modify-sql-statement">
+                  <AccordionTrigger>Modify CQL Statements</AccordionTrigger>
+                  <AccordionContent>
+                    <Controller
+                      control={control}
+                      name="inputs.creationStatement"
+                      defaultValue={
+                        "CREATE ROLE '{{username}}' WITH PASSWORD '{{password}}' AND LOGIN=true;\nGRANT ALL PERMISSIONS ON ALL KEYSPACES TO '{{username}}';"
+                      }
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Creation Statement"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                          helperText="variables: keyspace. username, password and expiration are dynamically provisioned"
+                        >
+                          <TextArea
+                            {...field}
+                            reSize="none"
+                            rows={3}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
+                    <Controller
+                      control={control}
+                      name="inputs.revocationStatement"
+                      defaultValue='DROP ROLE "{{username}}";'
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Revocation Statement"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                          helperText="variables: keyspace, username is dynamically provisioned"
+                        >
+                          <TextArea
+                            {...field}
+                            reSize="none"
+                            rows={3}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
+                    <Controller
+                      control={control}
+                      name="inputs.renewStatement"
+                      defaultValue=""
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Renew Statement"
+                          helperText="variables: keyspace, username and expiration are dynamically provisioned"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <TextArea
+                            {...field}
+                            reSize="none"
+                            rows={3}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </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/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretElasticSearchForm.tsx

@@ -0,0 +1,427 @@
+import { Controller, 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,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const authMethods = [
+  {
+    label: "Username/Password",
+    value: "user"
+  },
+  {
+    label: "API Key",
+    value: "api-key"
+  }
+] as const;
+
+const formSchema = z.object({
+  inputs: z.object({
+    host: z.string().trim().min(1),
+    port: z.coerce.number(),
+
+    // two auth types "user, apikey"
+    auth: z.discriminatedUnion("type", [
+      z.object({
+        type: z.literal("user"),
+        username: z.string().trim(),
+        password: z.string().trim()
+      }),
+      z.object({
+        type: z.literal("api-key"),
+        apiKey: z.string().trim(),
+        apiKeyId: z.string().trim()
+      })
+    ]),
+
+    roles: z.array(z.string().trim().min(1)).min(1, "At least one role is required"),
+    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")
+    .optional()
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onClose: () => void;
+  dynamicSecret: TDynamicSecret & { inputs: unknown };
+  secretPath: string;
+  environment: string;
+  projectSlug: string;
+};
+
+export const EditDynamicSecretElasticSearchForm = ({
+  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.isPending) 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 {
+      createNotification({
+        type: "error",
+        text: "Failed to update dynamic secret"
+      });
+    }
+  };
+
+  const selectedAuthType = watch("inputs.auth.type");
+  const selectedRoles = watch("inputs.roles");
+
+  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 {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="inputs.port"
+                  defaultValue={443}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="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.auth.type"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Authentication Method"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className="w-full"
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        className="w-full"
+                        onValueChange={(e) => {
+                          const authFields = [
+                            "inputs.auth.username",
+                            "inputs.auth.password",
+                            "inputs.auth.apiKey",
+                            "inputs.auth.apiKeyId"
+                          ] as const;
+
+                          authFields.forEach((f) => {
+                            setValue(f, "");
+                          });
+
+                          field.onChange(e);
+                        }}
+                      >
+                        {authMethods.map((authType) => (
+                          <SelectItem value={authType.value} key={`auth-method-${authType.value}`}>
+                            {authType.label}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={
+                    selectedAuthType === "user" ? "inputs.auth.username" : "inputs.auth.apiKeyId"
+                  }
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label={selectedAuthType === "user" ? "Username" : "API Key ID"}
+                      className="w-full"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} autoComplete="off" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={selectedAuthType === "user" ? "inputs.auth.password" : "inputs.auth.apiKey"}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label={selectedAuthType === "user" ? "Password" : "API Key"}
+                      className="w-full"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="password" autoComplete="new-password" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+
+              <div className="relative mb-3 flex flex-col">
+                <FormLabel
+                  label="Roles"
+                  tooltipText={
+                    <div className="space-y-4">
+                      <p>Select which role(s) to assign the users provisioned by Infisical.</p>
+                      <p>
+                        There is a wide range of in-built roles in Elastic Search. Some include,
+                        superuser, apm_user, kibana_admin, monitoring_user, and many more. You can{" "}
+                        <a
+                          href="https://www.elastic.co/guide/en/elasticsearch/reference/current/built-in-roles.html"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          <span className="cursor-pointer text-primary-400">
+                            read more about roles here
+                          </span>
+                        </a>
+                        .
+                      </p>
+                      <p>
+                        You can also assign custom roles by providing the name of the custom role in
+                        the input field.
+                      </p>
+                    </div>
+                  }
+                />
+                {selectedRoles.map((_, i) => (
+                  <Controller
+                    control={control}
+                    name={`inputs.roles.${i}`}
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={`role-${i}`}
+                    render={({ field, fieldState: { error } }) => (
+                      <div className="flex items-center gap-2">
+                        <div className="flex-grow">
+                          <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
+                            <Input
+                              placeholder="Insert role name, (superuser, kibana_admin, custom_role)"
+                              className="mb-0 flex-grow"
+                              {...field}
+                            />
+                          </FormControl>
+                        </div>
+
+                        <IconButton
+                          isDisabled={selectedRoles.length === 1}
+                          ariaLabel="delete key"
+                          className="bottom-2 h-9"
+                          variant="outline_bg"
+                          onClick={() => {
+                            if (selectedRoles && selectedRoles?.length > 1) {
+                              setValue(
+                                "inputs.roles",
+                                selectedRoles.filter((__, idx) => idx !== i)
+                              );
+                            }
+                          }}
+                        >
+                          <FontAwesomeIcon icon={faTrash} />
+                        </IconButton>
+                      </div>
+                    )}
+                  />
+                ))}
+
+                <div>
+                  <Button
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    size="xs"
+                    className="bottom-2"
+                    variant="outline_bg"
+                    onClick={() => {
+                      setValue("inputs.roles", [...selectedRoles, ""]);
+                    }}
+                  >
+                    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>
+        <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>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretForm.tsx

@@ -0,0 +1,317 @@
+import { AnimatePresence, motion } from "framer-motion";
+
+import { Spinner } from "@app/components/v2";
+import { useGetDynamicSecretDetails } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+import { EditDynamicSecretAwsElastiCacheProviderForm } from "./EditDynamicSecretAwsElastiCacheProviderForm";
+import { EditDynamicSecretAwsIamForm } from "./EditDynamicSecretAwsIamForm";
+import { EditDynamicSecretAzureEntraIdForm } from "./EditDynamicSecretAzureEntraIdForm";
+import { EditDynamicSecretCassandraForm } from "./EditDynamicSecretCassandraForm";
+import { EditDynamicSecretElasticSearchForm } from "./EditDynamicSecretElasticSearchForm";
+import { EditDynamicSecretLdapForm } from "./EditDynamicSecretLdapForm";
+import { EditDynamicSecretMongoAtlasForm } from "./EditDynamicSecretMongoAtlasForm";
+import { EditDynamicSecretMongoDBForm } from "./EditDynamicSecretMongoDBForm";
+import { EditDynamicSecretRabbitMqForm } from "./EditDynamicSecretRabbitMqForm";
+import { EditDynamicSecretRedisProviderForm } from "./EditDynamicSecretRedisProviderForm";
+import { EditDynamicSecretSapAseForm } from "./EditDynamicSecretSapAseForm";
+import { EditDynamicSecretSapHanaForm } from "./EditDynamicSecretSapHanaForm";
+import { EditDynamicSecretSnowflakeForm } from "./EditDynamicSecretSnowflakeForm";
+import { EditDynamicSecretSqlProviderForm } from "./EditDynamicSecretSqlProviderForm";
+import { EditDynamicSecretTotpForm } from "./EditDynamicSecretTotpForm";
+
+type Props = {
+  onClose: () => void;
+  dynamicSecretName: string;
+  projectSlug: string;
+  environment: string;
+  secretPath: string;
+};
+
+export const EditDynamicSecretForm = ({
+  dynamicSecretName,
+  environment,
+  projectSlug,
+  onClose,
+  secretPath
+}: Props) => {
+  const { data: dynamicSecretDetails, isLoading: isDynamicSecretLoading } =
+    useGetDynamicSecretDetails({
+      projectSlug,
+      environmentSlug: environment,
+      name: dynamicSecretName,
+      path: secretPath
+    });
+
+  if (isDynamicSecretLoading) {
+    return (
+      <div className="flex w-full items-center justify-center p-8">
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <AnimatePresence mode="wait">
+      {dynamicSecretDetails?.type === DynamicSecretProviders.SqlDatabase && (
+        <motion.div
+          key="sqldatabase-provider-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretSqlProviderForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
+      {dynamicSecretDetails?.type === DynamicSecretProviders.Cassandra && (
+        <motion.div
+          key="cassandra-provider-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretCassandraForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
+      {dynamicSecretDetails?.type === DynamicSecretProviders.AwsIam && (
+        <motion.div
+          key="aws-iam-provider-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretAwsIamForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
+      {dynamicSecretDetails?.type === DynamicSecretProviders.Redis && (
+        <motion.div
+          key="redis-provider-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretRedisProviderForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
+      {dynamicSecretDetails?.type === DynamicSecretProviders.AwsElastiCache && (
+        <motion.div
+          key="redis-provider-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretAwsElastiCacheProviderForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
+      {dynamicSecretDetails?.type === DynamicSecretProviders.MongoAtlas && (
+        <motion.div
+          key="mongo-atlas-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretMongoAtlasForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
+
+      {dynamicSecretDetails?.type === DynamicSecretProviders.ElasticSearch && (
+        <motion.div
+          key="elastic-search-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretElasticSearchForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </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>
+      )}
+
+      {dynamicSecretDetails?.type === DynamicSecretProviders.AzureEntraId && (
+        <motion.div
+          key="azure-entra-id-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretAzureEntraIdForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
+
+      {dynamicSecretDetails?.type === DynamicSecretProviders.Ldap && (
+        <motion.div
+          key="ldap-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretLdapForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
+      {dynamicSecretDetails?.type === DynamicSecretProviders.SapHana && (
+        <motion.div
+          key="sap-hana-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretSapHanaForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
+      {dynamicSecretDetails?.type === DynamicSecretProviders.SapAse && (
+        <motion.div
+          key="sap-ase-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretSapAseForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
+      {dynamicSecretDetails?.type === DynamicSecretProviders.Snowflake && (
+        <motion.div
+          key="snowflake-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretSnowflakeForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
+      {dynamicSecretDetails?.type === DynamicSecretProviders.Totp && (
+        <motion.div
+          key="totp-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretTotpForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretLdapForm.tsx

@@ -0,0 +1,344 @@
+import { Controller, useForm } from "react-hook-form";
+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, Input, Select, SelectItem, TextArea } from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+enum CredentialType {
+  Dynamic = "dynamic",
+  Static = "static"
+}
+
+const credentialTypes = [
+  {
+    label: "Dynamic",
+    value: CredentialType.Dynamic
+  },
+  {
+    label: "Static",
+    value: CredentialType.Static
+  }
+] as const;
+
+const formSchema = z.object({
+  inputs: z.discriminatedUnion("credentialType", [
+    z.object({
+      url: z.string().trim().min(1),
+      binddn: z.string().trim().min(1),
+      bindpass: z.string().trim().min(1),
+      ca: z.string().optional(),
+      credentialType: z.literal(CredentialType.Dynamic),
+      creationLdif: z.string().min(1),
+      revocationLdif: z.string().min(1),
+      rollbackLdif: z.string().optional()
+    }),
+    z.object({
+      url: z.string().trim().min(1),
+      binddn: z.string().trim().min(1),
+      bindpass: z.string().trim().min(1),
+      ca: z.string().optional(),
+      credentialType: z.literal(CredentialType.Static),
+      rotationLdif: z.string().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" });
+    })
+    .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 EditDynamicSecretLdapForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    watch,
+    setValue
+  } = 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 selectedCredentialType = watch("inputs.credentialType");
+
+  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+    // wait till previous request is finished
+    if (updateDynamicSecret.isPending) 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 {
+      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 className="mt-4">
+          <Controller
+            control={control}
+            name="inputs.url"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="URL" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="inputs.binddn"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Bind DN" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="inputs.bindpass"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Bind Password"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} type="password" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="inputs.ca"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="CA" isError={Boolean(error)} errorText={error?.message}>
+                <TextArea {...field} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="inputs.credentialType"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Credential Type"
+                isError={Boolean(error?.message)}
+                errorText={error?.message}
+                className="w-full"
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  className="w-full"
+                  onValueChange={(e) => {
+                    const ldifFields = [
+                      "inputs.creationLdif",
+                      "inputs.revocationLdif",
+                      "inputs.rollbackLdif",
+                      "inputs.rotationLdif"
+                    ] as const;
+
+                    ldifFields.forEach((f) => {
+                      setValue(f, "");
+                    });
+
+                    field.onChange(e);
+                  }}
+                >
+                  {credentialTypes.map((credentialType) => (
+                    <SelectItem
+                      value={credentialType.value}
+                      key={`credential-type-${credentialType.value}`}
+                    >
+                      {credentialType.label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          {selectedCredentialType === CredentialType.Dynamic && (
+            <>
+              <Controller
+                control={control}
+                name="inputs.creationLdif"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Creation LDIF"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <TextArea {...field} />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="inputs.revocationLdif"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Revocation LDIF"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <TextArea {...field} />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="inputs.rollbackLdif"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Rollback LDIF"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <TextArea {...field} />
+                  </FormControl>
+                )}
+              />
+            </>
+          )}
+          {selectedCredentialType === CredentialType.Static && (
+            <Controller
+              control={control}
+              name="inputs.rotationLdif"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Rotation LDIF"
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <TextArea {...field} />
+                </FormControl>
+              )}
+            />
+          )}
+        </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>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoAtlasForm.tsx

@@ -0,0 +1,466 @@
+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 {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  FormLabel,
+  IconButton,
+  Input,
+  Select,
+  SelectItem
+} 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({
+      adminPublicKey: z.string().trim().min(1),
+      adminPrivateKey: z.string().trim().min(1),
+      groupId: z.string().trim().min(1),
+      roles: z
+        .object({
+          collectionName: z.string().optional(),
+          databaseName: z.string().min(1),
+          roleName: z.string().min(1)
+        })
+        .array()
+        .min(1),
+      scopes: z
+        .object({
+          name: z.string().min(1),
+          type: z.string().min(1)
+        })
+        .array()
+    })
+    .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;
+};
+
+const ATLAS_SCOPE_TYPES = [
+  {
+    label: "Cluster",
+    value: "CLUSTER"
+  },
+  {
+    label: "Data Lake",
+    value: "DATA_LAKE"
+  },
+  {
+    label: "Stream",
+    value: "STREAM"
+  }
+];
+
+export const EditDynamicSecretMongoAtlasForm = ({
+  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"])
+      }
+    }
+  });
+
+  const roleFields = useFieldArray({
+    control,
+    name: "inputs.roles"
+  });
+
+  const scopeFields = useFieldArray({
+    control,
+    name: "inputs.scopes"
+  });
+
+  const updateDynamicSecret = useUpdateDynamicSecret();
+
+  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+    // wait till previous request is finished
+    if (updateDynamicSecret.isPending) 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 {
+      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.adminPublicKey"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Admin Public Key"
+                    className="flex-grow"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} placeholder="" />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="inputs.adminPrivateKey"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Admin Private Key"
+                    className="flex-grow"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} type="password" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <Controller
+              control={control}
+              name="inputs.groupId"
+              defaultValue=""
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Group/Project ID"
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                  helperText="Unique 24-hexadecimal digit string that identifies your project"
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+            <FormLabel label="Roles" />
+            <div className="mb-3 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">
+                    {i === 0 && <span className="text-xs text-mineshaft-400">Database Name</span>}
+                    <Controller
+                      control={control}
+                      name={`inputs.roles.${i}.databaseName`}
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                          className="mb-0"
+                        >
+                          <Input {...field} />
+                        </FormControl>
+                      )}
+                    />
+                  </div>
+                  <div className="flex-grow">
+                    {i === 0 && (
+                      <FormLabel
+                        label="Collection Name"
+                        className="text-xs text-mineshaft-400"
+                        isOptional
+                      />
+                    )}
+                    <Controller
+                      control={control}
+                      name={`inputs.roles.${i}.collectionName`}
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                          className="mb-0"
+                        >
+                          <Input {...field} />
+                        </FormControl>
+                      )}
+                    />
+                  </div>
+                  <div className="flex-grow">
+                    {i === 0 && (
+                      <FormLabel
+                        label="Role"
+                        className="text-xs text-mineshaft-400"
+                        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.`}
+                      />
+                    )}
+                    <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", [{ databaseName: "", roleName: "" }]);
+                      }
+                    }}
+                  >
+                    <FontAwesomeIcon icon={faTrash} />
+                  </IconButton>
+                </div>
+              ))}
+              <div>
+                <Button
+                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                  size="xs"
+                  variant="outline_bg"
+                  onClick={() => roleFields.append({ databaseName: "", roleName: "" })}
+                >
+                  Add Role
+                </Button>
+              </div>
+            </div>
+            <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+              <AccordionItem value="advance-section">
+                <AccordionTrigger>Advanced</AccordionTrigger>
+                <AccordionContent>
+                  <FormLabel
+                    label="Scopes"
+                    isOptional
+                    className="mb-2"
+                    tooltipClassName="max-w-md whitespace-pre-line"
+                    tooltipText="List that contains clusters, MongoDB Atlas Data Lakes, and MongoDB Atlas Streams Instances that this database user can access. If omitted, MongoDB Cloud grants the database user access to all the clusters, MongoDB Atlas Data Lakes, and MongoDB Atlas Streams Instances in the project."
+                  />
+                  <div className="mb-2 flex flex-col space-y-2">
+                    {scopeFields.fields.map(({ id: scopeFieldId }, i) => (
+                      <div key={scopeFieldId} className="flex items-end space-x-2">
+                        <div className="flex-grow">
+                          {i === 0 && (
+                            <FormLabel
+                              label="Label"
+                              className="text-xs text-mineshaft-400"
+                              tooltipClassName="max-w-md whitespace-pre-line"
+                              tooltipText="Human-readable label that identifies the cluster or MongoDB Atlas Data Lake that this database user can access."
+                            />
+                          )}
+                          <Controller
+                            control={control}
+                            name={`inputs.scopes.${i}.name`}
+                            render={({ field, fieldState: { error } }) => (
+                              <FormControl
+                                isError={Boolean(error?.message)}
+                                errorText={error?.message}
+                                className="mb-0 flex-grow"
+                              >
+                                <Input {...field} placeholder="Cluster or data lake id" />
+                              </FormControl>
+                            )}
+                          />
+                        </div>
+                        <div className="flex-grow">
+                          {i === 0 && <span className="text-xs text-mineshaft-400">Type</span>}
+                          <Controller
+                            control={control}
+                            name={`inputs.scopes.${i}.type`}
+                            render={({ field, fieldState: { error } }) => (
+                              <FormControl
+                                isError={Boolean(error?.message)}
+                                errorText={error?.message}
+                                className="mb-0 flex-grow"
+                              >
+                                <Select
+                                  defaultValue={field.value}
+                                  {...field}
+                                  onValueChange={(e) => field.onChange(e)}
+                                  className="w-full"
+                                >
+                                  {ATLAS_SCOPE_TYPES.map((el) => (
+                                    <SelectItem value={el.value} key={`atlas-scope-${el.value}`}>
+                                      {el.label}
+                                    </SelectItem>
+                                  ))}
+                                </Select>
+                              </FormControl>
+                            )}
+                          />
+                        </div>
+                        <IconButton
+                          ariaLabel="delete key"
+                          className="bottom-0.5 h-9"
+                          variant="outline_bg"
+                          onClick={() => {
+                            scopeFields.remove(i);
+                          }}
+                        >
+                          <FontAwesomeIcon icon={faTrash} />
+                        </IconButton>
+                      </div>
+                    ))}
+                    <div>
+                      <Button
+                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                        size="xs"
+                        variant="outline_bg"
+                        onClick={() =>
+                          scopeFields.append({ name: "", type: ATLAS_SCOPE_TYPES[0].value })
+                        }
+                      >
+                        Add Scope
+                      </Button>
+                    </div>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </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/pages/secret-manager/SecretDashboardPage/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.isPending) 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 {
+      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/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRabbitMqForm.tsx

@@ -0,0 +1,422 @@
+import { Controller, 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().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.isPending) 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 {
+      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 />
+                        <a
+                          href="https://www.rabbitmq.com/docs/management#permissions"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          <span className="cursor-pointer text-primary-400">
+                            Read more about management tags here
+                          </span>
+                        </a>
+                        .
+                      </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>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRedisProviderForm.tsx

@@ -0,0 +1,338 @@
+import { Controller, useForm } from "react-hook-form";
+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 {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  Input,
+  SecretInput,
+  TextArea
+} 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(),
+      username: z.string().min(1),
+      password: z.string().min(1).optional(),
+
+      creationStatement: z.string().min(1),
+      renewStatement: z.string().optional(),
+      revocationStatement: z.string().min(1),
+      ca: z.string().optional()
+    })
+    .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 EditDynamicSecretRedisProviderForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = 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.isPending) 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 {
+      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">
+            <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={6379}
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Port"
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} type="number" />
+                </FormControl>
+              )}
+            />
+          </div>
+          <div className="flex space-x-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
+                  className="w-full"
+                  tooltipText="Required if your Redis server is password protected."
+                  label="Username"
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} type="password" autoComplete="new-password" />
+                </FormControl>
+              )}
+            />
+          </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>
+              )}
+            />
+            <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+              <AccordionItem value="advance-statements">
+                <AccordionTrigger>Modify Redis Statements</AccordionTrigger>
+                <AccordionContent>
+                  <Controller
+                    control={control}
+                    name="inputs.creationStatement"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Creation Statement"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        helperText="username, password and expiration are dynamically provisioned"
+                      >
+                        <TextArea
+                          {...field}
+                          reSize="none"
+                          rows={3}
+                          className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                        />
+                      </FormControl>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="inputs.revocationStatement"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Revocation Statement"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        helperText="username is dynamically provisioned"
+                      >
+                        <TextArea
+                          {...field}
+                          reSize="none"
+                          rows={3}
+                          className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                        />
+                      </FormControl>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="inputs.renewStatement"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Renew Statement"
+                        helperText="username and expiration are dynamically provisioned"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <TextArea
+                          {...field}
+                          reSize="none"
+                          rows={3}
+                          className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                        />
+                      </FormControl>
+                    )}
+                  />
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </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/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapAseForm.tsx

@@ -0,0 +1,331 @@
+import { Controller, useForm } from "react-hook-form";
+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 {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  Input,
+  SecretInput,
+  TextArea
+} 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(),
+      database: z.string().min(1),
+      username: z.string().min(1),
+      password: z.string().min(1),
+      creationStatement: z.string().min(1),
+      revocationStatement: z.string().min(1),
+      ca: z.string().optional()
+    })
+    .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" });
+    }),
+  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;
+  projectSlug: string;
+  environment: string;
+};
+
+export const EditDynamicSecretSapAseForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = 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.isPending) 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 {
+      createNotification({
+        type: "error",
+        text: "Failed to update dynamic secret"
+      });
+    }
+  };
+
+  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"
+                  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"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Port"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="number" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="inputs.database"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Database"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="text" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div className="flex w-full items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="inputs.username"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      className="w-full"
+                      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
+                      className="w-full"
+                      label="Password"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="password" autoComplete="new-password" />
+                    </FormControl>
+                  )}
+                />
+              </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>
+                  )}
+                />
+                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                  <AccordionItem value="advance-statements">
+                    <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
+                    <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="inputs.creationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Creation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            helperText="username and password are dynamically provisioned. The sp_addlogin statement is automatically called against the master database. All other statements are called against the database you specify."
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                      <Controller
+                        control={control}
+                        name="inputs.revocationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Revocation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            helperText="username is dynamically provisioned. The sp_droplogin statement is automatically called against the master database. All other statements are called against the database you specify."
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              </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>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapHanaForm.tsx

@@ -0,0 +1,337 @@
+import { Controller, useForm } from "react-hook-form";
+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 {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  Input,
+  SecretInput,
+  TextArea
+} 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(),
+      username: z.string().min(1),
+      password: z.string().min(1),
+      creationStatement: z.string().min(1),
+      revocationStatement: z.string().min(1),
+      renewStatement: z.string().optional(),
+      ca: z.string().optional()
+    })
+    .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" });
+    }),
+  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;
+  projectSlug: string;
+  environment: string;
+};
+
+export const EditDynamicSecretSapHanaForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = 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.isPending) 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 {
+      createNotification({
+        type: "error",
+        text: "Failed to update dynamic secret"
+      });
+    }
+  };
+
+  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 {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="inputs.port"
+                  defaultValue={443}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Port"
+                      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>
+                  )}
+                />
+              </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>
+                  )}
+                />
+                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                  <AccordionItem value="advance-statements">
+                    <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
+                    <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="inputs.creationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Creation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            helperText="username, password and expiration are dynamically provisioned"
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                      <Controller
+                        control={control}
+                        name="inputs.revocationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Revocation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            helperText="username is dynamically provisioned"
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                      <Controller
+                        control={control}
+                        name="inputs.renewStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Renew Statement"
+                            helperText="username and expiration are dynamically provisioned"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              </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>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSnowflakeForm.tsx

@@ -0,0 +1,339 @@
+import { Controller, useForm } from "react-hook-form";
+import { faArrowUpRightFromSquare, faBookOpen } 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 {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  Input,
+  TextArea
+} 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({
+      accountId: z.string().min(1),
+      orgId: z.string().min(1),
+      username: z.string().min(1),
+      password: z.string().min(1),
+      creationStatement: z.string().trim().min(1),
+      revocationStatement: z.string().trim().min(1),
+      renewStatement: z.string().trim().optional()
+    })
+    .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" });
+    }),
+  newName: z
+    .string()
+    .trim()
+    .min(1)
+    .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onClose: () => void;
+  dynamicSecret: TDynamicSecret & { inputs: unknown };
+  secretPath: string;
+  projectSlug: string;
+  environment: string;
+};
+
+export const EditDynamicSecretSnowflakeForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = 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.isPending) 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: err instanceof Error ? err.message : "Failed to update dynamic secret"
+      });
+    }
+  };
+
+  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
+              <a
+                href="https://infisical.com/docs/documentation/platform/dynamic-secrets/snowflake"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div className="mb-1 ml-2 inline-block rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                  Docs
+                  <FontAwesomeIcon
+                    icon={faArrowUpRightFromSquare}
+                    className="mb-[0.07rem] ml-1.5 text-xxs"
+                  />
+                </div>
+              </a>
+            </div>
+            <div className="flex flex-col">
+              <div className="flex items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="inputs.accountId"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Account Identifer"
+                      className="flex-grow"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="inputs.orgId"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Organizaton Identifier"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div className="flex items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="inputs.username"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="User"
+                      className="flex-grow"
+                      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="flex-grow"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="password" autoComplete="new-password" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+
+              <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                <AccordionItem value="advance-statements">
+                  <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
+                  <AccordionContent>
+                    <Controller
+                      control={control}
+                      name="inputs.creationStatement"
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Creation Statement"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                          helperText="username, password and expiration are dynamically provisioned"
+                        >
+                          <TextArea
+                            {...field}
+                            reSize="none"
+                            rows={3}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
+                    <Controller
+                      control={control}
+                      name="inputs.revocationStatement"
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Revocation Statement"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                          helperText="username is dynamically provisioned"
+                        >
+                          <TextArea
+                            {...field}
+                            reSize="none"
+                            rows={3}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
+                    <Controller
+                      control={control}
+                      name="inputs.renewStatement"
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Renew Statement"
+                          helperText="username and expiration are dynamically provisioned"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <TextArea
+                            {...field}
+                            reSize="none"
+                            rows={3}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </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>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSqlProviderForm.tsx

@@ -0,0 +1,383 @@
+import { Controller, useForm } from "react-hook-form";
+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 {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  Input,
+  SecretInput,
+  Select,
+  SelectItem,
+  TextArea
+} from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { SqlProviders, TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+  inputs: z
+    .object({
+      client: z.nativeEnum(SqlProviders),
+      host: z.string().toLowerCase().min(1),
+      port: z.number(),
+      database: z.string().min(1),
+      username: z.string().min(1),
+      password: z.string().min(1),
+      creationStatement: z.string().min(1),
+      revocationStatement: z.string().min(1),
+      renewStatement: z.string().optional(),
+      ca: z.string().optional()
+    })
+    .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 EditDynamicSecretSqlProviderForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = 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.isPending) 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 {
+      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 border-b border-b-mineshaft-600 pb-2">Configuration</div>
+          <div className="flex flex-col">
+            <Controller
+              control={control}
+              name="inputs.client"
+              defaultValue={SqlProviders.Postgres}
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
+                  <Select
+                    isDisabled
+                    value={value}
+                    onValueChange={(val) => onChange(val)}
+                    className="w-full border border-mineshaft-500"
+                  >
+                    <SelectItem value={SqlProviders.Postgres}>PostgreSQL</SelectItem>
+                    <SelectItem value={SqlProviders.MySql}>MySQL</SelectItem>
+                    <SelectItem value={SqlProviders.Oracle}>Oracle</SelectItem>
+                    <SelectItem value={SqlProviders.MsSQL}>MS SQL</SelectItem>
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <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={5432}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Port"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input
+                      {...field}
+                      type="number"
+                      onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
+                    />
+                  </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>
+            <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>
+                )}
+              />
+              <Accordion type="multiple" className="w-full bg-mineshaft-700">
+                <AccordionItem value="modify-sql-statement">
+                  <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
+                  <AccordionContent>
+                    <Controller
+                      control={control}
+                      name="inputs.creationStatement"
+                      defaultValue={
+                        "CREATE USER \"{{username}}\" WITH SUPERUSER ENCRYPTED PASSWORD '{{password}}' VALID UNTIL '{{expiration}}';\nGRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO \"{{username}}\";"
+                      }
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Creation Statement"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                          helperText="username, password and expiration are dynamically provisioned"
+                        >
+                          <TextArea
+                            {...field}
+                            reSize="none"
+                            rows={3}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
+                    <Controller
+                      control={control}
+                      name="inputs.revocationStatement"
+                      defaultValue={
+                        'REVOKE ALL PRIVILEGES ON ALL TABLES IN SCHEMA public FROM "{{username}}";\nDROP OWNED BY "{{username}}"; DROP ROLE "{{username}}";'
+                      }
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Revocation Statement"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                          helperText="username is dynamically provisioned"
+                        >
+                          <TextArea
+                            {...field}
+                            reSize="none"
+                            rows={3}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
+                    <Controller
+                      control={control}
+                      name="inputs.renewStatement"
+                      defaultValue={"ALTER ROLE \"{{username}}\" VALID UNTIL '{{expiration}}';"}
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Renew Statement"
+                          helperText="username and expiration are dynamically provisioned"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <TextArea
+                            {...field}
+                            reSize="none"
+                            rows={3}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </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/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretTotpForm.tsx

@@ -0,0 +1,316 @@
+import { Controller, useForm } from "react-hook-form";
+import { faArrowUpRightFromSquare, faBookOpen } 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, Input, Select, SelectItem } from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+enum ConfigType {
+  URL = "url",
+  MANUAL = "manual"
+}
+
+enum TotpAlgorithm {
+  SHA1 = "sha1",
+  SHA256 = "sha256",
+  SHA512 = "sha512"
+}
+
+const formSchema = z.object({
+  inputs: z
+    .discriminatedUnion("configType", [
+      z.object({
+        configType: z.literal(ConfigType.URL),
+        url: z
+          .string()
+          .url()
+          .trim()
+          .min(1)
+          .refine((val) => {
+            const urlObj = new URL(val);
+            const secret = urlObj.searchParams.get("secret");
+
+            return Boolean(secret);
+          }, "OTP URL must contain secret field")
+      }),
+      z.object({
+        configType: z.literal(ConfigType.MANUAL),
+        secret: z
+          .string()
+          .trim()
+          .min(1)
+          .transform((val) => val.replace(/\s+/g, "")),
+        period: z.number().optional(),
+        algorithm: z.nativeEnum(TotpAlgorithm).optional(),
+        digits: z.number().optional()
+      })
+    ])
+    .optional(),
+  newName: z
+    .string()
+    .trim()
+    .min(1)
+    .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onClose: () => void;
+  dynamicSecret: TDynamicSecret & { inputs: unknown };
+  secretPath: string;
+  projectSlug: string;
+  environment: string;
+};
+
+export const EditDynamicSecretTotpForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    watch,
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      newName: dynamicSecret.name,
+      inputs: dynamicSecret.inputs as TForm["inputs"]
+    }
+  });
+
+  const selectedConfigType = watch("inputs.configType");
+  const updateDynamicSecret = useUpdateDynamicSecret();
+
+  const handleUpdateDynamicSecret = async ({ inputs, newName }: TForm) => {
+    // wait till previous request is finished
+    if (updateDynamicSecret.isPending) return;
+    try {
+      await updateDynamicSecret.mutateAsync({
+        name: dynamicSecret.name,
+        path: secretPath,
+        projectSlug,
+        environmentSlug: environment,
+        data: {
+          inputs,
+          newName: newName === dynamicSecret.name ? undefined : newName
+        }
+      });
+      onClose();
+      createNotification({
+        type: "success",
+        text: "Successfully updated dynamic secret"
+      });
+    } catch (err) {
+      createNotification({
+        type: "error",
+        text: err instanceof Error ? err.message : "Failed to update dynamic secret"
+      });
+    }
+  };
+
+  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>
+          <div>
+            <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+              Configuration
+              <a
+                href="https://infisical.com/docs/documentation/platform/dynamic-secrets/totp"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div className="mb-1 ml-2 inline-block rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                  Docs
+                  <FontAwesomeIcon
+                    icon={faArrowUpRightFromSquare}
+                    className="mb-[0.07rem] ml-1.5 text-xxs"
+                  />
+                </div>
+              </a>
+            </div>
+            <div className="flex flex-col">
+              <Controller
+                control={control}
+                name="inputs.configType"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Configuration Type"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    className="w-full"
+                  >
+                    <Select
+                      defaultValue={field.value}
+                      {...field}
+                      className="w-full"
+                      onValueChange={(val) => {
+                        field.onChange(val);
+                      }}
+                      dropdownContainerClassName="max-w-full"
+                    >
+                      <SelectItem value={ConfigType.URL} key="config-type-url">
+                        URL
+                      </SelectItem>
+                      <SelectItem value={ConfigType.MANUAL} key="config-type-manual">
+                        Manual
+                      </SelectItem>
+                    </Select>
+                  </FormControl>
+                )}
+              />
+              {selectedConfigType === ConfigType.URL && (
+                <Controller
+                  control={control}
+                  name="inputs.url"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="OTP URL"
+                      className="flex-grow"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+              )}
+              {selectedConfigType === ConfigType.MANUAL && (
+                <>
+                  <Controller
+                    control={control}
+                    name="inputs.secret"
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Secret Key"
+                        className="flex-grow"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input {...field} />
+                      </FormControl>
+                    )}
+                  />
+                  <div className="flex flex-row gap-2">
+                    <Controller
+                      control={control}
+                      name="inputs.period"
+                      defaultValue={30}
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Period"
+                          className="flex-grow"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <Input
+                            {...field}
+                            type="number"
+                            onChange={(e) => field.onChange(Number(e.target.value))}
+                          />
+                        </FormControl>
+                      )}
+                    />
+                    <Controller
+                      control={control}
+                      name="inputs.digits"
+                      defaultValue={6}
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Digits"
+                          className="flex-grow"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <Input
+                            {...field}
+                            type="number"
+                            onChange={(e) => field.onChange(Number(e.target.value))}
+                          />
+                        </FormControl>
+                      )}
+                    />
+                    <Controller
+                      control={control}
+                      name="inputs.algorithm"
+                      defaultValue={TotpAlgorithm.SHA1}
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Algorithm"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                          className="w-full"
+                        >
+                          <Select
+                            defaultValue={field.value}
+                            {...field}
+                            className="w-full"
+                            dropdownContainerClassName="max-w-full"
+                            onValueChange={(val) => {
+                              field.onChange(val);
+                            }}
+                          >
+                            <SelectItem value={TotpAlgorithm.SHA1} key="algorithm-sha-1">
+                              SHA1
+                            </SelectItem>
+                            <SelectItem value={TotpAlgorithm.SHA256} key="algorithm-sha-256">
+                              SHA256
+                            </SelectItem>
+                            <SelectItem value={TotpAlgorithm.SHA512} key="algorithm-sha-512">
+                              SHA512
+                            </SelectItem>
+                          </Select>
+                        </FormControl>
+                      )}
+                    />
+                  </div>
+                  <p className="mb-8 text-sm font-normal text-gray-400">
+                    The period, digits, and algorithm values can remain at their defaults unless
+                    your TOTP provider specifies otherwise.
+                  </p>
+                </>
+              )}
+            </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>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/index.tsx

@@ -0,0 +1 @@
+export { EditDynamicSecretForm } from "./EditDynamicSecretForm";

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/RenewDynamicSecretLease.tsx

@@ -0,0 +1,106 @@
+import { Controller, useForm } from "react-hook-form";
+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, Input } from "@app/components/v2";
+import { useRenewDynamicSecretLease } from "@app/hooks/api";
+
+const formSchema = z.object({
+  ttl: z.string().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" });
+  })
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onClose: () => void;
+  leaseId: string;
+  dynamicSecretName: string;
+  projectSlug: string;
+  environment: string;
+  secretPath: string;
+};
+
+export const RenewDynamicSecretLease = ({
+  onClose,
+  projectSlug,
+  dynamicSecretName,
+  leaseId,
+  secretPath,
+  environment
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      ttl: "1h"
+    }
+  });
+
+  const renewDynamicSecretLease = useRenewDynamicSecretLease();
+
+  const handleDynamicSecretLeaseCreate = async ({ ttl }: TForm) => {
+    if (renewDynamicSecretLease.isPending) return;
+    try {
+      await renewDynamicSecretLease.mutateAsync({
+        environmentSlug: environment,
+        projectSlug,
+        path: secretPath,
+        ttl,
+        dynamicSecretName,
+        leaseId
+      });
+      onClose();
+      createNotification({
+        type: "success",
+        text: "Successfully renewed lease"
+      });
+    } catch (error) {
+      console.log(error);
+      createNotification({
+        type: "error",
+        text: "Failed to renew lease"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleDynamicSecretLeaseCreate)}>
+      <Controller
+        control={control}
+        name="ttl"
+        defaultValue="1h"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label={<TtlFormLabel label="TTL" />}
+            isError={Boolean(error?.message)}
+            errorText={error?.message}
+            helperText="The existing expiration time will be extended by the TTL"
+          >
+            <Input {...field} />
+          </FormControl>
+        )}
+      />
+      <div className="mt-4 flex items-center space-x-4">
+        <Button type="submit" isLoading={isSubmitting}>
+          Renew
+        </Button>
+        <Button variant="outline_bg" onClick={onClose}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/index.tsx

@@ -0,0 +1 @@
+export { DynamicSecretListView } from "./DynamicSecretListView";