fix: add metadata to side-navigation on charm details page

[chillkang]

Done

• Added Charm details section to include charm repository, charm product page, and juju version from metadata.yaml
• Added Contacts section to include maintainers and submit a bug link from metadata.yaml
• For charm product page, only include the first link and do not show the link staring with https://charmhub.io

How to QA

• Go to https://charmhub-io-1843.demos.haus/loki-k8s and check if there is no Charm product page link showing in the side-navigation
• Go to https://charmhub-io-1843.demos.haus/mysql and check if there is only one Charm product page link showing
• Compare it to design

Testing

• This PR has tests
• No testing required (explain why):

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-10007
Fixes https://warthogs.atlassian.net/browse/WD-10933
Fixes https://warthogs.atlassian.net/browse/WD-10934
Fixes https://warthogs.atlassian.net/browse/WD-10935
Fixes https://warthogs.atlassian.net/browse/WD-10936
Fixes https://warthogs.atlassian.net/browse/WD-10937

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[steverydz]

LGTM 👍

[lukasSerelis]

Looks good, but specific example you've given here shows an issues with this. The product site is meant to be used for charms that have product pages outside of charmhub, like mySQL. (Product page for MySQL).

In most cases website is just the link to charm, which is useful in github docs, but less useful as a link within charmhub. If possible, if the product link could only be shown if it's not a link to charm in charmhub would be ideal. Not sure how possible, but would be much preferred.

Other than that all look really good!

[Lukewh]

I'm going to say the same thing. From what I understand the "product page" is meant to be a single link. But for https://charmhub-io-1843.demos.haus/mysql for example, there's a list with no way to discern what each link will do. I'm not sure how the design handles multiple links, or how we would differentiate between the upstream product page and a general link?
In snapcraft we split it up into different link types: https://snapcraft.io/lukewh-test

[lukasSerelis]

We could have multiple solutions for this.

1. Either just display links that aren't labeled the way snapcraft does it (just show the domain and add to other links section)
2. Or force a stricter structure on metadata.yaml/charmcraft.yaml where each link if named (like Charm repository, charm product page, etc.) has to be written in the correct format to be displayed, otherwise it won't be shown
3. 2nd option but add other links section for every link that isn't following the preset links.

Happy to discuss, but need to make a decision on this before moving forwards

[chillkang]

We could have multiple solutions for this.

1. Either just display links that aren't labeled the way snapcraft does it (just show the domain and add to other links section)
2. Or force a stricter structure on metadata.yaml/charmcraft.yaml where each link if named (like Charm repository, charm product page, etc.) has to be written in the correct format to be displayed, otherwise it won't be shown
3. 2nd option but add other links section for every link that isn't following the preset links.

Happy to discuss, but need to make a decision on this before moving forwards

@lukasSerelis I'm happy with either option and let's discuss this next Monday :)

[Lukewh]

I'm not sure this should be an else if - @lukasSerelis wdyt? Should we be showing both official contact details AND maintainers? Or one or the other? I would have thought both as the main contact may be "Canonical Data Team" but the maintainers could be multiple individuals?

[lukasSerelis]

The end user just cares to find out where to get help/give suggestions/contribute, so as long as there are relevant contact details it shouldn't matter too much what we display.

That being said, adding more contact details than necessary might not make it clear who to contact first, making it more difficult than we think. I'd say the elif here is justified in that case.

[Lukewh]

👍 LGTM, just one question that I'd like @lukasSerelis's opinion on!

[lukasSerelis]

We've discussed how to deal with the multi link situation and this is where we've left it:

• Don't read all the links in websites:, displaying multiple product links makes no sense, and trying to make sense of which link is what sounds like a job for the charmcraft.yaml spec to standardize more.
• Just check the first link under websites: and display that as product page, as in most cases this is where the product page should live
• I've came back from this point, do check if the first link under websites: isn't a charmcraft.io link, and if it is, don't show it. We just need to be diligent that this is a temporary fix, and we are not going to forever try to make sense of inconsistent .yaml files. This check should be removed once we get some more movement on charmers using the proposed charmcraft.yaml template.
• For a different task, I'll make a new card of what to do with all the other unused links. Now this seems out of scope.

[lukasSerelis]

There's a small UI issue here as well, where the space between icon and text isn't margin or padding, it's just to spaces. This is the spacing that should be followed

[lukasSerelis]

For whatever reason pgbouncer charm has a product link as first link in websites: also has a source: but show the github link as the product page link and no source link at all

https://charmhub-io-1843.demos.haus/pgbouncer

[chillkang]

For whatever reason pgbouncer charm has a product link as first link in websites: also has a source: but show the github link as the product page link and no source link at all

https://charmhub-io-1843.demos.haus/pgbouncer

You found the outlier! This is the metadata I'm getting so I'll dig into this issue.

[lukasSerelis]

Another one that follows the same mistake: https://charmhub-io-1843.demos.haus/kafka-k8s