-
Notifications
You must be signed in to change notification settings - Fork 367
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [M3-7272] - Disable Public IP Address for VPC only Linode (#9899)
## Description 📝 Visually disable Public IP addresses for VPC-only Linodes and add tooltip explanation. A VPC-only Linode is a Linode that has at least one config interface with `primary` set to `true` and purpose `vpc` and no `ipv4.nat_1_1` value. ## Changes 🔄 - Disable the Public IP Address column in the Linodes landing table - Disable the Public IP Addresses and Access sections in the Linode's details page - Disable the Public IPv4 row in the Linode's details -> Network tab -> IP Addresses table - Refactored components into their own file and added unit testing - Created custom hook `useVPCConfigInterface` to share logic ## How to test 🧪 ### Prerequisites - Ensure your account has vpc customer tags - Have a VPC-only Linode - You can either create a Linode and add a VPC or edit a Linode's config so that the primary interface is VPC. (make sure the `assign a public IPv4 address` checkbox is unchecked) ### Verification steps For the VPC-only Linode - The Public IP Address column in the Linodes landing table should be disabled and there should be a tooltip - The Public IP Addresses and Access sections in the Linode's details page should be disabled and there should be a tooltip - The Public IPv4 row in the Linode's details -> Network tab -> IP Addresses table should be disabled and there should be a tooltip
- Loading branch information
1 parent
1e0ea08
commit f465b7d
Showing
21 changed files
with
697 additions
and
347 deletions.
There are no files selected for viewing
5 changes: 5 additions & 0 deletions
5
packages/manager/.changeset/pr-9899-upcoming-features-1699911388781.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@linode/manager": Upcoming Features | ||
| --- | ||
|
|
||
| Disable Public IP Address for VPC-only Linodes ([#9899](https://github.com/linode/manager/pull/9899)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
packages/manager/src/features/Linodes/AccessTable.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { fireEvent } from '@testing-library/react'; | ||
| import * as React from 'react'; | ||
|
|
||
| import { linodeFactory } from 'src/factories'; | ||
| import { PUBLIC_IPS_UNASSIGNED_TOOLTIP_TEXT } from 'src/features/Linodes/PublicIpsUnassignedTooltip'; | ||
| import { renderWithTheme } from 'src/utilities/testHelpers'; | ||
|
|
||
| import { AccessTable } from './AccessTable'; | ||
|
|
||
| const linode = linodeFactory.build(); | ||
|
|
||
| describe('AccessTable', () => { | ||
| it('should disable copy button and display help icon tooltip if isVPCOnlyLinode is true', async () => { | ||
| const { findByRole, getAllByRole } = renderWithTheme( | ||
| <AccessTable | ||
| isVPCOnlyLinode={true} | ||
| rows={[{ text: linode.ipv4[0] }, { text: linode.ipv4[1] }]} | ||
| title={'Public IP Addresses'} | ||
| /> | ||
| ); | ||
|
|
||
| const buttons = getAllByRole('button'); | ||
| const helpIconButton = buttons[0]; | ||
| const copyButtons = buttons.slice(1); | ||
|
|
||
| fireEvent.mouseEnter(helpIconButton); | ||
|
|
||
| const publicIpsUnassignedTooltip = await findByRole(/tooltip/); | ||
| expect(publicIpsUnassignedTooltip).toContainHTML( | ||
| PUBLIC_IPS_UNASSIGNED_TOOLTIP_TEXT | ||
| ); | ||
|
|
||
| copyButtons.forEach((copyButton) => { | ||
| expect(copyButton).toBeDisabled(); | ||
| }); | ||
| }); | ||
|
|
||
| it('should not disable copy button if isVPCOnlyLinode is false', () => { | ||
| const { getAllByRole } = renderWithTheme( | ||
| <AccessTable | ||
| isVPCOnlyLinode={false} | ||
| rows={[{ text: linode.ipv4[0] }, { text: linode.ipv4[1] }]} | ||
| title={'Public IP Addresses'} | ||
| /> | ||
| ); | ||
|
|
||
| const copyButtons = getAllByRole('button'); | ||
|
|
||
| copyButtons.forEach((copyButton) => { | ||
| expect(copyButton).not.toBeDisabled(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import Grid, { Grid2Props } from '@mui/material/Unstable_Grid2'; | ||
| import { SxProps } from '@mui/system'; | ||
| import * as React from 'react'; | ||
|
|
||
| import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; | ||
| import { TableBody } from 'src/components/TableBody'; | ||
| import { TableCell } from 'src/components/TableCell'; | ||
| import { PublicIpsUnassignedTooltip } from 'src/features/Linodes/PublicIpsUnassignedTooltip'; | ||
|
|
||
| import { | ||
| StyledColumnLabelGrid, | ||
| StyledCopyTooltip, | ||
| StyledGradientDiv, | ||
| StyledTable, | ||
| StyledTableCell, | ||
| StyledTableGrid, | ||
| StyledTableRow, | ||
| } from './LinodeEntityDetail.styles'; | ||
|
|
||
| interface AccessTableRow { | ||
| heading?: string; | ||
| text: null | string; | ||
| } | ||
|
|
||
| interface AccessTableProps { | ||
| footer?: JSX.Element; | ||
| gridProps?: Grid2Props; | ||
| isVPCOnlyLinode: boolean; | ||
| rows: AccessTableRow[]; | ||
| sx?: SxProps; | ||
| title: string; | ||
| } | ||
|
|
||
| export const AccessTable = React.memo((props: AccessTableProps) => { | ||
| const { footer, gridProps, isVPCOnlyLinode, rows, sx, title } = props; | ||
| return ( | ||
| <Grid | ||
| container | ||
| direction="column" | ||
| md={6} | ||
| spacing={1} | ||
| sx={sx} | ||
| {...gridProps} | ||
| > | ||
| <StyledColumnLabelGrid> | ||
| {title}{' '} | ||
| {isVPCOnlyLinode && | ||
| title.includes('Public IP Address') && | ||
| PublicIpsUnassignedTooltip} | ||
| </StyledColumnLabelGrid> | ||
| <StyledTableGrid> | ||
| <StyledTable> | ||
| <TableBody> | ||
| {rows.map((thisRow) => { | ||
| return thisRow.text ? ( | ||
| <StyledTableRow disabled={isVPCOnlyLinode} key={thisRow.text}> | ||
| {thisRow.heading ? ( | ||
| <TableCell component="th" scope="row"> | ||
| {thisRow.heading} | ||
| </TableCell> | ||
| ) : null} | ||
| <StyledTableCell> | ||
| <StyledGradientDiv> | ||
| <CopyTooltip | ||
| copyableText | ||
| disabled={isVPCOnlyLinode} | ||
| text={thisRow.text} | ||
| /> | ||
| </StyledGradientDiv> | ||
| <StyledCopyTooltip | ||
| disabled={isVPCOnlyLinode} | ||
| text={thisRow.text} | ||
| /> | ||
| </StyledTableCell> | ||
| </StyledTableRow> | ||
| ) : null; | ||
| })} | ||
| </TableBody> | ||
| </StyledTable> | ||
| {footer ? <Grid sx={{ padding: 0 }}>{footer}</Grid> : null} | ||
| </StyledTableGrid> | ||
| </Grid> | ||
| ); | ||
| }); |
Oops, something went wrong.