COMP-798 link/unlink case file visibility (#723)

Author: tom0827

compliance-web/cypress/components/_components/_App/_CaseFiles/_Profile/CaseFileActions.cy.tsx

@@ -2,6 +2,9 @@ import { mount } from "cypress/react";
 import CaseFileActions from "@/components/App/CaseFiles/Profile/CaseFileActions";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import ModalProvider from "@/components/Shared/Modals/ModalProvider";
+import { CaseFileStatusEnum } from "@/utils/constants";
+import { OidcConfig } from "@/utils/config";
+import { AuthProvider } from "react-oidc-context";
 
 describe("CaseFileActions", () => {
   let queryClient: QueryClient;
@@ -13,19 +16,21 @@ describe("CaseFileActions", () => {
   const mountComponent = (status: string) => {
     mount(
       <QueryClientProvider client={queryClient}>
-        <ModalProvider />
-        <CaseFileActions status={status} fileNumber="CF-123" />
+        <AuthProvider {...OidcConfig}>
+          <ModalProvider />
+          <CaseFileActions status={status} fileNumber="CF-123" />
+        </AuthProvider>
       </QueryClientProvider>
     );
   };
 
   it("renders menu action dropdown", () => {
-    mountComponent("open");
+    mountComponent(CaseFileStatusEnum.OPEN);
     cy.contains("button", "Actions").should("exist");
   });
 
   it("shows all actions for open case file", () => {
-    mountComponent("open");
+    mountComponent(CaseFileStatusEnum.OPEN);
     cy.contains("button", "Actions").click();
 
     cy.contains("Link to Case File").should("exist");
@@ -36,7 +41,7 @@ describe("CaseFileActions", () => {
   });
 
   it("shows appropriate actions for closed case file", () => {
-    mountComponent("closed");
+    mountComponent(CaseFileStatusEnum.CLOSED);
     cy.contains("button", "Actions").click();
 
     cy.contains("Link to Case File").should("not.exist");
@@ -47,7 +52,7 @@ describe("CaseFileActions", () => {
   });
 
   it("handles Link to Case File click", () => {
-    mountComponent("open");
+    mountComponent(CaseFileStatusEnum.OPEN);
     cy.contains("button", "Actions").click();
     cy.contains("Link to Case File").click();
 
@@ -59,7 +64,7 @@ describe("CaseFileActions", () => {
   });
 
   it("handles Unlink from Case File click", () => {
-    mountComponent("open");
+    mountComponent(CaseFileStatusEnum.OPEN);
     cy.contains("button", "Actions").click();
     cy.contains("Unlink from Case File").click();
 
@@ -71,7 +76,7 @@ describe("CaseFileActions", () => {
   });
 
   it("handles Close Case File click", () => {
-    mountComponent("open");
+    mountComponent(CaseFileStatusEnum.OPEN);
     cy.contains("button", "Actions").click();
     cy.contains("Close Case File").click();
 
@@ -85,7 +90,7 @@ describe("CaseFileActions", () => {
   });
 
   it("handles Delete Case File click", () => {
-    mountComponent("open");
+    mountComponent(CaseFileStatusEnum.OPEN);
     cy.contains("button", "Actions").click();
     cy.contains("Delete Case File").click();
 
@@ -99,7 +104,7 @@ describe("CaseFileActions", () => {
   });
 
   it("handles Reopen Case File click", () => {
-    mountComponent("closed");
+    mountComponent(CaseFileStatusEnum.CLOSED);
     cy.contains("button", "Actions").click();
     cy.contains("Reopen Case File").click();
 

compliance-web/src/components/App/CaseFiles/Profile/CaseFileActions.tsx

@@ -15,6 +15,9 @@ import { notify } from "@/store/snackbarStore";
 import { useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "@tanstack/react-router";
 import React, { useCallback } from "react";
+import { useAuth } from "react-oidc-context";
+import { KC_USER_GROUPS, useIsRolesAllowed } from "@/hooks/useAuthorization";
+import { CaseFileStatusEnum } from "@/utils/constants";
 
 interface CaseFileActionsProps {
   status: string;
@@ -28,6 +31,8 @@ const CaseFileActions: React.FC<CaseFileActionsProps> = ({
   const router = useRouter();
   const queryClient = useQueryClient();
   const { setOpen, setClose } = useModal();
+  const { user } = useAuth();
+  const isSuperUser = useIsRolesAllowed([KC_USER_GROUPS.SUPERUSER]);
 
   const caseFileData = queryClient.getQueryData<CaseFile>([
     "case-file",
@@ -38,6 +43,18 @@ const CaseFileActions: React.FC<CaseFileActionsProps> = ({
     caseFileData?.id ?? 0
   );
 
+  const isPrimaryOfficer =
+    caseFileData?.primary_officer?.auth_user_guid ===
+    user?.profile?.preferred_username;
+
+  const otherAssignedOfficers =
+    caseFileData?.officers?.map((o) => o?.auth_user_guid) ?? [];
+
+  const canLinkOrUnlinkCaseFile =
+    isSuperUser ||
+    isPrimaryOfficer ||
+    otherAssignedOfficers.includes(user?.profile?.preferred_username ?? "");
+
   const closeAndRefresh = useCallback(() => {
     queryClient.invalidateQueries({
       queryKey: ["case-file", fileNumber],
@@ -147,7 +164,8 @@ const CaseFileActions: React.FC<CaseFileActionsProps> = ({
           ),
         });
       },
-      hidden: status?.toLowerCase() === "closed",
+      hidden:
+        status === CaseFileStatusEnum.CLOSED || !canLinkOrUnlinkCaseFile,
     },
     {
       text: "Unlink from Case File",
@@ -169,12 +187,13 @@ const CaseFileActions: React.FC<CaseFileActionsProps> = ({
           ),
         });
       },
-      hidden: status?.toLowerCase() === "closed",
+      hidden:
+        status === CaseFileStatusEnum.CLOSED || !canLinkOrUnlinkCaseFile,
     },
     {
       text: "Close Case File",
       onClick: closeCaseFile,
-      hidden: status?.toLowerCase() === "closed",
+      hidden: status === CaseFileStatusEnum.CLOSED,
     },
     {
       text: "Reopen Case File",
@@ -196,7 +215,7 @@ const CaseFileActions: React.FC<CaseFileActionsProps> = ({
           ),
         });
       },
-      hidden: status?.toLowerCase() === "open",
+      hidden: status === CaseFileStatusEnum.OPEN,
     },
     {
       text: "Delete Case File",

compliance-web/src/utils/constants.ts

@@ -201,6 +201,11 @@ export enum ComplaintStatusEnum {
   CLOSED = "Closed",
 }
 
+export enum CaseFileStatusEnum {
+  OPEN = "Open",
+  CLOSED = "Closed",
+} 
+
 export const APReferralStatus = {
   DRAFTING: { id: "DRAFTING", name: "Drafting" },
   DEPUTY_REVIEW: { id: "DEPUTY_REVIEW", name: "Deputy Review" },