fix: reserve range error state (#5357)

src/app/subnets/components/ReservedRangeForm/ReservedRangeForm.test.tsx

@@ -14,7 +14,13 @@ import {
   ipRange as ipRangeFactory,
   ipRangeState as ipRangeStateFactory,
 } from "@/testing/factories";
-import { userEvent, render, screen, waitFor } from "@/testing/utils";
+import {
+  userEvent,
+  render,
+  screen,
+  waitFor,
+  renderWithBrowserRouter,
+} from "@/testing/utils";
 
 const mockStore = configureStore();
 
@@ -246,4 +252,22 @@ describe("ReservedRangeForm", () => {
       screen.queryByRole("textbox", { name: Labels.Comment })
     ).not.toBeInTheDocument();
   });
+
+  it("displays an error when start and end IP addresses are not provided", async () => {
+    renderWithBrowserRouter(<ReservedRangeForm setActiveForm={vi.fn()} />, {
+      state,
+      route: "/machines",
+    });
+    await userEvent.click(
+      screen.getByRole("textbox", { name: Labels.StartIp })
+    );
+    await userEvent.click(screen.getByRole("textbox", { name: Labels.EndIp }));
+    await userEvent.click(screen.getByRole("button", { name: "Reserve" }));
+    expect(
+      await screen.findByLabelText(Labels.StartIp)
+    ).toHaveAccessibleErrorMessage(/Start IP is required/);
+    expect(
+      await screen.findByLabelText(Labels.EndIp)
+    ).toHaveAccessibleErrorMessage(/End IP is required/);
+  });
 });

src/app/subnets/components/ReservedRangeForm/ReservedRangeForm.tsx

@@ -41,8 +41,8 @@ export enum Labels {
 
 const Schema = Yup.object().shape({
   comment: Yup.string(),
-  end_ip: Yup.string().required("Start IP is required"),
-  start_ip: Yup.string().required("End IP is required"),
+  start_ip: Yup.string().required("Start IP is required"),
+  end_ip: Yup.string().required("End IP is required"),
 });
 
 const ReservedRangeForm = ({