Fix Finished Announcement banner results link

[shaunanoordin]

PR Overview

Package: app-project
Fixes #6370

This PR fixes the Finished Announcement banner's "See Results" link.

• Prior to this fix, the "See Results" link failed to add a "/projects" to the URL.
• Storybook Story has been fixed: 'baseUrl' now matches the 'baseUrl' returned by the Project store (which doesn't automagically prepend a "/projects" to the project slug).
• Tests have been fixed: prior to this, the tests would always return incorrect passes due to the use of ".findBy..." returning a Promise that always .exists().

Testing

Test on app-project, on localhost

• Open any paused project with a results page, e.g. https://local.zooniverse.org:3000/projects/alexfitzpatrick/bradfords-industrial-heritage-in-photographs?env=production
• Examine the "See Results" link. It should be a valid link to a results page.

Status

Ready for review.

Note: if this gets approved while I'm on vacation, please go ahead and merge+deploy this.

[coveralls]

coverage: 78.576% (+0.03%) from 78.542%
when pulling 9f0754d on fix-finishedannouncement-results-link
into 4062f39 on master.

[eatyourgreens]

This link should be using the Next router, which automatically adds the app base path.

If the link doesn’t use the client-side router, you lose all project state when you follow it, including classifier state.

[eatyourgreens]

The base path for internal routing, within the Next app, is set here:

front-end-monorepo/packages/app-project/next.config.js

Line 42 in 4062f39

basePath: '/projects',

[eatyourgreens]

#6374 fixes the underlying bug in the NavLink component, which was causing this link to be rendered as an external link.

[eatyourgreens]

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.

front-end-monorepo/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/Introduction/Introduction.js

Lines 41 to 47 in 4062f39

	<NavLink
	gap='xsmall'
	icon={<Next color='light-5' size='12px' />}
	link={link}
	reverse
	StyledAnchor={StyledAnchor}
	/>

[eatyourgreens]

The tests don't use next.config.js, which is why the app base path isn't included in these link URLs.

[eatyourgreens]

These links have /projects prepended because the storybook doesn't get the app base path from next.config.js, so it has to be added by hand.

[goplayoutside3]

@shaunanoordin I took a look at both this PR and #6374, and I'm going to merge the latter. It fixes the broken results link and future proofs any other internal links that might've left out StyledAnchor.

Thank you for documenting the findBy tests in #6383 too!