refactor: [M3-7380] - Use `volumes/types` endpoint for pricing data #10376

mjac0bs · 2024-04-12T16:56:19Z

Description 📝

API is now returning pricing data through the /volumes/types endpoint.

In this PR, prices can be dynamically displayed for base region pricing and DC-specific region pricing, using the prices returned in the new endpoint, for Volumes.

Changes 🔄

Created the necessary api-v4 endpoint, query, and interface to use the volumes/types endpoint.
Modified getDCSpecificPriceByType to optionally accept a size param, if size is a factor of price and updated util unit test accordingly.
Created the necessary factory and endpoint in the MSW to support a mocked response to the API endpoint.
Added UX for error handling in the unlikely event that pricing cannot be calculated: disable create button and display tooltip error.
Added loading state for display prices.
Updated create-volume-smoke.spec.ts to test create volume error flows.

Note: I did not update the resize or clone Cypress tests to test those error flows. These existing specs run slowly since they have to create a linode and I'm not sure it's worth it for an edge-case like this, so held off doing that and will talk to Joe when he returns.

Preview 📷

The only visual changes should be loading state for pricing and the disabled Create Volume, Resize Volume, and Clone Volume buttons if the price is invalid (e.g. undefined).

Flow	Screenshot
Create Volume Landing Error State
Create Volume from Linode Error State
Resize Volume Error State
Clone Volume Error State

How to test 🧪

Prerequisites

(How to setup test environment)

Check out this PR and yarn up.
All new types endpoints are all in prod, so use the prod environment.
Have an existing linode or create one.

Verification steps

(How to verify changes)

Go to http://localhost:3000/volumes/create.
Fill out the form.
Verify price calculation is correct by testing different options for the Region and comparing with prod.
Confirm:
- There are no regressions in decimal point value or calculations displayed in the UI.
- $0 is a valid region price if returned from the API, the user sees $0 pricing, and a volume can be created. (Update the mock data to test this.)
- A user can still create a Volume.
- If price cannot be calculated (e.g. it is undefined), the Summary displays the unknown price ($--.--) string, the Create button is disabled, and a tooltip displays on hover. (Blocking network requests is one method.)
- When a region is not yet selected, the Create button is still enabled. (Pricing can't be calculated yet; we don't know if the price is invalid.)
- Loading state functions as expected.
Additionally, confirm the above when creating or resizing a volume from a linode:
- via Linode Details > Storage > Create Volume
- via Linode Details > Storage > Clone (the volume you created in the last step)
- via Linode Details > Storage > Resize (the volume you created)

As an Author I have considered 🤔

Check all that apply

packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeCreateForm.tsx

mjac0bs · 2024-04-12T20:49:40Z

packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeCreateForm.tsx

        <Notice
          text={
            "You don't have permissions to create a new Volume. Please contact an account administrator for details."
          }
-          important
+          variant="error"


This cleaned up an unrelated inconsistency in our error notice. important does not work without a variant prop, and we shouldn't useimportant here, anyway, to be consistent with how we displayed these errors elsewhere. I added the error variant that was missing.

I think we want to use the warning variant for permissions banners, cause it's not technically an error

I went back to check what we've done in other "Restricted User Access" PRs and it does look like we're using an error with this. I'm going to keep it an error here for consistency.

Billing access PR: #10201
Nodebalancer PR: #10095

If we want to discuss error vs warning for these restricted access notices, let's bring it up with UX in cafe, @abailly-akamai. (cc @jaalah-akamai)

mjac0bs · 2024-04-12T23:51:44Z

packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx

@@ -32,7 +36,11 @@ export const PricePanel = ({ currentSize, regionId, value }: Props) => {

  return (
    <Box marginTop={4}>
-      <DisplayPrice interval="mo" price={Number(price)} />
+      {isLoading ? (


Added loading state for the display price.

Screen.Recording.2024-04-12.at.1.00.21.PM.mov

mjac0bs · 2024-04-12T23:54:29Z

packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx

@@ -80,7 +85,12 @@ export const SizeField = (props: Props) => {
    </FormHelperText>
  );

-  const dynamicPricingHelperText = !resize && !isFromLinode && (
+  // The price display is only visible next to the size field on the Volumes Create page.


Did a little bit of renaming for clarity here and also added loading state to the price display for volumes create page to improve the slow network or error experience.

Screen.Recording.2024-04-12.at.12.58.39.PM.mov

mjac0bs · 2024-04-12T23:56:26Z

packages/manager/src/utilities/pricing/dynamicPricing.test.ts

@@ -81,6 +75,16 @@ describe('getDCSpecificPricingByType', () => {
    ).toBe('14.00');
  });

+  it('calculates dynamic pricing for a volume based on size', () => {


We can remove getDynamicVolumePrice entirely now that we have price data in the /types endpoint; we just have to allow an optional size to be passed into getDCSpecificPriceByType. Test coverage is updated here accordingly.

github-actions · 2024-04-13T00:32:11Z

Coverage Report: ❌
Base Coverage: 81.79%
Current Coverage: 81.78%

abailly-akamai

Nice and clean!

Code is good and consistent ✅
UI Price display, error and loading handling look great ✅

Left a couple comments for consideration

packages/manager/.changeset/pr-10376-tech-stories-1712948758226.md

packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeCreateForm.tsx

abailly-akamai · 2024-04-15T14:53:20Z

packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeCreateForm.tsx

        <Notice
          text={
            "You don't have permissions to create a new Volume. Please contact an account administrator for details."
          }
-          important
+          variant="error"


I think we want to use the warning variant for permissions banners, cause it's not technically an error

bnussman-akamai

Awesome work! 🎉 Didn't spot any issues 👁️

mjac0bs added 8 commits April 8, 2024 12:31

Save work with intial query, factory, util creation

3c51b32

Clean up unneeded function, move query to volumes.ts

0bb2f46

Clean up old type, improve function comment

c82f066

Update MSW with new volumes/types endpoint

005aa89

Add invalid pricing error state - it has issues

ce8c040

Do not display pricing error while loading

4f681df

Add test coverage for error handling

3a2e177

Clean up

a2989db

mjac0bs self-assigned this Apr 12, 2024

mjac0bs added 6 commits April 12, 2024 10:42

Clean up

a60c97e

Fix button loading states; add price loading state

93dc488

Fix test by mocking request to address loading state

3f74223

Add changesets

c317bfb

Remove .only from test

db231ac

Clean up loading state regressions; add consts to help

2f931ad

mjac0bs commented Apr 12, 2024

View reviewed changes

mjac0bs marked this pull request as ready for review April 12, 2024 23:59

mjac0bs requested review from a team as code owners April 12, 2024 23:59

mjac0bs requested review from cliu-akamai, carrillo-erik and abailly-akamai and removed request for a team April 12, 2024 23:59

mjac0bs added @linode/api-v4 Changes are made to the @linode/api-v4 package DC-Specific Pricing Ready for Review labels Apr 12, 2024

Merge branch 'develop' into M3-7380-use-volume-types-endpoint

b1c147d

abailly-akamai approved these changes Apr 15, 2024

View reviewed changes

bnussman-akamai approved these changes Apr 15, 2024

View reviewed changes

mjac0bs added Approved Multiple approvals and ready to merge! and removed Ready for Review labels Apr 15, 2024

mjac0bs added 2 commits April 15, 2024 10:05

Recategorize changeset

4eb896a

Use restrictedGlobalGrantCheck hook

832dfde

mjac0bs merged commit 391b846 into linode:develop Apr 15, 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

refactor: [M3-7380] - Use `volumes/types` endpoint for pricing data #10376

refactor: [M3-7380] - Use `volumes/types` endpoint for pricing data #10376

mjac0bs commented Apr 12, 2024 •

edited

mjac0bs Apr 12, 2024 •

edited

abailly-akamai Apr 15, 2024

mjac0bs Apr 15, 2024

mjac0bs Apr 12, 2024

mjac0bs Apr 12, 2024

mjac0bs Apr 12, 2024

github-actions bot commented Apr 13, 2024 •

edited

abailly-akamai left a comment

abailly-akamai Apr 15, 2024

bnussman-akamai left a comment

refactor: [M3-7380] - Use volumes/types endpoint for pricing data #10376

refactor: [M3-7380] - Use volumes/types endpoint for pricing data #10376

Conversation

mjac0bs commented Apr 12, 2024 • edited

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author I have considered 🤔

mjac0bs Apr 12, 2024 • edited

Choose a reason for hiding this comment

abailly-akamai Apr 15, 2024

Choose a reason for hiding this comment

mjac0bs Apr 15, 2024

Choose a reason for hiding this comment

mjac0bs Apr 12, 2024

Choose a reason for hiding this comment

mjac0bs Apr 12, 2024

Choose a reason for hiding this comment

mjac0bs Apr 12, 2024

Choose a reason for hiding this comment

github-actions bot commented Apr 13, 2024 • edited

abailly-akamai left a comment

Choose a reason for hiding this comment

abailly-akamai Apr 15, 2024

Choose a reason for hiding this comment

bnussman-akamai left a comment

Choose a reason for hiding this comment

refactor: [M3-7380] - Use `volumes/types` endpoint for pricing data #10376

refactor: [M3-7380] - Use `volumes/types` endpoint for pricing data #10376

mjac0bs commented Apr 12, 2024 •

edited

mjac0bs Apr 12, 2024 •

edited

github-actions bot commented Apr 13, 2024 •

edited