fix: VLAN reserve range side panels (#5389)

canonical · Apr 8, 2024 · a0347b4 · a0347b4
1 parent 6590312
commit a0347b4
Show file tree

Hide file tree

Showing 35 changed files with 238 additions and 118 deletions.
diff --git a/src/app/subnets/components/ReservedRangeDeleteForm/ReservedRangeDeleteForm.tsx b/src/app/subnets/components/ReservedRangeDeleteForm/ReservedRangeDeleteForm.tsx
@@ -1,18 +1,14 @@
 import { useDispatch, useSelector } from "react-redux";
 
 import ModelActionForm from "@/app/base/components/ModelActionForm";
-import {
-  useSidePanel,
-  type SetSidePanelContent,
-} from "@/app/base/side-panel-context";
+import { useSidePanel } from "@/app/base/side-panel-context";
 import { ipRangeActions } from "@/app/store/iprange";
 import ipRangeSelectors from "@/app/store/iprange/selectors";
+import type { VLANActionFormProps } from "@/app/subnets/views/VLANDetails/VLANActionForms/VLANActionForms";
 
-type Props = {
-  setActiveForm: SetSidePanelContent;
-};
-
-const ReservedRangeDeleteForm = ({ setActiveForm }: Props) => {
+const ReservedRangeDeleteForm = ({
+  setSidePanelContent,
+}: Pick<VLANActionFormProps, "setSidePanelContent">) => {
   const dispatch = useDispatch();
   const { sidePanelContent } = useSidePanel();
   const saved = useSelector(ipRangeSelectors.saved);
@@ -32,10 +28,13 @@ const ReservedRangeDeleteForm = ({ setActiveForm }: Props) => {
       initialValues={{}}
       message="Ensure all in-use IP addresses are registered in MAAS before releasing this range to avoid potential collisions. Are you sure you want to remove this IP range?"
       modelType="IP range"
-      onCancel={() => setActiveForm(null)}
+      onCancel={() => setSidePanelContent(null)}
       onSubmit={() => {
         dispatch(ipRangeActions.delete(ipRangeId));
       }}
+      onSuccess={() => {
+        setSidePanelContent(null);
+      }}
       saved={saved}
       saving={saving}
     />

diff --git a/src/app/subnets/components/ReservedRangeForm/ReservedRangeForm.test.tsx b/src/app/subnets/components/ReservedRangeForm/ReservedRangeForm.test.tsx
@@ -45,7 +45,10 @@ describe("ReservedRangeForm", () => {
         <MemoryRouter
           initialEntries={[{ pathname: "/machines", key: "testKey" }]}
         >
-          <ReservedRangeForm ipRangeId={ipRange.id} setActiveForm={vi.fn()} />
+          <ReservedRangeForm
+            ipRangeId={ipRange.id}
+            setSidePanelContent={vi.fn()}
+          />
         </MemoryRouter>
       </Provider>
     );
@@ -59,7 +62,7 @@ describe("ReservedRangeForm", () => {
         <MemoryRouter
           initialEntries={[{ pathname: "/machines", key: "testKey" }]}
         >
-          <ReservedRangeForm setActiveForm={vi.fn()} />
+          <ReservedRangeForm setSidePanelContent={vi.fn()} />
         </MemoryRouter>
       </Provider>
     );
@@ -73,7 +76,10 @@ describe("ReservedRangeForm", () => {
         <MemoryRouter
           initialEntries={[{ pathname: "/machines", key: "testKey" }]}
         >
-          <ReservedRangeForm ipRangeId={ipRange.id} setActiveForm={vi.fn()} />
+          <ReservedRangeForm
+            ipRangeId={ipRange.id}
+            setSidePanelContent={vi.fn()}
+          />
         </MemoryRouter>
       </Provider>
     );
@@ -98,7 +104,10 @@ describe("ReservedRangeForm", () => {
         <MemoryRouter
           initialEntries={[{ pathname: "/machines", key: "testKey" }]}
         >
-          <ReservedRangeForm ipRangeId={ipRange.id} setActiveForm={vi.fn()} />
+          <ReservedRangeForm
+            ipRangeId={ipRange.id}
+            setSidePanelContent={vi.fn()}
+          />
         </MemoryRouter>
       </Provider>
     );
@@ -119,8 +128,8 @@ describe("ReservedRangeForm", () => {
         >
           <ReservedRangeForm
             createType={IPRangeType.Reserved}
-            id={1}
-            setActiveForm={vi.fn()}
+            setSidePanelContent={vi.fn()}
+            subnetId={1}
           />
         </MemoryRouter>
       </Provider>
@@ -159,7 +168,10 @@ describe("ReservedRangeForm", () => {
         <MemoryRouter
           initialEntries={[{ pathname: "/machines", key: "testKey" }]}
         >
-          <ReservedRangeForm ipRangeId={ipRange.id} setActiveForm={vi.fn()} />
+          <ReservedRangeForm
+            ipRangeId={ipRange.id}
+            setSidePanelContent={vi.fn()}
+          />
         </MemoryRouter>
       </Provider>
     );
@@ -189,7 +201,10 @@ describe("ReservedRangeForm", () => {
         <MemoryRouter
           initialEntries={[{ pathname: "/machines", key: "testKey" }]}
         >
-          <ReservedRangeForm ipRangeId={ipRange.id} setActiveForm={vi.fn()} />
+          <ReservedRangeForm
+            ipRangeId={ipRange.id}
+            setSidePanelContent={vi.fn()}
+          />
         </MemoryRouter>
       </Provider>
     );
@@ -222,7 +237,7 @@ describe("ReservedRangeForm", () => {
         >
           <ReservedRangeForm
             createType={IPRangeType.Dynamic}
-            setActiveForm={vi.fn()}
+            setSidePanelContent={vi.fn()}
           />
         </MemoryRouter>
       </Provider>
@@ -233,10 +248,13 @@ describe("ReservedRangeForm", () => {
   });
 
   it("displays an error when start and end IP addresses are not provided", async () => {
-    renderWithBrowserRouter(<ReservedRangeForm setActiveForm={vi.fn()} />, {
-      state,
-      route: "/machines",
-    });
+    renderWithBrowserRouter(
+      <ReservedRangeForm setSidePanelContent={vi.fn()} />,
+      {
+        state,
+        route: "/machines",
+      }
+    );
     await userEvent.click(
       screen.getByRole("textbox", { name: Labels.StartIp })
     );

diff --git a/src/app/subnets/components/ReservedRangeForm/ReservedRangeForm.tsx b/src/app/subnets/components/ReservedRangeForm/ReservedRangeForm.tsx
@@ -21,8 +21,8 @@ import { isId } from "@/app/utils";
 type Props = {
   createType?: IPRangeType;
   ipRangeId?: IPRange[IPRangeMeta.PK] | null;
-  setActiveForm: SetSidePanelContent;
-  id?: Subnet[SubnetMeta.PK] | null;
+  setSidePanelContent: SetSidePanelContent;
+  subnetId?: Subnet[SubnetMeta.PK] | null;
 };
 
 export type FormValues = {
@@ -48,8 +48,8 @@ const Schema = Yup.object().shape({
 const ReservedRangeForm = ({
   createType,
   ipRangeId,
-  setActiveForm,
-  id,
+  setSidePanelContent,
+  subnetId,
   ...props
 }: Props): JSX.Element | null => {
   const dispatch = useDispatch();
@@ -69,7 +69,7 @@ const ReservedRangeForm = ({
   const errors = useSelector(ipRangeSelectors.errors);
   const cleanup = useCallback(() => ipRangeActions.cleanup(), []);
   const isEditing = isId(computedIpRangeId);
-  const onClose = () => setActiveForm(null);
+  const onClose = () => setSidePanelContent(null);
   let computedCreateType = createType;
   if (!createType) {
     computedCreateType =
@@ -115,7 +115,7 @@ const ReservedRangeForm = ({
         if (!isEditing && computedCreateType) {
           dispatch(
             ipRangeActions.create({
-              subnet: id,
+              subnet: subnetId,
               type: computedCreateType,
               ...values,
             })

diff --git a/...p/subnets/views/SubnetDetails/StaticRoutes/AddStaticRouteForm/AddStaticRouteForm.test.tsx b/...p/subnets/views/SubnetDetails/StaticRoutes/AddStaticRouteForm/AddStaticRouteForm.test.tsx
@@ -36,7 +36,10 @@ it("dispatches a correct action on add static route form submit", async () => {
   render(
     <Provider store={store}>
       <MemoryRouter initialEntries={[{ pathname: "/" }]}>
-        <AddStaticRouteForm id={subnet.id} setActiveForm={vi.fn()} />
+        <AddStaticRouteForm
+          setSidePanelContent={vi.fn()}
+          subnetId={subnet.id}
+        />
       </MemoryRouter>
     </Provider>
   );

diff --git a/src/app/subnets/views/SubnetDetails/StaticRoutes/AddStaticRouteForm/AddStaticRouteForm.tsx b/src/app/subnets/views/SubnetDetails/StaticRoutes/AddStaticRouteForm/AddStaticRouteForm.tsx
@@ -38,23 +38,23 @@ const addStaticRouteSchema = Yup.object().shape({
 });
 
 export type Props = {
-  id: Subnet[SubnetMeta.PK];
-  setActiveForm: SetSidePanelContent;
+  subnetId: Subnet[SubnetMeta.PK];
+  setSidePanelContent: SetSidePanelContent;
 };
 const AddStaticRouteForm = ({
-  id,
-  setActiveForm,
+  subnetId,
+  setSidePanelContent,
 }: Props): JSX.Element | null => {
   const staticRouteErrors = useSelector(staticRouteSelectors.errors);
   const saving = useSelector(staticRouteSelectors.saving);
   const saved = useSelector(staticRouteSelectors.saved);
   const dispatch = useDispatch();
-  const handleClose = () => setActiveForm(null);
+  const handleClose = () => setSidePanelContent(null);
   const staticRoutesLoading = useSelector(staticRouteSelectors.loading);
   const subnetsLoading = useSelector(subnetSelectors.loading);
   const loading = staticRoutesLoading || subnetsLoading;
   const source = useSelector((state: RootState) =>
-    subnetSelectors.getById(state, id)
+    subnetSelectors.getById(state, subnetId)
   );
 
   useFetchActions([subnetActions.fetch]);
@@ -69,7 +69,7 @@ const AddStaticRouteForm = ({
       cleanup={staticRouteActions.cleanup}
       errors={staticRouteErrors}
       initialValues={{
-        source: id,
+        source: subnetId,
         gateway_ip: "",
         destination: "",
         metric: "0",
@@ -84,7 +84,7 @@ const AddStaticRouteForm = ({
         dispatch(staticRouteActions.cleanup());
         dispatch(
           staticRouteActions.create({
-            source: id,
+            source: subnetId,
             gateway_ip,
             destination: toFormikNumber(destination) as number,
             metric: toFormikNumber(metric),

diff --git a/...ets/views/SubnetDetails/StaticRoutes/DeleteStaticRouteform/DeleteStaticRouteForm.test.tsx b/...ets/views/SubnetDetails/StaticRoutes/DeleteStaticRouteform/DeleteStaticRouteForm.test.tsx
@@ -33,7 +33,7 @@ state = factory.rootState({
 it("renders", () => {
   renderWithBrowserRouter(
     <DeleteStaticRouteForm
-      setActiveForm={vi.fn()}
+      setSidePanelContent={vi.fn()}
       staticRouteId={staticroute.id}
     />,
     { state }
@@ -46,7 +46,7 @@ it("dispatches the correct action to delete a static route", async () => {
   const store = mockStore(state);
   renderWithBrowserRouter(
     <DeleteStaticRouteForm
-      setActiveForm={vi.fn()}
+      setSidePanelContent={vi.fn()}
       staticRouteId={staticroute.id}
     />,
     { store }

diff --git a/.../subnets/views/SubnetDetails/StaticRoutes/DeleteStaticRouteform/DeleteStaticRouteForm.tsx b/.../subnets/views/SubnetDetails/StaticRoutes/DeleteStaticRouteform/DeleteStaticRouteForm.tsx
@@ -11,10 +11,13 @@ import type {
 
 type Props = {
   staticRouteId?: StaticRoute[StaticRouteMeta.PK];
-  setActiveForm: SetSidePanelContent;
+  setSidePanelContent: SetSidePanelContent;
 };
 
-const DeleteStaticRouteForm = ({ staticRouteId, setActiveForm }: Props) => {
+const DeleteStaticRouteForm = ({
+  staticRouteId,
+  setSidePanelContent,
+}: Props) => {
   const dispatch = useDispatch();
   const saved = useSelector(staticRouteSelectors.saved);
   const saving = useSelector(staticRouteSelectors.saving);
@@ -27,12 +30,12 @@ const DeleteStaticRouteForm = ({ staticRouteId, setActiveForm }: Props) => {
       aria-label="Confirm static route deletion"
       initialValues={{}}
       modelType="static route"
-      onCancel={() => setActiveForm(null)}
+      onCancel={() => setSidePanelContent(null)}
       onSubmit={() => {
         dispatch(staticRouteActions.delete(staticRouteId));
       }}
       onSuccess={() => {
-        setActiveForm(null);
+        setSidePanelContent(null);
       }}
       saved={saved}
       saving={saving}

diff --git a/...subnets/views/SubnetDetails/StaticRoutes/EditStaticRouteForm/EditStaticRouteForm.test.tsx b/...subnets/views/SubnetDetails/StaticRoutes/EditStaticRouteForm/EditStaticRouteForm.test.tsx
@@ -28,7 +28,7 @@ it("displays loading text on load", async () => {
   render(
     <Provider store={store}>
       <MemoryRouter initialEntries={[{ pathname: "/" }]}>
-        <EditStaticRouteForm setActiveForm={vi.fn()} staticRouteId={1} />
+        <EditStaticRouteForm setSidePanelContent={vi.fn()} staticRouteId={1} />
       </MemoryRouter>
     </Provider>
   );
@@ -70,7 +70,7 @@ it("dispatches a correct action on edit static route form submit", async () => {
     <Provider store={store}>
       <MemoryRouter initialEntries={[{ pathname: "/" }]}>
         <EditStaticRouteForm
-          setActiveForm={vi.fn()}
+          setSidePanelContent={vi.fn()}
           staticRouteId={staticRoute.id}
         />
       </MemoryRouter>

diff --git a/src/app/subnets/views/SubnetDetails/StaticRoutes/EditStaticRouteForm/EditStaticRouteForm.tsx b/src/app/subnets/views/SubnetDetails/StaticRoutes/EditStaticRouteForm/EditStaticRouteForm.tsx
@@ -40,17 +40,17 @@ const editStaticRouteSchema = Yup.object().shape({
 
 export type Props = {
   staticRouteId?: StaticRoute[StaticRouteMeta.PK];
-  setActiveForm: SetSidePanelContent;
+  setSidePanelContent: SetSidePanelContent;
 };
 const EditStaticRouteForm = ({
   staticRouteId,
-  setActiveForm,
+  setSidePanelContent,
 }: Props): JSX.Element | null => {
   const staticRouteErrors = useSelector(staticRouteSelectors.errors);
   const saving = useSelector(staticRouteSelectors.saving);
   const saved = useSelector(staticRouteSelectors.saved);
   const dispatch = useDispatch();
-  const handleClose = () => setActiveForm(null);
+  const handleClose = () => setSidePanelContent(null);
   const staticRoutesLoading = useSelector(staticRouteSelectors.loading);
   const subnetsLoading = useSelector(subnetSelectors.loading);
   const loading = staticRoutesLoading || subnetsLoading;

diff --git a/...r/SubnetActionForms/SubnetActionForms.tsx → ...s/SubnetActionForms/SubnetActionForms.tsx b/...r/SubnetActionForms/SubnetActionForms.tsx → ...s/SubnetActionForms/SubnetActionForms.tsx
@@ -1,6 +1,6 @@
-import AddStaticRouteForm from "../../StaticRoutes/AddStaticRouteForm";
-import DeleteStaticRouteForm from "../../StaticRoutes/DeleteStaticRouteform";
-import EditStaticRouteForm from "../../StaticRoutes/EditStaticRouteForm";
+import AddStaticRouteForm from "../StaticRoutes/AddStaticRouteForm";
+import DeleteStaticRouteForm from "../StaticRoutes/DeleteStaticRouteform";
+import EditStaticRouteForm from "../StaticRoutes/EditStaticRouteForm";
 
 import DeleteSubnet from "./components/DeleteSubnet";
 import EditBootArchitectures from "./components/EditBootArchitectures";
@@ -16,7 +16,7 @@ import type {
 
 const FormComponents: Record<
   SubnetAction,
-  ({ activeForm, setActiveForm }: SubnetActionProps) => JSX.Element | null
+  ({ activeForm, setSidePanelContent }: SubnetActionProps) => JSX.Element | null
 > = {
   [SubnetActionTypes.MapSubnet]: MapSubnet,
   [SubnetActionTypes.EditBootArchitectures]: EditBootArchitectures,
@@ -29,19 +29,19 @@ const FormComponents: Record<
 };
 
 const SubnetActionForms = ({
-  id,
+  subnetId,
   activeForm,
-  setActiveForm,
+  setSidePanelContent,
   staticRouteId,
 }: SubnetActionProps): JSX.Element => {
   const FormComponent = activeForm ? FormComponents[activeForm] : () => null;
 
   return (
     <FormComponent
       activeForm={activeForm}
-      id={id}
-      setActiveForm={setActiveForm}
+      setSidePanelContent={setSidePanelContent}
       staticRouteId={staticRouteId}
+      subnetId={subnetId}
     />
   );
 };