Add copy button to table cell values for IPs and identifiers in detail and list views

[Copilot]

Overview

This PR adds a copy button feature to table cells that contain values users commonly need to copy, such as IP addresses, resource names, and other identifiers. The copy button appears on hover, providing quick access without cluttering the UI in both detail views and list views.

Problem

Users frequently need to copy values from tables (like IP addresses, resource IDs, etc.) to use in other tools or commands. Previously, users had to manually select and copy text, which can be cumbersome especially for long strings or when precision is important.

Solution

New Components

CopyLabel Component

• A reusable wrapper component that displays content with a copy button that appears on hover
• Uses smooth opacity transitions for better UX
• Reuses the existing CopyButton component with icon style
• Supports cases where displayed content differs from copied text

NameValueTable Enhancement

• Added optional copyValue property to NameValueTableRow interface
• When copyValue is provided, the value is automatically wrapped with CopyLabel
• Fully backward compatible - existing rows without copyValue work as before

Values with Copy Buttons

Detail Views:

• Services: Cluster IP and External IP addresses
• Endpoints: IP addresses in address tables
• EndpointSlices: Address lists
• Nodes: All address types (InternalIP, ExternalIP, Hostname, etc.)
• Pods: Host IPs and Pod IPs

List Views:

• Service list: Cluster IP and External IP columns
• Pod list: IP column
• Node list: Internal IP and External IP columns
• Endpoint list: Addresses column (for single addresses)
• EndpointSlice list: Endpoint addresses (for single addresses)

Usage

Adding a copy button to new values is straightforward:

For NameValueTable rows:

{
  name: 'IP Address',
  value: '192.168.1.1',
  copyValue: '192.168.1.1', // Just add this property
}

For ResourceListView columns:

{
  id: 'clusterIP',
  label: t('Cluster IP'),
  getValue: service => service.spec.clusterIP,
  render: service => {
    const clusterIP = service.spec.clusterIP;
    return clusterIP ? <CopyLabel textToCopy={clusterIP}>{clusterIP}</CopyLabel> : null;
  },
}

Screenshots

CopyLabel Component in Storybook

The component shows the value with a copy button that appears on hover.

NameValueTable with Copyable Values

Demonstrates how IP addresses and pod names have copy buttons while regular values don't.

Service Details Page

The Service details page now shows copy buttons for Cluster IP and External IP when hovering over those values.

Pod List View with Copy Buttons

The Pod list view shows copy buttons on hover for IP addresses in the IP column, making it easy to copy values directly from the table.

Testing

• ✅ All 986 tests pass
• ✅ Added Storybook stories for new components
• ✅ Updated all affected snapshots
• ✅ Linting passes with no errors
• ✅ Build completes successfully

Design Decisions

1. On-hover behavior: The copy button only appears on hover to keep the UI clean and uncluttered
2. Selective implementation: Only added copy buttons to values that are commonly copied (IPs, names, IDs)
3. List vs Detail consistency: Copy buttons work the same way in both list and detail views
4. Multiple addresses: When multiple addresses are shown in lists, they're displayed without individual copy buttons to avoid visual clutter
5. Easy extensibility: Simple API makes it easy to add copy functionality to future values
6. Backward compatibility: No breaking changes - existing tables continue to work as before

Fixes the issue by providing users with a quick, reliable way to copy important values from both detail views and list views without manual text selection.

[!WARNING]

storybook.js.org

• Triggering command: node /home/REDACTED/work/headlamp/headlamp/frontend/node_modules/.bin/storybook dev -p 6006 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Fixes kubernetes-sigs/headlamp#3983

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add a button to quickly copy values from table cells where it matters</issue_title> <issue_description>## Is your feature request related to a problem? Please describe the impact that the lack of the feature requested is creating.

Some tables shows values that the user may wish to copy, like the ID/name of the resource, IPs, etc. Recently while copying an IP I felt like we should have a quick way to copy values like this. There is some work to be done in order to identify which values make sense to be copied.

Describe the solution you'd like

I believe that the values that are likely to be copied by the user should have a copy button overlaying them on hover.

What users will benefit from this feature?

Everyone who uses Headlamp to visualize resources and will use the data visualized in other tools (like connecting to an IP they have seen in a table). </issue_description>

<agent_instructions>* Make sure you only add the copy button to values that make sense.

• Make sure it's easy to add a copy button to future table values
• Make sure you add atomic commits
• Make sure the snapshots are updated</agent_instructions>

Comments on the Issue (you are @copilot in this section)

Fixes kubernetes-sigs/headlamp#3983

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Copilot Once this PR has been reviewed and has the lgtm label, please ask for approval from joaquimrocha. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment Approvers can cancel approval by writing /approve cancel in a comment

[joaquimrocha]

It's getting there. Can we also have a copy button in the list views (tables) when the value is of interest? cc/ @copilot

[joaquimrocha]

@copilot Can you iterate after my previous message?

[Copilot]

It's getting there. Can we also have a copy button in the list views (tables) when the value is of interest? cc/ @copilot

I've added copy buttons to the list views! The changes are in commit fd523b6.

Copy buttons now appear on hover for IP addresses in:

• Service list: Cluster IP and External IP columns
• Pod list: IP column
• Node list: Internal IP and External IP columns
• Endpoint list: Addresses column (for single addresses)
• EndpointSlice list: Endpoint addresses (for single addresses)

Screenshots

Pod List View with Copy Buttons:

The copy button appears when hovering over IP addresses in the list, making it easy to copy values directly from the table without opening the detail view.

[!WARNING]

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• storybook.js.org
  • Triggering command: node /home/REDACTED/work/headlamp/headlamp/frontend/node_modules/.bin/storybook dev -p 6006 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[k8s-ci-robot]

PR needs rebase.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.