Merge pull request #1044 from akhilmhdh/feat/secret-approval-part-2

Policy based secret review system

frontend/src/components/navigation/NavHeader.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
+import { faAngleRight, faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useOrganization, useWorkspace } from "@app/context";
@@ -16,6 +16,8 @@ type Props = {
   onEnvChange?: (slug: string) => void;
   secretPath?: string;
   isFolderMode?: boolean;
+  isProtectedBranch?: boolean;
+  protectionPolicyName?: string;
 };
 
 // TODO: make links clickable and clean up
@@ -42,7 +44,9 @@ export default function NavHeader({
   userAvailableEnvs = [],
   onEnvChange,
   isFolderMode,
-  secretPath = "/"
+  secretPath = "/",
+  isProtectedBranch = false,
+  protectionPolicyName
 }: Props): JSX.Element {
   const { currentWorkspace } = useWorkspace();
   const { currentOrg } = useOrganization();
@@ -151,6 +155,11 @@ export default function NavHeader({
             </div>
           );
         })}
+      {isProtectedBranch && (
+        <Tooltip content={`Protected by policy ${protectionPolicyName}`}>
+          <FontAwesomeIcon icon={faLock} className="text-primary ml-2" />
+        </Tooltip>
+      )}
     </div>
   );
 }

frontend/src/components/v2/Button/Button.tsx

@@ -11,6 +11,9 @@ type Props = {
   isLoading?: boolean;
 };
 
+// refactor(akhilmhdh): both color and size variants are together need to split it
+// colorSchema should handle all color class names
+// variant should handle how the button padding and other  types should be set
 const buttonVariants = cva(
   [
     "button",
@@ -67,7 +70,7 @@ const buttonVariants = cva(
       {
         colorSchema: "primary",
         variant: "solid",
-        className: "bg-primary-500 bg-opacity-90 hover:bg-primary-500 hover:text-black"
+        className: "text-black bg-primary-500 bg-opacity-90 hover:bg-primary-500 hover:text-black"
       },
       {
         colorSchema: "primary",
@@ -106,6 +109,12 @@ const buttonVariants = cva(
         variant: "outline",
         className: "text-red hover:bg-red hover:text-black"
       },
+      {
+        colorSchema: "danger",
+        variant: "outline_bg",
+        className:
+          "bg-mineshaft-600 border border-red-500 hover:bg-red/[0.1] hover:border-red/40 text-red-500"
+      },
       {
         colorSchema: "primary",
         variant: "plain",

frontend/src/context/ProjectPermissionContext/types.ts

@@ -20,7 +20,8 @@ export enum ProjectPermissionSub {
   IpAllowList = "ip-allowlist",
   Workspace = "workspace",
   Secrets = "secrets",
-  SecretRollback = "secret-rollback"
+  SecretRollback = "secret-rollback",
+  SecretApproval = "secret-approval"
 }
 
 type SubjectFields = {
@@ -43,6 +44,7 @@ export type ProjectPermissionSet =
   | [ProjectPermissionActions, ProjectPermissionSub.IpAllowList]
   | [ProjectPermissionActions, ProjectPermissionSub.Settings]
   | [ProjectPermissionActions, ProjectPermissionSub.ServiceTokens]
+  | [ProjectPermissionActions, ProjectPermissionSub.SecretApproval]
   | [ProjectPermissionActions.Delete, ProjectPermissionSub.Workspace]
   | [ProjectPermissionActions.Edit, ProjectPermissionSub.Workspace]
   | [ProjectPermissionActions.Read, ProjectPermissionSub.SecretRollback]

frontend/src/hooks/api/index.tsx

@@ -8,6 +8,7 @@ export * from "./keys";
 export * from "./organization";
 export * from "./roles";
 export * from "./secretApproval";
+export * from "./secretApprovalRequest";
 export * from "./secretFolders";
 export * from "./secretImports";
 export * from "./secrets";

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

@@ -3,4 +3,4 @@ export {
   useDeleteSecretApprovalPolicy,
   useUpdateSecretApprovalPolicy
 } from "./mutation";
-export { useGetSecretApprovalPolicies } from "./queries";
+export { useGetSecretApprovalPolicies, useGetSecretApprovalPolicyOfABoard } from "./queries";

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

@@ -9,13 +9,14 @@ export const useCreateSecretApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TCreateSecretPolicyDTO>({
-    mutationFn: async ({ environment, workspaceId, approvals, approvers, secretPath }) => {
+    mutationFn: async ({ environment, workspaceId, approvals, approvers, secretPath, name }) => {
       const { data } = await apiRequest.post("/api/v1/secret-approvals", {
         environment,
         workspaceId,
         approvals,
         approvers,
-        secretPath
+        secretPath,
+        name
       });
       return data;
     },
@@ -29,11 +30,12 @@ export const useUpdateSecretApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TUpdateSecretPolicyDTO>({
-    mutationFn: async ({ id, approvers, approvals, secretPath }) => {
+    mutationFn: async ({ id, approvers, approvals, secretPath, name }) => {
       const { data } = await apiRequest.patch(`/api/v1/secret-approvals/${id}`, {
         approvals,
         approvers,
-        secretPath
+        secretPath,
+        name
       });
       return data;
     },

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

@@ -2,11 +2,19 @@ import { useQuery, UseQueryOptions } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import { TSecretApprovalPolicy } from "./types";
+import {
+  TGetSecretApprovalPoliciesDTO,
+  TGetSecretApprovalPolicyOfBoardDTO,
+  TSecretApprovalPolicy
+} from "./types";
 
 export const secretApprovalKeys = {
   getApprovalPolicies: (workspaceId: string) =>
-    [{ workspaceId }, "secret-approval-policies"] as const
+    [{ workspaceId }, "secret-approval-policies"] as const,
+  getApprovalPolicyOfABoard: (workspaceId: string, environment: string, secretPath: string) => [
+    { workspaceId, environment, secretPath },
+    "Secret-approval-policy"
+  ]
 };
 
 const fetchApprovalPolicies = async (workspaceId: string) => {
@@ -20,7 +28,7 @@ const fetchApprovalPolicies = async (workspaceId: string) => {
 export const useGetSecretApprovalPolicies = ({
   workspaceId,
   options = {}
-}: { workspaceId: string } & {
+}: TGetSecretApprovalPoliciesDTO & {
   options?: UseQueryOptions<
     TSecretApprovalPolicy[],
     unknown,
@@ -34,3 +42,35 @@ export const useGetSecretApprovalPolicies = ({
     ...options,
     enabled: Boolean(workspaceId) && (options?.enabled ?? true)
   });
+
+const fetchApprovalPolicyOfABoard = async (
+  workspaceId: string,
+  environment: string,
+  secretPath: string
+) => {
+  const { data } = await apiRequest.get<{ policy: TSecretApprovalPolicy }>(
+    "/api/v1/secret-approvals/board",
+    { params: { workspaceId, environment, secretPath } }
+  );
+  return data.policy || "";
+};
+
+export const useGetSecretApprovalPolicyOfABoard = ({
+  workspaceId,
+  secretPath = "/",
+  environment,
+  options = {}
+}: TGetSecretApprovalPolicyOfBoardDTO & {
+  options?: UseQueryOptions<
+    TSecretApprovalPolicy,
+    unknown,
+    TSecretApprovalPolicy,
+    ReturnType<typeof secretApprovalKeys.getApprovalPolicyOfABoard>
+  >;
+}) =>
+  useQuery({
+    queryKey: secretApprovalKeys.getApprovalPolicyOfABoard(workspaceId, environment, secretPath),
+    queryFn: () => fetchApprovalPolicyOfABoard(workspaceId, environment, secretPath),
+    ...options,
+    enabled: Boolean(workspaceId && secretPath && environment) && (options?.enabled ?? true)
+  });

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

@@ -1,14 +1,26 @@
 export type TSecretApprovalPolicy = {
   _id: string;
   workspace: string;
+  name: string;
   environment: string;
   secretPath?: string;
   approvers: string[];
   approvals: number;
 };
 
+export type TGetSecretApprovalPoliciesDTO = {
+  workspaceId: string;
+};
+
+export type TGetSecretApprovalPolicyOfBoardDTO = {
+  workspaceId: string;
+  environment: string;
+  secretPath: string;
+};
+
 export type TCreateSecretPolicyDTO = {
   workspaceId: string;
+  name?: string;
   environment: string;
   secretPath?: string | null;
   approvers?: string[];
@@ -17,6 +29,7 @@ export type TCreateSecretPolicyDTO = {
 
 export type TUpdateSecretPolicyDTO = {
   id: string;
+  name?: string;
   approvers?: string[];
   secretPath?: string | null;
   approvals?: number;

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

@@ -0,0 +1,10 @@
+export {
+  usePerformSecretApprovalRequestMerge,
+  useUpdateSecretApprovalRequestStatus,
+  useUpdateSecretApprovalReviewStatus
+} from "./mutation";
+export {
+  useGetSecretApprovalRequestCount,
+  useGetSecretApprovalRequestDetails,
+  useGetSecretApprovalRequests
+} from "./queries";

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

@@ -0,0 +1,59 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { secretApprovalRequestKeys } from "./queries";
+import {
+  TPerformSecretApprovalRequestMerge,
+  TUpdateSecretApprovalRequestStatusDTO,
+  TUpdateSecretApprovalReviewStatusDTO
+} from "./types";
+
+export const useUpdateSecretApprovalReviewStatus = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TUpdateSecretApprovalReviewStatusDTO>({
+    mutationFn: async ({ id, status }) => {
+      const { data } = await apiRequest.post(`/api/v1/secret-approval-requests/${id}/review`, {
+        status
+      });
+      return data;
+    },
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries(secretApprovalRequestKeys.detail({ id }));
+    }
+  });
+};
+
+export const useUpdateSecretApprovalRequestStatus = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TUpdateSecretApprovalRequestStatusDTO>({
+    mutationFn: async ({ id, status }) => {
+      const { data } = await apiRequest.post(`/api/v1/secret-approval-requests/${id}/status`, {
+        status
+      });
+      return data;
+    },
+    onSuccess: (_, { id, workspaceId }) => {
+      queryClient.invalidateQueries(secretApprovalRequestKeys.detail({ id }));
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
+    }
+  });
+};
+
+export const usePerformSecretApprovalRequestMerge = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TPerformSecretApprovalRequestMerge>({
+    mutationFn: async ({ id }) => {
+      const { data } = await apiRequest.post(`/api/v1/secret-approval-requests/${id}/merge`);
+      return data;
+    },
+    onSuccess: (_, { id, workspaceId }) => {
+      queryClient.invalidateQueries(secretApprovalRequestKeys.detail({ id }));
+      queryClient.invalidateQueries(secretApprovalRequestKeys.list({ workspaceId }));
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
+    }
+  });
+};

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

@@ -0,0 +1,224 @@
+import {
+  useInfiniteQuery,
+  UseInfiniteQueryOptions,
+  useQuery,
+  UseQueryOptions
+} from "@tanstack/react-query";
+
+import {
+  decryptAssymmetric,
+  decryptSymmetric
+} from "@app/components/utilities/cryptography/crypto";
+import { apiRequest } from "@app/config/request";
+
+import { UserWsKeyPair } from "../keys/types";
+import { decryptSecrets } from "../secrets/queries";
+import { DecryptedSecret } from "../secrets/types";
+import {
+  TGetSecretApprovalRequestCount,
+  TGetSecretApprovalRequestDetails,
+  TGetSecretApprovalRequestList,
+  TSecretApprovalRequest,
+  TSecretApprovalRequestCount,
+  TSecretApprovalSecChange,
+  TSecretApprovalSecChangeData
+} from "./types";
+
+export const secretApprovalRequestKeys = {
+  list: ({
+    workspaceId,
+    environment,
+    status,
+    committer,
+    offset,
+    limit
+  }: TGetSecretApprovalRequestList) =>
+    [
+      { workspaceId, environment, status, committer, offset, limit },
+      "secret-approval-requests"
+    ] as const,
+  detail: ({ id }: Omit<TGetSecretApprovalRequestDetails, "decryptKey">) =>
+    [{ id }, "secret-approval-request-detail"] as const,
+  count: ({ workspaceId }: TGetSecretApprovalRequestCount) => [
+    { workspaceId },
+    "secret-approval-request-count"
+  ]
+};
+
+export const decryptSecretApprovalSecret = (
+  encSecret: TSecretApprovalSecChangeData,
+  decryptFileKey: UserWsKeyPair
+) => {
+  const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
+  const key = decryptAssymmetric({
+    ciphertext: decryptFileKey.encryptedKey,
+    nonce: decryptFileKey.nonce,
+    publicKey: decryptFileKey.sender.publicKey,
+    privateKey: PRIVATE_KEY
+  });
+
+  const secretKey = decryptSymmetric({
+    ciphertext: encSecret.secretKeyCiphertext,
+    iv: encSecret.secretKeyIV,
+    tag: encSecret.secretKeyTag,
+    key
+  });
+
+  const secretValue = decryptSymmetric({
+    ciphertext: encSecret.secretValueCiphertext,
+    iv: encSecret.secretValueIV,
+    tag: encSecret.secretValueTag,
+    key
+  });
+
+  const secretComment = decryptSymmetric({
+    ciphertext: encSecret.secretCommentCiphertext,
+    iv: encSecret.secretCommentIV,
+    tag: encSecret.secretCommentTag,
+    key
+  });
+  return {
+    _id: encSecret._id,
+    version: encSecret.version,
+    secretKey,
+    secretValue,
+    secretComment,
+    tags: encSecret.tags
+  };
+};
+
+const fetchSecretApprovalRequestList = async ({
+  workspaceId,
+  environment,
+  committer,
+  status = "open",
+  limit = 20,
+  offset
+}: TGetSecretApprovalRequestList) => {
+  const { data } = await apiRequest.get<{ approvals: TSecretApprovalRequest[] }>(
+    "/api/v1/secret-approval-requests",
+    {
+      params: {
+        workspaceId,
+        environment,
+        committer,
+        status,
+        limit,
+        offset
+      }
+    }
+  );
+
+  return data.approvals;
+};
+
+export const useGetSecretApprovalRequests = ({
+  workspaceId,
+  environment,
+  options = {},
+  status,
+  limit = 20,
+  committer
+}: TGetSecretApprovalRequestList & {
+  options?: Omit<
+    UseInfiniteQueryOptions<
+      TSecretApprovalRequest[],
+      unknown,
+      TSecretApprovalRequest[],
+      ReturnType<typeof secretApprovalRequestKeys.list>
+    >,
+    "queryKey" | "queryFn"
+  >;
+}) =>
+  useInfiniteQuery({
+    queryKey: secretApprovalRequestKeys.list({
+      workspaceId,
+      environment,
+      committer,
+      status
+    }),
+    queryFn: ({ pageParam }) =>
+      fetchSecretApprovalRequestList({
+        workspaceId,
+        environment,
+        status,
+        committer,
+        limit,
+        offset: pageParam
+      }),
+    enabled: Boolean(workspaceId) && (options?.enabled ?? true),
+    getNextPageParam: (lastPage, pages) => {
+      if (lastPage.length && lastPage.length < limit) return undefined;
+
+      return lastPage?.length !== 0 ? pages.length * limit : undefined;
+    }
+  });
+
+const fetchSecretApprovalRequestDetails = async ({
+  id
+}: Omit<TGetSecretApprovalRequestDetails, "decryptKey">) => {
+  const { data } = await apiRequest.get<{ approval: TSecretApprovalRequest }>(
+    `/api/v1/secret-approval-requests/${id}`
+  );
+
+  return data.approval;
+};
+
+export const useGetSecretApprovalRequestDetails = ({
+  id,
+  decryptKey,
+  options = {}
+}: TGetSecretApprovalRequestDetails & {
+  options?: Omit<
+    UseQueryOptions<
+      TSecretApprovalRequest,
+      unknown,
+      TSecretApprovalRequest<TSecretApprovalSecChange, DecryptedSecret>,
+      ReturnType<typeof secretApprovalRequestKeys.detail>
+    >,
+    "queryKey" | "queryFn"
+  >;
+}) =>
+  useQuery({
+    queryKey: secretApprovalRequestKeys.detail({ id }),
+    queryFn: () => fetchSecretApprovalRequestDetails({ id }),
+    select: (data) => ({
+      ...data,
+      commits: data.commits.map(({ secretVersion, op, newVersion, secret }) => ({
+        op,
+        secret,
+        secretVersion: secretVersion ? decryptSecrets([secretVersion], decryptKey)[0] : undefined,
+        newVersion: newVersion ? decryptSecretApprovalSecret(newVersion, decryptKey) : undefined
+      }))
+    }),
+    enabled: Boolean(id && decryptKey) && (options?.enabled ?? true)
+  });
+
+const fetchSecretApprovalRequestCount = async ({ workspaceId }: TGetSecretApprovalRequestCount) => {
+  const { data } = await apiRequest.get<{ approvals: TSecretApprovalRequestCount }>(
+    "/api/v1/secret-approval-requests/count",
+    { params: { workspaceId } }
+  );
+
+  return data.approvals;
+};
+
+export const useGetSecretApprovalRequestCount = ({
+  workspaceId,
+  options = {}
+}: TGetSecretApprovalRequestCount & {
+  options?: Omit<
+    UseQueryOptions<
+      TSecretApprovalRequestCount,
+      unknown,
+      TSecretApprovalRequestCount,
+      ReturnType<typeof secretApprovalRequestKeys.count>
+    >,
+    "queryKey" | "queryFn"
+  >;
+}) =>
+  useQuery({
+    queryKey: secretApprovalRequestKeys.count({ workspaceId }),
+    queryFn: () => fetchSecretApprovalRequestCount({ workspaceId }),
+    enabled: Boolean(workspaceId) && (options?.enabled ?? true)
+  });

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

@@ -0,0 +1,113 @@
+import { UserWsKeyPair } from "../keys/types";
+import { TSecretApprovalPolicy } from "../secretApproval/types";
+import { EncryptedSecret } from "../secrets/types";
+import { WsTag } from "../tags/types";
+
+export enum ApprovalStatus {
+  PENDING = "pending",
+  APPROVED = "approved",
+  REJECTED = "rejected"
+}
+
+export enum CommitType {
+  DELETE = "delete",
+  UPDATE = "update",
+  CREATE = "create"
+}
+
+export type TSecretApprovalSecChangeData = {
+  _id: string;
+  secretKeyCiphertext: string;
+  secretKeyIV: string;
+  secretKeyTag: string;
+  secretValueCiphertext: string;
+  secretValueIV: string;
+  secretValueTag: string;
+  secretCommentIV: string;
+  secretCommentTag: string;
+  secretCommentCiphertext: string;
+  skipMultilineEncoding?: boolean;
+  algorithm: "aes-256-gcm";
+  keyEncoding: "utf8" | "base64";
+  tags?: WsTag[];
+  version: number;
+};
+
+export type TSecretApprovalSecChange = {
+  _id: string;
+  version: number;
+  secretKey: string;
+  secretValue: string;
+  secretComment: string;
+  tags?: string[];
+};
+
+export type TSecretApprovalRequest<
+  T extends unknown = TSecretApprovalSecChangeData,
+  J extends unknown = EncryptedSecret
+> = {
+  _id: string;
+  slug: string;
+  createdAt: string;
+  committer: string;
+  reviewers: {
+    member: string;
+    status: ApprovalStatus;
+  }[];
+  workspace: string;
+  environment: string;
+  folderId: string;
+  secretPath: string;
+  hasMerged: boolean;
+  status: "open" | "close";
+  policy: TSecretApprovalPolicy;
+  statusChangeBy: string;
+  conflicts: Array<{ secretId: string; op: CommitType.UPDATE }>;
+  commits: {
+    // if there is no secret means it was creation
+    secret?: { version: number };
+    secretVersion: J;
+    // if there is no new version its for Delete
+    newVersion?: T;
+    op: CommitType;
+  }[];
+};
+
+export type TSecretApprovalRequestCount = {
+  open: number;
+  closed: number;
+};
+
+export type TGetSecretApprovalRequestList = {
+  workspaceId: string;
+  environment?: string;
+  status?: "open" | "close";
+  committer?: string;
+  limit?: number;
+  offset?: number;
+};
+
+export type TGetSecretApprovalRequestCount = {
+  workspaceId: string;
+};
+
+export type TGetSecretApprovalRequestDetails = {
+  id: string;
+  decryptKey: UserWsKeyPair;
+};
+
+export type TUpdateSecretApprovalReviewStatusDTO = {
+  status: ApprovalStatus;
+  id: string;
+};
+
+export type TUpdateSecretApprovalRequestStatusDTO = {
+  status: "open" | "close";
+  id: string;
+  workspaceId: string;
+};
+
+export type TPerformSecretApprovalRequestMerge = {
+  id: string;
+  workspaceId: string;
+};

frontend/src/hooks/api/secrets/mutations.tsx

@@ -8,6 +8,7 @@ import {
 } from "@app/components/utilities/cryptography/crypto";
 import { apiRequest } from "@app/config/request";
 
+import { secretApprovalRequestKeys } from "../secretApprovalRequest/queries";
 import { secretSnapshotKeys } from "../secretSnapshots/queries";
 import { secretKeys } from "./queries";
 import {
@@ -114,6 +115,7 @@ export const useCreateSecretV3 = ({
       queryClient.invalidateQueries(
         secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
       );
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
     },
     ...options
   });
@@ -173,6 +175,7 @@ export const useUpdateSecretV3 = ({
       queryClient.invalidateQueries(
         secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
       );
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
     },
     ...options
   });
@@ -209,6 +212,7 @@ export const useDeleteSecretV3 = ({
       queryClient.invalidateQueries(
         secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
       );
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
     },
     ...options
   });
@@ -261,6 +265,7 @@ export const useCreateSecretBatch = ({
       queryClient.invalidateQueries(
         secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
       );
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
     },
     ...options
   });
@@ -313,6 +318,7 @@ export const useUpdateSecretBatch = ({
       queryClient.invalidateQueries(
         secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
       );
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
     },
     ...options
   });
@@ -349,6 +355,7 @@ export const useDeleteSecretBatch = ({
       queryClient.invalidateQueries(
         secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
       );
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
     },
     ...options
   });

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

@@ -26,7 +26,10 @@ export const secretKeys = {
   getSecretVersion: (secretId: string) => [{ secretId }, "secret-versions"] as const
 };
 
-const decryptSecrets = (encryptedSecrets: EncryptedSecret[], decryptFileKey: UserWsKeyPair) => {
+export const decryptSecrets = (
+  encryptedSecrets: EncryptedSecret[],
+  decryptFileKey: UserWsKeyPair
+) => {
   const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
   const key = decryptAssymmetric({
     ciphertext: decryptFileKey.encryptedKey,

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

@@ -11,12 +11,21 @@ export type SubscriptionPlan = {
   rbac: boolean;
   secretVersioning: boolean;
   slug: string;
+  secretApproval: string;
   tier: number;
   workspaceLimit: number;
   workspacesUsed: number;
   environmentLimit: number;
   samlSSO: boolean;
-  status: "incomplete" | "incomplete_expired" | "trialing" | "active" | "past_due" | "canceled" | "unpaid" | null;
+  status:
+    | "incomplete"
+    | "incomplete_expired"
+    | "trialing"
+    | "active"
+    | "past_due"
+    | "canceled"
+    | "unpaid"
+    | null;
   trial_end: number | null;
   has_used_trial: boolean;
 };

frontend/src/hooks/api/types.ts

@@ -5,13 +5,19 @@ export type { TCloudIntegration, TIntegration } from "./integrations/types";
 export type { UserWsKeyPair } from "./keys/types";
 export type { Organization } from "./organization/types";
 export type { TSecretApprovalPolicy } from "./secretApproval/types";
+export type {
+  TGetSecretApprovalRequestDetails,
+  TSecretApprovalRequest,
+  TSecretApprovalSecChange
+} from "./secretApprovalRequest/types";
+export { ApprovalStatus, CommitType } from "./secretApprovalRequest/types";
 export type { TSecretFolder } from "./secretFolders/types";
 export type { TImportedSecrets, TSecretImports } from "./secretImports/types";
 export * from "./secrets/types";
 export type { CreateServiceTokenDTO, ServiceToken } from "./serviceTokens/types";
 export type { SubscriptionPlan } from "./subscriptions/types";
 export type { WsTag } from "./tags/types";
-export type { AddUserToWsDTO, AddUserToWsRes, OrgUser, User } from "./users/types";
+export type { AddUserToWsDTO, AddUserToWsRes, OrgUser, TWorkspaceUser, User } from "./users/types";
 export type { TWebhook } from "./webhooks/types";
 export type {
   CreateEnvironmentDTO,

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -66,6 +66,7 @@ import {
   useAddUserToWs,
   useCreateWorkspace,
   useGetOrgTrialUrl,
+  useGetSecretApprovalRequestCount,
   useLogoutUser,
   useUploadWsKey
 } from "@app/hooks/api";
@@ -114,7 +115,9 @@ export const AppLayout = ({ children }: LayoutProps) => {
   const { orgs, currentOrg } = useOrganization();
   const { user } = useUser();
   const { subscription } = useSubscription();
+  const workspaceId = currentWorkspace?._id || "";
   // const [ isLearningNoteOpen, setIsLearningNoteOpen ] = useState(true);
+  const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({ workspaceId });
 
   const isAddingProjectsAllowed = subscription?.workspaceLimit
     ? subscription.workspacesUsed < subscription.workspaceLimit
@@ -477,21 +480,24 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           </MenuItem>
                         </a>
                       </Link>
-                      {process.env.NEXT_PUBLIC_SECRET_APPROVAL === "true" && (
-                        <Link href={`/project/${currentWorkspace?._id}/approval`} passHref>
-                          <a>
-                            <MenuItem
-                              isSelected={
-                                router.asPath === `/project/${currentWorkspace?._id}/allowlist`
-                              }
-                              icon="system-outline-126-verified"
-                            >
-                              Admin Panel
-                            </MenuItem>
-                          </a>
-                        </Link>
-                      )}
-                      {/* <Link href={`/project/${currentWorkspace?._id}/allowlist`} passHref>
+                      <Link href={`/project/${currentWorkspace?._id}/approval`} passHref>
+                        <a className="relative">
+                          <MenuItem
+                            isSelected={
+                              router.asPath === `/project/${currentWorkspace?._id}/approval`
+                            }
+                            icon="system-outline-189-domain-verification"
+                          >
+                            Secret approval
+                            {Boolean(secretApprovalReqCount?.open) && (
+                              <span className="text-xs p-0.5 rounded ml-2 bg-primary text-black">
+                                {secretApprovalReqCount?.open}
+                              </span>
+                            )}
+                          </MenuItem>
+                        </a>
+                      </Link>
+                      <Link href={`/project/${currentWorkspace?._id}/allowlist`} passHref>
                         <a>
                           <MenuItem
                             isSelected={
@@ -502,7 +508,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                             IP Allowlist
                           </MenuItem>
                         </a>
-                      </Link> */}
+                      </Link>
                       <Link href={`/project/${currentWorkspace?._id}/audit-logs`} passHref>
                         <a>
                           <MenuItem
@@ -698,12 +704,12 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       </div>
                     </button>
                   )}
-                  {infisicalPlatformVersion && (
+                {infisicalPlatformVersion && (
                   <div className="mb-2 w-full pl-5 duration-200 hover:text-mineshaft-200">
                     <FontAwesomeIcon icon={faInfo} className="mr-4 px-[0.1rem]" />
-                      Platform Version: {infisicalPlatformVersion}
+                    Platform Version: {infisicalPlatformVersion}
                   </div>
-                  )}
+                )}
               </div>
             </nav>
           </aside>

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx

@@ -9,6 +9,7 @@ import {
   faLock,
   faNetworkWired,
   faPuzzlePiece,
+  faShield,
   faTags,
   faUser,
   faUsers
@@ -18,7 +19,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Button, FormControl, Input, UpgradePlanModal } from "@app/components/v2";
-import { useOrganization, useSubscription, useWorkspace } from "@app/context";
+import { ProjectPermissionSub, useOrganization, useSubscription, useWorkspace } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useCreateRole, useUpdateRole } from "@app/hooks/api";
 import { TRole } from "@app/hooks/api/roles/types";
@@ -41,6 +42,12 @@ const SINGLE_PERMISSION_LIST = [
     icon: faPuzzlePiece,
     formName: "integrations"
   },
+  {
+    title: "Secret Protect policy",
+    subtitle: "Manage policies for secret protection for unauthorized secret changes",
+    icon: faShield,
+    formName: ProjectPermissionSub.SecretApproval
+  },
   {
     title: "Roles",
     subtitle: "Role management control",

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-param-reassign */
 import { z } from "zod";
 
+import { ProjectPermissionSub } from "@app/context";
 import { TProjectPermission } from "@app/hooks/api/roles/types";
 
 const generalPermissionSchema = z
@@ -41,6 +42,8 @@ export const formSchema = z.object({
       tags: generalPermissionSchema,
       "audit-logs": generalPermissionSchema,
       "ip-allowlist": generalPermissionSchema,
+      // akhilmhdh: refactor all keys like below
+      [ProjectPermissionSub.SecretApproval]: generalPermissionSchema,
       workspace: z
         .object({
           edit: z.boolean().optional(),

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx

@@ -6,6 +6,7 @@ import { motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
 import { Checkbox, Select, SelectItem } from "@app/components/v2";
+import { ProjectPermissionSub } from "@app/context";
 import { useToggle } from "@app/hooks";
 
 import { TFormSchema } from "./ProjectRoleModifySection.utils";
@@ -21,7 +22,8 @@ type Props = {
     | "environments"
     | "tags"
     | "audit-logs"
-    | "ip-allowlist";
+    | "ip-allowlist"
+    | ProjectPermissionSub.SecretApproval;
   isNonEditable?: boolean;
   setValue: UseFormSetValue<TFormSchema>;
   control: Control<TFormSchema>;

frontend/src/views/SecretApprovalPage/SecretApprovalPage.tsx

@@ -2,6 +2,7 @@ import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 
 import { SecretApprovalPolicyList } from "./components/SecretApprovalPolicyList";
+import { SecretApprovalRequest } from "./components/SecretApprovalRequest";
 
 enum TabSection {
   ApprovalRequests = "approval-requests",
@@ -13,15 +14,18 @@ export const SecretApprovalPage = () => {
   const workspaceId = currentWorkspace?._id || "";
 
   return (
-    <div className="container mx-auto bg-bunker-800 text-white w-full h-full">
+    <div className="container mx-auto bg-bunker-800 text-white w-full h-full max-w-7xl">
       <div className="my-6">
-        <p className="text-3xl font-semibold text-gray-200">Admin Panels</p>
+        <p className="text-3xl font-semibold text-gray-200">Secret Approvals</p>
       </div>
       <Tabs defaultValue={TabSection.ApprovalRequests}>
         <TabList>
           <Tab value={TabSection.ApprovalRequests}>Secret PRs</Tab>
           <Tab value={TabSection.Rules}>Policies</Tab>
         </TabList>
+        <TabPanel value={TabSection.ApprovalRequests}>
+          <SecretApprovalRequest />
+        </TabPanel>
         <TabPanel value={TabSection.Rules}>
           <SecretApprovalPolicyList workspaceId={workspaceId} />
         </TabPanel>

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/SecretApprovalPolicyList.tsx

@@ -2,6 +2,7 @@ import { faFileShield, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
   DeleteActionModal,
@@ -13,8 +14,15 @@ import {
   Td,
   Th,
   THead,
-  Tr
+  Tr,
+  UpgradePlanModal
 } from "@app/components/v2";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useProjectPermission,
+  useSubscription
+} from "@app/context";
 import { usePopUp } from "@app/hooks";
 import {
   useDeleteSecretApprovalPolicy,
@@ -33,13 +41,19 @@ type Props = {
 export const SecretApprovalPolicyList = ({ workspaceId }: Props) => {
   const { handlePopUpToggle, handlePopUpOpen, handlePopUpClose, popUp } = usePopUp([
     "secretPolicyForm",
-    "deletePolicy"
+    "deletePolicy",
+    "upgradePlan"
   ] as const);
+  const permission = useProjectPermission();
+  const { subscription } = useSubscription();
   const { createNotification } = useNotificationContext();
 
   const { data: members } = useGetWorkspaceUsers(workspaceId);
   const { data: policies, isLoading: isPoliciesLoading } = useGetSecretApprovalPolicies({
-    workspaceId
+    workspaceId,
+    options: {
+      enabled: permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval)
+    }
   });
 
   const { mutateAsync: deleteSecretApprovalPolicy } = useDeleteSecretApprovalPolicy();
@@ -75,18 +89,33 @@ export const SecretApprovalPolicyList = ({ workspaceId }: Props) => {
           </div>
         </div>
         <div>
-          <Button
-            onClick={() => handlePopUpOpen("secretPolicyForm")}
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          <ProjectPermissionCan
+            I={ProjectPermissionActions.Create}
+            a={ProjectPermissionSub.SecretApproval}
           >
-            Create policy
-          </Button>
+            {(isAllowed) => (
+              <Button
+                onClick={() => {
+                  if (subscription && !subscription?.secretApproval) {
+                    handlePopUpOpen("upgradePlan");
+                    return;
+                  }
+                  handlePopUpOpen("secretPolicyForm");
+                }}
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                isDisabled={!isAllowed}
+              >
+                Create policy
+              </Button>
+            )}
+          </ProjectPermissionCan>
         </div>
       </div>
       <TableContainer>
         <Table>
           <THead>
             <Tr>
+              <Th>Name</Th>
               <Th>Environment</Th>
               <Th>Secret Path</Th>
               <Th>Eligible Approvers</Th>
@@ -99,9 +128,11 @@ export const SecretApprovalPolicyList = ({ workspaceId }: Props) => {
               <TableSkeleton columns={4} innerKey="secret-policies" className="bg-mineshaft-700" />
             )}
             {!isPoliciesLoading && !policies?.length && (
-              <Td colSpan={5}>
-                <EmptyState title="No policies found" icon={faFileShield} />
-              </Td>
+              <Tr>
+                <Td colSpan={5}>
+                  <EmptyState title="No policies found" icon={faFileShield} />
+                </Td>
+              </Tr>
             )}
             {policies?.map((policy) => (
               <SecretApprovalPolicyRow
@@ -130,6 +161,11 @@ export const SecretApprovalPolicyList = ({ workspaceId }: Props) => {
         onChange={(isOpen) => handlePopUpToggle("deletePolicy", isOpen)}
         onDeleteApproved={handleDeletePolicy}
       />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can add secret approval policy if you switch to Infisical's Team plan."
+      />
     </div>
   );
 };

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/components/SecretApprovalPolicyRow.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { faCheckCircle, faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,9 +12,9 @@ import {
   IconButton,
   Input,
   Td,
-  Tooltip,
   Tr
 } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 import { useUpdateSecretApprovalPolicy } from "@app/hooks/api";
 import { TSecretApprovalPolicy } from "@app/hooks/api/types";
 import { TWorkspaceUser } from "@app/hooks/api/users/types";
@@ -35,9 +36,11 @@ export const SecretApprovalPolicyRow = ({
 }: Props) => {
   const [selectedApprovers, setSelectedApprovers] = useState<string[]>([]);
   const { mutate: updateSecretApprovalPolicy, isLoading } = useUpdateSecretApprovalPolicy();
+  const permission = useProjectPermission();
 
   return (
     <Tr>
+      <Td>{policy.name}</Td>
       <Td>{policy.environment}</Td>
       <Td>{policy.secretPath || "*"}</Td>
       <Td>
@@ -61,7 +64,13 @@ export const SecretApprovalPolicyRow = ({
             }
           }}
         >
-          <DropdownMenuTrigger asChild disabled={isLoading}>
+          <DropdownMenuTrigger
+            asChild
+            disabled={
+              isLoading ||
+              permission.cannot(ProjectPermissionActions.Edit, ProjectPermissionSub.SecretApproval)
+            }
+          >
             <Input
               isReadOnly
               value={policy.approvers?.length ? `${policy.approvers.length} selected` : "None"}
@@ -72,7 +81,7 @@ export const SecretApprovalPolicyRow = ({
             style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
             align="start"
           >
-            <DropdownMenuLabel>Select members that must approve changes</DropdownMenuLabel>
+            <DropdownMenuLabel>Select members that are allowed to approve changes</DropdownMenuLabel>
             {members?.map(({ _id, user }) => {
               const isChecked = selectedApprovers.includes(_id);
               return (
@@ -97,22 +106,37 @@ export const SecretApprovalPolicyRow = ({
       <Td>{policy.approvals}</Td>
       <Td>
         <div className="flex items-center justify-end space-x-4">
-          <Tooltip content="Edit">
-            <IconButton variant="plain" ariaLabel="edit" onClick={onEdit}>
-              <FontAwesomeIcon icon={faPencil} size="lg" />
-            </IconButton>
-          </Tooltip>
-          <Tooltip content="Delete">
-            <IconButton
-              variant="plain"
-              colorSchema="danger"
-              size="lg"
-              ariaLabel="edit"
-              onClick={onDelete}
-            >
-              <FontAwesomeIcon icon={faTrash} />
-            </IconButton>
-          </Tooltip>
+          <ProjectPermissionCan
+            I={ProjectPermissionActions.Edit}
+            a={ProjectPermissionSub.SecretApproval}
+            renderTooltip
+            allowedLabel="Edit"
+          >
+            {(isAllowed) => (
+              <IconButton variant="plain" ariaLabel="edit" onClick={onEdit} isDisabled={!isAllowed}>
+                <FontAwesomeIcon icon={faPencil} size="lg" />
+              </IconButton>
+            )}
+          </ProjectPermissionCan>
+          <ProjectPermissionCan
+            I={ProjectPermissionActions.Delete}
+            a={ProjectPermissionSub.SecretApproval}
+            renderTooltip
+            allowedLabel="Delete"
+          >
+            {(isAllowed) => (
+              <IconButton
+                variant="plain"
+                colorSchema="danger"
+                size="lg"
+                ariaLabel="edit"
+                onClick={onDelete}
+                isDisabled={!isAllowed}
+              >
+                <FontAwesomeIcon icon={faTrash} />
+              </IconButton>
+            )}
+          </ProjectPermissionCan>
         </div>
       </Td>
     </Tr>

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/components/SecretPolicyForm.tsx

@@ -33,12 +33,18 @@ type Props = {
   editValues?: TSecretApprovalPolicy;
 };
 
-const formSchema = z.object({
-  environment: z.string(),
-  secretPath: z.string().optional().nullable(),
-  approvals: z.number().min(1),
-  approvers: z.string().array().optional()
-});
+const formSchema = z
+  .object({
+    environment: z.string(),
+    name: z.string().optional(),
+    secretPath: z.string().optional().nullable(),
+    approvals: z.number().min(1),
+    approvers: z.string().array().min(1)
+  })
+  .refine((data) => data.approvals <= data.approvers.length, {
+    path: ["approvals"],
+    message: "The number of approvals should be lower than the number of approvers."
+  });
 
 type TFormSchema = z.infer<typeof formSchema>;
 
@@ -126,6 +132,15 @@ export const SecretPolicyForm = ({
     <Modal isOpen={isOpen} onOpenChange={onToggle}>
       <ModalContent title={isEditMode ? "Edit policy" : "Create policy"}>
         <form onSubmit={handleSubmit(handleFormSubmit)}>
+          <Controller
+            control={control}
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Policy Name" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} value={field.value || ""} />
+              </FormControl>
+            )}
+          />
           <Controller
             control={control}
             name="environment"
@@ -168,7 +183,7 @@ export const SecretPolicyForm = ({
             name="approvers"
             render={({ field: { value, onChange }, fieldState: { error } }) => (
               <FormControl
-                label="Approvals Required"
+                label="Approvers Required"
                 isError={Boolean(error)}
                 errorText={error?.message}
               >
@@ -184,7 +199,7 @@ export const SecretPolicyForm = ({
                     style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
                     align="start"
                   >
-                    <DropdownMenuLabel>Select members that must approve changes</DropdownMenuLabel>
+                    <DropdownMenuLabel>Select members that are allowed to approve changes</DropdownMenuLabel>
                     {members.map(({ _id, user }) => {
                       const isChecked = value?.includes(_id);
                       return (

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx

@@ -0,0 +1,273 @@
+import { Fragment, useState } from "react";
+import {
+  faCheck,
+  faCheckCircle,
+  faChevronDown,
+  faCodeBranch
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { formatDistance } from "date-fns";
+import { AnimatePresence, motion } from "framer-motion";
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  EmptyState,
+  Skeleton
+} from "@app/components/v2";
+import { useUser, useWorkspace } from "@app/context";
+import {
+  useGetSecretApprovalRequestCount,
+  useGetSecretApprovalRequests,
+  useGetWorkspaceUsers
+} from "@app/hooks/api";
+import { ApprovalStatus, TSecretApprovalRequest, TWorkspaceUser } from "@app/hooks/api/types";
+
+import {
+  generateCommitText,
+  SecretApprovalRequestChanges
+} from "./components/SecretApprovalRequestChanges";
+
+export const SecretApprovalRequest = () => {
+  const { currentWorkspace } = useWorkspace();
+  const workspaceId = currentWorkspace?._id || "";
+  const [selectedApproval, setSelectedApproval] = useState<TSecretApprovalRequest | null>(null);
+
+  // filters
+  const [statusFilter, setStatusFilter] = useState<"open" | "close">("open");
+  const [envFilter, setEnvFilter] = useState<string>();
+  const [committerFilter, setCommitterFilter] = useState<string>();
+
+  const {
+    data: secretApprovalRequests,
+    isFetchingNextPage: isFetchingNextApprovalRequest,
+    fetchNextPage: fetchNextApprovalRequest,
+    hasNextPage: hasNextApprovalPage,
+    isLoading: isApprovalRequestLoading,
+    refetch
+  } = useGetSecretApprovalRequests({
+    workspaceId,
+    status: statusFilter,
+    environment: envFilter,
+    committer: committerFilter
+  });
+  const { data: secretApprovalRequestCount, isSuccess: isSecretApprovalReqCountSuccess } =
+    useGetSecretApprovalRequestCount({ workspaceId });
+  const { user: presentUser } = useUser();
+  const { data: members } = useGetWorkspaceUsers(workspaceId);
+  const membersGroupById = members?.reduce<Record<string, TWorkspaceUser>>(
+    (prev, curr) => ({ ...prev, [curr._id]: curr }),
+    {}
+  );
+  const myMembershipId = members?.find(({ user }) => user._id === presentUser._id)?._id;
+  const isSecretApprovalScreen = Boolean(selectedApproval);
+
+  const handleGoBackSecretRequestDetail = () => {
+    setSelectedApproval(null);
+    refetch({ refetchPage: (_page, index) => index === 0 });
+  };
+
+  const isRequestListEmpty =
+    !isApprovalRequestLoading && secretApprovalRequests?.pages[0]?.length === 0;
+
+  return (
+    <AnimatePresence exitBeforeEnter>
+      {isSecretApprovalScreen ? (
+        <motion.div
+          key="approval-changes-details"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: 30 }}
+        >
+          <SecretApprovalRequestChanges
+            workspaceId={workspaceId}
+            members={membersGroupById}
+            approvalRequestId={selectedApproval?._id || ""}
+            onGoBack={handleGoBackSecretRequestDetail}
+            committer={membersGroupById?.[selectedApproval?.committer || ""]}
+          />
+        </motion.div>
+      ) : (
+        <motion.div
+          key="approval-changes-list"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: 30 }}
+          className="rounded-md text-gray-300"
+        >
+          <div className="p-4 px-8 flex items-center space-x-8 bg-mineshaft-800 rounded-t-md border-t border-x border-mineshaft-600">
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={() => setStatusFilter("open")}
+              onKeyDown={(evt) => {
+                if (evt.key === "Enter") setStatusFilter("open");
+              }}
+              className={
+                statusFilter === "close" ? "text-gray-500 hover:text-gray-400 duration-100" : ""
+              }
+            >
+              <FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
+              {isSecretApprovalReqCountSuccess && secretApprovalRequestCount?.open} Open
+            </div>
+            <div
+              className={
+                statusFilter === "open" ? "text-gray-500 hover:text-gray-400 duration-100" : ""
+              }
+              role="button"
+              tabIndex={0}
+              onClick={() => setStatusFilter("close")}
+              onKeyDown={(evt) => {
+                if (evt.key === "Enter") setStatusFilter("close");
+              }}
+            >
+              <FontAwesomeIcon icon={faCheck} className="mr-2" />
+              {isSecretApprovalReqCountSuccess && secretApprovalRequestCount.closed} Closed
+            </div>
+            <div className="flex-grow flex justify-end space-x-8">
+              <DropdownMenu>
+                <DropdownMenuTrigger>
+                  <Button
+                    variant="plain"
+                    colorSchema="secondary"
+                    className={envFilter ? "text-white" : "text-bunker-300"}
+                    rightIcon={<FontAwesomeIcon icon={faChevronDown} size="sm" className="ml-2" />}
+                  >
+                    Environments
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <DropdownMenuLabel>Select an environment</DropdownMenuLabel>
+                  {currentWorkspace?.environments.map(({ slug, name }) => (
+                    <DropdownMenuItem
+                      onClick={() => setEnvFilter((state) => (state === slug ? undefined : slug))}
+                      key={`request-filter-${slug}`}
+                      icon={envFilter === slug && <FontAwesomeIcon icon={faCheckCircle} />}
+                      iconPos="right"
+                    >
+                      {name}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <DropdownMenu>
+                <DropdownMenuTrigger>
+                  <Button
+                    variant="plain"
+                    colorSchema="secondary"
+                    className={committerFilter ? "text-white" : "text-bunker-300"}
+                    rightIcon={<FontAwesomeIcon icon={faChevronDown} size="sm" className="ml-2" />}
+                  >
+                    Author
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuLabel>Select an author</DropdownMenuLabel>
+                  {members?.map(({ user, _id }) => (
+                    <DropdownMenuItem
+                      onClick={() =>
+                        setCommitterFilter((state) => (state === _id ? undefined : _id))
+                      }
+                      key={`request-filter-member-${_id}`}
+                      icon={committerFilter === _id && <FontAwesomeIcon icon={faCheckCircle} />}
+                      iconPos="right"
+                    >
+                      {user.email}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+          <div className="flex flex-col border-t border-mineshaft-600 bg-mineshaft-800 rounded-b-md border-b border-x border-mineshaft-600">
+            {isRequestListEmpty && (
+              <div className="py-12">
+                <EmptyState title="No more requests pending." />
+              </div>
+            )}
+            {secretApprovalRequests?.pages?.map((group, i) => (
+              <Fragment key={`secret-approval-request-${i + 1}`}>
+                {group?.map((secretApproval) => {
+                  const {
+                    _id: reqId,
+                    commits,
+                    committer,
+                    createdAt,
+                    policy,
+                    reviewers,
+                    status
+                  } = secretApproval;
+                  const isApprover = policy?.approvers?.indexOf(myMembershipId || "") !== -1;
+                  const isReviewed =
+                    reviewers.findIndex(
+                      ({ member, status: reviewStatus }) =>
+                        member === myMembershipId && reviewStatus === ApprovalStatus.APPROVED
+                    ) !== -1;
+                  return (
+                    <div
+                      key={reqId}
+                      className="flex flex-col px-8 py-4 hover:bg-mineshaft-700"
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => setSelectedApproval(secretApproval)}
+                      onKeyDown={(evt) => {
+                        if (evt.key === "Enter") setSelectedApproval(secretApproval);
+                      }}
+                    >
+                      <div className="mb-1">
+                        <FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
+                        {generateCommitText(commits)}
+                        <span className="text-xs text-bunker-300"> #{secretApproval.slug}</span>
+                      </div>
+                      <span className="text-xs text-gray-500">
+                        Opened {formatDistance(new Date(createdAt), new Date())} ago by{" "}
+                        {membersGroupById?.[committer]?.user?.firstName}{" "}
+                        {membersGroupById?.[committer]?.user?.lastName} (
+                        {membersGroupById?.[committer]?.user?.email}){" "}
+                        {isApprover && !isReviewed && status === "open" && "- Review required"}
+                      </span>
+                    </div>
+                  );
+                })}
+              </Fragment>
+            ))}
+            {(isFetchingNextApprovalRequest || isApprovalRequestLoading) && (
+              <div>
+                {Array.apply(0, Array(3)).map((_x, index) => (
+                  <div
+                    key={`approval-request-loading-${index + 1}`}
+                    className="flex flex-col px-8 py-4 hover:bg-mineshaft-700"
+                  >
+                    <div className="mb-2 flex items-center">
+                      <FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
+                      <Skeleton className="bg-mineshaft-600 w-1/4" />
+                    </div>
+                    <Skeleton className="bg-mineshaft-600 w-1/2" />
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+          {hasNextApprovalPage && (
+            <Button
+              className="mt-4 text-sm"
+              isFullWidth
+              variant="star"
+              isLoading={isFetchingNextApprovalRequest}
+              isDisabled={isFetchingNextApprovalRequest || !hasNextApprovalPage}
+              onClick={() => fetchNextApprovalRequest()}
+            >
+              {hasNextApprovalPage ? "Load More" : "End of history"}
+            </Button>
+          )}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx

@@ -0,0 +1,163 @@
+import {
+  faCheck,
+  faClose,
+  faLockOpen,
+  faSquareCheck,
+  faSquareXmark,
+  faUserLock
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button } from "@app/components/v2";
+import {
+  usePerformSecretApprovalRequestMerge,
+  useUpdateSecretApprovalRequestStatus
+} from "@app/hooks/api";
+
+type Props = {
+  approvalRequestId: string;
+  hasMerged?: boolean;
+  isMergable?: boolean;
+  status: "close" | "open";
+  approvals: number;
+  statusChangeByEmail: string;
+  workspaceId: string;
+};
+
+export const SecretApprovalRequestAction = ({
+  approvalRequestId,
+  hasMerged,
+  status,
+  isMergable,
+  approvals,
+  statusChangeByEmail,
+  workspaceId
+}: Props) => {
+  const { createNotification } = useNotificationContext();
+  const { mutateAsync: performSecretApprovalMerge, isLoading: isMerging } =
+    usePerformSecretApprovalRequestMerge();
+
+  const { mutateAsync: updateSecretStatusChange, isLoading: isStatusChanging } =
+    useUpdateSecretApprovalRequestStatus();
+
+  const handleSecretApprovalRequestMerge = async () => {
+    try {
+      await performSecretApprovalMerge({
+        id: approvalRequestId,
+        workspaceId
+      });
+      createNotification({
+        type: "success",
+        text: "Successfully merged the request"
+      });
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: "error",
+        text: "Failed to update the request status"
+      });
+    }
+  };
+
+  const handleSecretApprovalStatusChange = async (reqState: "open" | "close") => {
+    try {
+      await updateSecretStatusChange({
+        id: approvalRequestId,
+        status: reqState,
+        workspaceId
+      });
+      createNotification({
+        type: "success",
+        text: "Successfully updated the request"
+      });
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: "error",
+        text: "Failed to update the request status"
+      });
+    }
+  };
+
+  if (!hasMerged && status === "open") {
+    return (
+      <div className="flex justify-between items-center w-full">
+        <div className="flex space-x-4 items-start">
+          <FontAwesomeIcon
+            icon={isMergable ? faSquareCheck : faSquareXmark}
+            className={twMerge("text-2xl pt-1", isMergable ? "text-primary" : "text-red-600")}
+          />
+          <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>
+          </span>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            onClick={() => handleSecretApprovalStatusChange("close")}
+            isLoading={isStatusChanging}
+            variant="outline_bg"
+            colorSchema="secondary"
+            leftIcon={<FontAwesomeIcon icon={faClose} />}
+          >
+            Close request
+          </Button>
+          <Button
+            leftIcon={<FontAwesomeIcon icon={faCheck} />}
+            isDisabled={!isMergable}
+            isLoading={isMerging}
+            onClick={handleSecretApprovalRequestMerge}
+            colorSchema="primary"
+            variant="solid"
+          >
+            Merge
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (hasMerged && status === "close")
+    return (
+      <div className="flex justify-between items-center w-full">
+        <div className="flex space-x-4 items-start">
+          <FontAwesomeIcon icon={faCheck} className="text-2xl text-primary pt-1" />
+          <span className="flex flex-col">
+            Change request merged
+            <span className="inline-block text-xs text-bunker-200">
+              Merged by {statusChangeByEmail}
+            </span>
+          </span>
+        </div>
+      </div>
+    );
+
+  return (
+    <div className="flex justify-between items-center w-full">
+      <div className="flex space-x-4 items-start">
+        <FontAwesomeIcon icon={faUserLock} className="text-2xl text-primary pt-1" />
+        <span className="flex flex-col">
+          Change request has been closed
+          <span className="inline-block text-xs text-bunker-200">
+            Closed by {statusChangeByEmail}
+          </span>
+        </span>
+      </div>
+      <div className="flex items-center space-x-6">
+        <Button
+          onClick={() => handleSecretApprovalStatusChange("open")}
+          isLoading={isStatusChanging}
+          variant="outline_bg"
+          leftIcon={<FontAwesomeIcon icon={faLockOpen} />}
+        >
+          Reopen request
+        </Button>
+      </div>
+    </div>
+  );
+};

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx

@@ -0,0 +1,177 @@
+import { faExclamationTriangle, faInfo } 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 { CommitType, DecryptedSecret, TSecretApprovalSecChange, WsTag } from "@app/hooks/api/types";
+
+export type Props = {
+  op: CommitType;
+  secretVersion?: DecryptedSecret;
+  newVersion?: Omit<TSecretApprovalSecChange, "tags"> & { tags?: WsTag[] };
+  presentSecretVersionNumber: number;
+  hasMerged?: Boolean;
+  conflicts: Array<{ secretId: string; op: CommitType }>;
+};
+
+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" };
+
+  return (
+    <span>
+      Request for <span style={{ color: text.color }}>secret {text.label}</span>
+    </span>
+  );
+};
+
+const generateConflictText = (op: CommitType) => {
+  if (op === CommitType.CREATE) return <div>Secret already exist</div>;
+  if (op === CommitType.UPDATE) return <div>Secret not found</div>;
+  return null;
+};
+
+export const SecretApprovalRequestChangeItem = ({
+  op,
+  secretVersion,
+  newVersion,
+  presentSecretVersionNumber,
+  hasMerged,
+  conflicts
+}: Props) => {
+  // meaning request has changed
+  const isStale = (secretVersion?.version || 1) < presentSecretVersionNumber;
+  const itemConflict =
+    hasMerged && conflicts.find((el) => el.op === op && el.secretId === newVersion?._id);
+  const hasConflict = Boolean(itemConflict);
+
+  return (
+    <div className="bg-bunker-500 rounded-lg pt-2 pb-4 px-4">
+      <div className="py-3 px-1 flex items-center">
+        <div className="flex-grow">{generateItemTitle(op)}</div>
+        {!hasMerged && isStale && (
+          <div className="flex items-center">
+            <FontAwesomeIcon icon={faInfo} className="text-primary-600 text-sm" />
+            <span className="text-xs ml-2">Secret has been changed(stale)</span>
+          </div>
+        )}
+        {hasMerged && hasConflict && (
+          <div className="flex items-center text-sm text-bunker-300 space-x-2">
+            <Tooltip content="Merge Conflict">
+              <FontAwesomeIcon icon={faExclamationTriangle} className="text-red-700" />
+            </Tooltip>
+            <div>{generateConflictText(op)}</div>
+          </div>
+        )}
+      </div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              {op === CommitType.UPDATE && <Th className="w-12" />}
+              <Th className="min-table-row">Secret</Th>
+              <Th>Value</Th>
+              <Th className="min-table-row">Comment</Th>
+              <Th className="min-table-row">Tags</Th>
+            </Tr>
+          </THead>
+          {op === CommitType.UPDATE ? (
+            <TBody>
+              <Tr>
+                <Td className="text-red-600">OLD</Td>
+                <Td>{secretVersion?.key}</Td>
+                <Td>
+                  <SecretInput isReadOnly value={secretVersion?.value} />
+                </Td>
+                <Td>{secretVersion?.comment}</Td>
+                <Td>
+                  {secretVersion?.tags?.map(({ name, _id: tagId, tagColor }) => (
+                    <Tag
+                      className="flex items-center space-x-2 w-min"
+                      key={`${secretVersion._id}-${tagId}`}
+                    >
+                      <div
+                        className="w-3 h-3 rounded-full"
+                        style={{ backgroundColor: tagColor || "#bec2c8" }}
+                      />
+                      <div className="text-sm">{name}</div>
+                    </Tag>
+                  ))}
+                </Td>
+              </Tr>
+              <Tr>
+                <Td className="text-green-600">NEW</Td>
+                <Td>{newVersion?.secretKey}</Td>
+                <Td>
+                  <SecretInput isReadOnly value={newVersion?.secretValue} />
+                </Td>
+                <Td>{newVersion?.secretComment}</Td>
+                <Td>
+                  {newVersion?.tags?.map(({ name, _id: tagId, tagColor }) => (
+                    <Tag
+                      className="flex items-center space-x-2 w-min"
+                      key={`${newVersion._id}-${tagId}`}
+                    >
+                      <div
+                        className="w-3 h-3 rounded-full"
+                        style={{ backgroundColor: tagColor || "#bec2c8" }}
+                      />
+                      <div className="text-sm">{name}</div>
+                    </Tag>
+                  ))}
+                </Td>
+              </Tr>
+            </TBody>
+          ) : (
+            <TBody>
+              <Tr>
+                <Td>{op === CommitType.CREATE ? newVersion?.secretKey : secretVersion?.key}</Td>
+                <Td>
+                  <SecretInput
+                    isReadOnly
+                    value={
+                      op === CommitType.CREATE ? newVersion?.secretValue : secretVersion?.value
+                    }
+                  />
+                </Td>
+                <Td>
+                  {op === CommitType.CREATE ? newVersion?.secretComment : secretVersion?.comment}
+                </Td>
+                <Td>
+                  {(op === CommitType.CREATE ? newVersion?.tags : secretVersion?.tags)?.map(
+                    ({ name, _id: tagId, tagColor }) => (
+                      <Tag
+                        className="flex items-center space-x-2 w-min"
+                        key={`${
+                          op === CommitType.CREATE ? newVersion?._id : secretVersion?._id
+                        }-${tagId}`}
+                      >
+                        <div
+                          className="w-3 h-3 rounded-full"
+                          style={{ backgroundColor: tagColor || "#bec2c8" }}
+                        />
+                        <div className="text-sm">{name}</div>
+                      </Tag>
+                    )
+                  )}
+                </Td>
+              </Tr>
+            </TBody>
+          )}
+        </Table>
+      </TableContainer>
+    </div>
+  );
+};

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx

@@ -0,0 +1,302 @@
+import { ReactNode } from "react";
+import {
+  faArrowLeft,
+  faCheck,
+  faCheckCircle,
+  faCircle,
+  faCodeBranch,
+  faFolder,
+  faXmarkCircle
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button, ContentLoader, EmptyState, IconButton, Tooltip } from "@app/components/v2";
+import { useUser } from "@app/context";
+import {
+  useGetSecretApprovalRequestDetails,
+  useGetUserWsKey,
+  useUpdateSecretApprovalReviewStatus
+} from "@app/hooks/api";
+import { ApprovalStatus, CommitType, TWorkspaceUser } from "@app/hooks/api/types";
+
+import { SecretApprovalRequestAction } from "./SecretApprovalRequestAction";
+import { SecretApprovalRequestChangeItem } from "./SecretApprovalRequestChangeItem";
+
+export const generateCommitText = (commits: { op: CommitType }[] = []) => {
+  const score: Record<string, number> = {};
+  commits.forEach(({ op }) => {
+    score[op] = (score?.[op] || 0) + 1;
+  });
+  const text: ReactNode[] = [];
+  if (score[CommitType.CREATE])
+    text.push(
+      <span key="created-commit">
+        {score[CommitType.CREATE]} secret{score[CommitType.CREATE] !== 1 && "s"}
+        <span style={{ color: "#16a34a" }}> created</span>
+      </span>
+    );
+  if (score[CommitType.UPDATE])
+    text.push(
+      <span key="updated-commit">
+        {Boolean(text.length) && ","}
+        {score[CommitType.UPDATE]} secret{score[CommitType.UPDATE] !== 1 && "s"}
+        <span style={{ color: "#ea580c" }} className="text-orange-600">
+          {" "}
+          updated
+        </span>
+      </span>
+    );
+  if (score[CommitType.DELETE])
+    text.push(
+      <span className="deleted-commit">
+        {Boolean(text.length) && "and"}
+        {score[CommitType.DELETE]} secret{score[CommitType.UPDATE] !== 1 && "s"}
+        <span style={{ color: "#b91c1c" }}> deleted</span>
+      </span>
+    );
+
+  return text;
+};
+
+const getReviewedStatusSymbol = (status?: ApprovalStatus) => {
+  if (status === ApprovalStatus.APPROVED)
+    return <FontAwesomeIcon icon={faCheckCircle} size="xs" style={{ color: "#15803d" }} />;
+  if (status === ApprovalStatus.REJECTED)
+    return <FontAwesomeIcon icon={faXmarkCircle} size="xs" style={{ color: "#b91c1c" }} />;
+  return <FontAwesomeIcon icon={faCircle} size="xs" style={{ color: "#c2410c" }} />;
+};
+
+type Props = {
+  workspaceId: string;
+  approvalRequestId: string;
+  onGoBack: () => void;
+  committer?: TWorkspaceUser;
+  members?: Record<string, TWorkspaceUser>;
+};
+
+export const SecretApprovalRequestChanges = ({
+  approvalRequestId,
+  onGoBack,
+  committer,
+  workspaceId,
+  members = {}
+}: Props) => {
+  const { createNotification } = useNotificationContext();
+  const { user } = useUser();
+  const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
+  const {
+    data: secretApprovalRequestDetails,
+    isSuccess: isSecretApprovalRequestSuccess,
+    isLoading: isSecretApprovalRequestLoading
+  } = useGetSecretApprovalRequestDetails({
+    id: approvalRequestId,
+    decryptKey: decryptFileKey!
+  });
+
+  const {
+    mutateAsync: updateSecretApprovalRequestStatus,
+    isLoading: isUpdatingRequestStatus,
+    variables
+  } = useUpdateSecretApprovalReviewStatus();
+
+  const isApproving = variables?.status === ApprovalStatus.APPROVED && isUpdatingRequestStatus;
+  const isRejecting = variables?.status === ApprovalStatus.REJECTED && isUpdatingRequestStatus;
+
+  // membership of present user
+  const myMembership = Object.values(members).find(
+    ({ user: membershipUser }) => membershipUser.email === user.email
+  );
+  const myMembershipId = myMembership?._id || "";
+  const reviewedMembers = secretApprovalRequestDetails?.reviewers?.reduce<
+    Record<string, ApprovalStatus>
+  >(
+    (prev, curr) => ({
+      ...prev,
+      [curr.member]: curr.status
+    }),
+    {}
+  );
+  const hasApproved = reviewedMembers?.[myMembershipId] === ApprovalStatus.APPROVED;
+  const hasRejected = reviewedMembers?.[myMembershipId] === ApprovalStatus.REJECTED;
+
+  const handleSecretApprovalStatusUpdate = async (status: ApprovalStatus) => {
+    try {
+      await updateSecretApprovalRequestStatus({
+        id: approvalRequestId,
+        status
+      });
+      createNotification({
+        type: "success",
+        text: `Successfully ${status} the request`
+      });
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: "error",
+        text: "Failed to update the request status"
+      });
+    }
+  };
+
+  if (isSecretApprovalRequestLoading) {
+    return (
+      <div>
+        <ContentLoader />
+      </div>
+    );
+  }
+
+  if (!isSecretApprovalRequestSuccess)
+    return (
+      <div>
+        <EmptyState title="Failed to load approvals" />
+      </div>
+    );
+
+  const isMergable =
+    secretApprovalRequestDetails?.policy?.approvals <=
+    secretApprovalRequestDetails?.policy?.approvers?.filter(
+      (approverId) => reviewedMembers?.[approverId] === ApprovalStatus.APPROVED
+    ).length;
+  const hasMerged = secretApprovalRequestDetails?.hasMerged;
+
+  return (
+    <div className="flex space-x-6">
+      <div className="flex-grow">
+        <div className="flex items-center space-x-4 pt-2 pb-6 sticky top-0 z-20 bg-bunker-800">
+          <IconButton variant="outline_bg" ariaLabel="go-back" onClick={onGoBack}>
+            <FontAwesomeIcon icon={faArrowLeft} />
+          </IconButton>
+          <div className="bg-red-600 text-white flex items-center space-x-2 px-4 py-2 rounded-3xl">
+            <FontAwesomeIcon icon={faCodeBranch} size="sm" />
+            <span>{secretApprovalRequestDetails.status}</span>
+          </div>
+          <div className="flex flex-col flex-grow">
+            <div className="text-lg mb-1">
+              {generateCommitText(secretApprovalRequestDetails.commits)}
+            </div>
+            <div className="text-sm text-bunker-300 flex items-center">
+              {committer?.user?.firstName}
+              {committer?.user?.lastName} ({committer?.user?.email}) wants to change{" "}
+              {secretApprovalRequestDetails.commits.length} secret values in
+              <span className="text-primary-300 bg-primary-600/60 px-1 mx-1 rounded">
+                {secretApprovalRequestDetails.environment}
+              </span>
+              <div className="flex items-center border border-mineshaft-500 pl-1 pr-2 rounded w-min">
+                <div className="border-r border-mineshaft-500 pr-1">
+                  <FontAwesomeIcon icon={faFolder} className="text-primary" size="sm" />
+                </div>
+                <div className="text-sm pl-2 pb-0.5">{secretApprovalRequestDetails.secretPath}</div>
+              </div>
+            </div>
+          </div>
+          {!hasMerged && secretApprovalRequestDetails.status === "open" && (
+            <>
+              <Button
+                size="xs"
+                leftIcon={hasApproved && <FontAwesomeIcon icon={faCheck} />}
+                onClick={() => handleSecretApprovalStatusUpdate(ApprovalStatus.APPROVED)}
+                isLoading={isApproving}
+                isDisabled={isApproving || hasApproved}
+              >
+                {hasApproved ? "Approved" : "Approve"}
+              </Button>
+              <Button
+                size="xs"
+                colorSchema="danger"
+                leftIcon={hasRejected && <FontAwesomeIcon icon={faCheck} />}
+                onClick={() => handleSecretApprovalStatusUpdate(ApprovalStatus.REJECTED)}
+                isLoading={isRejecting}
+                isDisabled={isRejecting || hasRejected}
+              >
+                {hasRejected ? "Rejected" : "Reject"}
+              </Button>
+            </>
+          )}
+        </div>
+        <div className="flex flex-col space-y-4">
+          {secretApprovalRequestDetails.commits.map(
+            ({ op, secretVersion, secret, newVersion }, index) => (
+              <SecretApprovalRequestChangeItem
+                op={op}
+                conflicts={secretApprovalRequestDetails.conflicts}
+                hasMerged={hasMerged}
+                secretVersion={secretVersion}
+                presentSecretVersionNumber={secret?.version || 0}
+                newVersion={newVersion}
+                key={`${op}-${index + 1}-${secretVersion?._id}`}
+              />
+            )
+          )}
+        </div>
+        <div className="flex items-center px-5 py-6 rounded-lg space-x-6 bg-mineshaft-800 mt-8">
+          <SecretApprovalRequestAction
+            approvalRequestId={secretApprovalRequestDetails._id}
+            hasMerged={hasMerged}
+            approvals={secretApprovalRequestDetails.policy.approvals || 0}
+            status={secretApprovalRequestDetails.status}
+            isMergable={isMergable}
+            statusChangeByEmail={
+              members[secretApprovalRequestDetails?.statusChangeBy || ""]?.user?.email || ""
+            }
+            workspaceId={workspaceId}
+          />
+        </div>
+      </div>
+      <div className="w-1/5 pt-4 sticky top-0" 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.map((requiredApproverId) => {
+            const userDetails = members?.[requiredApproverId]?.user;
+            const status = reviewedMembers?.[requiredApproverId];
+            return (
+              <div
+                className="flex items-center space-x-2 flex-nowrap bg-mineshaft-800 px-2 py-1 rounded"
+                key={`required-approver-${requiredApproverId}`}
+              >
+                <div className="flex-grow text-sm">
+                  <Tooltip content={`${userDetails.firstName} ${userDetails.lastName}`}>
+                    <span>{userDetails?.email} </span>
+                  </Tooltip>
+                  <span className="text-red">*</span>
+                </div>
+                <div>
+                  <Tooltip content={status || ApprovalStatus.PENDING}>
+                    {getReviewedStatusSymbol(status)}
+                  </Tooltip>
+                </div>
+              </div>
+            );
+          })}
+          {secretApprovalRequestDetails?.reviewers
+            .filter(
+              ({ member }) => !secretApprovalRequestDetails?.policy?.approvers?.includes(member)
+            )
+            .map((reviewer) => {
+              const userDetails = members?.[reviewer.member]?.user;
+              const status = reviewedMembers?.[reviewer.status];
+              return (
+                <div
+                  className="flex items-center space-x-2 flex-nowrap bg-mineshaft-800 px-2 py-1 rounded"
+                  key={`required-approver-${reviewer.member}`}
+                >
+                  <div className="flex-grow text-sm">
+                    <Tooltip content={`${userDetails.firstName} ${userDetails.lastName}`}>
+                      <span>{userDetails?.email} </span>
+                    </Tooltip>
+                    <span className="text-red">*</span>
+                  </div>
+                  <div>
+                    <Tooltip content={status || ApprovalStatus.PENDING}>
+                      {getReviewedStatusSymbol(status)}
+                    </Tooltip>
+                  </div>
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/index.tsx

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

frontend/src/views/SecretMainPage/SecretMainPage.tsx

@@ -19,6 +19,7 @@ import {
   useGetImportedSecrets,
   useGetProjectFolders,
   useGetProjectSecrets,
+  useGetSecretApprovalPolicyOfABoard,
   useGetSecretImports,
   useGetUserWsKey,
   useGetWorkspaceSnapshotList,
@@ -118,6 +119,13 @@ export const SecretMainPage = () => {
   // fetch tags
   const { data: tags } = useGetWsTags(canReadSecret ? workspaceId : "");
 
+  const { data: boardPolicy } = useGetSecretApprovalPolicyOfABoard({
+    workspaceId,
+    environment,
+    secretPath
+  });
+  const isProtectedBranch = Boolean(boardPolicy);
+
   const {
     data: snapshotList,
     isFetchingNextPage: isFetchingNextSnapshotList,
@@ -207,6 +215,8 @@ export const SecretMainPage = () => {
             secretPath={secretPath}
             isProjectRelated
             onEnvChange={handleEnvChange}
+            isProtectedBranch={isProtectedBranch}
+            protectionPolicyName={boardPolicy?.name}
           />
         </div>
         {!isRollbackMode ? (
@@ -281,6 +291,7 @@ export const SecretMainPage = () => {
                     workspaceId={workspaceId}
                     secretPath={secretPath}
                     decryptFileKey={decryptFileKey!}
+                    isProtectedBranch={isProtectedBranch}
                   />
                 )}
                 {!canReadSecret && folders?.length === 0 && <PermissionDeniedBanner />}
@@ -292,6 +303,7 @@ export const SecretMainPage = () => {
               decryptFileKey={decryptFileKey!}
               secretPath={secretPath}
               autoCapitalize={currentWorkspace?.autoCapitalization}
+              isProtectedBranch={isProtectedBranch}
             />
             <SecretDropzone
               secrets={secrets}
@@ -301,6 +313,7 @@ export const SecretMainPage = () => {
               secretPath={secretPath}
               isSmaller={isNotEmtpy}
               environments={currentWorkspace?.environments}
+              isProtectedBranch={isProtectedBranch}
             />
             <PitDrawer
               secretSnaphots={snapshotList}

frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -23,6 +23,7 @@ type Props = {
   secretPath?: string;
   // modal props
   autoCapitalize?: boolean;
+  isProtectedBranch?: boolean;
 };
 
 export const CreateSecretForm = ({
@@ -30,7 +31,8 @@ export const CreateSecretForm = ({
   workspaceId,
   decryptFileKey,
   secretPath = "/",
-  autoCapitalize = true
+  autoCapitalize = true,
+  isProtectedBranch = false
 }: Props) => {
   const {
     register,
@@ -62,7 +64,9 @@ export const CreateSecretForm = ({
       reset();
       createNotification({
         type: "success",
-        text: "Successfully created secret"
+        text: isProtectedBranch
+          ? "Requested changes have been sent for review"
+          : "Successfully created secret"
       });
     } catch (error) {
       console.log(error);

frontend/src/views/SecretMainPage/components/SecretDropzone/SecretDropzone.tsx

@@ -43,6 +43,7 @@ type Props = {
   environment: string;
   secretPath: string;
   secrets?: DecryptedSecret[];
+  isProtectedBranch?: boolean;
 };
 
 export const SecretDropzone = ({
@@ -52,7 +53,8 @@ export const SecretDropzone = ({
   decryptFileKey,
   environment,
   secretPath,
-  secrets = []
+  secrets = [],
+  isProtectedBranch = false
 }: Props): JSX.Element => {
   const { t } = useTranslation();
   const [isDragActive, setDragActive] = useToggle();
@@ -195,7 +197,9 @@ export const SecretDropzone = ({
       handlePopUpClose("overlapKeyWarning");
       createNotification({
         type: "success",
-        text: "Successfully uploaded secrets"
+        text: isProtectedBranch
+          ? "Uploaded changes have been sent for review"
+          : "Successfully uploaded secrets"
       });
     } catch (err) {
       console.log(err);

frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx

@@ -49,7 +49,8 @@ type Props = {
   onDeleteSecret: () => void;
   onSaveSecret: (
     orgSec: DecryptedSecret,
-    modSec: Omit<DecryptedSecret, "tags"> & { tags: { _id: string }[] }
+    modSec: Omit<DecryptedSecret, "tags"> & { tags: { _id: string }[] },
+    cb?: () => void
   ) => Promise<void>;
   tags: WsTag[];
   onCreateTag: () => void;
@@ -143,7 +144,7 @@ export const SecretDetailSidebar = ({
   };
 
   const handleFormSubmit = async (data: TFormSchema) => {
-    await onSaveSecret(secret, { ...secret, ...data });
+    await onSaveSecret(secret, { ...secret, ...data }, () => reset());
   };
 
   return (

frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx

@@ -54,7 +54,8 @@ type Props = {
   secret: DecryptedSecret;
   onSaveSecret: (
     orgSec: DecryptedSecret,
-    modSec: Omit<DecryptedSecret, "tags"> & { tags: { _id: string }[] }
+    modSec: Omit<DecryptedSecret, "tags"> & { tags: { _id: string }[] },
+    cb?: () => void
   ) => Promise<void>;
   onDeleteSecret: (sec: DecryptedSecret) => void;
   onDetailViewSecret: (sec: DecryptedSecret) => void;
@@ -148,13 +149,14 @@ export const SecretItem = memo(
         );
         setValue("valueOverride", secret?.valueOverride, { shouldDirty: !isUnsavedOverride });
       } else {
+        reset();
         setValue("overrideAction", SecretActionType.Modified, { shouldDirty: true });
         setValue("valueOverride", "", { shouldDirty: true });
       }
     };
 
     const handleFormSubmit = async (data: TFormSchema) => {
-      await onSaveSecret(secret, { ...secret, ...data });
+      await onSaveSecret(secret, { ...secret, ...data }, () => reset());
     };
 
     const handleTagSelect = (tag: WsTag) => {

frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx

@@ -27,6 +27,7 @@ type Props = {
   sortDir?: SortDir;
   tags?: WsTag[];
   isVisible?: boolean;
+  isProtectedBranch?: boolean;
 };
 
 const reorderSecretGroupByUnderscore = (secrets: DecryptedSecret[], sortDir: SortDir) => {
@@ -84,7 +85,8 @@ export const SecretListView = ({
   filter,
   sortDir = SortDir.ASC,
   tags: wsTags = [],
-  isVisible
+  isVisible,
+  isProtectedBranch = false
 }: Props) => {
   const { createNotification } = useNotificationContext();
   const queryClient = useQueryClient();
@@ -178,7 +180,8 @@ export const SecretListView = ({
   const handleSaveSecret = useCallback(
     async (
       orgSecret: DecryptedSecret,
-      modSecret: Omit<DecryptedSecret, "tags"> & { tags: { _id: string }[] }
+      modSecret: Omit<DecryptedSecret, "tags"> & { tags: { _id: string }[] },
+      cb?: () => void
     ) => {
       const { key: oldKey } = orgSecret;
       const { key, value, overrideAction, idOverride, valueOverride, tags, comment } = modSecret;
@@ -193,6 +196,19 @@ export const SecretListView = ({
         ) && isSameTags;
 
       try {
+        // personal secret change
+        if (overrideAction === "deleted") {
+          await handleSecretOperation("delete", "personal", oldKey);
+        } else if (overrideAction && idOverride) {
+          await handleSecretOperation("update", "personal", oldKey, {
+            value: valueOverride,
+            newKey: hasKeyChanged ? key : undefined,
+            skipMultilineEncoding: modSecret.skipMultilineEncoding
+          });
+        } else if (overrideAction) {
+          await handleSecretOperation("create", "personal", oldKey, { value: valueOverride });
+        }
+
         // shared secret change
         if (!isSharedSecUnchanged) {
           await handleSecretOperation("update", "shared", oldKey, {
@@ -202,19 +218,7 @@ export const SecretListView = ({
             newKey: hasKeyChanged ? key : undefined,
             skipMultilineEncoding: modSecret.skipMultilineEncoding
           });
-        }
-
-        // personal secret change
-        if (overrideAction === "deleted") {
-          await handleSecretOperation("delete", "personal", key);
-        } else if (overrideAction && idOverride) {
-          await handleSecretOperation("update", "personal", oldKey, {
-            value: valueOverride,
-            newKey: hasKeyChanged ? key : undefined,
-            skipMultilineEncoding: modSecret.skipMultilineEncoding
-          });
-        } else if (overrideAction) {
-          await handleSecretOperation("create", "personal", key, { value: valueOverride });
+          if (cb) cb();
         }
 
         queryClient.invalidateQueries(
@@ -229,7 +233,9 @@ export const SecretListView = ({
         handlePopUpClose("secretDetail");
         createNotification({
           type: "success",
-          text: "Successfully saved secrets"
+          text: isProtectedBranch
+            ? "Requested changes have been sent for review"
+            : "Successfully saved secrets"
         });
       } catch (error) {
         console.log(error);
@@ -239,7 +245,7 @@ export const SecretListView = ({
         });
       }
     },
-    [environment, secretPath]
+    [environment, secretPath, isProtectedBranch]
   );
 
   const handleSecretDelete = useCallback(async () => {
@@ -259,7 +265,9 @@ export const SecretListView = ({
       handlePopUpClose("secretDetail");
       createNotification({
         type: "success",
-        text: "Successfully deleted secret"
+        text: isProtectedBranch
+          ? "Requested changes have been sent for review"
+          : "Successfully deleted secret"
       });
     } catch (error) {
       console.log(error);