[docs] Replace latests tags with next in the codesandbox

[mnajdova]

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against b8f6d4e

[eps1lon]

This functionality has unit tests that should be updated. See https://app.circleci.com/pipelines/github/mui-org/material-ui/15855/workflows/4698d625-ec15-4b85-a196-bc04a45178e6/jobs/164858/parallel-runs/0/steps/0-106

[oliviertassinari]

@eps1lon On a broader note, we have discussed with Marija the option to use the codesandbox-ci version of the dependencies when building the preview of the pull request.

[eps1lon]

On a broader note, we have discussed with Marija the option to use the codesandbox-ci version of the dependencies when building the preview of the pull request.

You mean using resolved versions e.g. 16.13.1 or 4.9.3 instead of npm distribution tags e.g. latest or next? Had this on my mind for quite some time but never looked at the implementation. Definitely agree with the problem description. Distribution tags don't work well for codesandboxes. Especially if they're used for issue reports.

[oliviertassinari]

You mean using resolved versions e.g. 16.13.1 or 4.9.3 instead of npm distribution tags e.g. latest or next?

I was wondering about something is this order to allow testing the new demos in isolation from the Netlify preview of the pull requests:

diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js
index c4ef4d8af5..29582b0fc9 100644
--- a/docs/src/modules/utils/helpers.js
+++ b/docs/src/modules/utils/helpers.js
@@ -98,7 +98,7 @@ function getDependencies(raw, options = {}) {
   const versions = {
     'react-dom': reactVersion,
     react: reactVersion,
-    '@material-ui/core': 'latest',
+    '@material-ui/core': `https://pkg.csb.dev/mui-org/material-ui/commit/${process.env.COMMIT_REF}/@material-ui/core`,
     '@material-ui/icons': 'latest',
     '@material-ui/lab': 'latest',
     '@material-ui/styles': 'latest',

[eps1lon]

Ah ok, makes sense. This is a separate issue though. This change affects actual deployed docs versions.

[mnajdova]

Should we have something like this by default:
'@material-ui/core': 'https://pkg.csb.dev/mui-org/material-ui/commit/${process.env.COMMIT_REF}/@material-ui/core',
but use the next/latest for the prod build?

[eps1lon]

I'm not fully convinced this is a good idea. You want your local or prod environment to be as close as possible to the one you actually deploy. This idea completely changes how the environments behave. Do you create a csb that often from a deploy preview and want to test the version deployed to csb? How much time does it take you currently?

[oliviertassinari]

On a side note. I think that the change that will yield the most value is the one you are working on (latest -> next for the users).

Regarding using codesandbox-ci, it was meant as a suggestion to help the contributors. It started with Marija question around trying the utility classes out, which also resonate with people that want to try the changes our when reviewing pull requests.

[oliviertassinari]

Do you create a csb that often from a deploy preview and want to test the version deployed to csb? How much time does it take you currently?

@eps1lon I do once a week, at most. It takes about 5 minutes to open codesandbox CI. It's far from obvious that this exist for others, hard to find.

[mnajdova]

So should we just fix the tests on this PR and leave the ‘next’ tag?