Disable ephemeral IP attach button instead of hiding (#3044)

disable ephemeral ip attach button, not hide

Author: david-crespo

app/pages/project/instances/NetworkingTab.tsx

@@ -517,10 +517,12 @@ export default function NetworkingTab() {
     getCoreRowModel: getCoreRowModel(),
   })
 
-  // If there's already an ephemeral IP, or if there are no network interfaces,
-  // they shouldn't be able to attach an ephemeral IP
-  const enableEphemeralAttachButton =
-    eips.items.filter((ip) => ip.kind === 'ephemeral').length === 0 && nics.length > 0
+  const ephemeralDisabledReason =
+    nics.length === 0
+      ? 'Instance has no network interfaces'
+      : eips.items.some((ip) => ip.kind === 'ephemeral')
+        ? 'Instance already has an ephemeral IP'
+        : null
 
   const floatingDisabledReason =
     eips.items.filter((ip) => ip.kind === 'floating').length >= 32
@@ -534,16 +536,14 @@ export default function NetworkingTab() {
       <CardBlock>
         <CardBlock.Header title="External IPs" titleId="attached-ips-label">
           <div className="flex gap-3">
-            {/*
-                We normally wouldn't hide this button and would just have a disabled state on it,
-                but it is very rare for this button to be necessary, and it would be disabled
-                most of the time, for most users. To reduce clutter on the screen, we're hiding it.
-               */}
-            {enableEphemeralAttachButton && (
-              <Button size="sm" onClick={() => setAttachEphemeralModalOpen(true)}>
-                Attach ephemeral IP
-              </Button>
-            )}
+            <Button
+              size="sm"
+              onClick={() => setAttachEphemeralModalOpen(true)}
+              disabled={!!ephemeralDisabledReason}
+              disabledReason={ephemeralDisabledReason}
+            >
+              Attach ephemeral IP
+            </Button>
             <Button
               size="sm"
               onClick={() => setAttachFloatingModalOpen(true)}

test/e2e/instance-networking.e2e.ts

@@ -118,8 +118,8 @@ test('Instance networking tab — Detach / Attach Ephemeral IPs', async ({ page
   // We start out with an ephemeral IP attached
   await expect(ephemeralCell).toBeVisible()
 
-  // The 'Attach ephemeral IP' button should be hidden when there is still an existing ephemeral IP
-  await expect(attachEphemeralIpButton).toBeHidden()
+  // The 'Attach ephemeral IP' button should be disabled when there is already an ephemeral IP
+  await expect(attachEphemeralIpButton).toBeDisabled()
 
   // Detach the existing ephemeral IP
   await clickRowAction(page, 'ephemeral', 'Detach')
@@ -146,8 +146,8 @@ test('Instance networking tab — Detach / Attach Ephemeral IPs', async ({ page
     'IP pool': 'ip-pool-1',
   })
 
-  // The 'Attach ephemeral IP' button should be hidden after attaching an ephemeral IP
-  await expect(attachEphemeralIpButton).toBeHidden()
+  // The 'Attach ephemeral IP' button should be disabled after attaching an ephemeral IP
+  await expect(attachEphemeralIpButton).toBeDisabled()
 
   // Detach and test with explicit pool selection
   await clickRowAction(page, 'ephemeral', 'Detach')
@@ -168,8 +168,8 @@ test('Instance networking tab — Detach / Attach Ephemeral IPs', async ({ page
     'IP pool': 'ip-pool-2',
   })
 
-  // The 'Attach ephemeral IP' button should be hidden after attaching an ephemeral IP
-  await expect(attachEphemeralIpButton).toBeHidden()
+  // The 'Attach ephemeral IP' button should be disabled after attaching an ephemeral IP
+  await expect(attachEphemeralIpButton).toBeDisabled()
 })
 
 test('Instance networking tab — floating IPs', async ({ page }) => {