fix(subnets): Disable editing IP address of a static lease MAASENG-37…

…62 (#5543)

- Disable the IP field of `ReserveDHCPLease` when editing
- Added help passthrough to `PrefixedIPInput` to override IP range help
- Removed IP address from dispatch data when editing

Resolves [MAASENG-3762](https://warthogs.atlassian.net/browse/MAASENG-3762)

src/app/base/components/PrefixedIpInput/PrefixedIpInput.test.tsx

@@ -82,3 +82,22 @@ it("trims the network address and subnet ID from a pasted IPv6 address", async (
 
   expect(screen.getByRole("textbox")).toHaveValue(":1");
 });
+
+it("displays provided help text instead of the IP address range", () => {
+  render(
+    <Formik initialValues={{}} onSubmit={vi.fn()}>
+      <PrefixedIpInput
+        cidr="10.0.0.0/24"
+        help="A great song by the Beatles."
+        name="ip"
+      />
+    </Formik>
+  );
+
+  expect(
+    screen.queryByText(/The available range in this subnet is/i)
+  ).not.toBeInTheDocument();
+  expect(screen.queryByText("10.0.0.[1-254]")).not.toBeInTheDocument();
+
+  expect(screen.getByText("A great song by the Beatles.")).toBeInTheDocument();
+});

src/app/base/components/PrefixedIpInput/PrefixedIpInput.tsx

@@ -20,7 +20,7 @@ type Props = Omit<
   name: string;
 };
 
-const PrefixedIpInput = ({ cidr, name, ...props }: Props) => {
+const PrefixedIpInput = ({ cidr, name, help, ...props }: Props) => {
   const [networkAddress] = cidr.split("/");
   const ipv6Prefix = networkAddress.substring(
     0,
@@ -67,7 +67,9 @@ const PrefixedIpInput = ({ cidr, name, ...props }: Props) => {
   return (
     <PrefixedInput
       help={
-        subnetIsIpv4 ? (
+        help ? (
+          help
+        ) : subnetIsIpv4 ? (
           <>
             The available range in this subnet is{" "}
             <code>

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

@@ -202,6 +202,32 @@ it("pre-fills the form if a reserved IPv6 address's ID is present", async () =>
   );
 });
 
+it("disables the IP address field when editing a lease", async () => {
+  const reservedIp = factory.reservedIp({
+    id: 1,
+    ip: "10.0.0.69",
+    mac_address: "FF:FF:FF:FF:FF:FF",
+    comment: "bla bla bla",
+  });
+  state.reservedip = factory.reservedIpState({
+    loading: false,
+    loaded: true,
+    items: [reservedIp],
+  });
+
+  const store = mockStore(state);
+  renderWithBrowserRouter(
+    <ReserveDHCPLease
+      reservedIpId={reservedIp.id}
+      setSidePanelContent={vi.fn()}
+      subnetId={state.subnet.items[0].id}
+    />,
+    { store }
+  );
+
+  expect(screen.getByRole("textbox", { name: "IP address" })).toBeDisabled();
+});
+
 it("dispatches an action to update a reserved IP", async () => {
   const reservedIp = factory.reservedIp({
     id: 1,
@@ -247,7 +273,6 @@ it("dispatches an action to update a reserved IP", async () => {
       params: {
         subnet: 1,
         id: reservedIp.id,
-        ip: "10.0.0.69",
         mac_address: "FF:FF:FF:FF:FF:FF",
         comment: "something imaginative and funny",
       },

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

@@ -158,8 +158,8 @@ const ReserveDHCPLease = ({
     if (isEditing) {
       dispatch(
         reservedIpActions.update({
+          // IP address cannot be changed, ommitted here
           comment: values.comment,
-          ip,
           mac_address: values.mac_address,
           subnet: subnetId,
           id: reservedIpId,
@@ -202,7 +202,11 @@ const ReserveDHCPLease = ({
           <FormikField
             cidr={subnet.cidr}
             component={PrefixedIpInput}
-            label="IP address"
+            disabled={!!reservedIpId}
+            help={
+              !!reservedIpId ? "You cannot edit a reserved IP address." : null
+            }
+            label={"IP address"}
             name="ip_address"
             required
           />