From 67d62f1c64503ecc6feabd8736a54ebcd45c45a2 Mon Sep 17 00:00:00 2001
From: Ganesh Revanakar <grevanak@akamai.com>
Date: Wed, 21 Jan 2026 19:09:33 +0530
Subject: [PATCH] fix: [UIE-10016] - Show notice in add interface drawer when
 adding Public Internet interface to Linode with VPC

---
 .../AddInterfaceForm.test.tsx                 | 26 +++++++-
 .../AddInterfaceDrawer/AddInterfaceForm.tsx   | 62 +++++++++++++------
 2 files changed, 68 insertions(+), 20 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.test.tsx
index 61ddae5436d..37e00afaf58 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.test.tsx
+++ b/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();
 
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.tsx
index 16f3e2d438a..82b2370844e 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.tsx
+++ b/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>