react-components: lodash and font-awesome imports

- add webpack bundle analyser - import only the bell and envelope icons from Font Awesome. - replace `@fortawesome/react-fontawesome` and `@fortawesome/fontawesome-svg-core` with Grommet Icons `Blank`. - import only the lodash utilities that are used in the code. - mark `i18next` and `react-18next` as external dependencies in libraries. - update tests to query elements by their translation keys. - replace `mime-types` with `mime/lite`. Should reduce the build size by ~350k.
zooniverse · Nov 17, 2022 · 4c7a7c1 · 4c7a7c1
1 parent eef78b0
commit 4c7a7c1
Show file tree

Hide file tree

Showing 18 changed files with 175 additions and 57 deletions.
diff --git a/packages/app-project/src/components/AdminContainer/AdminContainer.spec.js b/packages/app-project/src/components/AdminContainer/AdminContainer.spec.js
@@ -34,7 +34,7 @@ describe('Components > AdminContainer', function () {
     it('should render nothing', function () {
       const wrapper = withStore({ project })
       render(<AdminContainer />, { wrapper })
-      const adminToggle = screen.queryByRole('checkbox', { name: 'Admin Mode' })
+      const adminToggle = screen.queryByRole('checkbox', { name: 'AdminCheckbox.label' })
       expect(adminToggle).to.be.null()
     })
   })
@@ -47,7 +47,7 @@ describe('Components > AdminContainer', function () {
       }
       const wrapper = withStore({ project, user })
       render(<AdminContainer />, { wrapper })
-      const adminToggle = screen.queryByRole('checkbox', { name: 'Admin Mode' })
+      const adminToggle = screen.queryByRole('checkbox', { name: 'AdminCheckbox.label' })
       expect(adminToggle).to.be.null()
     })
   })
@@ -61,7 +61,7 @@ describe('Components > AdminContainer', function () {
       }
       const wrapper = withStore({ project, user })
       render(<AdminContainer />, { wrapper })
-      const adminToggle = screen.queryByRole('checkbox', { name: 'Admin Mode' })
+      const adminToggle = screen.queryByRole('checkbox', { name: 'AdminCheckbox.label' })
       expect(adminToggle).to.be.ok()
     })
   })

diff --git a/packages/app-project/src/components/ZooHeaderWrapper/ZooHeaderWrapperContainer.spec.js b/packages/app-project/src/components/ZooHeaderWrapper/ZooHeaderWrapperContainer.spec.js
@@ -6,6 +6,7 @@ import { Grommet } from 'grommet'
 import zooTheme from '@zooniverse/grommet-theme'
 import { RouterContext } from 'next/dist/shared/lib/router-context'
 import auth from 'panoptes-client/lib/auth'
+import nock from 'nock'
 import sinon from 'sinon'
 
 import initStore from '@stores'
@@ -23,6 +24,20 @@ describe('Component > ZooHeaderWrapperContainer', function () {
   }
 
   beforeEach(function () {
+    nock('https://talk-staging.zooniverse.org')
+    .get('/notifications')
+    .query(true)
+    .reply(200, {})
+    .get('/conversations')
+    .query(true)
+    .reply(200, {})
+    // TODO: Recent Talk subjects are using the Panoptes client instead of the Talk API client.
+    nock('https://panoptes-staging.zooniverse.org/api')
+    .persist()
+    .get('/comments')
+    .query(true)
+    .reply(200, { comments: [] })
+
     sinon.stub(auth, 'signOut').callsFake(() => Promise.resolve())
     window.sessionStorage.setItem("subjectsSeenThisSession", JSON.stringify(["1234/5678"]))
     const snapshot = {
@@ -55,7 +70,7 @@ describe('Component > ZooHeaderWrapperContainer', function () {
         </Provider>
       </RouterContext.Provider>
     )
-    siteMenu = screen.getByRole('navigation', { name: 'Site' })
+    siteMenu = screen.getByRole('navigation', { name: 'ZooHeader.ariaLabel' })
   })
 
   afterEach(function () {
@@ -92,7 +107,7 @@ describe('Component > ZooHeaderWrapperContainer', function () {
 
     it('should navigate to ./?login=true', async function () {
       const user = userEvent.setup({ delay: null })
-      signInButton = screen.getByRole('button', { name: 'Sign In' })
+      signInButton = screen.getByRole('button', { name: 'ZooHeader.SignedOutUserNavigation.signIn' })
       await user.click(signInButton)
       expect(pageURL.toString()).to.equal('https://localhost/?login=true')
     })
@@ -107,7 +122,7 @@ describe('Component > ZooHeaderWrapperContainer', function () {
 
     it('should navigate to ./?register=true', async function () {
       const user = userEvent.setup({ delay: null })
-      registerButton = screen.getByRole('button', { name: 'Register' })
+      registerButton = screen.getByRole('button', { name: 'ZooHeader.SignedOutUserNavigation.register' })
       await user.click(registerButton)
       expect(pageURL.toString()).to.equal('https://localhost/?register=true')
     })

diff --git a/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.spec.js b/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.spec.js
@@ -72,7 +72,7 @@ describe('Component > ProjectHomePage', function () {
     render(<ProjectHomePage />, { wrapper: withStore(snapshot) })
     homePage = screen.getByTestId('project-home-page')
     const zooFooter = within(homePage).getByRole('contentinfo')
-    adminToggle = within(zooFooter).queryByRole('checkbox', { name: 'Admin Mode' })
+    adminToggle = within(zooFooter).queryByRole('checkbox', { name: 'AdminCheckbox.label' })
   })
 
   after(function () {
@@ -142,7 +142,7 @@ describe('Component > ProjectHomePage', function () {
       render(<ProjectHomePage />, { wrapper: withStore(snapshot) })
       homePage = screen.getByTestId('project-home-page')
       const zooFooter = within(homePage).getByRole('contentinfo')
-      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
+      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'AdminCheckbox.label' })
     })
 
     it('should not have a border', function () {
@@ -182,7 +182,7 @@ describe('Component > ProjectHomePage', function () {
       render(<ProjectHomePage />, { wrapper: withStore(snapshot) })
       homePage = screen.getByTestId('project-home-page')
       const zooFooter = within(homePage).getByRole('contentinfo')
-      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
+      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'AdminCheckbox.label' })
     })
 
     after(function () {

diff --git a/packages/app-project/src/shared/components/StandardLayout/StandardLayout.spec.js b/packages/app-project/src/shared/components/StandardLayout/StandardLayout.spec.js
@@ -56,7 +56,7 @@ describe('Component > StandardLayout', function () {
     render(<StandardLayout />, { wrapper: withStore(snapshot)})
     zooHeader = screen.getByRole('banner')
     zooFooter = screen.getByRole('contentinfo')
-    adminToggle = within(zooFooter).queryByRole('checkbox', { name: 'Admin Mode' })
+    adminToggle = within(zooFooter).queryByRole('checkbox', { name: 'AdminCheckbox.label' })
   })
 
   after(function () {
@@ -157,7 +157,7 @@ describe('Component > StandardLayout', function () {
       render(<StandardLayout />, { wrapper: withStore(snapshot)})
       zooHeader = screen.getByRole('banner')
       zooFooter = screen.getByRole('contentinfo')
-      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
+      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'AdminCheckbox.label' })
     })
 
     it('should show the admin toggle', function () {
@@ -192,7 +192,7 @@ describe('Component > StandardLayout', function () {
       projectPage = screen.getByTestId('project-page')
       zooHeader = screen.getByRole('banner')
       zooFooter = screen.getByRole('contentinfo')
-      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
+      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'AdminCheckbox.label' })
     })
 
     after(function () {

diff --git a/packages/lib-classifier/package.json b/packages/lib-classifier/package.json
@@ -32,10 +32,8 @@
     "graphql": "~16.6.0",
     "graphql-request": "~5.0.0",
     "hash.js": "~1.1.7",
-    "i18next": "~22.0.1",
     "lodash": "~4.17.11",
     "mobx-utils": "~6.0.4",
-    "react-i18next": "~12.0.0",
     "react-player": "~2.11.0",
     "swr": "~1.3.0",
     "valid-url": "~1.0.9"
@@ -44,10 +42,12 @@
     "@zooniverse/grommet-theme": "3.x.x",
     "@zooniverse/panoptes-js": "~0.2.0",
     "@zooniverse/react-components": "~1.x.x",
-    "grommet": "~2.17.x",
+    "grommet": "~2.x.x",
     "grommet-icons": "~4.x.x",
+    "i18next": "22.x.x",
     "react": ">= 16.14",
     "react-dom": ">= 16.14",
+    "react-i18next": "12.x.x",
     "styled-components": "~5.x.x"
   },
   "devDependencies": {
@@ -86,6 +86,7 @@
     "grommet": "~2.27.0",
     "grommet-icons": "~4.8.0",
     "html-webpack-plugin": "~5.5.0",
+    "i18next": "~22.0.1",
     "ignore-styles": "~5.0.1",
     "jsdom": "~20.0.0",
     "mobx": "~6.7.0",
@@ -101,6 +102,7 @@
     "query-string": "~7.1.0",
     "react": "~17.0.2",
     "react-dom": "~17.0.2",
+    "react-i18next": "~12.0.0",
     "rosie": "~2.1.0",
     "sinon": "~14.0.0",
     "sinon-chai": "~3.7.0",

diff --git a/packages/lib-classifier/src/components/Classifier/components/MetaTools/MetaTools.spec.js b/packages/lib-classifier/src/components/Classifier/components/MetaTools/MetaTools.spec.js
@@ -43,7 +43,7 @@ describe('Components > MetaTools', function () {
         name: 'MetaTools.MetadataButton.label'
       })
       favourite = screen.getByRole('checkbox', {
-        name: 'Add to favorites'
+        name: 'FavouritesButton.add'
       })
       hidePreviousMarks = screen.queryByRole('checkbox', {
         name: 'FormView MetaTools.HidePreviousMarksDrawingButton.hide'
@@ -92,7 +92,7 @@ describe('Components > MetaTools', function () {
         name: 'MetaTools.MetadataButton.label'
       })
       favourite = screen.getByRole('checkbox', {
-        name: 'Add to favorites'
+        name: 'FavouritesButton.add'
       })
       hidePreviousMarks = screen.getByRole('checkbox', {
         name: 'FormView MetaTools.HidePreviousMarksDrawingButton.hide'
@@ -142,7 +142,7 @@ describe('Components > MetaTools', function () {
         name: 'MetaTools.MetadataButton.label'
       })
       favourite = screen.getByRole('checkbox', {
-        name: 'Add to favorites'
+        name: 'FavouritesButton.add'
       })
       hidePreviousMarks = screen.queryByRole('checkbox', {
         name: 'FormView MetaTools.HidePreviousMarksDrawingButton.hide'
@@ -193,7 +193,7 @@ describe('Components > MetaTools', function () {
         name: 'MetaTools.MetadataButton.label'
       })
       favourite = screen.getByRole('checkbox', {
-        name: 'Added to favorites'
+        name: 'FavouritesButton.remove'
       })
       hidePreviousMarks = screen.queryByRole('checkbox', {
         name: 'FormView MetaTools.HidePreviousMarksDrawingButton.hide'

diff --git a/...s/lib-classifier/src/components/Classifier/components/ModalTutorial/ModalTutorial.spec.js b/...s/lib-classifier/src/components/Classifier/components/ModalTutorial/ModalTutorial.spec.js
@@ -116,7 +116,7 @@ describe('ModalTutorial', function () {
           wrapper: withStore(store)
         }
       )
-      const closeButton = screen.getByRole('button', { name: 'Close' })
+      const closeButton = screen.getByRole('button', { name: 'CloseButton.close' })
       await user.click(closeButton)
       const upp = store.userProjectPreferences.active
       expect(upp?.preferences.tutorials_completed_at[tutorial.id]).to.equal(seen)
@@ -136,7 +136,7 @@ describe('ModalTutorial', function () {
       )
       let tutorialTitle = screen.getByRole('heading', { level: 2, name: 'ModalTutorial.title' })
       expect(tutorialTitle).to.be.ok()
-      const closeButton = screen.getByRole('button', { name: 'Close' })
+      const closeButton = screen.getByRole('button', { name: 'CloseButton.close' })
       await user.click(closeButton)
       tutorialTitle = screen.queryByRole('heading', { level: 2, name: 'ModalTutorial.title' })
       expect(tutorialTitle).to.be.null()

diff --git a/packages/lib-classifier/webpack.dist.js b/packages/lib-classifier/webpack.dist.js
@@ -28,8 +28,10 @@ module.exports = {
     '@zooniverse/react-components',
     'grommet',
     'grommet-icons',
+    'i18next',
     'react',
     'react-dom',
+    'react-i18next',
     'styled-components'
   ],
   mode: 'production',

diff --git a/packages/lib-react-components/package.json b/packages/lib-react-components/package.json
@@ -16,16 +16,12 @@
     "test:ci": "mocha --config ./test/.mocharc.json --reporter=min \"./src/**/*.spec.js\""
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "~6.2.0",
     "@fortawesome/free-regular-svg-icons": "~6.2.0",
     "@fortawesome/free-solid-svg-icons": "~6.2.0",
-    "@fortawesome/react-fontawesome": "~0.2.0",
     "@tippyjs/react": "~4.2.6",
     "formik": "~2.2.9",
-    "i18next": "~22.0.1",
-    "mime-types": "~2.1.21",
+    "mime": "~3.0.0",
     "prop-types": "~15.8.1",
-    "react-i18next": "~12.0.0",
     "react-resize-detector": "~7.1.1",
     "react-rnd": "10.3.7",
     "remark": "~12.0.1",
@@ -39,10 +35,12 @@
   },
   "peerDependencies": {
     "@zooniverse/grommet-theme": "3.x.x",
-    "grommet": "2.17.x",
+    "grommet": "2.x.x",
     "grommet-icons": "4.x.x",
+    "i18next": "22.x.x",
     "react": ">= 16.14",
     "react-dom": ">= 16.14",
+    "react-i18next": "12.x.x",
     "styled-components": "5.x.x"
   },
   "devDependencies": {
@@ -75,6 +73,7 @@
     "enzyme": "~3.11.0",
     "grommet": "~2.27.0",
     "grommet-icons": "~4.8.0",
+    "i18next": "~22.0.1",
     "jsdom": "~20.0.0",
     "lodash": "~4.17.11",
     "mocha": "~10.1.0",
@@ -83,6 +82,7 @@
     "polished": "~4.2.2",
     "react": "~17.0.2",
     "react-dom": "~17.0.2",
+    "react-i18next": "~12.0.0",
     "rehype-stringify": "~8.0.0",
     "remark-rehype": "~8.1.0",
     "sinon": "~14.0.0",
@@ -92,6 +92,7 @@
     "style-loader": "~3.3.1",
     "styled-components": "~5.3.3",
     "webpack": "~5.75.0",
+    "webpack-bundle-analyzer": "~4.6.1",
     "webpack-cli": "~5.0.0"
   },
   "engines": {

diff --git a/packages/lib-react-components/src/Media/Media.js b/packages/lib-react-components/src/Media/Media.js
@@ -1,12 +1,13 @@
 import React from 'react'
-import mime from 'mime-types'
+import mime from 'mime/lite'
 import Audio from './components/Audio'
 import ThumbnailImage from './components/ThumbnailImage'
 import Video from './components/Video'
 import { propTypes, defaultProps } from './helpers/mediaPropTypes'
 
+
 export default function Media (props) {
-  const mimeType = mime.lookup(props.src)
+  const mimeType = mime.getType(props.src)
 
   if (mimeType && mimeType.includes('image')) {
     return (

diff --git a/packages/lib-react-components/src/ZooFooter/ZooFooter.stories.js b/packages/lib-react-components/src/ZooFooter/ZooFooter.stories.js
@@ -1,7 +1,7 @@
 import { linkTo } from '@storybook/addon-links';
 import zooTheme from '@zooniverse/grommet-theme';
 import { Box, Grommet } from 'grommet';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import React from 'react';
 
 import ZooFooter from './ZooFooter';

diff --git a/packages/lib-react-components/src/ZooFooter/helpers/zipLabelsAndUrls/zipLabelsAndUrls.js b/packages/lib-react-components/src/ZooFooter/helpers/zipLabelsAndUrls/zipLabelsAndUrls.js
@@ -1,4 +1,4 @@
-import { zipWith } from 'lodash'
+import zipWith from 'lodash/zipWith'
 
 export default function zipLabelsAndUrls (labels, urls) {
   return zipWith(labels, urls, zipFunction)

diff --git a/packages/lib-react-components/src/ZooHeader/ZooHeader.stories.js b/packages/lib-react-components/src/ZooHeader/ZooHeader.stories.js
@@ -76,13 +76,15 @@ export function SignedIn() {
   )
 }
 
-export function SignedInNarrowWindowView() {
+export function SignedInNarrowWindowView({ unreadMessages, unreadNotifications }) {
   return(
     <Grommet theme={zooTheme} full>
       <ZooHeader
         isAdmin
         signIn={signIn}
         signOut={signOut}
+        unreadMessages={unreadMessages}
+        unreadNotifications={unreadNotifications}
         user={{
           admin: true,
           display_name: 'Zoo Tester',
@@ -92,6 +94,10 @@ export function SignedInNarrowWindowView() {
     </Grommet>
   )
 }
+SignedInNarrowWindowView.args = {
+  unreadNotifications: 0,
+  unreadMessages: 3
+}
 
 SignedInNarrowWindowView.parameters = {
   viewport: {