Skip to content

upcoming: [UIE-9762] - UX/UI enhancements for RuleSets and Prefix Lists#13165

Merged
pmakode-akamai merged 21 commits intolinode:developfrom
pmakode-akamai:UIE-9762-ux-ui-enhancments-rs-pl-part-1
Dec 8, 2025
Merged

upcoming: [UIE-9762] - UX/UI enhancements for RuleSets and Prefix Lists#13165
pmakode-akamai merged 21 commits intolinode:developfrom
pmakode-akamai:UIE-9762-ux-ui-enhancments-rs-pl-part-1

Conversation

@pmakode-akamai
Copy link
Contributor

@pmakode-akamai pmakode-akamai commented Dec 4, 2025

Description 📝

UX/UI enhancements for RuleSets and Prefix Lists (part- 1)

Changes 🔄

  • Improved flexibility of the first label column in Firewall Rules Table (for Rulesets)
  • Moved tooltip scroll to the right end
  • Removed extra spacing between MultiplePrefixListSelect
  • Updated the order of addresses
  • Spacing between the Papers (16px) in PrefixList Details Drawer
  • Add Tooltip for the PrefixListSelect checkbox when disabled
  • Add hoverable copy-enabled RuleSet ID to the ruleset row in the Rules table
  • Removed the arrow from the tooltip (for addresses) to keep it consistent with how it appears elsewhere in CM, aside from the new scrolling functionality we added

Scope 🚢

  • All customers
  • Some customers (e.g. in Beta or Limited Availability)
  • No customers / Not applicable

Target release date 🗓️

N/A

Preview 📷

Before After
Screenshot 2025-12-04 at 9 30 16 PM Screenshot 2025-12-04 at 9 44 32 PM
Screenshot 2025-12-04 at 9 46 00 PM Screenshot 2025-12-04 at 9 45 42 PM
Screenshot 2025-12-04 at 9 30 26 PM Screenshot 2025-12-04 at 9 30 36 PM
Screenshot 2025-12-04 at 9 39 01 PM Screenshot 2025-12-04 at 9 38 38 PM
Screenshot 2025-12-04 at 9 47 11 PM Screenshot 2025-12-04 at 9 47 28 PM
Screenshot 2025-12-04 at 9 49 43 PM Screenshot 2025-12-04 at 9 50 02 PM
image image image
Screenshot 2025-12-05 at 7 27 48 PM Rulset ID label and Id both are copyable, copy icon will display on hover only

How to test 🧪

Prerequisites

  • Enable Firewall Rulesets and PrefixLists feature flag
  • Enabled MSW (using Legacy MSW handlers)

Verification steps

  • Ensure no regressions
  • Ensure styles are applied correctly
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 tests and CI checks are passing
  • TypeScript compilation succeeded without errors
  • Code passes all linting rules

@pmakode-akamai pmakode-akamai self-assigned this Dec 4, 2025
@pmakode-akamai pmakode-akamai added the Firewalls Related to Firewalls label Dec 4, 2025
@pmakode-akamai pmakode-akamai marked this pull request as ready for review December 4, 2025 16:23
@pmakode-akamai pmakode-akamai requested a review from a team as a code owner December 4, 2025 16:23
})}
>
<StyledLabel
<Stack gap={2} marginTop={1}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Just added a Stack for these 2 Papers and only removed marginTop: theme.spacingFunction(8), from each

</Link>
)}
</Box>
<Hidden smDown={!!rulesetDetails}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hidden is no longer needed for CopyTooltip, since we are making the first column flexible

Comment on lines +35 to +39
autocomplete: {
"& [data-testid='inputLabelWrapper']": {
display: 'none',
},
},
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We need to do this to avoid the extra margin that comes from Autocomplete when label="" (the label prop of Autocomplete cannot be null or undefined)

elements.push(<span key={ip}>{ip}</span>);
}
});
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Just moved from below to above to display the addresses in the correct order (IPs should come before PLs)

Copy link
Contributor

@dwiley-akamai dwiley-akamai left a comment

Choose a reason for hiding this comment

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

Code review ✅
Verification steps ✅

@pmakode-akamai pmakode-akamai added Add'tl Approval Needed Waiting on another approval! and removed Ready for Review labels Dec 5, 2025
@github-project-automation github-project-automation bot moved this from Review to Approved in Cloud Manager Dec 5, 2025
@grevanak-akamai grevanak-akamai removed the Add'tl Approval Needed Waiting on another approval! label Dec 5, 2025
@harsh-akamai harsh-akamai self-requested a review December 5, 2025 12:09
@pmakode-akamai pmakode-akamai force-pushed the UIE-9762-ux-ui-enhancments-rs-pl-part-1 branch from 5f3b7c9 to 2cf9a23 Compare December 5, 2025 16:22
@pmakode-akamai pmakode-akamai added the Approved Multiple approvals and ready to merge! label Dec 5, 2025
@pmakode-akamai pmakode-akamai merged commit b112706 into linode:develop Dec 8, 2025
34 of 35 checks passed
@github-project-automation github-project-automation bot moved this from Approved to Merged in Cloud Manager Dec 8, 2025
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! Firewalls Related to Firewalls 🚨 Urgent

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

4 participants