fix: [M3-9891] - Actual fix for 'Improve validation and UX for ACL IP Address fields'

packages/manager/CHANGELOG.md

@@ -34,6 +34,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Missing `PublicIPAddressesTooltip` for VPC-only Linodes without an explicitly marked primary VPC interface ([#12122](https://github.com/linode/manager/pull/12122))
 - Fix incorrect card sizing at 1920px+ in LKE Tier panel ([#12076](https://github.com/linode/manager/pull/12076))
 - Bugs in Linode Create, Landing & Detail Pages ([#12028](https://github.com/linode/manager/pull/12028))
+- Fix persisting ACL IP validation error on clear ([#12144](https://github.com/linode/manager/pull/12144))
 
 ### Tech Stories:
 
@@ -76,7 +77,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - IAM RBAC: Add logic for getting a description for the facade roles ([#12053](https://github.com/linode/manager/pull/12053))
 - IAM RBAC: Fix bugs in the Entities component and the loading state for tabs ([#12062](https://github.com/linode/manager/pull/12062))
 - CloudPulse: Update metrics API request payload and legend row titles as part of api upgrade from v1beta to v2beta ([#12063](https://github.com/linode/manager/pull/12063))
-- Fix persisting ACL IP validation error and disable fields if user selects to provide IPs later ([#12067](https://github.com/linode/manager/pull/12067))
+- Disable ACL IP address fields if user selects to provide IPs later ([#12067](https://github.com/linode/manager/pull/12067))
 - Add label field to CreateFirewallDrawer form when using firewall templates ([#12069](https://github.com/linode/manager/pull/12069))
 - CloudPulse: Show regions based on available resources and dependent filters in dashboards `GlobalFilter` section ([#12078](https://github.com/linode/manager/pull/12078))
 - Pass widget filters configuration from dashboards in metrics call in cloudpulse dashboards ([#12079](https://github.com/linode/manager/pull/12079))

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

@@ -8,11 +8,11 @@ import {
   Typography,
 } from '@linode/ui';
 import { FormLabel, styled } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 import * as React from 'react';
 
 import { ErrorMessage } from 'src/components/ErrorMessage';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
-import { validateIPs } from 'src/utilities/ipUtils';
 
 import {
   CREATE_CLUSTER_ENTERPRISE_TIER_ACL_COPY,
@@ -67,17 +67,19 @@ export const ControlPlaneACLPane = (props: ControlPlaneACLProps) => {
             ? CREATE_CLUSTER_ENTERPRISE_TIER_ACL_COPY
             : CREATE_CLUSTER_STANDARD_TIER_ACL_COPY}
         </Typography>
-        <FormControlLabel
-          control={
-            <StyledACLToggle
-              checked={enableControlPlaneACL}
-              disabled={isEnterpriseCluster}
-              name="ipacl-checkbox"
-              onChange={() => setControlPlaneACL(!enableControlPlaneACL)}
-            />
-          }
-          label="Enable Control Plane ACL"
-        />
+        <Grid>
+          <FormControlLabel
+            control={
+              <StyledACLToggle
+                checked={enableControlPlaneACL}
+                disabled={isEnterpriseCluster}
+                name="ipacl-checkbox"
+                onChange={() => setControlPlaneACL(!enableControlPlaneACL)}
+              />
+            }
+            label="Enable Control Plane ACL"
+          />
+        </Grid>
       </FormControl>
       {enableControlPlaneACL && (
         <Box marginBottom={2}>
@@ -87,13 +89,6 @@ export const ControlPlaneACLPane = (props: ControlPlaneACLProps) => {
               disabled={isAcknowledgementChecked}
               ips={ipV4Addr}
               isLinkStyled
-              onBlur={(_ips: ExtendedIP[]) => {
-                const validatedIPs = validateIPs(_ips, {
-                  allowEmptyAddress: true,
-                  errorMessage: 'Must be a valid IPv4 address.',
-                });
-                handleIPv4Change(validatedIPs);
-              }}
               onChange={handleIPv4Change}
               title="IPv4 Addresses or CIDRs"
             />
@@ -103,13 +98,6 @@ export const ControlPlaneACLPane = (props: ControlPlaneACLProps) => {
                 disabled={isAcknowledgementChecked}
                 ips={ipV6Addr}
                 isLinkStyled
-                onBlur={(_ips: ExtendedIP[]) => {
-                  const validatedIPs = validateIPs(_ips, {
-                    allowEmptyAddress: true,
-                    errorMessage: 'Must be a valid IPv6 address.',
-                  });
-                  handleIPv6Change(validatedIPs);
-                }}
                 onChange={handleIPv6Change}
                 title="IPv6 Addresses or CIDRs"
               />

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

@@ -48,7 +48,7 @@ import { useAllTypes } from 'src/queries/types';
 import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';
 import { extendType } from 'src/utilities/extendType';
 import { filterCurrentTypes } from 'src/utilities/filterCurrentLinodeTypes';
-import { stringToExtendedIP } from 'src/utilities/ipUtils';
+import { stringToExtendedIP, validateIPs } from 'src/utilities/ipUtils';
 import {
   DOCS_LINK_LABEL_DC_PRICING,
   UNKNOWN_PRICE,
@@ -537,10 +537,18 @@ export const CreateCluster = () => {
                 enableControlPlaneACL={controlPlaneACL}
                 errorText={errorMap.control_plane}
                 handleIPv4Change={(newIpV4Addr: ExtendedIP[]) => {
-                  setIPv4Addr(newIpV4Addr);
+                  const validatedIPs = validateIPs(newIpV4Addr, {
+                    allowEmptyAddress: true,
+                    errorMessage: 'Must be a valid IPv4 address.',
+                  });
+                  setIPv4Addr(validatedIPs);
                 }}
                 handleIPv6Change={(newIpV6Addr: ExtendedIP[]) => {
-                  setIPv6Addr(newIpV6Addr);
+                  const validatedIPs = validateIPs(newIpV6Addr, {
+                    allowEmptyAddress: true,
+                    errorMessage: 'Must be a valid IPv6 address.',
+                  });
+                  setIPv6Addr(validatedIPs);
                 }}
                 handleIsAcknowledgementChecked={(isChecked: boolean) => {
                   setIsACLAcknowledgementChecked(isChecked);