fix: [UIE-10016] - Show notice in add interface drawer when adding Public Internet interface to Linode with VPC

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.test.tsx

@@ -1,4 +1,7 @@
-import { linodeInterfaceFactoryPublic } from '@linode/utilities';
+import {
+  linodeInterfaceFactoryPublic,
+  linodeInterfaceFactoryVPC,
+} from '@linode/utilities';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
@@ -123,6 +126,27 @@ describe('AddInterfaceForm', () => {
     ).toBeVisible();
   });
 
+  it('should show a warning notice on selection of Public option if a VPC interface already exists', async () => {
+    const mockVPCInterface = linodeInterfaceFactoryVPC.build();
+
+    server.use(
+      http.get('*/linode/instances/:linodeId/interfaces', () => {
+        return HttpResponse.json({
+          interfaces: [mockVPCInterface],
+        });
+      })
+    );
+
+    const { getByRole, findByRole, getByText } = renderWithTheme(
+      <AddInterfaceForm {...props} />
+    );
+
+    // Wait for the loading to complete and form to render
+    await findByRole('radio', { name: 'Public' });
+    await userEvent.click(getByRole('radio', { name: 'Public' }));
+    expect(getByText(/This Linode already has a VPC interface/)).toBeVisible();
+  });
+
   it('should disable Public interface radio button if a Public interface already exists', async () => {
     const mockPublicInterface = linodeInterfaceFactoryPublic.build();
 

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.tsx

@@ -43,7 +43,6 @@ export const AddInterfaceForm = (props: Props) => {
     interfacesData?.interfaces.map((networkInterface) =>
       getLinodeInterfaceType(networkInterface)
     ) ?? [];
-  const isPublicInterfacePresent = existingInterfaces.includes('Public');
   const form = useForm<CreateInterfaceFormValues>({
     defaultValues: {
       firewall_id: null,
@@ -105,6 +104,46 @@ export const AddInterfaceForm = (props: Props) => {
     );
   }
 
+  const additionalWarningMessage =
+    'Each Linode comes with one public IP address. Additional public IP addresses are available upon request and will incur a monthly charge.';
+
+  const getWarningNotice = () => {
+    if (
+      selectedInterfacePurpose === 'public' &&
+      existingInterfaces.includes('VPC')
+    ) {
+      return (
+        <Notice variant="warning">
+          <Typography>
+            This Linode already has a VPC interface. Having both a VPC interface
+            and a public interface is not recommended. If you need internet
+            access, consider using the VPC’s
+            <strong> Public access</strong> option instead.
+          </Typography>
+          <Typography paddingTop={2}>{additionalWarningMessage}</Typography>
+        </Notice>
+      );
+    }
+
+    if (
+      selectedInterfacePurpose === 'vpc' &&
+      existingInterfaces.includes('Public')
+    ) {
+      return (
+        <Notice variant="warning">
+          <Typography>
+            This Linode already has a public interface. Having both a VPC
+            interface and a public interface is not recommended. If you need
+            public internet access, consider using the VPC’s{' '}
+            <strong> Public access</strong> option instead.
+          </Typography>
+          <Typography paddingTop={2}>{additionalWarningMessage}</Typography>
+        </Notice>
+      );
+    }
+    return null;
+  };
+
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
@@ -122,30 +161,15 @@ export const AddInterfaceForm = (props: Props) => {
             />
           )}
           <InterfaceType existingInterfaces={existingInterfaces} />
+          {getWarningNotice()}
           {selectedInterfacePurpose === 'public' && <PublicInterface />}
           {selectedInterfacePurpose === 'vlan' && (
             <VLANInterface regionId={regionId} />
           )}
           {selectedInterfacePurpose === 'vpc' && (
-            <Box>
-              {isPublicInterfacePresent && (
-                <Notice variant="warning">
-                  <Typography>
-                    This Linode already has a public interface. Having both a
-                    VPC interface and a public interface is not recommended. If
-                    you need public internet access, consider using the VPC’s
-                    <strong> Public access</strong> option instead.
-                  </Typography>
-                  <Typography paddingTop={2}>
-                    Each Linode includes one public IP address. To request
-                    additional public IPs, please note that they incur a monthly
-                    charge.
-                  </Typography>
-                </Notice>
-              )}
-              <VPCInterface regionId={regionId} />
-            </Box>
+            <VPCInterface regionId={regionId} />
           )}
+
           {selectedInterfacePurpose !== 'vlan' && <InterfaceFirewall />}
           <Actions onClose={onClose} />
         </Stack>