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:

• 70% support having the copy button near the digest, tag, and a 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.

Note

This design is based on thorough user feedback. As one user 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

Added Preference Settings

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.21%. Comparing base (c8c11b4) to head (9d9ce81).
Report is 352 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21155      +/-   ##
==========================================
+ Coverage   45.36%   46.21%   +0.84%     
==========================================
  Files         244      248       +4     
  Lines       13333    13945     +612     
  Branches     2719     2880     +161     
==========================================
+ Hits         6049     6445     +396     
- Misses       6983     7157     +174     
- Partials      301      343      +42     

Flag	Coverage Δ
unittests	46.21% <ø> (+0.84%)	⬆️

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

see 492 files with indirect coverage changes

[bupd]

Screenshot

[bupd]

Screenshots for Reference

Overall View

Change preference settings

Working GIFs

Copying pull command for Images

Copying pull command for Tags

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

Removed copy field present on top of the datagrid as discussed in community meeting.

Previously (copy field included)

After (copy field removed on top of the table)

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