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.

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.24%. Comparing base (c8c11b4) to head (c0ffeec).
Report is 372 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21155      +/-   ##
==========================================
+ Coverage   45.36%   46.24%   +0.87%     
==========================================
  Files         244      248       +4     
  Lines       13333    13969     +636     
  Branches     2719     2886     +167     
==========================================
+ Hits         6049     6460     +411     
- Misses       6983     7168     +185     
- Partials      301      341      +40     

Flag	Coverage Δ
unittests	46.24% <ø> (+0.87%)	⬆️

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

see 492 files with indirect coverage changes

[bupd]

updated screenshots in description

[bupd]

updated PR description

[bupd]

ready for review

[bupd]

.

[bupd]

We can certainly discuss this from different angles, but at the end of the day, UX should always prioritize simplicity and clarity.

1 click > 3 clicks.

Our focus should always be on what's best for the user. The UI should be intuitive, easy to understand, and foolproof, not a guessing game.

For example, having a copy button above the datagrid, similar to Docker Hub, makes it much easier for users to copy exactly what they need, with clear feedback. This saves them unnecessary clicks and results in better UX overall.

Thanks for considering this perspective!

[bupd]

Thanks for the feedback.

[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.