merge main

frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationsTable.tsx

@@ -32,6 +32,11 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { useSyncIntegration } from "@app/hooks/api/integrations/queries";
@@ -110,7 +115,14 @@ export const IntegrationsTable = ({
     orderBy,
     setOrderDirection,
     setOrderBy
-  } = usePagination<IntegrationsOrderBy>(IntegrationsOrderBy.App, { initPerPage: 20 });
+  } = usePagination<IntegrationsOrderBy>(IntegrationsOrderBy.App, {
+    initPerPage: getUserTablePreference("integrationsTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("integrationsTable", PreferenceKey.PerPage, newPerPage);
+  };
 
   useEffect(() => {
     if (integrations?.some((integration) => integration.isSynced === false))
@@ -437,7 +449,7 @@ export const IntegrationsTable = ({
             page={page}
             perPage={perPage}
             onChangePage={setPage}
-            onChangePerPage={setPerPage}
+            onChangePerPage={handlePerPageChange}
           />
         )}
         {!isLoading && !filteredIntegrations?.length && (

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/1PasswordSyncDestinationCol.tsx

@@ -0,0 +1,14 @@
+import { TOnePassSync } from "@app/hooks/api/secretSyncs/types/1password-sync";
+
+import { getSecretSyncDestinationColValues } from "../helpers";
+import { SecretSyncTableCell } from "../SecretSyncTableCell";
+
+type Props = {
+  secretSync: TOnePassSync;
+};
+
+export const OnePassSyncDestinationCol = ({ secretSync }: Props) => {
+  const { primaryText, secondaryText } = getSecretSyncDestinationColValues(secretSync);
+
+  return <SecretSyncTableCell primaryText={primaryText} secondaryText={secondaryText} />;
+};

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/SecretSyncDestinationCol.tsx

@@ -1,5 +1,6 @@
 import { SecretSync, TSecretSync } from "@app/hooks/api/secretSyncs";
 
+import { OnePassSyncDestinationCol } from "./1PasswordSyncDestinationCol";
 import { AwsParameterStoreSyncDestinationCol } from "./AwsParameterStoreSyncDestinationCol";
 import { AwsSecretsManagerSyncDestinationCol } from "./AwsSecretsManagerSyncDestinationCol";
 import { AzureAppConfigurationDestinationSyncCol } from "./AzureAppConfigurationDestinationSyncCol";
@@ -52,6 +53,8 @@ export const SecretSyncDestinationCol = ({ secretSync }: Props) => {
       return <TeamCitySyncDestinationCol secretSync={secretSync} />;
     case SecretSync.OCIVault:
       return <OCIVaultSyncDestinationCol secretSync={secretSync} />;
+    case SecretSync.OnePass:
+      return <OnePassSyncDestinationCol secretSync={secretSync} />;
     default:
       throw new Error(
         `Unhandled Secret Sync Destination Col: ${(secretSync as TSecretSync).destination}`

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncsTable.tsx

@@ -38,6 +38,11 @@ import {
 } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import {
@@ -119,7 +124,14 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
     orderBy,
     setOrderDirection,
     setOrderBy
-  } = usePagination<SecretSyncsOrderBy>(SecretSyncsOrderBy.Name, { initPerPage: 20 });
+  } = usePagination<SecretSyncsOrderBy>(SecretSyncsOrderBy.Name, {
+    initPerPage: getUserTablePreference("secretSyncTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("secretSyncTable", PreferenceKey.PerPage, newPerPage);
+  };
 
   const filteredSecretSyncs = useMemo(
     () =>
@@ -465,7 +477,7 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
             page={page}
             perPage={perPage}
             onChangePage={setPage}
-            onChangePerPage={setPerPage}
+            onChangePerPage={handlePerPageChange}
           />
         )}
         {!filteredSecretSyncs?.length && (

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/helpers/index.ts

@@ -106,6 +106,10 @@ export const getSecretSyncDestinationColValues = (secretSync: TSecretSync) => {
       primaryText = destinationConfig.compartmentOcid;
       secondaryText = destinationConfig.vaultOcid;
       break;
+    case SecretSync.OnePass:
+      primaryText = destinationConfig.vaultId;
+      secondaryText = "Vault ID";
+      break;
     default:
       throw new Error(`Unhandled Destination Col Values ${destination}`);
   }

frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx

@@ -64,6 +64,11 @@ import {
   useWorkspace
 } from "@app/context";
 import { ProjectPermissionSecretRotationActions } from "@app/context/ProjectPermissionContext/types";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import {
   useCreateFolder,
@@ -180,7 +185,14 @@ export const OverviewPage = () => {
     page,
     setPerPage,
     orderBy
-  } = usePagination<DashboardSecretsOrderBy>(DashboardSecretsOrderBy.Name);
+  } = usePagination<DashboardSecretsOrderBy>(DashboardSecretsOrderBy.Name, {
+    initPerPage: getUserTablePreference("secretOverviewTable", PreferenceKey.PerPage, 100)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("secretOverviewTable", PreferenceKey.PerPage, newPerPage);
+  };
 
   const resetSelectedEntries = useCallback(() => {
     setSelectedEntries({
@@ -1416,7 +1428,7 @@ export const OverviewPage = () => {
               page={page}
               perPage={perPage}
               onChangePage={(newPage) => setPage(newPage)}
-              onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+              onChangePerPage={handlePerPageChange}
             />
           )}
         </div>

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -232,6 +232,7 @@ export const SecretEditRow = ({
               environment={environment}
               isImport={isImportedSecret}
               defaultValue={secretValueHidden ? "" : undefined}
+              canEditButNotView={secretValueHidden && !isOverride}
             />
           )}
         />

frontend/src/pages/secret-manager/SecretApprovalsPage/SecretApprovalsPage.tsx

@@ -44,8 +44,7 @@ export const SecretApprovalsPage = () => {
       <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 text-white">
         <PageHeader
           title="Approval Workflows"
-          description="Create approval policies for any modifications to secrets in sensitive environments and folders.
-"
+          description="Create approval policies for any modifications to secrets in sensitive environments and folders."
         >
           <a
             href="https://infisical.com/docs/documentation/platform/pr-workflows"

frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/jsx-no-useless-fragment */
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import {
   faCheck,
   faCheckCircle,
@@ -83,8 +83,9 @@ export const AccessApprovalRequest = ({
 }) => {
   const [selectedRequest, setSelectedRequest] = useState<
     | (TAccessApprovalRequest & {
-        user: TWorkspaceUser["user"] | null;
+        user: { firstName?: string; lastName?: string; email?: string } | null;
         isRequestedByCurrentUser: boolean;
+        isSelfApproveAllowed: boolean;
         isApprover: boolean;
       })
     | null
@@ -118,7 +119,7 @@ export const AccessApprovalRequest = ({
     projectSlug
   });
 
-  const { data: requests } = useGetAccessApprovalRequests({
+  const { data: requests, refetch: refetchRequests } = useGetAccessApprovalRequests({
     projectSlug,
     authorProjectMembershipId: requestedByFilter,
     envSlug: envFilter
@@ -143,56 +144,99 @@ export const AccessApprovalRequest = ({
     return requests;
   }, [requests, statusFilter, requestedByFilter, envFilter]);
 
-  const generateRequestDetails = (request: TAccessApprovalRequest) => {
-    const isReviewedByUser = request.reviewers.findIndex(({ member }) => member === user.id) !== -1;
-    const isRejectedByAnyone = request.reviewers.some(
-      ({ status }) => status === ApprovalStatus.REJECTED
-    );
-    const isApprover = request.policy.approvers.indexOf(user.id || "") !== -1;
-    const isAccepted = request.isApproved;
-    const isSoftEnforcement = request.policy.enforcementLevel === EnforcementLevel.Soft;
-    const isRequestedByCurrentUser = request.requestedByUserId === user.id;
-    const isSelfApproveAllowed = request.policy.allowedSelfApprovals;
-    const userReviewStatus = request.reviewers.find(({ member }) => member === user.id)?.status;
+  const generateRequestDetails = useCallback(
+    (request: TAccessApprovalRequest) => {
+      const isReviewedByUser =
+        request.reviewers.findIndex(({ member }) => member === user.id) !== -1;
+      const isRejectedByAnyone = request.reviewers.some(
+        ({ status }) => status === ApprovalStatus.REJECTED
+      );
+      const isApprover = request.policy.approvers.indexOf(user.id || "") !== -1;
+      const isAccepted = request.isApproved;
+      const isSoftEnforcement = request.policy.enforcementLevel === EnforcementLevel.Soft;
+      const isRequestedByCurrentUser = request.requestedByUserId === user.id;
+      const isSelfApproveAllowed = request.policy.allowedSelfApprovals;
+      const userReviewStatus = request.reviewers.find(({ member }) => member === user.id)?.status;
+      const canBypass =
+        !request.policy.bypassers.length || request.policy.bypassers.includes(user.id);
 
-    let displayData: { label: string; type: "primary" | "danger" | "success" } = {
-      label: "",
-      type: "primary"
-    };
-
-    const isExpired =
-      request.privilege &&
-      request.isApproved &&
-      new Date() > new Date(request.privilege.temporaryAccessEndTime || ("" as string));
-
-    if (isExpired) displayData = { label: "Access Expired", type: "danger" };
-    else if (isAccepted) displayData = { label: "Access Granted", type: "success" };
-    else if (isRejectedByAnyone) displayData = { label: "Rejected", type: "danger" };
-    else if (userReviewStatus === ApprovalStatus.APPROVED) {
-      displayData = {
-        label: `Pending ${request.policy.approvals - request.reviewers.length} review${
-          request.policy.approvals - request.reviewers.length > 1 ? "s" : ""
-        }`,
-        type: "primary"
-      };
-    } else if (!isReviewedByUser)
-      displayData = {
-        label: "Review Required",
+      let displayData: { label: string; type: "primary" | "danger" | "success" } = {
+        label: "",
         type: "primary"
       };
 
-    return {
-      displayData,
-      isReviewedByUser,
-      isRejectedByAnyone,
-      isApprover,
-      userReviewStatus,
-      isAccepted,
-      isSoftEnforcement,
-      isRequestedByCurrentUser,
-      isSelfApproveAllowed
-    };
-  };
+      const isExpired =
+        request.privilege &&
+        request.isApproved &&
+        new Date() > new Date(request.privilege.temporaryAccessEndTime || ("" as string));
+
+      if (isExpired) displayData = { label: "Access Expired", type: "danger" };
+      else if (isAccepted) displayData = { label: "Access Granted", type: "success" };
+      else if (isRejectedByAnyone) displayData = { label: "Rejected", type: "danger" };
+      else if (userReviewStatus === ApprovalStatus.APPROVED) {
+        displayData = {
+          label: `Pending ${request.policy.approvals - request.reviewers.length} review${
+            request.policy.approvals - request.reviewers.length > 1 ? "s" : ""
+          }`,
+          type: "primary"
+        };
+      } else if (!isReviewedByUser)
+        displayData = {
+          label: "Review Required",
+          type: "primary"
+        };
+
+      return {
+        displayData,
+        isReviewedByUser,
+        isRejectedByAnyone,
+        isApprover,
+        userReviewStatus,
+        isAccepted,
+        isSoftEnforcement,
+        canBypass,
+        isRequestedByCurrentUser,
+        isSelfApproveAllowed
+      };
+    },
+    [user]
+  );
+
+  const handleSelectRequest = useCallback(
+    (request: TAccessApprovalRequest) => {
+      const details = generateRequestDetails(request);
+
+      // Whether the request has already been approved / rejected / reviewed
+      const isInactive =
+        details.isAccepted || details.isReviewedByUser || details.isRejectedByAnyone;
+
+      // Whether the current user can bypass policy
+      const canBypass =
+        details.isSoftEnforcement && details.isRequestedByCurrentUser && details.canBypass;
+
+      // Whether the current user can approve
+      const canApprove =
+        details.isApprover && (!details.isRequestedByCurrentUser || details.isSelfApproveAllowed);
+
+      if (isInactive || (!canApprove && !canBypass)) return;
+
+      if (membersGroupById?.[request.requestedByUserId].user || details.isRequestedByCurrentUser) {
+        setSelectedRequest({
+          ...request,
+          user:
+            details.isRequestedByCurrentUser || !membersGroupById?.[request.requestedByUserId].user
+              ? user
+              : membersGroupById?.[request.requestedByUserId].user,
+          isRequestedByCurrentUser: details.isRequestedByCurrentUser,
+          isSelfApproveAllowed: details.isSelfApproveAllowed,
+          isApprover: details.isApprover
+        });
+      }
+
+      handlePopUpOpen("reviewRequest");
+    },
+    [generateRequestDetails, membersGroupById, user, setSelectedRequest, handlePopUpOpen]
+  );
 
   return (
     <div>
@@ -344,50 +388,10 @@ export const AccessApprovalRequest = ({
                     className="flex w-full cursor-pointer px-8 py-4 hover:bg-mineshaft-700 aria-disabled:opacity-80"
                     role="button"
                     tabIndex={0}
-                    onClick={() => {
-                      if (
-                        ((!details.isApprover ||
-                          details.isReviewedByUser ||
-                          details.isRejectedByAnyone ||
-                          details.isAccepted) &&
-                          !(
-                            details.isSoftEnforcement &&
-                            details.isRequestedByCurrentUser &&
-                            !details.isAccepted
-                          )) ||
-                        (request.requestedByUserId === user.id && !details.isSelfApproveAllowed)
-                      )
-                        return;
-                      if (membersGroupById?.[request.requestedByUserId].user) {
-                        setSelectedRequest({
-                          ...request,
-                          user: membersGroupById?.[request.requestedByUserId].user,
-                          isRequestedByCurrentUser: details.isRequestedByCurrentUser,
-                          isApprover: details.isApprover
-                        });
-                      }
-
-                      handlePopUpOpen("reviewRequest");
-                    }}
+                    onClick={() => handleSelectRequest(request)}
                     onKeyDown={(evt) => {
-                      if (
-                        !details.isApprover ||
-                        details.isAccepted ||
-                        details.isReviewedByUser ||
-                        details.isRejectedByAnyone
-                      )
-                        return;
                       if (evt.key === "Enter") {
-                        if (membersGroupById?.[request.requestedByUserId].user) {
-                          setSelectedRequest({
-                            ...request,
-                            user: membersGroupById?.[request.requestedByUserId].user,
-                            isRequestedByCurrentUser: details.isRequestedByCurrentUser,
-                            isApprover: details.isApprover
-                          });
-                        }
-
-                        handlePopUpOpen("reviewRequest");
+                        handleSelectRequest(request);
                       }
                     }}
                   >
@@ -453,7 +457,9 @@ export const AccessApprovalRequest = ({
           onOpenChange={() => {
             handlePopUpClose("reviewRequest");
             setSelectedRequest(null);
+            refetchRequests();
           }}
+          canBypass={generateRequestDetails(selectedRequest).canBypass}
         />
       )}
 

frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/RequestAccessModal.tsx

@@ -14,9 +14,9 @@ export const RequestAccessModal = ({
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent
-        className="max-w-4xl"
+        className="max-w-xl"
         title="Request Access"
-        subTitle="Your role has limited permissions, please contact your administrator to gain access"
+        subTitle="Request access to any secrets and resources based on the predefined policies."
       >
         <SpecificPrivilegeSecretForm onClose={() => onOpenChange(false)} policies={policies} />
       </ModalContent>

frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/ReviewAccessModal.tsx

@@ -1,14 +1,16 @@
 import { useCallback, useMemo, useState } from "react";
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ms from "ms";
+import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, Checkbox, Modal, ModalContent } from "@app/components/v2";
+import { Button, Checkbox, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
 import { Badge } from "@app/components/v2/Badge";
 import { ProjectPermissionActions } from "@app/context";
 import { useReviewAccessRequest } from "@app/hooks/api";
 import { TAccessApprovalRequest } from "@app/hooks/api/accessApproval/types";
 import { EnforcementLevel } from "@app/hooks/api/policies/enums";
-import { TWorkspaceUser } from "@app/hooks/api/types";
 
 export const ReviewAccessRequestModal = ({
   isOpen,
@@ -16,21 +18,26 @@ export const ReviewAccessRequestModal = ({
   request,
   projectSlug,
   selectedRequester,
-  selectedEnvSlug
+  selectedEnvSlug,
+  canBypass
 }: {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   request: TAccessApprovalRequest & {
-    user: TWorkspaceUser["user"] | null;
+    user: { firstName?: string; lastName?: string; email?: string } | null;
     isRequestedByCurrentUser: boolean;
+    isSelfApproveAllowed: boolean;
     isApprover: boolean;
   };
   projectSlug: string;
   selectedRequester: string | undefined;
   selectedEnvSlug: string | undefined;
+  canBypass: boolean;
 }) => {
   const [isLoading, setIsLoading] = useState<"approved" | "rejected" | null>(null);
-  const [byPassApproval, setByPassApproval] = useState(false);
+  const [bypassApproval, setBypassApproval] = useState(false);
+  const [bypassReason, setBypassReason] = useState("");
+
   const isSoftEnforcement = request.policy.enforcementLevel === EnforcementLevel.Soft;
 
   const accessDetails = {
@@ -80,31 +87,52 @@ export const ReviewAccessRequestModal = ({
 
   const reviewAccessRequest = useReviewAccessRequest();
 
-  const handleReview = useCallback(async (status: "approved" | "rejected") => {
-    setIsLoading(status);
-    try {
-      await reviewAccessRequest.mutateAsync({
-        requestId: request.id,
-        status,
-        projectSlug,
-        envSlug: selectedEnvSlug,
-        requestedBy: selectedRequester
-      });
-    } catch (error) {
-      console.error(error);
+  const handleReview = useCallback(
+    async (status: "approved" | "rejected") => {
+      if (bypassApproval && bypassReason.length < 10) {
+        createNotification({
+          title: "Failed to bypass approval",
+          text: "Reason must be 10 characters or longer",
+          type: "error"
+        });
+        return;
+      }
+
+      setIsLoading(status);
+      try {
+        await reviewAccessRequest.mutateAsync({
+          requestId: request.id,
+          status,
+          projectSlug,
+          envSlug: selectedEnvSlug,
+          requestedBy: selectedRequester,
+          bypassReason: bypassApproval ? bypassReason : undefined
+        });
+
+        createNotification({
+          title: `Request ${status}`,
+          text: `The request has been ${status}`,
+          type: status === "approved" ? "success" : "info"
+        });
+      } catch (error) {
+        console.error(error);
+        setIsLoading(null);
+        return;
+      }
+
       setIsLoading(null);
-      return;
-    }
-
-    createNotification({
-      title: `Request ${status}`,
-      text: `The request has been ${status}`,
-      type: status === "approved" ? "success" : "info"
-    });
-
-    setIsLoading(null);
-    onOpenChange(false);
-  }, []);
+      onOpenChange(false);
+    },
+    [
+      bypassApproval,
+      bypassReason,
+      reviewAccessRequest,
+      request,
+      selectedEnvSlug,
+      selectedRequester,
+      onOpenChange
+    ]
+  );
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
@@ -115,12 +143,17 @@ export const ReviewAccessRequestModal = ({
       >
         <div className="text-sm">
           <span>
-            <span className="font-bold">
-              {request.user?.firstName} {request.user?.lastName} ({request.user?.email})
-            </span>{" "}
+            {request.user &&
+            (request.user.firstName || request.user.lastName) &&
+            request.user.email ? (
+              <span className="font-bold">
+                {request.user?.firstName} {request.user?.lastName} ({request.user?.email})
+              </span>
+            ) : (
+              <span>A user</span>
+            )}{" "}
             is requesting access to the following resource:
           </span>
-
           <div className="mb-2 mt-4 border-l border-blue-500 bg-blue-500/20 px-3 py-2 text-mineshaft-200">
             <div className="mb-1 lowercase">
               <span className="font-bold capitalize">Requested path: </span>
@@ -144,12 +177,16 @@ export const ReviewAccessRequestModal = ({
               </div>
             )}
           </div>
-
           <div className="space-x-2">
             <Button
               isLoading={isLoading === "approved"}
               isDisabled={
-                !!isLoading || (!request.isApprover && !byPassApproval && isSoftEnforcement)
+                !!isLoading ||
+                (!(
+                  request.isApprover &&
+                  (!request.isRequestedByCurrentUser || request.isSelfApproveAllowed)
+                ) &&
+                  !bypassApproval)
               }
               onClick={() => handleReview("approved")}
               className="mt-4"
@@ -168,21 +205,42 @@ export const ReviewAccessRequestModal = ({
               Reject Request
             </Button>
           </div>
-          {isSoftEnforcement && request.isRequestedByCurrentUser && !request.isApprover && (
-            <div className="mt-4">
-              <Checkbox
-                onCheckedChange={(checked) => setByPassApproval(checked === true)}
-                isChecked={byPassApproval}
-                id="byPassApproval"
-                checkIndicatorBg="text-white"
-                className={byPassApproval ? "border-red bg-red hover:bg-red-600" : ""}
-              >
-                <span className="text-sm text-red">
-                  Approve without waiting for requirements to be met (bypass policy protection)
-                </span>
-              </Checkbox>
-            </div>
-          )}
+          {isSoftEnforcement &&
+            request.isRequestedByCurrentUser &&
+            !(request.isApprover && request.isSelfApproveAllowed) &&
+            canBypass && (
+              <div className="mt-2 flex flex-col space-y-2">
+                <Checkbox
+                  onCheckedChange={(checked) => setBypassApproval(checked === true)}
+                  isChecked={bypassApproval}
+                  id="byPassApproval"
+                  checkIndicatorBg="text-white"
+                  className={twMerge(
+                    "mr-2",
+                    bypassApproval ? "border-red bg-red hover:bg-red-600" : ""
+                  )}
+                >
+                  <span className="text-xs text-red">
+                    Approve without waiting for requirements to be met (bypass policy protection)
+                  </span>
+                </Checkbox>
+                {bypassApproval && (
+                  <FormControl
+                    label="Reason for bypass"
+                    className="mt-2"
+                    isRequired
+                    tooltipText="Enter a reason for bypassing the secret change policy"
+                  >
+                    <Input
+                      value={bypassReason}
+                      onChange={(e) => setBypassReason(e.currentTarget.value)}
+                      placeholder="Enter reason for bypass (min 10 chars)"
+                      leftIcon={<FontAwesomeIcon icon={faTriangleExclamation} />}
+                    />
+                  </FormControl>
+                )}
+              </div>
+            )}
         </div>
       </ModalContent>
     </Modal>

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx

@@ -29,13 +29,13 @@ import {
   Tr
 } from "@app/components/v2";
 import {
-  ProjectPermissionActions,
   ProjectPermissionSub,
   TProjectPermission,
   useProjectPermission,
   useSubscription,
   useWorkspace
 } from "@app/context";
+import { ProjectPermissionActions } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp } from "@app/hooks";
 import {
   useDeleteAccessApprovalPolicy,

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx

@@ -27,7 +27,11 @@ import {
   useCreateAccessApprovalPolicy,
   useUpdateAccessApprovalPolicy
 } from "@app/hooks/api/accessApproval";
-import { ApproverType, TAccessApprovalPolicy } from "@app/hooks/api/accessApproval/types";
+import {
+  ApproverType,
+  BypasserType,
+  TAccessApprovalPolicy
+} from "@app/hooks/api/accessApproval/types";
 import { EnforcementLevel, PolicyType } from "@app/hooks/api/policies/enums";
 import { TWorkspaceUser } from "@app/hooks/api/users/types";
 
@@ -45,7 +49,7 @@ const formSchema = z
     environment: z.object({ slug: z.string(), name: z.string() }),
     name: z.string().optional(),
     secretPath: z.string().optional(),
-    approvals: z.number().min(1),
+    approvals: z.number().min(1).default(1),
     userApprovers: z
       .object({ type: z.literal(ApproverType.User), id: z.string() })
       .array()
@@ -54,8 +58,16 @@ const formSchema = z
       .object({ type: z.literal(ApproverType.Group), id: z.string() })
       .array()
       .default([]),
+    userBypassers: z
+      .object({ type: z.literal(BypasserType.User), id: z.string() })
+      .array()
+      .default([]),
+    groupBypassers: z
+      .object({ type: z.literal(BypasserType.Group), id: z.string() })
+      .array()
+      .default([]),
     policyType: z.nativeEnum(PolicyType),
-    enforcementLevel: z.nativeEnum(EnforcementLevel),
+    enforcementLevel: z.nativeEnum(EnforcementLevel).default(EnforcementLevel.Hard),
     allowedSelfApprovals: z.boolean().default(true)
   })
   .superRefine((data, ctx) => {
@@ -103,6 +115,14 @@ export const AccessPolicyForm = ({
             editValues?.approvers
               ?.filter((approver) => approver.type === ApproverType.Group)
               .map(({ id, type }) => ({ id, type: type as ApproverType.Group })) || [],
+          userBypassers:
+            editValues?.bypassers
+              ?.filter((bypasser) => bypasser.type === BypasserType.User)
+              .map(({ id, type }) => ({ id, type: type as BypasserType.User })) || [],
+          groupBypassers:
+            editValues?.bypassers
+              ?.filter((bypasser) => bypasser.type === BypasserType.Group)
+              .map(({ id, type }) => ({ id, type: type as BypasserType.Group })) || [],
           approvals: editValues?.approvals,
           allowedSelfApprovals: editValues?.allowedSelfApprovals
         }
@@ -125,22 +145,30 @@ export const AccessPolicyForm = ({
   const { mutateAsync: updateSecretApprovalPolicy } = useUpdateSecretApprovalPolicy();
 
   const policyName = policyDetails[watch("policyType")]?.name || "Policy";
+  const enforcementLevel = watch("enforcementLevel");
 
-  const approversRequired = watch("approvals") || 1;
+  const formUserBypassers = watch("userBypassers");
+  const formGroupBypassers = watch("groupBypassers");
+  const bypasserCount = (formUserBypassers || []).length + (formGroupBypassers || []).length;
 
   const handleCreatePolicy = async ({
     environment,
     groupApprovers,
     userApprovers,
+    groupBypassers,
+    userBypassers,
     ...data
   }: TFormSchema) => {
     if (!projectId) return;
 
     try {
+      const bypassers = [...userBypassers, ...groupBypassers];
+
       if (data.policyType === PolicyType.ChangePolicy) {
         await createSecretApprovalPolicy({
           ...data,
           approvers: [...userApprovers, ...groupApprovers],
+          bypassers: bypassers.length > 0 ? bypassers : undefined,
           environment: environment.slug,
           workspaceId: currentWorkspace?.id || ""
         });
@@ -148,6 +176,7 @@ export const AccessPolicyForm = ({
         await createAccessApprovalPolicy({
           ...data,
           approvers: [...userApprovers, ...groupApprovers],
+          bypassers: bypassers.length > 0 ? bypassers : undefined,
           environment: environment.slug,
           projectSlug
         });
@@ -170,17 +199,22 @@ export const AccessPolicyForm = ({
     environment,
     userApprovers,
     groupApprovers,
+    userBypassers,
+    groupBypassers,
     ...data
   }: TFormSchema) => {
     if (!projectId || !projectSlug) return;
     if (!editValues?.id) return;
 
     try {
+      const bypassers = [...userBypassers, ...groupBypassers];
+
       if (data.policyType === PolicyType.ChangePolicy) {
         await updateSecretApprovalPolicy({
           id: editValues?.id,
           ...data,
           approvers: [...userApprovers, ...groupApprovers],
+          bypassers: bypassers.length > 0 ? bypassers : undefined,
           workspaceId: currentWorkspace?.id || ""
         });
       } else {
@@ -188,6 +222,7 @@ export const AccessPolicyForm = ({
           id: editValues?.id,
           ...data,
           approvers: [...userApprovers, ...groupApprovers],
+          bypassers: bypassers.length > 0 ? bypassers : undefined,
           environment: environment.slug,
           projectSlug
         });
@@ -232,6 +267,24 @@ export const AccessPolicyForm = ({
     [groups]
   );
 
+  const bypasserMemberOptions = useMemo(
+    () =>
+      members.map((member) => ({
+        id: member.user.id,
+        type: BypasserType.User
+      })),
+    [members]
+  );
+
+  const bypasserGroupOptions = useMemo(
+    () =>
+      groups?.map(({ group }) => ({
+        id: group.id,
+        type: BypasserType.Group
+      })),
+    [groups]
+  );
+
   return (
     <Modal isOpen={isOpen} onOpenChange={onToggle}>
       <ModalContent
@@ -303,73 +356,6 @@ export const AccessPolicyForm = ({
                   </FormControl>
                 )}
               />
-              <Controller
-                control={control}
-                name="enforcementLevel"
-                defaultValue={EnforcementLevel.Hard}
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    label="Enforcement Level"
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                    tooltipText={
-                      <>
-                        <p>
-                          Determines the level of enforcement for required approvers of a request:
-                        </p>
-                        <p className="mt-2">
-                          <span className="font-bold">Hard</span> enforcement requires at least{" "}
-                          <span className="font-bold"> {approversRequired}</span> approver(s) to
-                          approve the request.`
-                        </p>
-                        <p className="mt-2">
-                          <span className="font-bold">Soft</span> enforcement At least{" "}
-                          <span className="font-bold">{approversRequired}</span> approver(s) must
-                          approve the request; however, the requester can bypass approval
-                          requirements in emergencies.
-                        </p>
-                      </>
-                    }
-                  >
-                    <Select
-                      value={field.value}
-                      onValueChange={(val) => field.onChange(val as EnforcementLevel)}
-                      className="w-full border border-mineshaft-500"
-                    >
-                      {Object.values(EnforcementLevel).map((level) => {
-                        return (
-                          <SelectItem value={level} key={`enforcement-level-${level}`}>
-                            <span className="capitalize">{level}</span>
-                          </SelectItem>
-                        );
-                      })}
-                    </Select>
-                  </FormControl>
-                )}
-              />
-
-              <Controller
-                control={control}
-                name="environment"
-                render={({ field: { value, onChange }, fieldState: { error } }) => (
-                  <FormControl
-                    label="Environment"
-                    isRequired
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                  >
-                    <FilterableSelect
-                      isDisabled={isEditMode}
-                      value={value}
-                      onChange={onChange}
-                      placeholder="Select environment..."
-                      options={environments}
-                      getOptionValue={(option) => option.slug}
-                      getOptionLabel={(option) => option.name}
-                    />
-                  </FormControl>
-                )}
-              />
               <Controller
                 control={control}
                 name="secretPath"
@@ -386,64 +372,90 @@ export const AccessPolicyForm = ({
                 )}
               />
             </div>
+            <Controller
+              control={control}
+              name="environment"
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  label="Environment"
+                  isRequired
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <FilterableSelect
+                    isDisabled={isEditMode}
+                    value={value}
+                    onChange={onChange}
+                    placeholder="Select environment..."
+                    options={environments}
+                    getOptionValue={(option) => option.slug}
+                    getOptionLabel={(option) => option.name}
+                  />
+                </FormControl>
+              )}
+            />
             <div className="mb-2">
               <p>Approvers</p>
               <p className="font-inter text-xs text-mineshaft-300 opacity-90">
                 Select members or groups that are allowed to approve requests from this policy.
               </p>
             </div>
-            <Controller
-              control={control}
-              name="userApprovers"
-              render={({ field: { value, onChange }, fieldState: { error } }) => (
-                <FormControl
-                  label="User Approvers"
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                >
-                  <FilterableSelect
-                    menuPlacement="top"
-                    isMulti
-                    placeholder="Select members that are allowed to approve requests..."
-                    options={memberOptions}
-                    getOptionValue={(option) => option.id}
-                    getOptionLabel={(option) => {
-                      const member = members?.find((m) => m.user.id === option.id);
+            <div className="flex gap-2">
+              <Controller
+                control={control}
+                name="userApprovers"
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    label="User Approvers"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                    className="w-1/2"
+                  >
+                    <FilterableSelect
+                      menuPlacement="top"
+                      isMulti
+                      placeholder="Select members..."
+                      options={memberOptions}
+                      getOptionValue={(option) => option.id}
+                      getOptionLabel={(option) => {
+                        const member = members?.find((m) => m.user.id === option.id);
 
-                      if (!member) return option.id;
+                        if (!member) return option.id;
 
-                      return getMemberLabel(member);
-                    }}
-                    value={value}
-                    onChange={onChange}
-                  />
-                </FormControl>
-              )}
-            />
-            <Controller
-              control={control}
-              name="groupApprovers"
-              render={({ field: { value, onChange }, fieldState: { error } }) => (
-                <FormControl
-                  label="Group Approvers"
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                >
-                  <FilterableSelect
-                    menuPlacement="top"
-                    isMulti
-                    placeholder="Select groups that are allowed to approve requests..."
-                    options={groupOptions}
-                    getOptionValue={(option) => option.id}
-                    getOptionLabel={(option) =>
-                      groups?.find(({ group }) => group.id === option.id)?.group.name ?? option.id
-                    }
-                    value={value}
-                    onChange={onChange}
-                  />
-                </FormControl>
-              )}
-            />
+                        return getMemberLabel(member);
+                      }}
+                      value={value}
+                      onChange={onChange}
+                    />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="groupApprovers"
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    label="Group Approvers"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                    className="w-1/2"
+                  >
+                    <FilterableSelect
+                      menuPlacement="top"
+                      isMulti
+                      placeholder="Select groups..."
+                      options={groupOptions}
+                      getOptionValue={(option) => option.id}
+                      getOptionLabel={(option) =>
+                        groups?.find(({ group }) => group.id === option.id)?.group.name ?? option.id
+                      }
+                      value={value}
+                      onChange={onChange}
+                    />
+                  </FormControl>
+                )}
+              />
+            </div>
             <Controller
               control={control}
               name="allowedSelfApprovals"
@@ -465,6 +477,97 @@ export const AccessPolicyForm = ({
                 </FormControl>
               )}
             />
+            <Controller
+              control={control}
+              name="enforcementLevel"
+              defaultValue={EnforcementLevel.Hard}
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  label="Bypass Approvals"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  className="mb-3"
+                >
+                  <Switch
+                    id="bypass-approvals"
+                    thumbClassName="bg-mineshaft-800"
+                    isChecked={value === EnforcementLevel.Soft}
+                    onCheckedChange={(v) =>
+                      onChange(v ? EnforcementLevel.Soft : EnforcementLevel.Hard)
+                    }
+                  >
+                    Allow certain users to bypass policy in break-glass situations
+                  </Switch>
+                </FormControl>
+              )}
+            />
+            {enforcementLevel === EnforcementLevel.Soft && (
+              <>
+                <div className="flex gap-2">
+                  <Controller
+                    control={control}
+                    name="userBypassers"
+                    render={({ field: { value, onChange }, fieldState: { error } }) => (
+                      <FormControl
+                        label="User Bypassers"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                        className="mb-2 w-1/2"
+                      >
+                        <FilterableSelect
+                          menuPlacement="top"
+                          isMulti
+                          placeholder="Select members..."
+                          options={bypasserMemberOptions}
+                          getOptionValue={(option) => option.id}
+                          getOptionLabel={(option) => {
+                            const member = members?.find((m) => m.user.id === option.id);
+
+                            if (!member) return option.id;
+
+                            return getMemberLabel(member);
+                          }}
+                          value={value}
+                          onChange={onChange}
+                        />
+                      </FormControl>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="groupBypassers"
+                    render={({ field: { value, onChange }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Group Bypassers"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                        className="mb-2 w-1/2"
+                      >
+                        <FilterableSelect
+                          menuPlacement="top"
+                          isMulti
+                          placeholder="Select groups..."
+                          options={bypasserGroupOptions}
+                          getOptionValue={(option) => option.id}
+                          getOptionLabel={(option) =>
+                            groups?.find(({ group }) => group.id === option.id)?.group.name ??
+                            option.id
+                          }
+                          value={value}
+                          onChange={onChange}
+                        />
+                      </FormControl>
+                    )}
+                  />
+                </div>
+
+                {bypasserCount <= 0 && (
+                  <div className="mt-1 flex rounded-r border-l-2 border-l-red-500 bg-mineshaft-300/5 px-4 py-2.5 text-sm text-bunker-300">
+                    Not selecting specific users or groups will allow anyone to bypass this policy.
+                  </div>
+                )}
+              </>
+            )}
             <div className="mt-8 flex items-center space-x-4">
               <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
                 Save

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/ApprovalPolicyRow.tsx

@@ -14,7 +14,8 @@ import {
   Tr
 } from "@app/components/v2";
 import { Badge } from "@app/components/v2/Badge";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionActions } from "@app/context/ProjectPermissionContext/types";
 import { getMemberLabel } from "@app/helpers/members";
 import { policyDetails } from "@app/helpers/policies";
 import { Approver } from "@app/hooks/api/accessApproval/types";

frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx

@@ -4,10 +4,9 @@ import {
   faClose,
   faLandMineOn,
   faLockOpen,
-  faSquareCheck,
-  faSquareXmark,
   faTriangleExclamation,
-  faUserLock
+  faUserLock,
+  faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
@@ -27,6 +26,7 @@ type Props = {
   status: "close" | "open";
   approvals: number;
   canApprove?: boolean;
+  isBypasser: boolean;
   statusChangeByEmail?: string;
   workspaceId: string;
   enforcementLevel: EnforcementLevel;
@@ -41,7 +41,8 @@ export const SecretApprovalRequestAction = ({
   statusChangeByEmail,
   workspaceId,
   enforcementLevel,
-  canApprove
+  canApprove,
+  isBypasser
 }: Props) => {
   const { mutateAsync: performSecretApprovalMerge, isPending: isMerging } =
     usePerformSecretApprovalRequestMerge();
@@ -101,62 +102,76 @@ export const SecretApprovalRequestAction = ({
 
   if (!hasMerged && status === "open") {
     return (
-      <div className="flex w-full items-start justify-between transition-all">
-        <div className="flex items-start space-x-4">
-          <FontAwesomeIcon
-            icon={isMergable ? faSquareCheck : faSquareXmark}
-            className={twMerge("pt-1 text-2xl", isMergable ? "text-primary" : "text-red-600")}
-          />
+      <div className="flex w-full flex-col items-start justify-between py-4 transition-all">
+        <div className="flex items-center space-x-4 px-4">
+          <div
+            className={`flex items-center justify-center rounded-full ${isMergable ? "h-10 w-10 bg-green" : "h-11 w-11 bg-red-600"}`}
+          >
+            <FontAwesomeIcon
+              icon={isMergable ? faCheck : faXmark}
+              className={isMergable ? "text-lg text-black" : "text-2xl text-white"}
+            />
+          </div>
           <span className="flex flex-col">
-            {isMergable ? "Good to merge" : "Review required"}
-            <span className="inline-block text-xs text-bunker-200">
-              At least {approvals} approving review required
-              {Boolean(statusChangeByEmail) && `. Reopened by ${statusChangeByEmail}`}
-            </span>
-            {isSoftEnforcement && !isMergable && (
-              <div className="mt-2 flex flex-col space-y-2">
-                <Checkbox
-                  onCheckedChange={(checked) => setByPassApproval(checked === true)}
-                  isChecked={byPassApproval}
-                  id="byPassApproval"
-                  checkIndicatorBg="text-white"
-                  className={twMerge(
-                    "mr-2",
-                    byPassApproval ? "border-red bg-red hover:bg-red-600" : ""
-                  )}
-                >
-                  <span className="text-xs text-red">
-                    Merge without waiting for approval (bypass secret change policy)
-                  </span>
-                </Checkbox>
-                {byPassApproval && (
-                  <FormControl
-                    label="Reason for bypass"
-                    className="mt-2"
-                    isRequired
-                    tooltipText="Enter a reason for bypassing the secret change policy"
-                  >
-                    <Input
-                      value={bypassReason}
-                      onChange={(e) => setBypassReason(e.target.value)}
-                      placeholder="Enter reason for bypass (min 10 chars)"
-                      leftIcon={<FontAwesomeIcon icon={faTriangleExclamation} />}
-                    />
-                  </FormControl>
-                )}
-              </div>
+            <p className={`text-md font-medium ${isMergable && "text-lg"}`}>
+              {isMergable ? "Good to merge" : "Merging is blocked"}
+            </p>
+            {!isMergable && (
+              <span className="inline-block text-xs text-bunker-200">
+                At least {approvals} approving review{`${approvals > 1 ? "s" : ""}`} required by
+                eligible reviewers.
+                {Boolean(statusChangeByEmail) && `. Reopened by ${statusChangeByEmail}`}
+              </span>
             )}
           </span>
         </div>
-        <div className="flex items-center space-x-2">
+        {isSoftEnforcement && !isMergable && isBypasser && (
+          <div
+            className={`mt-4 w-full border-mineshaft-600 px-5 ${isMergable ? "border-t pb-2" : "border-y pb-4"}`}
+          >
+            <div className="mt-2 flex flex-col space-y-2 pt-2">
+              <Checkbox
+                onCheckedChange={(checked) => setByPassApproval(checked === true)}
+                isChecked={byPassApproval}
+                id="byPassApproval"
+                checkIndicatorBg="text-white"
+                className={twMerge(
+                  "mr-2",
+                  byPassApproval ? "border-red bg-red hover:bg-red-600" : ""
+                )}
+              >
+                <span className="text-sm">
+                  Merge without waiting for approval (bypass secret change policy)
+                </span>
+              </Checkbox>
+              {byPassApproval && (
+                <FormControl
+                  label="Reason for bypass"
+                  className="mt-2"
+                  isRequired
+                  tooltipText="Enter a reason for bypassing the secret change policy"
+                >
+                  <Input
+                    value={bypassReason}
+                    onChange={(e) => setBypassReason(e.target.value)}
+                    placeholder="Enter reason for bypass (min 10 chars)"
+                    leftIcon={<FontAwesomeIcon icon={faTriangleExclamation} />}
+                  />
+                </FormControl>
+              )}
+            </div>
+          </div>
+        )}
+        <div className="mt-2 flex w-full items-center justify-end space-x-2 px-4">
           {canApprove || isSoftEnforcement ? (
-            <>
+            <div className="flex items-center space-x-4">
               <Button
                 onClick={() => handleSecretApprovalStatusChange("close")}
                 isLoading={isStatusChanging}
                 variant="outline_bg"
-                colorSchema="secondary"
+                colorSchema="primary"
                 leftIcon={<FontAwesomeIcon icon={faClose} />}
+                className="hover:border-red/60 hover:bg-red/10"
               >
                 Close request
               </Button>
@@ -175,7 +190,7 @@ export const SecretApprovalRequestAction = ({
               >
                 Merge
               </Button>
-            </>
+            </div>
           ) : (
             <div>Only approvers can merge</div>
           )}
@@ -186,13 +201,13 @@ export const SecretApprovalRequestAction = ({
 
   if (hasMerged && status === "close")
     return (
-      <div className="flex w-full items-center justify-between">
-        <div className="flex items-start space-x-4">
+      <div className="flex w-full items-center justify-between rounded-md border border-primary/60 bg-primary/10">
+        <div className="flex items-start space-x-4 p-4">
           <FontAwesomeIcon icon={faCheck} className="pt-1 text-2xl text-primary" />
           <span className="flex flex-col">
-            Secret approval merged
+            Change request merged
             <span className="inline-block text-xs text-bunker-200">
-              Merged by {statusChangeByEmail}
+              Merged by {statusChangeByEmail}.
             </span>
           </span>
         </div>

frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx

@@ -1,18 +1,18 @@
-import { faExclamationTriangle, faInfo, faKey } from "@fortawesome/free-solid-svg-icons";
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable no-nested-ternary */
+import { useState } from "react";
+import {
+  faCircleXmark,
+  faExclamationTriangle,
+  faEye,
+  faEyeSlash,
+  faInfo,
+  faKey
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import {
-  SecretInput,
-  Table,
-  TableContainer,
-  Tag,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tooltip,
-  Tr
-} from "@app/components/v2";
+import { Tag, Tooltip } from "@app/components/v2";
 import { CommitType, SecretV3Raw, TSecretApprovalSecChange, WsTag } from "@app/hooks/api/types";
 
 export type Props = {
@@ -29,19 +29,19 @@ export type Props = {
 
 const generateItemTitle = (op: CommitType) => {
   let text = { label: "", color: "" };
-  if (op === CommitType.CREATE) text = { label: "create", color: "#16a34a" };
-  else if (op === CommitType.UPDATE) text = { label: "change", color: "#ea580c" };
-  else text = { label: "deletion", color: "#b91c1c" };
+  if (op === CommitType.CREATE) text = { label: "create", color: "#60DD00" };
+  else if (op === CommitType.UPDATE) text = { label: "change", color: "#F8EB30" };
+  else text = { label: "deletion", color: "#F83030" };
 
   return (
-    <span>
+    <div className="text-md pb-2 font-medium">
       Request for <span style={{ color: text.color }}>secret {text.label}</span>
-    </span>
+    </div>
   );
 };
 
 const generateConflictText = (op: CommitType) => {
-  if (op === CommitType.CREATE) return <div>Secret already exist</div>;
+  if (op === CommitType.CREATE) return <div>Secret already exists</div>;
   if (op === CommitType.UPDATE) return <div>Secret not found</div>;
   return null;
 };
@@ -59,10 +59,12 @@ export const SecretApprovalRequestChangeItem = ({
   const itemConflict =
     hasMerged && conflicts.find((el) => el.op === op && el.secretId === newVersion?.id);
   const hasConflict = Boolean(itemConflict);
+  const [isOldSecretValueVisible, setIsOldSecretValueVisible] = useState(false);
+  const [isNewSecretValueVisible, setIsNewSecretValueVisible] = useState(false);
 
   return (
-    <div className="rounded-lg bg-bunker-500 px-4 pb-4 pt-2">
-      <div className="flex items-center px-1 py-3">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 pb-4 pt-2">
+      <div className="flex items-center px-1 py-1">
         <div className="flex-grow">{generateItemTitle(op)}</div>
         {!hasMerged && isStale && (
           <div className="flex items-center">
@@ -79,48 +81,86 @@ export const SecretApprovalRequestChangeItem = ({
           </div>
         )}
       </div>
-      <TableContainer>
-        <Table>
-          <THead>
-            <Tr>
-              {op === CommitType.UPDATE && <Th className="w-12 shrink-0" />}
-              <Th className="w-48 shrink-0">Secret</Th>
-              <Th className="min-w-0 flex-1">Value</Th>
-              <Th className="w-24 shrink-0">Comment</Th>
-              <Th className="w-24 shrink-0">Tags</Th>
-              <Th className="w-40 shrink-0">Metadata</Th>
-            </Tr>
-          </THead>
-          {op === CommitType.UPDATE ? (
-            <TBody>
-              <Tr>
-                <Td className="text-red-600">OLD</Td>
-                <Td>{secretVersion?.secretKey}</Td>
-                <Td>
+      <div>
+        <div className="flex flex-col space-x-0 space-y-4 xl:flex-row xl:space-x-4 xl:space-y-0">
+          {op === CommitType.UPDATE || op === CommitType.DELETE ? (
+            <div className="flex w-full cursor-default flex-col rounded-md border border-red-600/60 bg-red-600/10 p-4 xl:w-1/2">
+              <div className="mb-4 flex flex-row justify-between">
+                <span className="text-md font-medium">Legacy Secret</span>
+                <div className="rounded-full bg-red px-2 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
+                  <FontAwesomeIcon icon={faCircleXmark} className="pr-1 text-white" />
+                  Deprecated
+                </div>
+              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Key</div>
+                <div className="text-sm">{secretVersion?.secretKey} </div>
+              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Value</div>
+                <div className="text-sm">
                   {newVersion?.isRotatedSecret ? (
                     <span className="text-mineshaft-400">
                       Rotated Secret value will not be affected
                     </span>
                   ) : (
-                    <SecretInput isReadOnly value={secretVersion?.secretValue} />
-                  )}
-                </Td>
-                <Td>{secretVersion?.secretComment}</Td>
-                <Td className="flex flex-wrap gap-2">
-                  {secretVersion?.tags?.map(({ slug, id: tagId, color }) => (
-                    <Tag
-                      className="flex w-min items-center space-x-2"
-                      key={`${secretVersion.id}-${tagId}`}
+                    <div
+                      onClick={() => setIsOldSecretValueVisible(!isOldSecretValueVisible)}
+                      className="flex flex-row items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-900 pl-2"
                     >
                       <div
-                        className="h-3 w-3 rounded-full"
-                        style={{ backgroundColor: color || "#bec2c8" }}
-                      />
-                      <div className="text-sm">{slug}</div>
-                    </Tag>
-                  ))}
-                </Td>
-                <Td>
+                        className={`flex font-mono ${isOldSecretValueVisible || !secretVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`}
+                      >
+                        {isOldSecretValueVisible
+                          ? secretVersion?.secretValue || "EMPTY"
+                          : secretVersion?.secretValue
+                            ? secretVersion?.secretValue?.split("").map(() => "•")
+                            : "EMPTY"}{" "}
+                      </div>
+                      {secretVersion?.secretValue && (
+                        <div className="flex h-10 w-10 items-center justify-center">
+                          <FontAwesomeIcon
+                            icon={isOldSecretValueVisible ? faEyeSlash : faEye}
+                            className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
+                          />
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Comment</div>
+                <div className="text-sm">
+                  {secretVersion?.secretComment || (
+                    <span className="text-sm text-mineshaft-300">-</span>
+                  )}{" "}
+                </div>
+              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Tags</div>
+                <div className="flex flex-wrap gap-2">
+                  {(secretVersion?.tags?.length ?? 0) ? (
+                    secretVersion?.tags?.map(({ slug, id: tagId, color }) => (
+                      <Tag
+                        className="flex w-min items-center space-x-2"
+                        key={`${secretVersion.id}-${tagId}`}
+                      >
+                        <div
+                          className="h-3 w-3 rounded-full"
+                          style={{ backgroundColor: color || "#bec2c8" }}
+                        />
+                        <div className="text-sm">{slug}</div>
+                      </Tag>
+                    ))
+                  ) : (
+                    <span className="text-sm text-mineshaft-300">-</span>
+                  )}
+                </div>
+              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Metadata</div>
+                <div>
                   {secretVersion?.secretMetadata?.length ? (
                     <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
                       {secretVersion.secretMetadata?.map((el) => (
@@ -146,93 +186,77 @@ export const SecretApprovalRequestChangeItem = ({
                   ) : (
                     <p className="text-sm text-mineshaft-300">-</p>
                   )}
-                </Td>
-              </Tr>
-              <Tr>
-                <Td className="text-green-600">NEW</Td>
-                <Td>{newVersion?.secretKey}</Td>
-                <Td>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="text-md flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 text-mineshaft-300 xl:w-1/2">
+              {" "}
+              Secret not existent in the previous version.
+            </div>
+          )}
+          {op === CommitType.UPDATE || op === CommitType.CREATE ? (
+            <div className="flex w-full cursor-default flex-col rounded-md border border-green-600/60 bg-green-600/10 p-4 xl:w-1/2">
+              <div className="mb-4 flex flex-row justify-between">
+                <span className="text-md font-medium">New Secret</span>
+                <div className="rounded-full bg-green-600 px-2 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
+                  <FontAwesomeIcon icon={faCircleXmark} className="pr-1 text-white" />
+                  Current
+                </div>
+              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Key</div>
+                <div className="text-sm">{newVersion?.secretKey} </div>
+              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Value</div>
+                <div className="text-sm">
                   {newVersion?.isRotatedSecret ? (
                     <span className="text-mineshaft-400">
                       Rotated Secret value will not be affected
                     </span>
                   ) : (
-                    <SecretInput isReadOnly value={newVersion?.secretValue} />
-                  )}
-                </Td>
-                <Td>{newVersion?.secretComment}</Td>
-                <Td className="flex flex-wrap gap-2">
-                  {newVersion?.tags?.map(({ slug, id: tagId, color }) => (
-                    <Tag
-                      className="flex w-min items-center space-x-2"
-                      key={`${newVersion.id}-${tagId}`}
+                    <div
+                      onClick={() => setIsNewSecretValueVisible(!isNewSecretValueVisible)}
+                      className="flex flex-row items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-900 pl-2"
                     >
                       <div
-                        className="h-3 w-3 rounded-full"
-                        style={{ backgroundColor: color || "#bec2c8" }}
-                      />
-                      <div className="text-sm">{slug}</div>
-                    </Tag>
-                  ))}
-                </Td>
-                <Td>
-                  {newVersion?.secretMetadata?.length ? (
-                    <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
-                      {newVersion.secretMetadata?.map((el) => (
-                        <div key={el.key} className="flex items-center">
-                          <Tag
-                            size="xs"
-                            className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
-                          >
-                            <FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
-                            <div>{el.key}</div>
-                          </Tag>
-                          <Tag
-                            size="xs"
-                            className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
-                          >
-                            <div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap">
-                              {el.value}
-                            </div>
-                          </Tag>
+                        className={`flex font-mono ${isNewSecretValueVisible || !newVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`}
+                      >
+                        {isNewSecretValueVisible
+                          ? newVersion?.secretValue || "EMPTY"
+                          : newVersion?.secretValue
+                            ? newVersion?.secretValue?.split("").map(() => "•")
+                            : "EMPTY"}{" "}
+                      </div>
+                      {newVersion?.secretValue && (
+                        <div className="flex h-10 w-10 items-center justify-center">
+                          <FontAwesomeIcon
+                            icon={isNewSecretValueVisible ? faEyeSlash : faEye}
+                            className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
+                          />
                         </div>
-                      ))}
+                      )}
                     </div>
-                  ) : (
-                    <p className="text-sm text-mineshaft-300">-</p>
                   )}
-                </Td>
-              </Tr>
-            </TBody>
-          ) : (
-            <TBody>
-              <Tr>
-                <Td>
-                  {op === CommitType.CREATE ? newVersion?.secretKey : secretVersion?.secretKey}
-                </Td>
-                <Td>
-                  <SecretInput
-                    isReadOnly
-                    value={
-                      op === CommitType.CREATE
-                        ? newVersion?.secretValue
-                        : secretVersion?.secretValue
-                    }
-                  />
-                </Td>
-                <Td>
-                  {op === CommitType.CREATE
-                    ? newVersion?.secretComment
-                    : secretVersion?.secretComment}
-                </Td>
-                <Td>
-                  {(op === CommitType.CREATE ? newVersion?.tags : secretVersion?.tags)?.map(
-                    ({ slug, id: tagId, color }) => (
+                </div>
+              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Comment</div>
+                <div className="text-sm">
+                  {newVersion?.secretComment || (
+                    <span className="text-sm text-mineshaft-300">-</span>
+                  )}{" "}
+                </div>
+              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Tags</div>
+                <div className="flex flex-wrap gap-2">
+                  {(newVersion?.tags?.length ?? 0) ? (
+                    newVersion?.tags?.map(({ slug, id: tagId, color }) => (
                       <Tag
                         className="flex w-min items-center space-x-2"
-                        key={`${
-                          op === CommitType.CREATE ? newVersion?.id : secretVersion?.id
-                        }-${tagId}`}
+                        key={`${newVersion.id}-${tagId}`}
                       >
                         <div
                           className="h-3 w-3 rounded-full"
@@ -240,41 +264,49 @@ export const SecretApprovalRequestChangeItem = ({
                         />
                         <div className="text-sm">{slug}</div>
                       </Tag>
-                    )
-                  )}
-                </Td>
-                <Td>
-                  {newVersion?.secretMetadata?.length ? (
-                    <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
-                      {newVersion.secretMetadata?.map((el) => (
-                        <div key={el.key} className="flex items-center">
-                          <Tag
-                            size="xs"
-                            className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
-                          >
-                            <FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
-                            <div>{el.key}</div>
-                          </Tag>
-                          <Tag
-                            size="xs"
-                            className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
-                          >
-                            <div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap">
-                              {el.value}
-                            </div>
-                          </Tag>
-                        </div>
-                      ))}
-                    </div>
+                    ))
                   ) : (
-                    <p className="text-sm text-mineshaft-300">-</p>
+                    <span className="text-sm text-mineshaft-300">-</span>
                   )}
-                </Td>
-              </Tr>
-            </TBody>
+                </div>
+              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Metadata</div>
+                {newVersion?.secretMetadata?.length ? (
+                  <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
+                    {newVersion.secretMetadata?.map((el) => (
+                      <div key={el.key} className="flex items-center">
+                        <Tag
+                          size="xs"
+                          className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
+                        >
+                          <FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
+                          <div>{el.key}</div>
+                        </Tag>
+                        <Tag
+                          size="xs"
+                          className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
+                        >
+                          <div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap">
+                            {el.value}
+                          </div>
+                        </Tag>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-sm text-mineshaft-300">-</p>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="text-md flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 text-mineshaft-300 xl:w-1/2">
+              {" "}
+              Secret not existent in the new version.
+            </div>
           )}
-        </Table>
-      </TableContainer>
+        </div>
+      </div>
     </div>
   );
 };

frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx

@@ -13,6 +13,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { RadioGroup, RadioGroupIndicator, RadioGroupItem } from "@radix-ui/react-radio-group";
+import { format } from "date-fns";
 import { twMerge } from "tailwind-merge";
 import z from "zod";
 
@@ -51,7 +52,7 @@ export const generateCommitText = (commits: { op: CommitType }[] = []) => {
     text.push(
       <span key="created-commit">
         {score[CommitType.CREATE]} secret{score[CommitType.CREATE] !== 1 && "s"}
-        <span style={{ color: "#16a34a" }}> created</span>
+        <span style={{ color: "#60DD00" }}> created</span>
       </span>
     );
   if (score[CommitType.UPDATE])
@@ -59,7 +60,7 @@ export const generateCommitText = (commits: { op: CommitType }[] = []) => {
       <span key="updated-commit">
         {Boolean(text.length) && ","}
         {score[CommitType.UPDATE]} secret{score[CommitType.UPDATE] !== 1 && "s"}
-        <span style={{ color: "#ea580c" }} className="text-orange-600">
+        <span style={{ color: "#F8EB30" }} className="text-orange-600">
           {" "}
           updated
         </span>
@@ -70,7 +71,7 @@ export const generateCommitText = (commits: { op: CommitType }[] = []) => {
       <span className="deleted-commit">
         {Boolean(text.length) && "and"}
         {score[CommitType.DELETE]} secret{score[CommitType.UPDATE] !== 1 && "s"}
-        <span style={{ color: "#b91c1c" }}> deleted</span>
+        <span style={{ color: "#F83030" }}> deleted</span>
       </span>
     );
 
@@ -138,6 +139,11 @@ export const SecretApprovalRequestChanges = ({
     ({ userId }) => userId === userSession.id
   );
 
+  const isBypasser =
+    !secretApprovalRequestDetails?.policy?.bypassers ||
+    !secretApprovalRequestDetails.policy.bypassers.length ||
+    secretApprovalRequestDetails.policy.bypassers.some(({ userId }) => userId === userSession.id);
+
   const reviewedUsers = secretApprovalRequestDetails?.reviewers?.reduce<
     Record<string, { status: ApprovalStatus; comment: string }>
   >(
@@ -221,29 +227,32 @@ export const SecretApprovalRequestChanges = ({
             </span>
           </div>
           <div className="flex flex-grow flex-col">
-            <div className="mb-1 text-lg">
+            <div className="text-lg">
               {generateCommitText(secretApprovalRequestDetails.commits)}
               {secretApprovalRequestDetails.isReplicated && (
                 <span className="text-sm text-bunker-300"> (replication)</span>
               )}
             </div>
-            <div className="flex items-center text-sm text-bunker-300">
-              {secretApprovalRequestDetails?.committerUser?.firstName || ""}
-              {secretApprovalRequestDetails?.committerUser?.lastName || ""} (
-              {secretApprovalRequestDetails?.committerUser?.email}) wants to change{" "}
-              {secretApprovalRequestDetails.commits.length} secret values in
-              <span className="mx-1 rounded bg-primary-600/60 px-1 text-primary-300">
+            <div className="text-sm text-bunker-300">
+              <p className="inline">
+                {secretApprovalRequestDetails?.committerUser?.firstName || ""}
+                {secretApprovalRequestDetails?.committerUser?.lastName || ""} (
+                {secretApprovalRequestDetails?.committerUser?.email}) wants to change{" "}
+                {secretApprovalRequestDetails.commits.length} secret values in
+              </p>
+              <p className="mx-1 inline rounded bg-primary-600/40 px-1 py-1 text-primary-300">
                 {secretApprovalRequestDetails.environment}
-              </span>
-              <div className="flex w-min items-center rounded border border-mineshaft-500 pl-1 pr-2">
-                <div className="border-r border-mineshaft-500 pr-1">
+              </p>
+              <div className="inline-flex w-min items-center rounded border border-mineshaft-500 pl-1 pr-2">
+                <p className="cursor-default border-r border-mineshaft-500 pr-1">
                   <FontAwesomeIcon icon={faFolder} className="text-primary" size="sm" />
-                </div>
-                <Tooltip content={formatReservedPaths(secretApprovalRequestDetails.secretPath)}>
-                  <div className="truncate pb-0.5 pl-2 text-sm" style={{ maxWidth: "10rem" }}>
-                    {formatReservedPaths(secretApprovalRequestDetails.secretPath)}
-                  </div>
-                </Tooltip>
+                </p>
+                <p
+                  className="cursor-default truncate pb-0.5 pl-2 text-sm"
+                  style={{ maxWidth: "10rem" }}
+                >
+                  {formatReservedPaths(secretApprovalRequestDetails.secretPath)}
+                </p>
               </div>
             </div>
           </div>
@@ -255,17 +264,14 @@ export const SecretApprovalRequestChanges = ({
                 onOpenChange={(isOpen) => handlePopUpToggle("reviewChanges", isOpen)}
               >
                 <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="outline_bg"
-                    rightIcon={<FontAwesomeIcon className="ml-2" icon={faAngleDown} />}
-                  >
+                  <Button rightIcon={<FontAwesomeIcon className="ml-2" icon={faAngleDown} />}>
                     Review
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" asChild className="mt-3">
                   <form onSubmit={handleSubmit(handleSubmitReview)}>
-                    <div className="flex w-[400px] flex-col space-y-2 p-5">
-                      <div className="text-lg font-medium">Finish your review</div>
+                    <div className="flex w-[500px] flex-col space-y-2 p-5">
+                      <div className="text-md font-medium">Finish your review</div>
                       <Controller
                         control={control}
                         name="comment"
@@ -275,7 +281,7 @@ export const SecretApprovalRequestChanges = ({
                               {...field}
                               placeholder="Leave a comment..."
                               reSize="none"
-                              className="text-md mt-2 h-48 border border-mineshaft-600 bg-bunker-800"
+                              className="text-md mt-2 h-40 border border-mineshaft-600 bg-bunker-800"
                             />
                           </FormControl>
                         )}
@@ -320,7 +326,7 @@ export const SecretApprovalRequestChanges = ({
                               <div className="flex items-center gap-2">
                                 <RadioGroupItem
                                   id="reject"
-                                  className="h-4 w-4 rounded-full border border-gray-300 text-primary focus:ring-2 focus:ring-mineshaft-500"
+                                  className="h-4 w-4 rounded-full border border-gray-300 text-red focus:ring-2 focus:ring-mineshaft-500"
                                   value={ApprovalStatus.REJECTED}
                                   aria-labelledby="reject-label"
                                 >
@@ -376,14 +382,14 @@ export const SecretApprovalRequestChanges = ({
             )
           )}
         </div>
-        <div className="mt-4 flex flex-col items-center rounded-lg">
+        <div className="my-4 flex flex-col items-center rounded-lg border border-mineshaft-600">
           {secretApprovalRequestDetails?.policy?.approvers
             .filter((requiredApprover) => reviewedUsers?.[requiredApprover.userId])
             .map((requiredApprover) => {
               const reviewer = reviewedUsers?.[requiredApprover.userId];
               return (
                 <div
-                  className="mb-4 flex w-full flex-col rounded-md bg-mineshaft-800 p-6"
+                  className="flex w-full flex-col rounded-md bg-mineshaft-800 p-4"
                   key={`required-approver-${requiredApprover.userId}`}
                 >
                   <div>
@@ -396,10 +402,11 @@ export const SecretApprovalRequestChanges = ({
                     >
                       {reviewer?.status === ApprovalStatus.APPROVED ? "approved" : "rejected"}
                     </span>{" "}
-                    the request.
+                    the request on{" "}
+                    {format(new Date(secretApprovalRequestDetails.createdAt), "PPpp zzz")}.
                   </div>
                   {reviewer?.comment && (
-                    <FormControl label="Comment" className="mb-0 mt-2">
+                    <FormControl label="Comment" className="mb-0 mt-4">
                       <TextArea value={reviewer.comment} isDisabled reSize="none">
                         {reviewer?.comment && reviewer.comment}
                       </TextArea>
@@ -409,9 +416,10 @@ export const SecretApprovalRequestChanges = ({
               );
             })}
         </div>
-        <div className="flex items-center space-x-6 rounded-lg bg-mineshaft-800 px-5 py-6">
+        <div className="mt-2 flex items-center space-x-6 rounded-lg border border-mineshaft-600 bg-mineshaft-800">
           <SecretApprovalRequestAction
             canApprove={canApprove}
+            isBypasser={isBypasser === undefined ? true : isBypasser}
             approvalRequestId={secretApprovalRequestDetails.id}
             hasMerged={hasMerged}
             approvals={secretApprovalRequestDetails.policy.approvals || 0}
@@ -423,7 +431,7 @@ export const SecretApprovalRequestChanges = ({
           />
         </div>
       </div>
-      <div className="sticky top-0 w-1/5 pt-4" style={{ minWidth: "240px" }}>
+      <div className="sticky top-0 w-1/5 cursor-default pt-4" style={{ minWidth: "240px" }}>
         <div className="text-sm text-bunker-300">Reviewers</div>
         <div className="mt-2 flex flex-col space-y-2 text-sm">
           {secretApprovalRequestDetails?.policy?.approvers
@@ -435,10 +443,10 @@ export const SecretApprovalRequestChanges = ({
               const reviewer = reviewedUsers?.[requiredApprover.userId];
               return (
                 <div
-                  className="flex flex-nowrap items-center space-x-2 rounded bg-mineshaft-800 px-2 py-1"
+                  className="flex flex-nowrap items-center justify-between space-x-2 rounded border border-mineshaft-600 bg-mineshaft-800 px-2 py-1"
                   key={`required-approver-${requiredApprover.userId}`}
                 >
-                  <div className="flex-grow text-sm">
+                  <div className="flex text-sm">
                     <Tooltip
                       content={`${requiredApprover.firstName || ""} ${
                         requiredApprover.lastName || ""
@@ -458,7 +466,7 @@ export const SecretApprovalRequestChanges = ({
                         />
                       </Tooltip>
                     )}
-                    <Tooltip content={reviewer?.status || ApprovalStatus.PENDING}>
+                    <Tooltip content={`Status: ${reviewer?.status || ApprovalStatus.PENDING}`}>
                       {getReviewedStatusSymbol(reviewer?.status)}
                     </Tooltip>
                   </div>

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

@@ -29,6 +29,11 @@ import {
   ProjectPermissionSecretActions,
   ProjectPermissionSecretRotationActions
 } from "@app/context/ProjectPermissionContext/types";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import {
   useGetImportedSecretsSingleEnv,
@@ -98,7 +103,14 @@ const Page = () => {
     page,
     setPerPage,
     orderBy
-  } = usePagination<DashboardSecretsOrderBy>(DashboardSecretsOrderBy.Name);
+  } = usePagination<DashboardSecretsOrderBy>(DashboardSecretsOrderBy.Name, {
+    initPerPage: getUserTablePreference("secretDashboardTable", PreferenceKey.PerPage, 100)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("secretDashboardTable", PreferenceKey.PerPage, newPerPage);
+  };
 
   const [snapshotId, setSnapshotId] = useState<string | null>(null);
   const isRollbackMode = Boolean(snapshotId);
@@ -558,7 +570,7 @@ const Page = () => {
               page={page}
               perPage={perPage}
               onChangePage={(newPage) => setPage(newPage)}
-              onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+              onChangePerPage={handlePerPageChange}
             />
           )}
           <Modal

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsElastiCacheInputForm.tsx

@@ -53,7 +53,8 @@ const formSchema = z.object({
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
   name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
-  environment: z.object({ name: z.string(), slug: z.string() })
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  usernameTemplate: z.string().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -93,7 +94,8 @@ export const AwsElastiCacheInputForm = ({
         "UserId": "{{username}}"
 }`
       },
-      environment: isSingleEnvironmentMode ? environments[0] : undefined
+      environment: isSingleEnvironmentMode ? environments[0] : undefined,
+      usernameTemplate: "{{randomUsername}}"
     }
   });
 
@@ -104,10 +106,13 @@ export const AwsElastiCacheInputForm = ({
     maxTTL,
     provider,
     defaultTTL,
-    environment
+    environment,
+    usernameTemplate
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
+
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.AwsElastiCache, inputs: provider },
@@ -116,7 +121,9 @@ export const AwsElastiCacheInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment.slug
+        environmentSlug: environment.slug,
+        usernameTemplate:
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate
       });
       onCompleted();
     } catch {
@@ -270,6 +277,25 @@ export const AwsElastiCacheInputForm = ({
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify ElastiCache Statements</AccordionTrigger>
                     <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="usernameTemplate"
+                        defaultValue=""
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Username Template"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <Input
+                              {...field}
+                              value={field.value || undefined}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                              placeholder="{{randomUsername}}"
+                            />
+                          </FormControl>
+                        )}
+                      />
                       <Controller
                         control={control}
                         name="provider.creationStatement"

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsIamInputForm.tsx

@@ -42,7 +42,8 @@ const formSchema = z.object({
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
   name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
-  environment: z.object({ name: z.string(), slug: z.string() })
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  usernameTemplate: z.string().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -70,7 +71,8 @@ export const AwsIamInputForm = ({
   } = useForm<TForm>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      environment: isSingleEnvironmentMode ? environments[0] : undefined
+      environment: isSingleEnvironmentMode ? environments[0] : undefined,
+      usernameTemplate: "{{randomUsername}}"
     }
   });
 
@@ -81,12 +83,14 @@ export const AwsIamInputForm = ({
     maxTTL,
     provider,
     defaultTTL,
-    environment
+    environment,
+    usernameTemplate
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
 
     try {
+      const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.AwsIam, inputs: provider },
         maxTTL,
@@ -94,7 +98,9 @@ export const AwsIamInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment.slug
+        environmentSlug: environment.slug,
+        usernameTemplate:
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate
       });
       onCompleted();
     } catch {
@@ -300,6 +306,25 @@ export const AwsIamInputForm = ({
                   </FormControl>
                 )}
               />
+              <Controller
+                control={control}
+                name="usernameTemplate"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Username Template"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input
+                      {...field}
+                      value={field.value || undefined}
+                      className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                      placeholder="{{randomUsername}}"
+                    />
+                  </FormControl>
+                )}
+              />
               {!isSingleEnvironmentMode && (
                 <Controller
                   control={control}

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CassandraInputForm.tsx

@@ -55,7 +55,8 @@ const formSchema = z.object({
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
   name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
-  environment: z.object({ name: z.string(), slug: z.string() })
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  usernameTemplate: z.string().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -93,7 +94,8 @@ export const CassandraInputForm = ({
     resolver: zodResolver(formSchema),
     defaultValues: {
       provider: getSqlStatements(),
-      environment: isSingleEnvironmentMode ? environments[0] : undefined
+      environment: isSingleEnvironmentMode ? environments[0] : undefined,
+      usernameTemplate: "{{randomUsername}}"
     }
   });
 
@@ -104,11 +106,13 @@ export const CassandraInputForm = ({
     maxTTL,
     provider,
     defaultTTL,
-    environment
+    environment,
+    usernameTemplate
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
 
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.Cassandra, inputs: provider },
@@ -117,7 +121,9 @@ export const CassandraInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment.slug
+        environmentSlug: environment.slug,
+        usernameTemplate:
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate
       });
       onCompleted();
     } catch {
@@ -298,6 +304,25 @@ export const CassandraInputForm = ({
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify CQL Statements</AccordionTrigger>
                     <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="usernameTemplate"
+                        defaultValue=""
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Username Template"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <Input
+                              {...field}
+                              value={field.value || undefined}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                              placeholder="{{randomUsername}}"
+                            />
+                          </FormControl>
+                        )}
+                      />
                       <Controller
                         control={control}
                         name="provider.creationStatement"

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx

@@ -4,6 +4,7 @@ import {
   SiApachecassandra,
   SiElasticsearch,
   SiFiles,
+  SiKubernetes,
   SiMongodb,
   SiRabbitmq,
   SiSap,
@@ -24,6 +25,7 @@ import { AwsIamInputForm } from "./AwsIamInputForm";
 import { AzureEntraIdInputForm } from "./AzureEntraIdInputForm";
 import { CassandraInputForm } from "./CassandraInputForm";
 import { ElasticSearchInputForm } from "./ElasticSearchInputForm";
+import { KubernetesInputForm } from "./KubernetesInputForm";
 import { LdapInputForm } from "./LdapInputForm";
 import { MongoAtlasInputForm } from "./MongoAtlasInputForm";
 import { MongoDBDatabaseInputForm } from "./MongoDBInputForm";
@@ -124,6 +126,11 @@ const DYNAMIC_SECRET_LIST = [
     icon: <FontAwesomeIcon icon={faClock} size="lg" />,
     provider: DynamicSecretProviders.Totp,
     title: "TOTP"
+  },
+  {
+    icon: <SiKubernetes size="1.5rem" />,
+    provider: DynamicSecretProviders.Kubernetes,
+    title: "Kubernetes"
   }
 ];
 
@@ -472,6 +479,25 @@ export const CreateDynamicSecretForm = ({
                 />
               </motion.div>
             )}
+          {wizardStep === WizardSteps.ProviderInputs &&
+            selectedProvider === DynamicSecretProviders.Kubernetes && (
+              <motion.div
+                key="dynamic-kubernetes-step"
+                transition={{ duration: 0.1 }}
+                initial={{ opacity: 0, translateX: 30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+                exit={{ opacity: 0, translateX: -30 }}
+              >
+                <KubernetesInputForm
+                  onCompleted={handleFormReset}
+                  onCancel={handleFormReset}
+                  projectSlug={projectSlug}
+                  secretPath={secretPath}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
+                />
+              </motion.div>
+            )}
         </AnimatePresence>
       </ModalContent>
     </Modal>

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/ElasticSearchInputForm.tsx

@@ -76,7 +76,8 @@ const formSchema = z.object({
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
   name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
-  environment: z.object({ name: z.string(), slug: z.string() })
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  usernameTemplate: z.string().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -113,7 +114,8 @@ export const ElasticSearchInputForm = ({
         roles: ["superuser"],
         port: 443
       },
-      environment: isSingleEnvironmentMode ? environments[0] : undefined
+      environment: isSingleEnvironmentMode ? environments[0] : undefined,
+      usernameTemplate: "{{randomUsername}}"
     }
   });
 
@@ -124,10 +126,12 @@ export const ElasticSearchInputForm = ({
     maxTTL,
     provider,
     defaultTTL,
-    environment
+    environment,
+    usernameTemplate
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.ElasticSearch, inputs: provider },
@@ -136,7 +140,9 @@ export const ElasticSearchInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment.slug
+        environmentSlug: environment.slug,
+        usernameTemplate:
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate
       });
       onCompleted();
     } catch {
@@ -418,6 +424,25 @@ export const ElasticSearchInputForm = ({
                   )}
                 />
               </div>
+              <Controller
+                control={control}
+                name="usernameTemplate"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Username Template"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input
+                      {...field}
+                      value={field.value || undefined}
+                      className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                      placeholder="{{randomUsername}}"
+                    />
+                  </FormControl>
+                )}
+              />
               {!isSingleEnvironmentMode && (
                 <Controller
                   control={control}

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/KubernetesInputForm.tsx

@@ -0,0 +1,492 @@
+import { Controller, FieldValues, useFieldArray, useForm } from "react-hook-form";
+import {
+  faArrowUpRightFromSquare,
+  faBookOpen,
+  faQuestionCircle,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  FilterableSelect,
+  FormControl,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  Switch,
+  TextArea,
+  Tooltip
+} from "@app/components/v2";
+import { OrgPermissionSubjects } from "@app/context/OrgPermissionContext";
+import { OrgGatewayPermissionActions } from "@app/context/OrgPermissionContext/types";
+import { gatewaysQueryKeys, useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
+
+enum CredentialType {
+  Dynamic = "dynamic",
+  Static = "static"
+}
+
+const credentialTypes = [
+  {
+    label: "Static",
+    value: CredentialType.Static
+  }
+] as const;
+
+const formSchema = z.object({
+  provider: z.object({
+    url: z.string().url().trim().min(1),
+    clusterToken: z.string().trim().min(1),
+    ca: z.string().optional(),
+    sslEnabled: z.boolean().default(false),
+    credentialType: z.literal(CredentialType.Static),
+    serviceAccountName: z.string().trim().min(1),
+    namespace: z.string().trim().min(1),
+    gatewayId: z.string().optional(),
+    audiences: z.array(z.string().trim().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" });
+    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" });
+      if (valMs > 24 * 60 * 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+    }),
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
+});
+
+type TForm = z.infer<typeof formSchema> & FieldValues;
+
+type Props = {
+  onCompleted: () => void;
+  onCancel: () => void;
+  secretPath: string;
+  projectSlug: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
+};
+
+export const KubernetesInputForm = ({
+  onCompleted,
+  onCancel,
+  secretPath,
+  projectSlug,
+  environments,
+  isSingleEnvironmentMode
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    watch
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      provider: {
+        url: "",
+        clusterToken: "",
+        ca: "",
+        sslEnabled: false,
+        serviceAccountName: "",
+        namespace: "",
+        credentialType: CredentialType.Static,
+        gatewayId: undefined,
+        audiences: []
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
+    }
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "provider.audiences"
+  });
+
+  const createDynamicSecret = useCreateDynamicSecret();
+  const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());
+
+  const sslEnabled = watch("provider.sslEnabled");
+
+  const handleCreateDynamicSecret = async (formData: TForm) => {
+    const { provider, ...rest } = formData;
+    // wait till previous request is finished
+    if (createDynamicSecret.isPending) return;
+    try {
+      await createDynamicSecret.mutateAsync({
+        provider: { type: DynamicSecretProviders.Kubernetes, inputs: provider },
+        maxTTL: rest.maxTTL,
+        name: rest.name,
+        path: secretPath,
+        defaultTTL: rest.defaultTTL,
+        projectSlug,
+        environmentSlug: rest.environment.slug
+      });
+
+      onCompleted();
+    } catch {
+      createNotification({
+        type: "error",
+        text: "Failed to create dynamic secret"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
+      <div>
+        <div className="flex items-center space-x-2">
+          <div className="flex-grow">
+            <Controller
+              control={control}
+              defaultValue=""
+              name="name"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Secret Name"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="dynamic-secret" />
+                </FormControl>
+              )}
+            />
+          </div>
+          <div className="w-32">
+            <Controller
+              control={control}
+              name="defaultTTL"
+              defaultValue="1h"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label={<TtlFormLabel label="Default TTL" />}
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+          </div>
+          <div className="w-32">
+            <Controller
+              control={control}
+              name="maxTTL"
+              defaultValue="24h"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label={<TtlFormLabel label="Max TTL" />}
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+          </div>
+        </div>
+        <div>
+          <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            Configuration
+            <a
+              href="https://infisical.com/docs/documentation/platform/dynamic-secrets/kubernetes"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="mb-1 ml-2 inline-block cursor-default 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">
+              <div className="flex-grow">
+                <div>
+                  <OrgPermissionCan
+                    I={OrgGatewayPermissionActions.AttachGateways}
+                    a={OrgPermissionSubjects.Gateway}
+                  >
+                    {(isAllowed) => (
+                      <Controller
+                        control={control}
+                        name="provider.gatewayId"
+                        defaultValue=""
+                        render={({ field: { value, onChange }, fieldState: { error } }) => (
+                          <FormControl
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            label="Gateway"
+                          >
+                            <Tooltip
+                              isDisabled={isAllowed}
+                              content="Restricted access. You don't have permission to attach gateways to resources."
+                            >
+                              <div>
+                                <Select
+                                  isDisabled={!isAllowed}
+                                  value={value}
+                                  onValueChange={onChange}
+                                  className="w-full border border-mineshaft-500"
+                                  dropdownContainerClassName="max-w-none"
+                                  isLoading={isGatewaysLoading}
+                                  placeholder="Default: Internet Gateway"
+                                  position="popper"
+                                >
+                                  <SelectItem
+                                    value={null as unknown as string}
+                                    onClick={() => onChange(undefined)}
+                                  >
+                                    Internet Gateway
+                                  </SelectItem>
+                                  {gateways?.map((el) => (
+                                    <SelectItem value={el.id} key={el.id}>
+                                      {el.name}
+                                    </SelectItem>
+                                  ))}
+                                </Select>
+                              </div>
+                            </Tooltip>
+                          </FormControl>
+                        )}
+                      />
+                    )}
+                  </OrgPermissionCan>
+                </div>
+                <Controller
+                  control={control}
+                  name="provider.url"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Cluster URL"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+
+                <div className="mb-2 flex items-center">
+                  <span className="mr-3 flex items-center text-sm text-mineshaft-400">
+                    Enable SSL
+                    <Tooltip
+                      className="ml-1 max-w-md"
+                      content={
+                        <span>
+                          If enabled, you can optionally provide a custom CA certificate. Leave
+                          blank to use the system/public CA.
+                        </span>
+                      }
+                    >
+                      <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                    </Tooltip>
+                  </span>
+                  <Controller
+                    name="provider.sslEnabled"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <Switch
+                        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                        id="ssl-enabled"
+                        thumbClassName="bg-mineshaft-800"
+                        isChecked={value}
+                        onCheckedChange={onChange}
+                        aria-label="Enable SSL"
+                      />
+                    )}
+                  />
+                </div>
+
+                <Controller
+                  control={control}
+                  name="provider.ca"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="CA"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className={sslEnabled ? "" : "opacity-50"}
+                    >
+                      <TextArea
+                        {...field}
+                        placeholder="-----BEGIN CERTIFICATE----- ..."
+                        isDisabled={!sslEnabled}
+                      />
+                    </FormControl>
+                  )}
+                />
+
+                <Controller
+                  control={control}
+                  name="provider.clusterToken"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Cluster Token"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="password" autoComplete="new-password" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.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) => field.onChange(e)}
+                      >
+                        {credentialTypes.map((credentialType) => (
+                          <SelectItem
+                            value={credentialType.value}
+                            key={`credential-type-${credentialType.value}`}
+                          >
+                            {credentialType.label}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+                <div className="flex items-center space-x-2">
+                  <div className="flex-1">
+                    <Controller
+                      control={control}
+                      name="provider.serviceAccountName"
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Service Account Name"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <Input {...field} autoComplete="new-password" />
+                        </FormControl>
+                      )}
+                    />
+                  </div>
+                  <div className="flex-1">
+                    <Controller
+                      control={control}
+                      name="provider.namespace"
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Namespace"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <Input {...field} />
+                        </FormControl>
+                      )}
+                    />
+                  </div>
+                </div>
+                <div className="mt-2 w-1/2">
+                  <Controller
+                    control={control}
+                    name="provider.audiences"
+                    render={({ fieldState: { error } }) => (
+                      <FormControl
+                        label="Audiences"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <div className="space-y-2">
+                          {fields.map((field, index) => (
+                            <div key={field.id} className="flex items-center space-x-2">
+                              <Input
+                                {...control.register(`provider.audiences.${index}`)}
+                                placeholder="Enter audience"
+                                className="flex-grow"
+                              />
+                              <IconButton
+                                onClick={() => remove(index)}
+                                variant="outline_bg"
+                                ariaLabel="Remove audience"
+                              >
+                                <FontAwesomeIcon icon={faTrash} />
+                              </IconButton>
+                            </div>
+                          ))}
+                          <Button variant="outline_bg" onClick={() => append("")} type="button">
+                            Add Audience
+                          </Button>
+                        </div>
+                      </FormControl>
+                    )}
+                  />
+                </div>
+                {!isSingleEnvironmentMode && (
+                  <Controller
+                    control={control}
+                    name="environment"
+                    render={({ field: { value, onChange }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Environment"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                      >
+                        <FilterableSelect
+                          options={environments}
+                          value={value}
+                          onChange={onChange}
+                          placeholder="Select the environment to create secret in..."
+                          getOptionLabel={(option) => option.name}
+                          getOptionValue={(option) => option.slug}
+                          menuPlacement="top"
+                        />
+                      </FormControl>
+                    )}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-4 flex items-center space-x-4">
+        <Button type="submit" isLoading={isSubmitting}>
+          Submit
+        </Button>
+        <Button variant="outline_bg" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/LdapInputForm.tsx

@@ -79,7 +79,8 @@ const formSchema = z.object({
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
   name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
-  environment: z.object({ name: z.string(), slug: z.string() })
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  usernameTemplate: z.string().nullable().optional()
 });
 
 type TForm = z.infer<typeof formSchema>;
@@ -120,7 +121,8 @@ export const LdapInputForm = ({
         rollbackLdif: "",
         credentialType: CredentialType.Dynamic
       },
-      environment: isSingleEnvironmentMode ? environments[0] : undefined
+      environment: isSingleEnvironmentMode ? environments[0] : undefined,
+      usernameTemplate: "{{randomUsername}}"
     }
   });
 
@@ -133,10 +135,13 @@ export const LdapInputForm = ({
     maxTTL,
     provider,
     defaultTTL,
-    environment
+    environment,
+    usernameTemplate
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
+
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.Ldap, inputs: provider },
@@ -145,6 +150,8 @@ export const LdapInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
+        usernameTemplate:
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate,
         environmentSlug: environment.slug
       });
       onCompleted();
@@ -413,6 +420,25 @@ export const LdapInputForm = ({
                 )}
               </div>
             </div>
+            <Controller
+              control={control}
+              name="usernameTemplate"
+              defaultValue=""
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Username Template"
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    {...field}
+                    value={field.value || undefined}
+                    className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                    placeholder="{{randomUsername}}"
+                  />
+                </FormControl>
+              )}
+            />
           </div>
         </div>
       </div>

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/MongoAtlasInputForm.tsx

@@ -66,7 +66,8 @@ const formSchema = z.object({
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
   name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
-  environment: z.object({ name: z.string(), slug: z.string() })
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  usernameTemplate: z.string().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -114,7 +115,8 @@ export const MongoAtlasInputForm = ({
       provider: {
         roles: [{ databaseName: "", roleName: "" }]
       },
-      environment: isSingleEnvironmentMode ? environments[0] : undefined
+      environment: isSingleEnvironmentMode ? environments[0] : undefined,
+      usernameTemplate: "{{randomUsername}}"
     }
   });
 
@@ -135,10 +137,13 @@ export const MongoAtlasInputForm = ({
     maxTTL,
     provider,
     defaultTTL,
-    environment
+    environment,
+    usernameTemplate
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
+
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.MongoAtlas, inputs: provider },
@@ -147,7 +152,9 @@ export const MongoAtlasInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment.slug
+        environmentSlug: environment.slug,
+        usernameTemplate:
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate
       });
       onCompleted();
     } catch {
@@ -312,7 +319,7 @@ export const MongoAtlasInputForm = ({
                           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. 
+                          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.`}
                         />
                       )}
@@ -362,6 +369,25 @@ export const MongoAtlasInputForm = ({
                 <AccordionItem value="advance-section">
                   <AccordionTrigger>Advanced</AccordionTrigger>
                   <AccordionContent>
+                    <Controller
+                      control={control}
+                      name="usernameTemplate"
+                      defaultValue=""
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Username Template"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <Input
+                            {...field}
+                            value={field.value || undefined}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            placeholder="{{randomUsername}}"
+                          />
+                        </FormControl>
+                      )}
+                    />
                     <FormLabel
                       label="Scopes"
                       isOptional

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/MongoDBInputForm.tsx

@@ -56,7 +56,8 @@ const formSchema = z.object({
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
   name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
-  environment: z.object({ name: z.string(), slug: z.string() })
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  usernameTemplate: z.string().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -89,7 +90,8 @@ export const MongoDBDatabaseInputForm = ({
       provider: {
         roles: [{ roleName: "readWrite" }]
       },
-      environment: isSingleEnvironmentMode ? environments[0] : undefined
+      environment: isSingleEnvironmentMode ? environments[0] : undefined,
+      usernameTemplate: "{{randomUsername}}"
     }
   });
 
@@ -105,10 +107,13 @@ export const MongoDBDatabaseInputForm = ({
     maxTTL,
     provider,
     defaultTTL,
-    environment
+    environment,
+    usernameTemplate
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
+
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await createDynamicSecret.mutateAsync({
         provider: {
@@ -124,7 +129,9 @@ export const MongoDBDatabaseInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment.slug
+        environmentSlug: environment.slug,
+        usernameTemplate:
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate
       });
       onCompleted();
     } catch {
@@ -272,7 +279,7 @@ export const MongoDBDatabaseInputForm = ({
               <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. 
+                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">
@@ -340,6 +347,25 @@ export const MongoDBDatabaseInputForm = ({
                   )}
                 />
               </div>
+              <Controller
+                control={control}
+                name="usernameTemplate"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Username Template"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input
+                      {...field}
+                      value={field.value || undefined}
+                      className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                      placeholder="{{randomUsername}}"
+                    />
+                  </FormControl>
+                )}
+              />
               {!isSingleEnvironmentMode && (
                 <Controller
                   control={control}

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RabbitMqInputForm.tsx

@@ -60,7 +60,8 @@ const formSchema = z.object({
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
   name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
-  environment: z.object({ name: z.string(), slug: z.string() })
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  usernameTemplate: z.string().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -102,7 +103,8 @@ export const RabbitMqInputForm = ({
         },
         tags: []
       },
-      environment: isSingleEnvironmentMode ? environments[0] : undefined
+      environment: isSingleEnvironmentMode ? environments[0] : undefined,
+      usernameTemplate: "{{randomUsername}}"
     }
   });
 
@@ -113,10 +115,13 @@ export const RabbitMqInputForm = ({
     maxTTL,
     provider,
     defaultTTL,
-    environment
+    environment,
+    usernameTemplate
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
+
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.RabbitMq, inputs: provider },
@@ -125,7 +130,9 @@ export const RabbitMqInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment.slug
+        environmentSlug: environment.slug,
+        usernameTemplate:
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate
       });
       onCompleted();
     } catch {
@@ -424,6 +431,25 @@ export const RabbitMqInputForm = ({
                   )}
                 />
               </div>
+              <Controller
+                control={control}
+                name="usernameTemplate"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Username Template"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input
+                      {...field}
+                      value={field.value || undefined}
+                      className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                      placeholder="{{randomUsername}}"
+                    />
+                  </FormControl>
+                )}
+              />
               {!isSingleEnvironmentMode && (
                 <Controller
                   control={control}

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RedisInputForm.tsx

@@ -53,7 +53,8 @@ const formSchema = z.object({
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
   name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
-  environment: z.object({ name: z.string(), slug: z.string() })
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  usernameTemplate: z.string().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -87,7 +88,8 @@ export const RedisInputForm = ({
         creationStatement: "ACL SETUSER {{username}} on >{{password}} ~* &* +@all",
         revocationStatement: "ACL DELUSER {{username}}"
       },
-      environment: isSingleEnvironmentMode ? environments[0] : undefined
+      environment: isSingleEnvironmentMode ? environments[0] : undefined,
+      usernameTemplate: "{{randomUsername}}"
     }
   });
 
@@ -98,11 +100,13 @@ export const RedisInputForm = ({
     maxTTL,
     provider,
     defaultTTL,
+    usernameTemplate,
     environment
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
+      const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.Redis, inputs: provider },
         maxTTL,
@@ -110,7 +114,9 @@ export const RedisInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment.slug
+        environmentSlug: environment.slug,
+        usernameTemplate:
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate
       });
       onCompleted();
     } catch {
@@ -265,6 +271,25 @@ export const RedisInputForm = ({
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify Redis Statements</AccordionTrigger>
                     <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="usernameTemplate"
+                        defaultValue=""
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Username Template"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <Input
+                              {...field}
+                              value={field.value || undefined}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                              placeholder="{{randomUsername}}"
+                            />
+                          </FormControl>
+                        )}
+                      />
                       <Controller
                         control={control}
                         name="provider.creationStatement"

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapAseInputForm.tsx

@@ -51,7 +51,8 @@ const formSchema = z.object({
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
   name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
-  environment: z.object({ name: z.string(), slug: z.string() })
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  usernameTemplate: z.string().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -88,7 +89,8 @@ sp_role 'grant', 'mon_role', '{{username}}';`,
         revocationStatement: `sp_dropuser '{{username}}';
 sp_droplogin '{{username}}';`
       },
-      environment: isSingleEnvironmentMode ? environments[0] : undefined
+      environment: isSingleEnvironmentMode ? environments[0] : undefined,
+      usernameTemplate: "{{randomUsername}}"
     }
   });
 
@@ -99,11 +101,13 @@ sp_droplogin '{{username}}';`
     maxTTL,
     provider,
     defaultTTL,
-    environment
+    environment,
+    usernameTemplate
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
+      const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.SapAse, inputs: provider },
         maxTTL,
@@ -111,7 +115,9 @@ sp_droplogin '{{username}}';`
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment.slug
+        environmentSlug: environment.slug,
+        usernameTemplate:
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate
       });
       onCompleted();
     } catch {
@@ -262,6 +268,25 @@ sp_droplogin '{{username}}';`
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                     <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="usernameTemplate"
+                        defaultValue=""
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Username Template"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <Input
+                              {...field}
+                              value={field.value || undefined}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                              placeholder="{{randomUsername}}"
+                            />
+                          </FormControl>
+                        )}
+                      />
                       <Controller
                         control={control}
                         name="provider.creationStatement"

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapHanaInputForm.tsx

@@ -53,7 +53,8 @@ const formSchema = z.object({
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
   name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
-  environment: z.object({ name: z.string(), slug: z.string() })
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  usernameTemplate: z.string().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -88,7 +89,8 @@ GRANT "MONITORING" TO {{username}};`,
 DROP USER {{username}};`,
         renewStatement: "ALTER USER {{username}} VALID UNTIL '{{expiration}}';"
       },
-      environment: isSingleEnvironmentMode ? environments[0] : undefined
+      environment: isSingleEnvironmentMode ? environments[0] : undefined,
+      usernameTemplate: "{{randomUsername}}"
     }
   });
 
@@ -96,6 +98,7 @@ DROP USER {{username}};`,
 
   const handleCreateDynamicSecret = async ({
     name,
+    usernameTemplate,
     maxTTL,
     provider,
     defaultTTL,
@@ -104,6 +107,7 @@ DROP USER {{username}};`,
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
+      const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.SapHana, inputs: provider },
         maxTTL,
@@ -111,6 +115,8 @@ DROP USER {{username}};`,
         path: secretPath,
         defaultTTL,
         projectSlug,
+        usernameTemplate:
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate,
         environmentSlug: environment.slug
       });
       onCompleted();
@@ -263,6 +269,25 @@ DROP USER {{username}};`,
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                     <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="usernameTemplate"
+                        defaultValue=""
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Username Template"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <Input
+                              {...field}
+                              value={field.value || undefined}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                              placeholder="{{randomUsername}}"
+                            />
+                          </FormControl>
+                        )}
+                      />
                       <Controller
                         control={control}
                         name="provider.creationStatement"

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SnowflakeInputForm.tsx

@@ -57,7 +57,8 @@ const formSchema = z.object({
     .trim()
     .min(1)
     .refine((val) => val.toLowerCase() === val, "Must be lowercase"),
-  environment: z.object({ name: z.string(), slug: z.string() })
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  usernameTemplate: z.string().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -91,7 +92,8 @@ export const SnowflakeInputForm = ({
         revocationStatement: "DROP USER {{username}};",
         renewStatement: "ALTER USER {{username}} SET DAYS_TO_EXPIRY = {{expiration}};"
       },
-      environment: isSingleEnvironmentMode ? environments[0] : undefined
+      environment: isSingleEnvironmentMode ? environments[0] : undefined,
+      usernameTemplate: "{{randomUsername}}"
     }
   });
 
@@ -102,11 +104,13 @@ export const SnowflakeInputForm = ({
     maxTTL,
     provider,
     defaultTTL,
-    environment
+    environment,
+    usernameTemplate
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
+      const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.Snowflake, inputs: provider },
         maxTTL,
@@ -114,7 +118,9 @@ export const SnowflakeInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment.slug
+        environmentSlug: environment.slug,
+        usernameTemplate:
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate
       });
       onCompleted();
     } catch (err) {
@@ -266,6 +272,25 @@ export const SnowflakeInputForm = ({
                 <AccordionItem value="advance-statements">
                   <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                   <AccordionContent>
+                    <Controller
+                      control={control}
+                      name="usernameTemplate"
+                      defaultValue=""
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Username Template"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <Input
+                            {...field}
+                            value={field.value || undefined}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            placeholder="{{randomUsername}}"
+                          />
+                        </FormControl>
+                      )}
+                    />
                     <Controller
                       control={control}
                       name="provider.creationStatement"

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SqlDatabaseInputForm.tsx

@@ -96,7 +96,8 @@ const formSchema = z.object({
       value: z.string().trim().default("")
     })
     .array()
-    .optional()
+    .optional(),
+  usernameTemplate: z.string().nullable().optional()
 });
 
 type TForm = z.infer<typeof formSchema>;
@@ -191,7 +192,8 @@ export const SqlDatabaseInputForm = ({
           allowedSymbols: "-_.~!*"
         }
       },
-      environment: isSingleEnvironmentMode ? environments[0] : undefined
+      environment: isSingleEnvironmentMode ? environments[0] : undefined,
+      usernameTemplate: "{{randomUsername}}"
     }
   });
 
@@ -204,11 +206,13 @@ export const SqlDatabaseInputForm = ({
     provider,
     defaultTTL,
     environment,
-    metadata
+    metadata,
+    usernameTemplate
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
 
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.SqlDatabase, inputs: provider },
@@ -218,7 +222,9 @@ export const SqlDatabaseInputForm = ({
         defaultTTL,
         projectSlug,
         environmentSlug: environment.slug,
-        metadata
+        metadata,
+        usernameTemplate:
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate
       });
       onCompleted();
     } catch {
@@ -474,6 +480,25 @@ export const SqlDatabaseInputForm = ({
                       Creation, Revocation & Renew Statements (optional)
                     </AccordionTrigger>
                     <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="usernameTemplate"
+                        defaultValue=""
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Username Template"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <Input
+                              {...field}
+                              value={field.value || undefined}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                              placeholder="{{randomUsername}}"
+                            />
+                          </FormControl>
+                        )}
+                      />
                       <div className="mb-4 text-sm text-mineshaft-300">
                         Customize SQL statements for managing database user lifecycle
                       </div>

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

@@ -320,6 +320,20 @@ const renderOutputForm = (
     );
   }
 
+  if (provider === DynamicSecretProviders.Kubernetes) {
+    const { TOKEN } = data as { TOKEN: string };
+
+    return (
+      <div>
+        <OutputDisplay
+          label="Service Account JWT"
+          value={TOKEN}
+          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;

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

@@ -56,7 +56,8 @@ const formSchema = z.object({
   newName: z
     .string()
     .refine((val) => val.toLowerCase() === val, "Must be lowercase")
-    .optional()
+    .optional(),
+  usernameTemplate: z.string().trim().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -85,6 +86,7 @@ export const EditDynamicSecretAwsElastiCacheProviderForm = ({
       defaultTTL: dynamicSecret.defaultTTL,
       maxTTL: dynamicSecret.maxTTL,
       newName: dynamicSecret.name,
+      usernameTemplate: dynamicSecret?.usernameTemplate || "{{randomUsername}}",
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"])
       }
@@ -93,9 +95,16 @@ export const EditDynamicSecretAwsElastiCacheProviderForm = ({
 
   const updateDynamicSecret = useUpdateDynamicSecret();
 
-  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+  const handleUpdateDynamicSecret = async ({
+    inputs,
+    maxTTL,
+    defaultTTL,
+    newName,
+    usernameTemplate
+  }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await updateDynamicSecret.mutateAsync({
         name: dynamicSecret.name,
@@ -106,7 +115,8 @@ export const EditDynamicSecretAwsElastiCacheProviderForm = ({
           maxTTL: maxTTL || undefined,
           defaultTTL,
           inputs,
-          newName: newName === dynamicSecret.name ? undefined : newName
+          newName: newName === dynamicSecret.name ? undefined : newName,
+          usernameTemplate: !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate
         }
       });
       onClose();
@@ -261,6 +271,24 @@ export const EditDynamicSecretAwsElastiCacheProviderForm = ({
                 <AccordionItem value="advance-statements">
                   <AccordionTrigger>Modify ElastiCache Statements</AccordionTrigger>
                   <AccordionContent>
+                    <Controller
+                      control={control}
+                      name="usernameTemplate"
+                      defaultValue=""
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Username Template"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <Input
+                            {...field}
+                            value={field.value || undefined}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
                     <Controller
                       control={control}
                       name="inputs.creationStatement"

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

@@ -46,7 +46,8 @@ const formSchema = z.object({
   newName: z
     .string()
     .refine((val) => val.toLowerCase() === val, "Must be lowercase")
-    .optional()
+    .optional(),
+  usernameTemplate: z.string().trim().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -75,6 +76,7 @@ export const EditDynamicSecretAwsIamForm = ({
       defaultTTL: dynamicSecret.defaultTTL,
       maxTTL: dynamicSecret.maxTTL,
       newName: dynamicSecret.name,
+      usernameTemplate: dynamicSecret?.usernameTemplate || "{{randomUsername}}",
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"])
       }
@@ -83,9 +85,16 @@ export const EditDynamicSecretAwsIamForm = ({
 
   const updateDynamicSecret = useUpdateDynamicSecret();
 
-  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+  const handleUpdateDynamicSecret = async ({
+    inputs,
+    maxTTL,
+    defaultTTL,
+    newName,
+    usernameTemplate
+  }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await updateDynamicSecret.mutateAsync({
         name: dynamicSecret.name,
@@ -96,7 +105,8 @@ export const EditDynamicSecretAwsIamForm = ({
           maxTTL: maxTTL || undefined,
           defaultTTL,
           inputs,
-          newName: newName === dynamicSecret.name ? undefined : newName
+          newName: newName === dynamicSecret.name ? undefined : newName,
+          usernameTemplate: !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate
         }
       });
       onClose();
@@ -297,6 +307,24 @@ export const EditDynamicSecretAwsIamForm = ({
                 </FormControl>
               )}
             />
+            <Controller
+              control={control}
+              name="usernameTemplate"
+              defaultValue=""
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Username Template"
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    {...field}
+                    value={field.value || undefined}
+                    className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                  />
+                </FormControl>
+              )}
+            />
           </div>
         </div>
         <div className="mt-4 flex items-center space-x-4">

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

@@ -58,7 +58,8 @@ const formSchema = z.object({
   newName: z
     .string()
     .refine((val) => val.toLowerCase() === val, "Must be lowercase")
-    .optional()
+    .optional(),
+  usernameTemplate: z.string().trim().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -89,15 +90,23 @@ export const EditDynamicSecretCassandraForm = ({
       newName: dynamicSecret.name,
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"])
-      }
+      },
+      usernameTemplate: dynamicSecret?.usernameTemplate || "{{randomUsername}}"
     }
   });
 
   const updateDynamicSecret = useUpdateDynamicSecret();
 
-  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+  const handleUpdateDynamicSecret = async ({
+    inputs,
+    maxTTL,
+    defaultTTL,
+    newName,
+    usernameTemplate
+  }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await updateDynamicSecret.mutateAsync({
         name: dynamicSecret.name,
@@ -108,7 +117,8 @@ export const EditDynamicSecretCassandraForm = ({
           maxTTL: maxTTL || undefined,
           defaultTTL,
           inputs,
-          newName: newName === dynamicSecret.name ? undefined : newName
+          newName: newName === dynamicSecret.name ? undefined : newName,
+          usernameTemplate: !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate
         }
       });
       onClose();
@@ -292,6 +302,24 @@ export const EditDynamicSecretCassandraForm = ({
                 <AccordionItem value="modify-sql-statement">
                   <AccordionTrigger>Modify CQL Statements</AccordionTrigger>
                   <AccordionContent>
+                    <Controller
+                      control={control}
+                      name="usernameTemplate"
+                      defaultValue=""
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Username Template"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <Input
+                            {...field}
+                            value={field.value || undefined}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
                     <Controller
                       control={control}
                       name="inputs.creationStatement"

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

@@ -76,7 +76,8 @@ const formSchema = z.object({
   newName: z
     .string()
     .refine((val) => val.toLowerCase() === val, "Must be lowercase")
-    .optional()
+    .optional(),
+  usernameTemplate: z.string().trim().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -107,6 +108,7 @@ export const EditDynamicSecretElasticSearchForm = ({
       defaultTTL: dynamicSecret.defaultTTL,
       maxTTL: dynamicSecret.maxTTL,
       newName: dynamicSecret.name,
+      usernameTemplate: dynamicSecret?.usernameTemplate || "{{randomUsername}}",
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"])
       }
@@ -115,9 +117,16 @@ export const EditDynamicSecretElasticSearchForm = ({
 
   const updateDynamicSecret = useUpdateDynamicSecret();
 
-  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+  const handleUpdateDynamicSecret = async ({
+    inputs,
+    maxTTL,
+    defaultTTL,
+    newName,
+    usernameTemplate
+  }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await updateDynamicSecret.mutateAsync({
         name: dynamicSecret.name,
@@ -128,7 +137,8 @@ export const EditDynamicSecretElasticSearchForm = ({
           maxTTL: maxTTL || undefined,
           defaultTTL,
           inputs,
-          newName: newName === dynamicSecret.name ? undefined : newName
+          newName: newName === dynamicSecret.name ? undefined : newName,
+          usernameTemplate: !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate
         }
       });
       onClose();
@@ -390,7 +400,6 @@ export const EditDynamicSecretElasticSearchForm = ({
                   </Button>
                 </div>
               </div>
-
               <div>
                 <Controller
                   control={control}
@@ -410,6 +419,24 @@ export const EditDynamicSecretElasticSearchForm = ({
                   )}
                 />
               </div>
+              <Controller
+                control={control}
+                name="usernameTemplate"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Username Template"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input
+                      {...field}
+                      value={field.value || undefined}
+                      className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                    />
+                  </FormControl>
+                )}
+              />
             </div>
           </div>
         </div>

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

@@ -9,6 +9,7 @@ import { EditDynamicSecretAwsIamForm } from "./EditDynamicSecretAwsIamForm";
 import { EditDynamicSecretAzureEntraIdForm } from "./EditDynamicSecretAzureEntraIdForm";
 import { EditDynamicSecretCassandraForm } from "./EditDynamicSecretCassandraForm";
 import { EditDynamicSecretElasticSearchForm } from "./EditDynamicSecretElasticSearchForm";
+import { EditDynamicSecretKubernetesForm } from "./EditDynamicSecretKubernetesForm";
 import { EditDynamicSecretLdapForm } from "./EditDynamicSecretLdapForm";
 import { EditDynamicSecretMongoAtlasForm } from "./EditDynamicSecretMongoAtlasForm";
 import { EditDynamicSecretMongoDBForm } from "./EditDynamicSecretMongoDBForm";
@@ -312,6 +313,23 @@ export const EditDynamicSecretForm = ({
           />
         </motion.div>
       )}
+      {dynamicSecretDetails?.type === DynamicSecretProviders.Kubernetes && (
+        <motion.div
+          key="kubernetes-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretKubernetesForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
     </AnimatePresence>
   );
 };

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

@@ -0,0 +1,463 @@
+import { Controller, FieldValues, useFieldArray, useForm } from "react-hook-form";
+import {
+  faArrowUpRightFromSquare,
+  faBookOpen,
+  faQuestionCircle,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  Switch,
+  TextArea,
+  Tooltip
+} from "@app/components/v2";
+import { OrgPermissionSubjects } from "@app/context/OrgPermissionContext";
+import { OrgGatewayPermissionActions } from "@app/context/OrgPermissionContext/types";
+import { gatewaysQueryKeys, useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+enum CredentialType {
+  Dynamic = "dynamic",
+  Static = "static"
+}
+
+const credentialTypes = [
+  {
+    label: "Static",
+    value: CredentialType.Static
+  }
+] as const;
+
+const formSchema = z.object({
+  inputs: z.object({
+    url: z.string().url().trim().min(1),
+    clusterToken: z.string().trim().min(1),
+    ca: z.string().optional(),
+    sslEnabled: z.boolean().default(false),
+    credentialType: z.literal(CredentialType.Static),
+    serviceAccountName: z.string().trim().min(1),
+    namespace: z.string().trim().min(1),
+    gatewayId: z.string().optional(),
+    audiences: z.array(z.string().trim().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" });
+    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" });
+      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> & FieldValues;
+
+type Props = {
+  onClose: () => void;
+  dynamicSecret: TDynamicSecret & { inputs: unknown };
+  secretPath: string;
+  projectSlug: string;
+  environment: string;
+};
+
+export const EditDynamicSecretKubernetesForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    watch
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      newName: dynamicSecret.name,
+      defaultTTL: dynamicSecret.defaultTTL,
+      maxTTL: dynamicSecret.maxTTL,
+      inputs: dynamicSecret.inputs as TForm["inputs"]
+    }
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "inputs.audiences" as const
+  });
+
+  const updateDynamicSecret = useUpdateDynamicSecret();
+  const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());
+
+  const sslEnabled = watch("inputs.sslEnabled");
+
+  const handleUpdateDynamicSecret = async (formData: 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: formData.inputs,
+          newName: formData.newName === dynamicSecret.name ? undefined : formData.newName,
+          defaultTTL: formData.defaultTTL,
+          maxTTL: formData.maxTTL
+        }
+      });
+      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/kubernetes"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div className="mb-1 ml-2 inline-block cursor-default 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">
+                <div className="flex-grow">
+                  <div>
+                    <OrgPermissionCan
+                      I={OrgGatewayPermissionActions.AttachGateways}
+                      a={OrgPermissionSubjects.Gateway}
+                    >
+                      {(isAllowed) => (
+                        <Controller
+                          control={control}
+                          name="inputs.gatewayId"
+                          defaultValue=""
+                          render={({ field: { value, onChange }, fieldState: { error } }) => (
+                            <FormControl
+                              isError={Boolean(error?.message)}
+                              errorText={error?.message}
+                              label="Gateway"
+                            >
+                              <Tooltip
+                                isDisabled={isAllowed}
+                                content="Restricted access. You don't have permission to attach gateways to resources."
+                              >
+                                <div>
+                                  <Select
+                                    isDisabled={!isAllowed}
+                                    value={value}
+                                    onValueChange={onChange}
+                                    className="w-full border border-mineshaft-500"
+                                    dropdownContainerClassName="max-w-none"
+                                    isLoading={isGatewaysLoading}
+                                    placeholder="Default: Internet Gateway"
+                                    position="popper"
+                                  >
+                                    <SelectItem
+                                      value={null as unknown as string}
+                                      onClick={() => onChange(undefined)}
+                                    >
+                                      Internet Gateway
+                                    </SelectItem>
+                                    {gateways?.map((el) => (
+                                      <SelectItem value={el.id} key={el.id}>
+                                        {el.name}
+                                      </SelectItem>
+                                    ))}
+                                  </Select>
+                                </div>
+                              </Tooltip>
+                            </FormControl>
+                          )}
+                        />
+                      )}
+                    </OrgPermissionCan>
+                  </div>
+                  <Controller
+                    control={control}
+                    name="inputs.url"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Cluster URL"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input {...field} />
+                      </FormControl>
+                    )}
+                  />
+
+                  <div className="mb-2 flex items-center">
+                    <span className="mr-3 flex items-center text-sm text-mineshaft-400">
+                      Enable SSL
+                      <Tooltip
+                        className="ml-1 max-w-md"
+                        content={
+                          <span>
+                            If enabled, you can optionally provide a custom CA certificate. Leave
+                            blank to use the system/public CA.
+                          </span>
+                        }
+                      >
+                        <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                      </Tooltip>
+                    </span>
+                    <Controller
+                      name="inputs.sslEnabled"
+                      control={control}
+                      render={({ field: { value, onChange } }) => (
+                        <Switch
+                          className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                          id="ssl-enabled"
+                          thumbClassName="bg-mineshaft-800"
+                          isChecked={value}
+                          onCheckedChange={onChange}
+                          aria-label="Enable SSL"
+                        />
+                      )}
+                    />
+                  </div>
+
+                  <Controller
+                    control={control}
+                    name="inputs.ca"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="CA"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        className={sslEnabled ? "" : "opacity-50"}
+                      >
+                        <TextArea
+                          {...field}
+                          placeholder="-----BEGIN CERTIFICATE----- ..."
+                          isDisabled={!sslEnabled}
+                        />
+                      </FormControl>
+                    )}
+                  />
+
+                  <Controller
+                    control={control}
+                    name="inputs.clusterToken"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Cluster Token"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input {...field} type="password" autoComplete="new-password" />
+                      </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) => field.onChange(e)}
+                        >
+                          {credentialTypes.map((credentialType) => (
+                            <SelectItem
+                              value={credentialType.value}
+                              key={`credential-type-${credentialType.value}`}
+                            >
+                              {credentialType.label}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                  <div className="flex items-center space-x-2">
+                    <div className="flex-1">
+                      <Controller
+                        control={control}
+                        name="inputs.serviceAccountName"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Service Account Name"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <Input {...field} autoComplete="new-password" />
+                          </FormControl>
+                        )}
+                      />
+                    </div>
+                    <div className="flex-1">
+                      <Controller
+                        control={control}
+                        name="inputs.namespace"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Namespace"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <Input {...field} />
+                          </FormControl>
+                        )}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="mt-2 w-1/2">
+                <Controller
+                  control={control}
+                  name="inputs.audiences"
+                  render={({ fieldState: { error } }) => (
+                    <FormControl
+                      label="Audiences"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <div className="space-y-2">
+                        {fields.map((field, index) => (
+                          <div key={field.id} className="flex items-center space-x-2">
+                            <Input
+                              {...control.register(`inputs.audiences.${index}`)}
+                              placeholder="Enter audience"
+                              className="flex-grow"
+                            />
+                            <IconButton
+                              onClick={() => remove(index)}
+                              variant="outline_bg"
+                              ariaLabel="Remove audience"
+                            >
+                              <FontAwesomeIcon icon={faTrash} />
+                            </IconButton>
+                          </div>
+                        ))}
+                        <Button variant="outline_bg" onClick={() => append("")} type="button">
+                          Add Audience
+                        </Button>
+                      </div>
+                    </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/EditDynamicSecretLdapForm.tsx

@@ -70,7 +70,8 @@ const formSchema = z.object({
   newName: z
     .string()
     .refine((val) => val.toLowerCase() === val, "Must be lowercase")
-    .optional()
+    .optional(),
+  usernameTemplate: z.string().trim().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -101,6 +102,7 @@ export const EditDynamicSecretLdapForm = ({
       defaultTTL: dynamicSecret.defaultTTL,
       maxTTL: dynamicSecret.maxTTL,
       newName: dynamicSecret.name,
+      usernameTemplate: dynamicSecret?.usernameTemplate || "{{randomUsername}}",
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"])
       }
@@ -110,9 +112,17 @@ export const EditDynamicSecretLdapForm = ({
   const updateDynamicSecret = useUpdateDynamicSecret();
   const selectedCredentialType = watch("inputs.credentialType");
 
-  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+  const handleUpdateDynamicSecret = async ({
+    inputs,
+    maxTTL,
+    defaultTTL,
+    newName,
+    usernameTemplate
+  }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
+
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await updateDynamicSecret.mutateAsync({
         name: dynamicSecret.name,
@@ -123,7 +133,8 @@ export const EditDynamicSecretLdapForm = ({
           maxTTL: maxTTL || undefined,
           defaultTTL,
           inputs,
-          newName: newName === dynamicSecret.name ? undefined : newName
+          newName: newName === dynamicSecret.name ? undefined : newName,
+          usernameTemplate: !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate
         }
       });
       onClose();
@@ -329,6 +340,24 @@ export const EditDynamicSecretLdapForm = ({
               )}
             />
           )}
+          <Controller
+            control={control}
+            name="usernameTemplate"
+            defaultValue=""
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Username Template"
+                isError={Boolean(error?.message)}
+                errorText={error?.message}
+              >
+                <Input
+                  {...field}
+                  value={field.value || undefined}
+                  className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                />
+              </FormControl>
+            )}
+          />
         </div>
         <div className="mt-4 flex items-center space-x-4">
           <Button type="submit" isLoading={isSubmitting}>

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

@@ -69,7 +69,8 @@ const formSchema = z.object({
   newName: z
     .string()
     .refine((val) => val.toLowerCase() === val, "Must be lowercase")
-    .optional()
+    .optional(),
+  usernameTemplate: z.string().trim().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -115,6 +116,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
       defaultTTL: dynamicSecret.defaultTTL,
       maxTTL: dynamicSecret.maxTTL,
       newName: dynamicSecret.name,
+      usernameTemplate: dynamicSecret?.usernameTemplate || "{{randomUsername}}",
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"])
       }
@@ -133,9 +135,17 @@ export const EditDynamicSecretMongoAtlasForm = ({
 
   const updateDynamicSecret = useUpdateDynamicSecret();
 
-  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+  const handleUpdateDynamicSecret = async ({
+    inputs,
+    maxTTL,
+    defaultTTL,
+    newName,
+    usernameTemplate
+  }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
+
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await updateDynamicSecret.mutateAsync({
         name: dynamicSecret.name,
@@ -146,7 +156,8 @@ export const EditDynamicSecretMongoAtlasForm = ({
           maxTTL: maxTTL || undefined,
           defaultTTL,
           inputs,
-          newName: newName === dynamicSecret.name ? undefined : newName
+          newName: newName === dynamicSecret.name ? undefined : newName,
+          usernameTemplate: !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate
         }
       });
       onClose();
@@ -312,7 +323,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
                         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. 
+                        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.`}
                       />
                     )}
@@ -362,6 +373,24 @@ export const EditDynamicSecretMongoAtlasForm = ({
               <AccordionItem value="advance-section">
                 <AccordionTrigger>Advanced</AccordionTrigger>
                 <AccordionContent>
+                  <Controller
+                    control={control}
+                    name="usernameTemplate"
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Username Template"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input
+                          {...field}
+                          value={field.value || undefined}
+                          className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                        />
+                      </FormControl>
+                    )}
+                  />
                   <FormLabel
                     label="Scopes"
                     isOptional

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

@@ -52,7 +52,8 @@ const formSchema = z.object({
   newName: z
     .string()
     .refine((val) => val.toLowerCase() === val, "Must be lowercase")
-    .optional()
+    .optional(),
+  usernameTemplate: z.string().trim().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -83,6 +84,7 @@ export const EditDynamicSecretMongoDBForm = ({
       defaultTTL: dynamicSecret.defaultTTL,
       maxTTL: dynamicSecret.maxTTL,
       newName: dynamicSecret.name,
+      usernameTemplate: dynamicSecret?.usernameTemplate || "{{randomUsername}}",
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"]),
         roles: (dynamicSecret.inputs as { roles: string[] }).roles?.map((roleName) => ({
@@ -99,9 +101,17 @@ export const EditDynamicSecretMongoDBForm = ({
 
   const updateDynamicSecret = useUpdateDynamicSecret();
 
-  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+  const handleUpdateDynamicSecret = async ({
+    inputs,
+    maxTTL,
+    defaultTTL,
+    newName,
+    usernameTemplate
+  }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
+
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await updateDynamicSecret.mutateAsync({
         name: dynamicSecret.name,
@@ -116,6 +126,8 @@ export const EditDynamicSecretMongoDBForm = ({
             port: inputs?.port ? inputs.port : undefined,
             roles: inputs?.roles?.map((el) => el.roleName)
           },
+          usernameTemplate:
+            !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate,
           newName: newName === dynamicSecret.name ? undefined : newName
         }
       });
@@ -265,7 +277,7 @@ export const EditDynamicSecretMongoDBForm = ({
             <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. 
+              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">
@@ -333,6 +345,26 @@ export const EditDynamicSecretMongoDBForm = ({
                 )}
               />
             </div>
+            <div>
+              <Controller
+                control={control}
+                name="usernameTemplate"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Username Template"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input
+                      {...field}
+                      value={field.value || undefined}
+                      className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                    />
+                  </FormControl>
+                )}
+              />
+            </div>
           </div>
         </div>
         <div className="mt-4 flex items-center space-x-4">

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

@@ -50,7 +50,8 @@ const formSchema = z.object({
       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")
+  newName: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  usernameTemplate: z.string().trim().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -80,6 +81,7 @@ export const EditDynamicSecretRabbitMqForm = ({
       defaultTTL: dynamicSecret.defaultTTL,
       maxTTL: dynamicSecret.maxTTL,
       newName: dynamicSecret.name,
+      usernameTemplate: dynamicSecret?.usernameTemplate || "{{randomUsername}}",
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"])
       }
@@ -88,9 +90,17 @@ export const EditDynamicSecretRabbitMqForm = ({
 
   const updateDynamicSecret = useUpdateDynamicSecret();
 
-  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+  const handleUpdateDynamicSecret = async ({
+    inputs,
+    maxTTL,
+    defaultTTL,
+    newName,
+    usernameTemplate
+  }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
+
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await updateDynamicSecret.mutateAsync({
         name: dynamicSecret.name,
@@ -101,7 +111,8 @@ export const EditDynamicSecretRabbitMqForm = ({
           maxTTL: maxTTL || undefined,
           defaultTTL,
           inputs,
-          newName: newName === dynamicSecret.name ? undefined : newName
+          newName: newName === dynamicSecret.name ? undefined : newName,
+          usernameTemplate: !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate
         }
       });
       onClose();
@@ -405,6 +416,26 @@ export const EditDynamicSecretRabbitMqForm = ({
                   )}
                 />
               </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="usernameTemplate"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Username Template"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        {...field}
+                        value={field.value || undefined}
+                        className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                      />
+                    </FormControl>
+                  )}
+                />
+              </div>
             </div>
           </div>
         </div>

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

@@ -57,7 +57,8 @@ const formSchema = z.object({
   newName: z
     .string()
     .refine((val) => val.toLowerCase() === val, "Must be lowercase")
-    .optional()
+    .optional(),
+  usernameTemplate: z.string().trim().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -86,6 +87,7 @@ export const EditDynamicSecretRedisProviderForm = ({
       defaultTTL: dynamicSecret.defaultTTL,
       maxTTL: dynamicSecret.maxTTL,
       newName: dynamicSecret.name,
+      usernameTemplate: dynamicSecret?.usernameTemplate || "{{randomUsername}}",
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"])
       }
@@ -94,9 +96,16 @@ export const EditDynamicSecretRedisProviderForm = ({
 
   const updateDynamicSecret = useUpdateDynamicSecret();
 
-  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+  const handleUpdateDynamicSecret = async ({
+    inputs,
+    maxTTL,
+    defaultTTL,
+    newName,
+    usernameTemplate
+  }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await updateDynamicSecret.mutateAsync({
         name: dynamicSecret.name,
@@ -104,6 +113,8 @@ export const EditDynamicSecretRedisProviderForm = ({
         projectSlug,
         environmentSlug: environment,
         data: {
+          usernameTemplate:
+            !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate,
           maxTTL: maxTTL || undefined,
           defaultTTL,
           inputs,
@@ -262,6 +273,24 @@ export const EditDynamicSecretRedisProviderForm = ({
               <AccordionItem value="advance-statements">
                 <AccordionTrigger>Modify Redis Statements</AccordionTrigger>
                 <AccordionContent>
+                  <Controller
+                    control={control}
+                    name="usernameTemplate"
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Username Template"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input
+                          {...field}
+                          value={field.value || undefined}
+                          className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                        />
+                      </FormControl>
+                    )}
+                  />
                   <Controller
                     control={control}
                     name="inputs.creationStatement"

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

@@ -40,6 +40,7 @@ const formSchema = z.object({
     if (valMs > 24 * 60 * 60 * 1000)
       ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
   }),
+  usernameTemplate: z.string().trim().nullable().optional(),
   maxTTL: z
     .string()
     .optional()
@@ -81,6 +82,7 @@ export const EditDynamicSecretSapAseForm = ({
       defaultTTL: dynamicSecret.defaultTTL,
       maxTTL: dynamicSecret.maxTTL,
       newName: dynamicSecret.name,
+      usernameTemplate: dynamicSecret?.usernameTemplate || "{{randomUsername}}",
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"])
       }
@@ -89,9 +91,17 @@ export const EditDynamicSecretSapAseForm = ({
 
   const updateDynamicSecret = useUpdateDynamicSecret();
 
-  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+  const handleUpdateDynamicSecret = async ({
+    inputs,
+    maxTTL,
+    defaultTTL,
+    newName,
+    usernameTemplate
+  }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
+
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await updateDynamicSecret.mutateAsync({
         name: dynamicSecret.name,
@@ -102,7 +112,8 @@ export const EditDynamicSecretSapAseForm = ({
           maxTTL: maxTTL || undefined,
           defaultTTL,
           inputs,
-          newName: newName === dynamicSecret.name ? undefined : newName
+          newName: newName === dynamicSecret.name ? undefined : newName,
+          usernameTemplate: !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate
         }
       });
       onClose();
@@ -272,6 +283,24 @@ export const EditDynamicSecretSapAseForm = ({
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                     <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="usernameTemplate"
+                        defaultValue=""
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Username Template"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <Input
+                              {...field}
+                              value={field.value || undefined}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
                       <Controller
                         control={control}
                         name="inputs.creationStatement"

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

@@ -52,7 +52,8 @@ const formSchema = z.object({
       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")
+  newName: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  usernameTemplate: z.string().trim().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -81,6 +82,7 @@ export const EditDynamicSecretSapHanaForm = ({
       defaultTTL: dynamicSecret.defaultTTL,
       maxTTL: dynamicSecret.maxTTL,
       newName: dynamicSecret.name,
+      usernameTemplate: dynamicSecret?.usernameTemplate || "{{randomUsername}}",
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"])
       }
@@ -89,9 +91,17 @@ export const EditDynamicSecretSapHanaForm = ({
 
   const updateDynamicSecret = useUpdateDynamicSecret();
 
-  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+  const handleUpdateDynamicSecret = async ({
+    inputs,
+    maxTTL,
+    defaultTTL,
+    newName,
+    usernameTemplate
+  }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
+
+    const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
     try {
       await updateDynamicSecret.mutateAsync({
         name: dynamicSecret.name,
@@ -102,7 +112,8 @@ export const EditDynamicSecretSapHanaForm = ({
           maxTTL: maxTTL || undefined,
           defaultTTL,
           inputs,
-          newName: newName === dynamicSecret.name ? undefined : newName
+          newName: newName === dynamicSecret.name ? undefined : newName,
+          usernameTemplate: !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate
         }
       });
       onClose();
@@ -259,6 +270,24 @@ export const EditDynamicSecretSapHanaForm = ({
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                     <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="usernameTemplate"
+                        defaultValue=""
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Username Template"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <Input
+                              {...field}
+                              value={field.value || undefined}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
                       <Controller
                         control={control}
                         name="inputs.creationStatement"

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

@@ -56,7 +56,8 @@ const formSchema = z.object({
     .string()
     .trim()
     .min(1)
-    .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+    .refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  usernameTemplate: z.string().trim().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -85,6 +86,7 @@ export const EditDynamicSecretSnowflakeForm = ({
       defaultTTL: dynamicSecret.defaultTTL,
       maxTTL: dynamicSecret.maxTTL,
       newName: dynamicSecret.name,
+      usernameTemplate: dynamicSecret?.usernameTemplate || "{{randomUsername}}",
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"])
       }
@@ -93,10 +95,17 @@ export const EditDynamicSecretSnowflakeForm = ({
 
   const updateDynamicSecret = useUpdateDynamicSecret();
 
-  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+  const handleUpdateDynamicSecret = async ({
+    inputs,
+    maxTTL,
+    defaultTTL,
+    newName,
+    usernameTemplate
+  }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
     try {
+      const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
       await updateDynamicSecret.mutateAsync({
         name: dynamicSecret.name,
         path: secretPath,
@@ -106,7 +115,8 @@ export const EditDynamicSecretSnowflakeForm = ({
           maxTTL: maxTTL || undefined,
           defaultTTL,
           inputs,
-          newName: newName === dynamicSecret.name ? undefined : newName
+          newName: newName === dynamicSecret.name ? undefined : newName,
+          usernameTemplate: !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate
         }
       });
       onClose();
@@ -262,6 +272,24 @@ export const EditDynamicSecretSnowflakeForm = ({
                 <AccordionItem value="advance-statements">
                   <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                   <AccordionContent>
+                    <Controller
+                      control={control}
+                      name="usernameTemplate"
+                      defaultValue=""
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Username Template"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <Input
+                            {...field}
+                            value={field.value || undefined}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
                     <Controller
                       control={control}
                       name="inputs.creationStatement"

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

@@ -97,7 +97,8 @@ const formSchema = z.object({
       value: z.string().trim().default("")
     })
     .array()
-    .optional()
+    .optional(),
+  usernameTemplate: z.string().trim().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -139,6 +140,7 @@ export const EditDynamicSecretSqlProviderForm = ({
       maxTTL: dynamicSecret.maxTTL,
       newName: dynamicSecret.name,
       metadata: dynamicSecret.metadata,
+      usernameTemplate: dynamicSecret?.usernameTemplate || "{{randomUsername}}",
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"]),
         passwordRequirements:
@@ -161,11 +163,13 @@ export const EditDynamicSecretSqlProviderForm = ({
     maxTTL,
     defaultTTL,
     newName,
-    metadata
+    metadata,
+    usernameTemplate
   }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
     try {
+      const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
       await updateDynamicSecret.mutateAsync({
         name: dynamicSecret.name,
         path: secretPath,
@@ -179,7 +183,8 @@ export const EditDynamicSecretSqlProviderForm = ({
             gatewayId: isGatewayInActive ? null : inputs.gatewayId
           },
           newName: newName === dynamicSecret.name ? undefined : newName,
-          metadata
+          metadata,
+          usernameTemplate: !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate
         }
       });
       onClose();
@@ -427,6 +432,24 @@ export const EditDynamicSecretSqlProviderForm = ({
                     Creation, Revocation & Renew Statements (optional)
                   </AccordionTrigger>
                   <AccordionContent>
+                    <Controller
+                      control={control}
+                      name="usernameTemplate"
+                      defaultValue=""
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Username Template"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <Input
+                            {...field}
+                            value={field.value || undefined}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
                     <div className="mb-4 text-sm text-mineshaft-300">
                       Customize SQL statements for managing database user lifecycle
                     </div>

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx

@@ -95,7 +95,6 @@ export const SecretDetailSidebar = ({
   handleSecretShare
 }: Props) => {
   const {
-    register,
     control,
     watch,
     handleSubmit,
@@ -104,7 +103,8 @@ export const SecretDetailSidebar = ({
     formState: { isDirty, isSubmitting }
   } = useForm<TFormSchema>({
     resolver: zodResolver(formSchema),
-    values: secret
+    values: secret,
+    disabled: !secret
   });
 
   const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp([
@@ -713,14 +713,25 @@ export const SecretDetailSidebar = ({
                   </FormControl>
                 </div>
               </div>
-              <FormControl label="Comments & Notes">
-                <TextArea
-                  className="border border-mineshaft-600 bg-bunker-800 text-sm"
-                  {...register("comment")}
-                  readOnly={isReadOnly}
-                  rows={5}
-                />
-              </FormControl>
+              <Controller
+                control={control}
+                name="comment"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Comments & Notes"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    className="mb-0"
+                  >
+                    <TextArea
+                      className="border border-mineshaft-600 bg-bunker-800 text-sm"
+                      readOnly={isReadOnly}
+                      rows={5}
+                      {...field}
+                    />
+                  </FormControl>
+                )}
+              />
               <FormControl>
                 {secretReminderRepeatDays && secretReminderRepeatDays > 0 ? (
                   <div className="flex items-center justify-between px-2">
@@ -921,7 +932,9 @@ export const SecretDetailSidebar = ({
                                 variant="outline_bg"
                                 size="sm"
                                 className="h-8 w-8 rounded-md"
-                                onClick={() => setValue("value", secretValue)}
+                                onClick={() =>
+                                  setValue("value", secretValue, { shouldDirty: true })
+                                }
                               >
                                 <FontAwesomeIcon icon={faArrowRotateRight} />
                               </IconButton>

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx

@@ -58,7 +58,7 @@ import {
 } from "./SecretListView.utils";
 import { CollapsibleSecretImports } from "./CollapsibleSecretImports";
 
-const hiddenValue = "******";
+export const HIDDEN_SECRET_VALUE = "******";
 
 type Props = {
   secret: SecretV3RawSanitized;
@@ -122,7 +122,7 @@ export const SecretItem = memo(
 
     const getDefaultValue = () => {
       if (secret.secretValueHidden) {
-        return canEditSecretValue ? hiddenValue : "";
+        return canEditSecretValue ? HIDDEN_SECRET_VALUE : "";
       }
       return secret.valueOverride || secret.value || "";
     };
@@ -366,10 +366,11 @@ export const SecretItem = memo(
                       isReadOnly={isReadOnly || isRotatedSecret}
                       key="secret-value"
                       isVisible={isVisible && !secretValueHidden}
+                      canEditButNotView={secretValueHidden && !isOverriden}
                       environment={environment}
                       secretPath={secretPath}
                       {...field}
-                      defaultValue={secretValueHidden ? hiddenValue : undefined}
+                      defaultValue={secretValueHidden ? HIDDEN_SECRET_VALUE : undefined}
                       containerClassName="py-1.5 rounded-md transition-all"
                     />
                   )}

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/1PasswordSyncDestinationSection.tsx

@@ -0,0 +1,14 @@
+import { GenericFieldLabel } from "@app/components/secret-syncs";
+import { TOnePassSync } from "@app/hooks/api/secretSyncs/types/1password-sync";
+
+type Props = {
+  secretSync: TOnePassSync;
+};
+
+export const OnePassSyncDestinationSection = ({ secretSync }: Props) => {
+  const {
+    destinationConfig: { vaultId }
+  } = secretSync;
+
+  return <GenericFieldLabel label="Vault ID">{vaultId}</GenericFieldLabel>;
+};

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx

@@ -10,6 +10,7 @@ import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissi
 import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
 import { SecretSync, TSecretSync } from "@app/hooks/api/secretSyncs";
 
+import { OnePassSyncDestinationSection } from "./1PasswordSyncDestinationSection";
 import { AwsParameterStoreSyncDestinationSection } from "./AwsParameterStoreSyncDestinationSection";
 import { AwsSecretsManagerSyncDestinationSection } from "./AwsSecretsManagerSyncDestinationSection";
 import { AzureAppConfigurationSyncDestinationSection } from "./AzureAppConfigurationSyncDestinationSection";
@@ -85,6 +86,9 @@ export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }:
     case SecretSync.OCIVault:
       DestinationComponents = <OCIVaultSyncDestinationSection secretSync={secretSync} />;
       break;
+    case SecretSync.OnePass:
+      DestinationComponents = <OnePassSyncDestinationSection secretSync={secretSync} />;
+      break;
     default:
       throw new Error(`Unhandled Destination Section components: ${destination}`);
   }

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx

@@ -50,6 +50,7 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
     case SecretSync.HCVault:
     case SecretSync.TeamCity:
     case SecretSync.OCIVault:
+    case SecretSync.OnePass:
       AdditionalSyncOptionsComponent = null;
       break;
     default:

frontend/src/pages/secret-manager/SettingsPage/components/SecretTagsSection/SecretTagsTable.tsx

@@ -25,9 +25,14 @@ import {
   Tr
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, useResetPageHelper } from "@app/hooks";
-import { useGetWsTags } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { useGetWsTags } from "@app/hooks/api/tags";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
@@ -61,7 +66,14 @@ export const SecretTagsTable = ({ handlePopUpOpen }: Props) => {
     offset,
     orderDirection,
     toggleOrderDirection
-  } = usePagination(TagsOrderBy.Slug, { initPerPage: 10 });
+  } = usePagination(TagsOrderBy.Slug, {
+    initPerPage: getUserTablePreference("secretTagsTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("secretTagsTable", PreferenceKey.PerPage, newPerPage);
+  };
 
   const filteredTags = useMemo(
     () =>
@@ -151,7 +163,7 @@ export const SecretTagsTable = ({ handlePopUpOpen }: Props) => {
             page={page}
             perPage={perPage}
             onChangePage={setPage}
-            onChangePerPage={setPerPage}
+            onChangePerPage={handlePerPageChange}
           />
         )}
         {!isPending && !filteredTags?.length && (