feat: [M3-7284, M3-7361] - Create VPC drawer in Linode Create flow; Update widths for Create VPC and Create Firewall buttons #9847

coliu-akamai · 2023-10-27T16:35:32Z

Description 📝

Add Create VPC drawer to the Linode Create flow. Now, if a user wants to create a VPC while creating a linode, they can do so while staying on the same page. No more new tabs!
Update 11/6: including M3-7361 in this ticket (as it'd been caught and handled here earlier anyway)

Changes 🔄

List any change relevant to the reviewer.

Add CreateVPCDrawer
Abstracted a lot of common logic between VPCCreate page and VPCCreateDrawer, creating a new custom hook and other components
Added some tests for new components
Created new constants in the VPC's constants file for some text
some VPC Create page cosmetic changes - Right aligned 'Create VPC' button on VPC create page, removed divider between last subnet and 'Add another subnet' button

Preview 📷

Include a screenshot or screen recording of the change
(the grey shadow in the second img is from my computer's menu bar)

Region that doesn't support vpcs selected:

drawer img 1	drawer img 2

How to test 🧪

Prerequisites

Using the dev environment, with vpc admin tags

Verification steps

On the Linode Create page

Verify that if you do not have a region selected, or have a region that does not support VPCs selected, the Create VPC does not appear and there's instead text that says "VPC is not available in the selected region."
If the Create VPC link shows up:
- Verify that the region you've chosen is pre-selected and the region drop down is disabled
- Verify VPC Create functionality (it should work the same as the VPC Create page EXCEPT that you must have at least 1 subnet in this flow)
- Verify that after creating a VPC, the VPC is selected in the VPC panel and that creating a linode with that VPC works as expected

On the VPC Create page

verify the 'Create VPC' button is now right aligned, not left aligned
verify there's no divider between the last subnet and the 'Add another subnet' button (and that there's increased spacing between the last subnet and add subnet button)
verify that besides those changes ^, the VPC Create page looks the same
verify that the VPC Create page still functions the same

On the VPC details page

verify the Create Subnet drawer still looks the same (and still functions the same, although its functionality shouldn't have been affected by these changes)

Tests

yarn test VPC to run all the VPC related tests
yarn cy:run -s 'cypress/e2e/core/vpc/vpc-create.spec.ts to make sure there are no regressions here

As an Author I have considered 🤔

Check all that apply

…56392.md Co-authored-by: Dajahi Wiley <[email protected]>

…3419.md Co-authored-by: Dajahi Wiley <[email protected]>

coliu-akamai

Since we disable the Create VPC link in the vpc panel if the linode's region isn't selected or if the region selected doesn't support VPCs, sometimes the link just looks like text (below). Speaking with Andrew about potential friendlier UX options!

Update: resolved, this is the new UX (we hide the Create VPC link)

coliu-akamai · 2023-10-27T18:48:02Z

packages/manager/src/hooks/useCreateVPC.ts

+  handleSelectVPC?: (vpcId: number) => void;
+  onDrawerClose?: () => void;
+  pushToVPCPage?: boolean;
+  selectedRegion?: string;


created custom hook for shared form logic between VPCCreate and VPCCreateDrawer. There are some slight differences in the functionality of the drawer and page though:

the page will push to the newly created vpc's detail page, but the drawer only makes the newly created vpc the selected vpc for linode-create flow and closes the drawer

the drawer's region is pre-selected, based on the selected linode region

The main changes from the old create vpc logic are at lines 80, 133-139 and 185.

I might be missing something -- isn't L185 here just description: '', ?

Ah I might have made some changes to this file that changed the lines - the main difference is for the region initial value, it's now region: selectedRegion ?? '', instead of region: '',

coliu-akamai · 2023-10-27T18:51:24Z

packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.test.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';


Similar to the new custom hook, consolidated shared components for the form itself into this new folder. (added tests for them as well altho they're pretty repetitive since SubnetNode, MultipleSubnetInput, and VPCCreate already tested how they render).

However, because there are some styling differences between the VPCCreateDrawer and VPCCreate page, I did end up having to pass an isDrawer prop down ;-; (renamed specifically to isVPCCreateDrawer for the SubnetNode component, since the Create Subnet drawer also used a SubnetNode, not just the VPCCreateDrawer)

coliu-akamai · 2023-10-27T18:58:04Z

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

@@ -17,6 +18,7 @@ interface Props {
  // extra props enable SubnetNode to be an independent component or be part of MultipleSubnetInput
  // potential refactor - isRemoveable, and subnetIdx & remove in onChange prop
  idx?: number;
+  isCreateVPCDrawer?: boolean;


See comment on CannotCreateVPCNotice for reasoning behind this prop

coliu-akamai · 2023-10-27T18:59:06Z

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

+  const showRemoveButton = isCreateVPCDrawer
+    ? idx !== 0 && isRemovable
+    : isRemovable;


Added this logic bc for the VPCCreateDrawer, we do not want the remove button to show for the first subnet

coliu-akamai · 2023-10-31T19:48:21Z

@dwiley-akamai spoke with Andrew -- we'll be hiding the text/Create drawer link if no region is selected. The VPC panel will look like this in that case:

1 - Still having trouble trying to get the description field's height match the mockup. Continuing to look into it 😅
2 - 'Create VPC' link should no longer take up the full width of the panel. I saw that the Create Firewall link had similar behavior -- both should now be fixed 🎉

dwiley-akamai

Still need to finish combing through the code, but:

All tests pass ✅
Linode Create page ✅

No region selected --> "Create VPC" does not appear ✅
Region selected where VPC is not enabled --> text displayed that says "VPC is not available in the selected region." ✅
"Create VPC" link shows up with chosen region pre-selected, Region dropdown is disabled ✅
- VPC Create drawer functionality ✅
VPC created via drawer, newly-created VPC is selected in the VPC panel, Linode creation works as expected ✅

VPC Create page ✅

"Create VPC" button is right-aligned ✅
No divider between the last subnet and the "Add Another Subnet" button (and that there's increased spacing between the last subnet and add subnet button) ✅

VPC Details --> Create Subnet drawer ✅

dwiley-akamai

Confirmed the UX issues I mentioned last time have been resolved ✅

packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCSpecificContent.tsx

packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.tsx

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

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

packages/manager/src/hooks/useCreateVPC.ts

dwiley-akamai · 2023-11-01T21:12:08Z

packages/manager/src/hooks/useCreateVPC.ts

+  handleSelectVPC?: (vpcId: number) => void;
+  onDrawerClose?: () => void;
+  pushToVPCPage?: boolean;
+  selectedRegion?: string;


I might be missing something -- isn't L185 here just description: '', ?

Co-authored-by: Dajahi Wiley <[email protected]>

… ending (linode#9876) * use utc for unit test * more strict assertion * support est and edt * fix comment * improve mocks and tests --------- Co-authored-by: Banks Nussman <[email protected]>

hana-akamai

Functionality LGTM. Since the Create VPC flow is now on the same page, I don't think we need the alwaysrefetch logic anymore
https://github.com/linode/manager/blob/develop/packages/manager/src/queries/vpcs.ts#L35

Screen.Recording.2023-11-06.at.5.24.54.PM.mov

coliu-akamai · 2023-11-06T23:30:55Z

@hana-linode removed the refetch logic, thanks for catching!

hana-akamai

On the Linode Create page

✅ Verify that if you do not have a region selected, or have a region that does not support VPCs selected, the Create VPC does not appear and there's instead text that says "VPC is not available in the selected region."
If the Create VPC link shows up:
- ✅ Verify that the region you've chosen is pre-selected and the region drop down is disabled
- ✅ Verify VPC Create functionality (it should work the same as the VPC Create page EXCEPT that you must have at least 1 subnet in this flow)
- ✅ Verify that after creating a VPC, the VPC is selected in the VPC panel and that creating a linode with that VPC works as expected
✅ VPCs are no longer refetched on window refocus

On the VPC Create page

✅ verify the 'Create VPC' button is now right aligned, not left aligned
✅ verify there's no divider between the last subnet and the 'Add another subnet' button (and that there's increased spacing between the last subnet and add subnet button)
✅ verify that besides those changes ^, the VPC Create page looks the same
✅ verify that the VPC Create page still functions the same

On the VPC details page

✅ verify the Create Subnet drawer still looks the same (and still functions the same, although its functionality shouldn't have been affected by these changes)

coliu-akamai and others added 22 commits October 20, 2023 14:23

update api types and fix resulting errors

34ae318

add changesets

3fc4b44

increase timeout of specific test?

2dcc737

Update packages/manager/.changeset/pr-9824-upcoming-features-16978270…

9715fab

…56392.md Co-authored-by: Dajahi Wiley <[email protected]>

Update packages/api-v4/.changeset/pr-9824-upcoming-features-169782700…

3fab4f3

…3419.md Co-authored-by: Dajahi Wiley <[email protected]>

address feedback for factories

2847db8

Merge branch 'develop' into feat-m3-7227

029a75e

fix array size for subnet factories, update naming

355681c

remove extra timeout

f001f6d

fix cypress test: make mock subnet start with 0 linodes

5d4e18c

initial commit

f3d736f

initial commit v2

f22208c

Merge branch 'develop' into feat-m3-7284

54a9e16

undo some changes, looking around

0538254

need to fix styling and abstract everything but functionality exists

5cdd732

fix VPCCreate styling as per ticket

56757e1

update spacing drawer

58c55d7

create custom hook to abstract create VPC logic

f25fd58

update custom useCreateVPC hook logic

b10c682

first of the form abstractions

34eaee8

abstract form components

a209792

styling of drawer

1c3ade3

coliu-akamai added the VPC Relating to VPC project label Oct 27, 2023

coliu-akamai self-assigned this Oct 27, 2023

coliu-akamai added 2 commits October 27, 2023 13:07

changeset + some tests

591fa2a

tests + update naming

8ef3549

coliu-akamai commented Oct 27, 2023

View reviewed changes

coliu-akamai added 3 commits October 27, 2023 15:25

ensure that at least 1 subnet must be created for createVPC drawer

bc1933f

some cleanup

fe02b03

Merge branch 'develop' into feat-m3-7284-hmm

8fb5c74

Merge branch 'develop' into feat-m3-7284-hmm

f3bd00c

small bit of cleanup

0afff80

dwiley-akamai reviewed Oct 31, 2023

View reviewed changes

dwiley-akamai reviewed Nov 1, 2023

View reviewed changes

coliu-akamai and others added 4 commits November 1, 2023 17:25

Update packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx

685ae4f

Co-authored-by: Dajahi Wiley <[email protected]>

feedback p1

c9413d1

renamed file + updated imports

2ad64f3

update test comments

b08a3df

dwiley-akamai approved these changes Nov 2, 2023

View reviewed changes

coliu-akamai added Add'tl Approval Needed Waiting on another approval! and removed Ready for Review labels Nov 2, 2023

coliu-akamai added 4 commits November 6, 2023 13:21

remove bottom margin (see m3-7361)

427b44f

Merge branch 'develop' into feat-m3-7284-hmm

3d7f665

vpc panel unit tests

59cf981

Merge branch 'develop' into feat-m3-7284-hmm

f0d0105

coliu-akamai changed the title ~~feat: [M3-7284] - Create VPC drawer in Linode Create flow~~ feat: [M3-7284, M3-7361] - Create VPC drawer in Linode Create flow; Update widths for Create VPC and Create Firewall buttons Nov 6, 2023

coliu-akamai and others added 2 commits November 6, 2023 14:08

Update pr-9847-upcoming-features-1698425054230.md

c9ed595

fix: ScheduleSettings.test.tsx failing due to daylight savings time…

6aa2096

… ending (linode#9876) * use utc for unit test * more strict assertion * support est and edt * fix comment * improve mocks and tests --------- Co-authored-by: Banks Nussman <[email protected]>

hana-akamai reviewed Nov 6, 2023

View reviewed changes

coliu-akamai added 2 commits November 6, 2023 18:26

remove refetch on windows focus for vpc query

c7d22ee

update comment

f18d07e

hana-akamai approved these changes Nov 7, 2023

View reviewed changes

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

coliu-akamai merged commit 8b7cb3a into linode:develop Nov 7, 2023

abailly-akamai mentioned this pull request Nov 8, 2023

Release v1.107.0 - release → staging #9889

Merged

coliu-akamai deleted the feat-m3-7284-hmm branch November 9, 2023 16:08

abailly-akamai mentioned this pull request Nov 13, 2023

Release v1.107.0 - staging → master #9898

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [M3-7284, M3-7361] - Create VPC drawer in Linode Create flow; Update widths for Create VPC and Create Firewall buttons #9847

feat: [M3-7284, M3-7361] - Create VPC drawer in Linode Create flow; Update widths for Create VPC and Create Firewall buttons #9847

coliu-akamai commented Oct 27, 2023 •

edited

Loading

coliu-akamai left a comment •

edited

Loading

coliu-akamai Oct 27, 2023 •

edited

Loading

dwiley-akamai Nov 1, 2023

coliu-akamai Nov 1, 2023

coliu-akamai Oct 27, 2023

coliu-akamai Oct 27, 2023

coliu-akamai Oct 27, 2023 •

edited

Loading

coliu-akamai commented Oct 31, 2023

dwiley-akamai left a comment

dwiley-akamai left a comment

dwiley-akamai Nov 1, 2023

hana-akamai left a comment

coliu-akamai commented Nov 6, 2023

hana-akamai left a comment

feat: [M3-7284, M3-7361] - Create VPC drawer in Linode Create flow; Update widths for Create VPC and Create Firewall buttons #9847

feat: [M3-7284, M3-7361] - Create VPC drawer in Linode Create flow; Update widths for Create VPC and Create Firewall buttons #9847

Conversation

coliu-akamai commented Oct 27, 2023 • edited Loading

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

Prerequisites

Verification steps

Tests

As an Author I have considered 🤔

coliu-akamai left a comment • edited Loading

Choose a reason for hiding this comment

coliu-akamai Oct 27, 2023 • edited Loading

Choose a reason for hiding this comment

dwiley-akamai Nov 1, 2023

Choose a reason for hiding this comment

coliu-akamai Nov 1, 2023

Choose a reason for hiding this comment

coliu-akamai Oct 27, 2023

Choose a reason for hiding this comment

coliu-akamai Oct 27, 2023

Choose a reason for hiding this comment

coliu-akamai Oct 27, 2023 • edited Loading

Choose a reason for hiding this comment

coliu-akamai commented Oct 31, 2023

dwiley-akamai left a comment

Choose a reason for hiding this comment

dwiley-akamai left a comment

Choose a reason for hiding this comment

dwiley-akamai Nov 1, 2023

Choose a reason for hiding this comment

hana-akamai left a comment

Choose a reason for hiding this comment

coliu-akamai commented Nov 6, 2023

hana-akamai left a comment

Choose a reason for hiding this comment

coliu-akamai commented Oct 27, 2023 •

edited

Loading

coliu-akamai left a comment •

edited

Loading

coliu-akamai Oct 27, 2023 •

edited

Loading

coliu-akamai Oct 27, 2023 •

edited

Loading