Finished Announcement banner links to invalid Results page

shaunanoordin commented 4 days ago

UI Bug

Package: app-project Freshdesk report: https://zooniverse.freshdesk.com/a/tickets/21181 Noted as of 4062f39

The "This Project Is Finished" announcement banner has a "See Results" link. This link is taking users to a 404 page.

Screenshot: in the Finished Banner for the example paused project below, the "See Results" link goes to https://www.zooniverse.org/alexfitzpatrick/bradfords-industrial-heritage-in-photographs/about/results (incorrect) instead of https://www.zooniverse.org/projects/alexfitzpatrick/bradfords-industrial-heritage-in-photographs/about/results (correct)

Dev Notes

The component we're looking at is FinishedAnnouncement.

This component expects store.project.baseUrl to return projects/exampleuser/exampleproject (code)

const mockStore = {
  project: {
    baseUrl: '/projects/zookeeper/galaxy-zoo',
    hasResultsPage: true,
    isComplete: true
  }
}

But the Project store returns .baserUrl as just exampleuser/exampleproject (code)

get baseUrl() {
  return `/${self.slug}`
},

Status

Investigation in progress. Either the FinishedAnnouncement component or the Project store needs to be fixed, and I suspect it's the former. I'm going to check where else store.projects.baseUrl is used and make a decision following that.

eatyourgreens commented 3 days ago

That link is broken because it's using Grommet's Anchor component. It should be using a Next Link component, since it's an internal link within the Next.js app. That's why the Next.js app basePath is missing from the URL.

The React component inspector open, in Firefox, to show that the banner link is rendered as an Anchor component.

eatyourgreens commented 3 days ago

If you compare with one of the client-side links in the project navigation menu, you'll see that the Grommet Anchor there is rendered as a LinkComponent, which adds the base path to the link and uses client-side routing.

A navigation link in the React component inspector, showing that it is rendered as a Next LinkComponent.

eatyourgreens commented 3 days ago

I've opened #6374 to fix the underlying bug in the NavLink component, which is triggered when you use the default StyledAnchor prop. The NavLink code fails if the Grommet Anchor isn't wrapped in styled(), and renders it as a bare link.

Project navigation links pass a StyledAnchor prop with the navigation styles, as does the 'Learn more' link on the project home page, so they render correctly.. The Finished banner doesn't pass that prop, so triggers this bug.

Here's an example of a working internal link, from the project introduction. This is the Learn More link. https://github.com/zooniverse/front-end-monorepo/blob/4062f399e51d0c63d92856fb03c689e519f32683/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/Introduction/Introduction.js#L41-L47

zooniverse / front-end-monorepo