Recipe: Add to recipe quick action buttons in the header

[slemeur]

We should be consistent with the other screens we have and the other behavior we have in podman desktop.

This is what a user has, when going to containers: there is an header with a set of actions.

For the Recipe, everything is in a new widget:

If I'm on a small screen, I might even miss some of the actions.

I think we should have in the header:

• Status of the recipe: is it running not running
• Button to start it
• Button to stop it
• Button to remove it
• Button to open in IDE
• Button to open the sample AI App

[bovem]

Hey @axel7083 I would like to work on this issue.

[slemeur]

Sure thing @bovem !

[axel7083]

Hey @axel7083 I would like to work on this issue.

Done @bovem keep us updated on your progress :) !

[bovem]

Hey @axel7083 I had few queries.

1. I went through the documentation and contribution docs and tried to test the UI updates with minor changes. I followed the steps here: https://github.com/containers/podman-desktop-extension-ai-lab?tab=readme-ov-file#contributing

Here are the commands I executed

cd podman-desktop-extension-ai-lab
yarn install
yarn build
cd ../podman-desktop
yarn watch --extension-folder ../podman-desktop-extension-ai-lab/packages/backend

# and because I am testing the frontend changes in a different terminal window I executed the following commands
cd ../podman-desktop-extension-ai-lab
yarn watch

But I noticed that only a few times (sometimes only once) the updates done in *.svelte files inside the frontend package are reflected in the podman desktop UI live preview. Is there something wrong in the steps performed above?
Can you share the steps you perform while testing the UI changes on the extension?

2. I noticed PR feat(application): adding start stop actions #1122 was merged recently. Are the buttons added for start, stop, etc. in the pull request have to be moved to the header?

[axel7083]

But I noticed that only a few times (sometimes only once) the updates done in *.svelte files inside the frontend package are reflected in the podman desktop UI live preview. Is there something wrong in the steps performed above? Can you share the steps you perform while testing the UI changes on the extension?

Hey ! Thanks for reaching out, testing frontend changes of an extension in watch mode is actually a bit difficult sadly !

On my side I often only run the first command yarn watch --extension-folder ../podman-desktop-extension-ai-lab/packages/backend but when I want to apply some changes I am doing the following steps

• Go to extension page (podman desktop) and stop AI Lab
• Inside the AI Lab folder, run yarn build
• Once build finish, in the extension page, start ai lab
• The new changes (frontend and backend) will be applied

2. I noticed PR feat(application): adding start stop actions #1122 was merged recently. Are the buttons added for start, stop, etc. in the pull request have to be moved to the header?

There is a component named ApplicationActions.svelte, and I think this is the one that should be placed in the header, so you should not have to worry much about those, as it is a standalone component :)

[feloy]

But I noticed that only a few times (sometimes only once) the updates done in *.svelte files inside the frontend package are reflected in the podman desktop UI live preview. Is there something wrong in the steps performed above? Can you share the steps you perform while testing the UI changes on the extension?

Hey ! Thanks for reaching out, testing frontend changes of an extension in watch mode is actually a bit difficult sadly !

On my side I often only run the first command yarn watch --extension-folder ../podman-desktop-extension-ai-lab/packages/backend but when I want to apply some changes I am doing the following steps

• Go to extension page (podman desktop) and stop AI Lab
• Inside the AI Lab folder, run yarn build
• Once build finish, in the extension page, start ai lab
• The new changes (frontend and backend) will be applied

Same steps for me, expect that I run yarn watch in the frontend folder, so you don't need to rebuild it manually)

(I do not run it from the top directory, as it will build backend and frontend, and the command yarn watch --extension-folder ../podman-desktop-extension-ai-lab/packages/backend is already building the backend)

cd ../podman-desktop-extension-ai-lab/packages/frontend
yarn watch