improvement: revamp change request ui

backend/src/db/migrations/20260626214559_add-bypass-reason-access-approval-requests.ts

@@ -0,0 +1,21 @@
+import { Knex } from "knex";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  const hasColumn = await knex.schema.hasColumn(TableName.AccessApprovalRequest, "bypassReason");
+  if (!hasColumn) {
+    await knex.schema.alterTable(TableName.AccessApprovalRequest, (table) => {
+      table.text("bypassReason").nullable();
+    });
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  const hasColumn = await knex.schema.hasColumn(TableName.AccessApprovalRequest, "bypassReason");
+  if (hasColumn) {
+    await knex.schema.alterTable(TableName.AccessApprovalRequest, (table) => {
+      table.dropColumn("bypassReason");
+    });
+  }
+}

backend/src/db/schemas/access-approval-requests.ts

@@ -26,7 +26,8 @@ export const AccessApprovalRequestsSchema = z.object({
   approvedAt: z.date().nullable().optional(),
   revokedAt: z.date().nullable().optional(),
   approvedByUserId: z.string().uuid().nullable().optional(),
-  revokedByUserId: z.string().uuid().nullable().optional()
+  revokedByUserId: z.string().uuid().nullable().optional(),
+  bypassReason: z.string().nullable().optional()
 });
 
 export type TAccessApprovalRequests = z.infer<typeof AccessApprovalRequestsSchema>;

backend/src/ee/routes/v1/access-approval-request-router.ts

@@ -236,15 +236,16 @@ export const registerAccessApprovalRequestRouter = async (server: FastifyZodProv
     },
     onRequest: verifyAuth([AuthMode.JWT]),
     handler: async (req) => {
-      const { projectId, policyId, ...review } = await server.services.accessApprovalRequest.reviewAccessRequest({
-        actor: req.permission.type,
-        actorId: req.permission.id,
-        actorOrgId: req.permission.orgId,
-        actorAuthMethod: req.permission.authMethod,
-        requestId: req.params.requestId,
-        status: req.body.status,
-        bypassReason: req.body.bypassReason
-      });
+      const { projectId, policyId, isBypass, ...review } =
+        await server.services.accessApprovalRequest.reviewAccessRequest({
+          actor: req.permission.type,
+          actorId: req.permission.id,
+          actorOrgId: req.permission.orgId,
+          actorAuthMethod: req.permission.authMethod,
+          requestId: req.params.requestId,
+          status: req.body.status,
+          bypassReason: req.body.bypassReason
+        });
 
       await server.services.auditLog.createAuditLog({
         ...req.auditLogInfo,
@@ -255,7 +256,9 @@ export const registerAccessApprovalRequestRouter = async (server: FastifyZodProv
           metadata: {
             requestId: review.requestId,
             policyId,
-            reviewStatus: req.body.status
+            reviewStatus: req.body.status,
+            isBypass,
+            bypassReason: isBypass ? req.body.bypassReason : undefined
           }
         }
       });

backend/src/ee/routes/v1/secret-approval-request-router.ts

@@ -143,7 +143,7 @@ export const registerSecretApprovalRequestRouter = async (server: FastifyZodProv
     },
     onRequest: verifyAuth([AuthMode.JWT]),
     handler: async (req) => {
-      const { approval, projectId, secretMutationEvents } =
+      const { approval, projectId, secretMutationEvents, isMergedViaBypass } =
         await server.services.secretApprovalRequest.mergeSecretApprovalRequest({
           actorId: req.permission.id,
           actor: req.permission.type,
@@ -162,7 +162,9 @@ export const registerSecretApprovalRequestRouter = async (server: FastifyZodProv
           metadata: {
             mergedBy: req.permission.id,
             secretApprovalRequestSlug: approval.slug,
-            secretApprovalRequestId: approval.id
+            secretApprovalRequestId: approval.id,
+            isMergedViaBypass,
+            bypassReason: approval.bypassReason ?? undefined
           }
         }
       });

backend/src/ee/services/access-approval-request/access-approval-request-service.ts

@@ -814,7 +814,10 @@ export const accessApprovalRequestServiceFactory = ({
               privilegeId: privilegeIdToSet,
               status: ApprovalStatus.APPROVED,
               approvedAt: new Date(),
-              approvedByUserId: actorId
+              approvedByUserId: actorId,
+              // A break-glass approval grants access without the required reviews; persist the
+              // reason so the bypass can be surfaced in the UI and audit log after the fact.
+              bypassReason: isBreakGlassApprovalAttempt ? bypassReason || null : null
             },
             tx
           );
@@ -875,7 +878,12 @@ export const accessApprovalRequestServiceFactory = ({
       return reviewForThisActorProcessing;
     });
 
-    return { ...reviewStatus, projectId: accessApprovalRequest.projectId, policyId: accessApprovalRequest.policyId };
+    return {
+      ...reviewStatus,
+      projectId: accessApprovalRequest.projectId,
+      policyId: accessApprovalRequest.policyId,
+      isBypass: isBreakGlassApprovalAttempt
+    };
   };
 
   const revokeAccessRequest: TAccessApprovalRequestServiceFactory["revokeAccessRequest"] = async ({

backend/src/ee/services/access-approval-request/access-approval-request-types.ts

@@ -204,6 +204,7 @@ export interface TAccessApprovalRequestServiceFactory {
     updatedAt: Date;
     projectId: string;
     policyId: string;
+    isBypass: boolean;
   }>;
   getCount: (arg: TGetAccessRequestCountDTO) => Promise<{
     count: {

backend/src/ee/services/audit-log/audit-log-types.ts

@@ -2669,6 +2669,8 @@ interface SecretApprovalMerge {
     mergedBy: string;
     secretApprovalRequestSlug: string;
     secretApprovalRequestId: string;
+    isMergedViaBypass?: boolean;
+    bypassReason?: string;
   };
 }
 
@@ -6663,6 +6665,8 @@ interface AccessApprovalRequestReviewEvent {
     requestId: string;
     policyId: string;
     reviewStatus: string;
+    isBypass?: boolean;
+    bypassReason?: string;
   };
 }
 

backend/src/ee/services/secret-approval-request/secret-approval-request-service.ts

@@ -679,6 +679,10 @@ export const secretApprovalRequestServiceFactory = ({
     if (!hasMinApproval && !(isSoftEnforcement && canBypass))
       throw new BadRequestError({ message: "Doesn't have minimum approvals needed" });
 
+    // A bypass merge applies the changes without satisfying the policy's required approvals.
+    // Persist the reason so it can be surfaced in the UI and distinguished from a normal merge.
+    const isMergedViaBypass = isSoftEnforcement && !hasMinApproval;
+
     const { botKey, shouldUseSecretV2Bridge, project } = await projectBotService.getBotKey(projectId);
     let mergeStatus;
     if (shouldUseSecretV2Bridge) {
@@ -970,7 +974,8 @@ export const secretApprovalRequestServiceFactory = ({
             conflicts: JSON.stringify(conflicts),
             hasMerged: true,
             status: RequestState.Closed,
-            statusChangedByUserId: actorId
+            statusChangedByUserId: actorId,
+            bypassReason: isMergedViaBypass ? bypassReason || null : null
           },
           tx
         );
@@ -1160,7 +1165,8 @@ export const secretApprovalRequestServiceFactory = ({
             conflicts: JSON.stringify(conflicts),
             hasMerged: true,
             status: RequestState.Closed,
-            statusChangedByUserId: actorId
+            statusChangedByUserId: actorId,
+            bypassReason: isMergedViaBypass ? bypassReason || null : null
           },
           tx
         );
@@ -1399,7 +1405,7 @@ export const secretApprovalRequestServiceFactory = ({
       }
     }
 
-    return { ...mergeStatus, projectId, secretMutationEvents };
+    return { ...mergeStatus, projectId, secretMutationEvents, isMergedViaBypass };
   };
 
   // function to save secret change to secret approval

docs/documentation/platform/access-controls/access-requests.mdx

@@ -45,8 +45,7 @@ Access policies support sequential multi-step approval workflows where approvals
 ![Multi-Step Approval Workflow](/images/platform/access-controls/access-request/multi-step-approval-workflow.png)
 
 Each step can have:
-- **User Approvers**: Individual users who can approve at this step
-- **Group Approvers**: User groups whose members can approve
+- **Approvers**: Individual users and/or user groups who can approve at this step
 - **Min. Approvals Required**: The minimum number of approvals needed before moving to the next step
 
 Approvals must be completed in order — Step 2 approvers cannot review until Step 1 requirements are met.

frontend/src/components/secrets/diff/FolderDiffView.tsx

@@ -64,10 +64,8 @@ export const FolderDiffView = ({ operationType, oldVersion, newVersion }: Folder
           </div>
         </div>
       ) : (
-        <div className="flex w-full cursor-default flex-col items-center justify-center rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4 xl:w-1/2">
-          <span className="text-sm text-mineshaft-400">
-            Folder did not exist in the previous version.
-          </span>
+        <div className="flex w-full cursor-default flex-col items-center justify-center rounded-lg border border-dashed border-border bg-container p-4 text-center shadow-inner xl:w-1/2">
+          <span className="text-sm text-muted">Folder did not exist in the previous version.</span>
         </div>
       )}
 
@@ -102,8 +100,8 @@ export const FolderDiffView = ({ operationType, oldVersion, newVersion }: Folder
           </div>
         </div>
       ) : (
-        <div className="flex w-full cursor-default flex-col items-center justify-center rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4 xl:w-1/2">
-          <span className="text-sm text-mineshaft-400">Folder will be deleted.</span>
+        <div className="flex w-full cursor-default flex-col items-center justify-center rounded-lg border border-dashed border-border bg-container p-4 text-center shadow-inner xl:w-1/2">
+          <span className="text-sm text-muted">Folder will be deleted.</span>
         </div>
       )}
     </div>

frontend/src/components/secrets/diff/SecretDiffView.tsx

@@ -282,10 +282,8 @@ export const SecretDiffView = ({
           </div>
         </div>
       ) : (
-        <div className="flex w-full cursor-default flex-col items-center justify-center rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4 xl:w-1/2">
-          <span className="text-sm text-mineshaft-400">
-            Secret did not exist in the previous version.
-          </span>
+        <div className="flex w-full cursor-default flex-col items-center justify-center rounded-lg border border-dashed border-border bg-container p-4 text-center shadow-inner xl:w-1/2">
+          <span className="text-sm text-muted">Secret did not exist in the previous version.</span>
         </div>
       )}
 
@@ -378,8 +376,8 @@ export const SecretDiffView = ({
           </div>
         </div>
       ) : (
-        <div className="flex w-full cursor-default flex-col items-center justify-center rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4 xl:w-1/2">
-          <span className="text-sm text-mineshaft-400">Secret will be deleted.</span>
+        <div className="flex w-full cursor-default flex-col items-center justify-center rounded-lg border border-dashed border-border bg-container p-4 text-center shadow-inner xl:w-1/2">
+          <span className="text-sm text-muted">Secret will be deleted.</span>
         </div>
       )}
     </div>

frontend/src/hooks/api/accessApproval/mutation.tsx

@@ -52,6 +52,12 @@ export const useCreateAccessApprovalPolicy = () => {
       queryClient.invalidateQueries({
         queryKey: accessApprovalKeys.getAccessApprovalPolicies(projectSlug)
       });
+      queryClient.invalidateQueries({
+        queryKey: accessApprovalKeys.getAccessApprovalRequestsAllForProject(projectSlug)
+      });
+      queryClient.invalidateQueries({
+        queryKey: accessApprovalKeys.getAccessApprovalRequestCount(projectSlug)
+      });
     }
   });
 };
@@ -93,6 +99,12 @@ export const useUpdateAccessApprovalPolicy = () => {
       queryClient.invalidateQueries({
         queryKey: accessApprovalKeys.getAccessApprovalPolicies(projectSlug)
       });
+      queryClient.invalidateQueries({
+        queryKey: accessApprovalKeys.getAccessApprovalRequestsAllForProject(projectSlug)
+      });
+      queryClient.invalidateQueries({
+        queryKey: accessApprovalKeys.getAccessApprovalRequestCount(projectSlug)
+      });
     }
   });
 };
@@ -109,6 +121,12 @@ export const useDeleteAccessApprovalPolicy = () => {
       queryClient.invalidateQueries({
         queryKey: accessApprovalKeys.getAccessApprovalPolicies(projectSlug)
       });
+      queryClient.invalidateQueries({
+        queryKey: accessApprovalKeys.getAccessApprovalRequestsAllForProject(projectSlug)
+      });
+      queryClient.invalidateQueries({
+        queryKey: accessApprovalKeys.getAccessApprovalRequestCount(projectSlug)
+      });
     }
   });
 };

frontend/src/hooks/api/accessApproval/types.ts

@@ -80,6 +80,8 @@ export type TAccessApprovalRequest = {
     isApproved: boolean;
   } | null;
   status: ApprovalStatus;
+  // Set when the request was approved via break-glass without the required reviews.
+  bypassReason?: string | null;
   policy: {
     id: string;
     name: string;

frontend/src/hooks/api/secretApproval/mutation.tsx

@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
+import { secretApprovalRequestKeys } from "../secretApprovalRequest/queries";
 import { secretApprovalKeys } from "./queries";
 import { TCreateSecretPolicyDTO, TDeleteSecretPolicyDTO, TUpdateSecretPolicyDTO } from "./types";
 
@@ -37,6 +38,15 @@ export const useCreateSecretApprovalPolicy = () => {
       queryClient.invalidateQueries({
         queryKey: secretApprovalKeys.getApprovalPolicies(projectId)
       });
+      queryClient.invalidateQueries({
+        queryKey: secretApprovalRequestKeys.listAllForProject({ projectId })
+      });
+      queryClient.invalidateQueries({
+        queryKey: secretApprovalRequestKeys.count({ projectId })
+      });
+      queryClient.invalidateQueries({
+        predicate: (query) => query.queryKey[1] === "secret-approval-request-detail"
+      });
     }
   });
 };
@@ -72,6 +82,15 @@ export const useUpdateSecretApprovalPolicy = () => {
       queryClient.invalidateQueries({
         queryKey: secretApprovalKeys.getApprovalPolicies(projectId)
       });
+      queryClient.invalidateQueries({
+        queryKey: secretApprovalRequestKeys.listAllForProject({ projectId })
+      });
+      queryClient.invalidateQueries({
+        queryKey: secretApprovalRequestKeys.count({ projectId })
+      });
+      queryClient.invalidateQueries({
+        predicate: (query) => query.queryKey[1] === "secret-approval-request-detail"
+      });
     }
   });
 };
@@ -88,6 +107,15 @@ export const useDeleteSecretApprovalPolicy = () => {
       queryClient.invalidateQueries({
         queryKey: secretApprovalKeys.getApprovalPolicies(projectId)
       });
+      queryClient.invalidateQueries({
+        queryKey: secretApprovalRequestKeys.listAllForProject({ projectId })
+      });
+      queryClient.invalidateQueries({
+        queryKey: secretApprovalRequestKeys.count({ projectId })
+      });
+      queryClient.invalidateQueries({
+        predicate: (query) => query.queryKey[1] === "secret-approval-request-detail"
+      });
     }
   });
 };

frontend/src/hooks/api/secretApprovalRequest/queries.tsx

@@ -95,7 +95,8 @@ export const useGetSecretApprovalRequests = ({
         search
       }),
     enabled: Boolean(projectId) && (options?.enabled ?? true),
-    placeholderData: (previousData) => previousData
+    placeholderData: (previousData) => previousData,
+    refetchInterval: options?.refetchInterval ?? 30_000
   });
 
 const fetchSecretApprovalRequestDetails = async ({

frontend/src/hooks/api/secretApprovalRequest/types.ts

@@ -64,6 +64,8 @@ export type TSecretApprovalRequest = {
   secretPath: string;
   hasMerged: boolean;
   status: "open" | "close";
+  // Set when the request was merged without satisfying the policy's required approvals.
+  bypassReason?: string | null;
   policy: Omit<TSecretApprovalPolicy, "approvers" | "bypassers"> & {
     approvers: {
       isOrgMembershipActive: boolean;

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

@@ -2092,7 +2092,7 @@ const OverviewPageContent = () => {
         text: requiresApproval
           ? "Requested changes have been sent for review"
           : "Changes saved successfully",
-        type: "success"
+        type: requiresApproval ? "info" : "success"
       });
     },
     [singleVisibleEnv, projectId, secretPath, isProtectedBranch, queryClient, createCommit]
@@ -2700,10 +2700,10 @@ const OverviewPageContent = () => {
                       to={ROUTE_PATHS.SecretManager.ApprovalPage.path}
                       params={{ orgId, projectId }}
                       search={{ selectedTab: "approval-requests", requestId: "" }}
-                      className="ml-auto flex shrink-0 items-center gap-1 text-sm text-info underline underline-offset-2"
+                      className="ml-auto flex shrink-0 items-center gap-1 text-xs text-white underline underline-offset-2"
                     >
                       Review
-                      <ChevronRightIcon className="size-3.5" />
+                      <ChevronRightIcon className="mt-px size-4" />
                     </Link>
                   )}
                 </AlertTitle>