From 64baa11fc778c78c9be7f2612e149d3b3ddc9c80 Mon Sep 17 00:00:00 2001
From: Nick De Villiers <nick.devilliers@canonical.com>
Date: Thu, 18 Jul 2024 09:24:09 +0100
Subject: [PATCH] fix: remove length limit for MAC address fields MAASENG-3518
 (#5500)

- Removed length limit for MAC address inputs
---
Fixes [MAASENG-3518](https://warthogs.atlassian.net/browse/MAASENG-3518)
---
 .../components/MacAddressField/MacAddressField.tsx    |  1 -
 .../AddMachineFormFields/AddMachineFormFields.tsx     |  1 -
 src/app/utils/formatMacAddress.test.ts                |  6 ++----
 src/app/utils/formatMacAddress.ts                     | 11 ++++++++---
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/app/base/components/MacAddressField/MacAddressField.tsx b/src/app/base/components/MacAddressField/MacAddressField.tsx
index 494f2eb10e..27e79a4ff7 100644
--- a/src/app/base/components/MacAddressField/MacAddressField.tsx
+++ b/src/app/base/components/MacAddressField/MacAddressField.tsx
@@ -12,7 +12,6 @@ export const MacAddressField = ({ name, ...props }: Props): JSX.Element => {
 
   return (
     <FormikField
-      maxLength={17}
       name={name}
       onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
         setFieldValue(name, formatMacAddress(evt.target.value));
diff --git a/src/app/machines/components/MachineForms/AddMachine/AddMachineFormFields/AddMachineFormFields.tsx b/src/app/machines/components/MachineForms/AddMachine/AddMachineFormFields/AddMachineFormFields.tsx
index 612967a3d6..8c74becedf 100644
--- a/src/app/machines/components/MachineForms/AddMachine/AddMachineFormFields/AddMachineFormFields.tsx
+++ b/src/app/machines/components/MachineForms/AddMachine/AddMachineFormFields/AddMachineFormFields.tsx
@@ -63,7 +63,6 @@ export const AddMachineFormFields = ({ saved }: Props): JSX.Element => {
             <Input
               aria-label={`Extra MAC address ${i + 1}`}
               error={errors?.extra_macs && errors.extra_macs[i]}
-              maxLength={17}
               onChange={(e) => {
                 const newExtraMACs = [...extraMACs];
                 newExtraMACs[i] = formatMacAddress(e.target.value);
diff --git a/src/app/utils/formatMacAddress.test.ts b/src/app/utils/formatMacAddress.test.ts
index ac3ad2ff8e..f44a252e4f 100644
--- a/src/app/utils/formatMacAddress.test.ts
+++ b/src/app/utils/formatMacAddress.test.ts
@@ -12,9 +12,7 @@ describe("formatMacAddress", () => {
     expect(formatMacAddress("123456789abc")).toEqual("12:34:56:78:9a:bc");
   });
 
-  it("truncates correctly", () => {
-    expect(formatMacAddress("12:34:56:78:9a:bc:de")).toEqual(
-      "12:34:56:78:9a:bc"
-    );
+  it("stops adding separators after the fifth one", () => {
+    expect(formatMacAddress("123456789abcde")).toEqual("12:34:56:78:9a:bcde");
   });
 });
diff --git a/src/app/utils/formatMacAddress.ts b/src/app/utils/formatMacAddress.ts
index 399788a601..0604ffefa6 100644
--- a/src/app/utils/formatMacAddress.ts
+++ b/src/app/utils/formatMacAddress.ts
@@ -7,8 +7,13 @@
 
 export const formatMacAddress = (value: string): string => {
   const hexValues = value.replace(/:/g, "");
-  if (value.length % 3 === 0) {
-    return hexValues.replace(/([0-9A-Za-z]{2})/g, "$1:").substring(0, 17);
+
+  if (hexValues.length > 10) {
+    const firstTenValues = hexValues.slice(0, 10);
+    const lastValues = hexValues.slice(10);
+
+    return firstTenValues.replace(/([0-9A-Za-z]{2})/g, "$1:") + lastValues;
+  } else {
+    return hexValues.replace(/([0-9A-Za-z]{2})/g, "$1:");
   }
-  return value.substring(0, 17);
 };