frontend: CopyableCell: Integrate copy in tables

[pallava-joshi]

Summary

This PR adds copy-to-clipboard functionality to table cells by introducing a new CopyableCell component that displays a copy button on hover. This allows users to easily copy IP addresses and other values from resource tables.

Look at IP address columns (Pod IP, Cluster IP, External IP, Internal IP, Addresses)

Related Issue

Fixes #3983

Steps to Test

Screen.Recording.2026-01-27.at.1.48.03.AM.mov

[Copilot]

Pull request overview

This PR adds hover-based copy-to-clipboard support for selected table columns by introducing a CopyableCell component and wiring it into the generic ResourceTable, then enabling it on IP/address-related columns in several resource lists.

Changes:

• Introduces a reusable CopyableCell component that shows a copy button on hover and copies the associated value to the clipboard.
• Extends ResourceTableColumn with a copyable flag and updates ResourceTableContent to wrap getValue/render output in CopyableCell when enabled.
• Enables copyable on relevant IP/address columns in Pod, Service, Node, Endpoints, and EndpointSlice list views.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
frontend/src/components/common/Resource/CopyableCell.tsx	Adds the CopyableCell component that renders cell content with a hover-only copy button and localized tooltip.
frontend/src/components/common/Resource/ResourceTable.tsx	Extends ResourceTableColumn with a copyable flag and updates cell rendering to wrap getValue/render output in CopyableCell when copying is enabled.
frontend/src/components/common/Resource/index.tsx	Re-exports CopyableCell alongside other common resource components.
frontend/src/components/service/List.tsx	Marks Service clusterIP and externalIP columns as copyable so their values can be copied from the list view.
frontend/src/components/pod/List.tsx	Marks the Pod IP column as copyable to support quick copying of pod IPs.
frontend/src/components/node/List.tsx	Marks Node internalIP and externalIP columns as copyable.
frontend/src/components/endpoints/List.tsx	Marks the Endpoints addresses column as copyable.
frontend/src/components/endpointSlices/List.tsx	Marks the EndpointSlice endpoints column as copyable.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[illume]

@pallava-joshi thanks for this.

Could you please update the commit message to be something like this?

frontend: CopyableCell: Integrate copy in tables

Also, please remove the bun.lock file. (We only support using node and npm, but if it helps you please raise a new PR to add bun.lock files to the .gitignore?)

[illume]

Thanks! 🎉

This looks good to me. I'll wait for another reviewer though. Can you please ask for someone to test or review your PR in the headlamp channel on Kubernetes slack?

[joaquimrocha]

Hey @pallava-joshi . Did you take into account the built-in copy feature for the table component we use?
https://v2.material-react-table.com/docs/guides/click-to-copy

[pallava-joshi]

The main difference I noticed is that the built-in feature makes the entire cell content a clickable button (always visible), whereas this custom implementation shows a copy icon only on hover, which I thought was a bit more subtle UX-wise. Would you prefer I switch to the built-in approach?

[illume]

How it's not showing all the time is nice.

[joaquimrocha]

Hi @pallava-joshi . I'm at an event this weekend. So I haven't been able to investigate what's the best solution. Ideally we'd try to find a way to use the built in copy if it does allow to show it only on hover. I'm surprised if there's no such option.

I'll try to look it up closer next week.

[illume]

With the latest changes the snapshot tests are failing.

npm run test -- -u

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: pallava-joshi
Once this PR has been reviewed and has the lgtm label, please assign illume for approval. For more information see the Code Review Process.

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

Details

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]

@pallava-joshi I was checking and it seems like it's possible to have your own renderer for the enableClickToCopy. Something like:

const CopyOnHoverCell = ({ value }) => {
  const [hover, setHover] = useState(false);

  const copy = () => navigator.clipboard.writeText(value);

  return (
    <div
      style={{ display: 'flex', alignItems: 'center', position: 'relative' }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <span style={{ flex: 1 }}>{value}</span>

      {hover && (
        <Tooltip title="Copy">
          <IconButton
            size="small"
            onClick={copy}
          >
            <Icon ... />
          </IconButton>
        </Tooltip>
      )}
    </div>
  );
};

But it should also work if you use a CSS approach (probably cleaner too).

I think the advantage of using the built-in feature is that likely we get less code to maintain and also we can easily choose to turn it on per table, etc.
Do you think it's worth adapting your code to use this?

[illume]

Thanks @joaquimrocha

@pallava-joshi

Note the code written there should not be copied as is... it's demo/proof of concept code.

• This should be keyboard navigable, not just usable with mouse.
• Use mui components not html ones

Maybe the built in functionality also did many iterations to handle cases like keyboard navigation gracefully. Apart from being easier to maintain going forward, I expect they have considered more and other design problems. We can also expect improvements from them going forward.

[k8s-ci-robot]

PR needs rebase.

Details

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.

[pallava-joshi]

@joaquimrocha sure, I'll dig into it.