From 9ec5709a4622e4ba3f0d3d69cc84ada9b634ad74 Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Mon, 28 Oct 2024 18:29:55 +0530 Subject: [PATCH 1/8] change: [M3-7337] - change Linode Details Summary VPC IPv4 Text to Copy Object. --- .../Linodes/LinodeEntityDetail.styles.ts | 36 ++++++++++++++++++ .../Linodes/LinodeEntityDetailBody.tsx | 37 ++++++++++++++----- 2 files changed, 64 insertions(+), 9 deletions(-) diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts index 47f29f03e5b..2075e0caa42 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts +++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts @@ -88,6 +88,42 @@ export const sxLastListItem = { paddingRight: 0, }; +// --------------------------------------------------------------------- +// VPC Label Styles +// --------------------------------------------------------------------- + +export const StyledVPCWrapper = styled(TableRow, { label: 'StyledVPCWrapper' })( + ({ 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' })( + ({ theme }) => ({ + backgroundColor: theme.interactionTokens.Background.Secondary, + alignContent: 'center', + border: 0, + }) +); + 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 9eb76ca4d39..2dadf43d830 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx +++ b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx @@ -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'; @@ -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; @@ -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} @@ -251,21 +260,31 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => { - + Subnets: {' '} {getSubnetsString(linodeAssociatedSubnets ?? [])} - - - - VPC IPv4: - {' '} - {configInterfaceWithVPC?.ipv4?.vpc} - - + + VPC IPv4 + + {configInterfaceWithVPC?.ipv4?.vpc && ( + + + + + + + )} + + )} From 9cd8a92cc5382a125b781cc36d12e4d6fc0851eb Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Mon, 28 Oct 2024 18:53:02 +0530 Subject: [PATCH 2/8] Added changeset: change Linode Details Summary VPC IPv4 Text to Copy Object. --- .../manager/.changeset/pr-11172-changed-1730121782530.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-11172-changed-1730121782530.md 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..eb4f9742e6c --- /dev/null +++ b/packages/manager/.changeset/pr-11172-changed-1730121782530.md @@ -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)) From 364b1fae5c4bc2a13db81fab0d663c8f103b87a8 Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Tue, 29 Oct 2024 14:46:25 +0530 Subject: [PATCH 3/8] Update changeset description Co-authored-by: Purvesh Makode --- packages/manager/.changeset/pr-11172-changed-1730121782530.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/.changeset/pr-11172-changed-1730121782530.md b/packages/manager/.changeset/pr-11172-changed-1730121782530.md index eb4f9742e6c..6993a57ddf2 100644 --- a/packages/manager/.changeset/pr-11172-changed-1730121782530.md +++ b/packages/manager/.changeset/pr-11172-changed-1730121782530.md @@ -2,4 +2,4 @@ "@linode/manager": Changed --- -change Linode Details Summary VPC IPv4 Text to Copy Object. ([#11172](https://github.com/linode/manager/pull/11172)) +Linode details summary VPC IPv4 text to copy object ([#11172](https://github.com/linode/manager/pull/11172)) From 346e2c18f629d416a9e8e8413903ab21c427e791 Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Tue, 29 Oct 2024 16:08:32 +0530 Subject: [PATCH 4/8] remove optional chaining --- .../manager/src/features/Linodes/LinodeEntityDetailBody.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx index 2dadf43d830..29baf2c9c31 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx +++ b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx @@ -275,12 +275,10 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => { - + )} From f8fc1906ba23e41684c482dd0602f2d8be17938f Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Tue, 29 Oct 2024 16:09:43 +0530 Subject: [PATCH 5/8] change Text from "Subnets" to "Subnet" --- .../manager/src/features/Linodes/LinodeEntityDetailBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx index 29baf2c9c31..48c262a8892 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx +++ b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx @@ -262,7 +262,7 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => { - Subnets: + Subnet: {' '} {getSubnetsString(linodeAssociatedSubnets ?? [])} From 4ca6306bb3c9c8ef4513ba4dee20d2467a8d0299 Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Tue, 29 Oct 2024 16:10:43 +0530 Subject: [PATCH 6/8] remove extra borderTop --- packages/manager/src/components/EntityDetail/EntityDetail.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/manager/src/components/EntityDetail/EntityDetail.tsx b/packages/manager/src/components/EntityDetail/EntityDetail.tsx index f2be5a8c455..a308e6486ba 100644 --- a/packages/manager/src/components/EntityDetail/EntityDetail.tsx +++ b/packages/manager/src/components/EntityDetail/EntityDetail.tsx @@ -52,8 +52,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, { From a5cfc2ee55c4e9aa81772c08964f4b649fd7d420 Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Wed, 6 Nov 2024 19:32:49 +0530 Subject: [PATCH 7/8] refactor: [M3-7337] - change Linode Details Summary VPC IPv4 Text to Copy Object --- .../Linodes/LinodeEntityDetail.styles.ts | 15 +++++--- .../Linodes/LinodeEntityDetailBody.tsx | 35 +++++++++---------- 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts index 4ded15dcc04..a814642c163 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts +++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts @@ -92,7 +92,7 @@ export const sxLastListItem = { // VPC Label Styles // --------------------------------------------------------------------- -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, @@ -116,11 +116,16 @@ export const StyledVPCLabel = styled(Box, { label: 'StyledVPCLabel' })( }) ); -export const StyledVPCItem = styled(Box, { label: 'StyledVPCLabel' })( +export const StyledIPv4Item = styled(Box, { label: 'StyledIPv4Item' })( ({ theme }) => ({ - backgroundColor: theme.interactionTokens.Background.Secondary, - alignContent: 'center', - border: 0, + '& 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)}`, }) ); diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx index cf55ee3ccc6..cf744da71fe 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx +++ b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx @@ -25,14 +25,13 @@ import { StyledLabelBox, StyledListItem, StyledVPCLabel, - StyledVPCItem, + StyledIPv4Item, StyledSummaryGrid, StyledVPCBox, StyledCopyTooltip, - StyledTableCell, StyledGradientDiv, sxLastListItem, - StyledVPCWrapper, + StyledIPv4Box, } from './LinodeEntityDetail.styles'; import { ipv4TableID } from './LinodesDetail/LinodeNetworking/LinodeIPAddresses'; import { lishLink, sshLink } from './LinodesDetail/utilities'; @@ -287,22 +286,20 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => { {getSubnetsString(linodeAssociatedSubnets ?? [])} - - VPC IPv4 - - {configInterfaceWithVPC?.ipv4?.vpc && ( - - - - - - - )} - - + {configInterfaceWithVPC?.ipv4?.vpc && ( + + VPC IPv4 + + + + + + + + )} )} From 6cb00c864f7728ad83e86a9c90da346033ce6877 Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Thu, 7 Nov 2024 16:32:57 +0530 Subject: [PATCH 8/8] Add descriptive variable name --- .../src/features/Linodes/LinodeEntityDetail.styles.ts | 2 +- .../manager/src/features/Linodes/LinodeEntityDetailBody.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts index a814642c163..41dce23f752 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts +++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts @@ -106,7 +106,7 @@ export const StyledIPv4Box = styled(Box, { label: 'StyledIPv4Box' })( }) ); -export const StyledVPCLabel = styled(Box, { label: 'StyledVPCLabel' })( +export const StyledIPv4Label = styled(Box, { label: 'StyledIPv4Label' })( ({ theme }) => ({ color: theme.textColors.textAccessTable, fontFamily: theme.font.bold, diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx index cf744da71fe..f6f300ca60a 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx +++ b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx @@ -24,7 +24,7 @@ import { StyledColumnLabelGrid, StyledLabelBox, StyledListItem, - StyledVPCLabel, + StyledIPv4Label, StyledIPv4Item, StyledSummaryGrid, StyledVPCBox, @@ -288,7 +288,9 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => { {configInterfaceWithVPC?.ipv4?.vpc && ( - VPC IPv4 + + VPC IPv4 +