make all external IPs in header copyable (#2170)

app/components/ExternalIps.tsx

@@ -22,30 +22,25 @@ 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 gap-1" key={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>
+        )),
+        <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>
-  )
-}

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>