feat: [M3-10039M, M3-10382] - Configure Kubernetes Node Pool Drawer (linode#12710)

* setup initial drawer and form components

* add more fields to the new drawer

* handle nodepool label properly throughout LKE

* add feature flag and cluster tier logic

* begin unit testing

* add an e2e-like unit test

* support tags

* fix typo in the unit test comment

* fix up ResizeNodePoolDrawer unit test to account for node pool label change in drawer title

* fix unit test after adding tag support

* change tags select label to just be `Tags`

* ensure error is surfaced

* keep the word `Plan` in drawer headers

* update unit test to account for re-adding the `Plan` suffix to drawer titles

* update version select logic to only include valid versions

* improve unit test

* use v4beta PUT endpoint so new fields actually work

* Added changeset: Configure Node Pool Drawer to Kubernetes Cluster details page

* Added changeset: Support for Node Pool `label` field

* Added changeset: Use `v4beta` API endpoint for `updateNodePool`

* fix spelling in comment

* hide label & tag fields becuasse they lack PDT commitment

* finish up comments

* one more comment

* Apply suggestions from code review

Co-authored-by: Mariah Jacobs <[email protected]>

* change changeset to be an upcoming feature

* use shared `NodePoolConfigOptions` component @mjac0bs

* work on error surfacing

* restore inline validation, hopefully it works

* `firewall_id` validation is working, but could use some clean up

* undo unnessesary validation change

* Revert "undo unnessesary validation change"

This reverts commit baa45ee.

* fix double save issue

* clean up

* fix form label issues in theme

* don't allow user to select default firewall once one has been set

* improve validation message

* fix label html issue

* unit test `getNodePoolVersionOptions`

* lint

* address feedback regarding `useNodePoolDisplayLabel`

* make node pool firewall_id bahavior more forwards compatible with upcoming api changes

* add comments

---------

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

Author: 3 people

packages/api-v4/.changeset/pr-12710-added-1755540316502.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Added
+---
+
+Support for Node Pool `label` field ([#12710](https://github.com/linode/manager/pull/12710))

packages/api-v4/.changeset/pr-12710-changed-1755540489818.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+Use `v4beta` API endpoint for `updateNodePool` ([#12710](https://github.com/linode/manager/pull/12710))

packages/api-v4/src/kubernetes/nodePools.ts

@@ -77,7 +77,7 @@ export const updateNodePool = (
   Request<KubeNodePoolResponse>(
     setMethod('PUT'),
     setURL(
-      `${API_ROOT}/lke/clusters/${encodeURIComponent(
+      `${BETA_API_ROOT}/lke/clusters/${encodeURIComponent(
         clusterID,
       )}/pools/${encodeURIComponent(nodePoolID)}`,
     ),

packages/api-v4/src/kubernetes/types.ts

@@ -70,6 +70,12 @@ export interface KubeNodePoolResponse {
    * @note Only returned for LKE Enterprise clusters
    */
   k8s_version?: string;
+  /**
+   * A label/name for the Node Pool
+   *
+   * @default ""
+   */
+  label: string;
   labels: Label;
   nodes: PoolNodeResponse[];
   tags: string[];
@@ -112,6 +118,12 @@ export interface CreateNodePoolData {
    * @note This field may be required when creating a Node Pool on a LKE Enterprise cluster
    */
   k8s_version?: string;
+  /**
+   * An optional label/name for the Node Pool.
+   *
+   * @default ""
+   */
+  label?: string;
   /**
    * Key-value pairs added as labels to nodes in the node pool.
    */

packages/manager/.changeset/pr-12710-upcoming-features-1755540220652.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Configure Node Pool Drawer to Kubernetes Cluster details page ([#12710](https://github.com/linode/manager/pull/12710))

packages/manager/src/factories/kubernetesCluster.ts

@@ -19,6 +19,7 @@ export const kubeLinodeFactory = Factory.Sync.makeFactory<PoolNodeResponse>({
 });
 
 export const nodePoolFactory = Factory.Sync.makeFactory<KubeNodePoolResponse>({
+  label: '',
   autoscaler: {
     enabled: false,
     max: 1,

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

@@ -156,6 +156,7 @@ export const KubernetesClusterDetail = () => {
             clusterLabel={cluster.label}
             clusterRegionId={cluster.region}
             clusterTier={cluster.tier ?? 'standard'}
+            clusterVersion={cluster.k8s_version}
             isLkeClusterRestricted={isClusterReadOnly}
           />
         </Stack>

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

@@ -207,8 +207,6 @@ export const AddNodePoolDrawer = (props: Props) => {
                 name="update_strategy"
                 render={({ field }) => (
                   <NodePoolUpdateStrategySelect
-                    label="Update Strategy"
-                    noMarginTop
                     onChange={field.onChange}
                     value={field.value!}
                   />

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

@@ -1,4 +1,3 @@
-import { useSpecificTypes } from '@linode/queries';
 import {
   ActionsPanel,
   Box,
@@ -18,12 +17,12 @@ import { makeStyles } from 'tss-react/mui';
 import { EnhancedNumberInput } from 'src/components/EnhancedNumberInput/EnhancedNumberInput';
 import { Link } from 'src/components/Link';
 import { useUpdateNodePoolMutation } from 'src/queries/kubernetes';
-import { extendType } from 'src/utilities/extendType';
 
 import {
   MAX_NODES_PER_POOL_ENTERPRISE_TIER,
   MAX_NODES_PER_POOL_STANDARD_TIER,
 } from '../../constants';
+import { useNodePoolDisplayLabel } from './utils';
 
 import type {
   AutoscaleSettings,
@@ -88,6 +87,7 @@ export const AutoscaleNodePoolDrawer = (props: Props) => {
     open,
   } = props;
   const autoscaler = nodePool?.autoscaler;
+  const nodePoolLabel = useNodePoolDisplayLabel(nodePool, { suffix: 'Plan' });
   const { classes, cx } = useStyles();
   const { enqueueSnackbar } = useSnackbar();
 
@@ -96,12 +96,6 @@ export const AutoscaleNodePoolDrawer = (props: Props) => {
     nodePool?.id ?? -1
   );
 
-  const typesQuery = useSpecificTypes(nodePool?.type ? [nodePool.type] : []);
-
-  const planType = typesQuery[0]?.data
-    ? extendType(typesQuery[0].data)
-    : undefined;
-
   const {
     clearErrors,
     control,
@@ -189,7 +183,7 @@ export const AutoscaleNodePoolDrawer = (props: Props) => {
     <Drawer
       onClose={handleClose}
       open={open}
-      title={`Autoscale Pool: ${planType?.formattedLabel ?? 'Unknown'} Plan`}
+      title={`Autoscale Pool: ${nodePoolLabel}`}
     >
       {errors.root?.message ? (
         <Notice spacingBottom={16} text={errors.root.message} variant="error" />

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ConfigureNodePool/ConfigureNodePoolDrawer.tsx

@@ -0,0 +1,40 @@
+import { Drawer } from '@linode/ui';
+import React from 'react';
+
+import { useNodePoolDisplayLabel } from '../utils';
+import { ConfigureNodePoolForm } from './ConfigureNodePoolForm';
+
+import type { KubeNodePoolResponse, KubernetesCluster } from '@linode/api-v4';
+
+interface Props {
+  clusterId: KubernetesCluster['id'];
+  clusterTier: KubernetesCluster['tier'];
+  clusterVersion: KubernetesCluster['k8s_version'];
+  nodePool: KubeNodePoolResponse | undefined;
+  onClose: () => void;
+  open: boolean;
+}
+
+export const ConfigureNodePoolDrawer = (props: Props) => {
+  const { nodePool, onClose, clusterId, open, clusterTier, clusterVersion } =
+    props;
+  const nodePoolLabel = useNodePoolDisplayLabel(nodePool, { suffix: 'Plan' });
+
+  return (
+    <Drawer
+      onClose={onClose}
+      open={open}
+      title={`Configure Node Pool: ${nodePoolLabel}`}
+    >
+      {nodePool && (
+        <ConfigureNodePoolForm
+          clusterId={clusterId}
+          clusterTier={clusterTier}
+          clusterVersion={clusterVersion}
+          nodePool={nodePool}
+          onDone={onClose}
+        />
+      )}
+    </Drawer>
+  );
+};