Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pmakode-akamai merged 21 commits into from
Dec 8, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
bcaa7bd
Fix tooltip scroll styling
pmakode-akamai Dec 4, 2025
1f7e7c9
Improve stylings for MutiplePLSelect and fw rule table row
pmakode-akamai Dec 4, 2025
7b28463
Update order of addresses
pmakode-akamai Dec 4, 2025
6c1aef3
Merge branch 'develop' into UIE-9762-ux-ui-enhancments-rs-pl-part-1
pmakode-akamai Dec 4, 2025
65bc67a
Fix spacing between papers in Prefixlist details
pmakode-akamai Dec 4, 2025
e4fba08
Revert design color token for tooltip arrow
pmakode-akamai Dec 4, 2025
8d7c709
add PL checkbox tooltip text if disabled
harsh-akamai Dec 5, 2025
8f43727
Merge branch 'develop' into UIE-9762-ux-ui-enhancments-rs-pl-part-1
harsh-akamai Dec 5, 2025
ebc6ceb
fix spacing for checkbox and tooltip
harsh-akamai Dec 5, 2025
46e3aba
Merge branch 'UIE-9762-ux-ui-enhancments-rs-pl-part-1' of https://git…
harsh-akamai Dec 5, 2025
b1f18f4
Add hoverable ruleset id copy on table row
pmakode-akamai Dec 5, 2025
25d2f17
reduce gap between label and copyable ruleset id
pmakode-akamai Dec 5, 2025
db00817
Remove tooltip arrow for the RS & PL feature
pmakode-akamai Dec 5, 2025
2cf9a23
Merge branch 'develop' into UIE-9762-ux-ui-enhancments-rs-pl-part-1
pmakode-akamai Dec 5, 2025
a9ccb0d
Minor change
pmakode-akamai Dec 5, 2025
c8604f9
Added changeset: UX/UI enhancements for RuleSets and Prefix Lists
pmakode-akamai Dec 5, 2025
2fd036f
Update PrefixList to Prefix List in tooltip message
pmakode-akamai Dec 5, 2025
0fbeee4
Fix some styles
pmakode-akamai Dec 7, 2025
fa27acd
Some padding adjustments in MutiplePrefixListSelect
pmakode-akamai Dec 8, 2025
cd2607a
Merge branch 'develop' into UIE-9762-ux-ui-enhancments-rs-pl-part-1
pmakode-akamai Dec 8, 2025
fd45ea1
Minor fix
pmakode-akamai Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-13165-upcoming-features-1764951969980.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Upcoming Features
---

UX/UI enhancements for RuleSets and Prefix Lists ([#13165](https://github.com/linode/manager/pull/13165))
246 changes: 129 additions & 117 deletions packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallPrefixListDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
import { useAllFirewallPrefixListsQuery } from '@linode/queries';
import { Box, Button, Chip, Drawer, Paper, TooltipIcon } from '@linode/ui';
import {
Box,
Button,
Chip,
Drawer,
Paper,
Stack,
TooltipIcon,
} from '@linode/ui';
import { capitalize } from '@linode/utilities';
import * as React from 'react';

Expand Down Expand Up @@ -225,140 +233,144 @@ export const FirewallPrefixListDrawer = React.memo(
</StyledListItem>
)}

{isIPv4Supported && (
<Paper
data-testid="ipv4-section"
sx={(theme) => ({
backgroundColor: theme.tokens.alias.Background.Neutral,
padding: theme.spacingFunction(12),
marginTop: theme.spacingFunction(8),
...(isIPv4InUse
? {
border: `1px solid ${theme.tokens.alias.Border.Positive}`,
}
: {}),
})}
>
<StyledLabel
<Stack gap={2} marginTop={1}>
Copy link
Contributor Author

@pmakode-akamai pmakode-akamai Dec 4, 2025

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

{isIPv4Supported && (
<Paper
data-testid="ipv4-section"
sx={(theme) => ({
display: 'flex',
justifyContent: 'space-between',
marginBottom: theme.spacingFunction(4),
...(!isIPv4InUse
backgroundColor: theme.tokens.alias.Background.Neutral,
padding: theme.spacingFunction(12),
...(isIPv4InUse
? {
color:
theme.tokens.alias.Content.Text.Primary.Disabled,
border: `1px solid ${theme.tokens.alias.Border.Positive}`,
}
: {}),
})}
>
IPv4
<Chip
data-testid="ipv4-chip"
label={isIPv4InUse ? 'in use' : 'not in use'}
<StyledLabel
sx={(theme) => ({
background: isIPv4InUse
? theme.tokens.component.Badge.Positive.Subtle
.Background
: theme.tokens.component.Badge.Neutral.Subtle
.Background,
color: isIPv4InUse
? theme.tokens.component.Badge.Positive.Subtle.Text
: theme.tokens.component.Badge.Neutral.Subtle.Text,
font: theme.font.bold,
fontSize: theme.tokens.font.FontSize.Xxxs,
marginRight: theme.spacingFunction(6),
flexShrink: 0,
display: 'flex',
justifyContent: 'space-between',
marginBottom: theme.spacingFunction(4),
...(!isIPv4InUse
? {
color:
theme.tokens.alias.Content.Text.Primary
.Disabled,
}
: {}),
})}
/>
</StyledLabel>
>
IPv4
<Chip
data-testid="ipv4-chip"
label={isIPv4InUse ? 'in use' : 'not in use'}
sx={(theme) => ({
background: isIPv4InUse
? theme.tokens.component.Badge.Positive.Subtle
.Background
: theme.tokens.component.Badge.Neutral.Subtle
.Background,
color: isIPv4InUse
? theme.tokens.component.Badge.Positive.Subtle.Text
: theme.tokens.component.Badge.Neutral.Subtle.Text,
font: theme.font.bold,
fontSize: theme.tokens.font.FontSize.Xxxs,
marginRight: theme.spacingFunction(6),
flexShrink: 0,
})}
/>
</StyledLabel>

<StyledListItem
component="span"
sx={(theme) => ({
...(!isIPv4InUse
? {
color:
theme.tokens.alias.Content.Text.Primary.Disabled,
}
: {}),
})}
>
{prefixListDetails.ipv4!.length > 0 ? (
prefixListDetails.ipv4!.join(', ')
) : (
<i>no IP addresses</i>
)}
</StyledListItem>
</Paper>
)}
<StyledListItem
component="span"
sx={(theme) => ({
...(!isIPv4InUse
? {
color:
theme.tokens.alias.Content.Text.Primary
.Disabled,
}
: {}),
})}
>
{prefixListDetails.ipv4!.length > 0 ? (
prefixListDetails.ipv4!.join(', ')
) : (
<i>no IP addresses</i>
)}
</StyledListItem>
</Paper>
)}

{isIPv6Supported && (
<Paper
data-testid="ipv6-section"
sx={(theme) => ({
backgroundColor: theme.tokens.alias.Background.Neutral,
padding: theme.spacingFunction(12),
marginTop: theme.spacingFunction(8),
...(isIPv6InUse
? {
border: `1px solid ${theme.tokens.alias.Border.Positive}`,
}
: {}),
})}
>
<StyledLabel
{isIPv6Supported && (
<Paper
data-testid="ipv6-section"
sx={(theme) => ({
display: 'flex',
justifyContent: 'space-between',
marginBottom: theme.spacingFunction(4),
...(!isIPv6InUse
backgroundColor: theme.tokens.alias.Background.Neutral,
padding: theme.spacingFunction(12),
...(isIPv6InUse
? {
color:
theme.tokens.alias.Content.Text.Primary.Disabled,
border: `1px solid ${theme.tokens.alias.Border.Positive}`,
}
: {}),
})}
>
IPv6
<Chip
data-testid="ipv6-chip"
label={isIPv6InUse ? 'in use' : 'not in use'}
<StyledLabel
sx={(theme) => ({
background: isIPv6InUse
? theme.tokens.component.Badge.Positive.Subtle
.Background
: theme.tokens.component.Badge.Neutral.Subtle
.Background,
color: isIPv6InUse
? theme.tokens.component.Badge.Positive.Subtle.Text
: theme.tokens.component.Badge.Neutral.Subtle.Text,
font: theme.font.bold,
fontSize: theme.tokens.font.FontSize.Xxxs,
marginRight: theme.spacingFunction(6),
flexShrink: 0,
display: 'flex',
justifyContent: 'space-between',
marginBottom: theme.spacingFunction(4),
...(!isIPv6InUse
? {
color:
theme.tokens.alias.Content.Text.Primary
.Disabled,
}
: {}),
})}
/>
</StyledLabel>
<StyledListItem
component="span"
sx={(theme) => ({
...(!isIPv6InUse
? {
color:
theme.tokens.alias.Content.Text.Primary.Disabled,
}
: {}),
})}
>
{prefixListDetails.ipv6!.length > 0 ? (
prefixListDetails.ipv6!.join(', ')
) : (
<i>no IP addresses</i>
)}
</StyledListItem>
</Paper>
)}
>
IPv6
<Chip
data-testid="ipv6-chip"
label={isIPv6InUse ? 'in use' : 'not in use'}
sx={(theme) => ({
background: isIPv6InUse
? theme.tokens.component.Badge.Positive.Subtle
.Background
: theme.tokens.component.Badge.Neutral.Subtle
.Background,
color: isIPv6InUse
? theme.tokens.component.Badge.Positive.Subtle.Text
: theme.tokens.component.Badge.Neutral.Subtle.Text,
font: theme.font.bold,
fontSize: theme.tokens.font.FontSize.Xxxs,
marginRight: theme.spacingFunction(6),
flexShrink: 0,
})}
/>
</StyledLabel>
<StyledListItem
component="span"
sx={(theme) => ({
...(!isIPv6InUse
? {
color:
theme.tokens.alias.Content.Text.Primary
.Disabled,
}
: {}),
})}
>
{prefixListDetails.ipv6!.length > 0 ? (
prefixListDetails.ipv6!.join(', ')
) : (
<i>no IP addresses</i>
)}
</StyledListItem>
</Paper>
)}
</Stack>
</>
)}

Expand Down
8 changes: 7 additions & 1 deletion packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,7 @@ export const FirewallRuleForm = React.memo((props: FirewallRuleFormProps) => {
tooltip={ipNetmaskTooltipText}
/>
{isFirewallRulesetsPrefixlistsFeatureEnabled && (
<MultiplePrefixListSelect
<StyledMultiplePrefixListSelect
aria-label="Prefix List for Firewall rule"
handleOpenPrefixListDrawer={handleOpenPrefixListDrawer}
onChange={handlePrefixListChange}
Expand Down Expand Up @@ -400,3 +400,9 @@ const StyledMultipleIPInput = styled(MultipleIPInput, {
})(({ theme, ips }) => ({
...(ips.length !== 0 ? { marginTop: theme.spacingFunction(16) } : {}),
}));

const StyledMultiplePrefixListSelect = styled(MultiplePrefixListSelect, {
label: 'StyledMultipleIPInput',
})(({ theme, pls }) => ({
...(pls.length !== 0 ? { marginTop: theme.spacingFunction(16) } : {}),
}));
Loading