Redesigned report header

[davidjgoss]

🤔 What's changed?

This PR changes the "report header" components to be more compact and better-styled.

• Pass rate and status proportions are shown as a mini pie chart
• OS, runtime and implementation metadata is shown as a compact set of icons with tooltips for details
• CI and Git get their own blocks
• Status filters are more visually distinctive and include counts
• Statuses are listed in severity order

Before

After

⚡️ What's your motivation?

The previous header was not very space-efficient and not great aesthetically either. This new header conveys the same information in about half the height and a more cohesive style.

🏷️ What kind of change is this?

• ⚡ New feature (non-breaking change which adds new behaviour)

📋 Checklist:

• I agree to respect and uphold the Cucumber Community Code of Conduct
• I've changed the behaviour of the code
  • I have added/updated tests to cover my changes.
• My change requires a change to the documentation.
  • I have updated the documentation accordingly.
• Users should know about my change
  • I have added an entry to the "Unreleased" section of the CHANGELOG, linking to this pull request.

---

This text was originally generated from a template, then edited by hand. You can modify the template here.

[netlify]

✅ Deploy Preview for cucumber-react-preview ready!

Name	Link
🔨 Latest commit	51d7ad0
🔍 Latest deploy log	https://app.netlify.com/sites/cucumber-react-preview/deploys/6814fb5960cb6b0008fa4885
😎 Deploy Preview	https://deploy-preview-381--cucumber-react-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mpkorstanje]

The compression of the search and header is great. Keep that.

But the names and version numbers for the OS, platform and implementation are quite useful. Especially if we don't have a logo for the exact software used. For example Req'n Roll on Mono on Alpine.

Additionally the cell headers add some noise. That could be compressed a bit more by communicating the meaning implicitly.

For example:

55% passed in 0.7 seconds, 55 years ago.
Github Actions on <git-ref>
<implementation> on <platform> on <os>

Not sure where to put the logos for the implementation, platform and os though.

[davidjgoss]

But the names and version numbers for the OS, platform and implementation are quite useful. Especially if we don't have a logo for the exact software used. For example Req'n Roll on Mono on Alpine.

Yeah these are available as tooltips on each one but I did suspect that wouldn't be discoverable enough. I might play with an icon/button that pops up the full details. Or slot the text in some other way.

Additionally the cell headers add some noise. That could be compressed a bit more by communicating the meaning implicitly.

I did experiment with that but found the headers made things generally a bit easier on the eye and easier to read, plus the values tend to get longer and put constraints on horizontal space. I'll try some more though.

[mpkorstanje]

Yeah these are available as tooltips on each one but I did suspect that wouldn't be discoverable enough. I might play with an icon/button that pops up the full details. Or slot the text in some other way.

That would be useful. Being able to copy-paste diagnostics like that is really nice.

[davidjgoss]

After a few iterations based on the feedback: