[LKEAPIFW-428] Another round of UI tweaks: multiline IP default value…

…s; IPACL drawer showing enabled only when enabled wip
linode · Oct 1, 2024 · 4cd457e · 4cd457e
1 parent 9062c19
commit 4cd457e
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 22 deletions.
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.tsx
@@ -71,7 +71,7 @@ export const ControlPlaneACLPane = (props: ControlPlaneACLProps) => {
         </Typography>
       </FormLabel>
       <IPACLCopy />
-      <Box sx={{ marginTop: 2 }}>
+      <Box sx={{ marginTop: 2, marginBottom: 1 }}>
         <FormControlLabel
           control={
             <Toggle
@@ -84,7 +84,7 @@ export const ControlPlaneACLPane = (props: ControlPlaneACLProps) => {
         />
       </Box>
       {enableControlPlaneACL && (
-        <Stack sx={{ marginBottom: 4 }}>
+        <Stack sx={{ marginBottom: 3 }}>
           <MultipleIPInput
             buttonText="Add IP Address"
             ips={ipV4Addr}

diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
@@ -52,7 +52,7 @@ import {
 import { HAControlPlane } from './HAControlPlane';
 import { ControlPlaneACLPane } from './ControlPlaneACLPane';
 import { NodePoolPanel } from './NodePoolPanel';
-import { ExtendedIP } from 'src/utilities/ipUtils';
+import { ExtendedIP, stringToExtendedIP } from 'src/utilities/ipUtils';
 
 import type {
   CreateKubeClusterPayload,
@@ -82,8 +82,12 @@ export const CreateCluster = () => {
   const { data: account } = useAccount();
   const { showHighAvailability } = getKubeHighAvailability(account);
   const { showControlPlaneACL } = getKubeControlPlaneACL(account);
-  const [ipV4Addr, setIPv4Addr] = React.useState<ExtendedIP[]>([]);
-  const [ipV6Addr, setIPv6Addr] = React.useState<ExtendedIP[]>([]);
+  const [ipV4Addr, setIPv4Addr] = React.useState<ExtendedIP[]>([
+    stringToExtendedIP(''),
+  ]);
+  const [ipV6Addr, setIPv6Addr] = React.useState<ExtendedIP[]>([
+    stringToExtendedIP(''),
+  ]);
 
   const {
     data: kubernetesHighAvailabilityTypesData,

diff --git a/...es/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterControlPlaneACL.tsx b/...es/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterControlPlaneACL.tsx
@@ -130,7 +130,7 @@ export const KubeClusterControlPlaneACL = React.memo((props: Props) => {
 
   const availableActions = [
     isLoadingKubernetesACL ? (
-      <CircleProgress size="sm" sx={{ marginTop: 0 }} />
+      <CircleProgress size="sm" noPadding />
     ) : failedMigrationStatus() ? (
       <NotMigratedCopy />
     ) : enabledACL ? (

diff --git a/...ages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx b/...ages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx
@@ -59,6 +59,8 @@ export const KubeControlPlaneACLDrawer = (props: Props) => {
 
   const _revisionID = data?.acl?.['revision-id'];
 
+  const _hideEnableFromUI = !clusterMigrated || !_enabled;
+
   // respective react states
   const [ipV4Addr, setIPv4Addr] = React.useState<ExtendedIP[]>([]);
   const [ipV6Addr, setIPv6Addr] = React.useState<ExtendedIP[]>([]);
@@ -72,17 +74,19 @@ export const KubeControlPlaneACLDrawer = (props: Props) => {
   React.useEffect(() => {
     if (open && !isLoadingKubernetesACL && !isFetchingKubernetesACL) {
       // updates states based on queried data
-      setIPv4Addr(
-        _ipv4 ? _ipv4 : clusterMigrated ? [] : [stringToExtendedIP('0.0.0.0/0')]
-      );
-      setIPv6Addr(
-        _ipv6 ? _ipv6 : clusterMigrated ? [] : [stringToExtendedIP('::/0')]
-      );
+      setIPv4Addr(_ipv4 ? _ipv4 : [stringToExtendedIP('')]);
+      setIPv6Addr(_ipv6 ? _ipv6 : [stringToExtendedIP('')]);
       setControlPlaneACL(_enabled ? _enabled : false);
       setRevisionID(_revisionID ? _revisionID : '');
       setUpdateACLError(isErrorKubernetesACL?.[0].reason);
       setUpdating(false);
-      setSubmitButtonLabel(clusterMigrated ? 'Update' : 'Install');
+      setSubmitButtonLabel(
+        _hideEnableFromUI
+          ? 'Enable IPACL'
+          : clusterMigrated
+          ? 'Update IPACL'
+          : 'Install IPACL'
+      );
       refetchKubernetesACL();
     }
   }, [open]);
@@ -121,7 +125,7 @@ export const KubeControlPlaneACLDrawer = (props: Props) => {
 
     const payload: KubernetesControlPlaneACLPayload = {
       acl: {
-        enabled: clusterMigrated ? controlPlaneACL : true, // new cluster installations default to true
+        enabled: _hideEnableFromUI ? true : controlPlaneACL, // both new cluster installations as well as all the states where the UI disabled the option for the user to enable, we default to true
         'revision-id': revisionID,
         ...((_ipv4.length > 0 || _ipv6.length > 0) && {
           addresses: {
@@ -188,11 +192,10 @@ export const KubeControlPlaneACLDrawer = (props: Props) => {
     if (!clusterMigrated) {
       return (
         <>
-          <Notice spacingTop={8} variant="error">
+          <Notice spacingTop={24} variant="warning">
             IPACL is not yet installed on this cluster.... may take up to 10
             minutes or more, before ACLs are enforced...
           </Notice>
-          <Divider sx={{ marginTop: 1 }} />
         </>
       );
     } else {
@@ -264,7 +267,7 @@ export const KubeControlPlaneACLDrawer = (props: Props) => {
         <Grid>
           <Typography variant="h3">Addresses</Typography>
         </Grid>
-        <Grid>
+        <Grid sx={{ marginBottom: 1 }}>
           <Typography variant="body1">
             A list of individual ipv4 and ipv6 addresses or CIDRs to ALLOW
             access to the control plane.
@@ -299,9 +302,7 @@ export const KubeControlPlaneACLDrawer = (props: Props) => {
           </Grid>
           <Divider sx={{ marginTop: 3, marginBottom: 3 }} />
 
-          <ClusterNeedsMigration />
-
-          {clusterMigrated && (
+          {!_hideEnableFromUI && (
             <>
               <EnabledCopy />
               <Box sx={{ marginTop: 2 }}>
@@ -327,6 +328,7 @@ export const KubeControlPlaneACLDrawer = (props: Props) => {
           <RevisionID />
 
           <AddressesCopy />
+          <ErrorMessage />
           <MultipleIPInput
             buttonText="Add IP Address"
             ips={ipV4Addr}
@@ -367,7 +369,7 @@ export const KubeControlPlaneACLDrawer = (props: Props) => {
             secondaryButtonProps={{ label: 'Cancel', onClick: closeDrawer }}
           />
 
-          <ErrorMessage />
+          <ClusterNeedsMigration />
         </Stack>
       </DrawerContent>
     </Drawer>

diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.styles.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.styles.tsx
@@ -72,7 +72,7 @@ export const StyledBox = styled(Box, { label: 'StyledBox' })(({ theme }) => ({
 export const StyledLabelBox = styled(Box, { label: 'StyledLabelBox' })(
   ({ theme }) => ({
     fontFamily: theme.font.bold,
-    marginRight: '4px',
+    marginRight: '8px',
   })
 );