Bug-1948879: Add links to docs and source in the Banner by moijes12 · Pull Request #995 · mozilla/perfcompare

moijes12 · 2026-01-29T14:40:13Z

Background

We have Bug-1948879 requesting links to the documentation for PerfCompare. Also, we need to remove the Banner in the PerfCompare page header.

Changes done in this PR

Added theme aware links to Docs, GitHub Source, Matrix and Bugzilla in the same row as the Dark Mode toggle button. The font style has been kept identical to the Dark Mode button label to ensure a consistent UX.
The Banner has been removed. The related components have also been removed.
Tests for App.tsx have been updated to check the new links and their tooltips

Fixes Bug-1948879

netlify · 2026-01-29T14:41:04Z

✅ Deploy Preview for mozilla-perfcompare ready!

Name	Link
🔨 Latest commit	`5a3c286`
🔍 Latest deploy log	https://app.netlify.com/projects/mozilla-perfcompare/deploys/69a69f639e049b0008ea934e
😎 Deploy Preview	https://deploy-preview-995--mozilla-perfcompare.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 project configuration.

moijes12 · 2026-01-29T15:54:48Z

@kala-moz I did run npm run fix-all and the tests run locally. Is there anything I need to do to fix it?

codecov · 2026-02-01T17:39:09Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 96.47%. Comparing base (4b96368) to head (5a3c286).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #995   +/-   ##
=======================================
  Coverage   96.46%   96.47%           
=======================================
  Files         104      105    +1     
  Lines        3028     3034    +6     
  Branches      694      695    +1     
=======================================
+ Hits         2921     2927    +6     
  Misses        106      106           
  Partials        1        1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

moijes12

@kala-moz The tests have been fixed and this can now be reviewed

gmierz · 2026-02-02T18:23:38Z

@moijes12 as julien mentioned in the bug, we should wait for padenot to respond with what he expects to see how we should resolve the bug.

moijes12 · 2026-02-03T05:06:17Z

@moijes12 as julien mentioned in the bug, we should wait for padenot to respond with what he expects to see how we should resolve the bug.

Thanks @gmierz . I will move this PR to draft till we finalize the requirement.

kala-moz · 2026-02-19T01:09:36Z

@moijes12 Can we move this out of drafts? Paul has responded to the bug, saying he'll be fine with whatever the team chooses to do. For now, that's putting the link to the docs in the top banner.

moijes12 · 2026-02-19T10:56:45Z

@kala-moz I am moving this back for review. However, as per discussion on the PerfCompare channel, Greg had asked us to remove the banner completely and place the docs button near the mode toggle button.

gmierz · 2026-02-20T14:57:58Z

@moijes12 I recommend making those changes to remove the banner and add docs under the toggle button to start and we can review the changes with all of that together.

Added links to PerfCompare docs and GitHub source in the Banner.

Update snapshots

Fix snapshots.

Added a shared `NavBarLink` component for the below: - Docs - Contact - Source

moijes12 · 2026-02-27T13:00:36Z

@gmierz @kala-moz I am working on udpdating the main page. Below is a screenshot (this is being refined further)

Please feel free to provide your views on the screenshot so that I can make the changes accordingly ? Would you want me to use any particular text color etc. ? I will look into the code for more guidance on this. The Banner will eventually go away and I will make it optional so that it is displayed only if any message needs to be displayed.

Thanks for the opportunity :)

moijes12 · 2026-03-01T16:32:47Z

@gmierz @kala-moz Below is an updated screenshot

Highlights:

Links added on same level as toggle button
Links have identical font style to toggle button label
Links have tooltip

I am currently working on removing the banner

…the header Made the below changes to add new links to urls that were previously in Banner * Created a new NavBarLink component as a single reusable component for Links in the Header * Updated the PerfCompareHeader component to add a new Box with NavBarLinks - Docs, Source, File Bug, Matrix * Updated the Strings to contain the required strings for tooltip The Link font styles are kept identical to the Dark Mode switch label styles to ensure a consistent UX. The Link is also theme aware.

Made the below changes to remove the banner: * Updated the PerfCompareHeader to remove the Banner in the `<Alert />` component * Removed the `Banner` component * Updated the tests for `App.tsx` to check for all links and their correct tooltip

moijes12 · 2026-03-02T08:39:50Z

@gmierz @kala-moz I am moving this out of draft. The Banner has been removed in the latest commit. I still have to fix a failing test but in the meanwhile I will look forward to your inputs so that I can make changes and iterate faster.

Updated the tests for rendering page by: * Made the test for checking heading more specific * Checked for entire Perfcompare tagline text

Executed linter and updated snapshots

moijes12 · 2026-03-03T08:45:41Z

@gmierz @kala-moz The tests have been fixed :)

moijes12 marked this pull request as draft January 29, 2026 15:04

moijes12 marked this pull request as ready for review January 29, 2026 15:18

moijes12 marked this pull request as draft January 29, 2026 15:18

moijes12 force-pushed the bug1948879 branch from edc0d50 to ee55529 Compare January 29, 2026 15:22

moijes12 marked this pull request as ready for review February 1, 2026 17:40

moijes12 commented Feb 1, 2026

View reviewed changes

moijes12 marked this pull request as draft February 3, 2026 05:06

moijes12 force-pushed the bug1948879 branch from 61f394d to 49523ac Compare February 19, 2026 10:55

moijes12 marked this pull request as ready for review February 19, 2026 10:55

moijes12 added 4 commits February 26, 2026 09:28

Bug-1948879: Adding links to docs and source in banner

23162ac

Added links to PerfCompare docs and GitHub source in the Banner.

Bug-1948879: Update snapshots

507ce21

Update snapshots

Bug-1948879: Fix snapshots

b421ced

Fix snapshots.

Bug-1948879: Added a shared component for Links

ee7e229

Added a shared `NavBarLink` component for the below: - Docs - Contact - Source

moijes12 force-pushed the bug1948879 branch from ad90a16 to ee7e229 Compare February 27, 2026 12:56

moijes12 marked this pull request as draft February 27, 2026 12:57

moijes12 added 2 commits March 1, 2026 17:32

moijes12 marked this pull request as ready for review March 2, 2026 08:39

Bug-1948879: Updated test for rendering page

1d38c8d

Updated the tests for rendering page by: * Made the test for checking heading more specific * Checked for entire Perfcompare tagline text

Bug-1948879: Updated Snapshots

5a3c286

Executed linter and updated snapshots

Conversation

moijes12 commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Background

Changes done in this PR

Uh oh!

netlify bot commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for mozilla-perfcompare ready!

Uh oh!

moijes12 commented Jan 29, 2026

Uh oh!

codecov bot commented Feb 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

moijes12 left a comment

Choose a reason for hiding this comment

Uh oh!

gmierz commented Feb 2, 2026

Uh oh!

moijes12 commented Feb 3, 2026

Uh oh!

kala-moz commented Feb 19, 2026

Uh oh!

moijes12 commented Feb 19, 2026

Uh oh!

gmierz commented Feb 20, 2026

Uh oh!

moijes12 commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

moijes12 commented Mar 1, 2026

Highlights:

Uh oh!

moijes12 commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

moijes12 commented Mar 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

moijes12 commented Jan 29, 2026 •

edited

Loading

netlify bot commented Jan 29, 2026 •

edited

Loading

codecov bot commented Feb 1, 2026 •

edited

Loading

moijes12 commented Feb 27, 2026 •

edited

Loading

moijes12 commented Mar 2, 2026 •

edited

Loading