feat(networks): Add list views for VLANs, Fabrics, and Spaces (#5849)

- Created list views for:
  - Fabrics
  - VLANs
  - Spaces
- Renamed `subnets` directory to `networks`
- Refactored networks directory to follow best practices
- Introduced query hooks for
  - Spaces list
  - Fabrics list
- Renamed "Subnets" in side nav to "Networks"
- Moved subnets list URL to `/networks/subnets`

Author: ndv99

.github/workflows/pr-lint.yml

@@ -29,12 +29,12 @@ jobs:
             kvm
             machines
             networkDiscovery
+            networks
             pools
             preferences
             racks
             settings
             store
-            subnets
             tags
             utils
             zones

cypress/e2e/with-users/base/navigation.spec.ts

@@ -109,7 +109,7 @@ context("Navigation - admin", () => {
     { destinationUrl: "/kvm/lxd", linkLabel: "LXD" },
     { destinationUrl: "/images", linkLabel: "Images" },
     { destinationUrl: "/domains", linkLabel: "DNS" },
-    { destinationUrl: "/networks", linkLabel: "Subnets" },
+    { destinationUrl: "/networks", linkLabel: "Networks" },
     {
       destinationUrl: "/settings/configuration/general",
       linkLabel: "Settings",

…press/e2e/with-users/subnets/add.spec.ts …ress/e2e/with-users/networks/add.spec.tscypress/e2e/with-users/subnets/add.spec.ts renamed to cypress/e2e/with-users/networks/add.spec.ts cypress/e2e/with-users/subnets/add.spec.ts renamed to cypress/e2e/with-users/networks/add.spec.ts

@@ -3,13 +3,13 @@ import { generateMAASURL } from "../../utils";
 context("Subnets", () => {
   beforeEach(() => {
     cy.login();
-    cy.visit(generateMAASURL("/networks?by=fabric"));
+    cy.visit(generateMAASURL("/networks/subnets?by=fabric"));
     cy.waitForPageToLoad();
     cy.viewport("macbook-11");
   });
 
   it("renders the correct heading", () => {
-    cy.findByRole("heading", { level: 1 }).contains("Subnets");
+    cy.findByRole("heading", { level: 1 }).contains("Networks");
   });
 
   it("displays the main networking view correctly", () => {
@@ -36,7 +36,7 @@ context("Subnets", () => {
       "fabric"
     );
 
-    cy.url().should("include", generateMAASURL("/networks?by=fabric"));
+    cy.url().should("include", generateMAASURL("/networks/subnets?by=fabric"));
   });
 
   it("allows grouping by fabric and space", () => {
@@ -62,6 +62,6 @@ context("Subnets", () => {
       cy.get("tbody tr").first().should("include.text", "space");
     });
 
-    cy.url().should("include", generateMAASURL("/networks?by=space"));
+    cy.url().should("include", generateMAASURL("/networks/subnets?by=space"));
   });
 });

…/with-users/subnets/staticroutes.spec.ts …with-users/networks/staticroutes.spec.tscypress/e2e/with-users/subnets/staticroutes.spec.ts renamed to cypress/e2e/with-users/networks/staticroutes.spec.ts cypress/e2e/with-users/subnets/staticroutes.spec.ts renamed to cypress/e2e/with-users/networks/staticroutes.spec.ts

@@ -0,0 +1,21 @@
+import { useFabrics } from "./fabrics";
+
+import { fabricsResolvers, mockFabrics } from "@/testing/resolvers/fabrics";
+import {
+  renderHookWithProviders,
+  setupMockServer,
+  waitFor,
+} from "@/testing/utils";
+
+setupMockServer(fabricsResolvers.listFabrics.handler());
+
+describe("useFabrics", () => {
+  it("should return fabrics data", async () => {
+    const { result } = renderHookWithProviders(useFabrics);
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    expect(result.current.data).toMatchObject(mockFabrics);
+  });
+});

…s/e2e/with-users/subnets/subnets.spec.ts …/e2e/with-users/networks/subnets.spec.tscypress/e2e/with-users/subnets/subnets.spec.ts renamed to cypress/e2e/with-users/networks/subnets.spec.ts cypress/e2e/with-users/subnets/subnets.spec.ts renamed to cypress/e2e/with-users/networks/subnets.spec.ts

@@ -0,0 +1,22 @@
+import { queryOptionsWithHeaders } from "../utils";
+
+import { useWebsocketAwareQuery } from "./base";
+
+import type {
+  ListFabricsData,
+  ListFabricsErrors,
+  ListFabricsResponses,
+} from "@/app/apiclient";
+import { listFabrics } from "@/app/apiclient";
+import { listFabricsQueryKey } from "@/app/apiclient/@tanstack/react-query.gen";
+import type { Options } from "@/app/apiclient/client";
+
+export const useFabrics = (options?: Options<ListFabricsData>) => {
+  return useWebsocketAwareQuery(
+    queryOptionsWithHeaders<
+      ListFabricsResponses,
+      ListFabricsErrors,
+      ListFabricsData
+    >(options, listFabrics, listFabricsQueryKey(options))
+  );
+};

src/app/api/query/fabrics.test.ts

@@ -0,0 +1,21 @@
+import { useSpaces } from "./spaces";
+
+import { mockSpaces, spacesResolvers } from "@/testing/resolvers/spaces";
+import {
+  renderHookWithProviders,
+  setupMockServer,
+  waitFor,
+} from "@/testing/utils";
+
+setupMockServer(spacesResolvers.listSpaces.handler());
+
+describe("useSpaces", () => {
+  it("should return spaces data", async () => {
+    const { result } = renderHookWithProviders(useSpaces);
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    expect(result.current.data).toMatchObject(mockSpaces);
+  });
+});

src/app/api/query/fabrics.ts

@@ -0,0 +1,22 @@
+import { queryOptionsWithHeaders } from "../utils";
+
+import { useWebsocketAwareQuery } from "./base";
+
+import type {
+  ListSpacesData,
+  ListSpacesErrors,
+  ListSpacesResponses,
+  Options,
+} from "@/app/apiclient";
+import { listSpaces } from "@/app/apiclient";
+import { listSpacesQueryKey } from "@/app/apiclient/@tanstack/react-query.gen";
+
+export const useSpaces = (options?: Options<ListSpacesData>) => {
+  return useWebsocketAwareQuery(
+    queryOptionsWithHeaders<
+      ListSpacesResponses,
+      ListSpacesErrors,
+      ListSpacesData
+    >(options, listSpaces, listSpacesQueryKey(options))
+  );
+};

src/app/api/query/spaces.test.ts

@@ -9,13 +9,13 @@ import { statusActions } from "@/app/store/status";
 import * as factory from "@/testing/factories";
 import { authResolvers } from "@/testing/resolvers/auth";
 import {
-  userEvent,
-  screen,
-  waitFor,
-  within,
   renderWithBrowserRouter,
   renderWithProviders,
+  screen,
   setupMockServer,
+  userEvent,
+  waitFor,
+  within,
 } from "@/testing/utils";
 
 const mockUseNavigate = vi.fn();
@@ -218,7 +218,7 @@ describe("GlobalSideNav", () => {
 
   it("can highlight a url with a query param", async () => {
     renderWithProviders(<AppSideNavigation />, {
-      initialEntries: ["/networks?by=fabric"],
+      initialEntries: ["/networks/subnets?by=fabric"],
       state,
     });
 
@@ -227,7 +227,7 @@ describe("GlobalSideNav", () => {
     });
     const currentMenuItem = screen.getAllByRole("link", { current: "page" })[0];
     expect(currentMenuItem).toBeInTheDocument();
-    expect(currentMenuItem).toHaveTextContent("Subnets");
+    expect(currentMenuItem).toHaveTextContent("Networks");
   });
 
   it("highlights sub-urls", async () => {