feat: seal of reliability search page - #182
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Adds “Seal of Reliability” support to the Feeds search experience, including (1) a gated has_seal search filter and (2) a badge/icon on feed rows, aligning the UI with new API fields and endpoints.
Applied review guidance: vercel-react-best-practices (custom).
Changes:
- Extends the feeds search flow to parse/serialize
has_sealin the URL, include it in SWR keys, and conditionally send it to the search API based on user entitlement. - Adds Seal of Reliability rendering in both simple and advanced search tables.
- Introduces a reusable
AccessRequiredPopoverand auseSealOfReliabilityFilterAccesshook to centralize access logic.
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/app/services/feeds/types.ts | Updates generated OpenAPI types to include seal-related fields/params and new endpoints. |
| src/app/screens/Feeds/SearchTable.tsx | Shows Seal of Reliability badge in the simple table when enabled. |
| src/app/screens/Feeds/SearchFilters.tsx | Adds the Seal filter UI row, gating logic, and access popover trigger. |
| src/app/screens/Feeds/AdvancedSearchTable.tsx | Shows Seal of Reliability badge in the advanced table when enabled. |
| src/app/screens/Feed/components/ClientSubscribeControls.tsx | Refactors access UI to use the new AccessRequiredPopover. |
| src/app/interface/UserFeatureFlags.ts | Renames/standardizes the user flag to isSealFilterEnabled. |
| src/app/hooks/useSealOfReliabilityFilterAccess.ts | New hook combining Remote Config + per-user flag for entitlement. |
| src/app/components/SealOfReliability.tsx | New component rendering the seal image (with tooltip for small size). |
| src/app/components/FeedVerificationChip.tsx | Minor spacing tweak to accommodate the new seal badge layout. |
| src/app/components/AccessRequiredPopover.tsx | New reusable popover for login/request-access CTAs. |
| src/app/[locale]/feeds/lib/useFeedsSearch.ts | Adds has_seal URL param support and conditional API filtering. |
| src/app/[locale]/feeds/components/FeedsScreen.tsx | Adds state/plumbing for seal filter chips and passes table enablement. |
| package.json | Adds manual OpenAPI types generation scripts. |
| messages/en.json | Adds translations for access-required button labels + seal strings. |
| messages/fr.json | Adds French translations for access-required button labels + seal strings. |
| external_types/DatabaseCatalogAPI.yaml | Adds/updates the OpenAPI spec used to generate feed API types. |
| docs/user-feature-flags.md | Updates docs to match the renamed user flag. |
| cypress/e2e/userFeatureFlags.cy.ts | Updates Cypress coverage to use the renamed user flag. |
Suppressed comments (1)
src/app/components/AccessRequiredPopover.tsx:116
- This external link opens a new tab but uses rel="nofollow" only. Add noopener/noreferrer to prevent reverse-tabnabbing (you can keep nofollow as well).
href={MEMBERSHIP_URL}
target='_blank'
rel='nofollow'
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
|
*Lighthouse ran on https://mobilitydatabase-kdiwplz1k-mobility-data.vercel.app/ * (Desktop)
*Lighthouse ran on https://mobilitydatabase-kdiwplz1k-mobility-data.vercel.app/feeds * (Desktop)
*Lighthouse ran on https://mobilitydatabase-kdiwplz1k-mobility-data.vercel.app/feeds/gtfs/mdb-2126 * (Desktop)
*Lighthouse ran on https://mobilitydatabase-kdiwplz1k-mobility-data.vercel.app/feeds/gtfs_rt/mdb-2585 * (Desktop)
*Lighthouse ran on https://mobilitydatabase-kdiwplz1k-mobility-data.vercel.app/feeds/gbfs/gbfs-flamingo_porirua * (Desktop)
|
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
|
[nitpick]: The seal filter checkbox doesn't unselect after selecting the GBFS or GTFS-RT filters. As the filter is only applicable to GTFS, it should behave the same as the Official filter. Screen.Recording.2026-08-26.at.10.29.00.AM.mov |
davidgamez
left a comment
There was a problem hiding this comment.
Looks great! I added a non-blocking comment.
|
@Alessandro100 What account do I need to use to login with Seal access? My own doesn't work atm |
|
@emmambd I just gave your @mobilitydata.org account permission |
|
I +1 David's comment. The actual filter count doesn't seem to make sense (e.g. when I select "GTFS Schedule" on top of "Seal of Reliability" it goes from 1874 to 1873) but I assume that's just because the backfill hasn't happened yet? The actual workflow and design LGTM! Let's wait to merge till EOD in case @abigailmbd can add her two cents. |
|
I will be able to take a look now! |
|
@emmambd thats strange, when I filter |
abigailmbd
left a comment
There was a problem hiding this comment.
It looks great, Alessandro!! All the links direct where needed, makes sense to flow through.
I know this PR isn't about the logo, but just flagging having a transparent background so that the white around the seal doesn't in dark mode!
Summary:
closes #167
Adds filtering by seal of reliability to the feeds search page as well as the logo on the search table. Also implements the guards and access
Expected behavior:
Not logged in / no feature flag access
You can see the filter with a lock on it, when you click it a popover will appear telling you that you do not have access and to login or request access
Logged with access
On the feeds search page you'll be able to search by seal of reliability which will show the elements on the table
Extras
Testing tips:
Go on the feeds search page and test out the feature in a
Please make sure these boxes are checked before submitting your pull request - thanks!
yarn testto make sure you didn't break anything