chore(deps): Update MAAS UI React ecosystem MAASENG-4477

package.json

@@ -71,10 +71,10 @@
     "re-reselect": "5.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-dropzone": "14.2.3",
+    "react-dropzone": "14.3.8",
     "react-ga4": "2.1.0",
     "react-redux": "8.1.3",
-    "react-router-dom": "6.24.0",
+    "react-router-dom": "6.29.0",
     "react-storage-hooks": "4.0.1",
     "react-useportal": "1.0.19",
     "reconnecting-websocket": "4.4.0",
@@ -118,9 +118,9 @@
     "@types/node": "20.12.12",
     "@types/path-parse": "1.0.22",
     "@types/pluralize": "0.0.33",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
-    "@types/react-redux": "7.1.33",
+    "@types/react": "18.3.18",
+    "@types/react-dom": "18.3.5",
+    "@types/react-redux": "7.1.34",
     "@types/react-router": "5.1.20",
     "@types/react-router-dom": "5.3.3",
     "@types/redux-mock-store": "1.0.6",

src/app/settings/views/Scripts/ScriptsUpload/ScriptsUpload.test.tsx

@@ -3,7 +3,6 @@ import type { FileWithPath } from "react-dropzone";
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";
 import type { Dispatch } from "redux";
-import { HistoryRouter as Router } from "redux-first-history/rr6";
 import configureStore from "redux-mock-store";
 
 import ScriptsUpload, { Labels as ScriptsUploadLabels } from "./ScriptsUpload";
@@ -19,7 +18,7 @@ import {
   render,
   waitFor,
   fireEvent,
-  renderWithMockStore,
+  renderWithProviders,
 } from "@/testing/utils";
 
 const mockStore = configureStore();
@@ -61,19 +60,16 @@ describe("ScriptsUpload", () => {
   it("accepts files of any mimetype", async () => {
     const files = [createFile("foo.sh", 2000, "")];
 
-    renderWithMockStore(
-      <MemoryRouter initialEntries={[{ pathname: "/" }]}>
-        <ScriptsUpload type="testing" />
-      </MemoryRouter>,
-      { state }
-    );
+    renderWithProviders(<ScriptsUpload type="testing" />, {
+      state,
+    });
 
     const upload = screen.getByLabelText(ScriptsUploadLabels.FileUploadArea);
     await userEvent.upload(upload, files);
 
     await waitFor(() =>
       expect(
-        screen.getByText("foo.sh (2000 bytes) ready for upload.")
+        screen.getByText("./foo.sh (2000 bytes) ready for upload.")
       ).toBeInTheDocument()
     );
   });
@@ -212,12 +208,10 @@ describe("ScriptsUpload", () => {
     const history = createMemoryHistory({
       initialEntries: ["/"],
     });
-    renderWithMockStore(
-      <Router history={history}>
-        <ScriptsUpload type="commissioning" />
-      </Router>,
-      { state }
-    );
+    renderWithProviders(<ScriptsUpload type="commissioning" />, {
+      state,
+      history,
+    });
     await userEvent.click(screen.getByRole("button", { name: "Cancel" }));
     expect(history.location.pathname).toBe("/settings/scripts/commissioning"); // linting errors occur if you use settingsUrls.scripts
   });
@@ -226,12 +220,7 @@ describe("ScriptsUpload", () => {
     const history = createMemoryHistory({
       initialEntries: ["/"],
     });
-    renderWithMockStore(
-      <Router history={history}>
-        <ScriptsUpload type="testing" />
-      </Router>,
-      { state }
-    );
+    renderWithProviders(<ScriptsUpload type="testing" />, { state, history });
     await userEvent.click(screen.getByRole("button", { name: "Cancel" }));
     expect(history.location.pathname).toBe("/settings/scripts/testing"); // linting errors occur if you use settingsUrls.scripts
   });

src/testing/utils.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type ReactNode, useEffect } from "react";
 
 import type { ValueOf } from "@canonical/react-components";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -544,6 +544,7 @@ type TestProviderProps = {
   queryData?: { queryKey: any; data: Partial<Record<any, any>> | undefined }[];
   store?: MockStoreEnhanced<RootState | unknown>;
   route?: string;
+  history?: MemoryHistory;
 };
 
 /**
@@ -553,27 +554,35 @@ type TestProviderProps = {
  * @param state The app state used for testing
  * @param store The mock store
  * @param route The route for the test
+ * @param history The history object for navigation
  * @constructor
  */
 export const TestProvider = ({
   children,
   state = factory.rootState(),
   store,
   route = "/",
+  history = createMemoryHistory({ initialEntries: [route] }),
 }: TestProviderProps) => {
-  window.history.pushState({}, "Test page", route);
   const queryClient = new QueryClient({
     defaultOptions: { queries: { retry: false, staleTime: Infinity } },
   });
 
   const mockStore = store ?? configureStore()(state);
 
+  useEffect(() => {
+    const stopListening = history.listen(({ location }) => {
+      window.history.pushState({}, "", location.pathname + location.search);
+    });
+    return () => stopListening();
+  }, [history]);
+
   return (
     <QueryClientProvider client={queryClient}>
       <WebSocketProvider>
         <Provider store={mockStore}>
           <SidePanelContextProvider>
-            <BrowserRouter>{children}</BrowserRouter>
+            <HistoryRouter history={history}>{children}</HistoryRouter>
           </SidePanelContextProvider>
         </Provider>
       </WebSocketProvider>
@@ -589,20 +598,27 @@ export const TestProvider = ({
  */
 export const renderWithProviders = (
   ui: ReactNode,
-  options?: Omit<RenderOptions, "wrapper"> & Partial<TestProviderProps>
+  options?: Omit<RenderOptions, "wrapper"> &
+    Partial<TestProviderProps> & { history?: MemoryHistory }
 ) => {
-  const { state, queryData, store, ...renderOptions } = options ?? {};
-  return render(ui, {
-    wrapper: (props) => (
-      <TestProvider
-        {...props}
-        queryData={queryData}
-        state={state}
-        store={store}
-      />
-    ),
-    ...renderOptions,
-  });
+  const { state, queryData, store, history, ...renderOptions } = options ?? {};
+  const testHistory = history ?? createMemoryHistory();
+
+  return {
+    ...render(ui, {
+      wrapper: (props) => (
+        <TestProvider
+          {...props}
+          history={testHistory}
+          queryData={queryData}
+          state={state}
+          store={store}
+        />
+      ),
+      ...renderOptions,
+    }),
+    history: testHistory,
+  };
 };
 
 /**