Skip to content

change: [UIE-9859] - Improvements in Add Network interface drawer #13264

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

Merged
grevanak-akamai merged 5 commits into from
Jan 14, 2026
Merged

change: [UIE-9859] - Improvements in Add Network interface drawer #13264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3a27294
change: [UIE-9859] - Improvements in Add interface drawer
grevanak-akamai Jan 12, 2026
f28a8f8
Added changeset: Improvements in Add Network interface drawer
grevanak-akamai Jan 12, 2026
6667506
Addressed review comments
grevanak-akamai Jan 13, 2026
083a093
Update warning text
grevanak-akamai Jan 14, 2026
8e97bcc
Merge branch 'develop' into feature/UIE-9859-add-notice-in-add-interf…
grevanak-akamai Jan 14, 2026
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-13264-changed-1768219863915.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Changed
---

Improvements in Add Network interface drawer ([#13264](https://github.com/linode/manager/pull/13264))
80 changes: 74 additions & 6 deletions ...odesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { linodeInterfaceFactoryPublic } from '@linode/utilities';
import userEvent from '@testing-library/user-event';
import React from 'react';

Expand All @@ -11,39 +12,60 @@
const props = { linodeId: 0, onClose: vi.fn(), regionId: '' };

describe('AddInterfaceForm', () => {
it('renders radios for the interface types (Public, VPC, VLAN)', () => {
const { getByRole } = renderWithTheme(<AddInterfaceForm {...props} />);
beforeEach(() => {
server.use(
http.get('*/linode/instances/:linodeId/interfaces', () => {

Check warning on line 17 in packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.test.tsx

View workflow job for this annotation

GitHub Actions / ESLint Review (manager) 

[eslint] reported by reviewdog 🐶
Define a constant instead of duplicating this literal 3 times.

Raw Output:
{"ruleId":"sonarjs/no-duplicate-string","severity":1,"message":"Define a constant instead of duplicating this literal 3 times.","line":17,"column":16,"nodeType":"Literal","endLine":17,"endColumn":57}
return HttpResponse.json({
interfaces: [],
});
})
);
});

it('renders radios for the interface types (Public, VPC, VLAN)', async () => {
const { getByRole, findByRole } = renderWithTheme(
<AddInterfaceForm {...props} />
);

// Wait for the loading to complete and form to render
await findByRole('radio', { name: 'VPC' });

expect(getByRole('radio', { name: 'VPC' })).toBeInTheDocument();
expect(getByRole('radio', { name: 'Public' })).toBeInTheDocument();
expect(getByRole('radio', { name: 'VLAN' })).toBeInTheDocument();
});

it('renders a Firewall select if "VPC" is selected', async () => {
const { getByRole, getByLabelText } = renderWithTheme(
const { getByRole, getByLabelText, findByRole } = renderWithTheme(
<AddInterfaceForm {...props} />
);

// Wait for the loading to complete and form to render
await findByRole('radio', { name: 'VPC' });
await userEvent.click(getByRole('radio', { name: 'VPC' }));

expect(getByLabelText('Firewall')).toBeVisible();
});

it('renders a Firewall select if "Public" is selected', async () => {
const { getByRole, getByLabelText } = renderWithTheme(
const { getByRole, getByLabelText, findByRole } = renderWithTheme(
<AddInterfaceForm {...props} />
);

// Wait for the loading to complete and form to render
await findByRole('radio', { name: 'Public' });
await userEvent.click(getByRole('radio', { name: 'Public' }));

expect(getByLabelText('Firewall')).toBeVisible();
});

it('renders does not render a Firewall select if "VLAN" is selected', async () => {
const { getByRole, queryByLabelText } = renderWithTheme(
const { getByRole, queryByLabelText, findByRole } = renderWithTheme(
<AddInterfaceForm {...props} />
);

// Wait for the loading to complete and form to render
await findByRole('radio', { name: 'VLAN' });
await userEvent.click(getByRole('radio', { name: 'VLAN' }));

expect(queryByLabelText('Firewall')).toBeNull();
Expand All @@ -67,12 +89,58 @@
})
);

const { getByRole, findByDisplayValue } = renderWithTheme(
const { getByRole, findByDisplayValue, findByRole } = renderWithTheme(
<AddInterfaceForm {...props} />
);

// Wait for the loading to complete and form to render
await findByRole('radio', { name: 'VPC' });
await userEvent.click(getByRole('radio', { name: 'VPC' }));

await findByDisplayValue(firewall.label);
});

it('should show a warning notice on selection of VPC option if a Public interface already exists', async () => {
const mockPublicInterface = linodeInterfaceFactoryPublic.build();

server.use(
http.get('*/linode/instances/:linodeId/interfaces', () => {
return HttpResponse.json({
interfaces: [mockPublicInterface],
});
})
);

const { getByRole, findByRole, getByText } = renderWithTheme(
<AddInterfaceForm {...props} />
);

// Wait for the loading to complete and form to render
await findByRole('radio', { name: 'VPC' });
await userEvent.click(getByRole('radio', { name: 'VPC' }));
expect(
getByText(/This Linode already has a public interface/)
).toBeVisible();
});

it('should disable Public interface radio button if a Public interface already exists', async () => {
const mockPublicInterface = linodeInterfaceFactoryPublic.build();

server.use(
http.get('*/linode/instances/:linodeId/interfaces', () => {
return HttpResponse.json({
interfaces: [mockPublicInterface],
});
})
);

const { getByRole, findByRole } = renderWithTheme(
<AddInterfaceForm {...props} />
);

// Wait for the loading to complete and form to render
await findByRole('radio', { name: 'Public' });

expect(getByRole('radio', { name: 'Public' })).toBeDisabled();
});
});
52 changes: 48 additions & 4 deletions ...s/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { yupResolver } from '@hookform/resolvers/yup';
import { useCreateLinodeInterfaceMutation } from '@linode/queries';
import { Notice, Stack } from '@linode/ui';
import {
useCreateLinodeInterfaceMutation,
useLinodeInterfacesQuery,
} from '@linode/queries';
import { Box, CircleProgress, Notice, Stack, Typography } from '@linode/ui';
import { useSnackbar } from 'notistack';
import React from 'react';
import { FormProvider, useForm } from 'react-hook-form';
Expand All @@ -10,6 +13,7 @@ import {
getLinodeInterfacePayload,
} from 'src/features/Linodes/LinodeCreate/Networking/utilities';

import { getLinodeInterfaceType } from '../utilities';
import { Actions } from './Actions';
import { InterfaceFirewall } from './InterfaceFirewall';
import { InterfaceType } from './InterfaceType';
Expand All @@ -32,6 +36,14 @@ export const AddInterfaceForm = (props: Props) => {

const { mutateAsync } = useCreateLinodeInterfaceMutation(linodeId);

const { data: interfacesData, isPending: isLoadingInterfaces } =
useLinodeInterfacesQuery(linodeId);

const existingInterfaces =
interfacesData?.interfaces.map((networkInterface) =>
getLinodeInterfaceType(networkInterface)
) ?? [];
const isPublicInterfacePresent = existingInterfaces.includes('Public');
const form = useForm<CreateInterfaceFormValues>({
defaultValues: {
firewall_id: null,
Expand Down Expand Up @@ -78,6 +90,21 @@ export const AddInterfaceForm = (props: Props) => {

const selectedInterfacePurpose = form.watch('purpose');

if (isLoadingInterfaces) {
return (
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: 'calc(100% - 100px)',
}}
>
<CircleProgress size="md" />
</Box>
);
}

return (
<FormProvider {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
Expand All @@ -94,13 +121,30 @@ export const AddInterfaceForm = (props: Props) => {
variant="error"
/>
)}
<InterfaceType />
<InterfaceType existingInterfaces={existingInterfaces} />
{selectedInterfacePurpose === 'public' && <PublicInterface />}
{selectedInterfacePurpose === 'vlan' && (
<VLANInterface regionId={regionId} />
)}
{selectedInterfacePurpose === 'vpc' && (
<VPCInterface regionId={regionId} />
<Box>
{isPublicInterfacePresent && (
<Notice variant="warning">
<Typography>
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
<strong> Public access</strong> option instead.
</Typography>
<Typography paddingTop={2}>
Each Linode includes one public IP address. To request
additional public IPs, please note that they incur a monthly
charge.
</Typography>
</Notice>
)}
<VPCInterface regionId={regionId} />
</Box>
)}
{selectedInterfacePurpose !== 'vlan' && <InterfaceFirewall />}
<Actions onClose={onClose} />
Expand Down
27 changes: 25 additions & 2 deletions ...odes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/InterfaceType.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import {
FormHelperText,
Radio,
RadioGroup,
Stack,
TooltipIcon,
} from '@linode/ui';
import { useQueryClient } from '@tanstack/react-query';
import { useSnackbar } from 'notistack';
Expand All @@ -13,10 +15,15 @@ import { useController, useFormContext } from 'react-hook-form';

import { getDefaultFirewallForInterfacePurpose } from 'src/features/Linodes/LinodeCreate/Networking/utilities';

import type { LinodeInterfaceType } from '../utilities';
import type { CreateInterfaceFormValues } from './utilities';
import type { InterfacePurpose } from '@linode/api-v4';

export const InterfaceType = () => {
interface Props {
existingInterfaces?: LinodeInterfaceType[] | null;
}
export const InterfaceType = (props: Props) => {
const { existingInterfaces } = props;
const queryClient = useQueryClient();
const { enqueueSnackbar } = useSnackbar();

Expand Down Expand Up @@ -72,7 +79,23 @@ export const InterfaceType = () => {
sx={{ my: `0 !important` }}
value={field.value ?? null}
>
<FormControlLabel control={<Radio />} label="Public" value="public" />
<FormControlLabel
control={<Radio />}
disabled={existingInterfaces?.includes('Public')}
label={
<Stack alignItems="center" direction="row" spacing={0.5}>
Public
{existingInterfaces?.includes('Public') && (
<TooltipIcon
status="info"
sxTooltipIcon={{ p: 0, ml: '8px !important' }}
text="Each Linode can only have one public interface"
/>
)}
</Stack>
}
value="public"
/>
<FormControlLabel control={<Radio />} label="VPC" value="vpc" />
<FormControlLabel control={<Radio />} label="VLAN" value="vlan" />
</RadioGroup>
Expand Down