feat: initial onboarding implementation - podman installation

[lstocchi]

What does this PR do?

This is the initial implementation for the onboarding feature.
It only covers a simple onboarding for podman. Check system requirements -> install podman -> yay! done.

The onboarding can only be started in the podman extension page so far. I'll refactor it in next PR. Starting it from the create new.. button in the resources page or when PD gets started was a bit more complex and i'd like to keep this PR simple and focus on the workflow.
BTW, the onboarding button will only be visible if the experimental onboarding setting (hidden by default) is set to true.
So a user who wants to try it should edit the settings file manually.
A normal user will never see this or access to the onboarding.

In the video below i show what happens when you follow the workflow and it fails somehow, what happens if it succeed, the messages that popup to ask the user to restart the onboarding, the cancel and skip buttons

https://drive.google.com/file/d/1dxcuzc8gzUyoe_wh_DAVrvgIIsi4Z5Jx/view?usp=sharing

In this second video i show how the errors are displayed if the system requirements step fails somehow (i had to fake it by updating the code).

https://drive.google.com/file/d/1TQnpdW_0o6wSf_vSzlfjbV64k3AqrraG/view?usp=sharing

Everything is created by reading the package.json file

Screenshot/screencast of this PR

https://drive.google.com/file/d/1dxcuzc8gzUyoe_wh_DAVrvgIIsi4Z5Jx/view?usp=sharing

https://drive.google.com/file/d/1TQnpdW_0o6wSf_vSzlfjbV64k3AqrraG/view?usp=sharing

What issues does this PR fix or reference?

#3172

How to test this PR?

1. uninstall podman
2. set the onboarding setting to true (go to .local\share\containers\podman-desktop\configuration\settings.json and add "experimental.onboarding":true)
3. start PD, go to settings, extension , podman , click on the onboarding button

I still have to write some test for the onboarding.svelte file but you can play with it, suggest changes, etc..

[mairin]

I haven't tested yet, but the screencasts look awesome!! 😍

[lstocchi]

Converting to draft as i'm simplifying the json after some suggestions received by Florent

[lstocchi]

@benoitf i guess i've finished simplifying the json + refactor the code. I still need to add tests for the svelte components but you can give it a look/try when you have time

[benoitf]

I've tested and it works well

I've just a remark (but anyway it's not blocking this PR), just for open discussions.

At the last step:

I'm wondering if the button should not be done instead of next as I'm at the end of the flow.
I think it's more for @mairin

Another remark is where 'onboarding' button is present
I think it's not obvious (I know it's like a temporary location) as it's well hidden.

so I'm wondering if it could not be part of the Resource screen

Also if I click on 'skip' item I have

saying it's configurable from 'resources' screen

(it's not blocking to merge the PR)

Another remark will be about how it scale (like multiple steps, labels too long)

(here current step is not centered)

Another remark about the chevron icon

What does it mean ?

And last remark, this one as well more for @mairin

I'm not convinced 100% about the current step being a purple circle
I feel like it's not fitting with other circles where it's not solid icons. I don't know if it's because there is no white circle around, if it's because it's a plain circle, if I would expect another icon inside the circle, etc. It's hard to describe.
Maybe it's because previous steps/circles are not purple as well (like completed)

I like when they're connecting lines as well, here is an example

[lstocchi]

Cool, i agree with most of the remarks as it is something i noted as well and i wanted to talk with Mo to know how to fix them.

Just a note. I temporarily added a button to test it (not visible by default, the user needs to manually set a configuration in the PD settings file to see/activate the onboarding). When i discussed with Mo, we talked about activating the onboarding when clicking on the Create new... button if podman was not install or first time PD is opened.
I opted for this temporary solution to be quicker but I'll work on them in separate PRs.

Regarding all the rest, if there is no strong blocker i'd like to merge this as it is (it's hidden by default) and then fix all further problems in separate PRs, like PR -> center labels on top right when having multiple items, PR -> fix icons, PR -> handle when to enable onboarding.
So to not increase the size of this PR further.

Another remark about the chevron icon

What does it mean ?

I used it as a temporary icon to show that a step has been skipped. I didn't find anything in the mockup. I need some suggestion by Mo.

[benoitf]

While testing the flow I also found this behaviour when aborting the install process

it looks like a success in icons but I feel it should be a 'success' or I should have a retry

[lstocchi]

While testing the flow I also found this behaviour when aborting the install process

it looks like a success in icons but I feel it should be a 'success' or I should have a retry

You mean 'failed' in the install podman step?

The problem is that we only check if the completionEvents have been satisfied to proceed to the next step. So we only know if a step is running or completed. But when completed we still don't have a way to differentiate if it has been completed with a failure or it was successfully.

[benoitf]

yes I would expect that either flow is in 'interrupted' state or that I have a cross/X icon and not saying that 'install podman' has a checked icon

Also from there I can't retry the install as I'm already at the next step. Probably I should not be able to move from the step to the next one if this step is not successful.

I am thinking that for example if I have clicked on exit on the installer by mistake I would want to retry the failed step and or having abort

(of course it can be followed up PRs, just discussing the current flow)

[benoitf]

approving as first iteration

then we'll probably to have sub-issues to discuss feedback/improve current flow

[benoitf]

nice work @lstocchi 🚀 🦭

[lstocchi]

@mairin we decided to merge this as it is today bc it has a good core (json structure, ...) and it's a hidden feature, nobody will see it until everything is fixed.
I'll be off for the next 2 weeks so if you have any free time to give this a look in the meantime, feel free to comment or open new issues. I'll reply/bother you/work on it when i'm back 😆
Tomorrow i'll update the gif/video so you can see it better

Gif recorded