feat: [M3-6731] – Add VPC and Firewall sections in Linode Create flow by dwiley-akamai · Pull Request #9635 · linode/manager

dwiley-akamai · 2023-09-05T22:08:03Z

Description 📝

Add VPC section in Linode Create flow
Add Firewall section in Linode Create flow

Major Changes 🔄

VPCs added to region capabilities
linodeInterfaceSchema for individual interfaces, linodeInterfacesSchema for the actual interfaces property in Linode Create payload
refetchOnWindowFocus added to useVPCsQuery
New VPCPanel & SelectFirewallPanel components that are present in Linode Create flow
- New linodeCreateWithFirewall feature flag that determines whether SelectFirewallPanel is displayed or not in Linode Create flow
Conditional copy for "Private IP" in "Add-ons" panel in Linode Create flow

Preview 📷

VPC and Firewall panels

"Private IP" conditional copy

"VPC Assigned" in summary paper

How to test 🧪

With a properly-tagged account or with the VPC feature flag on,

Confirm the presence of the VPC & Firewall panels in the Linode Create flow
For the VPC panel:
a) Nothing below the "Create VPC" link shows when the VPC dropdown is set to "None"
b) the VPC dropdown options are only those from the same region as the region selected for the Linode
c) the Subnet dropdown options are only those subnets belonging to the selected VPC
d) the "Auto-assign a VPC IPv4 address for this Linode in the VPC" checkbox is checked by default
e) unchecking the "Auto-assign a VPC IPv4 address for this Linode in the VPC" checkbox reveals a "VPC IPv4" text field which must be filled out (attempting to create the linode without this should yield a field error)
f) expectations for the payload based on the checkboxes: a checked "Auto-assign a VPC IPv4 address for this Linode in the VPC" checkbox should result in ipv4.vpc not being present in the payload, while an unchecked one should result in the contents of the "VPC IPv4" text field populating ipv4.vpc in the payload; a checked "Assign a public IPv4 address for this Linode" should result in ipv4.nat_1_1 being set to any, while an unchecked one should result in ipv4.nat_1_1 not being present in the payload the original tab: the VPC dropdown should have your newly-created VPC included
g) Clicking the "Create VPC" link and completing that flow in the new tab, then returning to the Linode Create flow in
For the Firewall panel:
a) Your firewalls should be listed as options
b) You can add linodeCreateWithFirewall: false somewhere between L30-L33 in withFeatureFlagConsumer.container.ts to confirm the Firewall panel is not visible without the feature flag being on
The Summary paper at the bottom should say "VPC Assigned" if you've assigned a VPC
Creating a non-VPC, non-firewalled linode with and without a VLAN
Creating a linode with both a VPC and a VLAN

With a non-tagged account & the VPC feature flag off, confirm (1) above is not present, and confirm normal Linode creation functionality works as expected.

… tweaking

packages/manager/src/features/Linodes/LinodesCreate/FirewallPanel.tsx

…b and the VPC dropdown list in the Linode Create flow refreshes upon successful VPC creation (given the newly-created VPC is in the same region as the to-be created Linode)

packages/manager/src/queries/linodes/configs.ts

…oad, add account.containter.ts

… --> src/components/SelectFirewallPanel and added helperText prop

… fix refetchOnWindowFocus so that it works (important for having a refreshed list once a user returns from creating a VPC in a new tab)

dwiley-akamai · 2023-09-21T17:45:31Z

packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx

+          options={firewallsDropdownOptions}
+          placeholder={''}
+        />
+        <StyledCreateLink to={`${APP_ROOT}/firewalls/create`}>


APP_ROOT is used to ensure the link opens up in a new tab (can't be done with a relative path without adding the external prop which would be misleading)

dwiley-akamai · 2023-09-21T17:46:28Z

packages/manager/src/containers/account.container.ts

I could've sworn we had this file already, but perhaps it got deleted sometime in the past year. This allows us to pull in account data in class components.

dwiley-akamai · 2023-09-21T17:47:21Z

packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx

+  WithAccountProps &
+  WithDisplayData &
+  WithLinodesProps &
+  WithTypesProps;


just alphabetically sorted and added WithAccountProps

dwiley-akamai · 2023-09-21T17:48:31Z

packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx

      backups_enabled: this.props.backupsEnabled,
      booted: true,
+      firewall_id:
+        this.props.firewallId !== -1 ? this.props.firewallId : undefined,


This check prevents the firewall_id from being shown in the "Create Using Command Line" modal if a firewall isn't selected.

dwiley-akamai · 2023-09-21T17:49:35Z

packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx

+      const vpcInterfaceData: InterfacePayload = {
+        ipam_address: null,
+        ipv4: {
+          nat_1_1: this.props.assignPublicIPv4Address ? 'any' : undefined,


If the "Assign a public IPv4 address for this Linode" checkbox is checked, send any in the payload (otherwise, send nothing).

dwiley-akamai · 2023-09-21T17:50:38Z

packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx

+          nat_1_1: this.props.assignPublicIPv4Address ? 'any' : undefined,
+          vpc: this.props.autoassignIPv4WithinVPC
+            ? undefined
+            : this.props.vpcIPv4AddressOfLinode,


If the "Auto-assign a VPC IPv4 address for this Linode in the VPC" checkbox is checked, send nothing – otherwise, send the contents of the "VPC IPv4" input field.

dwiley-akamai · 2023-09-21T17:54:16Z

packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx

+
+      interfaces.push(vpcInterfaceData);
+    }
+


The VLAN logic below had to be reworked to account for VPC's impact on the interfaces property of the payload.

Essentially:

Define interfaces earlier in the file as any empty array

If there's VPC data, push it to interfaces

If there's VLAN data, push it to interfaces

If there's VLAN data but no VPC data, also add a default public interface in interfaces[0] (maintains parity with previous logic)

dwiley-akamai · 2023-09-21T17:55:02Z

packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx

+  assignPublicIPv4Address: false,
  attachedVLANLabel: '',
  authorized_users: [],
+  autoassignIPv4WithinVPCEnabled: true,


By default, the "Auto-assign a VPC IPv4 address for this Linode in the VPC" checkbox should be checked.

dwiley-akamai · 2023-09-21T17:56:25Z

packages/manager/src/queries/vpcs.ts

+    {
+      enabled,
+      keepPreviousData: true,
+      refetchOnWindowFocus: alwaysRefetch ? 'always' : false,


This allows for users to click the "Create VPC" link, complete that flow in the newly-opened tab, and come back to the Linode Create flow and have a refreshed VPC dropdown that includes the newly-created VPC.

dwiley-akamai · 2023-09-21T17:59:43Z

packages/validation/src/linodes.schema.ts

-      purpose: mixed().oneOf(
-        ['public', 'vlan', 'vpc'],
-        'Purpose must be public, vlan, or vpc.'
+export const linodeInterfaceSchema = object().shape({


Previously the interfaces property would be either a public interface + a VLAN, or omitted from the payload. Now an interface can be a VPC as well, so I've separated out individual interface validation and defined linodeInterfacesSchema as an array of these.

dwiley-akamai · 2023-09-21T18:29:38Z

Going ahead and opening this up for review but I will still be working on adding unit tests between now and tomorrow

dwiley-akamai · 2023-09-22T22:18:22Z

We should send focus back to the fields that error. For example:

unchecking the "Auto-assign a VPC IPv4 address for this Linode in the VPC" checkbox reveals a "VPC IPv4" text field which must be filled out (attempting to create the linode without this should yield a field error)

We need to scroll back up the page to know something failed.

I do have the scrollErrorIntoView(); in there for the VPC validation errors (Validation for VPC fields section in LinodeCreateContainer.tsx), but that function seems to be hit-or-miss -- field errors for the "Root Password" field aren't scrolled to either. Will investigate it a bit more.

coliu-akamai · 2023-09-26T17:16:54Z

tyler-akamai · 2023-09-26T17:26:16Z

tyler-akamai · 2023-09-26T17:32:30Z

Maybe make the spacing consistent between the two boxes when you uncheck "Auto-assign a VPC IPv4 address for this Linode in the VPC"

hana-akamai

Firewall assignment doesn't seem to be working 🤔

Screen.Recording.2023-09-26.at.1.32.51.PM.mov

tyler-akamai · 2023-09-26T17:45:09Z

In the summary paper, should we also include if we assigned any firewalls like how we do it for VPCs and VLANs?

however, I can see the paper easily getting crowded and hard to quickly read.
ex.
Debian 11 | Newark, NJ, USA | VLAN Attached | VPC Assigned | Firewall Assigned

packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx

packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx

packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx

packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx

packages/validation/.changeset/pr-9635-changed-1695321529834.md

dwiley-akamai · 2023-09-26T18:35:04Z

Firewall assignment doesn't seem to be working 🤔

Screen.Recording.2023-09-26.at.1.32.51.PM.mov

It's feature flagged separately (apart from VPC) on the back-end now. It's not working from the command line either so I've reached out to API about the issue

edit: the flag is off on the back-end presently
edit 2: the flag on the back-end should be on now

…y on validation for subnet error, update example IP address

…inodeCreate.tsx to retain test coverage of that aspect

hana-akamai

Additional checks:

Create firewall link brings you to the create firewall drawer
Confirmed that after creating a Linode with an assigned VPC, the VPC details page lists the linode as one of the assigned Linodes
The firewall gets assigned to the Linode
With a non-tagged account & the VPC feature flag off, requests to the vpc endpoint should not be made

It would be nice if the errors scrolled

…rors; ensure VPC details in LinodeEntityDetail show upupon Linode creation for linodes assigned to a VPC

coliu-akamai · 2023-09-28T13:28:33Z

will be going through the functionality again (using my old comment to check things off)
edit: having dev issues so unable to fully test right now, will be back!

hana-akamai

Nice work! 🚀

coliu-akamai

Functionality looks good, awesome work!! 🎉

DevDW added 4 commits August 21, 2023 18:12

Initial groundwork for VPCPanel and FirewallPanel components

f8d5d85

Merge branch 'develop' into M3-6731-vpc-firewall-sections-linode-create

ef62b27

Merge branch 'develop' into M3-6731-vpc-firewall-sections-linode-create

2affd24

Core functionality in place: Firewalls work well, VPC works but needs…

fd3f5e1

… tweaking

dwiley-akamai added Work in Progress @linode/api-v4 Changes are made to the @linode/api-v4 package @linode/validation Changes are made to the @linode/validation package VPC Relating to VPC project labels Sep 5, 2023

dwiley-akamai self-assigned this Sep 5, 2023

dwiley-akamai marked this pull request as draft September 5, 2023 22:08

tyler-akamai reviewed Sep 10, 2023

View reviewed changes

packages/manager/src/features/Linodes/LinodesCreate/FirewallPanel.tsx Show resolved Hide resolved

DevDW added 3 commits September 13, 2023 17:34

Merge in latest develop, resolve conflicts

1d267f1

Progress: validation on VPC fields; 'Create VPC' link opens in new ta…

5b703e9

…b and the VPC dropdown list in the Linode Create flow refreshes upon successful VPC creation (given the newly-created VPC is in the same region as the to-be created Linode)

Merge in latest develop and resolve conflicts

4a9755c

coliu-akamai reviewed Sep 15, 2023

View reviewed changes

packages/manager/src/queries/linodes/configs.ts Outdated Show resolved Hide resolved

DevDW added 8 commits September 15, 2023 18:53

More error handling

7140d99

Add parenthetical IPv4 ranges to subnet options

cc54063

Cleanup, move VPC data into interfaces property of Linode Create payl…

e6ec6ac

…oad, add account.containter.ts

Merge branch 'develop' into M3-6731-vpc-firewall-sections-linode-create

e681167

FirewallPanel feedback: moved from src/features/Linodes/LinodesCreate…

a2d5d61

… --> src/components/SelectFirewallPanel and added helperText prop

Small refactors, UX interaction improvements, copy changes

022f800

Fix firewall_id in payload (important for Create Using Command Line),…

4037307

… fix refetchOnWindowFocus so that it works (important for having a refreshed list once a user returns from creating a VPC in a new tab)

Open 'Create Firewall' link in new tab

af20dd2

dwiley-akamai commented Sep 21, 2023

View reviewed changes

Remove now unneeded changes in src/queries/linodes/configs.ts

ed628f7

dwiley-akamai marked this pull request as ready for review September 21, 2023 18:29

dwiley-akamai requested a review from a team as a code owner September 21, 2023 18:29

dwiley-akamai requested review from jaalah-akamai and removed request for a team September 21, 2023 18:29

linodeCreateWithFirewall feature flag logic

eb43f78

DevDW added 2 commits September 25, 2023 15:35

Unit tests + some minor changes

9c845c8

Merge in latest develop and resolve conflicts

959f206

hana-akamai reviewed Sep 26, 2023

View reviewed changes

coliu-akamai reviewed Sep 26, 2023

View reviewed changes

packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx Outdated Show resolved Hide resolved

packages/validation/.changeset/pr-9635-changed-1695321529834.md Outdated Show resolved Hide resolved

DevDW added 2 commits September 26, 2023 16:51

Feedback: checkbox spacing, 'Firewall Assigned' in summary paper, rel…

3338425

…y on validation for subnet error, update example IP address

Restore conditional render logic in VPCPanel.tsx and remove it from L…

9daf1c7

…inodeCreate.tsx to retain test coverage of that aspect

hana-akamai reviewed Sep 27, 2023

View reviewed changes

Feedback: cut down on unnecessary requests to /vpcs; scroll to VPC er…

e349e3e

…rors; ensure VPC details in LinodeEntityDetail show upupon Linode creation for linodes assigned to a VPC

dwiley-akamai requested review from coliu-akamai and hana-akamai September 27, 2023 21:00

hana-akamai approved these changes Sep 28, 2023

View reviewed changes

hana-akamai added the Add'tl Approval Needed Waiting on another approval! label Sep 28, 2023

coliu-akamai approved these changes Sep 28, 2023

View reviewed changes

coliu-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Sep 28, 2023

tyler-akamai approved these changes Sep 28, 2023

View reviewed changes

dwiley-akamai merged commit d642c62 into linode:develop Sep 28, 2023

dwiley-akamai deleted the M3-6731-vpc-firewall-sections-linode-create branch September 28, 2023 18:20

tyler-akamai mentioned this pull request Sep 29, 2023

feat: [M3-7021] - Added Firewall panel to create NodeBalancer flow #9733

Merged

5 tasks

cpathipa mentioned this pull request Sep 29, 2023

Release v1.104.0 - release → staging #9740

Merged

mjac0bs mentioned this pull request Oct 2, 2023

Release v1.104.0 - staging → master #9744

Merged

Conversation

dwiley-akamai commented Sep 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Major Changes 🔄

Preview 📷

How to test 🧪

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dwiley-akamai commented Sep 21, 2023

Uh oh!

dwiley-akamai commented Sep 22, 2023

Uh oh!

coliu-akamai commented Sep 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tyler-akamai commented Sep 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tyler-akamai commented Sep 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hana-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

tyler-akamai commented Sep 26, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dwiley-akamai commented Sep 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hana-akamai left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coliu-akamai commented Sep 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hana-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

coliu-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

dwiley-akamai commented Sep 5, 2023 •

edited

Loading

coliu-akamai commented Sep 26, 2023 •

edited

Loading

tyler-akamai commented Sep 26, 2023 •

edited

Loading

tyler-akamai commented Sep 26, 2023 •

edited

Loading

dwiley-akamai commented Sep 26, 2023 •

edited

Loading

hana-akamai left a comment •

edited

Loading

coliu-akamai commented Sep 28, 2023 •

edited

Loading