Track 210 - Add new editing permissions to Status and Issues tabs.

epictrack-api/docker-compose.yml

@@ -25,7 +25,7 @@ services:
     links:
       - eao-reports-api-db
     ports:
-      - '3002:8080'
+      - '3200:8080'
     environment:
       - JWT_OIDC_ISSUER:${JWT_OIDC_ISSUER}
       - JWT_OIDC_WELL_KNOWN_CONFIG:${JWT_OIDC_WELL_KNOWN_CONFIG}
@@ -48,7 +48,7 @@ services:
 
     networks:
       - eao-network
-    
+
 
 networks:
   eao-network:

epictrack-web/src/components/workPlan/issues/IssueAccordion/Details.tsx

@@ -16,16 +16,15 @@ import {
   ROLES,
 } from "../../../../constants/application-constant";
 import { Restricted } from "../../../shared/restricted";
-import { useAppSelector } from "hooks";
-import { WorkplanContext } from "components/workPlan/WorkPlanContext";
+import { useIsTeamMember, useUserHasRole } from "../../utils";
 
 const IssueDetails = ({ issue }: { issue: WorkIssue }) => {
   const latestUpdate = issue.updates[0];
   const CheckCircleIcon: React.FC<IconProps> = icons["CheckCircleIcon"];
   const PencilEditIcon: React.FC<IconProps> = icons["PencilEditIcon"];
   const AddIcon: React.FC<IconProps> = icons["AddIcon"];
-
-  const { team } = React.useContext(WorkplanContext);
+  const isTeamMember = useIsTeamMember();
+  const userHasRole = useUserHasRole();
 
   const {
     setEditIssueUpdateFormIsOpen,
@@ -37,9 +36,6 @@ const IssueDetails = ({ issue }: { issue: WorkIssue }) => {
     setNewIssueUpdateFormIsOpen,
   } = React.useContext(IssuesContext);
 
-  const { email } = useAppSelector((state) => state.user.userDetail);
-  const isTeamMember = team?.some((member) => member.staff.email === email);
-
   const handleApproveIssue = () => {
     approveIssue(issue.id, latestUpdate.id);
     setIssueToApproveId(null);
@@ -154,8 +150,10 @@ const IssueDetails = ({ issue }: { issue: WorkIssue }) => {
                   allowed={[
                     latestUpdate.is_approved ? ROLES.EXTENDED_EDIT : ROLES.EDIT,
                   ]}
-                  exception={!latestUpdate.is_approved && isTeamMember}
                   errorProps={{ disabled: true }}
+                  exception={
+                    (!latestUpdate.is_approved && isTeamMember) || userHasRole
+                  }
                 >
                   <Button
                     data-cy="edit-issue-update-button"

epictrack-web/src/components/workPlan/issues/IssueAccordion/IssueHistory/index.tsx

@@ -24,9 +24,12 @@ import {
 } from "../../../../../constants/application-constant";
 import { Restricted } from "../../../../shared/restricted";
 import { EmptyIssueHistory } from "./EmptyIssueHistory";
+import { useUserHasRole } from "../../../utils";
 
 const IssueHistory = ({ issue }: { issue: WorkIssue }) => {
   const theme = useTheme();
+  const userHasRole = useUserHasRole();
+
   const { setUpdateToEdit, setEditIssueUpdateFormIsOpen } =
     useContext(IssuesContext);
 
@@ -95,6 +98,7 @@ const IssueHistory = ({ issue }: { issue: WorkIssue }) => {
                   <Restricted
                     allowed={[ROLES.EXTENDED_EDIT]}
                     errorProps={{ disabled: true }}
+                    exception={userHasRole}
                   >
                     <Button
                       data-cy="edit-history-update-button"

epictrack-web/src/components/workPlan/issues/IssueAccordion/Summary.tsx

@@ -14,17 +14,15 @@ import icons from "../../../icons";
 import { IconProps } from "../../../icons/type";
 import { IssuesContext } from "../IssuesContext";
 import { Restricted } from "components/shared/restricted";
-import { WorkplanContext } from "components/workPlan/WorkPlanContext";
-import { useAppSelector } from "hooks";
+import { useUserHasRole } from "../../utils";
 
 const IssueSummary = ({ issue }: { issue: WorkIssue }) => {
   const { setEditIssueFormIsOpen, setIssueToEdit } =
     React.useContext(IssuesContext);
-  const { team } = React.useContext(WorkplanContext);
-  const { email } = useAppSelector((state) => state.user.userDetail);
-  const isTeamMember = team?.some((member) => member.staff.email === email);
 
   const EditIcon: React.FC<IconProps> = icons["PencilEditIcon"];
+  const userHasRole = useUserHasRole();
+
   return (
     <Grid
       container
@@ -66,9 +64,9 @@ const IssueSummary = ({ issue }: { issue: WorkIssue }) => {
         <Grid item xs={"auto"} container justifyContent={"flex-end"}>
           <AccordionSummaryItem title="Actions" enableTooltip={true}>
             <Restricted
-              allowed={[ROLES.EDIT]}
+              allowed={[ROLES.EXTENDED_EDIT]}
               errorProps={{ disabled: true }}
-              exception={isTeamMember}
+              exception={userHasRole}
             >
               <Button
                 variant="text"

epictrack-web/src/components/workPlan/status/StatusView/RecentStatus.tsx

@@ -13,7 +13,7 @@ import {
   ROLES,
 } from "../../../../constants/application-constant";
 import { Restricted } from "../../../shared/restricted";
-import { useAppSelector } from "hooks";
+import { useIsTeamMember, useUserHasRole } from "../../utils";
 
 const CheckCircleIcon: React.FC<IconProps> = Icons["CheckCircleIcon"];
 const PencilEditIcon: React.FC<IconProps> = Icons["PencilEditIcon"];
@@ -27,9 +27,9 @@ const RecentStatus = () => {
     setStatus,
     setShowApproveStatusDialog,
   } = React.useContext(StatusContext);
-  const { team } = React.useContext(WorkplanContext);
-  const { email } = useAppSelector((state) => state.user.userDetail);
-  const isTeamMember = team?.some((member) => member.staff.email === email);
+
+  const isTeamMember = useIsTeamMember();
+  const userHasRole = useUserHasRole();
 
   return (
     <GrayBox
@@ -137,7 +137,7 @@ const RecentStatus = () => {
         <Restricted
           allowed={[statuses[0].is_approved ? ROLES.EXTENDED_EDIT : ROLES.EDIT]}
           errorProps={{ disabled: true }}
-          exception={!statuses[0].is_approved && isTeamMember}
+          exception={(!statuses[0].is_approved && isTeamMember) || userHasRole}
         >
           <Button
             startIcon={<PencilEditIcon />}

epictrack-web/src/components/workPlan/status/StatusView/StatusHistory/index.tsx

@@ -25,6 +25,7 @@ import { Box, Button, Collapse, Grid, useTheme } from "@mui/material";
 import { StatusContext } from "../../StatusContext";
 import { Restricted } from "../../../../shared/restricted";
 import { EmptyStatusHistory } from "./EmptyStatusHistory";
+import { useUserHasRole } from "../../../utils";
 
 const ExpandIcon: React.FC<IconProps> = Icons["ExpandIcon"];
 const PencilEditIcon: React.FC<IconProps> = Icons["PencilEditIcon"];
@@ -34,14 +35,14 @@ const StatusHistory = () => {
   const { setShowStatusForm, setStatus } = useContext(StatusContext);
   const [expand, setExpand] = useState(false);
   const theme = useTheme();
-
   const approvedStatuses = statuses.filter(
-    (status) => status.is_approved && status.id != statuses?.[0]?.id
+    (status) => status.is_approved && status.id !== statuses?.[0]?.id
   );
   const highlightFirstInTimeLineApproved = !statuses?.[0]?.is_approved;
-
   const SHOW_MORE_THRESHOLD = 3;
 
+  const userHasRole = useUserHasRole();
+
   if (approvedStatuses.length === 0) {
     return <EmptyStatusHistory />;
   }
@@ -83,6 +84,7 @@ const StatusHistory = () => {
                   <Restricted
                     allowed={[ROLES.EXTENDED_EDIT]}
                     errorProps={{ disabled: true }}
+                    exception={userHasRole}
                   >
                     <Button
                       variant="text"

epictrack-web/src/components/workPlan/utils.ts

@@ -0,0 +1,32 @@
+import { ROLES } from "../../constants/application-constant";
+import { useContext } from "react";
+import { useAppSelector } from "hooks";
+import { WorkplanContext } from "./WorkPlanContext";
+
+// Get the active team members
+export const useActiveTeam = () => {
+  const { team } = useContext(WorkplanContext);
+  return team?.filter((member) => member.is_active) || [];
+};
+
+// Check if the current user is a team member
+export const useIsTeamMember = () => {
+  const { team } = useContext(WorkplanContext);
+  const { email } = useAppSelector((state) => state.user.userDetail);
+  return team?.some((member) => member.staff.email === email) || false;
+};
+
+// Check if the current user has a specific role in the active team
+export const useUserHasRole = () => {
+  const activeTeam = useActiveTeam();
+  const { email } = useAppSelector((state) => state.user.userDetail);
+  const rolesArray = [
+    ROLES.RESPONSIBLE_EPD,
+    ROLES.TEAM_LEAD,
+    ROLES.TEAM_CO_LEAD,
+  ];
+  return activeTeam.some(
+    (member) =>
+      member.staff.email === email && rolesArray.includes(member.role.name)
+  );
+};

epictrack-web/src/constants/application-constant.ts

@@ -105,6 +105,9 @@ export const ROLES = {
   DEFAULT_ROLES_EAO_EPIC: "default-roles-eao-epic",
   MANAGE_USERS: "manage_users",
   EXTENDED_EDIT: "extended_edit",
+  RESPONSIBLE_EPD: "Responsible EPD",
+  TEAM_LEAD: "Team Lead",
+  TEAM_CO_LEAD: "Team Co-Lead",
 };
 
 export enum SpecialFieldEntityEnum {

epictrack-web/src/services/userService/index.ts

@@ -82,7 +82,7 @@ const initKeycloak = async (dispatch: Dispatch<AnyAction>) => {
       KeycloakData.tokenParsed?.resource_access?.[AppConfig.keycloak.clientId]
         ?.roles ?? [];
     const roles = [...realmAccessRoles, ...clientLevelRoles];
-    console.log("My Roles:", roles);
+
     const userDetail = new UserDetail(
       userInfo["sub"],
       userInfo["preferred_username"],