address review comments

canonical · Jun 6, 2024 · 1fc6160 · 1fc6160
1 parent 44d919d
commit 1fc6160
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 39 deletions.
diff --git a/src/app/base/components/PrefixedIpInput/PrefixedIpInput.tsx b/src/app/base/components/PrefixedIpInput/PrefixedIpInput.tsx
@@ -33,34 +33,24 @@ const PrefixedIpInput = ({ cidr, name, ...props }: Props) => {
 
   const formikProps = useFormikContext();
 
-  const getPlaceholderText = () => {
-    if (subnetIsIpv4) {
-      return editable;
-    } else {
-      // 7 is the maximum number of colons in an IPv6 address
-      const placeholderColons = 7 - (ipv6Prefix.match(/:/g) || []).length;
-      return `${"0000:".repeat(placeholderColons)}0000`;
-    }
+  const getIPv6Placeholder = () => {
+    // 7 is the maximum number of colons in an IPv6 address
+    const placeholderColons = 7 - (ipv6Prefix.match(/:/g) || []).length;
+    return `${"0000:".repeat(placeholderColons)}0000`;
   };
 
-  const getMaxLength = () => {
-    if (subnetIsIpv4) {
-      const immutableOctetsLength = immutable.split(".").length;
+  const getPlaceholderText = () =>
+    subnetIsIpv4 ? editable : getIPv6Placeholder();
 
-      if (immutableOctetsLength === 3) {
-        return 3; // 3 digits, no dots
-      } else if (immutableOctetsLength === 2) {
-        return 7; // 6 digits, 1 dot
-      } else if (immutableOctetsLength === 1) {
-        return 11; // 9 digits, 2 dots
-      } else {
-        return 15; // 12 digits, 3 dots
-      }
-    } else {
-      return getPlaceholderText().length;
-    }
+  const getIPv4MaxLength = () => {
+    const immutableOctetsLength = immutable.split(".").length;
+    const lengths = [15, 11, 7, 3]; // Corresponding to 0-3 immutable octets
+    return lengths[immutableOctetsLength];
   };
 
+  const getMaxLength = () =>
+    subnetIsIpv4 ? getIPv4MaxLength() : getIPv6Placeholder().length;
+
   const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
     e.preventDefault();
     const pastedText = e.clipboardData.getData("text");

diff --git a/src/app/subnets/views/SubnetDetails/StaticDHCPLease/ReserveDHCPLease/ReserveDHCPLease.tsx b/src/app/subnets/views/SubnetDetails/StaticDHCPLease/ReserveDHCPLease/ReserveDHCPLease.tsx
@@ -2,7 +2,7 @@ import { useCallback } from "react";
 
 import { Spinner } from "@canonical/react-components";
 import * as ipaddr from "ipaddr.js";
-import { isIPv4, isIPv6 } from "is-ip";
+import { isIP, isIPv4 } from "is-ip";
 import { useDispatch, useSelector } from "react-redux";
 import * as Yup from "yup";
 
@@ -76,6 +76,14 @@ const ReserveDHCPLease = ({
   const prefixLength = parseInt(subnet.cidr.split("/")[1]);
   const subnetIsIpv4 = isIPv4(networkAddress);
 
+  const formatIp = (ip: string | undefined) => {
+    if (subnetIsIpv4) {
+      return `${immutableOctets}.${ip}`;
+    } else {
+      return `${ipv6Prefix}${ip}`;
+    }
+  };
+
   const getInitialValues = () => {
     if (reservedIp && subnet) {
       return {
@@ -102,26 +110,18 @@ const ReserveDHCPLease = ({
       .test({
         name: "ip-is-valid",
         message: "This is not a valid IP address",
-        test: (ip_address) => {
-          if (subnetIsIpv4) {
-            return isIPv4(`${immutableOctets}.${ip_address}`);
-          } else {
-            return isIPv6(`${ipv6Prefix}${ip_address}`);
-          }
-        },
+        test: (ip_address) => isIP(formatIp(ip_address)),
       })
       .test({
         name: "ip-is-in-subnet",
         message: "The IP address is outside of the subnet's range.",
         test: (ip_address) => {
+          const ip = formatIp(ip_address);
           if (subnetIsIpv4) {
-            return isIpInSubnet(
-              `${immutableOctets}.${ip_address}`,
-              subnet.cidr as string
-            );
+            return isIpInSubnet(ip, subnet.cidr as string);
           } else {
             try {
-              const addr = ipaddr.parse(`${ipv6Prefix}${ip_address}`);
+              const addr = ipaddr.parse(ip);
               const netAddr = ipaddr.parse(networkAddress);
               return addr.match(netAddr, prefixLength);
             } catch (e) {
@@ -135,9 +135,7 @@ const ReserveDHCPLease = ({
   });
 
   const handleSubmit = (values: FormValues) => {
-    const ip = subnetIsIpv4
-      ? `${immutableOctets}.${values.ip_address}`
-      : `${ipv6Prefix}${values.ip_address}`;
+    const ip = formatIp(values.ip_address);
     dispatch(cleanup());
     if (isEditing) {
       dispatch(