Simplify the experience to connect to DockerHub and Quay.IO

slemeur commented 2 years ago

Is your enhancement related to a problem? Please describe

Along with the issue #291, I think it would be greatly appreciate if we could prefill the form to connect to the most known registries: DockerHub and Quay.IO

Describe the solution you'd like

In the list of Registry, until the use has not configured his DockerHub account or Quay.IO account, it would be nice to display two buttons: "Connect to DockerHub" "Connect to Quay.IO"

When clicked, the popup will pre-fill the server URL and provide information about where to go to get the credentials (in case of Quay.IO it can be confusing) or even create an account.

Describe alternatives you've considered

No response

Additional context

No response

slemeur commented 2 years ago

duplicates https://github.com/containers/podman-desktop/issues/297

gbengaoti commented 2 years ago

I made a sketch of the registry page in FIGJAM

https://www.figma.com/file/CdKWIUON4qH0LsWXQ1wSPa/registry-page

mairin commented 2 years ago

By default, this is what registries are configured on Fedora podman:

"registry.fedoraproject.org", "registry.access.redhat.com", "docker.io", "quay.io"

Some other configuration that is possible from /etc/containers/registries.conf:

[specified port in registry url]
unencrypted http and tls with untrusted certs allowed [by default not]
short-name-mode (?)
mirrors

mairin commented 2 years ago

@gbengaoti can you grant me access to that? I can't view it :( duffy@redhat.com

gbengaoti commented 2 years ago

@gbengaoti can you grant me access to that? I can't view it :( duffy@redhat.com

Sorry about that, its done now

slemeur commented 2 years ago

Is it possible to post images of the mockups in the issue? or provide public access?

gbengaoti commented 2 years ago

Public access is granted

benoitf commented 2 years ago

the links seem to be in an invalid format

raw data is [https://www.figma.com/file/CdKWIUON4qH0LsWXQ1wSPa/registry-page?node-id=0%3A1](url)

so url should contain the link

or easier, just use plain text https://www.figma.com/file/CdKWIUON4qH0LsWXQ1wSPa/registry-page?node-id=0%3A1

gbengaoti commented 2 years ago

https://www.figma.com/file/CdKWIUON4qH0LsWXQ1wSPa/registry-page

mairin commented 2 years ago

Unfortunately I had worked on this before I realized @gbengaoti was working on it, so here is a click thru prototype of what I have: https://design.penpot.app/#/view/27a80d20-172f-11ed-817f-f940e3befd53?page-id=335c1d50-172f-11ed-be1e-eb241e2719ab&section=interactions&index=0&share-id=08a58470-17e8-11ed-817f-f940e3befd53

I used the model for popping up settings as a dismisable full screen window that @gbengaoti came up with, I think this is a good way forward, but it also means I think minimizing or if possible removing any modal dialogs from the settings area since you'd then have 3 layers of window at that point and that might be a bit confusing for users. I flipped the color scheme between the nav bar and main content area between the first main window (in the mockup it shows the container list) and the settings dialog.

To run the prototype, you can start by clicking on "Settings" in the lower left.... then click "Add registry".... click the add button twice.... click the vertical "..." hover and click edit to edit it, hover and click remove to remove it.

I didn't implement edit or remove for the default ones (docker/quay)... but I think they'd work similarly to the example fedora one I did. There's some lingering questions we can talk about eg:

port number entry (just let the user type :9000 or whatever at the end, give that in the example so it doesn't require an extra field?)
various settings in the registries.conf file that I don't know if we want/need to support? (eg the allow insecure connections or not, shortname mode, mirrors)
i think the config file searches the registries in order they are listed in the conf file (is that right?) if so, do we want to allow for an ordering / reordering of the registries listed here?
[podman desktop specific] - the cards in the registry area right now indicate which container engine they correspond to. how do we want to handle this? do we want each registry entry here to have a drop down checklist of the various enabled container engines and let users check off which engines they want which registries to be configured for?

Also :)

I'm guessing we might have to bake in the icons for the default repos and just not have icons for the others.... assuming there's no spec for providing a registry icon? (Maybe there is?) A cheap hack might be to query the domain for a favicon.ico?

mairin commented 2 years ago

Note I quickly updated the area so both the quay and dockerhub configuration buttons now work: https://design.penpot.app/#/view/27a80d20-172f-11ed-817f-f940e3befd53?page-id=335c1d50-172f-11ed-be1e-eb241e2719ab&section=interactions&index=0&share-id=08a58470-17e8-11ed-817f-f940e3befd53

I am thinking since these work by default and simply need the credentials added, maybe the "Activate" button needs a different label. "Login" maybe?

gbengaoti commented 2 years ago

I made changes to the registry page, the registries are now displayed in a listwise format. Please have a look and let us know what you think.

https://design.penpot.app/#/view/50915a10-f6fb-11ec-a4ab-f940e3befd53?page-id=e1cc9ab0-1e21-11ed-9c39-c1430b988e69&section=interactions&index=0&share-id=27354cc0-1e43-11ed-817f-f940e3befd53

gbengaoti commented 2 years ago

The prototype has been updated to take on the comments from the last meeting:

https://design.penpot.app/#/view/50915a10-f6fb-11ec-a4ab-f940e3befd53?page-id=52951830-220f-11ed-8bea-afed5c5e38b5&section=interactions&index=0&share-id=cfb0dc30-23c4-11ed-817f-f940e3befd53

The name "site" has been changed to "registry location", and separation lines have been included to set the registries apart and keep the design consistent with the container list page on the desktop. A button has also been added so that credentials can be added quickly

gbengaoti commented 2 years ago

In the SWAT call today, the team wanted to have the users login and add credentials in one click. They also wanted to have fewer buttons on the page.

benoitf commented 2 years ago

it seems correct link is https://design.penpot.app/#/view/50915a10-f6fb-11ec-a4ab-f940e3befd53?page-id=52951830-220f-11ed-8bea-afed5c5e38b5&section=interactions&index=4&share-id=cfb0dc30-23c4-11ed-817f-f940e3befd53 (else I'm not landing on the last page ?)

gbengaoti commented 2 years ago

Neither is wrong, its a click-through prototype to show how the screens will interact with each other, so if you click "settings", it will take you to the page for the link you posted

gbengaoti commented 2 years ago

I created a different design that uses a drop-down to add a new registry. This design exposes fewer buttons on the screen and the option to add a new registry can be collapsed by the user.

https://design.penpot.app/#/view/50915a10-f6fb-11ec-a4ab-f940e3befd53?page-id=4d457dd0-23c6-11ed-8bea-afed5c5e38b5&section=interactions&index=0&share-id=5dce8d10-2473-11ed-9977-c67f7655c7b3

To access the registry page: Click on Settings->

I would like feedback on whether this design resonates better with you. And possible issues/improvements on the design.

gbengaoti commented 2 years ago

For the Login feature, I understood that the credentials added would be used by the podman desktop when a user tries to push or pull from a registry. Do I understand this correctly?

If this is the case, one idea could be to keep the credentials once they are entered and validate/log in only when the podman desktop uses them. That way if more information is needed like an access token, the user can be required to provide them.

Also if the username/password is wrong, the user can be informed and be asked to input the correct password/username. This could then be updated on the credential list much like the "save password" feature on web browsers.

Do you think this sort of design is feasible?

benoitf commented 2 years ago

For the Login feature, I understood that the credentials added would be used by the podman desktop when a user tries to push or pull from a registry. Do I understand this correctly?

it's used by the engine, podman or docker to pull or push images. Usually, we don't need credentials to pull public images. But for private repositories, yes. And for pushing, usually yes we need authentication. (But for example for the local registry we don't)

If this is the case, one idea could be to keep the credentials once they are entered and validate/log in only when the podman desktop uses them. That way if more information is needed like an access token, the user can be required to provide them.

Users can use CLI to pull images (just setup credentials using the UI, that's all), so it needs to be in the global settings.

Also if the username/password is wrong, the user can be informed and be asked to input the correct password/username. This could then be updated on the credential list much like the "save password" feature on web browsers.

When entering the credentials, we can check if the credentials are valid, @vzhukovs is working on that https://github.com/containers/podman-desktop/issues/292

gbengaoti commented 2 years ago

I have updated the prototype with feedback from the team and my discussion with Mairin.

https://design.penpot.app/#/view/50915a10-f6fb-11ec-a4ab-f940e3befd53?page-id=fa30a160-2910-11ed-844f-610a594f3eb5&section=interactions&index=0&share-id=f122b8e0-293a-11ed-b8ab-cf2300df1f4f

It page includes less buttons, registries are added inline, and the users receive feedback on the registries that are added as to whether they are the right format or not

gbengaoti commented 2 years ago

I have the prototype with the following changes:

The hamburger menu is now located on every row
There are now logout and remove options for every row
Users are now asked to Login instead of Adding a credential

https://design.penpot.app/#/view/50915a10-f6fb-11ec-a4ab-f940e3befd53?page-id=fa30a160-2910-11ed-844f-610a594f3eb5&section=interactions&index=0&share-id=f122b8e0-293a-11ed-b8ab-cf2300df1f4f

gbengaoti commented 1 year ago

I received feedback from the team about the above design

the "table" rows will all have the same size and cannot be individually changed dynamically
We need a way to show a login error
The text in the button "add" should be centred
When adding a username/password the buttons should say "login" not "add"

benoitf commented 1 year ago

if we could have a way to skip the validation of the login/password as well (sometimes we may not be able to validate for bug or unknown reason so idea is to be able to bypass the check)

gbengaoti commented 1 year ago

In the beginning, I assumed that this is what you wanted so that the user can add the credentials but it's not validated until they try to push/pull with the credentials, that way they get the response in detail in CLI or similar. That's why I had used Add and not Login

benoitf commented 1 year ago

well here it's to provide the credentials so they can be used by podman (or other container engines) as 'this' but no validation from Podman Desktop. This different than a "unauthenticated" registry where there are no credentials.

Authenticated with validation, Authenticated (but will wait that the container engine use the credentials) and then Unauthenticated

gbengaoti commented 1 year ago

So if I understand correctly, you want to keep it as login feature/button and try validating the user upon entry of username/password.

In the case where validation is not possible/unsuccessful, you want the credentials to be saved but to have a label such as "not validated".

And then you want to have the third case (which already exists), where the user can add a registry but no credentials?

benoitf commented 1 year ago

correct 👍

gbengaoti commented 1 year ago

okay I will take note of that

gbengaoti commented 1 year ago

Gitlab for this issue - https://gitlab.com/fedora/design/community-design-team/issues/-/issues/8

slemeur commented 1 year ago

This has been solved https://github.com/containers/podman-desktop/pull/1201

containers / podman-desktop