feat: [M3-8834] - Display new Accelerated plans in Plans Panel #11287

coliu-akamai · 2024-11-19T16:36:59Z

Description 📝

Adds Accelerated plans to Plans Panel

Changes 🔄

Introducing a feature flag, acceleratedPlans + hide everything behind feature flag (and account capability)
Update Plans Panel to match figma mocks (see internal ticket) for Accelerated plans
Update mock regions data to include accelerated capability for some regions

Target release date 🗓️

12/10

Preview 📷

How to test 🧪

Either use the MSW, or make sure you have the correct customer tag (reach out for it)

Confirm UI matches figma mockup for Linode plans (see internal ticket)
Confirm Accelerated plans are hidden when feature flag is false (inside useFlags, test when different variations of { linodePlans: boolean; lkePlans: boolean } are returned)
yarn test PlansPanel/utils.test.ts
NOTE: there are still a few open questions (doc links) - created M3-8931 as a sanity check for everything. will update this branch as I get the answers tho)

As an Author, I have considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All unit tests are passing
- databaseResize having some flake
TypeScript compilation succeeded without errors
Code passes all linting rules

coliu-akamai · 2024-11-19T20:36:04Z

packages/manager/src/mocks/serverHandlers.ts

+const premiumTypes = linodeTypeFactory.buildList(7, {
+  class: 'premium',
+});


Added these plans bc without them, we'd have a weird case where when using MSW, clicking on a plan in the Accelerated tab would make the plans panel jump to the Premium tab.

There were no (mock) premium plans, but the Premium tab still shows up (with the disabled 512gb plan). No (mock) premium plans + Premium tab still appearing = tabOrder in determineInitialPlanCategoryTab is one tab short, making the initialTab value in PlansPanel one less than it should be.

Wondering if we should prevent a tab from showing up if the only plan in that tab is the disabled 512gb plan? However, it's probably a non-issue on prod because there are Premium plans

coliu-akamai · 2024-11-19T20:36:46Z

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

 interface PlanSelectionTableProps {
  filterOptions?: PlanSelectionFilterOptionsTable;
-  planFilter?: (plan: PlanWithAvailability) => boolean;


(prop isn't used)

coliu-akamai · 2024-11-19T20:38:00Z

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

-interface PlanSelectionFilterOptionsTable {
-  header?: string;
-  planFilter?: (plan: PlanWithAvailability) => boolean;
-}


same type as PlanSelectionDividerTable from PlanContainer, so I consolidated the two. Decided to keep PlanSelectionFilterOptionsTable as the name bc we use filterOptions a lot, but can change back

coliu-akamai · 2024-11-19T20:39:23Z

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

@@ -69,15 +81,6 @@ export const PlanContainer = (props: PlanContainerProps) => {
    !flags.dbaasV2?.beta &&
    flags.dbaasV2?.enabled &&
    (isDatabaseCreateFlow || isDatabaseResizeFlow);
-  interface PlanSelectionDividerTable {


see comment in PlanSelectionTable

coliu-akamai · 2024-11-19T20:51:32Z

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

@@ -154,7 +154,7 @@ export const PlanSelectionTable = (props: PlanSelectionTableProps) => {
            message={PLAN_SELECTION_NO_REGION_SELECTED_MESSAGE}
          />
        ) : (
-          renderPlanSelection(filterOptions)
+          renderPlanSelection()


removed filterOptions (* unless keeping it here might be helpful down the line?) bc we'd always be passing undefined here:

for GPU plans, we pass in () => renderPlanSelection({...some filter}) as our renderPlanSelection prop, so the filterOptions that we also passed in { header: table.header } don't get used here

for non GPU plans, we don't pass in any filterOptions prop, so that becomes undefined here

github-actions · 2024-11-20T17:01:21Z

Coverage Report: ❌
Base Coverage: 86.96%
Current Coverage: 86.95%

…ta comms

abailly-akamai

Looks good! I'll do a deeper review, but leaving some early comments

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

…ation.tsx Co-authored-by: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>

packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx

…lPanel.tsx Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>

abailly-akamai

Solid! thanks for addressing change sand the attention to details. Confirme new plans display and banner consistentcy

linode-gh-bot · 2024-11-25T18:54:25Z

Cloud Manager UI test results

🎉 455 passing tests on test run #21 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`0 Failing`	`455 Passing`	`2 Skipped`	`113m 31s`

cypress · 2024-11-25T19:49:53Z

Cloud Manager E2E Run #6880

Run Properties: Passed #6880 • 1b0733f185: feat: [M3-8834] - Display new Accelerated plans in Plans Panel (#11287)

Project	`Cloud Manager E2E`
Branch Review	`develop`
Run status	`Passed #6880`
Run duration	`28m 13s`
Commit	`1b0733f185: feat: [M3-8834] - Display new Accelerated plans in Plans Panel (#11287)`
Committer	`Connie Liu`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`1`
Pending	`2`
Skipped	`0`
Passing	`455`
View all changes introduced in this branch ↗︎

coliu-akamai added 4 commits November 18, 2024 15:39

get initial helper text to show up

b945301

bullet pointed notice

05ab484

tooltip showing

4c5b467

update plan title

0c4ab92

coliu-akamai self-assigned this Nov 19, 2024

coliu-akamai added 3 commits November 19, 2024 12:25

some cleanup / remove unused props

44fafce

update way to customize accelerated's plan name

a4f4cf2

added some mock premium plans

62a81ad

coliu-akamai commented Nov 19, 2024

View reviewed changes

coliu-akamai force-pushed the m3-8834 branch from 3e8f7d0 to 62a81ad Compare November 19, 2024 21:33

coliu-akamai added 5 commits November 19, 2024 16:34

Merge branch 'develop' into m3-8834

64d7bc3

transfer link

a621212

hide accelerated plans behind feature flag

7e99488

add test for utils

bce3842

eslint fix

2f26e74

coliu-akamai marked this pull request as ready for review November 20, 2024 16:25

coliu-akamai requested a review from a team as a code owner November 20, 2024 16:25

coliu-akamai requested review from bnussman-akamai, harsh-akamai and abailly-akamai and removed request for a team November 20, 2024 16:25

Added changeset: Accelerated Linode plans in Linode/LKE create flow

5d6b92b

coliu-akamai added the Ready for Review label Nov 20, 2024

use planType instead of plans to determine accelerated table naming

8224b85

coliu-akamai changed the title ~~feat: [M3-8834] - Display new VPU plans in Plans Panel~~ feat: [M3-8834] - Display new Accelerated plans in Plans Panel Nov 20, 2024

remove region availability notice, will be communicated as part of be…

f0c629b

…ta comms

abailly-akamai reviewed Nov 21, 2024

View reviewed changes

coliu-akamai and others added 2 commits November 21, 2024 10:48

Update packages/manager/src/features/components/PlansPanel/PlanInform…

f4322c1

…ation.tsx Co-authored-by: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>

make constant for copy, try to match figma banner mockup more

6080c2b

bnussman-akamai reviewed Nov 21, 2024

View reviewed changes

packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx Outdated Show resolved Hide resolved

coliu-akamai and others added 4 commits November 21, 2024 12:44

Update packages/manager/src/features/Kubernetes/CreateCluster/NodePoo…

85f283f

…lPanel.tsx Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>

make logic more readable

174bc53

Merge branch 'm3-8834' of github.com:coliu-akamai/manager into m3-8834

b06ca28

ux updates: accelerated plan notices

251cd49

coliu-akamai requested review from abailly-akamai and bnussman-akamai November 22, 2024 16:40

bnussman-akamai approved these changes Nov 22, 2024

View reviewed changes

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

abailly-akamai approved these changes Nov 25, 2024

View reviewed changes

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

Merge branch 'develop' into m3-8834

d74d204

coliu-akamai merged commit 1b0733f into linode:develop Nov 25, 2024
23 checks passed

coliu-akamai deleted the m3-8834 branch November 27, 2024 15:54

This was referenced Dec 5, 2024

Release v1.133.0 - release → staging #11377

Merged

Release v1.133.0 - staging → master #11378

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [M3-8834] - Display new Accelerated plans in Plans Panel #11287

feat: [M3-8834] - Display new Accelerated plans in Plans Panel #11287

coliu-akamai commented Nov 19, 2024 •

edited

Loading

coliu-akamai Nov 19, 2024

coliu-akamai Nov 19, 2024

coliu-akamai Nov 19, 2024

coliu-akamai Nov 19, 2024

coliu-akamai Nov 19, 2024

github-actions bot commented Nov 20, 2024 •

edited

Loading

abailly-akamai left a comment

abailly-akamai left a comment

linode-gh-bot commented Nov 25, 2024

cypress bot commented Nov 25, 2024

feat: [M3-8834] - Display new Accelerated plans in Plans Panel #11287

feat: [M3-8834] - Display new Accelerated plans in Plans Panel #11287

Conversation

coliu-akamai commented Nov 19, 2024 • edited Loading

Description 📝

Changes 🔄

Target release date 🗓️

Preview 📷

How to test 🧪

As an Author, I have considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

coliu-akamai Nov 19, 2024

Choose a reason for hiding this comment

coliu-akamai Nov 19, 2024

Choose a reason for hiding this comment

coliu-akamai Nov 19, 2024

Choose a reason for hiding this comment

coliu-akamai Nov 19, 2024

Choose a reason for hiding this comment

coliu-akamai Nov 19, 2024

Choose a reason for hiding this comment

github-actions bot commented Nov 20, 2024 • edited Loading

abailly-akamai left a comment

Choose a reason for hiding this comment

abailly-akamai left a comment

Choose a reason for hiding this comment

linode-gh-bot commented Nov 25, 2024

Cloud Manager UI test results

🎉 455 passing tests on test run #21 ↗︎

cypress bot commented Nov 25, 2024

Cloud Manager E2E Run #6880

coliu-akamai commented Nov 19, 2024 •

edited

Loading

github-actions bot commented Nov 20, 2024 •

edited

Loading