refactor(kvm): Refactor RamResources to GenericTable MAASENG-5682 (#5866)

Author: abuyukyi101198

cypress/e2e/with-users/login/login.spec.ts

@@ -6,10 +6,6 @@ context("Login page", () => {
     cy.expandMainNavigation();
   });
 
-  it("is disabled by default", () => {
-    cy.findByRole("button", { name: "Login" }).should("be.disabled");
-  });
-
   it("displays an error message if submitted invalid login credentials", () => {
     cy.findByRole("textbox", { name: /Username/ }).type("invalid-username");
     cy.findByRole("button", { name: /Next/ }).click();

src/app/base/components/AppSideNavigation/AppSideNavigation.test.tsx

@@ -359,43 +359,6 @@ describe("GlobalSideNav", () => {
     ).toHaveAttribute("href", "/machines");
   });
 
-  it("redirects to the intro page if intro not completed", async () => {
-    state.config.items = [
-      factory.config({ name: ConfigNames.COMPLETED_INTRO, value: false }),
-    ];
-    renderWithProviders(<AppSideNavigation />, {
-      initialEntries: ["/machines"],
-      state,
-    });
-    await waitFor(() => {
-      expect(authResolvers.getCurrentUser.resolved).toBe(true);
-    });
-    await waitFor(() => {
-      expect(mockUseNavigate.mock.calls[0][0].pathname).toBe(urls.intro.index);
-    });
-  });
-
-  it("redirects to the user intro page if user intro not completed", async () => {
-    state.config.items = [
-      factory.config({ name: ConfigNames.COMPLETED_INTRO, value: true }),
-    ];
-    mockServer.use(
-      authResolvers.getCurrentUser.handler(
-        factory.user({ completed_intro: false })
-      )
-    );
-    renderWithProviders(<AppSideNavigation />, {
-      initialEntries: ["/machines"],
-      state,
-    });
-    await waitFor(() => {
-      expect(authResolvers.getCurrentUser.resolved).toBe(true);
-    });
-    await waitFor(() => {
-      expect(mockUseNavigate.mock.calls[0][0].pathname).toBe(urls.intro.user);
-    });
-  });
-
   it("does not redirect if the intro is being displayed", async () => {
     state.config.items = [
       factory.config({ name: ConfigNames.COMPLETED_INTRO, value: false }),

src/app/base/components/AppSideNavigation/AppSideNavigation.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 
 import { Navigation, NavigationBar } from "@canonical/maas-react-components";
 import {
@@ -9,7 +9,7 @@ import {
   Tooltip,
 } from "@canonical/react-components";
 import { useSelector } from "react-redux";
-import { useLocation, useMatch, useNavigate } from "react-router";
+import { useLocation } from "react-router";
 import { useStorageState } from "react-storage-hooks";
 
 import { useLogout } from "../../hooks/logout";
@@ -29,9 +29,6 @@ import {
 } from "@/app/base/hooks";
 import { useGlobalKeyShortcut } from "@/app/base/hooks/base";
 import { useThemeContext } from "@/app/base/theme-context";
-import type { SyncNavigateFunction } from "@/app/base/types";
-import urls from "@/app/base/urls";
-import configSelectors from "@/app/store/config/selectors";
 import { controllerActions } from "@/app/store/controller";
 import controllerSelectors from "@/app/store/controller/selectors";
 import { podActions } from "@/app/store/pod";
@@ -136,46 +133,19 @@ export const AppSideNavigation = ({
 );
 
 const AppSideNavigationContainer = (): React.ReactElement => {
-  const navigate: SyncNavigateFunction = useNavigate();
   const location = useLocation();
-  const configLoaded = useSelector(configSelectors.loaded);
   const path = location.pathname;
   const user = useGetCurrentUser();
   const completedIntro = useCompletedIntro();
   const completedUserIntro = useCompletedUserIntro();
   const isAuthenticated = !!user.data;
-  const introMatch = useMatch({ path: urls.intro.index, end: false });
-  const isAtIntro = !!introMatch;
   const showLinks = isAuthenticated && completedIntro && completedUserIntro;
   useGoogleAnalytics();
 
   const logout = useLogout();
 
   const [isDarkMode, toggleDarkMode] = useDarkMode();
 
-  // Redirect to the intro pages if not completed.
-  useEffect(() => {
-    // Check that we're not already at the intro to allow navigation through the
-    // intro pages. This is necessary beacuse this useEffect runs every time
-    // there is a navigation change as the `navigate` function is regenerated
-    // for every route change, see:
-    // https://github.com/remix-run/react-router/issues/7634
-    if (!isAtIntro && configLoaded) {
-      if (!completedIntro) {
-        navigate({ pathname: urls.intro.index }, { replace: true });
-      } else if (isAuthenticated && !completedUserIntro) {
-        navigate({ pathname: urls.intro.user }, { replace: true });
-      }
-    }
-  }, [
-    completedIntro,
-    completedUserIntro,
-    configLoaded,
-    isAtIntro,
-    isAuthenticated,
-    navigate,
-  ]);
-
   useFetchActions([controllerActions.fetch]);
 
   useFetchActions([podActions.fetch]);

src/app/kvm/components/LXDHostVMs/NumaResources/NumaResourcesCard/NumaResourcesCard.test.tsx

@@ -1,13 +1,8 @@
-import configureStore from "redux-mock-store";
-
 import NumaResourcesCard from "./NumaResourcesCard";
 
 import { machineActions } from "@/app/store/machine";
-import type { RootState } from "@/app/store/root/types";
 import * as factory from "@/testing/factories";
-import { renderWithMockStore, screen, within } from "@/testing/utils";
-
-const mockStore = configureStore<RootState>();
+import { renderWithProviders, screen, within } from "@/testing/utils";
 
 describe("NumaResourcesCard", () => {
   afterEach(() => {
@@ -25,11 +20,12 @@ describe("NumaResourcesCard", () => {
     const state = factory.rootState({
       pod: factory.podState({ items: [pod] }),
     });
-    const store = mockStore(state);
-
-    renderWithMockStore(<NumaResourcesCard numaId={111} podId={1} />, {
-      store,
-    });
+    const { store } = renderWithProviders(
+      <NumaResourcesCard numaId={111} podId={1} />,
+      {
+        state,
+      }
+    );
 
     const expectedAction = machineActions.fetch("mocked-nanoid");
     expect(
@@ -66,9 +62,11 @@ describe("NumaResourcesCard", () => {
       pod: factory.podState({ items: [pod] }),
     });
 
-    renderWithMockStore(<NumaResourcesCard numaId={11} podId={1} />, { state });
+    renderWithProviders(<NumaResourcesCard numaId={11} podId={1} />, { state });
 
-    const hugepagesData = screen.getByTestId("hugepages-data");
+    const hugepagesData = screen.getByRole("row", {
+      name: new RegExp(`^Hugepage`, "i"),
+    });
     expect(within(hugepagesData).getByText("(Size: 1KiB)")).toBeInTheDocument();
     expect(within(hugepagesData).getAllByRole("cell")[1]).toHaveTextContent(
       "5B"
@@ -96,7 +94,7 @@ describe("NumaResourcesCard", () => {
       pod: factory.podState({ items: [pod] }),
     });
 
-    renderWithMockStore(<NumaResourcesCard numaId={111} podId={1} />, {
+    renderWithProviders(<NumaResourcesCard numaId={111} podId={1} />, {
       state,
     });
 
@@ -138,9 +136,10 @@ describe("NumaResourcesCard", () => {
       machine: factory.machineState({ items: machines }),
       pod: factory.podState({ items: [pod] }),
     });
-    const store = mockStore(state);
-
-    renderWithMockStore(<NumaResourcesCard numaId={11} podId={1} />, { store });
+    const { store } = renderWithProviders(
+      <NumaResourcesCard numaId={11} podId={1} />,
+      { state }
+    );
 
     const expected = machineActions.fetch("mocked-nanoid");
     const result = store