fix: reserved ips treeshaking (#5418)

- update `StaticDHCPLease` type
- add required `subnetId` prop to `StaticDHCPLease`

src/app/store/subnet/hooks.ts

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+
 import { useSelector } from "react-redux";
 
 import { getHasIPAddresses } from "./utils";
@@ -7,6 +9,7 @@ import type { RootState } from "@/app/store/root/types";
 import { subnetActions } from "@/app/store/subnet";
 import subnetSelectors from "@/app/store/subnet/selectors";
 import type { Subnet, SubnetMeta } from "@/app/store/subnet/types";
+import type { StaticDHCPLease } from "@/app/store/subnet/types/base";
 import { vlanActions } from "@/app/store/vlan";
 import vlanSelectors from "@/app/store/vlan/selectors";
 
@@ -43,3 +46,27 @@ export const useCanBeDeleted = (id?: Subnet[SubnetMeta.PK] | null): boolean => {
 
   return !isDHCPEnabled || (isDHCPEnabled && !getHasIPAddresses(subnet));
 };
+
+export const useStaticDHCPLeases = (
+  _subnetId: Subnet[SubnetMeta.PK] | null
+) => {
+  const [staticDHCPLeases, setStaticDHCPLeases] = useState<StaticDHCPLease[]>(
+    []
+  );
+
+  // TODO: replace mock implementation with API call https://warthogs.atlassian.net/browse/MAASENG-2983
+  const fetchStaticDHCPLeases = async () => {
+    if (import.meta.env.VITE_APP_STATIC_IPS_ENABLED === "true") {
+      const { array } = await import("cooky-cutter");
+      const { staticDHCPLease } = await import("@/testing/factories/subnet");
+      return array(staticDHCPLease, 5)();
+    }
+    return [];
+  };
+
+  useEffect(() => {
+    fetchStaticDHCPLeases().then(setStaticDHCPLeases);
+  }, []);
+
+  return staticDHCPLeases;
+};

src/app/store/subnet/types/base.ts

@@ -128,11 +128,11 @@ export type SubnetState = GenericState<Subnet, APIError> & {
 
 export type StaticDHCPLease = {
   id: number;
-  comment?: string | null;
+  comment: string | null;
   ip_address: string;
   mac_address: string;
-  interface?: string | null;
-  node?: SimpleNode | null;
+  interface: string | null;
+  node: SimpleNode | null;
   usage?: string | null;
   owner: string;
 };

src/app/subnets/views/SubnetDetails/StaticDHCPLease/StaticDHCPLease.test.tsx

@@ -3,7 +3,7 @@ import StaticDHCPLease from "./StaticDHCPLease";
 import { renderWithBrowserRouter, screen } from "@/testing/utils";
 
 it("renders", () => {
-  renderWithBrowserRouter(<StaticDHCPLease />);
+  renderWithBrowserRouter(<StaticDHCPLease subnetId={1} />);
   expect(
     screen.getByRole("heading", { name: "Static DHCP leases" })
   ).toBeInTheDocument();

src/app/subnets/views/SubnetDetails/StaticDHCPLease/StaticDHCPLease.tsx

@@ -1,16 +1,21 @@
 import { MainToolbar } from "@canonical/maas-react-components";
 import { Button } from "@canonical/react-components";
-import { array } from "cooky-cutter";
 
 import { SubnetActionTypes, SubnetDetailsSidePanelViews } from "../constants";
 
 import { useSidePanel } from "@/app/base/side-panel-context";
+import { useStaticDHCPLeases } from "@/app/store/subnet/hooks";
+import type { SubnetMeta } from "@/app/store/subnet/types";
+import type { Subnet } from "@/app/store/subnet/types/base";
 import StaticDHCPTable from "@/app/subnets/views/SubnetDetails/StaticDHCPLease/StaticDHCPTable";
-import { staticDHCPLease } from "@/testing/factories/subnet";
 
-const StaticDHCPLease = () => {
+type StaticDHCPLeaseProps = {
+  subnetId: Subnet[SubnetMeta.PK] | null;
+};
+
+const StaticDHCPLease = ({ subnetId }: StaticDHCPLeaseProps) => {
   const { setSidePanelContent } = useSidePanel();
-  const getMockStaticDHCPLeases = array(staticDHCPLease, 5);
+  const staticDHCPLeases = useStaticDHCPLeases(subnetId);
 
   return (
     <>
@@ -31,7 +36,7 @@ const StaticDHCPLease = () => {
           </Button>
         </MainToolbar.Controls>
       </MainToolbar>
-      <StaticDHCPTable staticDHCPLeases={getMockStaticDHCPLeases()} />
+      <StaticDHCPTable staticDHCPLeases={staticDHCPLeases} />
     </>
   );
 };

src/app/subnets/views/SubnetDetails/SubnetDetails.tsx

@@ -124,7 +124,7 @@ const SubnetDetails = (): JSX.Element => {
           element={
             <>
               {import.meta.env.VITE_APP_STATIC_IPS_ENABLED === "true" && (
-                <StaticDHCPLease />
+                <StaticDHCPLease subnetId={id} />
               )}
               <ReservedRanges subnetId={id} />
             </>