change: [M3-8346] – UI modications for LKE Details summary panel & Node Pool tables

[dwiley-akamai]

Description 📝

Some UI improvements for the LKE Details summary panel and Node Pool tables

Note

There is an existing issue noticeable in dark mode for LinodeEntityDetailBody where the border above the VPC section in the Linode Detail header extends past the left bounds of the table. I created M3-8354 to track this.

Changes 🔄

• Add a header to the LKE Details summary panel containing "Summary" and the Kubernetes Dashboard and Delete Cluster buttons
  • Remove secondary button styling from buttons
• Remove the <Paper /> behind the entire Node Pools section, replaced with a paper behind each Node Pool table
• Place each Node Pool's plan and action buttons in a header, adjusting the styling of the action buttons to text instead of secondary buttons

Target release date 🗓️

7/22/24

Preview 📷

Before	After

How to test 🧪

Verification steps

Verify the changes described above for the LKE Details summary panel and the individual Node Pools tables.

Additionally, confirm there are no adverse impacts to the Linode Details header, since this PR made some modifications to EntityDetail.tsx which is used in LinodeEntityDetail.tsx.

As an Author I have 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

[dwiley-akamai]

I introduced this prop to prevent this situation:

Without a footer, there would otherwise be a bottom border for the body.

With further improvements forthcoming as part of LKE-E, this may become unnecessary as the rough draft wireframes have tags moving into a footer section.

[dwiley-akamai]

The shift to using EntityDetail here should be understood in the context of https://github.com/linode/manager/pull/10685/files#r1681361959. It's laying the foundation for further forthcoming LKE-E improvements

[dwiley-akamai]

another option is to leave footer as required and pass a <React.Fragment /> for it in KubeSummaryPanel.tsx, which is simpler but I would prefer not using fragments in an unintended fashion like that.

[bnussman-akamai]

Hover color of the node row is too dark

Mobile spacing is a bit off

LinkButtons used where I'd expect buttons

Can we make the Dashboard and Delete more like the other buttons on this page? Having them as LinkButtons feels odd because both Linodes and VPCs use buttons

All of that feedback is non-blocking because this page has already been somewhat broken and this seems to be slightly better ✅

[dwiley-akamai]

Hover color of the node row is too dark
Mobile spacing is a bit off
LinkButtons used where I'd expect buttons
All of that feedback is non-blocking because this page has already been somewhat broken and this seems to be slightly better ✅

Thanks for catching the buttons, fixed that in the latest commit.

For the mobile spacing, we have M3-8348 which will be pulled into the LKE-E effort. The node row hover color is like that in prod as well but I agree that it's too dark and should match other similar rows

[github-actions]

Coverage Report: ✅
Base Coverage: 82.35%
Current Coverage: 82.36%

[mjac0bs]

Thanks for the improvements and prep work (+ TODO) for LKE-E changes to come. I noticed no regressions to the Linode entity details. LKE details looks good, aside from the issues that were already raised to be tackled in M3-8348. 🚢