Topic "Top Pages" cause 404s when they're not part of that Topic

[InaraFernandez]

Describe the bug

All the pages on this topic collection seem to be 404ing. The top two pages for "Information on COVID-19" are also top pages for the "COVID-19" topic under the "health and safety" topic collection.

URL

https://janis-v3-demo.netlify.app/en/government-business/covid-information-and-resources/

To Reproduce

Steps to reproduce the behavior example:

1. Go to 'https://janis-v3-demo.netlify.app/'
2. Click on 'government and business.'
3. Click on 'COVID-19 information and resources'
4. Click on any of the top pages to see the error

Expected behavior

A clear and concise description of what you expected to happen

Screenshots

Device and browser

Chrome on a mac

[Niicck]

When I try to find those pages in Search, they work. But with different URLs. Interesting.

working link from search: https://janis-v3-demo.netlify.app/austin-public-health/get-tested-for-covid-19/ broken link from TC page: https://janis-v3-demo.netlify.app/en/government-business/covid-information-and-resources/information-on-covid-19/get-tested-for-covid-19/

[Niicck]

This bug happens if you assign a page as a "Top Page" of a Topic without also assigning that page as part of the Topic.

go to a Topic Page -> add a Top Page -> select a Page will result in a 404 unless you go to a Page -> added a Topic -> select a Topic Page

This problem can be resolved by bidirectional relationships or a "Top Page" page picker that filters for pages that already belong to a topic. Fixing this on the Janis react-static build side is non-trivial without totally reconstructing how all the distinct TopPage graphql APIs work.

I don't have time/priority to solve this right now, so I'm putting it into the backlog. In the meantime, content team should just remember to add a page to a topic before setting it as a top page.