From 3bf5f124a3a707ee6bc1af0d91b33502ec40d234 Mon Sep 17 00:00:00 2001
From: ecarrill <ecarrill@akamai.com>
Date: Thu, 3 Aug 2023 10:46:48 -0700
Subject: [PATCH 01/11] feature: [M3-6787] - Change HA implementation

---
 .../CreateCluster/CreateCluster.tsx           | 88 +++++++++++--------
 .../CreateCluster/HAControlPlane.test.tsx     | 53 +++++++++++
 .../CreateCluster/HAControlPlane.tsx          | 75 ++++++++++++++++
 .../KubeCheckoutBar/KubeCheckoutBar.test.tsx  |  2 +-
 .../KubeCheckoutBar/KubeCheckoutBar.tsx       | 28 ++----
 .../UpgradeClusterDialog.tsx                  |  2 +-
 .../src/features/Kubernetes/kubeUtils.ts      | 13 +++
 7 files changed, 203 insertions(+), 58 deletions(-)
 create mode 100644 packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
 create mode 100644 packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx

diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
index ae80420e379..10675843889 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
@@ -18,10 +18,15 @@ import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelec
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import LandingHeader from 'src/components/LandingHeader';
 import { Notice } from 'src/components/Notice/Notice';
+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 { Paper } from 'src/components/Paper';
+import {
+  getKubeHighAvailability,
+  getLatestVersion,
+} from 'src/features/Kubernetes/kubeUtils';
+import { useAccount } from 'src/queries/account';
 import {
   reportAgreementSigningError,
   useMutateAccountAgreements,
@@ -39,6 +44,7 @@ import { plansNoticesUtils } from 'src/utilities/planNotices';
 import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView';
 
 import KubeCheckoutBar from '../KubeCheckoutBar';
+import { HAControlPlane } from './HAControlPlane';
 import { NodePoolPanel } from './NodePoolPanel';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -112,22 +118,41 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 export const CreateCluster = () => {
   const classes = useStyles();
+  const [selectedRegionID, setSelectedRegionID] = React.useState<string>('');
+  const [nodePools, setNodePools] = React.useState<KubeNodePoolResponse[]>([]);
+  const [label, setLabel] = React.useState<string | undefined>();
+  const [version, setVersion] = React.useState<Item<string> | undefined>();
+  const [errors, setErrors] = React.useState<APIError[] | undefined>();
+  const [submitting, setSubmitting] = React.useState<boolean>(false);
+  const [hasAgreed, setAgreed] = React.useState<boolean>(false);
+  const { mutateAsync: updateAccountAgreements } = useMutateAccountAgreements();
+  const [highAvailability, setHighAvailability] = React.useState<boolean>(
+    false
+  );
+  const [
+    hasHAControlPlaneSelection,
+    setHAControlPlaneSelection,
+  ] = React.useState<boolean>(false);
+
+  const { data, error: regionsError } = useRegionsQuery();
+  const regionsData = data ?? [];
+  const history = useHistory();
+  const { data: account } = useAccount();
+  const { showHighAvailability } = getKubeHighAvailability(account);
+
   const {
     data: allTypes,
     error: typesError,
     isLoading: typesLoading,
   } = useAllTypes();
 
+  // Only want to use current types here.
+  const typesData = filterCurrentTypes(allTypes?.map(extendType));
+
   const {
     mutateAsync: createKubernetesCluster,
   } = useCreateKubernetesClusterMutation();
 
-  const { data, error: regionsError } = useRegionsQuery();
-  const regionsData = data ?? [];
-
-  // Only want to use current types here.
-  const typesData = filterCurrentTypes(allTypes?.map(extendType));
-
   // Only include regions that have LKE capability
   const filteredRegions = React.useMemo(() => {
     return regionsData
@@ -137,26 +162,15 @@ export const CreateCluster = () => {
       : [];
   }, [regionsData]);
 
-  const [selectedRegionID, setSelectedRegionID] = React.useState<string>('');
-  const [nodePools, setNodePools] = React.useState<KubeNodePoolResponse[]>([]);
-  const [label, setLabel] = React.useState<string | undefined>();
-  const [highAvailability, setHighAvailability] = React.useState<boolean>(
-    false
-  );
-  const [version, setVersion] = React.useState<Item<string> | undefined>();
-  const [errors, setErrors] = React.useState<APIError[] | undefined>();
-  const [submitting, setSubmitting] = React.useState<boolean>(false);
-  const [hasAgreed, setAgreed] = React.useState<boolean>(false);
-  const { mutateAsync: updateAccountAgreements } = useMutateAccountAgreements();
   const {
     data: versionData,
     isError: versionLoadError,
   } = useKubernetesVersionQuery();
+
   const versions = (versionData ?? []).map((thisVersion) => ({
     label: thisVersion.id,
     value: thisVersion.id,
   }));
-  const history = useHistory();
 
   React.useEffect(() => {
     if (filteredRegions.length === 1 && !selectedRegionID) {
@@ -164,17 +178,19 @@ export const CreateCluster = () => {
     }
   }, [filteredRegions, selectedRegionID]);
 
+  React.useEffect(() => {
+    if (versions.length > 0) {
+      setVersion(getLatestVersion(versions));
+    }
+  }, [versionData]);
+
   const createCluster = () => {
     const { push } = history;
-
     setErrors(undefined);
     setSubmitting(true);
-
     const k8s_version = version ? version.value : undefined;
 
-    /**
-     * Only type and count to the API.
-     */
+    // Only type and count to the API.
     const node_pools = nodePools.map(
       pick(['type', 'count'])
     ) as CreateNodePoolData[];
@@ -223,10 +239,7 @@ export const CreateCluster = () => {
   };
 
   const updateLabel = (newLabel: string) => {
-    /**
-     * If the new label is an empty string, use undefined.
-     * This allows it to pass Yup validation.
-     */
+    // If the new label is an empty string, use undefined. This allows it to pass Yup validation.
     setLabel(newLabel ? newLabel : undefined);
   };
 
@@ -247,11 +260,7 @@ export const CreateCluster = () => {
   });
 
   if (typesError || regionsError || versionLoadError) {
-    /**
-     * This information is necessary to create a Cluster.
-     * Otherwise, show an error state.
-     */
-
+    // This information is necessary to create a Cluster. Otherwise, show an error state.
     return <ErrorState errorText="An unexpected error occurred." />;
   }
 
@@ -297,16 +306,25 @@ export const CreateCluster = () => {
             </Box>
             <Box>
               <Select
+                onChange={(selected: Item<string>) => {
+                  setVersion(selected);
+                }}
                 className={classes.inputWidth}
                 errorText={errorMap.k8s_version}
                 isClearable={false}
                 label="Kubernetes Version"
-                onChange={(selected: Item<string>) => setVersion(selected)}
                 options={versions}
                 placeholder={' '}
                 value={version || null}
               />
             </Box>
+            {showHighAvailability ? (
+              <HAControlPlane
+                highAvailability={highAvailability}
+                setHAControlPlaneSelection={setHAControlPlaneSelection}
+                setHighAvailability={setHighAvailability}
+              />
+            ) : null}
           </div>
           <Box>
             <NodePoolPanel
@@ -349,11 +367,11 @@ export const CreateCluster = () => {
           ]}
           createCluster={createCluster}
           hasAgreed={hasAgreed}
+          hasHAControlPlaneSelection={hasHAControlPlaneSelection}
           highAvailability={highAvailability}
           pools={nodePools}
           region={selectedRegionID}
           removePool={removePool}
-          setHighAvailability={setHighAvailability}
           submitting={submitting}
           toggleHasAgreed={toggleHasAgreed}
           updatePool={updatePool}
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
new file mode 100644
index 00000000000..bd5c461e49c
--- /dev/null
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
@@ -0,0 +1,53 @@
+// import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+
+import { HIGH_AVAILABILITY_PRICE } from 'src/constants';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { HAControlPlane, Props } from './HAControlPlane';
+
+const props: Props = {
+  highAvailability: false,
+  setHAControlPlaneSelection: jest.fn(),
+  setHighAvailability: jest.fn(),
+};
+
+const shouldRender = HIGH_AVAILABILITY_PRICE !== undefined;
+
+describe('HAControlPlane', () => {
+  it('the component should render', () => {
+    const { container, getByTestId } = renderWithTheme(
+      <HAControlPlane {...props} />
+    );
+
+    if (shouldRender) {
+      expect(getByTestId('ha-control-plane')).toBeVisible();
+    } else {
+      expect(container).toBeEmptyDOMElement();
+    }
+  });
+
+  // it('should call the handleChange function on change', () => {
+  //   const { getByTestId } = renderWithTheme(
+  //     <HAControlPlane {...props} />
+  //   );
+
+  //   const haRadioButton = getByTestId('ha-radio-button-yes');
+
+  //   if (!haRadioButton && shouldRender) {
+  //     fail('Radio Buttons not found');
+  //   }
+
+  //   if (haRadioButton && !shouldRender) {
+  //     fail(
+  //       'High Availability control plane was rendered, but no price was provided.'
+  //     );
+  //   }
+
+  //   if (haRadioButton) {
+  //     fireEvent.change(haRadioButton);
+
+  //     expect(props.setHighAvailability).toHaveBeenCalled();
+  //   }
+  // });
+});
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
new file mode 100644
index 00000000000..f3093299232
--- /dev/null
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
@@ -0,0 +1,75 @@
+/* eslint-disable no-console */
+import { FormLabel } from '@mui/material';
+import * as React from 'react';
+
+import { Box } from 'src/components/Box';
+import { displayPrice } from 'src/components/DisplayPrice';
+import { FormControlLabel } from 'src/components/FormControlLabel';
+import { Link } from 'src/components/Link';
+import { Radio } from 'src/components/Radio/Radio';
+import { Typography } from 'src/components/Typography';
+import FormControl from 'src/components/core/FormControl';
+import RadioGroup from 'src/components/core/RadioGroup';
+import { HIGH_AVAILABILITY_PRICE } from 'src/constants';
+
+export const HACopy = () => (
+  <Typography>
+    Recommended for prodcution 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>
+);
+
+export interface Props {
+  highAvailability: boolean;
+  setHAControlPlaneSelection: (haControlPlane: boolean) => void;
+  setHighAvailability: (ha: boolean) => void;
+}
+
+export const HAControlPlane = (props: Props) => {
+  const {
+    highAvailability,
+    setHAControlPlaneSelection,
+    setHighAvailability,
+  } = props;
+
+  if (HIGH_AVAILABILITY_PRICE === undefined) {
+    return null;
+  }
+
+  // const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = () => {
+    setHighAvailability(!highAvailability);
+    setHAControlPlaneSelection(true);
+  };
+
+  return (
+    <Box>
+      <FormControl data-testid="ha-control-plane">
+        <FormLabel id="ha-radio-buttons-group-label">
+          <Typography variant="inherit">HA Control Plane</Typography>
+        </FormLabel>
+        <HACopy />
+        <RadioGroup
+          aria-labelledby="ha-radio-buttons-group-label"
+          name="ha-radio-buttons-group"
+          // onChange={(e) => handleChange(e)}
+          onChange={handleChange}
+        >
+          <FormControlLabel
+            label={`Yes, enable HA control plane. (${displayPrice(
+              HIGH_AVAILABILITY_PRICE
+            )}/month)`}
+            control={<Radio data-testid="ha-radio-button-yes" />}
+            value="yes"
+          />
+          <FormControlLabel control={<Radio />} label="No" value="no" />
+        </RadioGroup>
+      </FormControl>
+    </Box>
+  );
+};
diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx
index bfe0d9ca3a7..20fdac1e2a1 100644
--- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx
+++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx
@@ -11,11 +11,11 @@ const pools = nodePoolFactory.buildList(5, { count: 3, type: 'g6-standard-1' });
 const props: Props = {
   createCluster: jest.fn(),
   hasAgreed: false,
+  hasHAControlPlaneSelection: true,
   highAvailability: false,
   pools,
   region: undefined,
   removePool: jest.fn(),
-  setHighAvailability: jest.fn(),
   submitting: false,
   toggleHasAgreed: jest.fn(),
   updatePool: jest.fn(),
diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
index f3f28c299c2..5211b37d24a 100644
--- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
+++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
@@ -7,11 +7,7 @@ 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 {
-  getKubeHighAvailability,
-  getMonthlyPrice,
-} from 'src/features/Kubernetes/kubeUtils';
-import { useAccount } from 'src/queries/account';
+import { getMonthlyPrice } from 'src/features/Kubernetes/kubeUtils';
 import { useAccountAgreements } from 'src/queries/accountAgreements';
 import { useProfile } from 'src/queries/profile';
 import { useSpecificTypes } from 'src/queries/types';
@@ -19,17 +15,16 @@ import { extendTypesQueryResult } from 'src/utilities/extendType';
 import { isEURegion } from 'src/utilities/formatRegion';
 
 import { getTotalClusterPrice, nodeWarning } from '../kubeUtils';
-import HACheckbox from './HACheckbox';
 import NodePoolSummary from './NodePoolSummary';
 
 export interface Props {
   createCluster: () => void;
   hasAgreed: boolean;
+  hasHAControlPlaneSelection: boolean;
   highAvailability: boolean;
   pools: KubeNodePoolResponse[];
   region: string | undefined;
   removePool: (poolIdx: number) => void;
-  setHighAvailability: (ha: boolean) => void;
   submitting: boolean;
   toggleHasAgreed: () => void;
   updatePool: (poolIdx: number, updatedPool: KubeNodePoolResponse) => void;
@@ -39,11 +34,11 @@ export const KubeCheckoutBar: React.FC<Props> = (props) => {
   const {
     createCluster,
     hasAgreed,
+    hasHAControlPlaneSelection,
     highAvailability,
     pools,
     region,
     removePool,
-    setHighAvailability,
     submitting,
     toggleHasAgreed,
     updatePool,
@@ -53,7 +48,6 @@ export const KubeCheckoutBar: React.FC<Props> = (props) => {
   const showWarning = pools.some((thisPool) => thisPool.count < 3);
 
   const { data: profile } = useProfile();
-  const { data: account } = useAccount();
   const { data: agreements } = useAccountAgreements();
   const typesQuery = useSpecificTypes(pools.map((pool) => pool.type));
   const types = extendTypesQueryResult(typesQuery);
@@ -66,9 +60,10 @@ export const KubeCheckoutBar: React.FC<Props> = (props) => {
 
   const needsAPool = pools.length < 1;
   const disableCheckout = Boolean(
-    needsAPool || (!hasAgreed && showGDPRCheckbox)
+    needsAPool ||
+      (!hasAgreed && showGDPRCheckbox) ||
+      !hasHAControlPlaneSelection
   );
-  const { showHighAvailability } = getKubeHighAvailability(account);
 
   if (isLoading) {
     return <CircleProgress />;
@@ -108,16 +103,7 @@ export const KubeCheckoutBar: React.FC<Props> = (props) => {
             price={getMonthlyPrice(thisPool.type, thisPool.count, types ?? [])}
           />
         ))}
-        {showHighAvailability ? (
-          <>
-            <Divider dark spacingBottom={12} spacingTop={16} />
-            <HACheckbox
-              checked={highAvailability}
-              onChange={(e) => setHighAvailability(e.target.checked)}
-            />
-            <Divider dark spacingBottom={0} spacingTop={16} />
-          </>
-        ) : null}
+        <Divider dark spacingBottom={0} spacingTop={16} />
         {showWarning && (
           <Notice important spacingTop={16} text={nodeWarning} warning />
         )}
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx
index e847bcfd95f..e056e6b3beb 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx
@@ -15,7 +15,7 @@ import {
 } from 'src/features/Kubernetes/kubeUtils';
 import { useKubernetesClusterMutation } from 'src/queries/kubernetes';
 
-import { HACopy } from '../KubeCheckoutBar/HACheckbox';
+import { HACopy } from '../CreateCluster/HAControlPlane';
 
 const useStyles = makeStyles((theme: Theme) => ({
   noticeHeader: {
diff --git a/packages/manager/src/features/Kubernetes/kubeUtils.ts b/packages/manager/src/features/Kubernetes/kubeUtils.ts
index 218b94676d8..6b0c7cd441b 100644
--- a/packages/manager/src/features/Kubernetes/kubeUtils.ts
+++ b/packages/manager/src/features/Kubernetes/kubeUtils.ts
@@ -136,3 +136,16 @@ export const getKubeHighAvailability = (
     showHighAvailability,
   };
 };
+
+export const getLatestVersion = (
+  versions: { label: string; value: string }[]
+) => {
+  const newArr: number[] = [];
+
+  for (const element of versions) {
+    newArr.push(parseFloat(element.value));
+  }
+  const latestVersionValue = Math.max.apply(null, newArr);
+
+  return { label: `${latestVersionValue}`, value: `${latestVersionValue}` };
+};

From 816c084c701a48a64e5ba0913fac03f854a02121 Mon Sep 17 00:00:00 2001
From: ecarrill <ecarrill@akamai.com>
Date: Thu, 3 Aug 2023 10:52:27 -0700
Subject: [PATCH 02/11] Remove comments

---
 .../features/Kubernetes/CreateCluster/HAControlPlane.tsx   | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
index f3093299232..2128d9211d6 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
@@ -1,15 +1,14 @@
-/* eslint-disable no-console */
 import { FormLabel } from '@mui/material';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
 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 { Radio } from 'src/components/Radio/Radio';
+import { RadioGroup } from 'src/components/RadioGroup';
 import { Typography } from 'src/components/Typography';
-import FormControl from 'src/components/core/FormControl';
-import RadioGroup from 'src/components/core/RadioGroup';
 import { HIGH_AVAILABILITY_PRICE } from 'src/constants';
 
 export const HACopy = () => (
@@ -41,7 +40,6 @@ export const HAControlPlane = (props: Props) => {
     return null;
   }
 
-  // const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
   const handleChange = () => {
     setHighAvailability(!highAvailability);
     setHAControlPlaneSelection(true);
@@ -57,7 +55,6 @@ export const HAControlPlane = (props: Props) => {
         <RadioGroup
           aria-labelledby="ha-radio-buttons-group-label"
           name="ha-radio-buttons-group"
-          // onChange={(e) => handleChange(e)}
           onChange={handleChange}
         >
           <FormControlLabel

From c0700df05a88837fa59326780d9e3d231cbae216 Mon Sep 17 00:00:00 2001
From: ecarrill <ecarrill@akamai.com>
Date: Thu, 3 Aug 2023 13:21:40 -0700
Subject: [PATCH 03/11] Fix radio btn state and label color

---
 .../CreateCluster/CreateCluster.tsx           |  1 -
 .../CreateCluster/HAControlPlane.tsx          | 28 ++++++++++++-------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
index 10675843889..1ab3535fc58 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
@@ -320,7 +320,6 @@ export const CreateCluster = () => {
             </Box>
             {showHighAvailability ? (
               <HAControlPlane
-                highAvailability={highAvailability}
                 setHAControlPlaneSelection={setHAControlPlaneSelection}
                 setHighAvailability={setHighAvailability}
               />
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
index 2128d9211d6..ac5ff205d6a 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
@@ -1,4 +1,5 @@
 import { FormLabel } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
@@ -24,38 +25,45 @@ export const HACopy = () => (
 );
 
 export interface Props {
-  highAvailability: boolean;
   setHAControlPlaneSelection: (haControlPlane: boolean) => void;
   setHighAvailability: (ha: boolean) => void;
 }
 
 export const HAControlPlane = (props: Props) => {
-  const {
-    highAvailability,
-    setHAControlPlaneSelection,
-    setHighAvailability,
-  } = props;
+  const { setHAControlPlaneSelection, setHighAvailability } = props;
+  const theme = useTheme();
 
   if (HIGH_AVAILABILITY_PRICE === undefined) {
     return null;
   }
 
-  const handleChange = () => {
-    setHighAvailability(!highAvailability);
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value === 'yes') {
+      setHighAvailability(true);
+    } else {
+      setHighAvailability(false);
+    }
     setHAControlPlaneSelection(true);
   };
 
   return (
     <Box>
       <FormControl data-testid="ha-control-plane">
-        <FormLabel id="ha-radio-buttons-group-label">
+        <FormLabel
+          sx={{
+            '&&.MuiFormLabel-root.Mui-focused': {
+              color: theme.name === 'dark' ? 'white' : theme.color.black,
+            },
+          }}
+          id="ha-radio-buttons-group-label"
+        >
           <Typography variant="inherit">HA Control Plane</Typography>
         </FormLabel>
         <HACopy />
         <RadioGroup
           aria-labelledby="ha-radio-buttons-group-label"
           name="ha-radio-buttons-group"
-          onChange={handleChange}
+          onChange={(e) => handleChange(e)}
         >
           <FormControlLabel
             label={`Yes, enable HA control plane. (${displayPrice(

From cbfd42f5b63338ab3677063f70fa13dad7e7d2e4 Mon Sep 17 00:00:00 2001
From: ecarrill <ecarrill@akamai.com>
Date: Fri, 4 Aug 2023 09:38:20 -0700
Subject: [PATCH 04/11] Change var name and remove unused prop

---
 .../Kubernetes/CreateCluster/HAControlPlane.test.tsx        | 1 -
 packages/manager/src/features/Kubernetes/kubeUtils.ts       | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
index bd5c461e49c..fccb4bd73ce 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
@@ -7,7 +7,6 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 import { HAControlPlane, Props } from './HAControlPlane';
 
 const props: Props = {
-  highAvailability: false,
   setHAControlPlaneSelection: jest.fn(),
   setHighAvailability: jest.fn(),
 };
diff --git a/packages/manager/src/features/Kubernetes/kubeUtils.ts b/packages/manager/src/features/Kubernetes/kubeUtils.ts
index 6b0c7cd441b..7db707316ec 100644
--- a/packages/manager/src/features/Kubernetes/kubeUtils.ts
+++ b/packages/manager/src/features/Kubernetes/kubeUtils.ts
@@ -140,12 +140,12 @@ export const getKubeHighAvailability = (
 export const getLatestVersion = (
   versions: { label: string; value: string }[]
 ) => {
-  const newArr: number[] = [];
+  const versionsNumbersArray: number[] = [];
 
   for (const element of versions) {
-    newArr.push(parseFloat(element.value));
+    versionsNumbersArray.push(parseFloat(element.value));
   }
-  const latestVersionValue = Math.max.apply(null, newArr);
+  const latestVersionValue = Math.max.apply(null, versionsNumbersArray);
 
   return { label: `${latestVersionValue}`, value: `${latestVersionValue}` };
 };

From 847b1dbdb39d09055e5f83d3d0f54f312352ecb7 Mon Sep 17 00:00:00 2001
From: ecarrill <ecarrill@akamai.com>
Date: Fri, 4 Aug 2023 13:13:19 -0700
Subject: [PATCH 05/11] Cosolidate HA states and fix unit tests

---
 packages/api-v4/src/kubernetes/types.ts       |  2 +-
 .../CreateCluster/CreateCluster.tsx           | 13 ++---
 .../CreateCluster/HAControlPlane.test.tsx     | 53 ++++++-------------
 .../CreateCluster/HAControlPlane.tsx          | 23 ++++----
 .../KubeCheckoutBar/KubeCheckoutBar.test.tsx  |  1 -
 .../KubeCheckoutBar/KubeCheckoutBar.tsx       |  6 +--
 6 files changed, 38 insertions(+), 60 deletions(-)

diff --git a/packages/api-v4/src/kubernetes/types.ts b/packages/api-v4/src/kubernetes/types.ts
index f5314a9b3a3..e90510bc10e 100644
--- a/packages/api-v4/src/kubernetes/types.ts
+++ b/packages/api-v4/src/kubernetes/types.ts
@@ -57,7 +57,7 @@ export interface KubernetesDashboardResponse {
 }
 
 export interface ControlPlaneOptions {
-  high_availability: boolean;
+  high_availability: boolean | undefined;
 }
 
 export interface CreateKubeClusterPayload {
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
index 1ab3535fc58..9417afccd0d 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
@@ -126,13 +126,9 @@ export const CreateCluster = () => {
   const [submitting, setSubmitting] = React.useState<boolean>(false);
   const [hasAgreed, setAgreed] = React.useState<boolean>(false);
   const { mutateAsync: updateAccountAgreements } = useMutateAccountAgreements();
-  const [highAvailability, setHighAvailability] = React.useState<boolean>(
-    false
-  );
-  const [
-    hasHAControlPlaneSelection,
-    setHAControlPlaneSelection,
-  ] = React.useState<boolean>(false);
+  const [highAvailability, setHighAvailability] = React.useState<
+    boolean | undefined
+  >(undefined);
 
   const { data, error: regionsError } = useRegionsQuery();
   const regionsData = data ?? [];
@@ -320,7 +316,7 @@ export const CreateCluster = () => {
             </Box>
             {showHighAvailability ? (
               <HAControlPlane
-                setHAControlPlaneSelection={setHAControlPlaneSelection}
+                highAvailability={highAvailability}
                 setHighAvailability={setHighAvailability}
               />
             ) : null}
@@ -366,7 +362,6 @@ export const CreateCluster = () => {
           ]}
           createCluster={createCluster}
           hasAgreed={hasAgreed}
-          hasHAControlPlaneSelection={hasHAControlPlaneSelection}
           highAvailability={highAvailability}
           pools={nodePools}
           region={selectedRegionID}
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
index fccb4bd73ce..e7c043aed80 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
@@ -1,52 +1,33 @@
-// import { fireEvent } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
 import * as React from 'react';
 
-import { HIGH_AVAILABILITY_PRICE } from 'src/constants';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { HAControlPlane, Props } from './HAControlPlane';
 
+jest.mock('src/constants', () => ({
+  __esModule: true,
+  ...(jest.requireActual('src/constants') as any),
+  HIGH_AVAILABILITY_PRICE: 60,
+}));
+
 const props: Props = {
-  setHAControlPlaneSelection: jest.fn(),
+  highAvailability: undefined,
   setHighAvailability: jest.fn(),
 };
 
-const shouldRender = HIGH_AVAILABILITY_PRICE !== undefined;
-
 describe('HAControlPlane', () => {
   it('the component should render', () => {
-    const { container, getByTestId } = renderWithTheme(
-      <HAControlPlane {...props} />
-    );
-
-    if (shouldRender) {
-      expect(getByTestId('ha-control-plane')).toBeVisible();
-    } else {
-      expect(container).toBeEmptyDOMElement();
-    }
-  });
-
-  // it('should call the handleChange function on change', () => {
-  //   const { getByTestId } = renderWithTheme(
-  //     <HAControlPlane {...props} />
-  //   );
+    const { getByTestId } = renderWithTheme(<HAControlPlane {...props} />);
 
-  //   const haRadioButton = getByTestId('ha-radio-button-yes');
-
-  //   if (!haRadioButton && shouldRender) {
-  //     fail('Radio Buttons not found');
-  //   }
-
-  //   if (haRadioButton && !shouldRender) {
-  //     fail(
-  //       'High Availability control plane was rendered, but no price was provided.'
-  //     );
-  //   }
+    expect(getByTestId('ha-control-plane')).toBeVisible();
+  });
 
-  //   if (haRadioButton) {
-  //     fireEvent.change(haRadioButton);
+  it('should call the handleChange function on change', () => {
+    const { getByTestId } = renderWithTheme(<HAControlPlane {...props} />);
+    const haRadioButton = getByTestId('ha-radio-button-yes');
 
-  //     expect(props.setHighAvailability).toHaveBeenCalled();
-  //   }
-  // });
+    fireEvent.click(haRadioButton);
+    expect(props.setHighAvailability).toHaveBeenCalled();
+  });
 });
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
index ac5ff205d6a..0ee4e8d9c8c 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
@@ -25,27 +25,26 @@ export const HACopy = () => (
 );
 
 export interface Props {
-  setHAControlPlaneSelection: (haControlPlane: boolean) => void;
-  setHighAvailability: (ha: boolean) => void;
+  highAvailability: boolean | undefined;
+  setHighAvailability: (ha: boolean | undefined) => void;
 }
 
 export const HAControlPlane = (props: Props) => {
-  const { setHAControlPlaneSelection, setHighAvailability } = props;
+  const { setHighAvailability } = props;
   const theme = useTheme();
 
-  if (HIGH_AVAILABILITY_PRICE === undefined) {
-    return null;
-  }
-
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value === 'yes') {
       setHighAvailability(true);
     } else {
       setHighAvailability(false);
     }
-    setHAControlPlaneSelection(true);
   };
 
+  if (HIGH_AVAILABILITY_PRICE === undefined) {
+    return null;
+  }
+
   return (
     <Box>
       <FormControl data-testid="ha-control-plane">
@@ -70,9 +69,15 @@ export const HAControlPlane = (props: Props) => {
               HIGH_AVAILABILITY_PRICE
             )}/month)`}
             control={<Radio data-testid="ha-radio-button-yes" />}
+            name="yes"
             value="yes"
           />
-          <FormControlLabel control={<Radio />} label="No" value="no" />
+          <FormControlLabel
+            control={<Radio />}
+            label="No"
+            name="no"
+            value="no"
+          />
         </RadioGroup>
       </FormControl>
     </Box>
diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx
index 20fdac1e2a1..c89a5f6505a 100644
--- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx
+++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx
@@ -11,7 +11,6 @@ const pools = nodePoolFactory.buildList(5, { count: 3, type: 'g6-standard-1' });
 const props: Props = {
   createCluster: jest.fn(),
   hasAgreed: false,
-  hasHAControlPlaneSelection: true,
   highAvailability: false,
   pools,
   region: undefined,
diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
index 5211b37d24a..2a9b9f045e6 100644
--- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
+++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
@@ -20,8 +20,7 @@ import NodePoolSummary from './NodePoolSummary';
 export interface Props {
   createCluster: () => void;
   hasAgreed: boolean;
-  hasHAControlPlaneSelection: boolean;
-  highAvailability: boolean;
+  highAvailability: boolean | undefined;
   pools: KubeNodePoolResponse[];
   region: string | undefined;
   removePool: (poolIdx: number) => void;
@@ -34,7 +33,6 @@ export const KubeCheckoutBar: React.FC<Props> = (props) => {
   const {
     createCluster,
     hasAgreed,
-    hasHAControlPlaneSelection,
     highAvailability,
     pools,
     region,
@@ -62,7 +60,7 @@ export const KubeCheckoutBar: React.FC<Props> = (props) => {
   const disableCheckout = Boolean(
     needsAPool ||
       (!hasAgreed && showGDPRCheckbox) ||
-      !hasHAControlPlaneSelection
+      highAvailability === undefined
   );
 
   if (isLoading) {

From 7416e50737dd253cbf1447199dc9d22ee9b7d108 Mon Sep 17 00:00:00 2001
From: ecarrill <ecarrill@akamai.com>
Date: Fri, 4 Aug 2023 13:15:43 -0700
Subject: [PATCH 06/11] Add changeset

---
 .../manager/.changeset/pr-9489-tech-stories-1691180131190.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-9489-tech-stories-1691180131190.md

diff --git a/packages/manager/.changeset/pr-9489-tech-stories-1691180131190.md b/packages/manager/.changeset/pr-9489-tech-stories-1691180131190.md
new file mode 100644
index 00000000000..d78c67e3bd9
--- /dev/null
+++ b/packages/manager/.changeset/pr-9489-tech-stories-1691180131190.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+New HA control plane to replace HA Checkbox ([#9489](https://github.com/linode/manager/pull/9489))

From 4f50dd87d64edf717675dd3c892b12dd7657a639 Mon Sep 17 00:00:00 2001
From: ecarrill <ecarrill@akamai.com>
Date: Fri, 4 Aug 2023 14:05:37 -0700
Subject: [PATCH 07/11] Update type and remove redundant code

---
 packages/api-v4/src/kubernetes/types.ts            |  2 +-
 .../Kubernetes/CreateCluster/CreateCluster.tsx     |  4 +---
 .../Kubernetes/CreateCluster/HAControlPlane.tsx    | 14 ++++----------
 .../Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx |  2 +-
 4 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/packages/api-v4/src/kubernetes/types.ts b/packages/api-v4/src/kubernetes/types.ts
index e90510bc10e..56db9687cc0 100644
--- a/packages/api-v4/src/kubernetes/types.ts
+++ b/packages/api-v4/src/kubernetes/types.ts
@@ -57,7 +57,7 @@ export interface KubernetesDashboardResponse {
 }
 
 export interface ControlPlaneOptions {
-  high_availability: boolean | undefined;
+  high_availability?: boolean;
 }
 
 export interface CreateKubeClusterPayload {
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
index 9417afccd0d..90747874a66 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
@@ -126,9 +126,7 @@ export const CreateCluster = () => {
   const [submitting, setSubmitting] = React.useState<boolean>(false);
   const [hasAgreed, setAgreed] = React.useState<boolean>(false);
   const { mutateAsync: updateAccountAgreements } = useMutateAccountAgreements();
-  const [highAvailability, setHighAvailability] = React.useState<
-    boolean | undefined
-  >(undefined);
+  const [highAvailability, setHighAvailability] = React.useState<boolean>();
 
   const { data, error: regionsError } = useRegionsQuery();
   const regionsData = data ?? [];
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
index 0ee4e8d9c8c..628c5f565f2 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
@@ -1,5 +1,4 @@
 import { FormLabel } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
@@ -25,20 +24,15 @@ export const HACopy = () => (
 );
 
 export interface Props {
-  highAvailability: boolean | undefined;
+  highAvailability?: boolean;
   setHighAvailability: (ha: boolean | undefined) => void;
 }
 
 export const HAControlPlane = (props: Props) => {
   const { setHighAvailability } = props;
-  const theme = useTheme();
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.value === 'yes') {
-      setHighAvailability(true);
-    } else {
-      setHighAvailability(false);
-    }
+    setHighAvailability(e.target.value === 'yes');
   };
 
   if (HIGH_AVAILABILITY_PRICE === undefined) {
@@ -49,11 +43,11 @@ export const HAControlPlane = (props: Props) => {
     <Box>
       <FormControl data-testid="ha-control-plane">
         <FormLabel
-          sx={{
+          sx={(theme) => ({
             '&&.MuiFormLabel-root.Mui-focused': {
               color: theme.name === 'dark' ? 'white' : theme.color.black,
             },
-          }}
+          })}
           id="ha-radio-buttons-group-label"
         >
           <Typography variant="inherit">HA Control Plane</Typography>
diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
index 2a9b9f045e6..98eab12e1ac 100644
--- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
+++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
@@ -20,7 +20,7 @@ import NodePoolSummary from './NodePoolSummary';
 export interface Props {
   createCluster: () => void;
   hasAgreed: boolean;
-  highAvailability: boolean | undefined;
+  highAvailability?: boolean;
   pools: KubeNodePoolResponse[];
   region: string | undefined;
   removePool: (poolIdx: number) => void;

From d884d8839bbe87d532c71e1b4a2c5cfb5c4d218f Mon Sep 17 00:00:00 2001
From: ecarrill <ecarrill@akamai.com>
Date: Sat, 5 Aug 2023 16:20:13 -0700
Subject: [PATCH 08/11] Fix failing e2e tests

---
 .../e2e/core/kubernetes/lke-create.spec.ts       |  4 +++-
 .../e2e/core/kubernetes/smoke-lke-create.spec.ts | 16 ++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
index 644869668f8..faddc159dbd 100644
--- a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
+++ b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
@@ -93,11 +93,13 @@ describe('LKE Cluster Creation', () => {
       .click()
       .type(`${clusterRegion.label}{enter}`);
 
-    cy.findByLabelText('Kubernetes Version')
+    cy.findByText('Kubernetes Version')
       .should('be.visible')
       .click()
       .type(`${clusterVersion}{enter}`);
 
+    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.
     clusterPlans.forEach((clusterPlan) => {
diff --git a/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts
index f276c371b25..b809dcf499b 100644
--- a/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts
+++ b/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts
@@ -60,14 +60,22 @@ describe('LKE Create Cluster', () => {
     mockCreateCluster(mockCluster).as('createCluster');
     cy.visitWithLogin('/kubernetes/create');
     cy.findByText('Add Node Pools').should('be.visible');
+
     cy.findByLabelText('Cluster Label').click().type(mockCluster.label);
-    cy.findByLabelText('Region')
+
+    cy.findByText('Region')
       .should('be.visible')
-      .focus()
+      .click()
       .type(`${chooseRegion().label}{enter}`);
-    cy.get('[id="kubernetes-version"]').type('{enter}');
-    cy.findByText('Shared CPU').should('be.visible').click();
 
+    cy.findByText('Kubernetes Version')
+      .should('be.visible')
+      .click()
+      .type('{enter}');
+
+    cy.get('[data-testid="ha-radio-button-yes"]').should('be.visible').click();
+
+    cy.findByText('Shared CPU').should('be.visible').click();
     addNodes('Linode 2 GB');
 
     // Confirm change is reflected in checkout bar.

From fddce1808dfd4c4c8618f120fcc76083037e4570 Mon Sep 17 00:00:00 2001
From: ecarrill <ecarrill@akamai.com>
Date: Tue, 8 Aug 2023 06:49:03 -0700
Subject: [PATCH 09/11] Change logic and test when HA in not available

---
 .../manager/cypress/e2e/core/kubernetes/lke-create.spec.ts   | 3 ++-
 .../cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts     | 3 ++-
 .../src/features/Kubernetes/CreateCluster/CreateCluster.tsx  | 3 ++-
 .../Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx      | 1 +
 .../features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx  | 5 ++++-
 5 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
index faddc159dbd..9431d596add 100644
--- a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
+++ b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
@@ -98,7 +98,8 @@ describe('LKE Cluster Creation', () => {
       .click()
       .type(`${clusterVersion}{enter}`);
 
-    cy.get('[data-testid="ha-radio-button-yes"]').should('be.visible').click();
+    // Temporary removal until the Jenkins pipeline is updated
+    // 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.
diff --git a/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts
index b809dcf499b..ba481a9f0ec 100644
--- a/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts
+++ b/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts
@@ -73,7 +73,8 @@ describe('LKE Create Cluster', () => {
       .click()
       .type('{enter}');
 
-    cy.get('[data-testid="ha-radio-button-yes"]').should('be.visible').click();
+    // Temporary removal until the Jenkins pipeline is updated
+    // cy.get('[data-testid="ha-radio-button-yes"]').should('be.visible').click();
 
     cy.findByText('Shared CPU').should('be.visible').click();
     addNodes('Linode 2 GB');
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
index b4f86ab6dbf..b21a4c4a794 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
@@ -4,7 +4,6 @@ import {
   KubeNodePoolResponse,
 } from '@linode/api-v4/lib/kubernetes';
 import { APIError } from '@linode/api-v4/lib/types';
-import { Box } from 'src/components/Box';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Theme } from '@mui/material/styles';
 import { makeStyles } from '@mui/styles';
@@ -12,6 +11,7 @@ import { pick, remove, update } from 'ramda';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
+import { Box } from 'src/components/Box';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import Select, { Item } from 'src/components/EnhancedSelect/Select';
 import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
@@ -364,6 +364,7 @@ export const CreateCluster = () => {
           pools={nodePools}
           region={selectedRegionID}
           removePool={removePool}
+          showHighAvailability={showHighAvailability}
           submitting={submitting}
           toggleHasAgreed={toggleHasAgreed}
           updatePool={updatePool}
diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx
index c89a5f6505a..975ea4d0af9 100644
--- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx
+++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx
@@ -15,6 +15,7 @@ const props: Props = {
   pools,
   region: undefined,
   removePool: jest.fn(),
+  showHighAvailability: true,
   submitting: false,
   toggleHasAgreed: jest.fn(),
   updatePool: jest.fn(),
diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
index 88e132723a1..299d6690382 100644
--- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
+++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
@@ -24,6 +24,7 @@ export interface Props {
   pools: KubeNodePoolResponse[];
   region: string | undefined;
   removePool: (poolIdx: number) => void;
+  showHighAvailability: boolean | undefined;
   submitting: boolean;
   toggleHasAgreed: () => void;
   updatePool: (poolIdx: number, updatedPool: KubeNodePoolResponse) => void;
@@ -37,6 +38,7 @@ export const KubeCheckoutBar: React.FC<Props> = (props) => {
     pools,
     region,
     removePool,
+    showHighAvailability,
     submitting,
     toggleHasAgreed,
     updatePool,
@@ -57,10 +59,11 @@ export const KubeCheckoutBar: React.FC<Props> = (props) => {
     agreements?.eu_model === false;
 
   const needsAPool = pools.length < 1;
+
   const disableCheckout = Boolean(
     needsAPool ||
       (!hasAgreed && showGDPRCheckbox) ||
-      highAvailability === undefined
+      (highAvailability === undefined && showHighAvailability)
   );
 
   if (isLoading) {

From c154e9a9abaa2325b8e83d380cfbedc4b90f35d8 Mon Sep 17 00:00:00 2001
From: ecarrill <ecarrill@akamai.com>
Date: Thu, 10 Aug 2023 00:39:32 -0700
Subject: [PATCH 10/11] Change conditional logic for HA and update tests

---
 .../e2e/core/kubernetes/lke-create.spec.ts    | 16 ++++-
 .../core/kubernetes/smoke-lke-create.spec.ts  | 16 ++++-
 .../CreateCluster/CreateCluster.tsx           | 13 ++--
 .../CreateCluster/HAControlPlane.test.tsx     | 17 +++--
 .../CreateCluster/HAControlPlane.tsx          | 68 ++++++++-----------
 .../KubeCheckoutBar/KubeCheckoutBar.test.tsx  |  3 +-
 .../KubeCheckoutBar/KubeCheckoutBar.tsx       | 15 ++--
 7 files changed, 90 insertions(+), 58 deletions(-)

diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
index 9431d596add..e65207ae340 100644
--- a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
+++ b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
@@ -98,8 +98,20 @@ describe('LKE Cluster Creation', () => {
       .click()
       .type(`${clusterVersion}{enter}`);
 
-    // Temporary removal until the Jenkins pipeline is updated
-    // cy.get('[data-testid="ha-radio-button-yes"]').should('be.visible').click();
+    // We can assume that the element assigned to haControlPlane should always be in the DOM
+    // for the purpose of this test.
+    // Then, we use it to find the radio button for the HA opt-in and click it to enable the
+    // Create Cluster button.
+    const haControlPlane = '[data-testid="ha-control-plane"]';
+    cy.get(haControlPlane).then((haControlPlane) => {
+      if (
+        haControlPlane.find('[data-testid="ha-radio-button-yes"]').length > 0
+      ) {
+        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.
diff --git a/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts
index ba481a9f0ec..6de28f15cd2 100644
--- a/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts
+++ b/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts
@@ -73,8 +73,20 @@ describe('LKE Create Cluster', () => {
       .click()
       .type('{enter}');
 
-    // Temporary removal until the Jenkins pipeline is updated
-    // cy.get('[data-testid="ha-radio-button-yes"]').should('be.visible').click();
+    // We can assume that the element assigned to haControlPlane should always be in the DOM
+    // for the purpose of this test.
+    // Then, we use it to find the radio button for the HA opt-in and click it to enable the
+    // Create Cluster button.
+    const haControlPlane = '[data-testid="ha-control-plane"]';
+    cy.get(haControlPlane).then((haControlPlane) => {
+      if (
+        haControlPlane.find('[data-testid="ha-radio-button-yes"]').length > 0
+      ) {
+        cy.get('[data-testid="ha-radio-button-yes"]')
+          .should('be.visible')
+          .click();
+      }
+    });
 
     cy.findByText('Shared CPU').should('be.visible').click();
     addNodes('Linode 2 GB');
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
index b21a4c4a794..c6ae919a673 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
@@ -22,6 +22,7 @@ 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,
@@ -313,10 +314,13 @@ export const CreateCluster = () => {
               />
             </Box>
             {showHighAvailability ? (
-              <HAControlPlane
-                highAvailability={highAvailability}
-                setHighAvailability={setHighAvailability}
-              />
+              <Box data-testid="ha-control-plane">
+                <HAControlPlane
+                  HIGH_AVAILABILITY_PRICE={HIGH_AVAILABILITY_PRICE}
+                  highAvailability={highAvailability}
+                  setHighAvailability={setHighAvailability}
+                />
+              </Box>
             ) : null}
           </div>
           <Box>
@@ -358,6 +362,7 @@ export const CreateCluster = () => {
             createCluster,
             classes,
           ]}
+          HIGH_AVAILABILITY_PRICE={HIGH_AVAILABILITY_PRICE}
           createCluster={createCluster}
           hasAgreed={hasAgreed}
           highAvailability={highAvailability}
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
index e7c043aed80..2d7807b2f88 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
@@ -5,13 +5,18 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { HAControlPlane, Props } from './HAControlPlane';
 
-jest.mock('src/constants', () => ({
-  __esModule: true,
-  ...(jest.requireActual('src/constants') as any),
-  HIGH_AVAILABILITY_PRICE: 60,
-}));
+/*
+  This mock might not be required anymore since we are passing the value of
+  HIGH_AVAILABILITY_PRICE as a prop.
+*/
+// jest.mock('src/constants', () => ({
+//   __esModule: true,
+//   ...(jest.requireActual('src/constants') as any),
+//   HIGH_AVAILABILITY_PRICE: 60,
+// }));
 
 const props: Props = {
+  HIGH_AVAILABILITY_PRICE: 60,
   highAvailability: undefined,
   setHighAvailability: jest.fn(),
 };
@@ -20,7 +25,7 @@ describe('HAControlPlane', () => {
   it('the component should render', () => {
     const { getByTestId } = renderWithTheme(<HAControlPlane {...props} />);
 
-    expect(getByTestId('ha-control-plane')).toBeVisible();
+    expect(getByTestId('ha-control-plane-form')).toBeVisible();
   });
 
   it('should call the handleChange function on change', () => {
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
index 628c5f565f2..1bbf7f7c55c 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
@@ -1,7 +1,6 @@
 import { FormLabel } from '@mui/material';
 import * as React from 'react';
 
-import { Box } from 'src/components/Box';
 import { displayPrice } from 'src/components/DisplayPrice';
 import { FormControl } from 'src/components/FormControl';
 import { FormControlLabel } from 'src/components/FormControlLabel';
@@ -9,7 +8,6 @@ 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 { HIGH_AVAILABILITY_PRICE } from 'src/constants';
 
 export const HACopy = () => (
   <Typography>
@@ -24,12 +22,13 @@ export const HACopy = () => (
 );
 
 export interface Props {
+  HIGH_AVAILABILITY_PRICE: number | undefined;
   highAvailability?: boolean;
   setHighAvailability: (ha: boolean | undefined) => void;
 }
 
 export const HAControlPlane = (props: Props) => {
-  const { setHighAvailability } = props;
+  const { HIGH_AVAILABILITY_PRICE, setHighAvailability } = props;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setHighAvailability(e.target.value === 'yes');
@@ -40,40 +39,33 @@ export const HAControlPlane = (props: Props) => {
   }
 
   return (
-    <Box>
-      <FormControl data-testid="ha-control-plane">
-        <FormLabel
-          sx={(theme) => ({
-            '&&.MuiFormLabel-root.Mui-focused': {
-              color: theme.name === 'dark' ? 'white' : theme.color.black,
-            },
-          })}
-          id="ha-radio-buttons-group-label"
-        >
-          <Typography variant="inherit">HA Control Plane</Typography>
-        </FormLabel>
-        <HACopy />
-        <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)`}
-            control={<Radio data-testid="ha-radio-button-yes" />}
-            name="yes"
-            value="yes"
-          />
-          <FormControlLabel
-            control={<Radio />}
-            label="No"
-            name="no"
-            value="no"
-          />
-        </RadioGroup>
-      </FormControl>
-    </Box>
+    <FormControl data-testid="ha-control-plane-form">
+      <FormLabel
+        sx={(theme) => ({
+          '&&.MuiFormLabel-root.Mui-focused': {
+            color: theme.name === 'dark' ? 'white' : theme.color.black,
+          },
+        })}
+        id="ha-radio-buttons-group-label"
+      >
+        <Typography variant="inherit">HA Control Plane</Typography>
+      </FormLabel>
+      <HACopy />
+      <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)`}
+          control={<Radio data-testid="ha-radio-button-yes" />}
+          name="yes"
+          value="yes"
+        />
+        <FormControlLabel control={<Radio />} label="No" name="no" value="no" />
+      </RadioGroup>
+    </FormControl>
   );
 };
diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx
index 975ea4d0af9..e0b4129a495 100644
--- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx
+++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.test.tsx
@@ -9,9 +9,10 @@ import KubeCheckoutBar, { Props } from './KubeCheckoutBar';
 const pools = nodePoolFactory.buildList(5, { count: 3, type: 'g6-standard-1' });
 
 const props: Props = {
+  HIGH_AVAILABILITY_PRICE: 60,
   createCluster: jest.fn(),
   hasAgreed: false,
-  highAvailability: false,
+  highAvailability: true,
   pools,
   region: undefined,
   removePool: jest.fn(),
diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
index 299d6690382..cff0b741f2d 100644
--- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
+++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
@@ -18,6 +18,7 @@ import { getTotalClusterPrice, nodeWarning } from '../kubeUtils';
 import NodePoolSummary from './NodePoolSummary';
 
 export interface Props {
+  HIGH_AVAILABILITY_PRICE: number | undefined;
   createCluster: () => void;
   hasAgreed: boolean;
   highAvailability?: boolean;
@@ -32,6 +33,7 @@ export interface Props {
 
 export const KubeCheckoutBar: React.FC<Props> = (props) => {
   const {
+    HIGH_AVAILABILITY_PRICE,
     createCluster,
     hasAgreed,
     highAvailability,
@@ -60,11 +62,14 @@ export const KubeCheckoutBar: React.FC<Props> = (props) => {
 
   const needsAPool = pools.length < 1;
 
-  const disableCheckout = Boolean(
-    needsAPool ||
-      (!hasAgreed && showGDPRCheckbox) ||
-      (highAvailability === undefined && showHighAvailability)
-  );
+  const gdprConditions = !hasAgreed && showGDPRCheckbox;
+
+  const haConditions =
+    highAvailability === undefined &&
+    showHighAvailability &&
+    HIGH_AVAILABILITY_PRICE !== undefined;
+
+  const disableCheckout = Boolean(needsAPool || gdprConditions || haConditions);
 
   if (isLoading) {
     return <CircleProgress />;

From d13f0ab2789a7e3fba201e806dd237885f80600d Mon Sep 17 00:00:00 2001
From: ecarrill <ecarrill@akamai.com>
Date: Fri, 11 Aug 2023 11:26:45 -0700
Subject: [PATCH 11/11] Remove HA e2e test and add unit test for HA price

---
 .../e2e/core/kubernetes/lke-create.spec.ts    | 17 +++-----------
 .../core/kubernetes/smoke-lke-create.spec.ts  | 17 +++-----------
 .../CreateCluster/CreateCluster.tsx           |  1 -
 .../CreateCluster/HAControlPlane.test.tsx     | 23 ++++++++++---------
 .../CreateCluster/HAControlPlane.tsx          |  3 +--
 5 files changed, 19 insertions(+), 42 deletions(-)

diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
index e65207ae340..820d2c91044 100644
--- a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
+++ b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
@@ -98,20 +98,9 @@ describe('LKE Cluster Creation', () => {
       .click()
       .type(`${clusterVersion}{enter}`);
 
-    // We can assume that the element assigned to haControlPlane should always be in the DOM
-    // for the purpose of this test.
-    // Then, we use it to find the radio button for the HA opt-in and click it to enable the
-    // Create Cluster button.
-    const haControlPlane = '[data-testid="ha-control-plane"]';
-    cy.get(haControlPlane).then((haControlPlane) => {
-      if (
-        haControlPlane.find('[data-testid="ha-radio-button-yes"]').length > 0
-      ) {
-        cy.get('[data-testid="ha-radio-button-yes"]')
-          .should('be.visible')
-          .click();
-      }
-    });
+    // 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();
 
     // Add a node pool for each randomly selected plan, and confirm that the
     // selected node pool plan is added to the checkout bar.
diff --git a/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts
index 6de28f15cd2..6d2af3a9a1d 100644
--- a/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts
+++ b/packages/manager/cypress/e2e/core/kubernetes/smoke-lke-create.spec.ts
@@ -73,20 +73,9 @@ describe('LKE Create Cluster', () => {
       .click()
       .type('{enter}');
 
-    // We can assume that the element assigned to haControlPlane should always be in the DOM
-    // for the purpose of this test.
-    // Then, we use it to find the radio button for the HA opt-in and click it to enable the
-    // Create Cluster button.
-    const haControlPlane = '[data-testid="ha-control-plane"]';
-    cy.get(haControlPlane).then((haControlPlane) => {
-      if (
-        haControlPlane.find('[data-testid="ha-radio-button-yes"]').length > 0
-      ) {
-        cy.get('[data-testid="ha-radio-button-yes"]')
-          .should('be.visible')
-          .click();
-      }
-    });
+    // 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.findByText('Shared CPU').should('be.visible').click();
     addNodes('Linode 2 GB');
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
index c6ae919a673..16426488283 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
@@ -317,7 +317,6 @@ export const CreateCluster = () => {
               <Box data-testid="ha-control-plane">
                 <HAControlPlane
                   HIGH_AVAILABILITY_PRICE={HIGH_AVAILABILITY_PRICE}
-                  highAvailability={highAvailability}
                   setHighAvailability={setHighAvailability}
                 />
               </Box>
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
index 2d7807b2f88..c2d0b4a5d44 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.test.tsx
@@ -5,19 +5,8 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { HAControlPlane, Props } from './HAControlPlane';
 
-/*
-  This mock might not be required anymore since we are passing the value of
-  HIGH_AVAILABILITY_PRICE as a prop.
-*/
-// jest.mock('src/constants', () => ({
-//   __esModule: true,
-//   ...(jest.requireActual('src/constants') as any),
-//   HIGH_AVAILABILITY_PRICE: 60,
-// }));
-
 const props: Props = {
   HIGH_AVAILABILITY_PRICE: 60,
-  highAvailability: undefined,
   setHighAvailability: jest.fn(),
 };
 
@@ -28,6 +17,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} />
+    );
+
+    expect(queryByTestId('ha-control-plane-form')).not.toBeInTheDocument();
+  });
+
   it('should call the handleChange function on change', () => {
     const { getByTestId } = renderWithTheme(<HAControlPlane {...props} />);
     const haRadioButton = getByTestId('ha-radio-button-yes');
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
index 1bbf7f7c55c..0520cf136a1 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx
@@ -11,7 +11,7 @@ import { Typography } from 'src/components/Typography';
 
 export const HACopy = () => (
   <Typography>
-    Recommended for prodcution workloads, a high availability (HA) control plane
+    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/">
@@ -23,7 +23,6 @@ export const HACopy = () => (
 
 export interface Props {
   HIGH_AVAILABILITY_PRICE: number | undefined;
-  highAvailability?: boolean;
   setHighAvailability: (ha: boolean | undefined) => void;
 }