Add Checks customization modal

[EMaksy]

Description

This PR will add a checks customization modal for host and cluster checks selection view.
In a future PR the placeholder "Value from Wanda" will be replaced with the custom check values from wanda

What is msising?

• Modal must be hooked up with backend
• Missing e2e test, coming in a seperate pr

Demo

Single check value unchecked

Single check value checked

Multiple customization values

Partial customizable values

Many values with a very long name

How was this tested ?

Added tests for the Modal
Added Storybook stories

[github-actions]

The preview environment for this pull request is ready at 3277.prenv.trento.suse.com.

[nelsonkopliku]

Hey @EMaksy great work, thanks!

Left a few comments that would allow a simpler wire up with #3274 and #3278

Here's also a temporary branch wiring up all the things checks_customization_modal...tmp-merge

[nelsonkopliku]

Very good @EMaksy, just a couple of comments about factories, and that would be enough to merge this PR.

I believe that this is a good starting point and besides what you mentioned let's keep in mind we'll need to make sure to provide the correct ux based on th different types of values:

• string -> input text
• number -> input number
• boolean -> radio button

Example here.

[nelsonkopliku]

thought: we might not need a placeholder at all. There will always be either the current value or the custom value.

We can safely remove this imho.

[EMaksy]

I played a bit around with it. I prefer to keep the placeholder, because when the user clicks on the field and starts to enter values, he starts from scratch otherwise he starts on the previous value.
We can revisit this behavior on the follow up for the different input types.
What do you think ?

[nelsonkopliku]

I guess what you want to achieve is setting an initial value for the input

initialValue={value?.custom_value || value?.current_value}

See a709946#diff-7d61854c35d8df403e17910b9865976e0ca7a475035de0ad1fa98fa4fb28ffb3R107

[EMaksy]

Yeah it is basically which behaviour we prefer:
initialValue={value?.custom_value || value?.current_value}

Screencast.From.2025-02-07.15-37-00.mp4

vs

placeholder={value?.current_value}

Screencast.From.2025-02-07.15-37-44.mp4

You prefer initialValue={value?.custom_value || value?.current_value}?
No strong opinion here, but i would need to adjust slightly the test :)

[nelsonkopliku]

The fact is that a placeholder is semantically different from the value of an input.

Additionally, something like placeholder={value?.current_value} would always show current_value and never the custom_value, when present.