Adds copy button on instance external IP

app/pages/project/instances/instance/InstancePage.tsx

@@ -144,9 +144,7 @@ export function InstancePage() {
             </span>
           </PropertiesTable.Row>
           <PropertiesTable.Row label="external IP">
-            <span className="text-secondary">
-              {ExternalIpsFromInstanceName({ value: true })}
-            </span>
+            {ExternalIpsFromInstanceName({ value: true })}
           </PropertiesTable.Row>
         </PropertiesTable>
       </PropertiesTable.Group>

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

@@ -21,6 +21,7 @@ import { useQueryTable, type MenuAction } from '@oxide/table'
 import {
   Badge,
   Button,
+  CopyToClipboard,
   EmptyMessage,
   Networking24Icon,
   Spinner,
@@ -101,7 +102,13 @@ export function ExternalIpsFromInstanceName({ value: primary }: { value: boolean
     </Fragment>
   ))
 
-  return <span className="text-secondary">{primary ? ips : <>&mdash;</>}</span>
+  return (
+    <div className="flex items-center gap-1 text-secondary">
+      {primary ? ips : <>&mdash;</>}
+      {/* If there's exactly one IP here, render a copy to clipboard button */}
+      {data?.items.length === 1 && <CopyToClipboard text={data.items[0].ip} />}
+    </div>
+  )
 }
 
 NetworkingTab.loader = async ({ params }: LoaderFunctionArgs) => {

libs/ui/lib/copy-to-clipboard/CopyToClipboard.tsx

@@ -6,9 +6,11 @@
  * Copyright Oxide Computer Company
  */
 
+import { animated, config, useTransition } from '@react-spring/web'
+import cn from 'classnames'
 import { useState } from 'react'
 
-import { Clipboard16Icon, Success12Icon, useTimeout } from '@oxide/ui'
+import { Copy12Icon, Success12Icon, useTimeout } from '@oxide/ui'
 
 export const CopyToClipboard = ({
   ariaLabel = 'Click to copy this text',
@@ -27,18 +29,35 @@ export const CopyToClipboard = ({
     })
   }
 
+  const transitions = useTransition(hasCopied, {
+    from: { opacity: 0, transform: 'scale(0.8)' },
+    enter: { opacity: 1, transform: 'scale(1)' },
+    leave: { opacity: 0, transform: 'scale(0.8)' },
+    config: config.stiff,
+    trail: 100,
+    initial: null,
+  })
+
   return (
     <button
-      className="text-tertiary hover:text-accent-secondary"
+      className={cn(
+        'relative h-5 w-5 rounded',
+        hasCopied
+          ? 'text-accent bg-accent-secondary'
+          : 'text-quaternary hover:text-secondary hover:bg-hover'
+      )}
       onClick={handleCopy}
       type="button"
       aria-label={hasCopied ? 'Copied' : ariaLabel}
     >
-      {hasCopied ? (
-        <Success12Icon className="text-accent-secondary" />
-      ) : (
-        <Clipboard16Icon className="h-3 w-3" />
-      )}
+      {transitions((styles, item) => (
+        <animated.div
+          style={styles}
+          className="absolute inset-0 flex items-center justify-center"
+        >
+          {item ? <Success12Icon /> : <Copy12Icon />}
+        </animated.div>
+      ))}
     </button>
   )
 }

package.json

@@ -33,7 +33,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.4",
     "@headlessui/react": "^1.7.17",
-    "@oxide/design-system": "^1.2.9",
+    "@oxide/design-system": "^1.2.10",
     "@oxide/identicon": "0.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",