Rebrand certified configuration search result pages

[andrejvelichkovski]

Done

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

Change structure

To help with the review, please check out the description of the changes below.

Firstly, we need to define what are all the pages that allow users to search for hardware. Currently we have three different search page types:

• generic search results page, leads if you go to ubuntu.com/certified?q=Dell
• category search pages:
  • /certified/laptops (ubuntu.com/certified/laptops)
  • /certified/desktops (ubuntu.com/certified/desktops)
  • /certified/iot (ubuntu.com/certified/iot)
  • /certified/servers (ubuntu.com/certified/servers)
  • /certified/socs (ubuntu.com/certified/socs)
• vendor search pages: under: /certified/vendor/HP (ubuntu.com/certified/HP) (and a few other vendors)

Previously, the generic search results page was fully separately defined in the search-results.html template, while the other functionalities shared the same search results table. I have now moved all functionalities to share the same search results table to avoid code duplication.

All search result templates have the same file structure (such files are search-results.html, laptops.html, servers.html, desktops.html, devices.html, socs.html and vendors/vendor.html):

1. Hero section (different for each search page)
2. Horizontal line
3. Hardware results shown in a table

The hardware results block contains a few small files to break them down. I have made this change to make them easier to review. Below is a hierarchy of the file structure:

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
• Demo link: https://ubuntu-com-14381.demos.haus/

Issue / Card

Fixes #

Screenshots

Generic search results

Laptops

Desktops

IoT

Servers

System on Chip (SoC)

Vendor

Help

QA steps - Commit guidelines

[webteam-app]

andrejvelichkovski is not a collaborator of the repo

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 69.64%. Comparing base (be74181) to head (409e614).
Report is 18 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #14381   +/-   ##
=======================================
  Coverage   69.64%   69.64%           
=======================================
  Files         120      120           
  Lines        3419     3419           
  Branches     1174     1174           
=======================================
  Hits         2381     2381           
  Misses       1013     1013           
  Partials       25       25           

[andrejvelichkovski]

Please note: this page is not new, it is a copy of the filters that were previously defined in both category-search-results.html and search-results.html. I moved them to this file and reused them instead of defining them in both places.

[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.