change: [M3-7383] - Replace hardcoded prices for LKE HA with data from lke/types API endpoint

packages/api-v4/.changeset/pr-10505-added-1716400052332.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Added
+---
+
+New endpoint for LKE HA types used in pricing ([#10505](https://github.com/linode/manager/pull/10505))

packages/api-v4/src/kubernetes/kubernetes.ts

@@ -7,8 +7,8 @@ import Request, {
   setURL,
   setXFilter,
 } from '../request';
-import { Filter, Params, ResourcePage as Page } from '../types';
-import {
+import type { Filter, Params, ResourcePage as Page, PriceType } from '../types';
+import type {
   CreateKubeClusterPayload,
   KubeConfigResponse,
   KubernetesCluster,
@@ -180,3 +180,15 @@ export const recycleClusterNodes = (clusterID: number) =>
     setMethod('POST'),
     setURL(`${API_ROOT}/lke/clusters/${encodeURIComponent(clusterID)}/recycle`)
   );
+
+/**
+ * getKubernetesTypes
+ *
+ * Returns a paginated list of available Kubernetes types; used for dynamic pricing.
+ */
+export const getKubernetesTypes = (params?: Params) =>
+  Request<Page<PriceType>>(
+    setURL(`${API_ROOT}/lke/types`),
+    setMethod('GET'),
+    setParams(params)
+  );

packages/manager/.changeset/pr-10505-changed-1716400104404.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Replaced hardcoded values used in LKE HA pricing with data from API ([#10505](https://github.com/linode/manager/pull/10505))

packages/manager/src/MainContent.tsx

@@ -127,7 +127,11 @@ const Domains = React.lazy(() =>
   }))
 );
 const Images = React.lazy(() => import('src/features/Images'));
-const Kubernetes = React.lazy(() => import('src/features/Kubernetes'));
+const Kubernetes = React.lazy(() =>
+  import('src/features/Kubernetes').then((module) => ({
+    default: module.Kubernetes,
+  }))
+);
 const ObjectStorage = React.lazy(() => import('src/features/ObjectStorage'));
 const Profile = React.lazy(() => import('src/features/Profile/Profile'));
 const LoadBalancers = React.lazy(() =>

packages/manager/src/components/DisplayPrice/DisplayPrice.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { Currency } from 'src/components/Currency';
 import { Typography } from 'src/components/Typography';
+import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants';
 
 export interface DisplayPriceProps {
   decimalPlaces?: number;
@@ -11,7 +12,12 @@ export interface DisplayPriceProps {
   price: '--.--' | number;
 }
 
-export const displayPrice = (price: number) => `$${price.toFixed(2)}`;
+export const displayPrice = (price: number | undefined) => {
+  if (price !== undefined) {
+    return `$${price.toFixed(2)}`;
+  }
+  return `$${UNKNOWN_PRICE}`;
+};
 
 export const DisplayPrice = (props: DisplayPriceProps) => {
   const theme = useTheme<Theme>();

packages/manager/src/factories/types.ts

@@ -172,3 +172,40 @@ export const volumeTypeFactory = Factory.Sync.makeFactory<PriceType>({
   ],
   transfer: 0,
 });
+
+export const lkeStandardAvailabilityTypeFactory = Factory.Sync.makeFactory<PriceType>(
+  {
+    id: 'lke-sa',
+    label: 'LKE Standard Availability',
+    price: {
+      hourly: 0.0,
+      monthly: 0.0,
+    },
+    region_prices: [],
+    transfer: 0,
+  }
+);
+
+export const lkeHighAvailabilityTypeFactory = Factory.Sync.makeFactory<PriceType>(
+  {
+    id: 'lke-ha',
+    label: 'LKE High Availability',
+    price: {
+      hourly: 0.09,
+      monthly: 60.0,
+    },
+    region_prices: [
+      {
+        hourly: 0.108,
+        id: 'id-cgk',
+        monthly: 72.0,
+      },
+      {
+        hourly: 0.126,
+        id: 'br-gru',
+        monthly: 84.0,
+      },
+    ],
+    transfer: 0,
+  }
+);

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

@@ -1,4 +1,3 @@
-import { Region } from '@linode/api-v4';
 import {
   CreateKubeClusterPayload,
   CreateNodePoolData,
@@ -34,6 +33,7 @@ import {
 } from 'src/queries/account/agreements';
 import {
   useCreateKubernetesClusterMutation,
+  useKubernetesTypesQuery,
   useKubernetesVersionQuery,
 } from 'src/queries/kubernetes';
 import { useRegionsQuery } from 'src/queries/regions/regions';
@@ -42,11 +42,9 @@ import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';
 import { extendType } from 'src/utilities/extendType';
 import { filterCurrentTypes } from 'src/utilities/filterCurrentLinodeTypes';
 import { plansNoticesUtils } from 'src/utilities/planNotices';
-import {
-  DOCS_LINK_LABEL_DC_PRICING,
-  LKE_HA_PRICE,
-} from 'src/utilities/pricing/constants';
-import { getDCSpecificPrice } from 'src/utilities/pricing/dynamicPricing';
+import { DOCS_LINK_LABEL_DC_PRICING } from 'src/utilities/pricing/constants';
+import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants';
+import { getDCSpecificPriceByType } from 'src/utilities/pricing/dynamicPricing';
 import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
 
 import KubeCheckoutBar from '../KubeCheckoutBar';
@@ -76,6 +74,12 @@ export const CreateCluster = () => {
   const { data: account } = useAccount();
   const { showHighAvailability } = getKubeHighAvailability(account);
 
+  const {
+    data: types,
+    isError: isErrorKubernetesTypes,
+    // isLoading: isLoadingKubernetesTypes,
+  } = useKubernetesTypesQuery();
+
   const {
     data: allTypes,
     error: typesError,
@@ -164,24 +168,23 @@ export const CreateCluster = () => {
     setLabel(newLabel ? newLabel : undefined);
   };
 
-  /**
-   * @param regionId - region selection or null if no selection made
-   * @returns dynamically calculated high availability price by region
-   */
-  const getHighAvailabilityPrice = (regionId: Region['id'] | null) => {
-    const dcSpecificPrice = regionId
-      ? getDCSpecificPrice({ basePrice: LKE_HA_PRICE, regionId })
-      : undefined;
-    return dcSpecificPrice ? parseFloat(dcSpecificPrice) : undefined;
-  };
+  const selectedId = selectedRegionID || null;
+
+  const getHighAvailabilityPrice = getDCSpecificPriceByType({
+    regionId: selectedId ? selectedId : undefined,
+    type: types?.[1],
+  });
+
+  const dcSpecificPrice =
+    getHighAvailabilityPrice && !isErrorKubernetesTypes
+      ? getHighAvailabilityPrice
+      : UNKNOWN_PRICE;
 
   const errorMap = getErrorMap(
     ['region', 'node_pools', 'label', 'k8s_version', 'versionLoad'],
     errors
   );
 
-  const selectedId = selectedRegionID || null;
-
   const {
     hasSelectedRegion,
     isPlanPanelDisabled,
@@ -256,7 +259,9 @@ export const CreateCluster = () => {
           {showHighAvailability ? (
             <Box data-testid="ha-control-plane">
               <HAControlPlane
-                highAvailabilityPrice={getHighAvailabilityPrice(selectedId)}
+                hasHAPriceError={isErrorKubernetesTypes}
+                highAvailabilityPrice={dcSpecificPrice}
+                selectedRegionId={selectedRegionID}
                 setHighAvailability={setHighAvailability}
               />
             </Box>
@@ -303,7 +308,7 @@ export const CreateCluster = () => {
           createCluster={createCluster}
           hasAgreed={hasAgreed}
           highAvailability={highAvailability}
-          highAvailabilityPrice={getHighAvailabilityPrice(selectedId)}
+          highAvailabilityPrice={dcSpecificPrice}
           pools={nodePools}
           region={selectedRegionID}
           regionsData={regionsData}

packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx

@@ -1,13 +1,14 @@
 import { fireEvent } from '@testing-library/react';
 import * as React from 'react';
 
-import { LKE_HA_PRICE } from 'src/utilities/pricing/constants';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { HAControlPlane, HAControlPlaneProps } from './HAControlPlane';
 
 const props: HAControlPlaneProps = {
-  highAvailabilityPrice: LKE_HA_PRICE,
+  hasHAPriceError: false,
+  highAvailabilityPrice: '60',
+  selectedRegionId: 'us-southeast',
   setHighAvailability: vi.fn(),
 };
 
@@ -19,11 +20,16 @@ describe('HAControlPlane', () => {
   });
 
   it('should not render an HA price when the price is undefined', () => {
+    const highAvailabilityPriceError = '--.--';
+
     const { queryAllByText } = renderWithTheme(
-      <HAControlPlane {...props} highAvailabilityPrice={undefined} />
+      <HAControlPlane
+        {...props}
+        highAvailabilityPrice={highAvailabilityPriceError}
+      />
     );
 
-    expect(queryAllByText(/\$60\.00/)).toHaveLength(0);
+    expect(queryAllByText(/\$--\.--/)).toHaveLength(1);
   });
 
   it('should render an HA price when the price is a number', async () => {

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

@@ -1,16 +1,18 @@
 import { FormLabel } from '@mui/material';
 import * as React from 'react';
 
-import { displayPrice } from 'src/components/DisplayPrice';
 import { FormControl } from 'src/components/FormControl';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
+import { Notice } from 'src/components/Notice/Notice';
 import { Radio } from 'src/components/Radio/Radio';
 import { RadioGroup } from 'src/components/RadioGroup';
 import { Typography } from 'src/components/Typography';
 
 export interface HAControlPlaneProps {
-  highAvailabilityPrice: number | undefined;
+  hasHAPriceError: boolean;
+  highAvailabilityPrice?: string;
+  selectedRegionId: null | string;
   setHighAvailability: (ha: boolean | undefined) => void;
 }
 
@@ -27,7 +29,12 @@ export const HACopy = () => (
 );
 
 export const HAControlPlane = (props: HAControlPlaneProps) => {
-  const { highAvailabilityPrice, setHighAvailability } = props;
+  const {
+    hasHAPriceError,
+    highAvailabilityPrice,
+    selectedRegionId,
+    setHighAvailability,
+  } = props;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setHighAvailability(e.target.value === 'yes');
@@ -46,16 +53,29 @@ export const HAControlPlane = (props: HAControlPlaneProps) => {
         <Typography variant="inherit">HA Control Plane</Typography>
       </FormLabel>
       <HACopy />
+      {hasHAPriceError && (
+        <Notice
+          dataTestId="ha-price-error-notice"
+          spacingBottom={0}
+          spacingTop={8}
+          variant="error"
+        >
+          <Typography sx={(theme) => ({ fontFamily: theme.font.bold })}>
+            Could not load price for high availability (HA) control plane at
+            this time.
+          </Typography>
+        </Notice>
+      )}
       <RadioGroup
         aria-labelledby="ha-radio-buttons-group-label"
         name="ha-radio-buttons-group"
         onChange={(e) => handleChange(e)}
       >
         <FormControlLabel
           label={`Yes, enable HA control plane. ${
-            highAvailabilityPrice
-              ? `(${displayPrice(highAvailabilityPrice)}/month)`
-              : '(Select a region to view price information.)'
+            !selectedRegionId
+              ? '(Select a region to view price information.)'
+              : `($${highAvailabilityPrice}/month)`
           }`}
           control={<Radio data-testid="ha-radio-button-yes" />}
           name="yes"

packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx

@@ -3,10 +3,7 @@ import * as React from 'react';
 
 import { regionFactory } from 'src/factories';
 import { nodePoolFactory } from 'src/factories/kubernetesCluster';
-import {
-  LKE_CREATE_CLUSTER_CHECKOUT_MESSAGE,
-  LKE_HA_PRICE,
-} from 'src/utilities/pricing/constants';
+import { LKE_CREATE_CLUSTER_CHECKOUT_MESSAGE } from 'src/utilities/pricing/constants';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import KubeCheckoutBar, { Props } from './KubeCheckoutBar';
@@ -17,7 +14,7 @@ const props: Props = {
   createCluster: vi.fn(),
   hasAgreed: false,
   highAvailability: false,
-  highAvailabilityPrice: LKE_HA_PRICE,
+  highAvailabilityPrice: '60',
   pools,
   region: 'us-east',
   regionsData: regionFactory.buildList(1),

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

@@ -5,7 +5,6 @@ import * as React from 'react';
 import { Box } from 'src/components/Box';
 import { CheckoutBar } from 'src/components/CheckoutBar/CheckoutBar';
 import { CircleProgress } from 'src/components/CircleProgress';
-import { displayPrice } from 'src/components/DisplayPrice';
 import { Divider } from 'src/components/Divider';
 import { Notice } from 'src/components/Notice/Notice';
 import { RenderGuard } from 'src/components/RenderGuard';
@@ -22,13 +21,13 @@ import {
 } from 'src/utilities/pricing/kubernetes';
 
 import { nodeWarning } from '../kubeUtils';
-import NodePoolSummary from './NodePoolSummary';
+import { NodePoolSummary } from './NodePoolSummary';
 
 export interface Props {
   createCluster: () => void;
   hasAgreed: boolean;
   highAvailability?: boolean;
-  highAvailabilityPrice: number | undefined;
+  highAvailabilityPrice?: string;
   pools: KubeNodePoolResponse[];
   region: string;
   regionsData: Region[];
@@ -39,7 +38,7 @@ export interface Props {
   updatePool: (poolIdx: number, updatedPool: KubeNodePoolResponse) => void;
 }
 
-export const KubeCheckoutBar: React.FC<Props> = (props) => {
+export const KubeCheckoutBar = (props: Props) => {
   const {
     createCluster,
     hasAgreed,
@@ -99,7 +98,7 @@ export const KubeCheckoutBar: React.FC<Props> = (props) => {
         region !== ''
           ? getTotalClusterPrice({
               highAvailabilityPrice: highAvailability
-                ? highAvailabilityPrice
+                ? Number(highAvailabilityPrice)
                 : undefined,
               pools,
               region,
@@ -153,9 +152,7 @@ export const KubeCheckoutBar: React.FC<Props> = (props) => {
             <StyledHAHeader>
               High Availability (HA) Control Plane
             </StyledHAHeader>
-            <Typography>
-              {displayPrice(Number(highAvailabilityPrice))}/month
-            </Typography>
+            <Typography>{`$${highAvailabilityPrice}/month`}</Typography>
             <Divider dark spacingBottom={0} spacingTop={16} />
           </StyledHABox>
         ) : undefined}

packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.test.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { extendedTypes } from 'src/__data__/ExtendedType';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import NodePoolSummary, { Props } from './NodePoolSummary';
+import { NodePoolSummary, Props } from './NodePoolSummary';
 
 const props: Props = {
   nodeCount: 3,