Update to React 18

.github/workflows/annotated-pkgs.yml

@@ -24,24 +24,32 @@ jobs:
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
+        env:
+          FORCE_COLOR: 0
         with:
-          node-version: "14"
+          node-version: 16
 
       - name: Install yarn 3
         run: npm i -g yarn
 
       - name: Install package dependencies
         run: yarn install
 
+      - name: Test that docusarus compiles
+        run: |
+          yarn workspaces list
+          yarn docs:build
+
       - name: Build packages
         run: yarn workspaces foreach -ptA run build
 
       - name: Build packages with legacy setup
-        run: cd packages/global-context-store && npm install && npm run build
-
-      - name: Test that storybook compiles
-        run: yarn workspace sb build-storybook
-
-      - name: Test that docusarus compiles
-        run: yarn docs:build
+        run:
+          cd packages/global-context-store && npm install && npm run build
+
+          # Disabling storybook / components for now. Will re-evaluate
+          # and move to separate repo if needed - Jan 26, 2023
+          #
+          # - name: Test that storybook compiles
+          # run: yarn workspace sb build-storybook

.github/workflows/cypress-end-to-end-tests.yml

@@ -29,6 +29,13 @@ jobs:
       - uses: actions/checkout@v3
         with:
           fetch-depth: 2
+      # Workaround to avoid Post Use step failures. See: https://github.com/actions/setup-node/issues/317
+      - run: mkdir -p /home/runner/work/Mephisto/Mephisto/.yarn/cache
+        continue-on-error: true
+      - uses: actions/setup-node@v3
+        with:
+          cache: "yarn"
+          node-version: 16
       - uses: dorny/paths-filter@v2
         id: filter
         with:
@@ -96,13 +103,13 @@ jobs:
       - name: ⌛️ Running cypress tests
         uses: cypress-io/github-action@v3.1.0
         with:
+          build: npm i -D cypress@11
           install: false
           browser: chrome
           project: ./mephisto/abstractions/blueprints/static_html_task/source
           config-file: ./cypress.config.js
           start: python ./examples/simple_static_task/static_test_script.py
           wait-on: "http://localhost:3000/?worker_id=x&assignment_id=1"
-          command-prefix: yarn dlx
           headless: true
 
   # Learn more about this test here: https://github.com/facebookresearch/Mephisto/pull/795
@@ -143,13 +150,13 @@ jobs:
       - name: ⌛️ Running cypress tests
         uses: cypress-io/github-action@v3.1.0
         with:
+          build: npm i -D cypress@11
           install: false
           browser: chrome
           project: ./examples/static_react_task/webapp
           config-file: ./cypress.config.js
           start: python examples/static_react_task/run_task.py mephisto.task.post_install_script=link_mephisto_task.sh
           wait-on: "http://localhost:3000/?worker_id=x&assignment_id=1"
-          command-prefix: yarn dlx
           headless: true
 
   # Learn more about the remote_procedure_tests here: https://github.com/facebookresearch/Mephisto/pull/800
@@ -190,13 +197,13 @@ jobs:
       - name: ⌛️ Running cypress tests
         uses: cypress-io/github-action@v3.1.0
         with:
+          build: npm i -D cypress@11
           install: false
           browser: chrome
           project: ./examples/remote_procedure/template/webapp
           config-file: ./cypress.config.js
           start: python examples/remote_procedure/template/run_task.py mephisto.task.post_install_script=link_mephisto_task.sh
           wait-on: "http://localhost:3000/?worker_id=x&assignment_id=1"
-          command-prefix: yarn dlx
           headless: true
 
   remote_procedure_mnist:
@@ -238,13 +245,13 @@ jobs:
       - name: ⌛️ Running cypress tests
         uses: cypress-io/github-action@v3.1.0
         with:
+          build: npm i -D cypress@11
           install: false
           browser: chrome
           project: ./examples/remote_procedure/mnist/webapp
           config-file: ./cypress.config.js
           start: python examples/remote_procedure/mnist/run_task.py mephisto.task.post_install_script=link_mephisto_task.sh
           wait-on: "http://localhost:3000/?worker_id=x&assignment_id=1"
-          command-prefix: yarn dlx
           headless: true
 
   remote_procedure_toxicity_detection:
@@ -284,13 +291,13 @@ jobs:
       - name: ⌛️ Running cypress tests
         uses: cypress-io/github-action@v3.1.0
         with:
+          build: npm i -D cypress@11
           install: false
           browser: chrome
           project: ./examples/remote_procedure/toxicity_detection/webapp
           config-file: ./cypress.config.js
           start: python examples/remote_procedure/toxicity_detection/run_task.py mephisto.task.post_install_script=link_mephisto_task.sh
           wait-on: "http://localhost:3000/?worker_id=x&assignment_id=1"
-          command-prefix: yarn dlx
           headless: true
 
   # Learn more about this test here: https://github.com/facebookresearch/Mephisto/pull/833
@@ -339,14 +346,14 @@ jobs:
       - name: ⌛️ Running pre-submission cypress tests
         uses: cypress-io/github-action@v3.1.0
         with:
+          build: npm i -D cypress@11
           install: false
           browser: chrome
           project: ./examples/static_react_task_with_tips/webapp
           config-file: ./cypress.config.js
           spec: ./examples/static_react_task_with_tips/webapp/cypress/e2e/pre_submission_tests/*
           start: python examples/static_react_task_with_tips/run_task.py mephisto.task.force_rebuild=true mephisto.task.post_install_script=link_packages.sh
           wait-on: "http://localhost:3000/?worker_id=x&assignment_id=1"
-          command-prefix: yarn dlx
           headless: true
 
       - name: 🔪 Killing the web server
@@ -413,12 +420,12 @@ jobs:
       - name: ⌛️ Running post-submission cypress tests
         uses: cypress-io/github-action@v3.1.0
         with:
+          build: npm i -D cypress@11
           install: false
           project: ./examples/static_react_task_with_tips/webapp
           config-file: cypress.config.js
           spec: ./examples/static_react_task_with_tips/webapp/cypress/e2e/post_submission_tests/*
           start: python examples/static_react_task_with_tips/run_task.py mephisto.task.post_install_script=link_packages.sh mephisto.task.force_rebuild=true
           wait-on: "http://localhost:3000/?worker_id=x&assignment_id=1"
-          command-prefix: yarn dlx
           browser: chrome
           headless: true

.github/workflows/deploy-docs.yml

@@ -16,7 +16,9 @@ jobs:
         working-directory: docs/web
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
+        env:
+          FORCE_COLOR: 0
         with:
           node-version: 16.16.0
           cache: yarn

.prettierignore

@@ -1,4 +1,5 @@
 *.md
 **/build/*
 docs/web/static/python_api/*
-wrap_crowd_source.js
+wrap_crowd_source.js
+packages/mephisto-worker-addons/lib

.yarnrc.yml

@@ -31,5 +31,7 @@ plugins:
     spec: "@yarnpkg/plugin-workspace-tools"
   - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
     spec: "@yarnpkg/plugin-version"
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
 
 yarnPath: .yarn/releases/yarn-3.2.4.cjs

docs/storybook/package.json

@@ -7,17 +7,17 @@
     "@annotated/keypoint": "workspace:packages/annotated/keypoint",
     "@annotated/shell": "workspace:packages/annotated/shell",
     "@annotated/video-player": "workspace:packages/annotated/video-player",
-    "@blueprintjs/core": "^3.50.1",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "eslint-config-react-app": "^6.0.0",
+    "@blueprintjs/core": "^4.9.4",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "eslint-config-react-app": "^7.0.1",
     "global-context-store": "^1.0.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-scripts": "4.0.3",
-    "web-vitals": "^1.0.1"
+    "react-scripts": "5.0.1",
+    "web-vitals": "^3.0.1"
   },
   "scripts": {
     "storybook": "start-storybook -p 6006 -s public",
@@ -36,16 +36,16 @@
     ]
   },
   "devDependencies": {
-    "@mdx-js/react": "^1.6.22",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-docs": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
-    "@storybook/addon-links": "^6.3.8",
-    "@storybook/node-logger": "^6.3.8",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.8",
-    "prop-types": "^15.7.2",
-    "webpack-hot-middleware": "^2.25.1"
+    "@mdx-js/react": "^2.1.3",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-docs": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/node-logger": "^6.5.10",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.10",
+    "prop-types": "^15.8.1",
+    "webpack-hot-middleware": "^2.25.2"
   },
   "eslintConfig": {
     "overrides": [