change dashboard access based on user role and add tests

Enterprise-CMCS · Jan 8, 2025 · 766ea1b · 766ea1b
1 parent cf14feb
commit 766ea1b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/react-app/src/components/Layout/index.test.tsx b/react-app/src/components/Layout/index.test.tsx
@@ -6,7 +6,7 @@ import { Auth } from "aws-amplify";
 import * as hooks from "@/hooks";
 import * as api from "@/api";
 import { renderWithQueryClientAndMemoryRouter } from "@/utils/test-helpers/renderForm";
-import { setMockUsername, makoStateSubmitter, AUTH_CONFIG } from "mocks";
+import { setMockUsername, makoStateSubmitter, noRoleUser, AUTH_CONFIG } from "mocks";
 
 /**
  * Mock Configurations
@@ -184,6 +184,34 @@ describe("Layout", () => {
     });
   });
 
+  describe("Navigation for logged-in users", () => {
+    it("navigates to dashboard if user has appropriate roles", async () => {
+      const setupLayoutTest = async (
+        viewMode: ViewMode = VIEW_MODES.DESKTOP,
+        userData = makoStateSubmitter,
+      ) => {
+        setMockUsername(userData);
+        mockMediaQuery(viewMode);
+        await renderLayout();
+      };
+      await setupLayoutTest(VIEW_MODES.DESKTOP);
+      expect(screen.getByText("Dashboard")).toBeInTheDocument();
+    });
+
+    it("navigates to home page if user doesn't have appropriate roles", async () => {
+      const setupLayoutTest = async (
+        viewMode: ViewMode = VIEW_MODES.DESKTOP,
+        userData = noRoleUser,
+      ) => {
+        setMockUsername(userData);
+        mockMediaQuery(viewMode);
+        await renderLayout();
+      };
+      await setupLayoutTest(VIEW_MODES.DESKTOP);
+      expect(screen.queryByText("Dashboard")).not.toBeInTheDocument();
+    });
+  });
+
   describe("Navigation for logged-out users", () => {
     beforeEach(() => {
       setMockUsername(null);

diff --git a/react-app/src/components/Layout/index.tsx b/react-app/src/components/Layout/index.tsx
@@ -12,7 +12,7 @@ import config from "@/config";
 import { ScrollToTop, SimplePageContainer, UserPrompt, Banner } from "@/components";
 import { isFaqPage, isProd } from "@/utils";
 import MMDLAlertBanner from "@/components/Banner/MMDLSpaBanner";
-
+import { UserRoles } from "shared-types";
 /**
  * Custom hook that generates a list of navigation links based on the user's status and whether the current page is the FAQ page.
  *
@@ -35,7 +35,12 @@ const useGetLinks = () => {
           {
             name: "Dashboard",
             link: "/dashboard",
-            condition: userObj.user && userObj.user["custom:cms-roles"],
+            condition:
+              userObj.user &&
+              userObj.user["custom:cms-roles"] &&
+              Object.values(UserRoles).some((role) =>
+                userObj.user["custom:cms-roles"].includes(role),
+              ),
           },
           {
             name: "FAQ",