feat(secret-approval): added permission for policy management and fixed bugs on fellow user reviewing secrets

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/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/types.ts

@@ -20,6 +20,7 @@ export type TGetSecretApprovalPolicyOfBoardDTO = {
 
 export type TCreateSecretPolicyDTO = {
   workspaceId: string;
+  name?: string;
   environment: string;
   secretPath?: string | null;
   approvers?: string[];
@@ -28,6 +29,7 @@ export type TCreateSecretPolicyDTO = {
 
 export type TUpdateSecretPolicyDTO = {
   id: string;
+  name?: string;
   approvers?: string[];
   secretPath?: string | null;
   approvals?: number;

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

@@ -14,9 +14,9 @@ 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>

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,
@@ -15,6 +16,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import {
   useDeleteSecretApprovalPolicy,
@@ -35,11 +37,15 @@ export const SecretApprovalPolicyList = ({ workspaceId }: Props) => {
     "secretPolicyForm",
     "deletePolicy"
   ] as const);
+  const permission = useProjectPermission();
   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,12 +81,20 @@ 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={() => handlePopUpOpen("secretPolicyForm")}
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                isDisabled={!isAllowed}
+              >
+                Create policy
+              </Button>
+            )}
+          </ProjectPermissionCan>
         </div>
       </div>
       <TableContainer>

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,6 +36,7 @@ export const SecretApprovalPolicyRow = ({
 }: Props) => {
   const [selectedApprovers, setSelectedApprovers] = useState<string[]>([]);
   const { mutate: updateSecretApprovalPolicy, isLoading } = useUpdateSecretApprovalPolicy();
+  const permission = useProjectPermission();
 
   return (
     <Tr>
@@ -62,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"}
@@ -98,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/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx

@@ -19,6 +19,7 @@ export type Props = {
   secretVersion?: DecryptedSecret;
   newVersion?: Omit<TSecretApprovalSecChange, "tags"> & { tags?: WsTag[] };
   presentSecretVersionNumber: number;
+  hasMerged?: Boolean;
 };
 
 const generateItemTitle = (op: CommitType) => {
@@ -38,10 +39,11 @@ export const SecretApprovalRequestChangeItem = ({
   op,
   secretVersion,
   newVersion,
-  presentSecretVersionNumber
+  presentSecretVersionNumber,
+  hasMerged
 }: Props) => {
   // meaning request has changed
-  const isStale = (secretVersion?.version || 1) < presentSecretVersionNumber;
+  const isStale = (secretVersion?.version || 1) < presentSecretVersionNumber && !hasMerged;
   return (
     <div className="bg-bunker-500 rounded-lg pt-2 pb-4 px-4">
       <div className="py-3 px-1 flex items-center">

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

@@ -211,6 +211,7 @@ export const SecretApprovalRequestChanges = ({
             ({ op, secretVersion, secret, newVersion }, index) => (
               <SecretApprovalRequestChangeItem
                 op={op}
+                hasMerged={hasMerged}
                 secretVersion={secretVersion}
                 presentSecretVersionNumber={secret?.version || 0}
                 newVersion={newVersion}