Merge branch 'master' into hackday-image-hook

docs/PULL_REQUEST_TEMPLATE.md

@@ -4,7 +4,14 @@ Package:
 
 Closes # .
 
-Describe your changes:
+
+## Describe your changes:
+
+<em>Helpful explanations that will make your reviewer happy:</em>
+- What Zooniverse project should my reviewer use to review UX?
+- What user actions should my reviewer step through to review this PR?
+- Which storybook stories should be reviewed?
+- Are there plans for follow up PR’s to further fix this bug or develop this feature?
 
 
 # Review Checklist

packages/app-content-pages/package.json

@@ -28,7 +28,7 @@
     "counterpart": "~0.18.6",
     "dotenv-webpack": "~7.1.0",
     "express": "^4.17.1",
-    "grommet": "~2.17.4",
+    "grommet": "~2.20.1",
     "grommet-icons": "~4.7.0",
     "lodash": "~4.17.11",
     "mobx": "~6.3.9",

packages/app-project/.storybook/i18n.js

@@ -2,7 +2,7 @@ import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'
 
 const supportedLngs = ['en']
-const namespaces = ['screens']
+const namespaces = ['components', 'screens']
 
 i18n.use(initReactI18next).init({
   fallbackLng: 'en',

packages/app-project/package.json

@@ -18,7 +18,7 @@
     "test:ci": "BABEL_ENV=test mocha --config test/.mocharc.json --reporter=min \"./{src,pages,stores}/**/*.spec.js\""
   },
   "dependencies": {
-    "@artsy/fresnel": "~3.2.1",
+    "@artsy/fresnel": "~3.4.0",
     "@babel/plugin-proposal-decorators": "~7.17.0",
     "@sentry/browser": "~6.17.3",
     "@sentry/node": "~6.17.4",
@@ -44,7 +44,7 @@
     "express": "^4.17.1",
     "graphql": "~16.3.0",
     "graphql-request": "~4.0.0",
-    "grommet": "~2.17.4",
+    "grommet": "~2.20.1",
     "grommet-icons": "~4.7.0",
     "lodash": "~4.17.11",
     "luxon": "~2.3.0",
@@ -55,7 +55,7 @@
     "morgan": "^1.10.0",
     "newrelic": "~8.7.0",
     "next": "~12.0.9",
-    "next-i18next": "~10.2.0",
+    "next-i18next": "~10.3.0",
     "panoptes-client": "~3.3.2",
     "path-match": "~1.2.4",
     "polished": "~4.1.4",

packages/app-project/pages/[owner]/[project]/about/education.js

@@ -8,7 +8,7 @@ export async function getServerSideProps({ locale, params, query, req, res }) {
   return {
     notFound,
     props: {
-      ...(await serverSideTranslations(locale, ['screens'])),
+      ...(await serverSideTranslations(locale, ['components', 'screens'])),
       pageTitle: 'Education',
       pageType: 'education',
       ...props

packages/app-project/pages/[owner]/[project]/about/faq.js

@@ -8,7 +8,7 @@ export async function getServerSideProps({ locale, params, query, req, res }) {
   return {
     notFound,
     props: {
-      ...(await serverSideTranslations(locale, ['screens'])),
+      ...(await serverSideTranslations(locale, ['components', 'screens'])),
       pageTitle: 'FAQ',
       pageType: 'faq',
       ...props

packages/app-project/pages/[owner]/[project]/about/research.js

@@ -8,7 +8,7 @@ export async function getServerSideProps({ locale, params, query, req, res }) {
   return {
     notFound,
     props: {
-      ...(await serverSideTranslations(locale, ['screens'])),
+      ...(await serverSideTranslations(locale, ['components', 'screens'])),
       pageTitle: 'Research',
       pageType: 'science_case',
       ...props

packages/app-project/pages/[owner]/[project]/about/results.js

@@ -8,7 +8,7 @@ export async function getServerSideProps({ locale, params, query, req, res }) {
   return {
     notFound,
     props: {
-      ...(await serverSideTranslations(locale, ['screens'])),
+      ...(await serverSideTranslations(locale, ['components', 'screens'])),
       pageTitle: 'Results',
       pageType: 'results',
       ...props

packages/app-project/pages/[owner]/[project]/about/team.js

@@ -54,7 +54,7 @@ export async function getServerSideProps({ locale, params, query, req, res }) {
   return {
     notFound,
     props: {
-      ...(await serverSideTranslations(locale, ['screens'])),
+      ...(await serverSideTranslations(locale, ['components', 'screens'])),
       pageTitle: 'The Team',
       pageType: 'team',
       ...props,

packages/app-project/pages/[owner]/[project]/classify/index.js

@@ -21,7 +21,7 @@ export async function getServerSideProps({ locale, params, query, req, res }) {
   return ({
     notFound,
     props: {
-      ...(await serverSideTranslations(locale, ['screens'])),
+      ...(await serverSideTranslations(locale, ['components', 'screens'])),
       pageTitle: 'Classify',
       ...props
     }

packages/app-project/pages/[owner]/[project]/classify/workflow/[workflowID]/index.js

@@ -16,7 +16,7 @@ export async function getServerSideProps({ locale, params, query, req, res }) {
   return ({
     notFound,
     props: {
-      ...(await serverSideTranslations(locale, ['screens'])),
+      ...(await serverSideTranslations(locale, ['components', 'screens'])),
       ...defaultProps,
       pageTitle,
       workflowID : params.workflowID

packages/app-project/pages/[owner]/[project]/classify/workflow/[workflowID]/subject-set/[subjectSetID]/index.js

@@ -18,7 +18,7 @@ export async function getServerSideProps({ locale, params, query, req, res }) {
   return ({
     notFound,
     props : {
-      ...(await serverSideTranslations(locale, ['screens'])),
+      ...(await serverSideTranslations(locale, ['components', 'screens'])),
       ...defaultProps,
       pageTitle,
       subjectSetID,

packages/app-project/pages/[owner]/[project]/classify/workflow/[workflowID]/subject-set/[subjectSetID]/subject/[subjectID]/index.js

@@ -19,7 +19,7 @@ export async function getServerSideProps({ locale, params, query, req, res }) {
   return ({
     notFound,
     props: {
-      ...(await serverSideTranslations(locale, ['screens'])),
+      ...(await serverSideTranslations(locale, ['components', 'screens'])),
       ...defaultProps,
       pageTitle,
       subjectID,

packages/app-project/pages/[owner]/[project]/classify/workflow/[workflowID]/subject/[subjectID]/index.js

@@ -12,7 +12,7 @@ export async function getServerSideProps({ locale, params, query, req, res }) {
   return ({
     notFound,
     props: {
-      ...(await serverSideTranslations(locale, ['screens'])),
+      ...(await serverSideTranslations(locale, ['components', 'screens'])),
       ...defaultProps,
       pageTitle,
       subjectID,

packages/app-project/pages/[owner]/[project]/index.js

@@ -7,7 +7,7 @@ export async function getServerSideProps({ locale, params, query, req, res }) {
   return ({ 
     notFound,
     props: {
-      ...(await serverSideTranslations(locale, ['screens'])),
+      ...(await serverSideTranslations(locale, ['components', 'screens'])),
       ...props
     }
   })

packages/app-project/public/locales/en/components.json

@@ -0,0 +1,84 @@
+{
+  "Announcements": {
+    "AuthenticationInvitation": {
+      "announcement": "Please sign in or sign up to track your contributions.",
+      "register": "register",
+      "signIn": "sign in"
+    },
+    "FinishedAnnouncement": {
+      "announcement": "Finished! Looks like this project is out of data at the moment!",
+      "seeResults": "See Results"
+    }
+  },
+  "AuthModal": {
+    "LoginForm": {
+      "error": "Username or password is incorrect",
+      "forgot": "Forgot your password?",
+      "heading": "Welcome back!",
+      "instruction": "We're glad you're back! Sign in to pick up where you left off.",
+      "login": "Username or email address",
+      "password": "Password",
+      "placeholder": "e.g. ZooniverseFan123",
+      "signIn": "Sign in"
+    },
+    "RegisterForm": {
+      "betaListSignUp": "I'd like to help test new projects and be emailed when they're available (optional)",
+      "email": "Email Address (Required)",
+      "emailConfirm": "Confirm Email Address (Required)",
+      "emailConfirmError": "The email addresses do not match, please try again.",
+      "emailConflict": "An account with this address already exists",
+      "emailPlaceholder": "e.g. zoofan31@gmail.com",
+      "emailListSignUp": "It's ok to send me an email every once in a while (optional)",
+      "forgot": "Forgot your password?",
+      "heading": "Welcome back!",
+      "instruction": "Please create an account to start doing real research.",
+      "password": "Password (Required)",
+      "passwordConfirm": "Confirm Password (Required)",
+      "passwordConfirmError": "The passwords do not match, please try again.",
+      "privacyAgreement": "You agree to our privacy policy (required)",
+      "privacyAgreementError": "Agreeing to the privacy policy is required.",
+      "privacyLink": "Read our privacy policy",
+      "realName": "Real Name (Optional)",
+      "realNameHelp": "We'll use this to give you credit in scientific papers, posters, etc.",
+      "realNamePatternHelp": "Enter a name, not an email address", 
+      "realNamePlaceholder": "e.g. Maggie Smith",
+      "register": "Register",
+      "registering": "Registering...",
+      "underageConsent": "I confirm I am the parent/guardian and give permission for my child to register by providing my email address as the main contact address. Both I and my child understand and agree to the privacy policy (required)",
+      "underageEmail": "Parent/Guardian’s email address (Required)",
+      "underageEmailSignUp": "If you agree, we will periodically send email promoting new research-related projects or other information relating to our research. We will not use your contact information for commercial purposes. (optional)",
+      "underageNotRealName": "You’ll use this name to log in. It will be shown publicly. Don’t use your real name.",
+      "underageWithParent": "If you are under 16 years old, tick this box to confirm that you've completed the form with your parent or guardian",
+      "username": "Username (Required)",
+      "usernameConflict": "That username is taken",
+      "usernameHelp": "This will be shown publicly on message boards, etc.",
+      "usernamePatternHelp": "Usernames can only contain letters, numbers, '.','-', and '_'",
+      "usernamePlaceholder": "e.g. ZooniverseFan123"
+    }
+  },
+  "Head": {
+    "defaultDescription": "The Zooniverse is the world’s largest and most popular platform for people-powered research.",
+    "defaultTitle": "Projects",
+    "siteName": "Zooniverse - People-powered research"
+  },
+  "ProjectHeader": {
+    "about": "About",
+    "classify": "Classify",
+    "exploreProject": "Explore Project",
+    "talk": "Talk",
+    "collect": "Collect",
+    "recents": "Recents",
+    "ApprovedIcon": {
+      "title": "Zooniverse Approved"
+    },
+    "Avatar": {
+      "alt": "Project avatar for {{project}}"
+    },
+    "ProjectNav": {
+      "ariaLabel": "Project"
+    },
+    "UnderReviewLabel": {
+      "underReview": "under review"
+    }
+  }
+}

packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationContainer.js

@@ -1,31 +1,30 @@
-import { useState } from 'react';
+import { useState } from 'react'
 import styled from 'styled-components'
+import { useTranslation } from 'next-i18next'
+
 import { Anchor } from 'grommet'
 import NavLink from '@shared/components/NavLink'
 import GenericAnnouncement from '../GenericAnnouncement'
-import en from './locales/en'
-import counterpart from 'counterpart'
-
-counterpart.registerTranslations('en', en)
 
 const StyledAnchor = styled(Anchor)`
   line-height: 19px;
 `
 
 export default function AuthenticationInvitationContainer({ isVisible }) {
+  const { t } = useTranslation('components')
   const [dismissed, setDismissed] = useState(false)
   const { pathname } = window.location
   const signInLink = {
     href: `${pathname}?login=true`,
-    text: counterpart('AuthenticationInvitation.signIn')
+    text: t('Announcements.AuthenticationInvitation.signIn')
   }
   const registerLink = {
     href: `${pathname}?register=true`,
-    text: counterpart('AuthenticationInvitation.register')
+    text: t('Announcements.AuthenticationInvitation.register')
   }
 
   // TODO: maybe show project specific message here. Then fallback on generic.
-  const announcement = counterpart('AuthenticationInvitation.announcement')
+  const announcement = t('Announcements.AuthenticationInvitation.announcement')
 
   function dismissBanner() {
     setDismissed(true)
@@ -46,4 +45,4 @@ export default function AuthenticationInvitationContainer({ isVisible }) {
   }
 
   return null
-}
+}

packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationContainer.spec.js

@@ -4,8 +4,6 @@ import AuthenticationInvitationContainer from './AuthenticationInvitationContain
 import GenericAnnouncement from '../GenericAnnouncement'
 import NavLink from '@shared/components/NavLink'
 
-import en from './locales/en'
-
 describe('Component > AuthenticationInvitationContainer', function () {
   let wrapper, componentWrapper
 
@@ -22,24 +20,14 @@ describe('Component > AuthenticationInvitationContainer', function () {
     expect(componentWrapper).to.have.lengthOf(1)
   })
 
-  it('should pass down the required props', function () {
-    expect(componentWrapper.props().announcement).to.equal(en.AuthenticationInvitation.announcement)
-  })
-
   it('should have a link to the login form', function () {
     const signInLink = wrapper.find(NavLink).first()
-    expect(signInLink.props().link).to.deep.equal({
-      href: `${window.location.pathname}?login=true`,
-      text: en.AuthenticationInvitation.signIn
-    })
+    expect(signInLink.props().link.href).to.equal(`${window.location.pathname}?login=true`)
   })
 
   it('should have a link to the register form', function () {
     const registerLink = wrapper.find(NavLink).last()
-    expect(registerLink.props().link).to.deep.equal({
-      href: `${window.location.pathname}?register=true`,
-      text: en.AuthenticationInvitation.register
-    })
+    expect(registerLink.props().link.href).to.equal(`${window.location.pathname}?register=true`)
   })
 
   describe('when not visible', function () {
@@ -66,4 +54,4 @@ describe('Component > AuthenticationInvitationContainer', function () {
       expect(componentWrapper).to.have.lengthOf(0)
     })
   })
-})
+})

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

@@ -1,13 +1,10 @@
 import { MobXProviderContext, observer } from 'mobx-react'
 import { useContext } from 'react'
-import counterpart from 'counterpart'
+import { useTranslation } from 'next-i18next'
 
 import NavLink from '@shared/components/NavLink'
-import en from './locales/en'
 import GenericAnnouncement from '../GenericAnnouncement'
 
-counterpart.registerTranslations('en', en)
-
 function useStores(store) {
   const stores = useContext(MobXProviderContext)
   if (!store) {
@@ -23,14 +20,15 @@ function useStores(store) {
 }
 
 function FinishedAnnouncementConnector ({ store }) {
+  const { t } = useTranslation('components')
   const { 
     baseUrl = '',
     isVisible = false
   } = useStores(store)
-  const announcement = counterpart('FinishedAnnouncement.announcement')
+  const announcement = t('Announcements.FinishedAnnouncement.announcement')
   const link = {
     href: `${baseUrl}/about/results`,
-    text: counterpart('FinishedAnnouncement.seeResults')
+    text: t('Announcements.FinishedAnnouncement.seeResults')
   }
 
   if (isVisible) {

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

@@ -3,7 +3,6 @@ import zooTheme from '@zooniverse/grommet-theme'
 
 import { FinishedAnnouncementConnector } from './FinishedAnnouncementConnector'
 import GenericAnnouncement from '../GenericAnnouncement'
-import en from './locales/en'
 
 describe('Component > FinishedAnnouncementConnector', function () {
   let wrapper
@@ -38,8 +37,4 @@ describe('Component > FinishedAnnouncementConnector', function () {
     componentWrapper = wrapper.find(GenericAnnouncement)
     expect(componentWrapper).to.have.lengthOf(1)
   })
-
-  it('should pass down the required props', function () {
-    expect(componentWrapper.props().announcement).to.equal(en.FinishedAnnouncement.announcement)
-  })
 })