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

Policy based secret review system
2026-10-16 12:04:03 +00:00 · 2023-10-05 15:06:41 -04:00
parent b1962129a3 7f463cabce
commit 0b3b014bf5
57 changed files with 3398 additions and 372 deletions
@@ -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",
@@ -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(),
@@ -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>;
@@ -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>
@@ -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>
  );
 };
@@ -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>
@@ -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 (
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -0,0 +1 @@
+export { SecretApprovalRequest } from "./SecretApprovalRequest";
@@ -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}
@@ -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);
@@ -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);
@@ -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 (
@@ -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) => {
@@ -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);
				`@@ -0,0 +1 @@`
				`export { SecretApprovalRequest } from "./SecretApprovalRequest";`