Connections console: Add Angular badge for Angular plugins

[xnyo]

What is this feature?

Adds "Angular" badge next to Angular plugins to the on-prem connections console.

Why do we need this feature?

Angular deprecation

Who is this feature for?

Grafana users who rely on Angular datasources

Which issue(s) does this PR fix?:

Related to #68974

Special notes for your reviewer:

Please check that:

• It works as expected from a user's perspective.
• If this is a pre-GA feature, it is behind a feature toggle.
• The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

[academo]

Left a comment about the condition. Not only a matter of preference but safer code. see https://codesandbox.io/s/autumn-sunset-dp7vdj?file=/src/App.js

[sympatheticmoose]

LGTM

[torkelo]

The design of these cards (and placement of the badges) look a bit unpolished. Say compared to plugin list:

[xnyo]

The design of these cards (and placement of the badges) look a bit unpolished. Say compared to plugin list:

@torkelo Yeah it does look a bit off. I have only added the "Angular" badge in this PR. I have tried moving the new badge below the logo, added a bit more padding and made the logo bigger to make it more similar to the plugins list:

It still look a bit empty compared to the plugins list, but I think it's better than what we have now. WDYT? Shall I push this version instead?

[torkelo]

I pushed a branch here (https://github.com/grafana/grafana/compare/connections-card-design) with some changes to how to correctly extend/modify Card component to add things like badges, I also aligned the styling with the data source cards (used in new data source page), cards that looks so much better.

I think with description and the [Core] Badge (or Installed) to also mark which data sources are bundled plugins (or installed) would also be useful. And this list really needs some default sorting to show show the popular ones first (or popular in a separate group).

With description (did not add the [Core] or [Installed] badges, as it requires more changes to the component props to pass in that info

[torkelo]

https://github.com/grafana/grafana/compare/connections-card-design

[xnyo]

Thank you, I will merge it with this branch 🙌

[xnyo]

I have merged those changes into this PR's code. I decided to keep the description hidden for now, since it messes up the spacing if there's too much text, and the purpose of this PR was just to add the Angular badge. e.g.:

The other changes can be done in another PR if that's okay, I sent the feedback to connections working group, thanks :)

[torkelo]

@xnyo yea, let's skip description for now. Needs some fine tuning to skip / cut long descriptions

[torkelo]

And the card grid template needs update, it positions the description strangly

[mckn]

LGTM! Great suggestions by @torkelo

[mikkancso]

About showing the description on the cards:
We already have a plan to improve how these cards look in the catalog. Please feel free to submit any feedback in this thread.
We are planning to work on this in Q3, so please don't do ad-hoc improvements without consulting us, because it will only make our job more difficult.