feat(role based view): implemented a role based view for user groups

src/services/auth/libs/users.json

@@ -87,7 +87,7 @@
     ]
   },
   {
-    "username": "onemac-micro-[email protected]",
+    "username": "[email protected]",
     "attributes": [
       {
         "Name": "email",

src/services/ui/src/api/useGetUser.ts

@@ -4,7 +4,9 @@ import { Auth } from "aws-amplify";
 import { CognitoUserAttributes } from "shared-types";
 import { isCmsUser } from "shared-utils";
 
-export const getUser = async () => {
+export type OneMacUser = { isCms?: boolean, user: CognitoUserAttributes | null }
+
+export const getUser = async (): Promise<OneMacUser> => {
   try {
     const authenticatedUser = await Auth.currentAuthenticatedUser();
     const attributes = await Auth.userAttributes(authenticatedUser);
@@ -14,14 +16,14 @@ export const getUser = async () => {
     }, {}) as unknown as CognitoUserAttributes;
     if (user["custom:cms-roles"]) {
       const isCms = isCmsUser(user);
-      return { user, isCms };
+      return { user, isCms } satisfies OneMacUser;
     } else {
       user["custom:cms-roles"] = "";
-      return { user, isCms: false };
+      return { user, isCms: false } satisfies OneMacUser;
     }
   } catch (e) {
     console.log({ e });
-    return { user: null };
+    return { user: null } satisfies OneMacUser;
   }
 };
 

src/services/ui/src/components/Context/userContext.tsx

@@ -0,0 +1,14 @@
+import { OneMacUser, useGetUser } from "@/api/useGetUser";
+import { PropsWithChildren, createContext, useContext } from "react";
+
+const initialState = { user: null };
+
+export const UserContext = createContext<OneMacUser | undefined>(initialState);
+export const UserContextProvider = ({ children }: PropsWithChildren) => {
+  const { data: userData } = useGetUser();
+  return (
+    <UserContext.Provider value={userData}>{children}</UserContext.Provider>
+  );
+};
+
+export const useUserContext = () => useContext(UserContext);

src/services/ui/src/components/Layout/index.tsx

@@ -9,9 +9,11 @@ import { AwsCognitoOAuthOpts } from "@aws-amplify/auth/lib-esm/types";
 import { Footer } from "../Footer";
 import { UsaBanner } from "../UsaBanner";
 import { FAQ_TARGET } from "@/routes";
+import { useUserContext } from "../Context/userContext";
+import { useOsQuery } from "../Opensearch";
 
-const getLinks = (isAuthenticated: boolean) => {
-  if (isAuthenticated) {
+const getLinks = (isAuthenticated: boolean, role?: string) => {
+  if (isAuthenticated && role !== "onemac-micro-statesubmitter") {
     return [
       {
         name: "Home",
@@ -83,14 +85,16 @@ const ResponsiveNav = ({ isDesktop }: ResponsiveNavProps) => {
   const [prevMediaQuery, setPrevMediaQuery] = useState(isDesktop);
   const [isOpen, setIsOpen] = useState(false);
   const { isLoading, isError, data } = useGetUser();
+  const query = useOsQuery();
+  const userContext = useUserContext();
+  console.log(userContext, query);
 
   const handleLogin = () => {
     const authConfig = Auth.configure();
     const { domain, redirectSignIn, responseType } =
       authConfig.oauth as AwsCognitoOAuthOpts;
     const clientId = authConfig.userPoolWebClientId;
     const url = `https://${domain}/oauth2/authorize?redirect_uri=${redirectSignIn}&response_type=${responseType}&client_id=${clientId}`;
-
     window.location.assign(url);
   };
 
@@ -111,7 +115,7 @@ const ResponsiveNav = ({ isDesktop }: ResponsiveNavProps) => {
   if (isDesktop) {
     return (
       <>
-        {getLinks(!!data.user).map((link) => (
+        {getLinks(!!data.user, data.user?.["custom:cms-roles"]).map((link) => (
           <NavLink
             to={link.link}
             target={link.link === "/faq" ? FAQ_TARGET : undefined}
@@ -149,17 +153,19 @@ const ResponsiveNav = ({ isDesktop }: ResponsiveNavProps) => {
       {isOpen && (
         <div className="w-full fixed top-[100px] left-0 z-50">
           <ul className="font-medium flex flex-col p-4 md:p-0 mt-2 gap-4 rounded-lg bg-accent">
-            {getLinks(!!data.user).map((link) => (
-              <li key={link.link}>
-                <Link
-                  className="block py-2 pl-3 pr-4 text-white rounded"
-                  to={link.link}
-                  target={link.link === "/faq" ? FAQ_TARGET : undefined}
-                >
-                  {link.name}
-                </Link>
-              </li>
-            ))}
+            {getLinks(!!data.user, data.user?.["custom:cms-roles"]).map(
+              (link) => (
+                <li key={link.link}>
+                  <Link
+                    className="block py-2 pl-3 pr-4 text-white rounded"
+                    to={link.link}
+                    target={link.link === "/faq" ? FAQ_TARGET : undefined}
+                  >
+                    {link.name}
+                  </Link>
+                </li>
+              )
+            )}
             <>
               {data.user ? (
                 <button

src/services/ui/src/components/UsaBanner/index.tsx

@@ -4,10 +4,14 @@ import { LockIcon } from "../LockIcon";
 import { GovernmentBuildingIcon } from "../GovernmentBuildingIcon";
 import UsFlag from "@/assets/us_flag_small.png";
 import { useMediaQuery } from "@/hooks";
+import { useUserContext } from "../Context/userContext";
 
 export const UsaBanner = () => {
   const [isOpen, setIsOpen] = useState(false);
   const isDesktop = useMediaQuery("(min-width: 640px)");
+  const userContext = useUserContext();
+  const role =
+    userContext?.user?.["custom:cms-roles"] === "onemac-micro-statesubmitter";
 
   return (
     <div className="bg-[#f0f0f0]">
@@ -59,6 +63,16 @@ export const UsaBanner = () => {
           </div>
         </button>
       )}
+      {role && (
+        <div className="w-full  px-4 py-1 lg:px-8 text-xs mx-auto flex gap-2 items-center justify-center bg-red-200 ">
+          <p className="text-center text-base">
+            You do not have access to view the entire application.{" "}
+            <span className="text-blue-600">Please visit IDM</span> to request
+            the appropriate user Role(s).
+          </p>
+        </div>
+      )}
+
       {isOpen && (
         <div className="flex flex-col gap-3 px-3 mt-3 sm:flex-row max-w-screen-lg mx-auto pb-4">
           <div className="flex gap-2">

src/services/ui/src/main.tsx

@@ -5,11 +5,14 @@ import "./index.css"; // this one second
 import { queryClient, router } from "./router";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { UserContextProvider } from "./components/Context/userContext";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
+      <UserContextProvider>
+        <RouterProvider router={router} />
+      </UserContextProvider>
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   </React.StrictMode>

src/services/ui/src/pages/dashboard/Lists/spas/consts.tsx

@@ -26,7 +26,7 @@ export const TABLE_COLUMNS = (props?: { isCms?: boolean }): OsTableColumn[] => [
   {
     field: "state.keyword",
     label: "State",
-    visible: false,
+    visible: true,
     cell: (data) => data.state,
   },
   {

src/services/ui/src/pages/dashboard/Lists/waivers/consts.tsx

@@ -27,7 +27,7 @@ export const TABLE_COLUMNS = (props?: { isCms?: boolean }): OsTableColumn[] => [
   {
     field: "state.keyword",
     label: "State",
-    visible: false,
+    visible: true,
     cell: (data) => data.state,
   },
   {

src/services/ui/src/pages/dashboard/index.tsx

@@ -1,4 +1,4 @@
-import { Link, redirect } from "react-router-dom";
+import { Link, redirect, useNavigate } from "react-router-dom";
 import { QueryClient } from "@tanstack/react-query";
 import { getUser, useGetUser } from "@/api/useGetUser";
 import { WaiversList } from "./Lists/waivers";
@@ -13,6 +13,8 @@ import {
 } from "@/components/Opensearch";
 import { Button } from "@/components/Inputs";
 import { ROUTES } from "@/routes";
+import { useUserContext } from "@/components/Context/userContext";
+import { useEffect } from "react";
 
 const loader = (queryClient: QueryClient) => {
   return async () => {
@@ -33,11 +35,20 @@ const loader = (queryClient: QueryClient) => {
     return isUser;
   };
 };
+
 export const dashboardLoader = loader;
 
 export const Dashboard = () => {
-  const { data: user } = useGetUser();
+  const navigate = useNavigate();
+  const userContext = useUserContext();
   const query = useOsQuery();
+  const { data } = useGetUser();
+
+  useEffect(() => {
+    if (data?.user?.["custom:cms-roles"] === "onemac-micro-reviewer") {
+      return navigate("/");
+    }
+  }, []);
 
   return (
     <OsProvider
@@ -51,7 +62,7 @@ export const Dashboard = () => {
         <div className="max-w-screen-xl mx-auto px-4 lg:px-8">
           <div className="flex items-center justify-between my-4">
             <h1 className="text-xl">Dashboard</h1>
-            {!user?.isCms && (
+            {!userContext?.isCms && (
               <Button>
                 <Link to={ROUTES.NEW_SUBMISSION_OPTIONS}>New Submission</Link>
               </Button>