linode · mjac0bs · Oct 20, 2023 · Sep 11, 2023 · Sep 12, 2023 · Sep 12, 2023
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Dynamic price error handling for DC-specific pricing ([#9660](https://github.com/linode/manager/pull/9660))
@@ -29,7 +29,7 @@ import { ui } from 'support/ui';
 import { cleanUp } from 'support/util/cleanup';
 import { makeFeatureFlagData } from 'support/util/feature-flags';
 import { randomLabel } from 'support/util/random';
-import { dcPricingMockLinodeTypes } from 'support/constants/dc-specific-pricing';
+import { dcPricingMockLinodeTypesForBackups } from 'support/constants/dc-specific-pricing';
 import { chooseRegion } from 'support/util/regions';
 
 authenticate();
@@ -374,13 +374,13 @@ describe('"Enable Linode Backups" banner', () => {
         label: randomLabel(),
         region: 'us-east',
         backups: { enabled: false },
-        type: dcPricingMockLinodeTypes[0].id,
+        type: dcPricingMockLinodeTypesForBackups[0].id,
       }),
       linodeFactory.build({
         label: randomLabel(),
         region: 'us-west',
         backups: { enabled: false },
-        type: dcPricingMockLinodeTypes[1].id,
+        type: dcPricingMockLinodeTypesForBackups[1].id,
       }),
       linodeFactory.build({
         label: randomLabel(),
@@ -398,11 +398,11 @@ describe('"Enable Linode Backups" banner', () => {
     ];
 
     // The expected total cost of enabling backups, as shown in backups drawer.
-    const expectedTotal = '$7.74/mo';
+    const expectedTotal = '$9.74/mo';
 
-    mockGetLinodeType(dcPricingMockLinodeTypes[0]);
-    mockGetLinodeType(dcPricingMockLinodeTypes[1]);
-    mockGetLinodeTypes(dcPricingMockLinodeTypes);
+    mockGetLinodeType(dcPricingMockLinodeTypesForBackups[0]);
+    mockGetLinodeType(dcPricingMockLinodeTypesForBackups[1]);
+    mockGetLinodeTypes(dcPricingMockLinodeTypesForBackups);
 
     mockAppendFeatureFlags({
       dcSpecificPricing: makeFeatureFlagData(true),

@@ -44,7 +44,7 @@ const createNodeBalancerWithUI = (nodeBal, isDcPricingTest = false) => {
     // Confirms that the price will show up when the region is selected
     containsClick(selectRegionString).type(`${regionName}{enter}`);
     cy.get('[data-qa-summary="true"]').within(() => {
-      cy.findByText(`$10.00/month`).should('be.visible');
+      cy.findByText(`$10/month`).should('be.visible');
     });
 
     // TODO: DC Pricing - M3-7086: Uncomment docs link assertion when docs links are added.
@@ -55,7 +55,7 @@ const createNodeBalancerWithUI = (nodeBal, isDcPricingTest = false) => {
     // Confirms that the summary updates to reflect price changes if the user changes their region.
     cy.get(`[value="${regionName}"]`).click().type(`${newRegion.label}{enter}`);
     cy.get('[data-qa-summary="true"]').within(() => {
-      cy.findByText(`$14.00/month`).should('be.visible');
+      cy.findByText(`$14/month`).should('be.visible');
     });
 
     // Confirms that a notice is shown in the "Region" section of the NodeBalancer Create form informing the user of DC-specific pricing

@@ -41,7 +41,7 @@ export const dcPricingMockLinodeTypes = linodeTypeFactory.buildList(3, {
     backups: {
       price: {
         hourly: 0.004,
-        monthly: 2.5,
+        monthly: 2.0,
       },
       region_prices: [
         {
@@ -75,6 +75,33 @@ export const dcPricingMockLinodeTypes = linodeTypeFactory.buildList(3, {
   ],
 });
 
+export const dcPricingMockLinodeTypesForBackups = linodeTypeFactory.buildList(
+  3,
+  {
+    addons: {
+      backups: {
+        price: {
+          hourly: 0.004,
+          monthly: 2.0,
+        },
+        region_prices: [
+          {
+            hourly: 0.0048,
+            id: 'us-east',
+            monthly: 3.57,
+          },
+          {
+            hourly: 0.0056,
+            id: 'us-west',
+            monthly: 4.17,
+          },
+        ],
+      },
+    },
+    id: 'g6-nanode-1',
+  }
+);
+
 /**
  * Subset of LKE cluster plans as shown on Cloud Manager, mapped from DC-specific pricing mock linode
  * types to ensure size is consistent with ids in the types factory.

@@ -155,7 +155,9 @@ const LoadBalancers = React.lazy(() => import('src/features/LoadBalancers'));
 const NodeBalancers = React.lazy(
   () => import('src/features/NodeBalancers/NodeBalancers')
 );
-const StackScripts = React.lazy(() => import('src/features/StackScripts/StackScripts'));
+const StackScripts = React.lazy(
+  () => import('src/features/StackScripts/StackScripts')
+);
 const SupportTickets = React.lazy(
   () => import('src/features/Support/SupportTickets')
 );

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { Currency } from './Currency';
@@ -45,6 +46,13 @@ describe('Currency Component', () => {
     getByText('-$5.000');
   });
 
+  it('handles custom default values', () => {
+    const { getByText } = renderWithTheme(
+      <Currency quantity={UNKNOWN_PRICE} />
+    );
+    getByText(`$${UNKNOWN_PRICE}`);
+  });
+
   it('groups by comma', () => {
     const { getByText, rerender } = renderWithTheme(
       <Currency quantity={1000} />

@@ -1,9 +1,10 @@
+import { isNumber } from 'lodash';
 import * as React from 'react';
 
 interface CurrencyFormatterProps {
   dataAttrs?: Record<string, any>;
   decimalPlaces?: number;
-  quantity: number;
+  quantity: '--.--' | number;
   wrapInParentheses?: boolean;
 }
 
@@ -16,8 +17,10 @@ export const Currency = (props: CurrencyFormatterProps) => {
     style: 'currency',
   });
 
-  const formattedQuantity = formatter.format(Math.abs(quantity));
-  const isNegative = quantity < 0;
+  const formattedQuantity = isNumber(quantity)
+    ? formatter.format(Math.abs(quantity))
+    : `$${quantity}`;
+  const isNegative = isNumber(quantity) ? quantity < 0 : false;
 
   let output;
 

@@ -8,7 +8,7 @@ export interface DisplayPriceProps {
   decimalPlaces?: number;
   fontSize?: string;
   interval?: string;
-  price: number;
+  price: '--.--' | number;
 }
 
 export const displayPrice = (price: number) => `$${price.toFixed(2)}`;

@@ -6,6 +6,8 @@ import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
+import { TooltipIcon } from 'src/components/TooltipIcon';
+
 const useStyles = makeStyles()((theme: Theme) => ({
   actionCell: {
     // Prevents Safari from adding margins to the ActionMenu button
@@ -72,6 +74,8 @@ export interface TableCellProps extends _TableCellProps {
   center?: boolean;
   className?: string;
   compact?: boolean;
+  errorCell?: boolean;
+  errorText?: string;
   noWrap?: boolean;
   /*
    * parent column will either be the name of the column this
@@ -90,6 +94,8 @@ export const TableCell = (props: TableCellProps) => {
     center,
     className,
     compact,
+    errorCell,
+    errorText,
     noWrap,
     parentColumn,
     sortable,
@@ -116,6 +122,15 @@ export const TableCell = (props: TableCellProps) => {
     >
       {statusCell ? (
         <div className={classes.status}>{props.children}</div>
+      ) : errorCell && errorText ? (
+        <>
+          {props.children}
+          <TooltipIcon
+            status="error"
+            style={{ paddingBottom: 0, paddingTop: 0 }}
+            text={errorText}
+          />
+        </>
       ) : (
         props.children
       )}

@@ -1,5 +1,6 @@
 import { styled } from '@mui/material';
 import Stack from '@mui/material/Stack';
+import { isNumber } from 'lodash';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
@@ -26,6 +27,7 @@ import { useAllLinodesQuery } from 'src/queries/linodes/linodes';
 import { useAllTypes } from 'src/queries/types';
 import { pluralize } from 'src/utilities/pluralize';
 import { getTotalBackupsPrice } from 'src/utilities/pricing/backups';
+import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants';
 
 import { AutoEnroll } from './AutoEnroll';
 import { BackupLinodeRow } from './BackupLinodeRow';
@@ -147,6 +149,12 @@ all new Linodes will automatically be backed up.`
     onClose();
   };
 
+  const totalBackupsPrice = getTotalBackupsPrice({
+    flags,
+    linodes: linodesWithoutBackups,
+    types: types ?? [],
+  });
+
   return (
     <Drawer
       onClose={onClose}
@@ -191,11 +199,11 @@ all new Linodes will automatically be backed up.`
           )}
           &nbsp;
           <DisplayPrice
-            price={getTotalBackupsPrice({
-              flags,
-              linodes: linodesWithoutBackups,
-              types: types ?? [],
-            })}
+            price={
+              totalBackupsPrice && isNumber(totalBackupsPrice)
+                ? totalBackupsPrice
+                : UNKNOWN_PRICE
+            }
             interval="mo"
           />
         </StyledPricingBox>

@@ -8,6 +8,10 @@ import { useFlags } from 'src/hooks/useFlags';
 import { useRegionsQuery } from 'src/queries/regions';
 import { useTypeQuery } from 'src/queries/types';
 import { getMonthlyBackupsPrice } from 'src/utilities/pricing/backups';
+import {
+  PRICE_ERROR_TOOLTIP_TEXT,
+  UNKNOWN_PRICE,
+} from 'src/utilities/pricing/constants';
 
 interface Props {
   error?: string;
@@ -20,7 +24,9 @@ export const BackupLinodeRow = (props: Props) => {
   const { data: regions } = useRegionsQuery();
   const flags = useFlags();
 
-  const backupsMonthlyPrice: PriceObject['monthly'] = getMonthlyBackupsPrice({
+  const backupsMonthlyPrice:
+    | PriceObject['monthly']
+    | undefined = getMonthlyBackupsPrice({
     flags,
     region: linode.region,
     type,
@@ -51,10 +57,12 @@ export const BackupLinodeRow = (props: Props) => {
       {flags.dcSpecificPricing && (
         <TableCell parentColumn="Region">{regionLabel ?? 'Unknown'}</TableCell>
       )}
-      <TableCell parentColumn="Price">
-        {backupsMonthlyPrice !== 0
-          ? `$${backupsMonthlyPrice?.toFixed(2)}/mo`
-          : '$Unknown/mo'}
+      <TableCell
+        errorCell={!Boolean(backupsMonthlyPrice)}
+        errorText={!backupsMonthlyPrice ? PRICE_ERROR_TOOLTIP_TEXT : undefined}
+        parentColumn="Price"
+      >
+        {`$${backupsMonthlyPrice?.toFixed(2) ?? UNKNOWN_PRICE}/mo`}
       </TableCell>
     </TableRow>
   );

@@ -247,17 +247,10 @@ export const CreateCluster = () => {
    * @returns dynamically calculated high availability price by region
    */
   const getHighAvailabilityPrice = (regionId: Region['id'] | null) => {
-    if (!regionId) {
-      return undefined;
-    } else {
-      return parseFloat(
-        getDCSpecificPrice({
-          basePrice: LKE_HA_PRICE,
-          flags,
-          regionId,
-        })
-      );
-    }
+    const dcSpecificPrice = regionId
+      ? getDCSpecificPrice({ basePrice: LKE_HA_PRICE, flags, regionId })
+      : undefined;
+    return dcSpecificPrice ? parseFloat(dcSpecificPrice) : undefined;
   };
 
   const showPricingNotice =

@@ -10,17 +10,17 @@ import { Divider } from 'src/components/Divider';
 import { Notice } from 'src/components/Notice/Notice';
 import { RenderGuard } from 'src/components/RenderGuard';
 import EUAgreementCheckbox from 'src/features/Account/Agreements/EUAgreementCheckbox';
-import {
-  getKubernetesMonthlyPrice,
-  getTotalClusterPrice,
-} from 'src/utilities/pricing/kubernetes';
 import { useFlags } from 'src/hooks/useFlags';
 import { useAccountAgreements } from 'src/queries/accountAgreements';
 import { useProfile } from 'src/queries/profile';
 import { useSpecificTypes } from 'src/queries/types';
 import { extendTypesQueryResult } from 'src/utilities/extendType';
 import { isEURegion } from 'src/utilities/formatRegion';
 import { LKE_CREATE_CLUSTER_CHECKOUT_MESSAGE } from 'src/utilities/pricing/constants';
+import {
+  getKubernetesMonthlyPrice,
+  getTotalClusterPrice,
+} from 'src/utilities/pricing/kubernetes';
 
 import { nodeWarning } from '../kubeUtils';
 import NodePoolSummary from './NodePoolSummary';

@@ -51,7 +51,7 @@ export interface Props {
   nodeCount: number;
   onRemove: () => void;
   poolType: ExtendedType | null;
-  price?: number; // Can be undefined until a Region is selected.
+  price?: null | number; // Can be undefined until a Region is selected.
   updateNodeCount: (count: number) => void;
 }
 

@@ -69,14 +69,16 @@ export const KubeClusterSpecs = (props: Props) => {
 
   const displayRegion = region?.label ?? cluster.region;
 
-  const highAvailabilityPrice = cluster.control_plane.high_availability
-    ? parseFloat(
-        getDCSpecificPrice({
-          basePrice: LKE_HA_PRICE,
-          flags,
-          regionId: region?.id,
-        })
-      )
+  const dcSpecificPrice = cluster.control_plane.high_availability
+    ? getDCSpecificPrice({
+        basePrice: LKE_HA_PRICE,
+        flags,
+        regionId: region?.id,
+      })
+    : undefined;
+
+  const highAvailabilityPrice = dcSpecificPrice
+    ? parseFloat(dcSpecificPrice)
     : undefined;
 
   const kubeSpecsLeft = [