Projects: Remove /projects from internal links (#2529)

#2519 added /projects as a base path for the project app. This PR updates links, which have been hardcoded with `/projects` and now point to `/projects/projects/:owner:/:name:`.

packages/app-project/src/components/ProjectHeader/ProjectHeaderContainer.js

@@ -16,7 +16,7 @@ function storeMapper (stores) {
 
 function getBaseUrl (router) {
   const { owner, project } = router.query
-  return `/projects/${owner}/${project}`
+  return `/${owner}/${project}`
 }
 
 function ProjectHeaderContainer ({ className, defaultWorkflow, inBeta, isLoggedIn, projectName }) {

packages/app-project/src/components/ProjectHeader/components/ProjectTitle/ProjectTitle.js

@@ -27,7 +27,7 @@ function ProjectTitle (props) {
   const { title } = props
   const { owner, project } = router.query
   const linkProps = {
-    href: addQueryParams(`/projects/${owner}/${project}`, router)
+    href: addQueryParams(`/${owner}/${project}`, router)
   }
 
   const isCurrentPage = router.pathname === linkProps.href

packages/app-project/src/components/ProjectHeader/components/ProjectTitle/ProjectTitle.spec.js

@@ -7,17 +7,17 @@ describe('Component > ProjectTitle', function () {
   let wrapper, routerStub
 
   const ROUTER_ON_HOME_PAGE = {
-    asPath: '/projects/foo/bar',
-    pathname: '/projects/[owner]/[project]',
+    asPath: '/foo/bar',
+    pathname: '/[owner]/[project]',
     query: {
       owner: 'foo',
       project: 'bar'
     }
   }
 
   const ROUTER_ON_OTHER_PAGE = {
-    asPath: '/projects/foo/bar/baz',
-    pathname: '/projects/[owner]/[project]/baz',
+    asPath: '/foo/bar/baz',
+    pathname: '/[owner]/[project]/baz',
     query: {
       owner: 'foo',
       project: 'bar'
@@ -57,7 +57,7 @@ describe('Component > ProjectTitle', function () {
       routerStub.callsFake(() => ROUTER_ON_OTHER_PAGE)
       wrapper = render(<ProjectTitle title={TITLE} />)
       expect(wrapper[0].name).to.equal('a')
-      expect(wrapper.attr('href')).to.equal('/projects/foo/bar')
+      expect(wrapper.attr('href')).to.equal('/foo/bar')
     })
   })
 })

packages/app-project/src/screens/ClassifyPage/components/WorkflowAssignmentModal/WorkflowAssignmentModal.js

@@ -14,7 +14,7 @@ export default function WorkflowAssignmentModal(props) {
   const router = useRouter()
   const { owner, project } = router?.query || {}
 
-  const url = `/projects/${owner}/${project}/classify/workflow/${assignedWorkflowID}`
+  const url = `/${owner}/${project}/classify/workflow/${assignedWorkflowID}`
 
   return (
     <Modal active={active} closeFn={closeFn} title={counterpart('WorkflowAssignmentModal.title')}>

packages/app-project/src/screens/ClassifyPage/components/WorkflowAssignmentModal/WorkflowAssignmentModal.spec.js

@@ -10,7 +10,7 @@ import * as nextRouter from 'next/router'
 describe('Component > WorkflowAssignmentModal', function () {
   let wrapper, closeFnSpy, dismissSpy
   const router = {
-    asPath: '/projects/foo/bar',
+    asPath: '/foo/bar',
     query: {
       owner: 'foo',
       project: 'bar'
@@ -60,7 +60,7 @@ describe('Component > WorkflowAssignmentModal', function () {
   it('should render a confirmation link', function () {
     const button = wrapper.find(NavLink)
     expect(button.props().link.text).to.equal(en.WorkflowAssignmentModal.confirm)
-    expect(button.props().link.href).to.equal('/projects/foo/bar/classify/workflow/1234')
+    expect(button.props().link.href).to.equal('/foo/bar/classify/workflow/1234')
   })
 
   it('should render a cancel button', function () {

packages/app-project/src/screens/ClassifyPage/components/WorkflowMenuModal/WorkflowMenuModal.js

@@ -25,7 +25,7 @@ export default function WorkflowMenuModal({
       workflows={workflows}
     />
   )
-  let baseUrl = `/projects/${owner}/${project}/classify`
+  let baseUrl = `/${owner}/${project}/classify`
   if (workflowFromUrl) {
     modalContent = (
       <SubjectSetPicker

packages/app-project/src/screens/ProjectAboutPage/components/AboutDropdownNav/AboutDropdownNav.js

@@ -12,7 +12,7 @@ import AboutNavLink from '../AboutNavLink'
 export const AboutDropContent = ({ aboutNavLinks }) => {
   const router = useRouter()
   const { owner, project } = router.query
-  const baseUrl = `/projects/${owner}/${project}/about`
+  const baseUrl = `/${owner}/${project}/about`
 
   return (
     <Nav gap='xsmall' background={{ dark: 'dark-5', light: 'neutral-6' }} data-testid='mobile-about-pages-nav'>

packages/app-project/src/screens/ProjectAboutPage/components/AboutSidebar/AboutSidebar.js

@@ -6,7 +6,7 @@ import { arrayOf, object, string } from 'prop-types'
 const AboutSidebar = ({ aboutNavLinks }) => {
   const router = useRouter()
   const { owner, project } = router.query
-  const baseUrl = `/projects/${owner}/${project}/about`
+  const baseUrl = `/${owner}/${project}/about`
 
   return (
     <Nav flex direction='column' gap='xsmall' data-testid='about-sidebar'>

packages/app-project/src/screens/ProjectAboutPage/components/TeamMember/TeamMember.js

@@ -62,7 +62,7 @@ export const StyledRole = styled(Box)`
 const TeamMember = ({ user }) => {
   const router = useRouter()
   const { owner, project } = router.query
-  const baseUrl = `/projects/${owner}/${project}/users`
+  const baseUrl = `/${owner}/${project}/users`
 
   const { publicRuntimeConfig = {} } = getConfig() || {}
   const assetPrefix = publicRuntimeConfig.assetPrefix || ''

packages/app-project/src/screens/ProjectAboutPage/components/TeamMember/TeamMember.spec.js

@@ -21,7 +21,7 @@ describe('Component > TeamMember', function () {
     const link = getByRole('link')
     expect(link).exists()
     expect(link.href).include(
-      '/projects/zooniverse/snapshot-serengeti/users/mock_user'
+      '/zooniverse/snapshot-serengeti/users/mock_user'
     )
   })
 

packages/app-project/src/screens/ProjectHomePage/components/Hero/components/Introduction/IntroductionContainer.js

@@ -18,7 +18,7 @@ class IntroductionContainer extends Component {
     const { router } = this.props
     const { owner, project } = router?.query || {}
     return {
-      href: `/projects/${owner}/${project}/about/research`
+      href: `/${owner}/${project}/about/research`
     }
   }
 

packages/app-project/src/screens/ProjectHomePage/components/Hero/components/Introduction/IntroductionContainer.spec.js

@@ -8,7 +8,7 @@ let componentWrapper
 
 const DESCRIPTION = 'Ligula vestibulum id natoque mus cursus sociis varius risus nunc'
 const ROUTER = {
-  asPath: '/projects/foo/bar',
+  asPath: '/foo/bar',
   query: {
     owner: 'foo',
     project: 'bar'
@@ -37,7 +37,7 @@ describe('Component > Hero > IntroductionContainer', function () {
   it('should pass down the expected props to the `Introduction` component', function () {
     expect(componentWrapper.prop('description')).to.equal(DESCRIPTION)
     expect(componentWrapper.prop('linkProps')).to.deep.equal({
-      href: '/projects/foo/bar/about/research'
+      href: '/foo/bar/about/research'
     })
     expect(componentWrapper.prop('title')).to.equal(TITLE)
   })

packages/app-project/src/screens/ProjectHomePage/components/ZooniverseTalk/components/JoinInButton/JoinInButtonContainer.js

@@ -10,7 +10,7 @@ class JoinInButtonContainer extends Component {
     const { router } = this.props
     const { owner, project } = router.query
     const linkProps = {
-      href: addQueryParams(`/projects/${owner}/${project}/talk`, router)
+      href: addQueryParams(`/${owner}/${project}/talk`, router)
     }
 
     return (

packages/app-project/src/screens/ProjectHomePage/components/ZooniverseTalk/components/JoinInButton/JoinInButtonContainer.spec.js

@@ -4,7 +4,7 @@ import { JoinInButtonContainer } from './JoinInButtonContainer'
 import JoinInButton from './JoinInButton'
 
 const ROUTER = {
-  asPath: '/projects/foo/bar',
+  asPath: '/foo/bar',
   query: {
     owner: 'foo',
     project: 'bar'
@@ -29,6 +29,6 @@ describe('Component > JoinInButtonContainer', function () {
   })
 
   it('should pass valid link props for Talk', function () {
-    expect(componentWrapper.prop('linkProps')).to.deep.equal({ href: '/projects/foo/bar/talk' })
+    expect(componentWrapper.prop('linkProps')).to.deep.equal({ href: '/foo/bar/talk' })
   })
 })

packages/app-project/src/shared/components/ProjectStatistics/ProjectStatisticsContainer.js

@@ -21,7 +21,7 @@ class ProjectStatisticsContainer extends Component {
     const { router } = this.props
     const { owner, project } = router.query
     return {
-      href: `/projects/${owner}/${project}/stats`
+      href: `/${owner}/${project}/stats`
     }
   }
 

packages/app-project/src/shared/components/ProjectStatistics/ProjectStatisticsContainer.spec.js

@@ -9,7 +9,7 @@ let projectStatisticsWrapper
 const CLASSIFICATIONS = 1
 const COMPLETED_SUBJECTS = 2
 const ROUTER = {
-  asPath: '/projects/foo/bar',
+  asPath: '/foo/bar',
   query: {
     owner: 'foo',
     project: 'bar'
@@ -48,7 +48,7 @@ describe('Component > ProjectStatisticsContainer', function () {
 
   it('should pass through a `linkProps` prop', function () {
     expect(projectStatisticsWrapper.prop('linkProps')).to.deep.equal({
-      href: `/projects/foo/bar/stats`
+      href: `/foo/bar/stats`
     })
   })
 

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

@@ -177,7 +177,7 @@ export default function SubjectPicker({ baseUrl, subjectSet, workflow }) {
 
 SubjectPicker.propTypes = {
   /**
-    Base URL for links eg. `/projects/${owner}/${project}/classify/workflow/${workflow.id}`
+    Base URL for links eg. `/${owner}/${project}/classify/workflow/${workflow.id}`
   */
   baseUrl: string.isRequired,
   /**

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

@@ -115,7 +115,7 @@ function SubjectSetPicker ({
 
 SubjectSetPicker.propTypes = {
   /**
-    Base URL for links eg. `/projects/${owner}/${project}/classify`
+    Base URL for links eg. `/${owner}/${project}/classify`
   */
   baseUrl: string.isRequired,
   /**

packages/app-project/src/shared/components/WorkflowSelector/components/WorkflowSelectButton/WorkflowSelectButton.js

@@ -22,7 +22,7 @@ function WorkflowSelectButton ({
   const router = useRouter()
   const { owner, project } = router?.query || {}
 
-  const url = `/projects/${owner}/${project}/classify/workflow/${workflow.id}`
+  const url = `/${owner}/${project}/classify/workflow/${workflow.id}`
 
   const href = addQueryParams(url, router)
   const completeness = parseInt(workflow.completeness * 100, 10)

packages/app-project/src/shared/components/WorkflowSelector/components/WorkflowSelectButton/WorkflowSelectButton.spec.js

@@ -16,7 +16,7 @@ describe('Component > WorkflowSelector > WorkflowSelectButton', function () {
   }
 
   const router = {
-    asPath: '/projects/foo/bar',
+    asPath: '/foo/bar',
     query: {
       owner: 'foo',
       project: 'bar'

packages/app-project/stores/Project.js

@@ -35,7 +35,7 @@ const Project = types
 
   .views(self => ({
     get baseUrl() {
-      return `/projects/${self.slug}`
+      return `/${self.slug}`
     },
 
     get defaultWorkflow() {

packages/app-project/stores/UI.js

@@ -87,7 +87,7 @@ const UI = types
       const { slug } = getRoot(self).project
       document.cookie = cookie.serialize('dismissedProjectAnnouncementBanner', self.dismissedProjectAnnouncementBanner, {
         domain: getCookieDomain(),
-        path: `/projects/${slug}`,
+        path: `/${slug}`,
       })
     },