feat: [M3-10064] - Allow Node Pool Update Strategy to be configured when adding a Node Pool (linode#12631)

* initial clean up

* loading state and fixes

* don't show firewall for now

* fix typecheck

* add a cypress test

* undo indenting changes but keep new test

* fix spelling causing tests to fail

* last test fix

* Added changeset: Allow Node Pool Update Strategy to be configured when adding an enterprise node pool

* Added changeset: Refactor the Add Node Pool drawer to use `react-hook-form`

---------

Co-authored-by: Banks Nussman <[email protected]>

Author: bnussman-akamai

packages/manager/.changeset/pr-12631-tech-stories-1754929021333.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Refactor the Add Node Pool drawer to use `react-hook-form` ([#12631](https://github.com/linode/manager/pull/12631))

packages/manager/.changeset/pr-12631-upcoming-features-1754928989964.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Allow Node Pool Update Strategy to be configured when adding an enterprise node pool ([#12631](https://github.com/linode/manager/pull/12631))

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

@@ -14,6 +14,7 @@ import {
   mockGetLinodeTypes,
 } from 'support/intercepts/linodes';
 import {
+  interceptCreateNodePool,
   mockAddNodePool,
   mockDeleteNodePool,
   mockGetApiEndpoints,
@@ -980,6 +981,85 @@ describe('LKE cluster updates', () => {
       ui.toast.assertMessage('Successfully reset Kubeconfig');
     });
 
+    it('can add a node pool with an update strategy on an LKE enterprise cluster', () => {
+      const cluster = kubernetesClusterFactory.build({
+        tier: 'enterprise',
+      });
+      const account = accountFactory.build({
+        capabilities: ['Kubernetes Enterprise'],
+      });
+      const type = linodeTypeFactory.build({
+        class: 'dedicated',
+        label: 'Fake Plan',
+      });
+
+      mockAppendFeatureFlags({
+        lkeEnterprise: {
+          enabled: true,
+          postLa: true,
+        },
+      });
+
+      mockGetAccount(account).as('getAccount');
+      mockGetCluster(cluster).as('getCluster');
+      mockGetClusterPools(cluster.id, []).as('getNodePools');
+      mockGetLinodeTypes([type]).as('getTypes');
+
+      cy.visitWithLogin(`/kubernetes/clusters/${cluster.id}`);
+
+      cy.wait(['@getCluster', '@getNodePools', '@getAccount']);
+
+      ui.button
+        .findByTitle('Add a Node Pool')
+        .should('be.visible')
+        .should('be.enabled')
+        .click();
+
+      cy.wait('@getTypes');
+
+      // Selet a plan
+      cy.get(`[data-qa-plan-row="${type.label}"]`).within(() => {
+        // Increment nodes 3 times
+        cy.findByLabelText('Add 1').should('be.enabled').click();
+        cy.findByLabelText('Add 1').should('be.enabled').click();
+        cy.findByLabelText('Add 1').should('be.enabled').click();
+      });
+
+      interceptCreateNodePool(cluster.id).as('createNodePool');
+
+      ui.drawer.findByTitle(`Add a Node Pool: ${cluster.label}`).within(() => {
+        cy.findByLabelText('Update Strategy')
+          .should('be.visible')
+          .should('be.enabled')
+          .should('have.value', 'On Recycle Updates') // Should default to "On Recycle"
+          .click(); // Open the Autocomplete
+
+        ui.autocompletePopper
+          .findByTitle('Rolling Updates') // Select "Rolling Updates"
+          .should('be.visible')
+          .should('be.enabled')
+          .click();
+
+        // Verify the field's value actually changed
+        cy.findByLabelText('Update Strategy').should(
+          'have.value',
+          'Rolling Updates'
+        );
+
+        ui.button
+          .findByTitle('Add pool')
+          .should('be.enabled')
+          .should('be.visible')
+          .click();
+      });
+
+      cy.wait('@createNodePool').then((intercept) => {
+        const payload = intercept.request.body;
+        expect(payload.update_strategy).to.equal('rolling_update');
+        expect(payload.type).to.equal(type.id);
+      });
+    });
+
     /*
      * - Confirms UI flow when adding and deleting node pools.
      * - Confirms that user cannot delete a node pool when there is only 1 pool.

packages/manager/cypress/support/intercepts/lke.ts

@@ -254,6 +254,17 @@ export const mockAddNodePool = (
   );
 };
 
+/**
+ * Intercepts POST request to create Node Pool.
+ *
+ * @returns Cypress chainable.
+ */
+export const interceptCreateNodePool = (
+  clusterId: number
+): Cypress.Chainable<null> => {
+  return cy.intercept('POST', apiMatcher(`lke/clusters/${clusterId}/pools`));
+};
+
 /**
  * Intercepts PUT request to update a node pool and mocks the response.
  *

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

@@ -1,4 +1,4 @@
-import { useAccount, useRegionsQuery } from '@linode/queries';
+import { useAccount } from '@linode/queries';
 import { Box, CircleProgress, ErrorState, Notice, Stack } from '@linode/ui';
 import { useLocation, useParams } from '@tanstack/react-router';
 import * as React from 'react';
@@ -24,21 +24,9 @@ import { NodePoolsDisplay } from './NodePoolsDisplay/NodePoolsDisplay';
 import { UpgradeKubernetesClusterToHADialog } from './UpgradeClusterDialog';
 import UpgradeKubernetesVersionBanner from './UpgradeKubernetesVersionBanner';
 
-const restrictedLkeNotice = (
-  <Notice
-    text={getRestrictedResourceText({
-      action: 'edit',
-      resourceType: 'LKE Clusters',
-      isSingular: true,
-    })}
-    variant="warning"
-  />
-);
-
 export const KubernetesClusterDetail = () => {
   const { data: account } = useAccount();
-  const { clusterId } = useParams({ from: '/kubernetes/clusters/$clusterId' });
-  const id = Number(clusterId);
+  const { clusterId: id } = useParams({ from: '/kubernetes/clusters/$clusterId' });
   const location = useLocation();
   const { showAPL } = useAPLAvailability();
   const { isUsingBetaEndpoint } = useKubernetesBetaEndpoint();
@@ -51,7 +39,6 @@ export const KubernetesClusterDetail = () => {
     id,
     isUsingBetaEndpoint,
   });
-  const { data: regionsData } = useRegionsQuery();
 
   const { mutateAsync: updateKubernetesCluster } =
     useKubernetesClusterMutation(id);
@@ -114,7 +101,16 @@ export const KubernetesClusterDetail = () => {
           currentVersion={cluster?.k8s_version}
         />
       )}
-      {isClusterReadOnly && restrictedLkeNotice}
+      {isClusterReadOnly && (
+        <Notice
+          text={getRestrictedResourceText({
+            action: 'edit',
+            resourceType: 'LKE Clusters',
+            isSingular: true,
+          })}
+          variant="warning"
+        />
+      )}
       <LandingHeader
         breadcrumbProps={{
           breadcrumbDataAttrs: { 'data-qa-breadcrumb': true },
@@ -159,7 +155,6 @@ export const KubernetesClusterDetail = () => {
             clusterRegionId={cluster.region}
             clusterTier={cluster.tier ?? 'standard'}
             isLkeClusterRestricted={isClusterReadOnly}
-            regionsData={regionsData || []}
           />
         </Stack>
         <UpgradeKubernetesClusterToHADialog

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.test.tsx

@@ -13,7 +13,6 @@ const props: Props = {
   clusterTier: 'standard',
   onClose: vi.fn(),
   open: true,
-  regionsData: [],
 };
 
 describe('AddNodePoolDrawer', () => {
@@ -34,6 +33,6 @@ describe('AddNodePoolDrawer', () => {
       <AddNodePoolDrawer {...props} clusterTier="enterprise" />
     );
 
-    await expect(queryByText('GPU')).toBeNull();
+    expect(queryByText('GPU')).toBeNull();
   });
 });