app-project: React Hooks error in WorkflowAssignmentModal

[eatyourgreens]

Package

• app-project

  Describe the bug

  Spotted while running the tests for the project app. There's a useState hook that appears to run conditionally.

  Component > StandardLayout
  Warning: React has detected a change in the order of Hooks called by WorkflowAssignmentModal. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks
  
  Previous render            Next render
  ------------------------------------------------------
  1. useRef                     useRef
  2. useDebugValue              useDebugValue
  3. useSyncExternalStore       useSyncExternalStore
  4. useContext                 useContext
  5. useContext                 useContext
  6. useCallback                useCallback
  7. useState                   useState
  8. useRef                     useRef
  9. useEffect                  useEffect
  10. useRef                    useRef
  11. useEffect                 useEffect
  12. useEffect                 useEffect
  13. useState                  useContext
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  
  at WorkflowAssignmentModal (/Users/jimodonnell/zooniverse/front-end-monorepo/node_modules/mobx-react-lite/dist/mobxreactlite.cjs.development.js:247:12)
  at main
  at I (/Users/jimodonnell/zooniverse/front-end-monorepo/node_modules/styled-components/dist/styled-components.cjs.js:1:19114)
  at /Users/jimodonnell/zooniverse/front-end-monorepo/node_modules/grommet/components/Box/Box.js:22:24
  at div

To Reproduce

Run the tests for the project app and check the output for StandardLayout. The tests break the rules of hooks, but still pass, so it's easy to miss this error. I only noticed it because it generated a large block of red text in the terminal, and I happened to be watching when the tests ran.

Expected behavior

React hooks have to run in the same order during every render of a component. Breaking the rules of hooks should probably fail the CI tests.

[goplayoutside3]

Trying to replicate this by running yarn test isolated to StandardLayout. Has this warning been resolved by recent changes to the workflow assignment feature?

[eatyourgreens]

It's still showing up in the project app tests, but I don't know how to isolate it.

https://github.com/zooniverse/front-end-monorepo/actions/runs/12019334877/job/33505680307#step:9:676 (around about line 669 in the logs.)

[goplayoutside3]

Weird. It looks like the warning is generated by ClassifyPageContainer, and even specifies the test is wrapped by enzyme, which is true of ClassifyPageContainer.spec.js, but isolating those tests and running yarn test:ci does not replicate the warning locally.