Merge pull request #585 from CBIIT/CRDCDH-2199

CRDCDH-2199 Show Review and Submit in Progress Bar when submit button is visible

src/components/ProgressBar/ProgressBar.test.tsx

@@ -13,10 +13,11 @@ import { ContextState, Context as AuthCtx, Status as AuthStatus } from "../Conte
 
 type Props = {
   section: string;
+  userRole?: UserRole;
   data: object;
 };
 
-const BaseComponent: FC<Props> = ({ section, data = {} }: Props) => {
+const BaseComponent: FC<Props> = ({ section, userRole = "Submitter", data = {} }: Props) => {
   const formValue = useMemo<FormCtxState>(
     () => ({
       status: FormStatus.LOADED,
@@ -28,10 +29,10 @@ const BaseComponent: FC<Props> = ({ section, data = {} }: Props) => {
   const authValue = useMemo<ContextState>(
     () => ({
       status: AuthStatus.LOADED,
-      user: null,
+      user: { role: userRole } as User,
       isLoggedIn: true,
     }),
-    []
+    [userRole]
   );
 
   return (
@@ -224,4 +225,44 @@ describe("ProgressBar General Tests", () => {
       );
     }
   );
+
+  it.each<ApplicationStatus>(["In Progress", "Inquired"])(
+    "shows the default review section title (from config) when submit button is visible and status is %s",
+    (status) => {
+      const data = {
+        status,
+        questionnaireData: {
+          sections: keys.map((s) => ({ name: s, status: "Completed" })),
+        },
+      };
+
+      const { getByTestId } = render(
+        <BaseComponent section={config.REVIEW.title} data={data} userRole="Federal Lead" />
+      );
+
+      const reviewSection = getByTestId(`progress-bar-section-${keys.length - 1}`);
+
+      expect(reviewSection.textContent).toBe("Review and Submit");
+    }
+  );
+
+  it.each<ApplicationStatus>(["In Progress", "Inquired"])(
+    "shows the review section title as 'Review' when submit button is not visible and status is %s",
+    (status) => {
+      const data = {
+        status,
+        questionnaireData: {
+          sections: keys.map((s) => ({ name: s, status: "Completed" })),
+        },
+      };
+
+      const { getByTestId } = render(
+        <BaseComponent section={config.REVIEW.title} data={data} userRole="Admin" />
+      );
+
+      const reviewSection = getByTestId(`progress-bar-section-${keys.length - 1}`);
+
+      expect(reviewSection.textContent).toBe("Review");
+    }
+  );
 });

src/components/ProgressBar/ProgressBar.tsx

@@ -13,6 +13,8 @@ import config from "../../config/SectionConfig";
 import { Status, useFormContext } from "../Contexts/FormContext";
 import StatusAdornment from "./StatusAdornment";
 import useFormMode from "../../hooks/useFormMode";
+import { useAuthContext } from "../Contexts/AuthContext";
+import { CanSubmitSubmissionRequestRoles } from "../../config/AuthRoles";
 
 type Props = {
   section: string;
@@ -77,6 +79,8 @@ const StyledButton = styled(ListItemButton)({
  * @returns {JSX.Element}
  */
 const ProgressBar: FC<Props> = ({ section }) => {
+  const { user } = useAuthContext();
+
   const sectionKeys = Object.keys(config);
 
   const { data, status: formStatus } = useFormContext();
@@ -112,7 +116,15 @@ const ProgressBar: FC<Props> = ({ section }) => {
     const reviewSection = newSections.find((s) => s.id === "review");
     const reviewUnlocked = completedSections === sectionKeys.length - 1;
     if (reviewSection) {
-      const showReviewTitle = formMode === "View Only" || formMode === "Review";
+      const meetsReviewCriteria = formMode === "View Only" || formMode === "Review";
+
+      const canSeeSubmitButton =
+        CanSubmitSubmissionRequestRoles.includes(user?.role) &&
+        (data?.status === "In Progress" ||
+          (data?.status === "Inquired" && user?.role === "Federal Lead"));
+
+      const showReviewTitle = meetsReviewCriteria && !canSeeSubmitButton;
+
       const reviewIcon = reviewUnlocked ? "Review" : "ReviewDisabled";
       reviewSection.icon =
         ["Approved"].includes(status) && reviewUnlocked ? "Completed" : reviewIcon;
@@ -121,7 +133,7 @@ const ProgressBar: FC<Props> = ({ section }) => {
     }
 
     setSections(newSections);
-  }, [section, sectionStatuses, formMode, formStatus]);
+  }, [section, sectionStatuses, formMode, formStatus, data?.status, user?.role]);
 
   return (
     <StyledList>