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)
canonical · Dec 13, 2024 · ecb7b02 · ecb7b02
1 parent 8bd7e81
commit ecb7b02
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 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
@@ -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
@@ -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/...machines/components/MachineForms/AddMachine/AddMachineFormFields/AddMachineFormFields.tsx b/...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" />
+      )}
+    </>
   );
 };