change: [M3-7996] - DC Get Well - PlanSelection availability updates and consolidation #10387

abailly-akamai · 2024-04-18T16:08:10Z

Description 📝

This PR brings the latest changes to the PlanSelection panels on both the Linode and Kubernetes creation flows.
The diff is a bit larger than expected considering the need to refactor this portion of the code to allow for easier customization in the future. Both flows share very similar logic for rendering plan selection data, and identical logic for filtering unavailable and limited availability plans.

The logic implemented in this PR for the displaying of notices, disabled status and related tooltips is derived from the new requirements shown in the screenshots below:

1	2	3	4	5

Changes 🔄

List any change relevant to the reviewer.

Adjust RegionSelect tooltip copy
Limited Availability banners are now non-dismissible
Adjust table row disabled styles
- make sure tooltip itself does not appear as disabled (lower opacity)
- makes sure "greyed out" row treatment matches our disabled styles
Update & Consolidate limited availability/unavailable logic for all plans panels (see the "How to test" section for breakdown)
Add new e2e for PlanSelection covering both the Linode and Kubernetes creation flows

Target release date 🗓️

04/29/2024

Preview 📷

How to test 🧪

Prerequisites

Verification steps

RegionSelect tooltip update
Best way i found to get a disabled RegionSelect item is on a newly created account (PROD)

Verify tooltip copy
Verify tooltip behavior

Plan Selection (both for Linode and Kubernetes flows)
rules:

always show an "unavailable" banner (red) if the whole plan panel is disabled. ex:
- Newark, NJ => Premium CPU
- Dallas, TX => GPU
always show a "limited availability" (yellow) notice if a plan panel has limited availability
- Newark, NJ => Dedicated CPU (always have the 512Gb limited avail)
- Newark, NJ => GPU
always show a tooltip if <= half of plans have limited availability
- Newark, NJ => Dedicated CPU
never show a tooltip if more than half of plans have limited availability
- Newark, NJ => GPU

As an Author I have considered 🤔

Check all that apply

abailly-akamai · 2024-04-23T15:54:08Z

packages/manager/cypress/e2e/core/linodes/create-linode.spec.ts

+   *
+   * TODO: Cypress
+   * Move this to cypress component testing once the setup is complete - see https://github.com/linode/manager/pull/10134
+   *


@jdamore-linode added a TODO for both since they are candidates, even if unrelated to this PR

abailly-akamai · 2024-04-23T15:55:08Z

packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts

+      });
+    });
+  });
+});


Tried to be as detailed as possible including comments so the the logic is very clear for people coming in to modify anything

abailly-akamai · 2024-04-23T15:55:33Z

packages/manager/src/components/RegionSelect/RegionSelect.utils.tsx

-            ),
+            reason:
+              'This region is currently unavailable. For help, open a support ticket.',
+            tooltipWidth: 250,


To allow for copy not to wrap

abailly-akamai · 2024-04-23T15:56:15Z

packages/manager/src/components/TableRow/TableRow.styles.ts

-        theme.palette.mode === 'dark'
-          ? theme.color.grey6
-          : theme.color.disabledText,
+        theme.palette.mode === 'dark' ? theme.color.grey6 : theme.color.grey1,


Those changes allow the tootip not to be "buried" in the disable state and show as active while the row isn't

github-actions · 2024-04-23T16:16:24Z

Coverage Report: ❌
Base Coverage: 81.86%
Current Coverage: 81.82%

hkhalil-akamai

Verified changes against prod
Extracting shared logic is a big improvement
One code suggestion

Thanks for including E2Es. Approved pending review of one suggestion.

hkhalil-akamai · 2024-04-24T16:06:44Z

packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlansPanel.tsx

+    const {
+      allDisabledPlans,
+      hasDisabledPlans,
+      hasMajorityOfPlansDisabled,
+      plansForThisLinodeTypeClass,
+    } = extractPlansInformation({
+      disableLargestGbPlans: flags.disableLargestGbPlans,
+      disabledPlanTypes: [],
+      plans: plansMap,
+      regionAvailabilities,
+      selectedRegionId,
+    });


Can we move this down into KubernetesPlanContainer to save one level of prop drilling?

@hkhalil-akamai yes, this was considered but both <PlanInformation /> & <PlanContainer /> consume data from this util so it has to sit here to avoid redundancy

hkhalil-akamai · 2024-04-24T16:07:32Z

packages/manager/src/features/components/PlansPanel/PlansPanel.tsx

+    const {
+      allDisabledPlans,
+      hasDisabledPlans,
+      hasMajorityOfPlansDisabled,
+      plansForThisLinodeTypeClass,
+    } = extractPlansInformation({
+      disableLargestGbPlans: flags.disableLargestGbPlans,
+      disabledPlanTypes,
+      plans: plansMap,
+      regionAvailabilities,
+      selectedRegionId: selectedRegionID,
+    });


Same comment as above: can we move this down into PlanContainer to save one level of prop drilling?

same comment

dwiley-akamai

RegionSelect tooltip update ✅

For Linode, LKE, and Database plan panels:

always show an "unavailable" banner (red) if the whole plan panel is disabled ✅
always show a "limited availability" (yellow) notice if a plan panel has limited availability ✅
always show a tooltip if <= half of plans have limited availability ✅
never show a tooltip if more than half of plans have limited availability ✅

To confirm, we're totally moving away from Learn more about plans and availability. even when only one plan is disabled?

This branch	Prod

dwiley-akamai · 2024-04-24T15:44:28Z

packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts

+    // Dedicated CPU tab
+    // Should be selected/open by default
+    // Should have the limited availability notice
+    // Should contains 4 plans (5 rows including the header row)


Suggested change

// Should contains 4 plans (5 rows including the header row)

// Should contain 4 plans (5 rows including the header row)

(typo correction applies to the equivalent comment for each case)

dwiley-akamai · 2024-04-24T15:48:11Z

packages/manager/src/components/RegionSelect/RegionSelect.utils.tsx

-              </>
-            ),
+            reason:
+              'This region is currently unavailable. For help, open a support ticket.',


Are we moving away from the general convention of having open a support ticket linkified?

That's correct, no more links in tooltips from what I understand

bnussman-akamai

Functionality looks good as far as I was able to test!

bnussman-akamai · 2024-04-24T20:26:41Z

packages/manager/src/features/components/PlansPanel/PlanInformation.tsx

+        <Link to={docsLink}>Learn more</Link> about our {planTypeLabel} plans.
+      </StyledNoticeTypography>
+    </Notice>
+  ) : null;


Should this component return null? Could we move the null return to LimitedAvailabilityNotice?

It is actually belongs here, can we do

if (!hasDisabledPlans) { return null; }

for readability

abailly-akamai self-assigned this Apr 18, 2024

abailly-akamai added the DC Get Well Relating to the DC Get Well project label Apr 18, 2024

abailly-akamai force-pushed the M3-7996 branch from 688b36d to 27393be Compare April 22, 2024 13:14

abailly-akamai changed the title ~~change: [M3-7996] - DC Get Well phase 2 updates~~ change: [M3-7996] - DC Get Well - PlanSelection updates and consolidatio Apr 23, 2024

abailly-akamai changed the title ~~change: [M3-7996] - DC Get Well - PlanSelection updates and consolidatio~~ change: [M3-7996] - DC Get Well - PlanSelection updates and consolidation Apr 23, 2024

abailly-akamai changed the title ~~change: [M3-7996] - DC Get Well - PlanSelection updates and consolidation~~ change: [M3-7996] - DC Get Well - PlanSelection availability updates and consolidation Apr 23, 2024

abailly-akamai marked this pull request as ready for review April 23, 2024 15:47

abailly-akamai requested review from a team as code owners April 23, 2024 15:47

abailly-akamai requested review from jdamore-linode, dwiley-akamai and carrillo-erik and removed request for a team April 23, 2024 15:48

abailly-akamai force-pushed the M3-7996 branch from 31e44ee to 8d721f6 Compare April 23, 2024 15:53

abailly-akamai commented Apr 23, 2024

View reviewed changes

abailly-akamai added the Target: 4/29 label Apr 24, 2024

bnussman-akamai self-requested a review April 24, 2024 14:52

hkhalil-akamai approved these changes Apr 24, 2024

View reviewed changes

dwiley-akamai reviewed Apr 24, 2024

View reviewed changes

abailly-akamai added 9 commits April 24, 2024 14:48

Update RegionSelect unavailable region tooltip copy

d610b03

initial commit: styles and cleanup

8f65700

Save work

ec4e2b8

Save work

ede4bdd

save work still need to work on tests

07ba411

fix initial tests

bb2aa8a

add extractPlansInformation unit

71fd40d

add unit for plansPanel

5015b8f

e2e part 1

78c3b3e

abailly-akamai added 6 commits April 24, 2024 15:08

e2e part 2 - wrap up

53421dc

cleanup

0c0cfe1

Added changeset: PlanSelection availability updates and consolidation

6efafc0

cleanup naming conventions

bb61f02

better tooltip width

125abdb

feedback @dwiley-akamai

5414c53

abailly-akamai force-pushed the M3-7996 branch from 5b6b5be to 5414c53 Compare April 24, 2024 19:11

abailly-akamai requested a review from dwiley-akamai April 24, 2024 19:12

bnussman-akamai approved these changes Apr 24, 2024

View reviewed changes

bnussman-akamai added the Approved Multiple approvals and ready to merge! label Apr 24, 2024

dwiley-akamai approved these changes Apr 24, 2024

View reviewed changes

small bug with tooltip logic

6c71291

abailly-akamai merged commit 16d2b7c into linode:develop Apr 25, 2024
18 checks passed

This was referenced Apr 25, 2024

Release v.118.0 - release → staging #10409

Closed

Release v1.118.0 - release → staging #10410

Merged

Release v1.118.0 - staging → master #10416

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

change: [M3-7996] - DC Get Well - PlanSelection availability updates and consolidation #10387

change: [M3-7996] - DC Get Well - PlanSelection availability updates and consolidation #10387

abailly-akamai commented Apr 18, 2024 •

edited by dwiley-akamai

Loading

abailly-akamai Apr 23, 2024

abailly-akamai Apr 23, 2024

abailly-akamai Apr 23, 2024

abailly-akamai Apr 23, 2024

github-actions bot commented Apr 23, 2024 •

edited

Loading

hkhalil-akamai left a comment

hkhalil-akamai Apr 24, 2024

abailly-akamai Apr 24, 2024 •

edited

Loading

hkhalil-akamai Apr 24, 2024

abailly-akamai Apr 24, 2024

dwiley-akamai left a comment

dwiley-akamai Apr 24, 2024

dwiley-akamai Apr 24, 2024

abailly-akamai Apr 24, 2024

bnussman-akamai left a comment

bnussman-akamai Apr 24, 2024

	// Should contains 4 plans (5 rows including the header row)
	// Should contain 4 plans (5 rows including the header row)

change: [M3-7996] - DC Get Well - PlanSelection availability updates and consolidation #10387

change: [M3-7996] - DC Get Well - PlanSelection availability updates and consolidation #10387

Conversation

abailly-akamai commented Apr 18, 2024 • edited by dwiley-akamai Loading

Description 📝

Changes 🔄

Target release date 🗓️

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author I have considered 🤔

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Apr 23, 2024 • edited Loading

hkhalil-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abailly-akamai Apr 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dwiley-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bnussman-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abailly-akamai commented Apr 18, 2024 •

edited by dwiley-akamai

Loading

github-actions bot commented Apr 23, 2024 •

edited

Loading

abailly-akamai Apr 24, 2024 •

edited

Loading