fix(app-project): use next/link for internal links with NavLink (zoon…

…iverse#6374)

* fix(app-project): use next/link for internal links with NavLink

`NavLink` uses the `forwardedAs` prop to render internal links as Next.js `Link` components. This breaks if the default `Anchor` component isn't wrapped in `styled()`.

* fix the tests

packages/app-project/src/components/Announcements/components/FinishedAnnouncement/FinishedAnnouncement.stories.js

@@ -5,10 +5,11 @@ import FinishedAnnouncementConnector from './FinishedAnnouncementConnector'
 // import readme from './README.md'
 
 const mockedRouter = {
-  asPath: '/projects/zooniverse/snapshot-serengeti/about/team',
+  asPath: '/zookeeper/galaxy-zoo/about/team',
+  basePath: '/projects',
   query: {
-    owner: 'zooniverse',
-    project: 'snapshot-serengeti'
+    owner: 'zookeeper',
+    project: 'galaxy-zoo'
   }
 }
 

packages/app-project/src/components/Announcements/components/FinishedAnnouncement/FinishedAnnouncementConnector.spec.js

@@ -5,9 +5,10 @@ import Meta, { Default } from './FinishedAnnouncement.stories.js'
 describe('Component > FinishedAnnouncementConnector', function () {
   const DefaultStory = composeStory(Default, Meta)
 
-  it('should show a results link if results page exists', function () {
+  it('should show a results link if results page exists', async function () {
     render(<DefaultStory />)
-    const link = screen.findByLabelText('Announcements.FinishedAnnouncement.seeResults')
+    const link = await screen.findByRole('link', { name: 'Announcements.FinishedAnnouncement.seeResults' })
     expect(link).exists()
+    expect(link?.getAttribute('href')).to.equal('/projects/zookeeper/galaxy-zoo/about/results')
   })
 })

packages/app-project/src/shared/components/NavLink/NavLink.js

@@ -2,18 +2,20 @@ import { bool, elementType, object, oneOfType, shape, string } from 'prop-types'
 import { SpacedText } from '@zooniverse/react-components'
 import { Anchor } from 'grommet'
 import Link from 'next/link'
+import styled from 'styled-components'
 
 import addQueryParams from '@helpers/addQueryParams'
 
+const DefaultAnchor = styled(Anchor)``
 function NavLink({
   color,
   link,
-  StyledAnchor = Anchor,
+  StyledAnchor = DefaultAnchor,
   StyledSpacedText = SpacedText,
   weight,
   ...anchorProps
 }) {
-  const { externalLink, href, text } = link
+  const { externalLink = false, href, text } = link
 
   const label = (
     <StyledSpacedText color={color} weight={weight}>