feat: [M3-6757] - Create VPC page #9537

coliu-akamai · 2023-08-11T15:57:24Z

Description 📝

Add VPC create page
** for v2 of validating subnets, go here: Different version of validation utilizing returned API errors coliu-akamai/manager#1

Preview 📷

How to test 🧪

yarn test VPCCreate
yarn test subnets.test.ts

turn on mocks and navigate to /vpc/create to create a vpc OR use your dev account 9must have vpc abilities enabled)

packages/manager/src/features/VPC/VPCCreate/VPCCreate.tsx

coliu-akamai · 2023-08-16T16:25:47Z

packages/manager/src/features/VPC/VPCCreate/VPCCreate.tsx

+  const validateVPCSubnets = () => {
+    const validatedSubnets = validateSubnets(values.subnets, {
+      labelError:
+        'Label is required. Must only be ASCII letters, numbers, and dashes',
+      ipv4Error: 'The IPv4 range must be in CIDR format',
+    });
+
+    if (
+      validatedSubnets.some(
+        (subnet) => subnet.labelError || subnet.ip.ipv4Error
+      )
+    ) {
+      setFieldValue('subnets', validatedSubnets);
+      return false;
+    } else {
+      setFieldValue(
+        'subnets',
+        validatedSubnets.map((subnet) => {
+          delete subnet.labelError;
+          delete subnet.ip.ipv4Error;
+          return { ...subnet };
+        })
+      );
+      return true;
+    }
+  };


This method is pretty similar to the validateIP method in DatabaseCreate -- I'm not the biggest fan of this validation outside of using the createVPCSchema, but was having trouble trying to parse through the errors returned from the schema. Playing around with this on my branch create-vpc-offshoot1, but it's messy rn

update: see coliu-akamai#1!

packages/manager/src/utilities/subnets.ts

coliu-akamai · 2023-08-16T16:30:32Z

packages/validation/src/vpcs.schema.ts

+export const determineIPType = (ip: string) => {
+  try {
+    let addr;
+    const [, mask] = ip.split('/');
+    if (mask) {
+      const parsed = ipaddr.parseCIDR(ip);
+      addr = parsed[0];
+    } else {
+      addr = ipaddr.parse(ip);
+    }
+    return addr.kind();
+  } catch (e) {
+    return undefined;
+  }
+};
+


moved this functionality outside of vpcsValidateIP and into its own function in order to be able to determine ip type for calculating the number of available ipv4s of a subnet mask

coliu-akamai · 2023-08-16T16:38:27Z

packages/manager/src/features/VPC/VPCCreate/SubnetNode.tsx

+  // janky solution to enable SubnetNode to be an independent component or be part of MultipleSubnetInput
+  // (not the biggest fan tbh)
+  onChange: (
+    subnet: SubnetFieldState,
+    subnetIdx?: number,
+    remove?: boolean
+  ) => void;
+  removable?: boolean;


Trying to make SubnetNode its own component in order for it to have future use cases (like the edit/create Subnet drawers), but that led to packing the onChange method with some parameters that wouldn't be necessary (and some props, like removable) if this file was combined with MultiplleSubnetInput.tsx. The MultipleSubnetInput.tsx functionality is otherwise along the same idea as the MultipleIpInput component

coliu-akamai · 2023-08-16T16:39:02Z

packages/manager/src/features/VPC/VPCCreate/MultipleSubnetInput.tsx

+            onChange={(subnet, subnetIdx, removable) =>
+              handleSubnetChange(subnet, subnetIdx ?? 0, !!removable)
+            }


see comment at SubnetNode.tsx

dwiley-akamai

The UI is looking solid so far and I was able to create a VPC successfully 🎉

I still have a lot of code to comb through but I left some initial comments. Will be sure to dedicate some time tomorrow to looking at this more thoroughly.

packages/manager/src/cachedData/regions.json

packages/manager/src/features/VPC/VPCCreate/VPCCreate.tsx

coliu-akamai · 2023-08-17T14:35:46Z

Second version of validation here: coliu-akamai#1

packages/manager/src/features/VPC/VPCCreate/VPCCreate.tsx

hana-akamai

Can we display general API errors and scroll errors into view as well? You can see this error by trying to create a VPC on the prod env

Screen.Recording.2023-08-17.at.4.17.25.PM.mov

packages/manager/src/features/VPC/VPCCreate/VPCCreate.tsx

packages/manager/src/features/VPC/VPCCreate/SubnetNode.tsx

coliu-akamai · 2023-08-21T17:48:53Z

@dwiley-akamai not sure why I'm not seeing the sort-imports and related suggestions, but I ran eslint on all the VPC related files which reorganized them all

packages/manager/src/features/VPC/VPCCreate/VPCCreate.tsx

packages/manager/src/features/VPC/VPCCreate/MultipleSubnetInput.tsx

packages/manager/src/features/VPC/VPCCreate/VPCCreate.tsx

Co-authored-by: Hana Xu <115299789+hana-linode@users.noreply.github.com>

dwiley-akamai

Great work! I'm in favor of rolling with the validation in this PR as opposed to the one on the other branch given the drawbacks of that other approach.

packages/validation/.changeset/pr-9537-changed-1692640036055.md

packages/manager/src/features/VPC/VPCCreate/MultipleSubnetInput.tsx

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

hana-akamai

Real API errors don't seem to be mapping to the inputs 🤔

coliu-akamai · 2023-08-23T15:56:05Z

@hana-linode nice catch, thanks! It's probably gonna be a change to line 114 on VPCCreate

--> fixed! ty :D

hana-akamai

Awesome work! 🚀 🚀

coliu-akamai · 2023-08-23T17:44:32Z

Unsure why the Banks-bot is saying this is not approved, but will be merging now since two approvals

* add landing header for vpc create * initial page layout, still need all the logic + more styling * the form persists :o * tiny bit of styling (honestly should wait til the end to do this) * form logic * mock service worker * some unit tests, calculating subnet * test updates * add multipleSubnetInput wrapper (may potentially undo) * unnecessary divider in v2 of subnet inputs * there's a lot of issues with validation * updated validation * update diabled factors * Added changeset: VPC Create page * fix failing vpc create tests * address feedback * address feedback (+ dev account working now :D) * fix failing tests after scrollErrorIntoView * address feedback, update tests * subnet ip default value * default subnet ip value when adding new subnets too * eslint and move constant to utility file * Update packages/manager/src/features/VPC/VPCCreate/VPCCreate.tsx Co-authored-by: Hana Xu <115299789+hana-linode@users.noreply.github.com> * Update packages/validation/.changeset/pr-9537-changed-1692640036055.md Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> * feedback + starting some tests * finish tests + update availIPv4 state location due to react key entry * make subnet errors show up @hana-linode --------- Co-authored-by: Hana Xu <115299789+hana-linode@users.noreply.github.com> Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

coliu-akamai added 6 commits August 7, 2023 14:07

add landing header for vpc create

3d8c50e

initial page layout, still need all the logic + more styling

ccde6c1

the form persists :o

8fe3003

tiny bit of styling (honestly should wait til the end to do this)

3ba5beb

form logic

195f582

mock service worker

fb867ba

coliu-akamai added the VPC Relating to VPC project label Aug 11, 2023

coliu-akamai self-assigned this Aug 11, 2023

coliu-akamai added 9 commits August 11, 2023 18:32

some unit tests, calculating subnet

382c289

test updates

266943e

add multipleSubnetInput wrapper (may potentially undo)

862ef9e

unnecessary divider in v2 of subnet inputs

5b634d2

there's a lot of issues with validation

4d1ddcd

Merge branch 'develop' into feat-m3-6757

c9b2ea8

updated validation

800370d

update diabled factors

82b52c6

Added changeset: VPC Create page

3019395

coliu-akamai commented Aug 16, 2023

View reviewed changes

coliu-akamai marked this pull request as ready for review August 16, 2023 16:39

bnussman-akamai added the Ready for Review label Aug 16, 2023

fix failing vpc create tests

2ebdafd

coliu-akamai force-pushed the feat-m3-6757 branch from 9da3ba2 to 2ebdafd Compare August 16, 2023 18:59

dwiley-akamai reviewed Aug 16, 2023

View reviewed changes

packages/manager/src/cachedData/regions.json Outdated Show resolved Hide resolved

packages/manager/src/features/VPC/VPCCreate/VPCCreate.tsx Outdated Show resolved Hide resolved

packages/manager/src/features/VPC/VPCCreate/VPCCreate.tsx Outdated Show resolved Hide resolved

address feedback

35e922d

bnussman-akamai reviewed Aug 17, 2023

View reviewed changes

packages/manager/src/features/VPC/VPCCreate/VPCCreate.tsx Show resolved Hide resolved

coliu-akamai added the Work in Progress label Aug 17, 2023

hana-akamai reviewed Aug 17, 2023

View reviewed changes

dwiley-akamai reviewed Aug 17, 2023

View reviewed changes

packages/manager/src/features/VPC/VPCCreate/VPCCreate.tsx Outdated Show resolved Hide resolved

packages/manager/src/features/VPC/VPCCreate/SubnetNode.tsx Outdated Show resolved Hide resolved

address feedback (+ dev account working now :D)

4444772

eslint and move constant to utility file

df3b960

hana-akamai reviewed Aug 22, 2023

View reviewed changes

Update packages/manager/src/features/VPC/VPCCreate/VPCCreate.tsx

7c479f5

Co-authored-by: Hana Xu <115299789+hana-linode@users.noreply.github.com>

dwiley-akamai approved these changes Aug 22, 2023

View reviewed changes

packages/validation/.changeset/pr-9537-changed-1692640036055.md Outdated Show resolved Hide resolved

packages/manager/src/features/VPC/VPCCreate/MultipleSubnetInput.tsx Show resolved Hide resolved

bnussman-akamai added Add'tl Approval Needed Waiting on another approval! and removed Ready for Review labels Aug 22, 2023

coliu-akamai and others added 3 commits August 22, 2023 16:38

Update packages/validation/.changeset/pr-9537-changed-1692640036055.md

dc12bc1

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

feedback + starting some tests

330c062

finish tests + update availIPv4 state location due to react key entry

0c0bbd5

hana-akamai reviewed Aug 23, 2023

View reviewed changes

make subnet errors show up @hana-linode

13c58ce

hana-akamai approved these changes Aug 23, 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 Aug 23, 2023

bnussman-akamai removed the Approved Multiple approvals and ready to merge! label Aug 23, 2023

coliu-akamai added the Approved Multiple approvals and ready to merge! label Aug 23, 2023

bnussman-akamai removed the Approved Multiple approvals and ready to merge! label Aug 23, 2023

coliu-akamai merged commit 0dcc5ee into linode:develop Aug 23, 2023

coliu-akamai added @linode/api-v4 Changes are made to the @linode/api-v4 package @linode/validation Changes are made to the @linode/validation package labels Aug 24, 2023

This was referenced Sep 5, 2023

Release v1.101.0 - release → staging #9627

Merged

Release v1.101.0 - staging → master #9633

Merged

coliu-akamai deleted the feat-m3-6757 branch September 26, 2023 19:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [M3-6757] - Create VPC page #9537

feat: [M3-6757] - Create VPC page #9537

coliu-akamai commented Aug 11, 2023 •

edited

Loading

coliu-akamai Aug 16, 2023 •

edited

Loading

coliu-akamai Aug 16, 2023

coliu-akamai Aug 16, 2023 •

edited

Loading

coliu-akamai Aug 16, 2023

dwiley-akamai left a comment

coliu-akamai commented Aug 17, 2023

hana-akamai left a comment •

edited

Loading

coliu-akamai commented Aug 21, 2023

dwiley-akamai left a comment

hana-akamai left a comment

coliu-akamai commented Aug 23, 2023 •

edited

Loading

hana-akamai left a comment

coliu-akamai commented Aug 23, 2023

feat: [M3-6757] - Create VPC page #9537

feat: [M3-6757] - Create VPC page #9537

Conversation

coliu-akamai commented Aug 11, 2023 • edited Loading

Description 📝

Preview 📷

How to test 🧪

coliu-akamai Aug 16, 2023 • edited Loading

Choose a reason for hiding this comment

coliu-akamai Aug 16, 2023

Choose a reason for hiding this comment

coliu-akamai Aug 16, 2023 • edited Loading

Choose a reason for hiding this comment

coliu-akamai Aug 16, 2023

Choose a reason for hiding this comment

dwiley-akamai left a comment

Choose a reason for hiding this comment

coliu-akamai commented Aug 17, 2023

hana-akamai left a comment • edited Loading

Choose a reason for hiding this comment

coliu-akamai commented Aug 21, 2023

dwiley-akamai left a comment

Choose a reason for hiding this comment

hana-akamai left a comment

Choose a reason for hiding this comment

coliu-akamai commented Aug 23, 2023 • edited Loading

hana-akamai left a comment

Choose a reason for hiding this comment

coliu-akamai commented Aug 23, 2023

coliu-akamai commented Aug 11, 2023 •

edited

Loading

coliu-akamai Aug 16, 2023 •

edited

Loading

coliu-akamai Aug 16, 2023 •

edited

Loading

hana-akamai left a comment •

edited

Loading

coliu-akamai commented Aug 23, 2023 •

edited

Loading