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

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

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

@@ -18,7 +18,7 @@ import type { Theme } from '@mui/material/styles';
 interface Props {
   handleClusterTierSelection: (tier: KubernetesTier) => void;
   isUserRestricted: boolean;
-  selectedTier: KubernetesTier;
+  selectedTier: KubernetesTier | undefined;
 }
 
 export const ClusterTierPanel = (props: Props) => {

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

@@ -1,7 +1,7 @@
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
-import { renderWithTheme } from 'src/utilities/testHelpers';
+import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
 
 import { ControlPlaneACLPane } from './ControlPlaneACLPane';
 
@@ -10,16 +10,26 @@ import type { ControlPlaneACLProps } from './ControlPlaneACLPane';
 const props: ControlPlaneACLProps = {
   enableControlPlaneACL: true,
   errorText: undefined,
-  handleIPv4Change: vi.fn(),
-  handleIPv6Change: vi.fn(),
-  ipV4Addr: [{ address: '' }],
-  ipV6Addr: [{ address: '' }],
   setControlPlaneACL: vi.fn(),
 };
 
 describe('ControlPlaneACLPane', () => {
   it('renders all fields when enableControlPlaneACL is true', () => {
-    const { getByText } = renderWithTheme(<ControlPlaneACLPane {...props} />);
+    const { getByText } = renderWithThemeAndHookFormContext({
+      component: <ControlPlaneACLPane {...props} />,
+      useFormOptions: {
+        defaultValues: {
+          control_plane: {
+            acl: {
+              addresses: {
+                ipv4: [''],
+                ipv6: [''],
+              },
+            },
+          },
+        },
+      },
+    });
 
     expect(getByText('Control Plane ACL')).toBeVisible();
     expect(
@@ -35,9 +45,11 @@ describe('ControlPlaneACLPane', () => {
   });
 
   it('hides IP fields when enableControlPlaneACL is false', () => {
-    const { getByText, queryByText } = renderWithTheme(
-      <ControlPlaneACLPane {...props} enableControlPlaneACL={false} />
-    );
+    const { getByText, queryByText } = renderWithThemeAndHookFormContext({
+      component: (
+        <ControlPlaneACLPane {...props} enableControlPlaneACL={false} />
+      ),
+    });
 
     expect(getByText('Control Plane ACL')).toBeVisible();
     expect(
@@ -53,7 +65,9 @@ describe('ControlPlaneACLPane', () => {
   });
 
   it('calls setControlPlaneACL when clicking the toggle', async () => {
-    const { getByText } = renderWithTheme(<ControlPlaneACLPane {...props} />);
+    const { getByText } = renderWithThemeAndHookFormContext({
+      component: <ControlPlaneACLPane {...props} />,
+    });
 
     const toggle = getByText('Enable Control Plane ACL');
     await userEvent.click(toggle);
@@ -62,18 +76,26 @@ describe('ControlPlaneACLPane', () => {
   });
 
   it('handles IP changes', async () => {
-    const { getByLabelText } = renderWithTheme(
-      <ControlPlaneACLPane {...props} />
-    );
-
-    const ipv4 = getByLabelText('IPv4 Addresses or CIDRs ip-address-0');
+    const { getByTestId } = renderWithThemeAndHookFormContext({
+      component: <ControlPlaneACLPane {...props} />,
+      useFormOptions: {
+        defaultValues: {
+          control_plane: {
+            acl: {
+              addresses: {
+                ipv4: [''],
+                ipv6: [''],
+              },
+            },
+          },
+        },
+      },
+    });
+
+    const ipv4 = getByTestId('ipv4-addresses-or-cidrs-ip-address-0');
     await userEvent.type(ipv4, 'test');
 
-    expect(props.handleIPv4Change).toHaveBeenCalled();
-
-    const ipv6 = getByLabelText('IPv6 Addresses or CIDRs ip-address-0');
+    const ipv6 = getByTestId('ipv6-addresses-or-cidrs-ip-address-0');
     await userEvent.type(ipv6, 'test');
-
-    expect(props.handleIPv6Change).toHaveBeenCalled();
   });
 });

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

@@ -2,39 +2,71 @@ 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, useFormContext } 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 {
+  extendedIPToString,
+  stringToExtendedIP,
+  validateIPs,
+} from 'src/utilities/ipUtils';
 
-export interface ControlPlaneACLProps {
+import type { CreateKubeClusterPayload } from '@linode/api-v4';
+import type { RenderGuardProps } from 'src/components/RenderGuard';
+export interface ControlPlaneACLProps extends RenderGuardProps {
   enableControlPlaneACL: boolean;
   errorText: string | undefined;
-  handleIPv4Change: (ips: ExtendedIP[]) => void;
-  handleIPv6Change: (ips: ExtendedIP[]) => void;
-  ipV4Addr: ExtendedIP[];
-  ipV6Addr: ExtendedIP[];
+  initialIpv4Addresses?: string[];
+  initialIpv6Addresses?: string[];
   setControlPlaneACL: (enabled: boolean) => void;
 }
 
 export const ControlPlaneACLPane = (props: ControlPlaneACLProps) => {
+  const { enableControlPlaneACL, errorText, setControlPlaneACL } = props;
+
   const {
-    enableControlPlaneACL,
-    errorText,
-    handleIPv4Change,
-    handleIPv6Change,
-    ipV4Addr,
-    ipV6Addr,
-    setControlPlaneACL,
-  } = props;
+    clearErrors,
+    control,
+    getValues,
+    setError,
+    setValue,
+    watch,
+  } = useFormContext<CreateKubeClusterPayload>();
+
+  const ipv4Addresses = watch('control_plane.acl.addresses.ipv4');
+  const ipv6Addresses = watch('control_plane.acl.addresses.ipv6');
+
+  const handleBlur = (value: string, index: number, type: 'ipv4' | 'ipv6') => {
+    const _ips = value ? stringToExtendedIP(value) : stringToExtendedIP('');
+    const validatedIPs = validateIPs([_ips], {
+      allowEmptyAddress: true,
+      errorMessage:
+        type === 'ipv4'
+          ? 'Must be a valid IPv4 address.'
+          : 'Must be a valid IPv6 address.',
+    });
+    if (validatedIPs[0].error) {
+      setError(`control_plane.acl.addresses.${type}.${index}`, {
+        message: validatedIPs[0].error,
+        type: 'manual',
+      });
+    } else {
+      clearErrors(`control_plane.acl.addresses.${type}.${index}`);
+    }
+    const newIP = extendedIPToString(_ips);
+    setValue(`control_plane.acl.addresses.${type}.${index}`, newIP);
+  };
 
   return (
     <>
@@ -63,37 +95,133 @@ 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);
+            <Typography mb={1} variant="inherit">
+              IPv4 Addresses or CIDRs
+            </Typography>
+            {(getValues('control_plane.acl.addresses.ipv4') || []).map(
+              (field: string, index: number) => (
+                <Stack
+                  alignItems="flex-start"
+                  direction="row"
+                  key={`ipv4-${index}`}
+                  spacing={0.5}
+                  sx={{ marginBottom: 1 }}
+                >
+                  <Controller
+                    render={({ field: controllerField, fieldState }) => (
+                      <TextField
+                        {...controllerField}
+                        onBlur={() =>
+                          handleBlur(controllerField.value, index, 'ipv4')
+                        }
+                        data-testid={`ipv4-addresses-or-cidrs-ip-address-${index}`}
+                        error={!!fieldState.error}
+                        errorText={fieldState.error?.message}
+                        hideLabel
+                        label={`IPv4 Addresses or CIDRs ip-address-${index}`}
+                        ref={null}
+                        sx={{ minWidth: 350 }}
+                        value={controllerField.value}
+                      />
+                    )}
+                    control={control}
+                    name={`control_plane.acl.addresses.ipv4.${index}`}
+                  />
+                  {index > 0 && (
+                    <IconButton
+                      onClick={() => {
+                        const currentIPv4Addresses =
+                          ipv4Addresses?.filter((_, i) => i !== index) || [];
+                        setValue(
+                          'control_plane.acl.addresses.ipv4',
+                          currentIPv4Addresses
+                        );
+                      }}
+                      aria-label={`Remove IPv4 Address ${index}`}
+                      sx={{ padding: 0.75 }}
+                    >
+                      <CloseIcon />
+                    </IconButton>
+                  )}
+                </Stack>
+              )
+            )}
+            <LinkButton
+              onClick={() => {
+                const newIpv4Addresses = [...(ipv4Addresses || []), ''];
+                setValue('control_plane.acl.addresses.ipv4', newIpv4Addresses);
               }}
-              buttonText="Add IPv6 Address"
-              ips={ipV6Addr}
-              isLinkStyled
-              onChange={handleIPv6Change}
-              title="IPv6 Addresses or CIDRs"
-            />
+            >
+              Add IPv4 Address
+            </LinkButton>
+          </Box>
+
+          {/* IPv6 Addresses */}
+          <Box marginTop={2}>
+            <Typography mb={1} variant="inherit">
+              IPv6 Addresses or CIDRs
+            </Typography>
+            {(getValues('control_plane.acl.addresses.ipv6') || []).map(
+              (field: string, index: number) => (
+                <Stack
+                  alignItems="flex-start"
+                  direction="row"
+                  key={`ipv6-${index}`}
+                  spacing={0.5}
+                  sx={{ marginBottom: 1 }}
+                >
+                  <Controller
+                    render={({ field: controllerField, fieldState }) => (
+                      <TextField
+                        {...controllerField}
+                        onBlur={() =>
+                          handleBlur(controllerField.value, index, 'ipv6')
+                        }
+                        data-testid={`ipv6-addresses-or-cidrs-ip-address-${index}`}
+                        error={!!fieldState.error}
+                        errorText={fieldState.error?.message}
+                        hideLabel
+                        label={`IPv6 Addresses or CIDRs ip-address-${index}`}
+                        ref={null}
+                        sx={{ minWidth: 350 }}
+                        value={controllerField.value}
+                      />
+                    )}
+                    control={control}
+                    name={`control_plane.acl.addresses.ipv6.${index}`}
+                  />
+                  {index > 0 && (
+                    <IconButton
+                      onClick={() => {
+                        const currentIPv6Addresses =
+                          ipv6Addresses?.filter((_, i) => i !== index) || [];
+                        setValue(
+                          'control_plane.acl.addresses.ipv6',
+                          currentIPv6Addresses
+                        );
+                      }}
+                      aria-label={`Remove IPv6 Address ${index}`}
+                      sx={{ padding: 0.75 }}
+                    >
+                      <CloseIcon />
+                    </IconButton>
+                  )}
+                </Stack>
+              )
+            )}
+            <LinkButton
+              onClick={() => {
+                const newIpv6Addresses = [...(ipv6Addresses || []), ''];
+                setValue('control_plane.acl.addresses.ipv6', newIpv6Addresses);
+              }}
+            >
+              Add IPv6 Address
+            </LinkButton>
           </Box>
         </Box>
       )}