Revamp Copy Pull Command

[bupd]

Overview

1 click > 3 clicks

UX should prioritize simplicity and clarity. By adding a copy button above and in the datagrid, similar to DockerHub and other registries, users can quickly copy exactly what they need with clear feedback, eliminating unnecessary clicks and improving overall UX.

After reviewing the discussion (#21284), the consensus is clear:

• 90% support for having the copy button near the digest, and copy field above the table.

This design reduces friction and enhances usability.

Live DEMO

copy-pull-cmd.mp4

To-do:

• Add custom keyword for pull command selection to allow users to enter their own prefix for pull command.
• Align copy icon in artifact tag list page

Note

This design is based on thorough user feedback. As users mentioned,

"We often need to copy the digest, remove it from the command, and use the version tag to pull the image. A copy button above the table and in the table, would be helpful for us."

Before

After (Updated copy pull command Flow)

artifact list page

tag list page

copy digest

copy tag

Added Preference Settings

updated Navbar

Added preferences section

Added multiple Pull Command Prefixes

closeup tooltip

Add Option to add Custom Pull Command Prefix

Summary of Changes Made

• Added a new User Preferences section under User Settings.
• Moved Language Selection and Datetime Rendering (ISO 8601) to the new User Preferences section.
• Simplified "Copy Pull Command" button.
• Added an copyable field with a copy button above the table, similar to Docker's pull command format (docker pull project/repo).
• Included additional container runtimes (nerdctl, ctr, crictl) alongside docker and podman.
• Made Config options clear and easy to use.
• Placed a Copy Button near the tag and digest in the table.

These changes revamp the user experience, reducing clicks and improving the flow for copying pull commands.

Issue being fixed

Fixes #21146

Please indicate you've done the following:

• Well Written Title and Summary of the PR
• Label the PR as needed. "release-note/ignore-for-release, release-note/new-feature, release-note/update, release-note/enhancement, release-note/community, release-note/breaking-change, release-note/docs, release-note/infra, release-note/deprecation"
• Accepted the DCO. Commits without the DCO will delay acceptance.
• Made sure tests are passing and test coverage is added if needed.
• Considered the docs impact and opened a new docs issue or PR with docs changes if needed in website repository.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 46.08%. Comparing base (c8c11b4) to head (45a4d25).
Report is 378 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21155      +/-   ##
==========================================
+ Coverage   45.36%   46.08%   +0.71%     
==========================================
  Files         244      248       +4     
  Lines       13333    13969     +636     
  Branches     2719     2886     +167     
==========================================
+ Hits         6049     6438     +389     
- Misses       6983     7191     +208     
- Partials      301      340      +39     

Flag	Coverage Δ
unittests	46.08% <ø> (+0.71%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

see 492 files with indirect coverage changes

[Vad1mo]

Did you also implement and took into consideration the copy & paste for pull of the helm chart?

[bupd]

Yes I do.

[Vad1mo]

There is a poll going regarding some UX aspects:

Please vote if you didn't do so:
#21284

[brandonbiggs]

This is something we really want. I did just want to make a suggestion and I hope it isn't too much work. In the preferences section, can you add "apptainer" and "singularity"? Or let those be defined by something in the config so the admins can set?

As a harbor admin, I'd like to set a default container runtime based on the container tools we use for all users as well.

[Vad1mo]

This is something we really want. I did just want to make a suggestion and I hope it isn't too much work. In the preferences section, can you add "apptainer" and "singularity"? Or let those be defined by something in the config so the admins can set?

As a harbor admin, I'd like to set a default container runtime based on the container tools we use for all users as well.

This is a good idea. We will add a option in the dropdown where the user can define their prefered container runtime

[AllForNothing]

@bupd I have some comments for the UI design


Actually，this is what it looks like in early Harbor versions(that only supports Docker pull command)

[bupd]

@AllForNothing

• Adding Pull Command as a column would be too much.

• Aligned the copy button to the table in artifact tags list

[bupd]

Also @AllForNothing, I have updated the PR description.

We will not be removing the top copy field. Since its requested enhancement from the community.
Please have a look at the Poll.

Poll: #21284

Thanks

[bupd]

ready for review and merge.

[bupd]

Added Live Demo to the Description.

[bupd]

lgtm

[JonTheNiceGuy]

One final comment from me, I'd like to see a "just the container name" option in the drop down in preferences, so, for example, I work with Helm charts a lot, and I'd like to just be able to copy the name of the image harbor.example.org/project/repo:tag and not docker pull harbor.example.org/project/repo:tag. From the video, it looks like putting in a custom name just replaces the first word (docker pull with my_custom_command pull)

[Vad1mo]

One final comment from me, I'd like to see a "just the container name" option in the drop down in preferences, so, for example, I work with Helm charts a lot, and I'd like to just be able to copy the name of the image harbor.example.org/project/repo:tag and not docker pull harbor.example.org/project/repo:tag. From the video, it looks like putting in a custom name just replaces the first word (docker pull with my_custom_command pull)

I think if you add helm registry as your custom command you would get helm registry pull ... as a string in your clipboard

[JonTheNiceGuy]

I'm frequently editing raw helm templates, or adding a specific repository as a value. I'm not looking for a "helm registry pull", as again, this then means I'm copying helm registry pull harbor.example.org/project/repo:tag and then deleting helm registry pull from the start.

I do want to say, though, that I do much prefer this style that has been proposed. I'm just asking that while you're changing it, can you add my option to your list? :)