diff --git a/packages/manager/.changeset/pr-11172-changed-1730121782530.md b/packages/manager/.changeset/pr-11172-changed-1730121782530.md new file mode 100644 index 00000000000..6993a57ddf2 --- /dev/null +++ b/packages/manager/.changeset/pr-11172-changed-1730121782530.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Changed +--- + +Linode details summary VPC IPv4 text to copy object ([#11172](https://github.com/linode/manager/pull/11172)) diff --git a/packages/manager/src/components/EntityDetail/EntityDetail.tsx b/packages/manager/src/components/EntityDetail/EntityDetail.tsx index d019a34c5ff..a72f98c7a77 100644 --- a/packages/manager/src/components/EntityDetail/EntityDetail.tsx +++ b/packages/manager/src/components/EntityDetail/EntityDetail.tsx @@ -51,8 +51,7 @@ const GridBody = styled(Grid, { ? undefined : `1px solid ${theme.borderColors.borderTable}`, // @TODO LKE-E: This conditional can be removed when/if the footer is introduced in M3-8348 borderTop: `1px solid ${theme.borderColors.borderTable}`, - paddingBottom: theme.spacing(), - paddingRight: theme.spacing(), + padding: theme.spacing(), })); const GridFooter = styled(Grid, { diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts index 3205fd5973b..41dce23f752 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts +++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts @@ -88,6 +88,47 @@ export const sxLastListItem = { paddingRight: 0, }; +// --------------------------------------------------------------------- +// VPC Label Styles +// --------------------------------------------------------------------- + +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 StyledIPv4Label = styled(Box, { label: 'StyledIPv4Label' })( + ({ 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 StyledIPv4Item = styled(Box, { label: 'StyledIPv4Item' })( + ({ theme }) => ({ + '& div': { + fontSize: 15, + }, + alignItems: 'center', + backgroundColor: theme.tokens.interaction.Background.Secondary, + display: 'flex', + fontFamily: '"UbuntuMono", monospace, sans-serif', + padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`, + }) +); + export const StyledListItem = styled(Typography, { label: 'StyledTypography' })( ({ theme }) => ({ borderRight: `1px solid ${theme.borderColors.borderTypography}`, diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx index ac5a5480935..f6f300ca60a 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx +++ b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx @@ -24,9 +24,14 @@ import { StyledColumnLabelGrid, StyledLabelBox, StyledListItem, + StyledIPv4Label, + StyledIPv4Item, StyledSummaryGrid, StyledVPCBox, + StyledCopyTooltip, + StyledGradientDiv, sxLastListItem, + StyledIPv4Box, } from './LinodeEntityDetail.styles'; import { ipv4TableID } from './LinodesDetail/LinodeNetworking/LinodeIPAddresses'; import { lishLink, sshLink } from './LinodesDetail/utilities'; @@ -40,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; @@ -253,8 +259,10 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => { display: 'flex', flexDirection: 'column', paddingLeft: '8px', + alignItems: 'start', }, }} + alignItems="center" container direction="row" spacing={2} @@ -271,21 +279,29 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => { - + - Subnets: + Subnet: {' '} {getSubnetsString(linodeAssociatedSubnets ?? [])} - - - - VPC IPv4: - {' '} - {configInterfaceWithVPC?.ipv4?.vpc} - - + {configInterfaceWithVPC?.ipv4?.vpc && ( + + + VPC IPv4 + + + + + + + + + )} )}