feat: [M3-7169, M3-7193, M3-7211, M3-7255, M3-7258] - VPC UX feedback #9832

hana-akamai · 2023-10-23T21:37:00Z

Description 📝

Address UX feedback for VPC

Changes 🔄

Updated VPC empty landing text
New VPC icon
Minor UI changes to Assign Linode to Subnet drawer
Updated tooltip text for the Auto-assign a VPC IPv4 address checkbox
Minor text UI changes to VPC details page

Preview 📷

VPC empty landing before	VPC empty landing after

VPC side/create menu icon before	VPC side/create menu after

Assign Linode to Subnet drawer before	Assign Linode to Subnet drawer after

VPC detail Safari before	VPC detail Safari after

How to test 🧪

Prerequisites

(How to setup test environment)

Point to the dev env and ensure your account has vpc customer tags

Verification steps

Verify the ticket changes requested and check these flows:

VPC empty landing (set line 87 to true in VPCLanding)
VPC side menu and create menu icons
Assign Linode to Subnet drawer
VPC details page (changes are more noticeable in Safari)

As an Author I have considered 🤔

Check all that apply

mjac0bs · 2023-10-24T18:55:37Z

@hana-linode Relevant unit test failure:

mjac0bs

Confirmed:

Icon has been replaced and looks good in light and dark mode + all screen sizes within:

Sidenav
Create Menu
VPC Empty State

Empty state landing:

Header changed from "VPCs" to "Virtual Private Cloud (VPC)"
Removed period at the end of "Create a private and isolated network." to be consistent with other empty state pages.
Added byline "Enable cloud resources to privately and securely communicate with each other, the internet, and other private networks." under the "Create a private and isolated network" text.

VPC Details:

Updated Subnets, Linodes, Region, VPC ID, Created, Updated and Description labels are less bold and consistent with the Linodes details summary.
"Subnets (X)" header font-size is smaller.

Assign Linode to Subnet Drawer:

The "Auto-assign a VPC IPv4 address for this Linode" label is middle aligned in relation to the checkbox.
The "Linodes Assigned to Subnet (0)" text font-weight is less bold and consistent with the h1 header.
[?] The "Download List of Assigned Linodes (.csv)" link is not be displayed until a Linode has been assigned to the subnet.
- I'm not totally sure what's going on with this last one, but I could only use the mocks to confirm it displays only once a linode is assigned because I can't seem to get the linodes assigned to my subnet to load. I noticed the nested table has an infinite loading spinner. (I did see this working yesterday when testing another PR + have both tags on my account, so I'm not sure what has changed.)

The “Auto-assign a VPC IPv4 address for this Linode” checkbox tooltip is to “A VPC IPv4 is the private IP address for this Linode in the VPC.” in:

Create Linode -- This was listed in the internal ticket, but I don't think it applies?
Assign Linode to Subnet
Linode details Edit Config
Linode details Add Config

Unrelated to this PR, here were some other minor UX things I found, for the VPC team to decide if they're worth addressing:

An edge case with VPC description - if a user were to put in one very long word, it overflows the container. This is also noticeable as the screen size gets smaller -- the words don't have to be as long. (This does also happen on a stack script's details page and maybe elsewhere around the app.)
On small screens on the VPC Detail page, the subnet searchbar text gets larger as the screen size decreases (I think this is common throughout the app), but it also cuts off the placeholder text so "or id" is obscured.

mjac0bs · 2023-10-24T20:41:15Z

packages/manager/src/features/VPCs/VPCLanding/VPCLanding.test.tsx

-      getByText('Create a private and isolated network.')
+      getByText('Create a private and isolated network')


This was bugging me the other day -- glad it was already on UX's radar! 😄 🧹

mjac0bs · 2023-10-25T14:35:54Z

Just had a look at the CI run and it looks like vpc-landing-page.spec.ts and vpc-details-page.spec.ts need the copy updates too - those are relevant failures.

hana-akamai · 2023-10-25T21:51:16Z

@mjac0bs merged develop in and the nested table should be loading again. I tried looking into the overflow issue but was not able to find an easy solution, so I created M3-7331 to track that

mjac0bs

Tests are passing and nested table looks good again!

coliu-akamai

🎉 Awesome, looks great!! Confirmed the following:

✅ M3-7169 (empty landing state)

verified VPC landing text
verified icon change

✅ M3-7193 (subnet assign linodes drawer)

verified assign linode to subnet drawer changes - csv + alignment
- (I think the font weight issue is something that only appears on safari and is being handled in another pr by @abailly-akamai? Will double check)

✅ M3-7211 (vpc details)

confirmed font size changes!

✅ M3-7255 (vpc icon)

confirmed icon changes!

✅ M3-7258

confirmed copy changes for tooltip in create linode, assign linode to subnet, add/edit config flows

✅ confirmed tests still pass!

packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx

coliu-akamai · 2023-10-26T19:12:21Z

Confirmed @abailly-akamai's pr #9843 fixes the font weight on safari for the Subnet Assign Linodes drawer!

dwiley-akamai

LGTM, left a few minor comments!

VPC empty landing ✅
VPC side menu and create menu icons ✅
Assign Linode to Subnet drawer ✅
VPC details page ✅

dwiley-akamai · 2023-10-26T21:07:35Z

packages/manager/src/features/OneClickApps/oneClickApps.ts

How'd this get pulled in 🧐

Prob the auto linter 🤔

packages/manager/src/features/VPCs/utils.ts

packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx

hana-akamai added 5 commits October 23, 2023 12:30

M3-7169 empty state feedback

e4261ea

M3-7193 subnet drawer revisions

d2d7045

M3-7211 vpc details text

9a68e42

M3-7258 auto assign ipv4 tooltip text

32a9529

M3-7255 new VPC icon

165d1ac

hana-akamai added the VPC Relating to VPC project label Oct 23, 2023

hana-akamai self-assigned this Oct 23, 2023

Added changeset: VPC UX feedback

b0867a3

hana-akamai marked this pull request as ready for review October 24, 2023 15:42

hana-akamai requested a review from a team as a code owner October 24, 2023 15:42

hana-akamai requested review from mjac0bs and cliu-akamai and removed request for a team October 24, 2023 15:42

update unit test

b838782

mjac0bs reviewed Oct 24, 2023

View reviewed changes

hana-akamai added 3 commits October 25, 2023 11:45

fix table loading/error styling

9f4f9e0

Merge branch 'develop' into vpc-ux-feedback

45dffc7

fix e2e tests

d301236

mjac0bs approved these changes Oct 25, 2023

View reviewed changes

mjac0bs added the Add'tl Approval Needed Waiting on another approval! label Oct 26, 2023

Merge branch 'develop' into vpc-ux-feedback

d00e2da

hana-akamai requested review from dwiley-akamai and coliu-akamai October 26, 2023 15:29

coliu-akamai approved these changes Oct 26, 2023

View reviewed changes

packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx Show resolved Hide resolved

address feedback

9dc5cfa

hana-akamai removed the Add'tl Approval Needed Waiting on another approval! label Oct 26, 2023

hana-akamai added the Approved Multiple approvals and ready to merge! label Oct 26, 2023

dwiley-akamai approved these changes Oct 26, 2023

View reviewed changes

cliu-akamai approved these changes Oct 26, 2023

View reviewed changes

address feedback

bd68d67

hana-akamai merged commit 9d323ef into linode:develop Oct 27, 2023
12 of 13 checks passed

hana-akamai deleted the vpc-ux-feedback branch October 27, 2023 18:38

This was referenced Nov 8, 2023

Release v1.107.0 - release → staging #9889

Merged

Release v1.107.0 - staging → master #9898

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [M3-7169, M3-7193, M3-7211, M3-7255, M3-7258] - VPC UX feedback #9832

feat: [M3-7169, M3-7193, M3-7211, M3-7255, M3-7258] - VPC UX feedback #9832

hana-akamai commented Oct 23, 2023 •

edited

Loading

mjac0bs commented Oct 24, 2023

mjac0bs left a comment

mjac0bs Oct 24, 2023

mjac0bs commented Oct 25, 2023

hana-akamai commented Oct 25, 2023

mjac0bs left a comment

coliu-akamai left a comment

coliu-akamai commented Oct 26, 2023

dwiley-akamai left a comment

dwiley-akamai Oct 26, 2023

hana-akamai Oct 27, 2023

		getByText('Create a private and isolated network.')
		getByText('Create a private and isolated network')

feat: [M3-7169, M3-7193, M3-7211, M3-7255, M3-7258] - VPC UX feedback #9832

feat: [M3-7169, M3-7193, M3-7211, M3-7255, M3-7258] - VPC UX feedback #9832

Conversation

hana-akamai commented Oct 23, 2023 • edited Loading

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author I have considered 🤔

mjac0bs commented Oct 24, 2023

mjac0bs left a comment

Choose a reason for hiding this comment

mjac0bs Oct 24, 2023

Choose a reason for hiding this comment

mjac0bs commented Oct 25, 2023

hana-akamai commented Oct 25, 2023

mjac0bs left a comment

Choose a reason for hiding this comment

coliu-akamai left a comment

Choose a reason for hiding this comment

coliu-akamai commented Oct 26, 2023

dwiley-akamai left a comment

Choose a reason for hiding this comment

dwiley-akamai Oct 26, 2023

Choose a reason for hiding this comment

hana-akamai Oct 27, 2023

Choose a reason for hiding this comment

hana-akamai commented Oct 23, 2023 •

edited

Loading