Merge pull request #221 from Enterprise-CMCS/master

Release to val

src/services/ui/serverless.yml

@@ -20,6 +20,7 @@ custom:
   project: ${env:PROJECT}
   stage: ${opt:stage, self:provider.stage}
   region: ${opt:region, self:provider.region}
+  idmInfo: ${ssm:/aws/reference/secretsmanager/${self:custom.project}/${sls:stage}/idmInfo, ""}
   serverlessTerminationProtection:
     stages:
       - master
@@ -44,6 +45,7 @@ custom:
         VITE_COGNITO_USER_POOL_CLIENT_DOMAIN=${param:CognitoUserPoolClientDomain}
         VITE_COGNITO_REDIRECT_SIGNIN=${param:ApplicationEndpointUrl}
         VITE_COGNITO_REDIRECT_SIGNOUT=${param:ApplicationEndpointUrl}
+        VITE_IDM_HOME_URL=${self:custom.idmInfo.home_url, "https://test.home.idm.cms.gov"}
         """ > .env.local
         yarn build
       deploy:finalize: |

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

@@ -5,6 +5,8 @@ import { GovernmentBuildingIcon } from "../GovernmentBuildingIcon";
 import UsFlag from "@/assets/us_flag_small.png";
 import { useMediaQuery } from "@/hooks";
 import { useUserContext } from "../Context/userContext";
+import { useLoaderData } from "react-router-dom";
+import config from "@/config";
 
 export const UsaBanner = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -21,6 +23,7 @@ export const UsaBanner = () => {
       return false;
     }
   }, []);
+  const { error } = useLoaderData() as { error: string };
   return (
     <>
       <div className="bg-[#f0f0f0]">
@@ -72,22 +75,8 @@ export const UsaBanner = () => {
             </div>
           </button>
         )}
-        {hasRole && (
-          <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.{" "}
-              <a
-                rel="noreferrer"
-                href="https://test.home.idm.cms.gov/"
-                target="_blank"
-                className="text-blue-600 inline  no-underline"
-              >
-                Please visit IDM
-              </a>{" "}
-              to request the appropriate user role(s).
-            </p>
-          </div>
-        )}
+        {hasRole && <NoRole />}
+        {error?.length > 0 && <NoRole />}
 
         {isOpen && (
           <div className="flex flex-col gap-3 px-3 mt-3 sm:flex-row max-w-screen-lg mx-auto pb-4">
@@ -139,3 +128,22 @@ export const MiniLock = () => {
     </svg>
   );
 };
+
+const NoRole = () => {
+  return (
+    <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.{" "}
+        <a
+          rel="noreferrer"
+          href={config.idm.home_url}
+          target="_blank"
+          className="text-blue-600 inline  no-underline"
+        >
+          Please visit IDM
+        </a>{" "}
+        to request the appropriate user role(s).
+      </p>
+    </div>
+  );
+};

src/services/ui/src/config.tsx

@@ -12,6 +12,9 @@ const config = {
     REDIRECT_SIGNIN: import.meta.env.VITE_COGNITO_REDIRECT_SIGNIN,
     REDIRECT_SIGNOUT: import.meta.env.VITE_COGNITO_REDIRECT_SIGNOUT,
   },
+  idm: {
+    home_url: import.meta.env.VITE_IDM_HOME_URL,
+  },
 };
 
 export default config;

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

@@ -3,12 +3,22 @@ import OneMacLogo from "@/assets/onemac_logo.svg";
 import * as Heroicons from "@heroicons/react/24/outline";
 import { QueryClient } from "@tanstack/react-query";
 import { getUser } from "@/api/useGetUser";
-import { Link } from "react-router-dom";
+import { Link, redirect, useLoaderData } from "react-router-dom";
 import { Button } from "@/components/Inputs";
 import { ROUTES, FAQ_TARGET } from "@/routes";
 
 export const loader = (queryClient: QueryClient) => {
   return async () => {
+    const queryString = window.location.search;
+    // Parse the query string to get URL parameters
+    const queryParams = new URLSearchParams(queryString);
+    // Access specific parameters
+    const errorDescription = queryParams.get("error_description");
+    const error = queryParams.get("error");
+    if (errorDescription || error) {
+      console.error("Authentication Error:", { errorDescription, error });
+      return { error };
+    }
     if (!queryClient.getQueryData(["user"])) {
       return await queryClient.fetchQuery({
         queryKey: ["user"],