linode · mjac0bs · Aug 22, 2023 · Aug 18, 2023 · Aug 18, 2023 · Aug 18, 2023
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add DC-specific pricing to Kubernetes HA ([#9568](https://github.com/linode/manager/pull/9568))
@@ -105,9 +105,7 @@ describe('LKE Cluster Creation', () => {
       .click()
       .type(`${clusterVersion}{enter}`);
 
-    // TODO: Circle back to add e2e tests for HA Control Plane
-    // once the investigation into LKE HA pricing constant has been completed.
-    // cy.get('[data-testid="ha-radio-button-yes"]').should('be.visible').click();
+    cy.get('[data-testid="ha-radio-button-yes"]').should('be.visible').click();
 
     // Add a node pool for each randomly selected plan, and confirm that the
     // selected node pool plan is added to the checkout bar.

@@ -73,9 +73,7 @@ describe('LKE Create Cluster', () => {
       .click()
       .type('{enter}');
 
-    // TODO: Circle back to add e2e tests for HA Control Plane
-    // once the investigation into LKE HA pricing constant has been completed.
-    // cy.get('[data-testid="ha-radio-button-yes"]').should('be.visible').click();
+    cy.get('[data-testid="ha-radio-button-yes"]').should('be.visible').click();
 
     cy.findByText('Shared CPU').should('be.visible').click();
     addNodes('Linode 2 GB');

@@ -208,12 +208,6 @@ export const PAYMENT_MIN = 5;
 export const PAYMENT_SOFT_MAX = 2_000;
 export const PAYMENT_HARD_MAX = 50_000;
 
-// Price of LKE's High Availability offering in USD
-export const HIGH_AVAILABILITY_PRICE =
-  import.meta.env.REACT_APP_LKE_HIGH_AVAILABILITY_PRICE === undefined
-    ? undefined
-    : Number(import.meta.env.REACT_APP_LKE_HIGH_AVAILABILITY_PRICE);
-
 export const DB_ROOT_USERNAME = 'linroot';
 
 // "In an effort to fight spam, Linode restricts outbound connections on ports 25, 465, and 587 on all Linodes for new accounts created after November 5th, 2019."

@@ -22,7 +22,6 @@ interface ImportMetaEnv {
   REACT_APP_GPAY_MERCHANT_ID?: string;
   REACT_APP_LAUNCH_DARKLY_ID?: string;
   REACT_APP_LISH_ROOT?: string;
-  REACT_APP_LKE_HIGH_AVAILABILITY_PRICE?: number;
   REACT_APP_LOG_PERFORMANCE_METRICS?: string;
   REACT_APP_LOGIN_ROOT?: string;
   REACT_APP_MOCK_SERVICE_WORKER?: string;

@@ -1,3 +1,4 @@
+import { Region } from '@linode/api-v4';
 import {
   CreateKubeClusterPayload,
   CreateNodePoolData,
@@ -22,11 +23,11 @@ import { Paper } from 'src/components/Paper';
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText';
 import { TextField } from 'src/components/TextField';
-import { HIGH_AVAILABILITY_PRICE } from 'src/constants';
 import {
   getKubeHighAvailability,
   getLatestVersion,
 } from 'src/features/Kubernetes/kubeUtils';
+import { useFlags } from 'src/hooks/useFlags';
 import { useAccount } from 'src/queries/account';
 import {
   reportAgreementSigningError,
@@ -42,6 +43,8 @@ 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 { LKE_HA_PRICE } from 'src/utilities/pricing/constants';
+import { getDCSpecificPrice } from 'src/utilities/pricing/dynamicPricing';
 import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView';
 
 import KubeCheckoutBar from '../KubeCheckoutBar';
@@ -131,6 +134,7 @@ export const CreateCluster = () => {
 
   const { data, error: regionsError } = useRegionsQuery();
   const regionsData = data ?? [];
+  const flags = useFlags();
   const history = useHistory();
   const { data: account } = useAccount();
   const { showHighAvailability } = getKubeHighAvailability(account);
@@ -238,6 +242,24 @@ 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) => {
+    if (!regionId) {
+      return undefined;
+    } else {
+      return parseFloat(
+        getDCSpecificPrice({
+          basePrice: LKE_HA_PRICE,
+          flags,
+          regionId,
+        })
+      );
+    }
+  };
+
   const errorMap = getErrorMap(
     ['region', 'node_pools', 'label', 'k8s_version', 'versionLoad'],
     errors
@@ -316,7 +338,11 @@ export const CreateCluster = () => {
             {showHighAvailability ? (
               <Box data-testid="ha-control-plane">
                 <HAControlPlane
-                  HIGH_AVAILABILITY_PRICE={HIGH_AVAILABILITY_PRICE}
+                  highAvailabilityPrice={
+                    flags.dcSpecificPricing
+                      ? getHighAvailabilityPrice(selectedID)
+                      : LKE_HA_PRICE
+                  }
                   setHighAvailability={setHighAvailability}
                 />
               </Box>
@@ -349,6 +375,11 @@ export const CreateCluster = () => {
         data-testid="kube-checkout-bar"
       >
         <KubeCheckoutBar
+          highAvailabilityPrice={
+            flags.dcSpecificPricing
+              ? getHighAvailabilityPrice(selectedID)
+              : LKE_HA_PRICE
+          }
           updateFor={[
             hasAgreed,
             highAvailability,
@@ -361,7 +392,6 @@ export const CreateCluster = () => {
             createCluster,
             classes,
           ]}
-          HIGH_AVAILABILITY_PRICE={HIGH_AVAILABILITY_PRICE}
           createCluster={createCluster}
           hasAgreed={hasAgreed}
           highAvailability={highAvailability}

@@ -1,12 +1,13 @@
 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, Props } from './HAControlPlane';
+import { HAControlPlane, HAControlPlaneProps } from './HAControlPlane';
 
-const props: Props = {
-  HIGH_AVAILABILITY_PRICE: 60,
+const props: HAControlPlaneProps = {
+  highAvailabilityPrice: LKE_HA_PRICE,
   setHighAvailability: jest.fn(),
 };
 
@@ -17,16 +18,18 @@ describe('HAControlPlane', () => {
     expect(getByTestId('ha-control-plane-form')).toBeVisible();
   });
 
-  it('the component should not render when HIGH_AVAILABILITY_PRICE is undefined ', () => {
-    const testProps: Props = {
-      HIGH_AVAILABILITY_PRICE: undefined,
-      setHighAvailability: jest.fn(),
-    };
-    const { queryByTestId } = renderWithTheme(
-      <HAControlPlane {...testProps} />
+  it('should not render an HA price when the price is undefined', () => {
+    const { queryAllByText } = renderWithTheme(
+      <HAControlPlane {...props} highAvailabilityPrice={undefined} />
     );
 
-    expect(queryByTestId('ha-control-plane-form')).not.toBeInTheDocument();
+    expect(queryAllByText(/\$60\.00/)).toHaveLength(0);
+  });
+
+  it('should render an HA price when the price is a number', async () => {
+    const { findByText } = renderWithTheme(<HAControlPlane {...props} />);
+
+    await findByText(/\$60\.00/);
   });
 
   it('should call the handleChange function on change', () => {

@@ -8,34 +8,43 @@ import { Link } from 'src/components/Link';
 import { Radio } from 'src/components/Radio/Radio';
 import { RadioGroup } from 'src/components/RadioGroup';
 import { Typography } from 'src/components/Typography';
+import { useFlags } from 'src/hooks/useFlags';
 
-export const HACopy = () => (
-  <Typography>
-    Recommended for production workloads, a high availability (HA) control plane
-    is replicated on multiple master nodes to 99.99% uptime.
-    <br />
-    <Link to="https://www.linode.com/docs/guides/enable-lke-high-availability/">
-      Learn more about the HA control plane
-    </Link>
-    .
-  </Typography>
-);
+interface HACopyProps {
+  isDCSpecificPricing: boolean;
+}
 
-export interface Props {
-  HIGH_AVAILABILITY_PRICE: number | undefined;
+export interface HAControlPlaneProps {
+  highAvailabilityPrice: number | undefined;
   setHighAvailability: (ha: boolean | undefined) => void;
 }
 
-export const HAControlPlane = (props: Props) => {
-  const { HIGH_AVAILABILITY_PRICE, setHighAvailability } = props;
+export const HACopy = (props: HACopyProps) => {
+  const { isDCSpecificPricing } = props;
+  return (
+    <Typography>
+      Recommended for production workloads, a high availability (HA) control
+      plane is replicated on multiple master nodes to 99.99% uptime.
+      <br />
+      {isDCSpecificPricing
+        ? 'Prices may vary based on Region.'
+        : undefined}{' '}
+      <Link to="https://www.linode.com/docs/guides/enable-lke-high-availability/">
+        Learn more about the HA control plane
+      </Link>
+      .
+    </Typography>
+  );
+};
+
+export const HAControlPlane = (props: HAControlPlaneProps) => {
+  const { highAvailabilityPrice, setHighAvailability } = props;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setHighAvailability(e.target.value === 'yes');
   };
 
-  if (HIGH_AVAILABILITY_PRICE === undefined) {
-    return null;
-  }
+  const flags = useFlags();
 
   return (
     <FormControl data-testid="ha-control-plane-form">
@@ -49,16 +58,18 @@ export const HAControlPlane = (props: Props) => {
       >
         <Typography variant="inherit">HA Control Plane</Typography>
       </FormLabel>
-      <HACopy />
+      <HACopy isDCSpecificPricing={!!flags.dcSpecificPricing} />
       <RadioGroup
         aria-labelledby="ha-radio-buttons-group-label"
         name="ha-radio-buttons-group"
         onChange={(e) => handleChange(e)}
       >
         <FormControlLabel
-          label={`Yes, enable HA control plane. (${displayPrice(
-            HIGH_AVAILABILITY_PRICE
-          )}/month)`}
+          label={`Yes, enable HA control plane. ${
+            highAvailabilityPrice
+              ? `(${displayPrice(highAvailabilityPrice)}/month)`
+              : ''
+          }`}
           control={<Radio data-testid="ha-radio-button-yes" />}
           name="yes"
           value="yes"