clear the error message query param after the first time it's seen

Author: gumaerc

frontends/main/src/app-pages/DashboardPage/HomeContent.test.tsx

@@ -18,8 +18,10 @@ import * as mitxonline from "api/mitxonline-test-utils"
 import { useFeatureFlagEnabled } from "posthog-js/react"
 import HomeContent from "./HomeContent"
 import invariant from "tiny-invariant"
+import * as NextProgressBar from "next-nprogress-bar"
 
 jest.mock("posthog-js/react")
+jest.mock("next-nprogress-bar")
 const mockedUseFeatureFlagEnabled = jest
   .mocked(useFeatureFlagEnabled)
   .mockImplementation(() => false)
@@ -251,8 +253,15 @@ describe("HomeContent", () => {
     expect(screen.queryByText("Enrollment Error")).not.toBeInTheDocument()
   })
 
-  test("Displays enrollment error alert when query param is present", async () => {
+  test("Displays enrollment error alert when query param is present and then clears it", async () => {
     setupAPIs()
+    const mockReplace = jest.fn()
+    jest.spyOn(NextProgressBar, "useRouter").mockReturnValue({
+      replace: mockReplace,
+    } as Partial<ReturnType<typeof NextProgressBar.useRouter>> as ReturnType<
+      typeof NextProgressBar.useRouter
+    >)
+
     renderWithProviders(<HomeContent />, {
       url: "/dashboard?enrollment_error=1",
     })
@@ -261,12 +270,37 @@ describe("HomeContent", () => {
       name: "Your MIT Learning Journey",
     })
 
+    // Verify the alert was shown
     expect(screen.getByText("Enrollment Error")).toBeInTheDocument()
     expect(
       screen.getByText(
         /The Enrollment Code is incorrect or no longer available/,
       ),
     ).toBeInTheDocument()
     expect(screen.getByText("Contact Support")).toBeInTheDocument()
+
+    // Verify the query param is cleared
+    expect(mockReplace).toHaveBeenCalledWith("/dashboard")
+  })
+
+  test("Does not clear query param when it is not present", async () => {
+    setupAPIs()
+    const mockReplace = jest.fn()
+    jest.spyOn(NextProgressBar, "useRouter").mockReturnValue({
+      replace: mockReplace,
+    } as Partial<ReturnType<typeof NextProgressBar.useRouter>> as ReturnType<
+      typeof NextProgressBar.useRouter
+    >)
+
+    renderWithProviders(<HomeContent />, {
+      url: "/dashboard",
+    })
+
+    await screen.findByRole("heading", {
+      name: "Your MIT Learning Journey",
+    })
+
+    // Verify router.replace was not called
+    expect(mockReplace).not.toHaveBeenCalled()
   })
 })

frontends/main/src/app-pages/DashboardPage/HomeContent.tsx

@@ -19,6 +19,7 @@ import { FeatureFlags } from "@/common/feature_flags"
 import { useUserMe } from "api/hooks/user"
 import { OrganizationCards } from "./CoursewareDisplay/OrganizationCards"
 import { useSearchParams } from "next/navigation"
+import { useRouter } from "next-nprogress-bar"
 
 const SubTitleText = styled(Typography)(({ theme }) => ({
   color: theme.custom.colors.darkGray2,
@@ -73,6 +74,7 @@ const AlertBanner = styled(Alert)({
 
 const HomeContent: React.FC = () => {
   const searchParams = useSearchParams()
+  const router = useRouter()
   const enrollmentError = searchParams.get(ENROLLMENT_ERROR_QUERY_PARAM)
   const { isLoading: isLoadingProfile, data: user } = useUserMe()
   const topics = user?.profile?.preference_search_filters.topic
@@ -81,6 +83,19 @@ const HomeContent: React.FC = () => {
     FeatureFlags.EnrollmentDashboard,
   )
   const supportEmail = process.env.NEXT_PUBLIC_MITOL_SUPPORT_EMAIL || ""
+
+  // Clear the enrollment error query param on mount so it doesn't persist on reload/back navigation
+  React.useEffect(() => {
+    if (enrollmentError) {
+      const newParams = new URLSearchParams(searchParams.toString())
+      newParams.delete(ENROLLMENT_ERROR_QUERY_PARAM)
+      const newUrl = newParams.toString()
+        ? `${window.location.pathname}?${newParams.toString()}`
+        : window.location.pathname
+      router.replace(newUrl)
+    }
+  }, [enrollmentError, searchParams, router])
+
   return (
     <>
       <HomeHeader>