feature: secret scanning pt2 and address initial feedback

frontend/src/pages/secret-scanning/SecretScanningFindingsPage/SecretScanningFindingsPage.tsx

@@ -1,7 +1,10 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 
+import { ProjectPermissionCan } from "@app/components/permissions";
 import { PageHeader } from "@app/components/v2";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSecretScanningFindingActions } from "@app/context/ProjectPermissionContext/types";
 
 import { SecretScanningFindingsSection } from "./components";
 
@@ -12,14 +15,20 @@ export const SecretScanningFindingsPage = () => {
       <Helmet>
         <title>{t("common.head-title", { title: "Secret Scanning" })}</title>
       </Helmet>
-      <div className="h-full bg-bunker-800">
-        <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-          <div className="mx-auto mb-6 w-full max-w-7xl">
-            <PageHeader title="Findings" description="View Secret Leaks across your project." />
-            <SecretScanningFindingsSection />
+      <ProjectPermissionCan
+        renderGuardBanner
+        I={ProjectPermissionSecretScanningFindingActions.Read}
+        a={ProjectPermissionSub.SecretScanningFindings}
+      >
+        <div className="h-full bg-bunker-800">
+          <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+            <div className="mx-auto mb-6 w-full max-w-7xl">
+              <PageHeader title="Findings" description="View Secret Leaks across your project." />
+              <SecretScanningFindingsSection />
+            </div>
           </div>
         </div>
-      </div>
+      </ProjectPermissionCan>
     </>
   );
 };

frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingRow.tsx

@@ -5,6 +5,7 @@ import { format } from "date-fns";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Badge,
   Button,
@@ -18,6 +19,10 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import {
+  ProjectPermissionSecretScanningFindingActions,
+  ProjectPermissionSub
+} from "@app/context/ProjectPermissionContext/types";
 import {
   SECRET_SCANNING_DATA_SOURCE_MAP,
   SECRET_SCANNING_FINDING_STATUS_ICON_MAP
@@ -191,19 +196,32 @@ export const SecretScanningFindingRow = ({ finding, onUpdate }: Props) => {
                   {details.link}
                 </a>
               </GenericFieldLabel>
-
-              <Button
-                onClick={() => onUpdate(finding)}
-                colorSchema="secondary"
-                leftIcon={
-                  <FontAwesomeIcon
-                    className={SECRET_SCANNING_FINDING_STATUS_ICON_MAP[status].className}
-                    icon={SECRET_SCANNING_FINDING_STATUS_ICON_MAP[status].icon}
-                  />
-                }
+              <div className="col-span-full flex items-center border-t border-mineshaft-500" />
+              <ProjectPermissionCan
+                I={ProjectPermissionSecretScanningFindingActions.Update}
+                a={ProjectPermissionSub.SecretScanningFindings}
               >
-                Update Status
-              </Button>
+                {(isAllowed) => (
+                  <Button
+                    onClick={() => onUpdate(finding)}
+                    colorSchema="secondary"
+                    isDisabled={!isAllowed}
+                    leftIcon={
+                      <FontAwesomeIcon
+                        className={SECRET_SCANNING_FINDING_STATUS_ICON_MAP[status].className}
+                        icon={SECRET_SCANNING_FINDING_STATUS_ICON_MAP[status].icon}
+                      />
+                    }
+                  >
+                    Update Status
+                  </Button>
+                )}
+              </ProjectPermissionCan>
+              {Boolean(remarks) && (
+                <GenericFieldLabel className="col-span-3" label="Remarks">
+                  {remarks}
+                </GenericFieldLabel>
+              )}
             </div>
           </div>
         </Td>

frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningUpdateFindingModal.tsx

@@ -133,7 +133,7 @@ export const SecretScanningUpdateFindingModal = ({ finding, isOpen, onOpenChange
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-      <ModalContent title="Resolve Finding" subTitle="Mark this finding as resolved">
+      <ModalContent title="Update Finding" subTitle="Update the status or leave remarks">
         <Content finding={finding} onComplete={() => onOpenChange(false)} />
       </ModalContent>
     </Modal>