Skip to content
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

change: [M3-7337] - change Linode Details Summary VPC IPv4 Text to Copy Object. #11172

Merged
merged 10 commits into from
Nov 8, 2024
Merged

change: [M3-7337] - change Linode Details Summary VPC IPv4 Text to Copy Object. #11172

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9ec5709
change: [M3-7337] - change Linode Details Summary VPC IPv4 Text to Co…
hasyed-akamai Oct 28, 2024
9cd8a92
Added changeset: change Linode Details Summary VPC IPv4 Text to Copy …
hasyed-akamai Oct 28, 2024
364b1fa
Update changeset description
hasyed-akamai Oct 29, 2024
346e2c1
remove optional chaining
hasyed-akamai Oct 29, 2024
f8fc190
change Text from "Subnets" to "Subnet"
hasyed-akamai Oct 29, 2024
4ca6306
remove extra borderTop
hasyed-akamai Oct 29, 2024
58139e3
Merge branch 'develop' into feature/M3-7337-Linode-details-summary-VP…
hasyed-akamai Nov 6, 2024
a5cfc2e
refactor: [M3-7337] - change Linode Details Summary VPC IPv4 Text to …
hasyed-akamai Nov 6, 2024
6cb00c8
Add descriptive variable name
hasyed-akamai Nov 7, 2024
3b37dc7
Merge branch 'develop' into feature/M3-7337-Linode-details-summary-VP…
hasyed-akamai Nov 8, 2024
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-11172-changed-1730121782530.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Changed
---

change Linode Details Summary VPC IPv4 Text to Copy Object. ([#11172](https://github.com/linode/manager/pull/11172))
hasyed-akamai marked this conversation as resolved.
Show resolved Hide resolved
36 changes: 36 additions & 0 deletions packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,42 @@ export const sxLastListItem = {
paddingRight: 0,
};

// ---------------------------------------------------------------------
// VPC Label Styles
// ---------------------------------------------------------------------

export const StyledVPCWrapper = styled(TableRow, { label: 'StyledVPCWrapper' })(
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
export const StyledVPCWrapper = styled(TableRow, { label: 'StyledVPCWrapper' })(
export const StyledIPv4Box = styled(Box, { label: 'StyledIPv4Box' })(

({ theme }) => ({
'&:hover .copy-tooltip > svg, & .copy-tooltip:focus > svg': {
opacity: 1,
},
display: 'flex',
[theme.breakpoints.down('md')]: {
margin: theme.spacing(0),
},
marginLeft: theme.spacing(2),
border: 0,
})
);

export const StyledVPCLabel = styled(Box, { label: 'StyledVPCLabel' })(
({ theme }) => ({
color: theme.textColors.textAccessTable,
fontFamily: theme.font.bold,
backgroundColor: theme.name === 'light' ? theme.color.grey10 : theme.bg.app,
padding: '10px 24px 10px 10px',
alignContent: 'center',
})
);

export const StyledVPCItem = styled(Box, { label: 'StyledVPCLabel' })(
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
export const StyledVPCItem = styled(Box, { label: 'StyledVPCLabel' })(
export const StyledIPv4Item = styled(Box, { label: 'StyledIPv4Item' })(

({ theme }) => ({
backgroundColor: theme.interactionTokens.Background.Secondary,
alignContent: 'center',
border: 0,
})
);

export const StyledListItem = styled(Typography, { label: 'StyledTypography' })(
({ theme }) => ({
borderRight: `1px solid ${theme.borderColors.borderTypography}`,
Expand Down
37 changes: 28 additions & 9 deletions packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,15 @@ import {
StyledColumnLabelGrid,
StyledLabelBox,
StyledListItem,
StyledVPCLabel,
StyledVPCItem,
StyledSummaryGrid,
StyledVPCBox,
StyledCopyTooltip,
StyledTableCell,
StyledGradientDiv,
sxLastListItem,
StyledVPCWrapper,
} from './LinodeEntityDetail.styles';
import { ipv4TableID } from './LinodesDetail/LinodeNetworking/LinodeIPAddresses';
import { lishLink, sshLink } from './LinodesDetail/utilities';
Expand All @@ -39,6 +45,7 @@ import type {
} from '@linode/api-v4/lib/linodes/types';
import type { Subnet } from '@linode/api-v4/lib/vpcs';
import type { TypographyProps } from 'src/components/Typography';
import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';

interface LinodeEntityDetailProps {
id: number;
Expand Down Expand Up @@ -233,8 +240,10 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => {
display: 'flex',
flexDirection: 'column',
paddingLeft: '8px',
alignItems: 'start',
},
}}
alignItems="center"
container
direction="row"
spacing={2}
Expand All @@ -251,21 +260,31 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => {
</StyledListItem>
</StyledVPCBox>
<StyledVPCBox>
<StyledListItem>
<StyledListItem sx={{ ...sxLastListItem }}>
<StyledLabelBox component="span" data-testid="subnets-string">
Subnets:
</StyledLabelBox>{' '}
{getSubnetsString(linodeAssociatedSubnets ?? [])}
</StyledListItem>
</StyledVPCBox>
<StyledVPCBox>
<StyledListItem sx={{ ...sxLastListItem }}>
<StyledLabelBox component="span" data-testid="vpc-ipv4">
VPC IPv4:
</StyledLabelBox>{' '}
{configInterfaceWithVPC?.ipv4?.vpc}
</StyledListItem>
</StyledVPCBox>
<StyledVPCWrapper>
<StyledVPCLabel data-testid="vpc-ipv4">VPC IPv4</StyledVPCLabel>
<StyledVPCItem component="span" data-testid="vpc-ipv4">
{configInterfaceWithVPC?.ipv4?.vpc && (
Copy link
Contributor

Choose a reason for hiding this comment

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

Lets add this check for the complete wrapper component

<StyledTableCell sx={{ border: 0 }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Could we merge the styles of both StyledVPCItem and StyledTableCell into one styled component?

<StyledGradientDiv>
<CopyTooltip
copyableText
text={configInterfaceWithVPC?.ipv4?.vpc}
hasyed-akamai marked this conversation as resolved.
Show resolved Hide resolved
/>
</StyledGradientDiv>
<StyledCopyTooltip
text={configInterfaceWithVPC?.ipv4?.vpc}
/>
</StyledTableCell>
)}
</StyledVPCItem>
</StyledVPCWrapper>
</Grid>
</Grid>
)}
Expand Down
Loading