Search images in registry in Image Pull form

[feloy]

Signed-off-by: Philippe Martin [email protected]

What does this PR do?

Search images in registry in Image Pull form

Screenshot / video of UI

https://github.com/containers/podman-desktop/assets/9973512/afe60c56-1baf-4a3d-9cf6-bcf60c3d995e

What issues does this PR fix or reference?

Fixes #971

How to test this PR?

Go to the Images list page, press Pull button, then search images (see video)

• [ ] Tests are covering the bug fix or the new feature

[benoitf]

it won't be a required changes but IMHO it will great to have search as long as we type the values and keep the button being 'pull'

so you can just use what you type but also when you're typing something you see the suggestion and you can use it

(same pattern as google search)

[deboer-tim]

Love the capability, but same comments as @benoitf about the UI. Maybe separate PR for renderer so we can merge everything else while we iterate?

Personally I'd like it to automatically search if I pause for a moment, and beneath the input it either confirms you've typed a valid name or shows a list of matches you can click on. This pattern is probably general/reusable enough that we will need an 'AssistedInput' at some point.

I suppose that means I'd prefer keeping it a very simple UI here, maybe somewhere else we add a more explore/browse UI using the same API.

[feloy]

I was not sure of the UX for the search, so I have done the simplest (for me) to be able to start the conversation about it (I have added a topic for next UX call).

I have created a PR #7930 for the backend part, so we can merge the backend in the meantime

[feloy]

I am seeing some styling issues and odd behaviour:

• No bottom border or rounded outline to start, doesn't match our Input or other controls / not clear to click on it.
• When I click on the input the popup area appears immediately.
• Again, styling doesn't match existing popups, looks more like a disabled button.
• If I start to type and then click outside of the input, it deletes whatever I've typed.

Screen.Recording.2024-07-15.at.2.21.45.PM.mov

I have made some changes to the styling.

There is still a problem with the initial focus. The focus is initially set for the select, but is removed after a second or so. I opened an issue https://github.com/rob-balfre/svelte-select/issues/698

[feloy]

I'm still finding the behaviour a bit odd, e.g.:

• if you type docker.io/mongo it still says 'Please enter a value'. You have to pick that option from the list before the warning goes away.
• Picking an option adds the stars to the entry field like [★10306] ✔.
• Once you select an option, you can't edit. e.g. if you accidentally select the wrong one you need to start typing or click X and start over, which isn't obvious.

I don't know if I'm setting the bar too high, or this will be a long cycle of trying to force it to have the expected look/behaviour. 🫤

For most of these points, this is the expected behaviour of the component. If we try to change this behaviour, the result can be very hacky. If we want to have an opinionated behaviour for this component, is seems that it will be easier to rewrite it. WDYT?

[feloy]

The styling is getting better. It still doesn't feel like one of our other controls (mostly the padding difference) but is closer. Nit - selection outline on the X is blue.

I changed the styling, to adjust the height of the input, and the selection outline.

[feloy]

When trying to fix e2e tests, I realize that the user cannot select a specific tag of an image...

[feloy]

The search endpoint of some registries do not work as expected, for example quay.io which is not able to find an image by giving its org+repo (here org=podman-desktop-demo and repo=podify-demo-backend):

$ podman search quay.io/podify-demo-backend
NAME                                             DESCRIPTION
quay.io/podman-desktop-demo/podify-demo-backend  
$

but:

$ podman search quay.io/podman-desktop-demo/podify-demo-backend
$

The same search works on docker.io:

$ podman search docker.io/feloy/hello-app 
NAME                       DESCRIPTION
docker.io/feloy/hello-app  
$

[benoitf]

is that the video of the PR description is still accurate ?

[feloy]

is that the video of the PR description is still accurate ?

No, not with the latest commit. I just updated it

[feloy]

This PR is ready for review again. I have made changes to:

• make it possible to select a specific tag for the image (tags list fetched from the registry)
• make it possible to pull an image not discoverable (for example from ghcr.io) by giving its full imageName with or without its tag (the tag is still discoverable even on ghcr.io)
• fix e2e tests, to test the new behaviour

[feloy]

Nice progress 👍 ! I noticed small things while testing

Thanks for testing!

Light theme

It seems a bit weird for the tag selection

Right, I'll try to find the appropriate colors

Ordering

The ordering of the tags seems a bit weird?

For now, the order is the one returned by the registry. I would prefer to keep it as is, as the registry would be the only one to have enough information to order the tags in a meaningful order (the more recent ones first I guess, I don't think the alphabetic order would be meaningful, and the search helps to find what we search)

Tag 404

A weird problem seems to occur with some repository: I don't see any tags

I added a commit and more unit tests, which should fix the problem. Thanks

Remarks

IMO the latest tag should be used by default the registry is selected

That would add one click (to remove the selected tag) when the user wants to select another tag

I think the default registry should be configurable, by default I understand we should search on docker.io but we might want to have a configurable settings ? (for future PR)

Yes, I would like to do this as part of another PR

[axel7083]

Remarks

IMO the latest tag should be used by default the registry is selected

That would add one click (to remove the selected tag) when the user wants to select another tag

That would would not add any click, as in every case the user has to click on the select and search for the tag ? However, it would reduce the number of click if the user is okey with the :latest

[feloy]

Remarks

IMO the latest tag should be used by default the registry is selected

That would add one click (to remove the selected tag) when the user wants to select another tag

That would would not add any click, as in every case the user has to click on the select and search for the tag ? However, it would reduce the number of click if the user is okey with the :latest

I don't think so. It the user leaves the Tag field empty, the pull will be done without any tag (~ podman pull nginx), which is equivalent to using the latest tag

[feloy]

I have added a commit which should fix the light mode problem (and to stick with the Input component color)

[axel7083]

I don't think so. It the user leaves the Tag field empty, the pull will be done without any tag (~ podman pull nginx), which is equivalent to using the latest tag

Oh yeah, seems the both Select are on the same level I though it was mandatory to select the tag

[feloy]

I can't pull my private images with the new UI

Did you try the fifth example in the demo video? (by typing the complete image+tag in the first field). I hesitate to add an Info icon with a tooltip to explain the different possibilities

[axel7083]

Did you try the fifth example in the demo video? (by typing the complete image+tag in the first field). I hesitate to add an Info icon with a tooltip to explain the different possibilities

The pull button does not seems to unlock?

[feloy]

Did you try the fifth example in the demo video? (by typing the complete image+tag in the first field). I hesitate to add an Info icon with a tooltip to explain the different possibilities

The pull button does not seems to unlock?

Ah, this case is not supported, when the search returns something

It should work when you type: axel7083/remote-dev:frontend

I'll probably have to change, to always display in the list of results what the user has typed, so it can be selected. For now, it is displayed only if the search fails for some reason, but this does not cover your case

[axel7083]

Did you try the fifth example in the demo video? (by typing the complete image+tag in the first field). I hesitate to add an Info icon with a tooltip to explain the different possibilities

The pull button does not seems to unlock?

Ah, this case is not supported, when the search returns something

It should work when you type: axel7083/remote-dev:frontend

I'll probably have to change, to always display in the list of results what the user has typed, so it can be selected. For now, it is displayed only if the search fails for some reason, but this does not cover your case

Would it be possible to uses the token of the registries to list the private repositories as well?

[feloy]

Did you try the fifth example in the demo video? (by typing the complete image+tag in the first field). I hesitate to add an Info icon with a tooltip to explain the different possibilities

The pull button does not seems to unlock?

Ah, this case is not supported, when the search returns something It should work when you type: axel7083/remote-dev:frontend I'll probably have to change, to always display in the list of results what the user has typed, so it can be selected. For now, it is displayed only if the search fails for some reason, but this does not cover your case

Would it be possible to uses the token of the registries to list the private repositories as well?

Yes I think so. I'll work on this

[feloy]

Did you try the fifth example in the demo video? (by typing the complete image+tag in the first field). I hesitate to add an Info icon with a tooltip to explain the different possibilities

The pull button does not seems to unlock?

Ah, this case is not supported, when the search returns something It should work when you type: axel7083/remote-dev:frontend I'll probably have to change, to always display in the list of results what the user has typed, so it can be selected. For now, it is displayed only if the search fails for some reason, but this does not cover your case

Would it be possible to uses the token of the registries to list the private repositories as well?

Yes I think so. I'll work on this

@axel7083 After a few researches, I cannot find a way to make a search request including private repos.

For the moment, to be able to list tags for private repos, you will need to add a registry index.docker.io in your Podman Desktop registries (as a workaround for #8293).

I have added a commit to add to the Select items the image name entered by the user, when it is not returned by the search, so the user can pull any image

[deboer-tim]

The ability to search images and see all the tags is awesome, but while testing I'm still noticing minor issues with the UI:

• When entering the form, image name input flashes selected -> unselected.
• Nice popup description when you click the form, but doesn't quite match what we do anywhere else, and appears even when you have entered something valid.
• If I select an image name from the list I can't edit it, only clear and start over.
• If I type in an image name or copy/paste the tags are never filled and Pull isn't enabled, I have to select the same name from the dropdown list. (extra step)
• If I clear the image name and then type or copy/paste a valid name, the validation still says 'Please enter a value', because you have to select the identical text from the list first.
• If I select an image tag and then clear the image name, the tag isn't cleared. So it will say it's going to pull image X tag Y, but it actually pulls latest.

I'm being very picky, but despite the excellent work @feloy has done to make it fit in the component just isn't feeling super usable or natural to me. I'm happy to keep reviewing and if others feel it's ok I'm not going to block, but also wondering if we should discuss other options.

[feloy]

One problem highlighted by e2e tests:

If an image has more than 100 tags, only 100 tags will be returned, and the one wanted by the user may not be in the list. In this case, there is no way for the user to specify a non-listed tag

[feloy]

Following today's discussion, I have found this component https://github.com/metonym/svelte-typeahead which behaves more like we would like (just copy the content of the selected entry in the input, without having to clear the entry with the X to continue to edit it). The problem is that is depends on the svelte-search component, when we are using our own input component anywhere else. The sources seem simple enough to get inspiration from it and/or remove the dependency from the svelte-search to replace it with our own input. cc @deboer-tim

(edited to copy-paste the correct components)

[cdrage]

I'm trying this with a private registry I use (hosted on forgejo locally), and I'm getting some odd issues.

The first is a 401 error in the console which is expected, but there was no warning in the UI:

VM5:62 main ↪️ error getting tags of image git.k8s.land/foobar Error: Response code 401 (Unauthorized)
    at Request.<anonymous> (/Users/cdrage/syncthing/dev/electron/podman-desktop/packages/main/dist/index.cjs:75229:33)
    at Object.onceWrapper (node:events:634:26)
    at Request.emit (node:events:531:35)
    at Request._onResponseBase (/Users/cdrage/syncthing/dev/electron/podman-desktop/packages/main/dist/index.cjs:74792:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Request._onResponse (/Users/cdrage/syncthing/dev/electron/podman-desktop/packages/main/dist/index.cjs:74828:7)
    ```
    
Another is that when I enter the image, and then I "unclick" to another section. When I go back to the image name, the cursor goes to the beginning, and I cannot append the image name to pull.

If you can see, I do "git.k8s.land/foobar" and then I want to go back to the input to append something like /foobar/test to the URL, but it forces me to retype the entire thing:


https://github.com/user-attachments/assets/7ecf9a18-89b7-47a4-9bf1-cd492ee6b710

[cdrage]

I am also getting multiple "An object could not be cloned" errors in the console:

VM5:62 main ↪️ Error occurred in handler for 'image-registry:searchImages': Error: An object could not be cloned.
    at WebContents.<anonymous> (node:electron/js2c/browser_init:2:85456)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    ```

[feloy]

Closing in favor of #8786