feat(s3): add a copy button for the bucket name

packages/frontend/src/components/StorageObjectBrowser.test.tsx

@@ -99,6 +99,19 @@ test('shows an object extension instead of a generic object type', async () => {
     expect(await screen.findByText('JSON file')).toBeInTheDocument()
 })
 
+test('offers a copy action for the AWS bucket name', async () => {
+    apiMocks.listStorageObjects.mockResolvedValue({prefix: '', objects: []})
+    const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}})
+
+    render(
+        <QueryClientProvider client={queryClient}>
+            <StorageObjectBrowser cloud="aws" resource={bucket} runtimeReachable capabilities={[]} onSelectObject={() => {}}/>
+        </QueryClientProvider>,
+    )
+
+    expect(await screen.findByRole('button', {name: 'Copy Bucket name'})).toBeInTheDocument()
+})
+
 test('opens the object action with copy selected', async () => {
     apiMocks.listStorageObjects.mockResolvedValue({prefix: '', objects: [{
         key: 'orders/order.json', name: 'order.json', type: 'object', size: 10, lastModified: null, metadata: {},

packages/frontend/src/components/StorageObjectBrowser.tsx

@@ -17,6 +17,7 @@ import type {CapabilitySchema, ObjectActionName} from '@/types/schema'
 import {formatBytes, objectIconKind, objectPreviewKind} from '@/lib/format'
 import {ImagePreviewModal} from '@/components/ImagePreviewModal'
 import {ObjectThumbnail} from '@/components/ObjectThumbnail'
+import {CopyValueButton} from '@/components/CopyValueButton'
 
 interface StorageObjectBrowserProps {
     cloud: CloudProvider
@@ -268,7 +269,7 @@ export function StorageObjectBrowser({cloud, resource, capabilities = [], runtim
             <div className="object-browser-header">
                 <div>
                     <p className="eyebrow">Objects</p>
-                    <h3>{resource.name}</h3>
+                    <h3>{cloud === 'aws' ? <span className="copy-value">{resource.name}<CopyValueButton value={resource.name} label="Bucket name"/></span> : resource.name}</h3>
                     <div className="object-browser-subtitle">
                         <ObjectBreadcrumb prefix={prefix} onNavigate={navigate}/>
                         <span>{totalFolders} folders, {totalFiles} {objectLabel}</span>