From 6162db5e1fa9aa23a30a404f986669dff18b06fe Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 19 Apr 2024 12:07:01 -0700
Subject: [PATCH 1/4] make all external IPs copyable

---
 app/components/ExternalIps.tsx                | 34 ++++++-------------
 .../instances/instance/InstancePage.tsx       |  2 +-
 2 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/app/components/ExternalIps.tsx b/app/components/ExternalIps.tsx
index ffb220337e..c4f7db98f4 100644
--- a/app/components/ExternalIps.tsx
+++ b/app/components/ExternalIps.tsx
@@ -22,30 +22,18 @@ export function ExternalIps({ project, instance }: InstanceSelector) {
   if (isPending) return <SkeletonCell />
 
   const ips = data?.items
-    ? intersperse(
-        data.items.map((eip) => <IpLink ip={eip.ip} key={eip.ip} />),
-        <span className="text-quinary"> / </span>
-      )
-    : undefined
-
+  if (!ips || ips.length === 0) return <EmptyCell />
   return (
-    <div className="flex items-center gap-1 text-secondary">
-      {ips && ips.length > 0 ? ips : <EmptyCell />}
-      {/* If there's exactly one IP here, render a copy to clipboard button */}
-      {data?.items.length === 1 && <CopyToClipboard text={data.items[0].ip} />}
+    <div className="flex items-center gap-1">
+      {intersperse(
+        ips.map((eip) => (
+          <span className="flex items-center" key={eip.ip}>
+            {eip.ip}
+            <CopyToClipboard text={eip.ip} />
+          </span>
+        )),
+        <span className="text-quinary"> / </span>
+      )}
     </div>
   )
 }
-
-function IpLink({ ip }: { ip: string }) {
-  return (
-    <a
-      className="link-with-underline text-sans-semi-md"
-      href={`https://${ip}`}
-      target="_blank"
-      rel="noreferrer"
-    >
-      {ip}
-    </a>
-  )
-}
diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index a520fe06f9..ddd2754ab7 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -190,7 +190,7 @@ export function InstancePage() {
               {instance.id}
             </span>
           </PropertiesTable.Row>
-          <PropertiesTable.Row label="external IP">
+          <PropertiesTable.Row label="external IPs">
             {<ExternalIps {...instanceSelector} />}
           </PropertiesTable.Row>
         </PropertiesTable>

From 1618926551412e787c452c84f57af1757010cd48 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 19 Apr 2024 12:25:32 -0700
Subject: [PATCH 2/4] Update test

---
 test/e2e/instance-networking.e2e.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/instance-networking.e2e.ts b/test/e2e/instance-networking.e2e.ts
index 2810982964..d93f420c04 100644
--- a/test/e2e/instance-networking.e2e.ts
+++ b/test/e2e/instance-networking.e2e.ts
@@ -20,7 +20,7 @@ test('Instance networking tab — NIC table', async ({ page }) => {
 
   // links to VPC and external IPs appear in table
   await expect(page.getByRole('link', { name: 'mock-vpc' })).toBeVisible()
-  await expect(page.getByRole('link', { name: '123.4.56.0' })).toBeVisible()
+  await expect(page.getByText('123.4.56.0')).toBeVisible()
 
   // Instance networking tab
   await page.click('role=tab[name="Networking"]')

From 7db4f0db3aba1ef66f76de7f212a68fd923f3fa5 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 19 Apr 2024 12:37:18 -0700
Subject: [PATCH 3/4] keep IPs as links

---
 app/components/ExternalIps.tsx      | 9 ++++++++-
 test/e2e/instance-networking.e2e.ts | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/components/ExternalIps.tsx b/app/components/ExternalIps.tsx
index c4f7db98f4..9048d64ae9 100644
--- a/app/components/ExternalIps.tsx
+++ b/app/components/ExternalIps.tsx
@@ -28,7 +28,14 @@ export function ExternalIps({ project, instance }: InstanceSelector) {
       {intersperse(
         ips.map((eip) => (
           <span className="flex items-center" key={eip.ip}>
-            {eip.ip}
+            <a
+              className="link-with-underline text-sans-semi-md"
+              href={`https://${eip.ip}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {eip.ip}
+            </a>
             <CopyToClipboard text={eip.ip} />
           </span>
         )),
diff --git a/test/e2e/instance-networking.e2e.ts b/test/e2e/instance-networking.e2e.ts
index d93f420c04..2810982964 100644
--- a/test/e2e/instance-networking.e2e.ts
+++ b/test/e2e/instance-networking.e2e.ts
@@ -20,7 +20,7 @@ test('Instance networking tab — NIC table', async ({ page }) => {
 
   // links to VPC and external IPs appear in table
   await expect(page.getByRole('link', { name: 'mock-vpc' })).toBeVisible()
-  await expect(page.getByText('123.4.56.0')).toBeVisible()
+  await expect(page.getByRole('link', { name: '123.4.56.0' })).toBeVisible()
 
   // Instance networking tab
   await page.click('role=tab[name="Networking"]')

From 5ec256a5e45d81612c91e0be463617db8a1d13fb Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Mon, 22 Apr 2024 14:41:05 -0700
Subject: [PATCH 4/4] add space between IP and copy icon

---
 app/components/ExternalIps.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/ExternalIps.tsx b/app/components/ExternalIps.tsx
index 9048d64ae9..dbf3cd7bb8 100644
--- a/app/components/ExternalIps.tsx
+++ b/app/components/ExternalIps.tsx
@@ -27,7 +27,7 @@ export function ExternalIps({ project, instance }: InstanceSelector) {
     <div className="flex items-center gap-1">
       {intersperse(
         ips.map((eip) => (
-          <span className="flex items-center" key={eip.ip}>
+          <span className="flex items-center gap-1" key={eip.ip}>
             <a
               className="link-with-underline text-sans-semi-md"
               href={`https://${eip.ip}`}