From ecb7b0251276744a823c1694d9f5af3330d1752f Mon Sep 17 00:00:00 2001
From: Nick De Villiers <nick.devilliers@canonical.com>
Date: Fri, 13 Dec 2024 14:33:36 +0000
Subject: [PATCH] feat(machines): Add 'Register as DPU' to Add Machine form
 MAASENG-3948 (#5567)

- Added "Register as  DPU" as an option to the "Add machine" form
- (drive-by) Removed row/col elements on Add machine form, as they haven't been needed since we transitioned to using side panels.

Resolves [MAASENG-3948](https://warthogs.atlassian.net/browse/MAASENG-3948)
---
 .../AddMachineForm/AddMachineForm.test.tsx    |   1 +
 .../AddMachineForm/AddMachineForm.tsx         |   1 +
 .../AddMachineFormFields.tsx                  | 125 +++++++++---------
 3 files changed, 64 insertions(+), 63 deletions(-)

diff --git a/src/app/machines/components/MachineForms/AddMachine/AddMachineForm/AddMachineForm.test.tsx b/src/app/machines/components/MachineForms/AddMachine/AddMachineForm/AddMachineForm.test.tsx
index f2a7d18102..56825836da 100644
--- a/src/app/machines/components/MachineForms/AddMachine/AddMachineForm/AddMachineForm.test.tsx
+++ b/src/app/machines/components/MachineForms/AddMachine/AddMachineForm/AddMachineForm.test.tsx
@@ -189,6 +189,7 @@ it("can handle saving a machine", async () => {
     power_type: "manual",
     pxe_mac: "11:11:11:11:11:11",
     zone: { name: "twilight" },
+    // TODO: Add `is_dpu` field to params https://warthogs.atlassian.net/browse/MAASENG-4186
   });
   await waitFor(() => {
     expect(
diff --git a/src/app/machines/components/MachineForms/AddMachine/AddMachineForm/AddMachineForm.tsx b/src/app/machines/components/MachineForms/AddMachine/AddMachineForm/AddMachineForm.tsx
index 34450d1a7a..d0b2db0b85 100644
--- a/src/app/machines/components/MachineForms/AddMachine/AddMachineForm/AddMachineForm.tsx
+++ b/src/app/machines/components/MachineForms/AddMachine/AddMachineForm/AddMachineForm.tsx
@@ -165,6 +165,7 @@ export const AddMachineForm = ({
               power_type: values.power_type as PowerType["name"],
               pxe_mac: values.pxe_mac,
               zone: { name: values.zone },
+              // TODO: Add `is_dpu` field to params https://warthogs.atlassian.net/browse/MAASENG-4186
             };
             dispatch(machineActions.create(params));
             setSavingMachine(values.hostname || "Machine");
diff --git a/src/app/machines/components/MachineForms/AddMachine/AddMachineFormFields/AddMachineFormFields.tsx b/src/app/machines/components/MachineForms/AddMachine/AddMachineFormFields/AddMachineFormFields.tsx
index 8c74becedf..91f76c3880 100644
--- a/src/app/machines/components/MachineForms/AddMachine/AddMachineFormFields/AddMachineFormFields.tsx
+++ b/src/app/machines/components/MachineForms/AddMachine/AddMachineFormFields/AddMachineFormFields.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import { Button, Col, Input, Row } from "@canonical/react-components";
+import { Button, Input } from "@canonical/react-components";
 import { useFormikContext } from "formik";
 
 import type { AddMachineValues } from "../types";
@@ -36,74 +36,73 @@ export const AddMachineFormFields = ({ saved }: Props): JSX.Element => {
   const macAddressRequired = values.power_type !== PowerTypeNames.IPMI;
 
   return (
-    <Row>
-      <Col size={12}>
-        <FormikField
-          label="Machine name"
-          name="hostname"
-          placeholder="Machine name (optional)"
-          type="text"
-        />
-        <DomainSelect name="domain" required />
-        <ArchitectureSelect name="architecture" required />
-        <MinimumKernelSelect name="min_hwe_kernel" />
-        <ZoneSelect name="zone" required />
-        <ResourcePoolSelect name="pool" required />
-        <MacAddressField
-          label="MAC address"
-          name="pxe_mac"
-          required={macAddressRequired}
-        />
-        {extraMACs.map((mac, i) => (
-          <div
-            className="p-input--closeable"
-            data-testid={`extra-macs-${i}`}
-            key={`extra-macs-${i}`}
-          >
-            <Input
-              aria-label={`Extra MAC address ${i + 1}`}
-              error={errors?.extra_macs && errors.extra_macs[i]}
-              onChange={(e) => {
-                const newExtraMACs = [...extraMACs];
-                newExtraMACs[i] = formatMacAddress(e.target.value);
-                setExtraMACs(newExtraMACs);
-                setFieldValue("extra_macs", newExtraMACs);
-              }}
-              placeholder="00:00:00:00:00:00"
-              type="text"
-              value={mac}
-            />
-            <Button
-              className="p-close-input"
-              hasIcon
-              onClick={() => {
-                const newExtraMACs = extraMACs.filter((_, j) => j !== i);
-                setExtraMACs(newExtraMACs);
-                setFieldValue("extra_macs", newExtraMACs);
-              }}
-              type="button"
-            >
-              <i className="p-icon--close" />
-            </Button>
-          </div>
-        ))}
-        <div className="u-align--right">
+    <>
+      <FormikField
+        label="Machine name"
+        name="hostname"
+        placeholder="Machine name (optional)"
+        type="text"
+      />
+      <DomainSelect name="domain" required />
+      <ArchitectureSelect name="architecture" required />
+      <MinimumKernelSelect name="min_hwe_kernel" />
+      <ZoneSelect name="zone" required />
+      <ResourcePoolSelect name="pool" required />
+      <MacAddressField
+        label="MAC address"
+        name="pxe_mac"
+        required={macAddressRequired}
+      />
+      {extraMACs.map((mac, i) => (
+        <div
+          className="p-input--closeable"
+          data-testid={`extra-macs-${i}`}
+          key={`extra-macs-${i}`}
+        >
+          <Input
+            aria-label={`Extra MAC address ${i + 1}`}
+            error={errors?.extra_macs && errors.extra_macs[i]}
+            onChange={(e) => {
+              const newExtraMACs = [...extraMACs];
+              newExtraMACs[i] = formatMacAddress(e.target.value);
+              setExtraMACs(newExtraMACs);
+              setFieldValue("extra_macs", newExtraMACs);
+            }}
+            placeholder="00:00:00:00:00:00"
+            type="text"
+            value={mac}
+          />
           <Button
-            className="u-no-margin--bottom"
-            data-testid="add-extra-mac"
+            className="p-close-input"
             hasIcon
-            onClick={() => setExtraMACs([...extraMACs, ""])}
+            onClick={() => {
+              const newExtraMACs = extraMACs.filter((_, j) => j !== i);
+              setExtraMACs(newExtraMACs);
+              setFieldValue("extra_macs", newExtraMACs);
+            }}
             type="button"
           >
-            <i className="p-icon--plus" />
-            <span>Add MAC address</span>
+            <i className="p-icon--close" />
           </Button>
         </div>
-      </Col>
-      <Col size={12}>
-        <PowerTypeFields />
-      </Col>
-    </Row>
+      ))}
+      <div className="u-align--right">
+        <Button
+          className="u-no-margin--bottom"
+          data-testid="add-extra-mac"
+          hasIcon
+          onClick={() => setExtraMACs([...extraMACs, ""])}
+          type="button"
+        >
+          <i className="p-icon--plus" />
+          <span>Add MAC address</span>
+        </Button>
+      </div>
+      <PowerTypeFields />
+      {import.meta.env.VITE_APP_DPU_PROVISIONING === "true" && (
+        <FormikField label="Register as DPU" name="is_dpu" type="checkbox" />
+      )}
+    </>
   );
 };