feat: Redesign check type selection screen

[VikaCep]

Redesigns the check type selection screen.

• New icons for all check types.
• New badge to highlight browser checks.
• A clear indicator, using the "i" icon, to show whether a check is public or private.
• Updated descriptions for some check types, fitting within 3-row paragraphs.
• A clarified tooltip explaining that browser checks are currently in public preview and can be used without charge for test executions.
• More concise call-to-action buttons, removing redundant "Create" and "Check" text.
• Textual links instead of badges to showcase supported types for each check, ensuring they do not overshadow the primary call to action.

Closes #955

[VikaCep]

New icons added in grafana/grafana#94439

[VikaCep]

This PR needs Grafana 11.3.0 to be released in order to use the new icons, which is scheduled for 2024-10-22 (as of https://internal-ops-us-east-0.grafana.net/grafana-release-guide/release-schedule/)
Leaving that aside, we can start reviewing it.

[VikaCep]

Ok, it seems the new icons weren't included in grafana 11.3.0 as the PR was merged after the cut, which was Oct 4, so we'll have to wait for that release to take place in order to consume these icons 😞

[VikaCep]

Because of this, we would need to wait for grafana version 11.4.0 in order to use the new icons. And according to this document, version 11.4.0 is scheduled for release on December 5, which feels quite far off.

To move forward, I’ve reverted to using the old icons while keeping the rest of the card redesign that Maja proposed. This will allow us to review and merge these changes sooner, and once the new icons are ready, we can easily update them in a new PR.

[ckbedwell]

This is great! Code looks good, just a few extra things to address:

I am sure @majavojnoska would like these to default to 2 x 2 when we can't get four cards on the same row.

And similar for when we go down to 1 per row, can we make this prettier, too?

And on the check creation page can we add the accompanying badge to the left of the icon. There is also a bug about where the toggletip is rendering, can you see what is going on there? 🤔

[VikaCep]

This is great! Code looks good, just a few extra things to address:
I am sure @majavojnoska would like these to default to 2 x 2 when we can't get four cards on the same row.

And similar for when we go down to 1 per row, can we make this prettier, too?

I changed the layout to prevent having 3 columns. According to the breakpoints defined in grafana/ui, it's showing either 1, 2 or 4 columns.

xs

sm

md

lg

xl

xxl

And on the check creation page can we add the accompanying badge to the left of the icon.

I also added the NEW badge in the check form :)

[majavojnoska]

This looks awesome Vika! ❤️

[w1kman]

Unfortunately, this is how it looks on Windows 🪟

[w1kman]

Doesn't look so fresh on a Windows machine with the scrollbars

[ckbedwell]

Last few changes to tighten up 🔧

[VikaCep]

Last few changes to tighten up 🔧

Thanks Chris! I've applied your suggestions 🙏

[ckbedwell]

LGTM 💪