fix: static routes edit and delete lp#2060176 lp#2060177

src/app/subnets/views/SubnetDetails/StaticRoutes/DeleteStaticRouteform/DeleteStaticRouteForm.test.tsx

@@ -12,6 +12,7 @@ const mockStore = configureStore<RootState>();
 
 const subnet = factory.subnet({ id: 1, cidr: "172.16.1.0/24" });
 const destinationSubnet = factory.subnet({ id: 2, cidr: "223.16.1.0/24" });
+const staticroute = factory.staticRoute({ id: 1, subnet: subnet.id });
 state = factory.rootState({
   user: factory.userState({
     auth: factory.authState({
@@ -21,7 +22,7 @@ state = factory.rootState({
   }),
   staticroute: factory.staticRouteState({
     loaded: true,
-    items: [],
+    items: [staticroute],
   }),
   subnet: factory.subnetState({
     loaded: true,
@@ -31,7 +32,10 @@ state = factory.rootState({
 
 it("renders", () => {
   renderWithBrowserRouter(
-    <DeleteStaticRouteForm id={subnet.id} setActiveForm={vi.fn()} />,
+    <DeleteStaticRouteForm
+      setActiveForm={vi.fn()}
+      staticRouteId={staticroute.id}
+    />,
     { state }
   );
 
@@ -41,7 +45,10 @@ it("renders", () => {
 it("dispatches the correct action to delete a static route", async () => {
   const store = mockStore(state);
   renderWithBrowserRouter(
-    <DeleteStaticRouteForm id={subnet.id} setActiveForm={vi.fn()} />,
+    <DeleteStaticRouteForm
+      setActiveForm={vi.fn()}
+      staticRouteId={staticroute.id}
+    />,
     { store }
   );
 
@@ -51,5 +58,5 @@ it("dispatches the correct action to delete a static route", async () => {
     .getActions()
     .find((action) => action.type === staticRouteActions.delete.type);
 
-  expect(action).toStrictEqual(staticRouteActions.delete(subnet.id));
+  expect(action).toStrictEqual(staticRouteActions.delete(staticroute.id));
 });

src/app/subnets/views/SubnetDetails/StaticRoutes/DeleteStaticRouteform/DeleteStaticRouteForm.tsx

@@ -4,25 +4,35 @@ import ModelActionForm from "@/app/base/components/ModelActionForm";
 import type { SetSidePanelContent } from "@/app/base/side-panel-context";
 import { staticRouteActions } from "@/app/store/staticroute";
 import staticRouteSelectors from "@/app/store/staticroute/selectors";
-import type { Subnet, SubnetMeta } from "@/app/store/subnet/types";
+import type {
+  StaticRoute,
+  StaticRouteMeta,
+} from "@/app/store/staticroute/types";
 
 type Props = {
-  id: Subnet[SubnetMeta.PK];
+  staticRouteId?: StaticRoute[StaticRouteMeta.PK];
   setActiveForm: SetSidePanelContent;
 };
 
-const DeleteStaticRouteForm = ({ id, setActiveForm }: Props) => {
+const DeleteStaticRouteForm = ({ staticRouteId, setActiveForm }: Props) => {
   const dispatch = useDispatch();
   const saved = useSelector(staticRouteSelectors.saved);
   const saving = useSelector(staticRouteSelectors.saving);
+
+  if (!staticRouteId) {
+    return null;
+  }
   return (
     <ModelActionForm
       aria-label="Confirm static route deletion"
       initialValues={{}}
       modelType="static route"
       onCancel={() => setActiveForm(null)}
       onSubmit={() => {
-        dispatch(staticRouteActions.delete(id));
+        dispatch(staticRouteActions.delete(staticRouteId));
+      }}
+      onSuccess={() => {
+        setActiveForm(null);
       }}
       saved={saved}
       saving={saving}

src/app/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 id={1} setActiveForm={vi.fn()} />
+        <EditStaticRouteForm setActiveForm={vi.fn()} staticRouteId={1} />
       </MemoryRouter>
     </Provider>
   );
@@ -69,7 +69,10 @@ it("dispatches a correct action on edit static route form submit", async () => {
   render(
     <Provider store={store}>
       <MemoryRouter initialEntries={[{ pathname: "/" }]}>
-        <EditStaticRouteForm id={staticRoute.id} setActiveForm={vi.fn()} />
+        <EditStaticRouteForm
+          setActiveForm={vi.fn()}
+          staticRouteId={staticRoute.id}
+        />
       </MemoryRouter>
     </Provider>
   );

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

@@ -39,11 +39,11 @@ const editStaticRouteSchema = Yup.object().shape({
 });
 
 export type Props = {
-  id: StaticRoute[StaticRouteMeta.PK];
+  staticRouteId?: StaticRoute[StaticRouteMeta.PK];
   setActiveForm: SetSidePanelContent;
 };
 const EditStaticRouteForm = ({
-  id,
+  staticRouteId,
   setActiveForm,
 }: Props): JSX.Element | null => {
   const staticRouteErrors = useSelector(staticRouteSelectors.errors);
@@ -55,7 +55,7 @@ const EditStaticRouteForm = ({
   const subnetsLoading = useSelector(subnetSelectors.loading);
   const loading = staticRoutesLoading || subnetsLoading;
   const staticRoute = useSelector((state: RootState) =>
-    staticRouteSelectors.getById(state, id)
+    staticRouteSelectors.getById(state, staticRouteId)
   );
   const source = useSelector((state: RootState) =>
     subnetSelectors.getById(state, staticRoute?.source)
@@ -90,7 +90,7 @@ const EditStaticRouteForm = ({
         dispatch(staticRouteActions.cleanup());
         dispatch(
           staticRouteActions.update({
-            id: id,
+            id: staticRouteId,
             source: staticRoute.source,
             gateway_ip,
             destination: toFormikNumber(destination) as number,

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

@@ -67,13 +67,15 @@ const generateRows = (
                   view: SubnetDetailsSidePanelViews[
                     SubnetActionTypes.DeleteStaticRoute
                   ],
+                  extras: { staticRouteId: staticRoute.id },
                 });
               }}
               onEdit={() => {
                 setSidePanelContent({
                   view: SubnetDetailsSidePanelViews[
                     SubnetActionTypes.EditStaticRoute
                   ],
+                  extras: { staticRouteId: staticRoute.id },
                 });
               }}
             />

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

@@ -88,6 +88,7 @@ const SubnetDetails = (): JSX.Element => {
             activeForm={activeForm}
             id={subnet.id}
             setActiveForm={setSidePanelContent}
+            {...sidePanelContent?.extras}
           />
         ) : null
       }

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

@@ -32,6 +32,7 @@ const SubnetActionForms = ({
   id,
   activeForm,
   setActiveForm,
+  staticRouteId,
 }: SubnetActionProps): JSX.Element => {
   const FormComponent = activeForm ? FormComponents[activeForm] : () => null;
 
@@ -40,6 +41,7 @@ const SubnetActionForms = ({
       activeForm={activeForm}
       id={id}
       setActiveForm={setActiveForm}
+      staticRouteId={staticRouteId}
     />
   );
 };

src/app/subnets/views/SubnetDetails/constants.ts

@@ -47,5 +47,5 @@ export const SubnetDetailsSidePanelViews = {
 
 export type SubnetDetailsSidePanelContent = SidePanelContent<
   ValueOf<typeof SubnetDetailsSidePanelViews>,
-  { createType?: IPRangeType; ipRangeId?: number }
+  { createType?: IPRangeType; ipRangeId?: number; staticRouteId?: number }
 >;

src/app/subnets/views/SubnetDetails/types.ts

@@ -1,12 +1,17 @@
 import type { SubnetActionTypes } from "./constants";
 
 import type { SetSidePanelContent } from "@/app/base/side-panel-context";
+import type {
+  StaticRoute,
+  StaticRouteMeta,
+} from "@/app/store/staticroute/types";
 import type { Subnet, SubnetMeta } from "@/app/store/subnet/types";
 
 export type SubnetAction = keyof typeof SubnetActionTypes;
 
 export interface SubnetActionProps {
   id: Subnet[SubnetMeta.PK];
+  staticRouteId?: StaticRoute[StaticRouteMeta.PK];
   activeForm: SubnetAction;
   setActiveForm: SetSidePanelContent;
 }