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

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}