change: [M3-10411] - Move LKE Node Pool actions into an Action Menu and other enhancements (linode#12619)

* wow, so much clean up needed

* improve unit testing

* clean up more

* put all node pool actions into the action menu at all times

* clean up unit test

* make pool id easily copyable

* make divider in footer not look fuzzy 🐈

* use semantically correct h3 rather than h2 for node pool header

* update cypress tests to account for action menu

* hopefully fix remaining cypress tests

* fix last two lke cypress tests

* fix typecheck

* Added changeset: Move all Kubernetes Node Pool actions into an Action Menu

* Added changeset: Node Pool headers from `h2` to `h3`

* Added changeset: Refactored single disk encryption status component into two seperate components (Node Pool and Linodes)

* Added changeset: Made Node Pool ID copyable

* Improve changelogs

* Fix typo in component name

* Update packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx

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

* fix linode encyrption status logic and spacing

---------

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

Author: 4 people

packages/manager/.changeset/pr-12619-added-1754334564814.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Copyable Node Pool ID ([#12619](https://github.com/linode/manager/pull/12619))

packages/manager/.changeset/pr-12619-changed-1754334277110.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Move all Kubernetes Node Pool actions into an Action Menu ([#12619](https://github.com/linode/manager/pull/12619))

packages/manager/.changeset/pr-12619-changed-1754334421249.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Node Pool headers from `h2` to `h3` ([#12619](https://github.com/linode/manager/pull/12619))

packages/manager/.changeset/pr-12619-tech-stories-1754334520206.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Refactor single disk encryption status component into two separate components (Node Pool and Linodes) ([#12619](https://github.com/linode/manager/pull/12619))

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

@@ -373,7 +373,7 @@ describe('LKE Cluster Creation', () => {
       cy.contains('Kubernetes API Endpoint').should('be.visible');
       cy.contains('linodelke.net:443').should('be.visible');
 
-      cy.findAllByText(nodePoolLabel, { selector: 'h2' })
+      cy.findAllByText(nodePoolLabel, { selector: 'h3' })
         .should('have.length', similarNodePoolCount)
         .first()
         .should('be.visible');

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

@@ -422,7 +422,12 @@ describe('LKE cluster updates', () => {
       cy.wait('@recycleNode');
       ui.toast.assertMessage('Node queued for recycling.');
 
-      ui.button
+      ui.actionMenu
+        .findByTitle(`Action menu for Node Pool ${mockNodePool.id}`)
+        .should('be.visible')
+        .click();
+
+      ui.actionMenuItem
         .findByTitle('Recycle Pool Nodes')
         .should('be.visible')
         .should('be.enabled')
@@ -542,7 +547,13 @@ describe('LKE cluster updates', () => {
       mockGetClusterPools(mockCluster.id, [mockNodePoolAutoscale]).as(
         'getNodePools'
       );
-      ui.button
+
+      ui.actionMenu
+        .findByTitle(`Action menu for Node Pool ${mockNodePool.id}`)
+        .should('be.visible')
+        .click();
+
+      ui.actionMenuItem
         .findByTitle('Autoscale Pool')
         .should('be.visible')
         .should('be.enabled')
@@ -586,14 +597,20 @@ describe('LKE cluster updates', () => {
       ui.toast.assertMessage(
         `Autoscaling updated for Node Pool ${mockNodePool.id}.`
       );
-      cy.findByText(`(Min ${autoscaleMin} / Max ${autoscaleMax})`).should(
-        'be.visible'
-      );
+      cy.findByText(
+        `Autoscaling (Min ${autoscaleMin} / Max ${autoscaleMax})`
+      ).should('be.visible');
 
       // Click "Autoscale Pool" again and disable autoscaling.
       mockUpdateNodePool(mockCluster.id, mockNodePool).as('toggleAutoscale');
       mockGetClusterPools(mockCluster.id, [mockNodePool]).as('getNodePools');
-      ui.button
+
+      ui.actionMenu
+        .findByTitle(`Action menu for Node Pool ${mockNodePool.id}`)
+        .should('be.visible')
+        .click();
+
+      ui.actionMenuItem
         .findByTitle('Autoscale Pool')
         .should('be.visible')
         .should('be.enabled')
@@ -617,9 +634,9 @@ describe('LKE cluster updates', () => {
       ui.toast.assertMessage(
         `Autoscaling updated for Node Pool ${mockNodePool.id}.`
       );
-      cy.findByText(`(Min ${autoscaleMin} / Max ${autoscaleMax})`).should(
-        'not.exist'
-      );
+      cy.findByText(
+        `Autoscaling (Min ${autoscaleMin} / Max ${autoscaleMax})`
+      ).should('not.exist');
     });
 
     /*
@@ -682,7 +699,13 @@ describe('LKE cluster updates', () => {
       mockGetClusterPools(mockCluster.id, [mockNodePoolAutoscale]).as(
         'getNodePools'
       );
-      ui.button
+
+      ui.actionMenu
+        .findByTitle(`Action menu for Node Pool ${mockNodePool.id}`)
+        .should('be.visible')
+        .click();
+
+      ui.actionMenuItem
         .findByTitle('Autoscale Pool')
         .should('be.visible')
         .should('be.enabled')
@@ -728,9 +751,9 @@ describe('LKE cluster updates', () => {
       ui.toast.assertMessage(
         `Autoscaling updated for Node Pool ${mockNodePool.id}.`
       );
-      cy.findByText(`(Min ${autoscaleMin} / Max ${autoscaleMax})`).should(
-        'be.visible'
-      );
+      cy.findByText(
+        `Autoscaling (Min ${autoscaleMin} / Max ${autoscaleMax})`
+      ).should('be.visible');
     });
 
     /*
@@ -803,8 +826,13 @@ describe('LKE cluster updates', () => {
           });
       });
 
+      ui.actionMenu
+        .findByTitle(`Action menu for Node Pool ${mockNodePoolInitial.id}`)
+        .should('be.visible')
+        .click();
+
       // Click "Resize Pool" and increase size to 3 nodes.
-      ui.button
+      ui.actionMenuItem
         .findByTitle('Resize Pool')
         .should('be.visible')
         .should('be.enabled')
@@ -862,8 +890,13 @@ describe('LKE cluster updates', () => {
           });
       });
 
+      ui.actionMenu
+        .findByTitle(`Action menu for Node Pool ${mockNodePoolInitial.id}`)
+        .should('be.visible')
+        .click();
+
       // Click "Resize Pool" and decrease size back to 1 node.
-      ui.button
+      ui.actionMenuItem
         .findByTitle('Resize Pool')
         .should('be.visible')
         .should('be.enabled')
@@ -987,14 +1020,22 @@ describe('LKE cluster updates', () => {
       cy.wait(['@getRegions', '@getCluster', '@getNodePools', '@getVersions']);
 
       // Assert that initial node pool is shown on the page.
-      cy.findByText('Dedicated 8 GB', { selector: 'h2' }).should('be.visible');
+      cy.findByText('Dedicated 8 GB', { selector: 'h3' }).should('be.visible');
+
+      ui.actionMenu
+        .findByTitle(`Action menu for Node Pool ${mockNodePool.id}`)
+        .should('be.visible')
+        .click();
 
       // "Delete Pool" button should be disabled when only 1 node pool exists.
-      ui.button
+      ui.actionMenuItem
         .findByTitle('Delete Pool')
         .should('be.visible')
         .should('be.disabled');
 
+      // Close the action menu
+      cy.focused().type('{esc}');
+
       // Add a new node pool, select plan, submit form in drawer.
       ui.button
         .findByTitle('Add a Node Pool')
@@ -1028,20 +1069,26 @@ describe('LKE cluster updates', () => {
 
       // Wait for API responses and confirm that both node pools are shown.
       cy.wait(['@addNodePool', '@getNodePools']);
-      cy.findByText('Dedicated 8 GB', { selector: 'h2' }).should('be.visible');
-      cy.findByText('Dedicated 4 GB', { selector: 'h2' }).should('be.visible');
+      cy.findByText('Dedicated 8 GB', { selector: 'h3' }).should('be.visible');
+      cy.findByText('Dedicated 4 GB', { selector: 'h3' }).should('be.visible');
 
       // Delete the newly added node pool.
       cy.get(`[data-qa-node-pool-id="${mockNewNodePool.id}"]`)
         .should('be.visible')
         .within(() => {
-          ui.button
-            .findByTitle('Delete Pool')
+          ui.actionMenu
+            .findByTitle(`Action menu for Node Pool ${mockNewNodePool.id}`)
             .should('be.visible')
-            .should('be.enabled')
             .click();
         });
 
+      // "Delete Pool" button should be disabled when only 1 node pool exists.
+      ui.actionMenuItem
+        .findByTitle('Delete Pool')
+        .should('be.visible')
+        .should('be.enabled')
+        .click();
+
       mockGetClusterPools(mockCluster.id, [mockNodePool]).as('getNodePools');
       ui.dialog
         .findByTitle('Delete Node Pool?')
@@ -1057,10 +1104,15 @@ describe('LKE cluster updates', () => {
       // Confirm node pool is deleted, original node pool still exists, and
       // delete pool button is once again disabled.
       cy.wait(['@deleteNodePool', '@getNodePools']);
-      cy.findByText('Dedicated 8 GB', { selector: 'h2' }).should('be.visible');
-      cy.findByText('Dedicated 4 GB', { selector: 'h2' }).should('not.exist');
+      cy.findByText('Dedicated 8 GB', { selector: 'h3' }).should('be.visible');
+      cy.findByText('Dedicated 4 GB', { selector: 'h3' }).should('not.exist');
 
-      ui.button
+      ui.actionMenu
+        .findByTitle(`Action menu for Node Pool ${mockNodePool.id}`)
+        .should('be.visible')
+        .click();
+
+      ui.actionMenuItem
         .findByTitle('Delete Pool')
         .should('be.visible')
         .should('be.disabled');
@@ -1326,8 +1378,13 @@ describe('LKE cluster updates', () => {
         'getNodePoolsUpdated'
       );
 
+      ui.actionMenu
+        .findByTitle(`Action menu for Node Pool ${mockNodePoolInitial.id}`)
+        .should('be.visible')
+        .click();
+
       // Click "Labels and Taints" button and confirm drawer contents.
-      ui.button
+      ui.actionMenuItem
         .findByTitle('Labels and Taints')
         .should('be.visible')
         .should('be.enabled')
@@ -1464,8 +1521,13 @@ describe('LKE cluster updates', () => {
         'getNodePoolsUpdated'
       );
 
+      ui.actionMenu
+        .findByTitle(`Action menu for Node Pool ${mockNodePoolInitial.id}`)
+        .should('be.visible')
+        .click();
+
       // Click "Labels and Taints" button and confirm drawer contents.
-      ui.button
+      ui.actionMenuItem
         .findByTitle('Labels and Taints')
         .should('be.visible')
         .should('be.enabled')
@@ -1641,8 +1703,13 @@ describe('LKE cluster updates', () => {
         mockErrorMessage
       ).as('updateNodePoolError');
 
+      ui.actionMenu
+        .findByTitle(`Action menu for Node Pool ${mockNodePoolInitial.id}`)
+        .should('be.visible')
+        .click();
+
       // Click "Labels and Taints" button and confirm drawer contents.
-      ui.button
+      ui.actionMenuItem
         .findByTitle('Labels and Taints')
         .should('be.visible')
         .should('be.enabled')
@@ -1749,7 +1816,7 @@ describe('LKE cluster updates', () => {
     });
   });
 
-  it('does not collapse the accordion when an action button is clicked in the accordion header', () => {
+  it('does not collapse the accordion when the user interacts with the node pool action menu', () => {
     const mockCluster = kubernetesClusterFactory.build({
       k8s_version: latestKubernetesVersion,
     });
@@ -1770,36 +1837,33 @@ describe('LKE cluster updates', () => {
         'true'
       );
 
-      // Click on a disabled button
-      cy.get('[data-testid="node-pool-actions"]')
+      ui.actionMenu
+        .findByTitle(`Action menu for Node Pool ${mockSingleNodePool.id}`)
         .should('be.visible')
-        .within(() => {
-          ui.button
-            .findByTitle('Delete Pool')
-            .should('be.visible')
-            .should('be.disabled')
-            .click();
-        });
+        .click();
+    });
+
+    ui.actionMenuItem
+      .findByTitle('Delete Pool')
+      .should('be.visible')
+      .should('be.disabled')
+      .click({ force: true }); // Force because pointer events are disabled on the delete option
 
+    cy.get(`[data-qa-node-pool-id="${mockSingleNodePool.id}"]`).within(() => {
       // Check that the accordion is still expanded
       cy.get(`[data-qa-panel-summary]`).should(
         'have.attr',
         'aria-expanded',
         'true'
       );
-
-      // Click on an action button
-      cy.get('[data-testid="node-pool-actions"]')
-        .should('be.visible')
-        .within(() => {
-          ui.button
-            .findByTitle('Recycle Pool Nodes')
-            .should('be.visible')
-            .should('be.enabled')
-            .click();
-        });
     });
 
+    ui.actionMenuItem
+      .findByTitle('Recycle Pool Nodes')
+      .should('be.visible')
+      .should('be.enabled')
+      .click();
+
     // Exit dialog
     ui.dialog
       .findByTitle('Recycle node pool?')
@@ -2125,8 +2189,13 @@ describe('LKE cluster updates', () => {
       // Confirm total price is listed in Kube Specs.
       cy.findByText('$14.40/month').should('be.visible');
 
+      ui.actionMenu
+        .findByTitle(`Action menu for Node Pool ${mockNodePoolInitial.id}`)
+        .should('be.visible')
+        .click();
+
       // Click "Resize Pool" and increase size to 3 nodes.
-      ui.button
+      ui.actionMenuItem
         .findByTitle('Resize Pool')
         .should('be.visible')
         .should('be.enabled')
@@ -2246,7 +2315,7 @@ describe('LKE cluster updates', () => {
       ]);
 
       // Assert that initial node pool is shown on the page.
-      cy.findByText(mockPlanType.formattedLabel, { selector: 'h2' }).should(
+      cy.findByText(mockPlanType.formattedLabel, { selector: 'h3' }).should(
         'be.visible'
       );
 
@@ -2388,8 +2457,13 @@ describe('LKE cluster updates', () => {
       // Confirm total price is listed in Kube Specs.
       cy.findByText('$0.00/month').should('be.visible');
 
+      ui.actionMenu
+        .findByTitle(`Action menu for Node Pool ${mockNodePoolInitial.id}`)
+        .should('be.visible')
+        .click();
+
       // Click "Resize Pool" and increase size to 4 nodes.
-      ui.button
+      ui.actionMenuItem
         .findByTitle('Resize Pool')
         .should('be.visible')
         .should('be.enabled')
@@ -2500,7 +2574,7 @@ describe('LKE cluster updates', () => {
       ]);
 
       // Assert that initial node pool is shown on the page.
-      cy.findByText(mockPlanType.formattedLabel, { selector: 'h2' }).should(
+      cy.findByText(mockPlanType.formattedLabel, { selector: 'h3' }).should(
         'be.visible'
       );