Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

frontend: Add CNCF and verification badge to charts #42

Merged
merged 1 commit into from
May 29, 2024

Conversation

vyncent-t
Copy link
Contributor

@vyncent-t vyncent-t commented May 15, 2024

Enhance App Catalog with ArtifactHub Badges

Description

fixes issue #20

This PR aims to enhance our app catalog by incorporating important badges from ArtifactHub. These badges indicate whether an app is official, verified, or a CNCF project. Displaying these badges will help users make informed decisions about which packages to install, ensuring they opt for secure and verified applications.

Changes

  • Added support for displaying ArtifactHub badges (official, verified, and CNCF project) in the app catalog.
  • Updated the UI to prominently feature these badges next to corresponding apps in the catalog.
  • Ensured that the CNCF badge is included and correctly displayed for relevant apps.
  • Implemented logic to fetch and display badge information from ArtifactHub.

Verification

  • Verified that the badges are correctly displayed for apps that are marked as official, verified, or CNCF projects.
  • Tested the UI to ensure that the addition of badges does not disrupt the existing layout or functionality of the app catalog.
  • Confirmed that the badges provide clear and accurate information to users about the status and security of the apps.

Images

image

@vyncent-t vyncent-t self-assigned this May 15, 2024
@vyncent-t vyncent-t requested a review from illume May 16, 2024 20:21
@illume
Copy link
Contributor

illume commented May 22, 2024

@vyncent-t from our discussions...

We were looking at showing the "not verified states" too.
image

Notice the extra description, explaining what exactly each of the badges means https://artifacthub.io/packages/helm/nginx-gateway-fabric/nginx-gateway-fabric

Additionally, perhaps sharing the iconography as artifact hub will make it easier for users. So they can reuse that knowledge of what icon is what?

Copy link
Contributor

@joaquimrocha joaquimrocha left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a couple of notes. It would also be nice if we sorted the list of charts to show them in this order:

  • CNCF
  • Official
  • Verified
  • rest

app-catalog/src/components/charts/List.tsx Outdated Show resolved Hide resolved
app-catalog/src/components/charts/List.tsx Outdated Show resolved Hide resolved
app-catalog/src/components/charts/List.tsx Outdated Show resolved Hide resolved
app-catalog/src/components/charts/List.tsx Outdated Show resolved Hide resolved
@vyncent-t
Copy link
Contributor Author

I updated the visuals to match those of artifact hub with matching labels for non verified and others @illume

image

@sniok
Copy link

sniok commented May 23, 2024

Is it just me or does it look a bit too "busy"? A lot of different colors makes it a bit hard to parse visually. What if we kept the icons only when the app is "verified", "official", etc and kept them monochrome at all times? Something like this:

image

doesn't have to be changed within this PR, we can discuss and iterate later

@joaquimrocha
Copy link
Contributor

I agree with @illume that we should keep the icons aligned with ArtifactHub, meaning that a star would be for official, and a check mark for verified, but we can use different icons and in the monochromatic version as @sniok said. The important thing is to make sure users can have direct access to an official Nginx chart, before they even see any unofficial versions. That's why the sorting is so important.

In a different PR we should also not show unofficial charts unless the user specifically toggled a switch to include those in the plugin settings.

@vyncent-t
Copy link
Contributor Author

Made some slight changes with the monochrome as the dark mode CNCF Icon isnt exactly easy to see as its an image and not an icon

Dark & Dark mode

image

Color & Dark mode

image

image

@vyncent-t vyncent-t force-pushed the app-catalog-CNCF-verify branch 2 times, most recently from 9673cae to 3ca4bad Compare May 28, 2024 16:44
@vyncent-t
Copy link
Contributor Author

noticed in some places artifact hub will use either chart.cncf or chart.repository.cncf on their icons to choose to display so I implemented that

@vyncent-t vyncent-t force-pushed the app-catalog-CNCF-verify branch 2 times, most recently from c8c8365 to 8401a94 Compare May 29, 2024 13:46
@joaquimrocha
Copy link
Contributor

I have reduced the size of the cncf icon slightly + made the official badge appear first, as we had chatted (most important to least important).

@joaquimrocha joaquimrocha merged commit 0877257 into main May 29, 2024
3 of 4 checks passed
@joaquimrocha joaquimrocha deleted the app-catalog-CNCF-verify branch May 29, 2024 14:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants