Upgrade app-project to [email protected]

- [x] upgrade `next` to v13. - [x] convert `router-context` to `router-context.shared-runtime`. - [x] upgrade `next/link` to the v13 Link API. - [x] fix build warnings. - [ ] fix failing tests.
zooniverse · Nov 22, 2023 · a3285a1 · a3285a1
1 parent 5a938ee
commit a3285a1
Show file tree

Hide file tree

Showing 26 changed files with 600 additions and 608 deletions.
diff --git a/package.json b/package.json
@@ -48,14 +48,6 @@
   "workspaces": {
     "packages": [
       "packages/**"
-    ],
-    "nohoist": [
-      "**/eslint-config-next",
-      "**/@storybook/*",
-      "**/storybook",
-      "**/storybook-i18n",
-      "**/storybook-react-i18next",
-      "**/next"
     ]
   },
   "resolutions": {

diff --git a/packages/app-project/next.config.js b/packages/app-project/next.config.js
@@ -56,14 +56,7 @@ const nextConfig = {
 
   experimental: {
     forceSwcTransforms: true,
-    modularizeImports: {
-      lodash: {
-        transform: 'lodash/{{member}}',
-      },
-      '@zooniverse/react-components': {
-        transform: '@zooniverse/react-components/{{member}}'
-      }
-    },
+    optimizePackageImports: ['@zooniverse/react-components', 'grommet', 'grommet-icons']
   },
 
   async headers() {

diff --git a/packages/app-project/package.json b/packages/app-project/package.json
@@ -47,7 +47,7 @@
     "mobx-state-tree": "~5.3.0",
     "morgan": "^1.10.0",
     "newrelic": "~11.5.0",
-    "next": "~12.3.0",
+    "next": "~13.5.6",
     "next-i18next": "~15.0.0",
     "panoptes-client": "~5.5.1",
     "path-match": "~1.2.4",
@@ -77,7 +77,7 @@
     "chai-dom": "~1.12.0",
     "dirty-chai": "~2.0.1",
     "enzyme": "~3.11.0",
-    "eslint-config-next": "~12.3.0",
+    "eslint-config-next": "~13.5.6",
     "eslint-plugin-jsx-a11y": "~6.8.0",
     "jsdom": "~22.1.0",
     "mocha": "~10.2.0",

diff --git a/packages/app-project/src/components/AuthModal/components/LoginForm/components/Form/Form.js b/packages/app-project/src/components/AuthModal/components/LoginForm/components/Form/Form.js
@@ -53,13 +53,11 @@ function Form ({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, t
       </FormField>
 
       <Box align='center' margin={{ bottom: 'small' }}>
-        <Link href='/reset-password' passHref>
-          <Anchor size='small'>
-            <SpacedText>
-              {t('AuthModal.LoginForm.forgot')}
-            </SpacedText>
-          </Anchor>
-        </Link>
+        <Anchor as={Link} href='/reset-password' size='small'>
+          <SpacedText>
+            {t('AuthModal.LoginForm.forgot')}
+          </SpacedText>
+        </Anchor>
       </Box>
 
       <Button

diff --git a/packages/app-project/src/components/ProjectHeader/ProjectHeader.stories.js b/packages/app-project/src/components/ProjectHeader/ProjectHeader.stories.js
@@ -1,6 +1,6 @@
 import { Provider } from 'mobx-react'
 import { applySnapshot } from 'mobx-state-tree'
-import { RouterContext } from 'next/dist/shared/lib/router-context'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
 
 import initStore from '@stores'
 import ProjectHeader from './ProjectHeader.js'

diff --git a/...-project/src/components/ProjectHeader/components/LocaleSwitcher/LocaleSwitcher.stories.js b/...-project/src/components/ProjectHeader/components/LocaleSwitcher/LocaleSwitcher.stories.js
@@ -2,7 +2,7 @@ import { Box } from 'grommet'
 import { Provider } from 'mobx-react'
 import { applySnapshot } from 'mobx-state-tree'
 import Router from 'next/router'
-import { RouterContext } from 'next/dist/shared/lib/router-context'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
 import PropTypes from 'prop-types'
 
 import LocaleSwitcher from './LocaleSwitcher'

diff --git a/packages/app-project/src/components/ProjectHeader/components/ProjectTitle/ProjectTitle.js b/packages/app-project/src/components/ProjectHeader/components/ProjectTitle/ProjectTitle.js
@@ -38,20 +38,22 @@ function ProjectTitle({
   const isCurrentPage = router?.pathname === linkProps.href
 
   const anchor = (
-    <StyledAnchor>
-      <StyledHeading color='white' margin='none' textAlign={textAlign}>
-        {title}
-      </StyledHeading>
-    </StyledAnchor>
+    <StyledHeading color='white' margin='none' textAlign={textAlign}>
+      {title}
+    </StyledHeading>
   )
 
   if (isCurrentPage) {
-    return anchor
+    return (
+      <StyledAnchor>
+        {anchor}
+      </StyledAnchor>
+    )
   } else {
     return (
-      <Link {...linkProps} passHref>
+      <StyledAnchor forwardedAs={Link} {...linkProps}>
         {anchor}
-      </Link>
+      </StyledAnchor>
     )
   }
 }

diff --git a/packages/app-project/src/components/ZooHeaderWrapper/ZooHeaderWrapperContainer.spec.js b/packages/app-project/src/components/ZooHeaderWrapper/ZooHeaderWrapperContainer.spec.js
@@ -4,7 +4,7 @@ import { Provider } from 'mobx-react'
 import { applySnapshot } from 'mobx-state-tree'
 import { Grommet } from 'grommet'
 import zooTheme from '@zooniverse/grommet-theme'
-import { RouterContext } from 'next/dist/shared/lib/router-context'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
 import auth from 'panoptes-client/lib/auth'
 import sinon from 'sinon'
 

diff --git a/...creens/ClassifyPage/components/WorkflowAssignmentModal/WorkflowAssignmentModal.stories.js b/...creens/ClassifyPage/components/WorkflowAssignmentModal/WorkflowAssignmentModal.stories.js
@@ -1,4 +1,4 @@
-import { RouterContext } from 'next/dist/shared/lib/router-context'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
 import { Provider } from 'mobx-react'
 import asyncStates from '@zooniverse/async-states'
 

diff --git a/...roject/src/screens/ClassifyPage/components/WorkflowMenuModal/WorkflowMenuModal.stories.js b/...roject/src/screens/ClassifyPage/components/WorkflowMenuModal/WorkflowMenuModal.stories.js
@@ -2,7 +2,7 @@ import asyncStates from '@zooniverse/async-states'
 import zooTheme from '@zooniverse/grommet-theme'
 import { Provider } from 'mobx-react'
 import { applySnapshot } from 'mobx-state-tree'
-import { RouterContext } from 'next/dist/shared/lib/router-context'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
 
 import { mockWorkflow as mockGroupedWorkflow } from '@shared/components/SubjectSetPicker/SubjectSetPicker.mock'
 import initStore from '@stores'

diff --git a/packages/app-project/src/screens/ProjectAboutPage/ProjectAboutPage.spec.js b/packages/app-project/src/screens/ProjectAboutPage/ProjectAboutPage.spec.js
@@ -8,7 +8,7 @@ import {
 } from '@testing-library/react'
 import { Grommet } from 'grommet'
 import zooTheme from '@zooniverse/grommet-theme'
-import { RouterContext } from 'next/dist/shared/lib/router-context'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
 import sinon from 'sinon'
 import ProjectAboutPageConnector from './ProjectAboutPageConnector'
 import { ProjectAboutPage } from './ProjectAboutPage'

diff --git a/...ject/src/screens/ProjectAboutPage/components/AboutDropdownNav/AboutDropdownNav.stories.js b/...ject/src/screens/ProjectAboutPage/components/AboutDropdownNav/AboutDropdownNav.stories.js
@@ -1,5 +1,5 @@
 import { Box } from 'grommet'
-import { RouterContext } from 'next/dist/shared/lib/router-context'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
 import Router from 'next/router'
 import PropTypes from 'prop-types'
 import AboutDropdownNav from '../AboutDropdownNav'

diff --git a/.../app-project/src/screens/ProjectAboutPage/components/AboutSidebar/AboutSidebar.stories.js b/.../app-project/src/screens/ProjectAboutPage/components/AboutSidebar/AboutSidebar.stories.js
@@ -1,5 +1,5 @@
 import { Grid } from 'grommet'
-import { RouterContext } from 'next/dist/shared/lib/router-context'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
 import Router from 'next/router'
 import PropTypes from 'prop-types'
 import AboutSidebar from './AboutSidebar'

diff --git a/...ages/app-project/src/screens/ProjectAboutPage/components/TeamMember/TeamMember.stories.js b/...ages/app-project/src/screens/ProjectAboutPage/components/TeamMember/TeamMember.stories.js
@@ -1,5 +1,5 @@
 import { Box, Grid } from 'grommet'
-import { RouterContext } from 'next/dist/shared/lib/router-context'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
 import Router from 'next/router'
 import PropTypes from 'prop-types'
 import TeamMember from './TeamMember'

diff --git a/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.spec.js b/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.spec.js
@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react'
 import { Grommet } from 'grommet'
 import { Provider } from 'mobx-react'
 import { applySnapshot } from 'mobx-state-tree'
-import { RouterContext } from 'next/dist/shared/lib/router-context'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
 import nock from 'nock'
 
 import initStore from '@stores'

diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/Hero.stories.js b/packages/app-project/src/screens/ProjectHomePage/components/Hero/Hero.stories.js
@@ -1,7 +1,7 @@
 import { MediaContextProvider } from '@shared/components/Media'
 import asyncStates from '@zooniverse/async-states'
 import { Provider } from 'mobx-react'
-import { RouterContext } from 'next/dist/shared/lib/router-context'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
 import Router from 'next/router'
 
 import Store from '@stores/Store'

diff --git a/...screens/ProjectHomePage/components/ZooniverseTalk/components/JoinInButton/JoinInButton.js b/...screens/ProjectHomePage/components/ZooniverseTalk/components/JoinInButton/JoinInButton.js
@@ -13,9 +13,7 @@ function JoinInButton (props) {
   const { linkProps } = props
   const label = t('Home.ZooniverseTalk.button')
   return (
-    <Link {...linkProps} passHref>
-      <StyledButton label={label} />
-    </Link>
+    <StyledButton {...linkProps} forwardedAs={Link} label={label} />
   )
 }
 

diff --git a/packages/app-project/src/shared/components/NavLink/NavLink.js b/packages/app-project/src/shared/components/NavLink/NavLink.js
@@ -41,9 +41,13 @@ function NavLink ({
   }
 
   return (
-    <Link href={addQueryParams(href)} color={color} passHref>
-      <StyledAnchor color={color} label={label} {...anchorProps} />
-    </Link>
+    <StyledAnchor
+      forwardedAs={Link}
+      href={addQueryParams(href)}
+      color={color}
+      label={label}
+      {...anchorProps}
+    />
   )
 }
 

diff --git a/packages/app-project/src/shared/components/SubjectPicker/SubjectPicker.js b/packages/app-project/src/shared/components/SubjectPicker/SubjectPicker.js
@@ -114,14 +114,11 @@ export default function SubjectPicker({ baseUrl, subjectSet, workflow }) {
   }
   return (
     <>
-      <Link
+      <PlainButton
+        forwardedAs={Link}
         href={addQueryParams(baseUrl)}
-        passHref
-      >
-        <PlainButton
-          text={t('SubjectPicker.back')}
-        />
-      </Link>
+        text={t('SubjectPicker.back')}
+      />
       <StyledHeading
         level={3}
         margin={{ top: 'xsmall', bottom: 'none' }}

diff --git a/packages/app-project/src/shared/components/SubjectPicker/SubjectPicker.spec.js b/packages/app-project/src/shared/components/SubjectPicker/SubjectPicker.spec.js
@@ -1,5 +1,4 @@
 import { Grommet } from 'grommet'
-import Link from 'next/link'
 import nock from 'nock'
 import { within } from '@testing-library/dom'
 import { render, screen } from '@testing-library/react'

diff --git a/packages/app-project/src/shared/components/SubjectPicker/helpers/columns.js b/packages/app-project/src/shared/components/SubjectPicker/helpers/columns.js
@@ -3,7 +3,7 @@ import NavLink from '@shared/components/NavLink'
 import slugify from './slugify.js'
 
 function subjectLink({ subject_id }, baseUrl) {
-  const href = `${baseUrl}/subject/${subject_id}`
+  const href = `/projects/${baseUrl}/subject/${subject_id}`
   const link = {
     href,
     text: subject_id

diff --git a/packages/app-project/src/shared/components/SubjectPicker/helpers/columns.spec.js b/packages/app-project/src/shared/components/SubjectPicker/helpers/columns.spec.js
@@ -17,7 +17,7 @@ describe('Components > Subject Picker > helpers > columns', function () {
           const linkComponent = column.render({ subject_id: '123' }, baseUrl)
           const { link } = linkComponent.props
           expect(link.text).to.equal('123')
-          expect(link.href).to.equal(`${baseUrl}/subject/123`)
+          expect(link.href).to.equal(`/projects/${baseUrl}/subject/123`)
         })
       }
 

diff --git a/packages/app-project/src/shared/components/SubjectSetPicker/SubjectSetPicker.js b/packages/app-project/src/shared/components/SubjectSetPicker/SubjectSetPicker.js
@@ -54,14 +54,11 @@ function SubjectSetPicker ({
 
   return (
     <>
-      <Link
+      <PlainButton
+        forwardedAs={Link}
         href={addQueryParams(baseUrl)}
-        passHref
-      >
-        <PlainButton
-          text={t('SubjectSetPicker.back')}
-        />
-      </Link>
+        text={t('SubjectSetPicker.back')}
+      />
       <StyledHeading
         level={3}
         margin={{ top: 'xsmall', bottom: 'none' }}
@@ -88,18 +85,17 @@ function SubjectSetPicker ({
             const href = `${baseUrl}/workflow/${workflow.id}/subject-set/${subjectSet.id}`
             const panoptesCompleteness = subjectSet.completeness[workflow.id]
             return (
-                <Link
-                  key={subjectSet.id}
-                  href={addQueryParams(href)}
-                  passHref
-                >
-                  <Anchor className="test-subject-set-card" data-testid={`test-subject-set-card-${subjectSet.id}`}>
-                    <SubjectSetCard
-                      {...subjectSet}
-                      completeness={panoptesCompleteness}  /* This will override subjectSet.completeness */
-                    />
-                  </Anchor>
-                </Link>
+              <Anchor
+                as={Link}
+                key={subjectSet.id}
+                href={addQueryParams(href)}
+                className="test-subject-set-card" data-testid={`test-subject-set-card-${subjectSet.id}`}
+              >
+                <SubjectSetCard
+                  {...subjectSet}
+                  completeness={panoptesCompleteness}  /* This will override subjectSet.completeness */
+                />
+              </Anchor>
             )
           })}
         </Grid>

diff --git a/packages/app-project/src/shared/components/WorkflowSelector/WorkflowSelector.stories.js b/packages/app-project/src/shared/components/WorkflowSelector/WorkflowSelector.stories.js
@@ -1,7 +1,7 @@
 import asyncStates from '@zooniverse/async-states'
 import { Box } from 'grommet'
 import { Provider } from 'mobx-react'
-import { RouterContext } from 'next/dist/shared/lib/router-context'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
 
 import WorkflowSelector from './WorkflowSelector'
 

diff --git a/...hared/components/WorkflowSelector/components/WorkflowSelectButton/WorkflowSelectButton.js b/...hared/components/WorkflowSelector/components/WorkflowSelectButton/WorkflowSelectButton.js
@@ -61,16 +61,16 @@ function WorkflowSelectButton ({
     )
   }
   return (
-    <Link href={href} passHref>
-      <ThemedButton
-        completeness={completeness}
-        icon={<Next size='15px' />}
-        reverse
-        label={label}
-        primary
-        {...rest}
-      />
-    </Link>
+    <ThemedButton
+      as={Link}
+      href={href}
+      completeness={completeness}
+      icon={<Next size='15px' />}
+      reverse
+      label={label}
+      primary
+      {...rest}
+    />
   )
 }