refactor: [M3-8777] - Refactor CreateCluster component to use react-hook-form

packages/manager/.changeset/pr-11581-tech-stories-1738841023177.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Optimize CreateCluster component: Use React Hook Form ([#11581](https://github.com/linode/manager/pull/11581))

packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts

@@ -848,7 +848,7 @@ describe('LKE Cluster Creation with ACL', () => {
         .should('be.visible')
         .should('be.enabled')
         .click();
-      cy.get('[id="domain-transfer-ip-1"]')
+      cy.get('[id="ipv4-addresses-or-cidrs-ip-address-1"]')
         .should('be.visible')
         .click()
         .type('10.0.1.0/24');

packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts

@@ -251,15 +251,13 @@ describe('displays kubernetes plans panel based on availability', () => {
 
     // Dedicated CPU tab
     // Should be selected/open by default
-    // Should have the limited availability notice
     // Should contain 5 plans (6 rows including the header row)
     // Should have 3 plans disabled
     // Should have no tooltips for the disabled plans (more than half disabled plans in the panel)
     // All inputs for a row should be enabled if row is enabled (only testing one row in suite)
     // All inputs for a disabled row should be disabled (only testing one row in suite)
     cy.get(k8PlansPanel).within(() => {
-      cy.findAllByRole('alert').should('have.length', 1);
-      cy.get(notices.limitedAvailability).should('be.visible');
+      cy.findAllByRole('alert').should('have.length', 0);
 
       cy.findByRole('table', { name: planSelectionTable }).within(() => {
         cy.findAllByRole('row').should('have.length', 6);
@@ -319,14 +317,12 @@ describe('displays kubernetes plans panel based on availability', () => {
     });
 
     // High Memory tab
-    // Should have the limited availability notice
     // Should contain 1 plan (2 rows including the header row)
     // Should have one disabled plan
     // Should have no tooltip for the disabled plan (more than half disabled plans in the panel)
     cy.findByText('High Memory').click();
     cy.get(k8PlansPanel).within(() => {
-      cy.findAllByRole('alert').should('have.length', 1);
-      cy.get(notices.limitedAvailability).should('be.visible');
+      cy.findAllByRole('alert').should('have.length', 0);
 
       cy.findByRole('table', { name: planSelectionTable }).within(() => {
         cy.findAllByRole('row').should('have.length', 2);
@@ -339,15 +335,13 @@ describe('displays kubernetes plans panel based on availability', () => {
     });
 
     // Premium CPU
-    // Should have the unavailable notice
     // Only present since we manually inject the 512 plan for it
     // Should contain 1 plan (2 rows including the header row)
     // Should have its whole panel disabled
     // Should not have tooltip for the disabled plan (not needed on disabled panels)
     cy.findByText('Premium CPU').click();
     cy.get(k8PlansPanel).within(() => {
       cy.findAllByRole('alert').should('have.length', 1);
-      cy.get(notices.unavailable).should('be.visible');
 
       cy.findByRole('table', { name: planSelectionTable }).within(() => {
         cy.findAllByRole('row').should('have.length', 2);
@@ -436,25 +430,21 @@ describe('displays specific kubernetes plans for GPU', () => {
     cy.findByText('GPU').click();
     cy.get(k8PlansPanel).within(() => {
       cy.findAllByRole('alert').should('have.length', 2);
-      cy.get(notices.unavailable).should('be.visible');
 
       cy.findByRole('table', {
         name: 'List of NVIDIA RTX 4000 Ada Plans',
       }).within(() => {
         cy.findByText('NVIDIA RTX 4000 Ada').should('be.visible');
         cy.findAllByRole('row').should('have.length', 2);
-        cy.get('[data-qa-plan-row="gpu-2 Ada"]').should(
-          'have.attr',
-          'disabled'
-        );
+        cy.get('[data-qa-plan-row="gpu-2 Ada"]').should('be.visible');
       });
 
       cy.findByRole('table', {
         name: 'List of NVIDIA Quadro RTX 6000 Plans',
       }).within(() => {
         cy.findByText('NVIDIA Quadro RTX 6000').should('be.visible');
         cy.findAllByRole('row').should('have.length', 2);
-        cy.get('[data-qa-plan-row="gpu-1"]').should('have.attr', 'disabled');
+        cy.get('[data-qa-plan-row="gpu-1"]').should('be.visible');
       });
     });
   });

packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.test.tsx

@@ -12,8 +12,8 @@ const props: ControlPlaneACLProps = {
   errorText: undefined,
   handleIPv4Change: vi.fn(),
   handleIPv6Change: vi.fn(),
-  ipV4Addr: [{ address: '' }],
-  ipV6Addr: [{ address: '' }],
+  ipV4Addr: [''],
+  ipV6Addr: [''],
   setControlPlaneACL: vi.fn(),
 };
 

packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.tsx

@@ -2,26 +2,29 @@ import {
   Box,
   FormControl,
   FormControlLabel,
+  IconButton,
   Notice,
+  Stack,
+  TextField,
   Toggle,
   Typography,
 } from '@linode/ui';
+import CloseIcon from '@mui/icons-material/Close';
 import { FormLabel } from '@mui/material';
 import * as React from 'react';
+import { Controller, useFieldArray, useForm } from 'react-hook-form';
 
 import { ErrorMessage } from 'src/components/ErrorMessage';
-import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
-import { validateIPs } from 'src/utilities/ipUtils';
-
-import type { ExtendedIP } from 'src/utilities/ipUtils';
+import { LinkButton } from 'src/components/LinkButton';
+import { stringToExtendedIP, validateIPs } from 'src/utilities/ipUtils';
 
 export interface ControlPlaneACLProps {
   enableControlPlaneACL: boolean;
   errorText: string | undefined;
-  handleIPv4Change: (ips: ExtendedIP[]) => void;
-  handleIPv6Change: (ips: ExtendedIP[]) => void;
-  ipV4Addr: ExtendedIP[];
-  ipV6Addr: ExtendedIP[];
+  handleIPv4Change: (ips: string[]) => void;
+  handleIPv6Change: (ips: string[]) => void;
+  ipV4Addr: null | string[] | undefined;
+  ipV6Addr: null | string[] | undefined;
   setControlPlaneACL: (enabled: boolean) => void;
 }
 
@@ -31,11 +34,54 @@ export const ControlPlaneACLPane = (props: ControlPlaneACLProps) => {
     errorText,
     handleIPv4Change,
     handleIPv6Change,
-    ipV4Addr,
-    ipV6Addr,
     setControlPlaneACL,
   } = props;
 
+  const { clearErrors, control, setError, watch } = useForm();
+  const {
+    append: appendIPv4,
+    fields: ipv4Fields,
+    remove: removeIPv4,
+  } = useFieldArray({
+    control,
+    name: 'ipv4Addresses',
+  });
+
+  const {
+    append: appendIPv6,
+    fields: ipv6Fields,
+    remove: removeIPv6,
+  } = useFieldArray({
+    control,
+    name: 'ipv6Addresses',
+  });
+
+  const ipv4Addresses = watch('ipv4Addresses');
+  const ipv6Addresses = watch('ipv6Addresses');
+
+  React.useEffect(() => {
+    if (enableControlPlaneACL) {
+      if (!ipv4Addresses || ipv4Addresses.length == 0) {
+        appendIPv4('');
+      }
+      if (!ipv6Addresses || ipv6Addresses.length == 0) {
+        appendIPv6('');
+      }
+    }
+  });
+
+  React.useEffect(() => {
+    if (ipv4Addresses && ipv4Addresses.length) {
+      handleIPv4Change(ipv4Addresses);
+    }
+  }, [ipv4Addresses, handleIPv4Change]);
+
+  React.useEffect(() => {
+    if (ipv6Addresses && ipv6Addresses.length) {
+      handleIPv6Change(ipv6Addresses);
+    }
+  }, [ipv6Addresses, handleIPv6Change]);
+
   return (
     <>
       <FormControl data-testid="control-plane-ipacl-form">
@@ -63,37 +109,121 @@ export const ControlPlaneACLPane = (props: ControlPlaneACLProps) => {
           label="Enable Control Plane ACL"
         />
       </FormControl>
+
       {enableControlPlaneACL && (
         <Box sx={{ marginBottom: 3, maxWidth: 450 }}>
-          <MultipleIPInput
-            onBlur={(_ips: ExtendedIP[]) => {
-              const validatedIPs = validateIPs(_ips, {
-                allowEmptyAddress: true,
-                errorMessage: 'Must be a valid IPv4 address.',
-              });
-              handleIPv4Change(validatedIPs);
-            }}
-            buttonText="Add IPv4 Address"
-            ips={ipV4Addr}
-            isLinkStyled
-            onChange={handleIPv4Change}
-            title="IPv4 Addresses or CIDRs"
-          />
+          {/* IPv4 Addresses */}
           <Box marginTop={2}>
-            <MultipleIPInput
-              onBlur={(_ips: ExtendedIP[]) => {
-                const validatedIPs = validateIPs(_ips, {
-                  allowEmptyAddress: true,
-                  errorMessage: 'Must be a valid IPv6 address.',
-                });
-                handleIPv6Change(validatedIPs);
-              }}
-              buttonText="Add IPv6 Address"
-              ips={ipV6Addr}
-              isLinkStyled
-              onChange={handleIPv6Change}
-              title="IPv6 Addresses or CIDRs"
-            />
+            <Typography mb={1} variant="inherit">
+              IPv4 Addresses or CIDRs
+            </Typography>
+            {ipv4Fields.map((field, index) => (
+              <Stack
+                alignItems="flex-start"
+                direction="row"
+                key={field.id}
+                spacing={0.5}
+                sx={{ marginBottom: 1 }}
+              >
+                <Controller
+                  render={({ field: controllerField, fieldState }) => (
+                    <TextField
+                      {...controllerField}
+                      onBlur={() => {
+                        const _ips = stringToExtendedIP(controllerField.value);
+                        const validatedIPs = validateIPs([_ips], {
+                          allowEmptyAddress: true,
+                          errorMessage: 'Must be a valid IPv4 address.',
+                        });
+                        if (validatedIPs[0].error) {
+                          setError(controllerField.name, {
+                            message: validatedIPs[0].error,
+                            type: 'manual',
+                          });
+                        } else {
+                          clearErrors(controllerField.name);
+                        }
+                      }}
+                      error={!!fieldState.error}
+                      errorText={fieldState.error?.message}
+                      hideLabel
+                      label={`IPv4 Addresses or CIDRs ip-address-${index}`}
+                      ref={null}
+                      sx={{ minWidth: 350 }}
+                    />
+                  )}
+                  control={control}
+                  name={`ipv4Addresses[${index}]`}
+                />
+                <IconButton
+                  aria-label={`Remove IPv4 Address ${index}`}
+                  onClick={() => removeIPv4(index)}
+                  sx={{ padding: 0.75 }}
+                >
+                  <CloseIcon />
+                </IconButton>
+              </Stack>
+            ))}
+            <LinkButton onClick={() => appendIPv4('')}>
+              Add IPv4 Address
+            </LinkButton>
+          </Box>
+
+          {/* IPv6 Addresses */}
+          <Box marginTop={2}>
+            <Typography mb={1} variant="inherit">
+              IPv6 Addresses or CIDRs
+            </Typography>
+            {ipv6Fields.map((field, index) => (
+              <Stack
+                alignItems="flex-start"
+                direction="row"
+                key={field.id}
+                spacing={0.5}
+                sx={{ marginBottom: 1 }}
+              >
+                <Controller
+                  render={({ field: controllerField, fieldState }) => (
+                    <TextField
+                      {...controllerField}
+                      onBlur={() => {
+                        const _ips = stringToExtendedIP(controllerField.value);
+                        const validatedIPs = validateIPs([_ips], {
+                          allowEmptyAddress: true,
+                          errorMessage: 'Must be a valid IPv6 address.',
+                        });
+                        if (validatedIPs[0].error) {
+                          setError(controllerField.name, {
+                            message: validatedIPs[0].error,
+                            type: 'manual',
+                          });
+                        } else {
+                          clearErrors(controllerField.name);
+                        }
+                      }}
+                      error={!!fieldState.error}
+                      errorText={fieldState.error?.message}
+                      hideLabel
+                      label={`IPv6 Addresses or CIDRs ip-address-${index}`}
+                      ref={null}
+                      sx={{ minWidth: 350 }}
+                    />
+                  )}
+                  control={control}
+                  name={`ipv6Addresses[${index}]`}
+                />
+                <IconButton
+                  aria-label={`Remove IPv6 Address ${index}`}
+                  onClick={() => removeIPv6(index)}
+                  sx={{ padding: 0.75 }}
+                >
+                  <CloseIcon />
+                </IconButton>
+              </Stack>
+            ))}
+            <LinkButton onClick={() => appendIPv6('')}>
+              Add IPv6 Address
+            </LinkButton>
           </Box>
         </Box>
       )}