Merge branch 'master' into stats-adr

.github/dependabot.yml

@@ -10,6 +10,19 @@ updates:
     schedule:
       interval: "daily"
     open-pull-requests-limit: 15
+    groups:
+      sentry:
+        patterns:
+          - "@sentry*"
+      storybook:
+        patterns:
+          - "@storybook*"
+          - "storybook"
+        exclude-patterns:
+          - "storybook-react-i18next"
+      visx:
+        patterns:
+          - "@visx*"
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:

.github/workflows/ci-build.yml

@@ -21,6 +21,7 @@ jobs:
 
       - run: yarn install --production=false --frozen-lockfile --ignore-scripts
       - run: yarn workspace @zooniverse/react-components build:es6
+      - run: yarn workspace @zooniverse/subject-viewers build:es6
       - run: yarn workspace @zooniverse/classifier build:es6
       - run: yarn workspace @zooniverse/fe-project build
 

package.json

@@ -12,7 +12,7 @@
     "@storybook/storybook-deployer": "~2.8.10",
     "coveralls": "~3.1.0",
     "lerna": "~8.1.2",
-    "nyc": "~15.1.0",
+    "nyc": "~17.1.0",
     "snazzy": "~9.0.0"
   },
   "scripts": {

packages/app-project/.gitignore

@@ -1,2 +1,3 @@
 node_modules
 .next
+storybook-static

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

@@ -36,6 +36,7 @@ const config = {
   docs: {
     autodocs: 'tag'
   },
+  staticDirs: ['../public', '../storybook-public'],
   webpackFinal
 }
 export default config

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

@@ -1,3 +1,4 @@
+import { initialize, mswLoader } from 'msw-storybook-addon'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import i18n from './lib/i18n'
 import zooTheme from '@zooniverse/grommet-theme'
@@ -9,6 +10,14 @@ const background = {
   light: 'light-1'
 }
 
+// Initialize MSW
+initialize({
+  serviceWorker: {
+    url: './mockServiceWorker.js',
+  },
+  onUnhandledRequest: 'bypass',
+})
+
 const globalTypes = {
   theme: {
     name: 'Grommet Theme',
@@ -56,6 +65,7 @@ const preview = {
   },
   decorators,
   globalTypes,
+  loaders: [mswLoader]
 }
 
 export default preview

packages/app-project/package.json

@@ -17,7 +17,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@sentry/nextjs": "~8.35.0",
+    "@sentry/nextjs": "~8.38.0",
     "@sindresorhus/string-hash": "~1.2.0",
     "@visx/axis": "~3.10.1",
     "@visx/group": "~3.3.0",
@@ -37,7 +37,7 @@
     "graphql-request": "~6.1.0",
     "grommet": "~2.41.0",
     "grommet-icons": "~4.12.0",
-    "i18next": "~23.14.0",
+    "i18next": "~23.16.5",
     "lodash": "~4.17.11",
     "million": "~3.1.11",
     "mobx": "~6.12.0",
@@ -46,7 +46,7 @@
     "mobx-state-tree": "~5.4.0",
     "morgan": "^1.10.0",
     "newrelic": "~12.3.1",
-    "next": "~14.2.6",
+    "next": "~14.2.7",
     "next-i18next": "~15.3.1",
     "panoptes-client": "~5.6.0",
     "path-match": "~1.2.4",
@@ -57,7 +57,7 @@
     "react-resize-detector": "~9.1.0",
     "styled-components": "~5.3.3",
     "swr": "~2.2.0",
-    "validator": "~13.11.0"
+    "validator": "~13.12.0"
   },
   "devDependencies": {
     "@babel/register": "~7.25.9",
@@ -75,10 +75,12 @@
     "chai-dom": "~1.12.0",
     "dirty-chai": "~2.0.1",
     "enzyme": "~3.11.0",
-    "eslint-config-next": "~13.5.6",
+    "eslint-config-next": "~14.2.7",
     "eslint-plugin-jsx-a11y": "~6.10.1",
     "jsdom": "~24.0.0",
     "mocha": "~10.8.2",
+    "msw": "~2.5.1",
+    "msw-storybook-addon": "~2.0.3",
     "nock": "~13.5.1",
     "selfsigned": "~2.4.1",
     "sinon": "~17.0.0",
@@ -88,5 +90,10 @@
   },
   "engines": {
     "node": ">=20.5"
+  },
+  "msw": {
+    "workerDirectory": [
+      "storybook-public"
+    ]
   }
 }

packages/app-project/src/helpers/fetchWorkflowsHelper/fetchWorkflowsHelper.js

@@ -3,11 +3,12 @@ import { panoptes } from '@zooniverse/panoptes-js'
 import getServerSideAPIHost from '@helpers/getServerSideAPIHost'
 import logToSentry from '@helpers/logger/logToSentry.js'
 
-async function fetchWorkflowData(workflows, env) {
+/* Helper function to fetch data for multiple workflows */
+async function fetchWorkflowData(workflows, env, complete = false) {
   const { headers, host } = getServerSideAPIHost(env)
   try {
     const query = {
-      complete: false,
+      complete,
       env,
       fields: 'completeness,configuration,display_name,grouped,prioritized',
       id: workflows.join(',')
@@ -20,6 +21,7 @@ async function fetchWorkflowData(workflows, env) {
   }
 }
 
+/* Helper function to fetch workflow data regardless of completion status */
 async function fetchSingleWorkflow(workflowID, env) {
   const { headers, host } = getServerSideAPIHost(env)
   try {
@@ -58,7 +60,8 @@ async function fetchDisplayNames(language, workflows, env) {
   return displayNames
 }
 
-async function buildWorkflow(workflow, displayName, env) {
+/* Attach the displayName to a workflow object once it is fetched */
+async function buildWorkflow(workflow, displayName) {
   const workflowData = {
     completeness: workflow.completeness || 0,
     configuration: workflow.configuration,
@@ -67,12 +70,12 @@ async function buildWorkflow(workflow, displayName, env) {
     id: workflow.id,
     links: workflow.links,
     prioritized: workflow.prioritized,
-    subjectSets: []
   }
 
   return workflowData
 }
 
+/* order is specified by the project owner in the lab */
 function orderWorkflows(workflows, order) {
   const workflowsByID = {};
   workflows.forEach((workflow) => { workflowsByID[workflow.id] = workflow; });
@@ -92,36 +95,53 @@ function orderWorkflows(workflows, order) {
 async function fetchWorkflowsHelper(
     /* the current locale */
     language = 'en',
-    /* an array of workflow IDs to fetch */
+    /* an array of workflow IDs to fetch, usually from getStaticPageProps() */
     workflowIDs,
-    /* a specific workflow ID to fetch */
+    /* a specific workflow ID to fetch, usually from getStaticPageProps() */
     workflowID,
-    /* display order of workflow IDs, specified by the project owner. */
+    /* display order of workflow IDs, specified by the project owner in the lab. */
     workflowOrder = [],
     /* API environment, production | staging. */
     env
   ) {
-  const workflows = await fetchWorkflowData(workflowIDs, env)
+  let returnedWorkflows = []
+
+  // Fetching multiple workflows for the project pages
+  // When a project has active, incomplete workflows, return those so volunteers classifies them
+  const incompleteWorkflows = await fetchWorkflowData(workflowIDs, env, false)
+  if (incompleteWorkflows?.length) {
+    returnedWorkflows = incompleteWorkflows
+  }
+
+  // If `complete: false` returns zero workflows, fetch all active workflows regardless of completeness
+  // so volunteers can still view the Classify page for a finished project or project out of data
+  if (!incompleteWorkflows?.length) {
+    const completedWorkflows = await fetchWorkflowData(workflowIDs, env, true)
+    returnedWorkflows = completedWorkflows
+  }
+
+  // When a single workflowID is provided, this usually means the project has 1 active workflow
+  // or the url includes is a specific workflow id
   if (workflowID) {
-    const activeWorkflow = workflows.find(workflow => workflow.id === workflowID)
+    const activeWorkflow = returnedWorkflows.find(workflow => workflow.id === workflowID)
     if (!activeWorkflow) {
-      /*
-        Always fetch specified workflows, even if they're complete.
-      */
       const workflow = await fetchSingleWorkflow(workflowID, env)
-      workflows.push(workflow)
+      returnedWorkflows.push(workflow)
     }
   }
-  const workflowIds = workflows.map(workflow => workflow.id)
-  const displayNames = await fetchDisplayNames(language, workflowIds, env)
 
-  const awaitWorkflows = workflows.map(workflow => {
+  // Get the display names of each workflow for the WorkflowSelector UI depending on language
+  const workflowIds = returnedWorkflows.map(workflow => workflow.id)
+  const displayNames = await fetchDisplayNames(language, workflowIds, env)
+  const awaitWorkflows = returnedWorkflows.map(workflow => {
     const displayName = displayNames[workflow.id] || workflow.display_name
-    return buildWorkflow(workflow, displayName, env)
+    return buildWorkflow(workflow, displayName)
   })
   const workflowStatuses = await Promise.allSettled(awaitWorkflows)
-  const workflowsWithSubjectSets = workflowStatuses.map(result => result.value || result.reason)
-  const orderedWorkflows = orderWorkflows(workflowsWithSubjectSets, workflowOrder)
+  const workflowsWithDisplayNames = workflowStatuses.map(promiseResult => promiseResult.value || promiseResult.reason)
+
+  // Order the workflows according to order set my project owner in the lab
+  const orderedWorkflows = orderWorkflows(workflowsWithDisplayNames, workflowOrder)
   return orderedWorkflows
 }