Skip to content

change: [UIE-9863] - UX/UI changes in Linode Create flow - Networking #13223

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

Open
grevanak-akamai wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

change: [UIE-9863] - UX/UI changes in Linode Create flow - Networking #13223

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
4fd822c
change: [UIE-9863] - UX/UI changes in Linode Create flow - Networking
grevanak-akamai Dec 23, 2025
39d86e0
Added changeset: UX/UI changes in Linode Create flow - Networking
grevanak-akamai Dec 23, 2025
7be74f1
Fix unit test
grevanak-akamai Dec 23, 2025
5b8e3aa
Fix cypress test cases
grevanak-akamai Dec 29, 2025
c5b2b44
Addressed review comments
grevanak-akamai Jan 2, 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-13223-changed-1766491572015.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Changed
---

UX/UI changes in Linode Create flow - Networking ([#13223](https://github.com/linode/manager/pull/13223))
45 changes: 31 additions & 14 deletions packages/manager/cypress/e2e/core/linodes/create-linode-with-vlan.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,9 +319,14 @@
// Confirm the Linode Interfaces section is shown.
assertNewLinodeInterfacesIsAvailable();

// Open VLAN accordion and select existing VLAN.
cy.get('[data-qa-select-card-heading="VLAN"]').should('be.visible').click();
cy.findByLabelText('VLAN').should('be.enabled').type(mockVlan.label);
// select existing VLAN.
linodeCreatePage.selectInterface('vlan');
// Confirm that mocked VLAN is shown in the Autocomplete, and then select it.
cy.get('[data-qa-autocomplete="VLAN"]').within(() => {

Check warning on line 325 in packages/manager/cypress/e2e/core/linodes/create-linode-with-vlan.spec.ts

View workflow job for this annotation

GitHub Actions / ESLint Review (manager) 

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

Raw Output:
{"ruleId":"sonarjs/no-duplicate-string","severity":1,"message":"Define a constant instead of duplicating this literal 6 times.","line":325,"column":12,"nodeType":"Literal","endLine":325,"endColumn":43}
cy.findByLabelText('VLAN').should('be.visible');
cy.get('[data-testid="textfield-input"]').click();

Check warning on line 327 in packages/manager/cypress/e2e/core/linodes/create-linode-with-vlan.spec.ts

View workflow job for this annotation

GitHub Actions / ESLint Review (manager) 

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

Raw Output:
{"ruleId":"sonarjs/no-duplicate-string","severity":1,"message":"Define a constant instead of duplicating this literal 6 times.","line":327,"column":14,"nodeType":"Literal","endLine":327,"endColumn":47}
cy.focused().type(`${mockVlan.label}`);
});
ui.autocompletePopper
.findByTitle(mockVlan.label)
.should('be.visible')
Expand Down Expand Up @@ -399,10 +404,14 @@
linodeCreatePage.selectLinodeInterfacesType();

// Select VLAN card
linodeCreatePage.selectInterfaceCard('VLAN');
linodeCreatePage.selectInterface('vlan');

// Open VLAN accordion and select existing VLAN.
cy.findByLabelText('VLAN').should('be.enabled').type(mockVlan.label);
// select existing VLAN.
cy.get('[data-qa-autocomplete="VLAN"]').within(() => {
cy.findByLabelText('VLAN').should('be.visible');
cy.get('[data-testid="textfield-input"]').click();
cy.focused().type(`${mockVlan.label}`);
});
ui.autocompletePopper
.findByTitle(mockVlan.label)
.should('be.visible')
Expand Down Expand Up @@ -477,10 +486,14 @@
assertNewLinodeInterfacesIsAvailable();

// Select VLAN card
linodeCreatePage.selectInterfaceCard('VLAN');
linodeCreatePage.selectInterface('vlan');

// Open VLAN accordion and specify new VLAN.
cy.findByLabelText('VLAN').should('be.enabled').type(mockVlan.label);
// select new VLAN.
cy.get('[data-qa-autocomplete="VLAN"]').within(() => {
cy.findByLabelText('VLAN').should('be.visible');
cy.get('[data-testid="textfield-input"]').click();
cy.focused().type(`${mockVlan.label}`);
});
ui.autocompletePopper
.findByTitle(`Create "${mockVlan.label}"`)
.should('be.visible')
Expand Down Expand Up @@ -558,10 +571,14 @@
linodeCreatePage.selectLinodeInterfacesType();

// Select VLAN card
linodeCreatePage.selectInterfaceCard('VLAN');
linodeCreatePage.selectInterface('vlan');

// Open VLAN accordion and specify new VLAN.
cy.findByLabelText('VLAN').should('be.enabled').type(mockVlan.label);
// select new VLAN.
cy.get('[data-qa-autocomplete="VLAN"]').within(() => {
cy.findByLabelText('VLAN').should('be.visible');
cy.get('[data-testid="textfield-input"]').click();
cy.focused().type(`${mockVlan.label}`);
});
ui.autocompletePopper
.findByTitle(`Create "${mockVlan.label}"`)
.should('be.visible')
Expand Down Expand Up @@ -620,9 +637,9 @@
assertNewLinodeInterfacesIsAvailable();

// Select VLAN card
linodeCreatePage.selectInterfaceCard('VLAN');
linodeCreatePage.selectInterface('vlan');

// Expand VLAN accordion, confirm VLAN availability notice is displayed and
// confirm VLAN availability notice is displayed and
// that VLAN fields are disabled while no region is selected.
cy.findByText('VLAN is not available in the selected region.', {
exact: false,
Expand Down
14 changes: 7 additions & 7 deletions packages/manager/cypress/e2e/core/linodes/create-linode-with-vpc.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -476,8 +476,8 @@ describe('Create Linode with VPCs (Linode Interfaces)', () => {
// Confirm the Linode Interfaces section is shown.
assertNewLinodeInterfacesIsAvailable();

// Select VPC card
linodeCreatePage.selectInterfaceCard('VPC');
// Select VPC
linodeCreatePage.selectInterface('vpc');

// Confirm that mocked VPC is shown in the Autocomplete, and then select it.
cy.get('[data-qa-autocomplete="VPC"]').within(() => {
Expand Down Expand Up @@ -615,8 +615,8 @@ describe('Create Linode with VPCs (Linode Interfaces)', () => {
// Switch to Linode Interfaces
linodeCreatePage.selectLinodeInterfacesType();

// Select VPC card
linodeCreatePage.selectInterfaceCard('VPC');
// Select VPC option
linodeCreatePage.selectInterface('vpc');

// Confirm that mocked VPC is shown in the Autocomplete, and then select it.
cy.get('[data-qa-autocomplete="VPC"]').within(() => {
Expand Down Expand Up @@ -751,7 +751,7 @@ describe('Create Linode with VPCs (Linode Interfaces)', () => {
assertNewLinodeInterfacesIsAvailable();

// Select VPC card
linodeCreatePage.selectInterfaceCard('VPC');
linodeCreatePage.selectInterface('vpc');

cy.findByText('Create VPC').should('be.visible').click();

Expand Down Expand Up @@ -937,7 +937,7 @@ describe('Create Linode with VPCs (Linode Interfaces)', () => {
linodeCreatePage.selectLinodeInterfacesType();

// Select VPC card
linodeCreatePage.selectInterfaceCard('VPC');
linodeCreatePage.selectInterface('vpc');

cy.findByText('Create VPC').should('be.visible').click();

Expand Down Expand Up @@ -1068,7 +1068,7 @@ describe('Create Linode with VPCs (Linode Interfaces)', () => {
assertNewLinodeInterfacesIsAvailable();

// Select VPC card.
linodeCreatePage.selectInterfaceCard('VPC');
linodeCreatePage.selectInterface('vpc');

// Confirm that VPC selection is disabled.
cy.get('[data-qa-autocomplete="VPC"]').within(() => {
Expand Down
4 changes: 2 additions & 2 deletions packages/manager/cypress/support/constants/linode-interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const linodeInterfacesLabelText = 'Linode Interfaces';
export const betaLabelText = 'beta';

export const linodeInterfacesDescriptionText1 =
'Linode Interfaces are the preferred option for VPCs and are managed directly through a Linode’s Network settings.';
"Managed directly through a Linode's Network settings. This is the recommended option.";

export const linodeInterfacesDescriptionText2 =
'Cloud Firewalls are assigned to individual VPC and public interfaces.';
Expand All @@ -53,7 +53,7 @@ export const legacyInterfacesLabelText =
'Configuration Profile Interfaces (Legacy)';

export const legacyInterfacesDescriptionText1 =
'Interfaces in the Configuration Profile are part of a Linode’s configuration.';
'Interfaces are part of the Linode’s Configuration Profile.';

export const legacyInterfacesDescriptionText2 =
'Cloud Firewalls are applied at the Linode level and automatically cover all non-VLAN interfaces in the Configuration Profile.';
Expand Down
12 changes: 5 additions & 7 deletions packages/manager/cypress/support/ui/pages/linode-create-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ export const linodeCreatePage = {
* Select the Linode Interfaces Type.
*/
selectLinodeInterfacesType: () => {
cy.findByText('Linode Interfaces').click();
cy.get('[data-qa-interfaces-option="linode"]').click();
},

/**
Expand All @@ -141,13 +141,11 @@ export const linodeCreatePage = {
},

/**
* Select the interfaces' card.
* Select the interfaces' type.
*
* @param title - Interfaces' card title to select.
* @param type - Interfaces' type title to select.
*/
selectInterfaceCard: (title: string) => {
cy.get(`[data-qa-select-card-heading="${title}"]`)
.should('be.visible')
.click();
selectInterface: (type: 'public' | 'vlan' | 'vpc') => {
cy.get(`[data-qa-interface-type-option="${type}"]`).click();
},
};
13 changes: 1 addition & 12 deletions packages/manager/cypress/support/util/linodes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@ import { findOrCreateDependencyVlan } from 'support/api/vlans';
import { pageSize } from 'support/constants/api';
import {
dryRunButtonText,
legacyInterfacesDescriptionText1,
legacyInterfacesDescriptionText2,
legacyInterfacesLabelText,
linodeInterfacesDescriptionText1,
linodeInterfacesDescriptionText2,
linodeInterfacesLabelText,
networkConnectionDescriptionText,
networkConnectionSectionText,
networkInterfaceTypeSectionText,
promptDialogDescription1,
Expand Down Expand Up @@ -330,14 +324,9 @@ export const assertNewLinodeInterfacesIsAvailable = (
): void => {
const expectedBehavior = linodeInterfacesEnabled ? 'be.visible' : 'not.exist';
cy.findByText(networkInterfaceTypeSectionText).should(expectedBehavior);
cy.findByText(linodeInterfacesLabelText).should(expectedBehavior);
cy.findByText(linodeInterfacesDescriptionText1).should(expectedBehavior);
cy.findByText(linodeInterfacesDescriptionText2).should(expectedBehavior);
cy.get('[data-qa-interfaces-option="linode"]').should(expectedBehavior);
cy.findByText(legacyInterfacesLabelText).should(expectedBehavior);
cy.findByText(legacyInterfacesDescriptionText1).should(expectedBehavior);
cy.findByText(legacyInterfacesDescriptionText2).should(expectedBehavior);
cy.findByText(networkConnectionSectionText).should(expectedBehavior);
cy.findByText(networkConnectionDescriptionText).should(expectedBehavior);
};

/**
Expand Down
4 changes: 2 additions & 2 deletions packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ describe('InterfaceGeneration', () => {
await userEvent.hover(getByText('Network Interface Type'));

await findByText(
'You account administrator has enforced that all new Linodes are created with Linode interfaces.'
'Your account administrator has enforced that all new Linodes are created with Linode interfaces.'
);

for (const radio of getAllByRole('radio')) {
Expand Down Expand Up @@ -66,7 +66,7 @@ describe('InterfaceGeneration', () => {
await userEvent.hover(getByText('Network Interface Type'));

await findByText(
'You account administrator has enforced that all new Linodes are created with legacy configuration interfaces.'
'Your account administrator has enforced that all new Linodes are created with legacy configuration interfaces.'
);

const radios = getAllByRole('radio');
Expand Down
55 changes: 35 additions & 20 deletions packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
Radio,
RadioGroup,
Stack,
TooltipIcon,
Typography,
} from '@linode/ui';
import React from 'react';
Expand All @@ -22,9 +23,9 @@ const disabledReasonMap: Partial<
Record<LinodeInterfaceAccountSetting, string>
> = {
legacy_config_only:
'You account administrator has enforced that all new Linodes are created with legacy configuration interfaces.',
'Your account administrator has enforced that all new Linodes are created with legacy configuration interfaces.',
linode_only:
'You account administrator has enforced that all new Linodes are created with Linode interfaces.',
'Your account administrator has enforced that all new Linodes are created with Linode interfaces.',
};

export const InterfaceGeneration = () => {
Expand Down Expand Up @@ -65,43 +66,57 @@ export const InterfaceGeneration = () => {
>
<FormControlLabel
control={<Radio />}
data-qa-interfaces-option="linode"
label={
<Stack mt={1.25} spacing={0.5}>
<Stack direction="row">
<Typography sx={(theme) => ({ font: theme.font.bold })}>
Linode Interfaces
</Typography>
<LinodeInterfaceFeatureStatusChip />
<TooltipIcon
status="info"
sxTooltipIcon={{ p: 0, ml: 0.5 }}
text={
<>
Managed directly through a Linode&apos;s Network
settings. This is the recommended option.
<br />
<br />
Cloud Firewalls are assigned to individual VPC and
public interfaces.
</>
}
/>
</Stack>
<Typography>
Linode Interfaces are the preferred option for VPCs and are
managed directly through a Linode’s Network settings.
</Typography>
<Typography>
Cloud Firewalls are assigned to individual VPC and public
interfaces.
</Typography>
</Stack>
}
sx={{ alignItems: 'flex-start' }}
value="linode"
/>
<FormControlLabel
control={<Radio />}
data-qa-interfaces-option="legacy_config"
label={
<Stack mt={1.25} spacing={0.5}>
<Stack direction="row" mt={1.25} spacing={0.5}>
<Typography sx={(theme) => ({ font: theme.font.bold })}>
Configuration Profile Interfaces (Legacy)
</Typography>
<Typography>
Interfaces in the Configuration Profile are part of a
Linode’s configuration.
</Typography>
<Typography>
Cloud Firewalls are applied at the Linode level and
automatically cover all non-VLAN interfaces in the
Configuration Profile.
</Typography>
<TooltipIcon
status="info"
sxTooltipIcon={{ p: 0, ml: 0.5 }}
text={
<>
Interfaces are part of the Linode&apos;s Configuration
Profile.
<br />
<br />
Cloud Firewalls are applied at the Linode level and
automatically cover all non-VLAN interfaces in the
Configuration Profile.
</>
}
/>
</Stack>
}
sx={{ alignItems: 'flex-start' }}
Expand Down
Loading