[code-infra] Run react-17 and react-next workflows on the next branch (#42690)

Author: cherniavskii

.circleci/config.yml

@@ -889,48 +889,106 @@ workflows:
     jobs:
       - test_profile:
           <<: *default-context
+
+  # This workflow can be triggered manually on the PR
   react-17:
+    when:
+      equal: [react-17, << pipeline.parameters.workflow >>]
+    jobs:
+      - test_unit:
+          <<: *default-context
+          react-version: ^17.0.0
+          name: test_unit-react@17
+      - test_browser:
+          <<: *default-context
+          react-version: ^17.0.0
+          name: test_browser-react@17
+      - test_regressions:
+          <<: *default-context
+          react-version: ^17.0.0
+          name: test_regressions-react@17
+      - test_e2e:
+          <<: *default-context
+          react-version: ^17.0.0
+          name: test_e2e-react@17
+
+  # This workflow is identical to react-17, but scheduled
+  react-17-cron:
     triggers:
       - schedule:
           cron: '0 0 * * *'
           filters:
             branches:
               only:
                 - master
+                - next
     jobs:
       - test_unit:
           <<: *default-context
           react-version: ^17.0.0
+          name: test_unit-react@17
       - test_browser:
           <<: *default-context
           react-version: ^17.0.0
+          name: test_browser-react@17
       - test_regressions:
           <<: *default-context
           react-version: ^17.0.0
+          name: test_regressions-react@17
       - test_e2e:
           <<: *default-context
           react-version: ^17.0.0
+          name: test_e2e-react@17
+
+  # This workflow can be triggered manually on the PR
   react-next:
+    when:
+      equal: [react-next, << pipeline.parameters.workflow >>]
+    jobs:
+      - test_unit:
+          <<: *default-context
+          react-version: next
+          name: test_unit-react@next
+      - test_browser:
+          <<: *default-context
+          react-version: next
+          name: test_browser-react@next
+      - test_regressions:
+          <<: *default-context
+          react-version: next
+          name: test_regressions-react@next
+      - test_e2e:
+          <<: *default-context
+          react-version: next
+          name: test_e2e-react@next
+  # This workflow is identical to react-next, but scheduled
+  react-next-cron:
     triggers:
       - schedule:
           cron: '0 0 * * *'
           filters:
             branches:
               only:
                 - master
+                - next
     jobs:
       - test_unit:
           <<: *default-context
           react-version: next
+          name: test_unit-react@next
       - test_browser:
           <<: *default-context
           react-version: next
+          name: test_browser-react@next
       - test_regressions:
           <<: *default-context
           react-version: next
+          name: test_regressions-react@next
       - test_e2e:
           <<: *default-context
           react-version: next
+          name: test_e2e-react@next
+
   typescript-next:
     triggers:
       - schedule:
@@ -939,6 +997,7 @@ workflows:
             branches:
               only:
                 - master
+                - next
     jobs:
       - test_types_next:
           <<: *default-context

scripts/useReactVersion.mjs

@@ -97,6 +97,17 @@ async function main(version) {
 
   // add newline for clean diff
   fs.writeFileSync(packageJsonPath, `${JSON.stringify(packageJson, null, 2)}${os.EOL}`);
+
+  console.log('Installing dependencies...');
+  const pnpmInstall = childProcess.spawn('pnpm', ['install', '--no-frozen-lockfile'], {
+    shell: true,
+    stdio: ['inherit', 'inherit', 'inherit'],
+  });
+  pnpmInstall.on('exit', (exitCode) => {
+    if (exitCode !== 0) {
+      throw new Error('Failed to install dependencies');
+    }
+  });
 }
 
 const [version = process.env.REACT_VERSION] = process.argv.slice(2);

test/README.md

@@ -244,7 +244,11 @@ For example, in https://app.circleci.com/pipelines/github/mui/material-ui/32796/
 
 ### Testing multiple versions of React
 
-You can check integration of different versions of React (for example different [release channels](https://react.dev/community/versioning-policy) or PRs to React) by running `node scripts/useReactVersion.mjs <version>`.
+You can check integration of different versions of React (for example different [release channels](https://react.dev/community/versioning-policy) or PRs to React) by running:
+
+```bash
+pnpm use-react-version <version>
+```
 
 Possible values for `version`:
 
@@ -254,6 +258,27 @@ Possible values for `version`:
 
 #### CI
 
+##### Circle CI web interface
+
+There are two workflows that can be triggered for any given PR manually in the CircleCI web interface:
+
+- `react-next`
+- `react-17`
+
+Follow these steps:
+
+1. Go to https://app.circleci.com/pipelines/github/mui/material-ui?branch=pull/PR_NUMBER/head and replace `PR_NUMBER` with the PR number you want to test.
+2. Click `Trigger Pipeline` button.
+3. Expand `Add parameters (optional)` and add the following parameter:
+
+   | Parameter type | Name       | Value                      |
+   | :------------- | :--------- | :------------------------- |
+   | `string`       | `workflow` | `react-next` or `react-17` |
+
+4. Click `Trigger Pipeline` button.
+
+##### API request
+
 You can pass the same `version` to our CircleCI pipeline as well:
 
 With the following API request we're triggering a run of the default workflow in