change: [UIE-9861] - Handle Incompatibility of linode interfaces in create LKE flow (linode#13272)

Author: grevanak-akamai

packages/manager/.changeset/pr-13272-changed-1768292265959.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Handle Incompatibility of linode interfaces in create LKE flow ([#13272](https://github.com/linode/manager/pull/13272))

packages/manager/src/features/Account/NetworkInterfaceType.tsx

@@ -75,7 +75,9 @@ export const NetworkInterfaceType = () => {
 
   return (
     <Paper data-testid="network-interface-type">
-      <Typography variant="h2">Network Interface Type</Typography>
+      <Typography id="interface-type" variant="h2">
+        Network Interface Type
+      </Typography>
       <form onSubmit={handleSubmit(onSubmit)}>
         <Stack mt={1}>
           <Typography variant="body1">

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

@@ -1,4 +1,5 @@
 import {
+  useAccountSettings,
   useAllTypes,
   useMutateAccountAgreements,
   useRegionsQuery,
@@ -12,6 +13,7 @@ import {
   Select,
   Stack,
   TextField,
+  Typography,
 } from '@linode/ui';
 import { plansNoticesUtils, scrollErrorIntoViewV2 } from '@linode/utilities';
 import { createKubeClusterWithRequiredACLSchema } from '@linode/validation';
@@ -31,6 +33,7 @@ import { DocsLink } from 'src/components/DocsLink/DocsLink';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { ErrorMessage } from 'src/components/ErrorMessage';
 import { LandingHeader } from 'src/components/LandingHeader';
+import { Link } from 'src/components/Link';
 import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
 import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
@@ -123,6 +126,7 @@ export const CreateCluster = () => {
 
   const { data, error: regionsError } = useRegionsQuery();
   const regionsData = data ?? [];
+  const { data: accountSettings } = useAccountSettings();
   const { showAPL } = useAPLAvailability();
   const [ipV4Addr, setIPv4Addr] = React.useState<ExtendedIP[]>([
     stringToExtendedIP(''),
@@ -238,6 +242,9 @@ export const CreateCluster = () => {
     globalGrantType: 'add_lkes',
   });
 
+  const isInterfaceIncompatible =
+    accountSettings?.interfaces_for_new_linodes === 'linode_only';
+
   const {
     data: allTypes,
     error: typesError,
@@ -488,6 +495,21 @@ export const CreateCluster = () => {
               variant="error"
             />
           )}
+          {isInterfaceIncompatible && (
+            <Notice sx={{ marginBottom: 2 }} variant="warning">
+              <Typography>
+                Your account’s{' '}
+                <strong>
+                  Network Interface Type setting is incompatible with LKE
+                </strong>
+                . To create a cluster, update this setting to allow the option
+                for Configuration Profile Interfaces.{' '}
+                <Link to={'/account-settings#interface-type'}>
+                  Account settings
+                </Link>
+              </Typography>
+            </Notice>
+          )}
           <Paper data-qa-label-header>
             <TextField
               data-qa-label-input
@@ -700,6 +722,7 @@ export const CreateCluster = () => {
                 ? UNKNOWN_PRICE
                 : highAvailabilityPrice
             }
+            isInterfaceIncompatible={isInterfaceIncompatible}
             pools={nodePools}
             region={selectedRegion?.id}
             regionsData={regionsData}

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

@@ -55,6 +55,22 @@ describe('KubeCheckoutBar', () => {
     );
   });
 
+  it('should disable create button if Network Interface Type setting is linode only', async () => {
+    const { getByText } = renderWithThemeAndHookFormContext({
+      component: <KubeCheckoutBar {...props} isInterfaceIncompatible={true} />,
+      useFormOptions: {
+        defaultValues: {
+          nodePools: [nodePoolFactory.build()],
+        },
+      },
+    });
+
+    expect(getByText('Create Cluster').closest('button')).toHaveAttribute(
+      'aria-disabled',
+      'true'
+    );
+  });
+
   it('should render a section for each pool', async () => {
     const { queryAllByTestId } = renderWithThemeAndHookFormContext({
       component: <KubeCheckoutBar {...props} />,

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

@@ -43,6 +43,7 @@ export interface Props {
   hasAgreed: boolean;
   highAvailability?: boolean;
   highAvailabilityPrice: string;
+  isInterfaceIncompatible?: boolean;
   pools: CreateNodePoolData[];
   region: string | undefined;
   regionsData: Region[];
@@ -58,6 +59,7 @@ export const KubeCheckoutBar = (props: Props) => {
     hasAgreed,
     highAvailability,
     highAvailabilityPrice,
+    isInterfaceIncompatible,
     pools,
     region,
     regionsData,
@@ -98,7 +100,8 @@ export const KubeCheckoutBar = (props: Props) => {
     needsAPool ||
       gdprConditions ||
       (haConditions && !enterprisePrice) ||
-      !region
+      !region ||
+      isInterfaceIncompatible
   );
 
   if (isLoading) {