feat: enhance ReportFilters and Reports components with new properties

[koechkevin]

Description

Added new customizable header fields to the Reports collection and improved UI alignment in the ReportFilters component.
Changes
Reports Collection (Reports.js)

• Added pageHeaderImage field for custom report page header images
• Added pageHeaderDescription rich text field for header descriptions (localized)
• Both fields positioned in sidebar for easy access
  Report Utilities (reports.js)
• Updated getReport() to include new description and image properties in page header block
• Provides fallback values (empty string for description, null for image)
  ReportFilters Component (ReportFilters.js)
• Added alignItems="center" to filter chips container for better vertical alignment
• Updated clear filters button default text from "Clear Filters" to "Clear Filter(s)"
  Tests
• Updated snapshot tests to reflect CSS class changes from layout adjustments

These changes enable content editors to customize the header section of individual report pages with custom images and descriptions, improving visual flexibility and content richness.

Fixes #1399

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)

Screenshots

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation

[kilemensi]

Thanks @koechkevin.

Just to make sure I understand: Why do Reports need Page Headers?

---

That Clear Now should be Clear Filters or Clear All Filters. Is it customisable in CMS as well?

[koechkevin]

Thanks @koechkevin.

Just to make sure I understand: Why do Reports need Page Headers?

That Clear Now should be Clear Filters or Clear All Filters. Is it customisable in CMS as well?

Yes @kilemensi this is customizable on CMS

[koechkevin]

@kilemensi, on page headers, we have this section on baseline reports. We are making it optionally configurable for every report on CMS.

[kilemensi]

@kilemensi, on page headers, we have this section on baseline reports. We are making it optionally configurable for every report on CMS.

🤔 ... I don't think we need that @koechkevin . PageHeader should be a single component that supports:

1. main title,
2. subtitle/subheading,
3. image/logo, and
4. "Back to" i.e. navigate back for nested pages.

It's the same header on Resources, Research, About and Reports pages though. What am I missing? (Yes, I haven't paid much attention to this so I could be missing something).

[koechkevin]

@kilemensi, on page headers, we have this section on baseline reports. We are making it optionally configurable for every report on CMS.

🤔 ... I don't think we need that @koechkevin . PageHeader should be a single component that supports:

1. main title,
2. subtitle/subheading,
3. image/logo, and
4. "Back to" i.e. navigate back for nested pages.

It's the same header on Resources, Research, About and Reports pages though. What am I missing? (Yes, I haven't paid much attention to this so I could be missing something).

Yes,, same header but this title could change on each report.

[kilemensi]

It's the same header on Resources, Research, About and Reports pages though. What am I missing? (Yes, I haven't paid much attention to this so I could be missing something).

Yes,, same header but this title could change on each report.

If it makes sense, all good. Will try to make sense of the approach later @koechkevin

[kilemensi]

@claude @codex review

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. Can't wait for the next one!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".