chore(frontend): Migrate from Remix to React Router 7 (#5304)

frontend/.gitignore

@@ -7,3 +7,4 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+.react-router/

frontend/__tests__/components/chat/chat-interface.test.tsx

@@ -26,8 +26,8 @@ describe("Empty state", () => {
   }));
 
   beforeAll(() => {
-    vi.mock("@remix-run/react", async (importActual) => ({
-      ...(await importActual<typeof import("@remix-run/react")>()),
+    vi.mock("react-router", async (importActual) => ({
+      ...(await importActual<typeof import("react-router")>()),
       useRouteLoaderData: vi.fn(() => ({})),
     }));
 
@@ -290,8 +290,8 @@ describe.skip("ChatInterface", () => {
   });
 
   it("should render both GitHub buttons initially when ghToken is available", () => {
-    vi.mock("@remix-run/react", async (importActual) => ({
-      ...(await importActual<typeof import("@remix-run/react")>()),
+    vi.mock("react-router", async (importActual) => ({
+      ...(await importActual<typeof import("react-router")>()),
       useRouteLoaderData: vi.fn(() => ({ ghToken: "test-token" })),
     }));
 
@@ -315,8 +315,8 @@ describe.skip("ChatInterface", () => {
   });
 
   it("should render only 'Push changes to PR' button after PR is created", async () => {
-    vi.mock("@remix-run/react", async (importActual) => ({
-      ...(await importActual<typeof import("@remix-run/react")>()),
+    vi.mock("react-router", async (importActual) => ({
+      ...(await importActual<typeof import("react-router")>()),
       useRouteLoaderData: vi.fn(() => ({ ghToken: "test-token" })),
     }));
 

frontend/__tests__/routes/_oh.test.tsx

@@ -1,5 +1,5 @@
 import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
-import { createRemixStub } from "@remix-run/testing";
+import { createRoutesStub } from "react-router";
 import { screen, waitFor, within } from "@testing-library/react";
 import { renderWithProviders } from "test-utils";
 import userEvent from "@testing-library/user-event";
@@ -8,7 +8,7 @@ import * as CaptureConsent from "#/utils/handle-capture-consent";
 import i18n from "#/i18n";
 
 describe("frontend/routes/_oh", () => {
-  const RemixStub = createRemixStub([{ Component: MainApp, path: "/" }]);
+  const RouteStub = createRoutesStub([{ Component: MainApp, path: "/" }]);
 
   const { userIsAuthenticatedMock, settingsAreUpToDateMock } = vi.hoisted(
     () => ({
@@ -34,26 +34,26 @@ describe("frontend/routes/_oh", () => {
   });
 
   it("should render", async () => {
-    renderWithProviders(<RemixStub />);
+    renderWithProviders(<RouteStub />);
     await screen.findByTestId("root-layout");
   });
 
   it("should render the AI config modal if the user is authed", async () => {
     // Our mock return value is true by default
-    renderWithProviders(<RemixStub />);
+    renderWithProviders(<RouteStub />);
     await screen.findByTestId("ai-config-modal");
   });
 
   it("should render the AI config modal if settings are not up-to-date", async () => {
     settingsAreUpToDateMock.mockReturnValue(false);
-    renderWithProviders(<RemixStub />);
+    renderWithProviders(<RouteStub />);
 
     await screen.findByTestId("ai-config-modal");
   });
 
   it("should not render the AI config modal if the settings are up-to-date", async () => {
     settingsAreUpToDateMock.mockReturnValue(true);
-    renderWithProviders(<RemixStub />);
+    renderWithProviders(<RouteStub />);
 
     await waitFor(() => {
       expect(screen.queryByTestId("ai-config-modal")).not.toBeInTheDocument();
@@ -67,7 +67,7 @@ describe("frontend/routes/_oh", () => {
       "handleCaptureConsent",
     );
 
-    renderWithProviders(<RemixStub />);
+    renderWithProviders(<RouteStub />);
 
     // The user has not consented to tracking
     const consentForm = await screen.findByTestId("user-capture-consent-form");
@@ -89,7 +89,7 @@ describe("frontend/routes/_oh", () => {
 
   it("should not render the user consent form if the user has already made a decision", async () => {
     localStorage.setItem("analytics-consent", "true");
-    renderWithProviders(<RemixStub />);
+    renderWithProviders(<RouteStub />);
 
     await waitFor(() => {
       expect(
@@ -101,12 +101,12 @@ describe("frontend/routes/_oh", () => {
   // TODO: Likely failing due to how tokens are now handled in context. Move to e2e tests
   it.skip("should render a new project button if a token is set", async () => {
     localStorage.setItem("token", "test-token");
-    const { rerender } = renderWithProviders(<RemixStub />);
+    const { rerender } = renderWithProviders(<RouteStub />);
 
     await screen.findByTestId("new-project-button");
 
     localStorage.removeItem("token");
-    rerender(<RemixStub />);
+    rerender(<RouteStub />);
 
     await waitFor(() => {
       expect(
@@ -118,17 +118,17 @@ describe("frontend/routes/_oh", () => {
   // TODO: Move to e2e tests
   it.skip("should update the i18n language when the language settings change", async () => {
     const changeLanguageSpy = vi.spyOn(i18n, "changeLanguage");
-    const { rerender } = renderWithProviders(<RemixStub />);
+    const { rerender } = renderWithProviders(<RouteStub />);
 
     // The default language is English
     expect(changeLanguageSpy).toHaveBeenCalledWith("en");
 
     localStorage.setItem("LANGUAGE", "es");
 
-    rerender(<RemixStub />);
+    rerender(<RouteStub />);
     expect(changeLanguageSpy).toHaveBeenCalledWith("es");
 
-    rerender(<RemixStub />);
+    rerender(<RouteStub />);
     // The language has not changed, so the spy should not have been called again
     expect(changeLanguageSpy).toHaveBeenCalledTimes(2);
   });
@@ -139,7 +139,7 @@ describe("frontend/routes/_oh", () => {
     localStorage.setItem("ghToken", "test-token");
 
     // const logoutCleanupSpy = vi.spyOn(LogoutCleanup, "logoutCleanup");
-    renderWithProviders(<RemixStub />);
+    renderWithProviders(<RouteStub />);
 
     const userActions = await screen.findByTestId("user-actions");
     const userAvatar = within(userActions).getByTestId("user-avatar");