Rebrand certified configuration search result pages

[andrejvelichkovski]

Done

This PR rebrands the search pages under ubuntu.com/certified.

In fact there are three separate page types refactored:

• generic search results page
• category search pages:
  • /certified/laptops
  • /certified/desktops
  • /certified/iot
  • /certified/servers
  • /certified/socs
• vendor search pages: under: /certified/vendor/HP (and a few other vendors)

QA

• Check out this feature branch
• Run the site using the command ./run serve or dotrun
• View the site locally in your web browser at: http://0.0.0.0:8001/
  • Be sure to test on mobile, tablet and desktop screen sizes
• [List additional steps to QA the new features or prove the bug has been resolved]

Issue / Card

Fixes #

Screenshots

[If relevant, please include a screenshot.]

Help

QA steps - Commit guidelines

[webteam-app]

andrejvelichkovski is not a collaborator of the repo

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 72.32%. Comparing base (02d1f93) to head (230ed02). Report is 4 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #14381   +/-   ##
=======================================
  Coverage   72.32%   72.32%           
=======================================
  Files         120      120           
  Lines        3404     3404           
  Branches     1174     1172    -2     
=======================================
  Hits         2462     2462           
  Misses        917      917           
  Partials       25       25           

[akbarkz]

Demo instance can be accessed by this link: https://ubuntu-com-14381.demos.haus/

[juanruitina]

Let's tweak the filters slightly, so they're more consistent with what we have in CVEs:

Please make filter heading text bold and aligned with checkbox labels. No border.

Also, please use the same two buttons in the same order ("Apply filters", "Clear all filters"), make them left aligned, and sticky. This is the CSS used in CVEs to achieve that:

.cve-filter-buttons {
    background: #f3f3f3;
    bottom: 0;
    position: sticky;
    z-index: 2;
}

I've updated the Figma file to reflect the button changes.

Great work, this will definitely make the /certified experience more visually consistent.

[andrejvelichkovski]

Thanks @juanruitina, I have now updated the filters to be consistent with the ones in the CVEs dashboard.

[juanruitina]

Little bug on mobile: please make sure the sticky button section in the filters have the same margins as the filters themselves left and right.

Other than that, looks good to me; +1ing this already as to not block deployment.

I've also created an issue in the Vanilla repo covering the new filter styles: https://github.com/canonical/vanilla-framework/issues/5451 Let's align with whatever comes out of it, particularly in terms of the hover state.

[andrejvelichkovski]

Ah, good catch, thanks for raising it! I have fixed it now. I also noticed it happens on the CVEs page, so once we have the fix approved here, I will try to open a tiny PR on that part to fix it.

I agree with you on the hover state, once we have a decision I can update the change with the hover state correctly set.

[andrejvelichkovski]

Thanks for you review @mtruj013. I have now applied all suggestions you left.

In terms of the mentioned issue, I think it is because of a delay in the API response that should give the values for these filters. Right now, the ubuntu.com Flask servers acts as a Proxy to the main certification server where we maintain and store this data. Because of this there is a little bit more delay in the responses.

I think one of the plans is to rework this and make the API calls directly to our service. I expect this to significantly improve the search experience. Although, in this PR I haven't really changed anything about how these filters work.