fix: [M3-9769] - Enhanced number input for LKE and LKE-E (#12046)

## Description 📝
Fix Enhanced Number Input component only displaying the first digit and update max nodes to 500 for LKE-E Add Node Pool table and Resize drawer

## How to test 🧪

### Prerequisites

(How to setup test environment)

- Ensure you have LKE-E customer tags (see project tracker)

### Verification steps

(How to verify changes)

- [ ] Checkout this PR or preview link, go to `/kubernetes/create`, select LKE tier and region, and go to the Add Node Pools table
- [ ] Update one of the number inputs to a 2-digit and 3-digit value
- [ ] All digits display without getting cut off
- [ ] LKE-E tier has a max of 500 nodes you can add at a time

```
pnpm test KubernetesPlanSelection
```
```
pnpm cy:run -s "cypress/e2e/core/kubernetes/lke-create.spec.ts
```

---------

Co-authored-by: mjac0bs <mjacobs@akamai.com>

Author: hana-akamai

packages/manager/.changeset/pr-12046-fixed-1744906900651.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Enhanced Number Input component only displaying the first digit and update max nodes to 500 for LKE-E Add Node Pool table and Resize drawer ([#12046](https://github.com/linode/manager/pull/12046))

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

@@ -274,6 +274,11 @@ describe('LKE Cluster Creation', () => {
         .within(() => {
           cy.get(quantityInput).should('be.visible');
           cy.get(quantityInput).click();
+
+          // Ensure the max node count is 100 for LKE
+          cy.get(quantityInput).type(`{selectall}101`);
+          cy.get(quantityInput).should('have.value', 100);
+
           cy.get(quantityInput).type(`{selectall}${nodeCount}`);
 
           ui.button
@@ -1318,6 +1323,7 @@ describe('LKE Cluster Creation with LKE-E', () => {
      * - Confirms the checkout bar displays the correct LKE-E info
      * - Confirms an enterprise cluster can be created with the correct chip, version, and price
      * - Confirms that the total node count for each pool is displayed
+     * - Confirms that the max nodes is 500
      */
     it('creates an LKE-E cluster with the account capability', () => {
       const clusterLabel = randomLabel();
@@ -1503,6 +1509,11 @@ describe('LKE Cluster Creation with LKE-E', () => {
           .within(() => {
             cy.get(quantityInput).should('be.visible');
             cy.get(quantityInput).click();
+
+            // Ensure the max node count is 500 for LKE-E
+            cy.get(quantityInput).type(`{selectall}501`);
+            cy.get(quantityInput).should('have.value', 500);
+
             cy.get(quantityInput).type(`{selectall}${nodeCount}`);
 
             ui.button

packages/manager/src/components/DeletionDialog/DeletionDialog.tsx

@@ -22,16 +22,8 @@ export interface DeletionDialogProps extends Omit<DialogProps, 'title'> {
 
 export const DeletionDialog = React.memo((props: DeletionDialogProps) => {
   const theme = useTheme();
-  const {
-    entity,
-    error,
-    label,
-    loading,
-    onClose,
-    onDelete,
-    open,
-    ...rest
-  } = props;
+  const { entity, error, label, loading, onClose, onDelete, open, ...rest } =
+    props;
 
   const { data: typeToConfirmPreference } = usePreferences(
     (preferences) => preferences?.type_to_confirm ?? true

packages/manager/src/components/EnhancedNumberInput/EnhancedNumberInput.tsx

@@ -23,8 +23,8 @@ const sxTextField = {
   height: 34,
   margin: '0 5px',
   minHeight: 30,
-  minWidth: 40,
-  width: 53,
+  minWidth: 53,
+  maxWidth: 70,
 };
 
 interface EnhancedNumberInputProps {

packages/manager/src/factories/managed.ts

@@ -78,27 +78,24 @@ export const managedIssueFactory = Factory.Sync.makeFactory<ManagedIssue>({
   services: [],
 });
 
-export const managedSSHSettingFactory = Factory.Sync.makeFactory<ManagedSSHSetting>(
-  {
+export const managedSSHSettingFactory =
+  Factory.Sync.makeFactory<ManagedSSHSetting>({
     access: true,
     ip: 'any',
     port: 22,
     user: 'root',
-  }
-);
+  });
 
-export const managedLinodeSettingFactory = Factory.Sync.makeFactory<ManagedLinodeSetting>(
-  {
+export const managedLinodeSettingFactory =
+  Factory.Sync.makeFactory<ManagedLinodeSetting>({
     group: 'linodes',
     id: Factory.each((i) => i),
     label: Factory.each((i) => `Managed Linode ${i}`),
     ssh: managedSSHSettingFactory.build(),
-  }
-);
+  });
 
-export const managedSSHPubKeyFactory = Factory.Sync.makeFactory<ManagedSSHPubKey>(
-  {
+export const managedSSHPubKeyFactory =
+  Factory.Sync.makeFactory<ManagedSSHPubKey>({
     ssh_key:
       'ssh-rsa MOCKEDSSHKEYMOCKEDSSHKEYMOCKEDSSHKEYMOCKEDSSHKEYMOCKEDSSHKEYMOCKEDSSHKEYMOCKEDSSHKEYMOCKEDSSHKEYMOCKEDSSHKEY managedservices@linode',
-  }
-);
+  });

packages/manager/src/features/Kubernetes/ClusterList/constants.ts

@@ -56,7 +56,11 @@ import {
 import { getDCSpecificPriceByType } from 'src/utilities/pricing/dynamicPricing';
 import { reportAgreementSigningError } from 'src/utilities/reportAgreementSigningError';
 
-import { CLUSTER_VERSIONS_DOCS_LINK } from '../constants';
+import {
+  CLUSTER_VERSIONS_DOCS_LINK,
+  MAX_NODES_PER_POOL_ENTERPRISE_TIER,
+  MAX_NODES_PER_POOL_STANDARD_TIER,
+} from '../constants';
 import KubeCheckoutBar from '../KubeCheckoutBar';
 import { ApplicationPlatform } from './ApplicationPlatform';
 import { ClusterNetworkingPanel } from './ClusterNetworkingPanel';
@@ -115,13 +119,10 @@ export const CreateCluster = () => {
   const [ipV6Addr, setIPv6Addr] = React.useState<ExtendedIP[]>([
     stringToExtendedIP(''),
   ]);
-  const [selectedTier, setSelectedTier] = React.useState<KubernetesTier>(
-    'standard'
-  );
-  const [
-    isACLAcknowledgementChecked,
-    setIsACLAcknowledgementChecked,
-  ] = React.useState(false);
+  const [selectedTier, setSelectedTier] =
+    React.useState<KubernetesTier>('standard');
+  const [isACLAcknowledgementChecked, setIsACLAcknowledgementChecked] =
+    React.useState(false);
 
   const {
     data: kubernetesHighAvailabilityTypesData,
@@ -151,6 +152,21 @@ export const CreateCluster = () => {
       // Clear the ACL error if the tier is switched, since standard tier doesn't require it
       setErrors(undefined);
     }
+
+    // If a user adds > 100 nodes in the LKE-E flow but then switches to LKE, set the max node count to 100 for correct price display
+    if (isLkeEnterpriseLAFeatureEnabled) {
+      setNodePools(
+        nodePools.map((nodePool) => ({
+          ...nodePool,
+          count: Math.min(
+            nodePool.count,
+            tier === 'enterprise'
+              ? MAX_NODES_PER_POOL_ENTERPRISE_TIER
+              : MAX_NODES_PER_POOL_STANDARD_TIER
+          ),
+        }))
+      );
+    }
   };
 
   const lkeHAType = kubernetesHighAvailabilityTypesData?.find(
@@ -174,18 +190,14 @@ export const CreateCluster = () => {
   // Only want to use current types here.
   const typesData = filterCurrentTypes(allTypes?.map(extendType));
 
-  const {
-    mutateAsync: createKubernetesCluster,
-  } = useCreateKubernetesClusterMutation();
+  const { mutateAsync: createKubernetesCluster } =
+    useCreateKubernetesClusterMutation();
 
-  const {
-    mutateAsync: createKubernetesClusterBeta,
-  } = useCreateKubernetesClusterBetaMutation();
+  const { mutateAsync: createKubernetesClusterBeta } =
+    useCreateKubernetesClusterBetaMutation();
 
-  const {
-    isLkeEnterpriseLAFeatureEnabled,
-    isLkeEnterpriseLAFlagEnabled,
-  } = useIsLkeEnterpriseEnabled();
+  const { isLkeEnterpriseLAFeatureEnabled, isLkeEnterpriseLAFlagEnabled } =
+    useIsLkeEnterpriseEnabled();
 
   const {
     isLoadingVersions,

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

@@ -8,7 +8,7 @@ import { extendType } from 'src/utilities/extendType';
 import {
   ADD_NODE_POOLS_DESCRIPTION,
   ADD_NODE_POOLS_ENTERPRISE_DESCRIPTION,
-} from '../ClusterList/constants';
+} from '../constants';
 import { KubernetesPlansPanel } from '../KubernetesPlansPanel/KubernetesPlansPanel';
 import { PremiumCPUPlanNotice } from './PremiumCPUPlanNotice';
 

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

@@ -147,6 +147,10 @@ export const KubeCheckoutBar = (props: Props) => {
         )}
         {pools.map((thisPool, idx) => (
           <NodePoolSummaryItem
+            clusterTier={enterprisePrice ? 'enterprise' : 'standard'}
+            key={idx}
+            nodeCount={thisPool.count}
+            onRemove={() => removePool(idx)}
             poolType={
               types?.find((thisType) => thisType.id === thisPool.type) || null
             }
@@ -163,9 +167,6 @@ export const KubeCheckoutBar = (props: Props) => {
             updateNodeCount={(updatedCount: number) =>
               updatePool(idx, { ...thisPool, count: updatedCount })
             }
-            key={idx}
-            nodeCount={thisPool.count}
-            onRemove={() => removePool(idx)}
           />
         ))}
         <Divider dark spacingBottom={0} spacingTop={16} />

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

@@ -5,6 +5,10 @@ import * as React from 'react';
 
 import { DisplayPrice } from 'src/components/DisplayPrice';
 import { EnhancedNumberInput } from 'src/components/EnhancedNumberInput/EnhancedNumberInput';
+import {
+  MAX_NODES_PER_POOL_ENTERPRISE_TIER,
+  MAX_NODES_PER_POOL_STANDARD_TIER,
+} from 'src/features/Kubernetes/constants';
 
 import {
   StyledHeader,
@@ -13,9 +17,11 @@ import {
   StyledPriceBox,
 } from './KubeCheckoutSummary.styles';
 
+import type { KubernetesTier } from '@linode/api-v4';
 import type { ExtendedType } from 'src/utilities/extendType';
 
 export interface Props {
+  clusterTier?: KubernetesTier;
   nodeCount: number;
   onRemove: () => void;
   poolType: ExtendedType | null;
@@ -24,7 +30,8 @@ export interface Props {
 }
 
 export const NodePoolSummaryItem = React.memo((props: Props) => {
-  const { nodeCount, onRemove, poolType, price, updateNodeCount } = props;
+  const { nodeCount, onRemove, poolType, price, updateNodeCount, clusterTier } =
+    props;
 
   // This should never happen but TS wants us to account for the situation
   // where we fail to match a selected type against our types list.
@@ -55,6 +62,11 @@ export const NodePoolSummaryItem = React.memo((props: Props) => {
         </Box>
         <Box mb={1.5} mt={2}>
           <EnhancedNumberInput
+            max={
+              clusterTier === 'enterprise'
+                ? MAX_NODES_PER_POOL_ENTERPRISE_TIER
+                : MAX_NODES_PER_POOL_STANDARD_TIER
+            }
             min={1}
             setValue={updateNodeCount}
             value={nodeCount}