diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.test.tsx index 61ddae5436d..37e00afaf58 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.test.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.test.tsx @@ -1,4 +1,7 @@ -import { linodeInterfaceFactoryPublic } from '@linode/utilities'; +import { + linodeInterfaceFactoryPublic, + linodeInterfaceFactoryVPC, +} from '@linode/utilities'; import userEvent from '@testing-library/user-event'; import React from 'react'; @@ -123,6 +126,27 @@ describe('AddInterfaceForm', () => { ).toBeVisible(); }); + it('should show a warning notice on selection of Public option if a VPC interface already exists', async () => { + const mockVPCInterface = linodeInterfaceFactoryVPC.build(); + + server.use( + http.get('*/linode/instances/:linodeId/interfaces', () => { + return HttpResponse.json({ + interfaces: [mockVPCInterface], + }); + }) + ); + + const { getByRole, findByRole, getByText } = renderWithTheme( + + ); + + // Wait for the loading to complete and form to render + await findByRole('radio', { name: 'Public' }); + await userEvent.click(getByRole('radio', { name: 'Public' })); + expect(getByText(/This Linode already has a VPC interface/)).toBeVisible(); + }); + it('should disable Public interface radio button if a Public interface already exists', async () => { const mockPublicInterface = linodeInterfaceFactoryPublic.build(); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.tsx index 16f3e2d438a..82b2370844e 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.tsx @@ -43,7 +43,6 @@ export const AddInterfaceForm = (props: Props) => { interfacesData?.interfaces.map((networkInterface) => getLinodeInterfaceType(networkInterface) ) ?? []; - const isPublicInterfacePresent = existingInterfaces.includes('Public'); const form = useForm({ defaultValues: { firewall_id: null, @@ -105,6 +104,46 @@ export const AddInterfaceForm = (props: Props) => { ); } + const additionalWarningMessage = + 'Each Linode comes with one public IP address. Additional public IP addresses are available upon request and will incur a monthly charge.'; + + const getWarningNotice = () => { + if ( + selectedInterfacePurpose === 'public' && + existingInterfaces.includes('VPC') + ) { + return ( + + + This Linode already has a VPC interface. Having both a VPC interface + and a public interface is not recommended. If you need internet + access, consider using the VPC’s + Public access option instead. + + {additionalWarningMessage} + + ); + } + + if ( + selectedInterfacePurpose === 'vpc' && + existingInterfaces.includes('Public') + ) { + return ( + + + This Linode already has a public interface. Having both a VPC + interface and a public interface is not recommended. If you need + public internet access, consider using the VPC’s{' '} + Public access option instead. + + {additionalWarningMessage} + + ); + } + return null; + }; + return (
@@ -122,30 +161,15 @@ export const AddInterfaceForm = (props: Props) => { /> )} + {getWarningNotice()} {selectedInterfacePurpose === 'public' && } {selectedInterfacePurpose === 'vlan' && ( )} {selectedInterfacePurpose === 'vpc' && ( - - {isPublicInterfacePresent && ( - - - This Linode already has a public interface. Having both a - VPC interface and a public interface is not recommended. If - you need public internet access, consider using the VPC’s - Public access option instead. - - - Each Linode includes one public IP address. To request - additional public IPs, please note that they incur a monthly - charge. - - - )} - - + )} + {selectedInterfacePurpose !== 'vlan' && }