feat: [M3-9231] - Improve Node Pool Collapsing UX

[hana-akamai]

Description 📝

Improve UX of collapsible Node Pools

Changes 🔄

• Add default logic for expanded/collapsed node pools
• Added a Collapse/Expand all pools button
• Preserve user state to local storage

Preview 📷

Preview

Nodes Pools	Cluster view
1	1.node.pool.mov
3	Screen.Recording.2025-02-11.at.12.29.18.PM.mov
4	4.node.pools.mov

Expand/Collapse

Screen.Recording.2025-02-10.at.12.15.32.PM.mov

How to test 🧪

Prerequisites

(How to setup test environment)

• Have a LKE or LKE-E cluster with multiple node pools with varying amount of nodes in each node pool

Verification steps

(How to verify changes)

• Test various node pool sizes and nodes in each pool
  • If there's only one node pool, the pool is expanded by default regardless of how many nodes there are
  • if the user has between 1-3 node pools, if the node pool has <10 nodes, keep that pool expanded by default
  • If there are more than 3 node pools, keep them all collapsed by default
• State should be saved to local storage if the user expands/collapse the node pool and this should override default behavior
• Test expand/collapse all button

yarn cy:run -s "cypress/e2e/core/kubernetes/lke-update.spec.ts"

You can use the legacy MSW and update the get function in line 836 of serverHandlers.ts to something like:

return HttpResponse.json(
  makeResourcePage([
    nodePoolFactory.build({
      nodes: kubeLinodeFactory.buildList(50),
      count: 50,
    }),
  ])
);

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All unit tests are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[github-actions]

Coverage Report: ❌
Base Coverage: 80.13%
Current Coverage: 80.08%

[bnussman-akamai]

My preference would probably be to use an outlined button but I guess either is fine

[hana-akamai]

@bnussman-akamai I initially had it outlined, but Daniel didn't want the Collapse/Expand action to have the same order of significance as the 2 other Node Pool actions (Recycle All Node Pools & Add A Node Pool)

[linode-gh-bot]

Cloud Manager UI test results

🎉 501 passing tests on test run #8 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	501 Passing	2 Skipped	102m 21s

[mjac0bs]

@bnussman-akamai I initially had it outlined, but Daniel didn't want the Collapse/Expand action to have the same order of significance as the 2 other Node Pool actions (Recycle All Node Pools & Add A Node Pool)

@hana-akamai I see where he's coming from and am okay with non-outlined because of it, but I do think we should switch the order of the status filter and the collapse/expand button so that all the buttons are at least grouped together, as Banks had in his suggested screenshot.

[mjac0bs]

Looks good now with those changes!

The only other thing I'm wondering about is this row of CTAs as a whole, especially in mobile view. I do think we have a ticket for adjusting the spacing here (update: it's M3-9061; just updated the AC to include improving mobile view). Wondering if we should use it to reevaluate how/if all these are displayed on small screens.

Screen.Recording.2025-02-11.at.9.28.53.AM.mov