Skip to content

Commit b112706

Browse files
pmakode-akamaiharsh-akamai
pmakode-akamai
and
harsh-akamai
authored
upcoming: [UIE-9762] - UX/UI enhancements for RuleSets and Prefix Lists (#13165)
* Fix tooltip scroll styling * Improve stylings for MutiplePLSelect and fw rule table row * Update order of addresses * Fix spacing between papers in Prefixlist details * Revert design color token for tooltip arrow * add PL checkbox tooltip text if disabled * fix spacing for checkbox and tooltip * Add hoverable ruleset id copy on table row * reduce gap between label and copyable ruleset id * Remove tooltip arrow for the RS & PL feature * Minor change * Added changeset: UX/UI enhancements for RuleSets and Prefix Lists * Update PrefixList to Prefix List in tooltip message * Fix some styles * Some padding adjustments in MutiplePrefixListSelect * Minor fix --------- Co-authored-by: hrao <[email protected]>
1 parent 5db036f commit b112706

File tree

7 files changed

+288
-226
lines changed

7 files changed

+288
-226
lines changed

‎packages/manager/.changeset/pr-13165-upcoming-features-1764951969980.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@linode/manager": Upcoming Features
3+
---
4+
5+
UX/UI enhancements for RuleSets and Prefix Lists ([#13165](https://github.com/linode/manager/pull/13165))

‎packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallPrefixListDrawer.tsx‎

Lines changed: 129 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import { useAllFirewallPrefixListsQuery } from '@linode/queries';
2-
import { Box, Button, Chip, Drawer, Paper, TooltipIcon } from '@linode/ui';
2+
import {
3+
Box,
4+
Button,
5+
Chip,
6+
Drawer,
7+
Paper,
8+
Stack,
9+
TooltipIcon,
10+
} from '@linode/ui';
311
import { capitalize } from '@linode/utilities';
412
import * as React from 'react';
513

@@ -225,140 +233,144 @@ export const FirewallPrefixListDrawer = React.memo(
225233
</StyledListItem>
226234
)}
227235

228-
{isIPv4Supported && (
229-
<Paper
230-
data-testid="ipv4-section"
231-
sx={(theme) => ({
232-
backgroundColor: theme.tokens.alias.Background.Neutral,
233-
padding: theme.spacingFunction(12),
234-
marginTop: theme.spacingFunction(8),
235-
...(isIPv4InUse
236-
? {
237-
border: `1px solid ${theme.tokens.alias.Border.Positive}`,
238-
}
239-
: {}),
240-
})}
241-
>
242-
<StyledLabel
236+
<Stack gap={2} marginTop={1}>
237+
{isIPv4Supported && (
238+
<Paper
239+
data-testid="ipv4-section"
243240
sx={(theme) => ({
244-
display: 'flex',
245-
justifyContent: 'space-between',
246-
marginBottom: theme.spacingFunction(4),
247-
...(!isIPv4InUse
241+
backgroundColor: theme.tokens.alias.Background.Neutral,
242+
padding: theme.spacingFunction(12),
243+
...(isIPv4InUse
248244
? {
249-
color:
250-
theme.tokens.alias.Content.Text.Primary.Disabled,
245+
border: `1px solid ${theme.tokens.alias.Border.Positive}`,
251246
}
252247
: {}),
253248
})}
254249
>
255-
IPv4
256-
<Chip
257-
data-testid="ipv4-chip"
258-
label={isIPv4InUse ? 'in use' : 'not in use'}
250+
<StyledLabel
259251
sx={(theme) => ({
260-
background: isIPv4InUse
261-
? theme.tokens.component.Badge.Positive.Subtle
262-
.Background
263-
: theme.tokens.component.Badge.Neutral.Subtle
264-
.Background,
265-
color: isIPv4InUse
266-
? theme.tokens.component.Badge.Positive.Subtle.Text
267-
: theme.tokens.component.Badge.Neutral.Subtle.Text,
268-
font: theme.font.bold,
269-
fontSize: theme.tokens.font.FontSize.Xxxs,
270-
marginRight: theme.spacingFunction(6),
271-
flexShrink: 0,
252+
display: 'flex',
253+
justifyContent: 'space-between',
254+
marginBottom: theme.spacingFunction(4),
255+
...(!isIPv4InUse
256+
? {
257+
color:
258+
theme.tokens.alias.Content.Text.Primary
259+
.Disabled,
260+
}
261+
: {}),
272262
})}
273-
/>
274-
</StyledLabel>
263+
>
264+
IPv4
265+
<Chip
266+
data-testid="ipv4-chip"
267+
label={isIPv4InUse ? 'in use' : 'not in use'}
268+
sx={(theme) => ({
269+
background: isIPv4InUse
270+
? theme.tokens.component.Badge.Positive.Subtle
271+
.Background
272+
: theme.tokens.component.Badge.Neutral.Subtle
273+
.Background,
274+
color: isIPv4InUse
275+
? theme.tokens.component.Badge.Positive.Subtle.Text
276+
: theme.tokens.component.Badge.Neutral.Subtle.Text,
277+
font: theme.font.bold,
278+
fontSize: theme.tokens.font.FontSize.Xxxs,
279+
marginRight: theme.spacingFunction(6),
280+
flexShrink: 0,
281+
})}
282+
/>
283+
</StyledLabel>
275284

276-
<StyledListItem
277-
component="span"
278-
sx={(theme) => ({
279-
...(!isIPv4InUse
280-
? {
281-
color:
282-
theme.tokens.alias.Content.Text.Primary.Disabled,
283-
}
284-
: {}),
285-
})}
286-
>
287-
{prefixListDetails.ipv4!.length > 0 ? (
288-
prefixListDetails.ipv4!.join(', ')
289-
) : (
290-
<i>no IP addresses</i>
291-
)}
292-
</StyledListItem>
293-
</Paper>
294-
)}
285+
<StyledListItem
286+
component="span"
287+
sx={(theme) => ({
288+
...(!isIPv4InUse
289+
? {
290+
color:
291+
theme.tokens.alias.Content.Text.Primary
292+
.Disabled,
293+
}
294+
: {}),
295+
})}
296+
>
297+
{prefixListDetails.ipv4!.length > 0 ? (
298+
prefixListDetails.ipv4!.join(', ')
299+
) : (
300+
<i>no IP addresses</i>
301+
)}
302+
</StyledListItem>
303+
</Paper>
304+
)}
295305

296-
{isIPv6Supported && (
297-
<Paper
298-
data-testid="ipv6-section"
299-
sx={(theme) => ({
300-
backgroundColor: theme.tokens.alias.Background.Neutral,
301-
padding: theme.spacingFunction(12),
302-
marginTop: theme.spacingFunction(8),
303-
...(isIPv6InUse
304-
? {
305-
border: `1px solid ${theme.tokens.alias.Border.Positive}`,
306-
}
307-
: {}),
308-
})}
309-
>
310-
<StyledLabel
306+
{isIPv6Supported && (
307+
<Paper
308+
data-testid="ipv6-section"
311309
sx={(theme) => ({
312-
display: 'flex',
313-
justifyContent: 'space-between',
314-
marginBottom: theme.spacingFunction(4),
315-
...(!isIPv6InUse
310+
backgroundColor: theme.tokens.alias.Background.Neutral,
311+
padding: theme.spacingFunction(12),
312+
...(isIPv6InUse
316313
? {
317-
color:
318-
theme.tokens.alias.Content.Text.Primary.Disabled,
314+
border: `1px solid ${theme.tokens.alias.Border.Positive}`,
319315
}
320316
: {}),
321317
})}
322318
>
323-
IPv6
324-
<Chip
325-
data-testid="ipv6-chip"
326-
label={isIPv6InUse ? 'in use' : 'not in use'}
319+
<StyledLabel
327320
sx={(theme) => ({
328-
background: isIPv6InUse
329-
? theme.tokens.component.Badge.Positive.Subtle
330-
.Background
331-
: theme.tokens.component.Badge.Neutral.Subtle
332-
.Background,
333-
color: isIPv6InUse
334-
? theme.tokens.component.Badge.Positive.Subtle.Text
335-
: theme.tokens.component.Badge.Neutral.Subtle.Text,
336-
font: theme.font.bold,
337-
fontSize: theme.tokens.font.FontSize.Xxxs,
338-
marginRight: theme.spacingFunction(6),
339-
flexShrink: 0,
321+
display: 'flex',
322+
justifyContent: 'space-between',
323+
marginBottom: theme.spacingFunction(4),
324+
...(!isIPv6InUse
325+
? {
326+
color:
327+
theme.tokens.alias.Content.Text.Primary
328+
.Disabled,
329+
}
330+
: {}),
340331
})}
341-
/>
342-
</StyledLabel>
343-
<StyledListItem
344-
component="span"
345-
sx={(theme) => ({
346-
...(!isIPv6InUse
347-
? {
348-
color:
349-
theme.tokens.alias.Content.Text.Primary.Disabled,
350-
}
351-
: {}),
352-
})}
353-
>
354-
{prefixListDetails.ipv6!.length > 0 ? (
355-
prefixListDetails.ipv6!.join(', ')
356-
) : (
357-
<i>no IP addresses</i>
358-
)}
359-
</StyledListItem>
360-
</Paper>
361-
)}
332+
>
333+
IPv6
334+
<Chip
335+
data-testid="ipv6-chip"
336+
label={isIPv6InUse ? 'in use' : 'not in use'}
337+
sx={(theme) => ({
338+
background: isIPv6InUse
339+
? theme.tokens.component.Badge.Positive.Subtle
340+
.Background
341+
: theme.tokens.component.Badge.Neutral.Subtle
342+
.Background,
343+
color: isIPv6InUse
344+
? theme.tokens.component.Badge.Positive.Subtle.Text
345+
: theme.tokens.component.Badge.Neutral.Subtle.Text,
346+
font: theme.font.bold,
347+
fontSize: theme.tokens.font.FontSize.Xxxs,
348+
marginRight: theme.spacingFunction(6),
349+
flexShrink: 0,
350+
})}
351+
/>
352+
</StyledLabel>
353+
<StyledListItem
354+
component="span"
355+
sx={(theme) => ({
356+
...(!isIPv6InUse
357+
? {
358+
color:
359+
theme.tokens.alias.Content.Text.Primary
360+
.Disabled,
361+
}
362+
: {}),
363+
})}
364+
>
365+
{prefixListDetails.ipv6!.length > 0 ? (
366+
prefixListDetails.ipv6!.join(', ')
367+
) : (
368+
<i>no IP addresses</i>
369+
)}
370+
</StyledListItem>
371+
</Paper>
372+
)}
373+
</Stack>
362374
</>
363375
)}
364376

‎packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -347,7 +347,7 @@ export const FirewallRuleForm = React.memo((props: FirewallRuleFormProps) => {
347347
tooltip={ipNetmaskTooltipText}
348348
/>
349349
{isFirewallRulesetsPrefixlistsFeatureEnabled && (
350-
<MultiplePrefixListSelect
350+
<StyledMultiplePrefixListSelect
351351
aria-label="Prefix List for Firewall rule"
352352
handleOpenPrefixListDrawer={handleOpenPrefixListDrawer}
353353
onChange={handlePrefixListChange}
@@ -400,3 +400,9 @@ const StyledMultipleIPInput = styled(MultipleIPInput, {
400400
})(({ theme, ips }) => ({
401401
...(ips.length !== 0 ? { marginTop: theme.spacingFunction(16) } : {}),
402402
}));
403+
404+
const StyledMultiplePrefixListSelect = styled(MultiplePrefixListSelect, {
405+
label: 'StyledMultipleIPInput',
406+
})(({ theme, pls }) => ({
407+
...(pls.length !== 0 ? { marginTop: theme.spacingFunction(16) } : {}),
408+
}));

0 commit comments

Comments
 (0)