Add copy-to-clipboard to External IPs table on networking tab (#2313)

* Add IpLink component, use on Instance page

* better import syntax

* Move location of file

* refactor, remove unneeded lines

* Make configurable so link is optional

Author: charliepark

app/components/ExternalIps.tsx

@@ -9,7 +9,7 @@
 import { useApiQuery } from '@oxide/api'
 
 import { EmptyCell, SkeletonCell } from '~/table/cells/EmptyCell'
-import { CopyToClipboard } from '~/ui/lib/CopyToClipboard'
+import { CopyableIp } from '~/ui/lib/CopyableIp'
 import { intersperse } from '~/util/array'
 
 type InstanceSelector = { project: string; instance: string }
@@ -26,19 +26,7 @@ export function ExternalIps({ project, instance }: InstanceSelector) {
   return (
     <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>
-        )),
+        ips.map((eip) => <CopyableIp ip={eip.ip} key={eip.ip} />),
         <span className="text-quinary"> / </span>
       )}
     </div>

app/pages/project/instances/instance/tabs/NetworkingTab.tsx

@@ -36,6 +36,7 @@ import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns, DescriptionCell } from '~/table/columns/common'
 import { Table } from '~/table/Table'
 import { Badge } from '~/ui/lib/Badge'
+import { CopyableIp } from '~/ui/lib/CopyableIp'
 import { CreateButton } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { TableControls, TableEmptyBox, TableTitle } from '~/ui/lib/Table'
@@ -115,7 +116,10 @@ const staticCols = [
     ),
   }),
   colHelper.accessor('description', Columns.description),
-  colHelper.accessor('ip', { header: 'Private IP' }),
+  colHelper.accessor('ip', {
+    header: 'Private IP',
+    cell: (info) => <CopyableIp ip={info.getValue()} isLinked={false} />,
+  }),
   colHelper.accessor('vpcId', {
     header: 'vpc',
     cell: (info) => <VpcNameFromId value={info.getValue()} />,
@@ -240,7 +244,9 @@ export function NetworkingTab() {
 
   const ipColHelper = createColumnHelper<ExternalIp>()
   const staticIpCols = [
-    ipColHelper.accessor('ip', {}),
+    ipColHelper.accessor('ip', {
+      cell: (info) => <CopyableIp ip={info.getValue()} />,
+    }),
     ipColHelper.accessor('kind', {
       header: () => (
         <>

app/ui/lib/CopyableIp.tsx

@@ -0,0 +1,26 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { CopyToClipboard } from '~/ui/lib/CopyToClipboard'
+
+export const CopyableIp = ({ ip, isLinked = true }: { ip: string; isLinked?: boolean }) => (
+  <span className="flex items-center gap-1">
+    {isLinked ? (
+      <a
+        className="link-with-underline text-sans-semi-md"
+        href={`https://${ip}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        {ip}
+      </a>
+    ) : (
+      ip
+    )}
+    <CopyToClipboard text={ip} />
+  </span>
+)