Add 'Featured' section to the Apps & Marketplace Charts page

[nwmac]

See UX ticket: https://github.com/rancher/dashboard/issues/5007

Update the Charts view in 'Apps and Marketplace" as per the following:

Specifically:

• Add a toggle switch in the top-right 'Browse | Featured' - the default will be 'featured', but this should be persisted in a user preference, so that the choice is remembered across logins

• Choosing 'Browse' will present the page as is - i.e. just showing the list of charts available with the filtering controls - e.g.

• Choosing 'Featured' will show a new section above the existing content - this is shown as the carousel in the design mentionned at the top of this ticket - for this ticket, JUST add the4 carousel for featured charts, NOT the recent list below.

• For now, create a method 'getFeaturedCharts' which will should return at mot 5 charts to show in the featured carousel. For development, you can hard code this function to select any 5 charts from those installed - once the chart annotations are in place, we an update the function to use real data to get the actual featured charts to display. The function should arrange the 5 charts, so that the most recently added/updated chart is shown in the middle

• Charts in the carousel should be shown in order 5 3 1 2 4 from a list of featured charts which is ordered from most recently added/updated to least - i.e. the newest chart of interest should be in the middle (1)

• If there are no features charts available, the code should be smart enough to not display anything different to the user from what they currently see.

• The carousel should cope with there being between 1 and 5 featured charts

Please update the size label on this issue with the estimate for how long you think this will take (in work days)

[richard-cox]

I've moved this to backend blocked, as we're waiting on actual data

[gaktive]

@richard-cox is there a related backend ticket for getting data? I can't find a ticket that indicates what they need to do.

[richard-cox]

Not sure, Richa stated the dashboard PR was blocked waiting for actual data (https://github.com/rancher/dashboard/pull/5585#issuecomment-1150964061). @bisht-richa was there a backend ticket?

[gaktive]

I checked with backend folks and they weren't aware of anything. I'll push this out to 2.7.1 unless there's something actionable since the schedule for 2.7.0 is fast approaching.

[nwmac]

@gaktive we can talk about this one - it's driven by chart annotations / so doesn't need backend, just partner charts updates

[bisht-richa]

There is the ticket for Featured Charts: Wire in annotation support https://github.com/rancher/dashboard/issues/6664

[ronhorton]

this isn't ready for test not seen in 2.7-head commit ID 4092002 saw in 2.7.0-rc3, but no functionality tied to the featured toggle.

[richard-cox]

@ronhorton The feature will only show when there are charts that contain the new annotations (rc3 had a bug which meant those toggles were always shown). I'm not sure when product side Rancher or other charts will contain them, but UX wise we've been usings Neil's custom helm repo - https://nwmac.github.io/rancher-charts. With that added you should see the carousel

[ronhorton]

ronhorton said: @richard-cox I'm not able to use that repo. at what point will the work be merged so that i can see it in 2.7.0-rc?

[richard-cox]

@nwmac should be able to provide more detail on the chart uptake. this is probably a chicken and egg scenario

[ronhorton]

logged bug for dup tiles: https://github.com/rancher/dashboard/issues/7243

[ronhorton]

testing complete 2.7.0-rc8 test repo: https://nwmac.github.io/rancher-charts test cases:

1. toggle switch between browse and featured - passed
2. choice should be persistend as a user setting after logout / login - failed; shows featured when log out and return having set to browse
3. choosing featured shows the carousel (not the recent list) - passed
4. create a method 'getFeaturedCharts' which will should return at most 5 charts to show in the featured carousel - passed
5. If there are no features charts available, the code should be smart enough to not display anything different to the user from what they currently see - passed
6. The carousel should cope with there being between 1 and 5 featured charts - passed - tested with 1, 4 and 5

additional testing: general click throughs; clicked ui components (direction arrows, position dots under featured carousel); inspected console for ui errors; installed various featured/non-featured charts; toggling multiple times