Skip to content

upcoming: [M3-9590] - Update Linode Networking UI for Linode Interfaces - #12049

Merged
bnussman-akamai merged 18 commits into
linode:developfrom
bnussman-akamai:M3-9590-ui-tweaks-for-linode-ips-using-linode-interfaces
Apr 21, 2025
Merged

upcoming: [M3-9590] - Update Linode Networking UI for Linode Interfaces#12049
bnussman-akamai merged 18 commits into
linode:developfrom
bnussman-akamai:M3-9590-ui-tweaks-for-linode-ips-using-linode-interfaces

Conversation

@bnussman-akamai

@bnussman-akamai bnussman-akamai commented Apr 16, 2025

Copy link
Copy Markdown
Member

Description 📝

  • Updates the Linode Details Networking UI for better support for Linode Interfaces

Main Changes

  • Updates the order of some columns on the Linode Interfaces table based on what I saw in Figma 🎨
  • Hides Add IP Address button for Linodes using Linode Interfaces because you must add IPs on the Interface level now 🙈
    • Also hides Delete button on IP address rows because the IP address must be deleted at the Interface level now too
  • Adds IP Addresses column to the Linode Interfaces Table ➕
  • Fixes ShowMore component style issues (colors are not easily visible in light and dark mode)
  • Updated the Linode Interfaces table to respect the "Mask Sensitive Data" preference 🙈
  • Add some missing React Query cache invalidations ➕
  • Add custom "No Options" text for VPC selects on Linode Create flow

Preview 📷

Before After
Screenshot 2025-04-16 at 1 14 00 PM Screenshot 2025-04-16 at 1 22 21 PM

How to test 🧪

  • Test the Linode Networking UI with various networking configrations
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

@bnussman-akamai bnussman-akamai self-assigned this Apr 16, 2025
@bnussman-akamai
bnussman-akamai marked this pull request as ready for review April 16, 2025 22:08
@bnussman-akamai
bnussman-akamai requested a review from a team as a code owner April 16, 2025 22:08
@bnussman-akamai
bnussman-akamai requested review from bill-akamai and pmakode-akamai and removed request for a team April 16, 2025 22:08
);
};

const StyledChip = styled(Chip)(({ theme }) => ({

@bnussman-akamai bnussman-akamai Apr 16, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From what I could tell, this component is essentially visually broken right now, so I just reversed back to using a plain "Chip".

I checked the Akamai design system and didn't see anything resembling this component so I don't really know what we want it to look like. In my opinion, a plain chip is a safe bet for now, but open to feedback here.

@bill-akamai bill-akamai left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good @bnussman-akamai - verified per description. ✅

@coliu-akamai coliu-akamai left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ tested various things with Linode interfaces and networking

  • confirmed add IP address button hidden in networking table for LI
  • confirmed ip invalidation when adding/editing/deleting LI
  • light and dark mode look good
  • vpc text updated
  • mask sensitive data

thanks @bnussman-akamai! 🚀

Comment thread packages/queries/src/linodes/interfaces.ts
Comment thread packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx
@github-project-automation github-project-automation Bot moved this from Review to Approved in Cloud Manager Apr 18, 2025
@coliu-akamai coliu-akamai added the Approved Multiple approvals and ready to merge! label Apr 18, 2025
@linode-gh-bot

Copy link
Copy Markdown

Cloud Manager UI test results

🎉 565 passing tests on test run #13 ↗︎

❌ Failing✅ Passing↪️ Skipped🕐 Duration
0 Failing565 Passing5 Skipped105m 47s

@bnussman-akamai
bnussman-akamai merged commit e28791d into linode:develop Apr 21, 2025
@github-project-automation github-project-automation Bot moved this from Approved to Merged in Cloud Manager Apr 21, 2025
rodonnel-akamai pushed a commit to rodonnel-akamai/manager that referenced this pull request Apr 23, 2025
…es (linode#12049)

* initial changes

* polish things

* add testing

* remove interface suffixes

* add some extra invalidations to fix table not updating when modifying an interface

* improve form focus, forgot to commit on last PR

* add some extra invalidations to fix table not updating when modifying an interface

* add custom no options text for VPC select

* invalidate linode interfaces when a range is deleted using range delete endpoint

* invalidate linode interfaces when a range is deleted using range delete endpoint

* fix up more cache invalidations

* show support links for ip limits

* feedback @bill-akamai

* more invalidations @coliu-akamai

* add similar VPC messaging in the Add Interface drawer

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Approved Multiple approvals and ready to merge! Linode Interfaces

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

5 participants