[docs] Prepare scripts + E2E tests for migration (mui#3515)

.circleci/config.yml

@@ -9,13 +9,25 @@ parameters:
     description: The dist-tag of react to be used
     type: string
     default: stable
+  workflow:
+    description: The name of the workflow to run
+    type: string
+    default: pipeline
+  e2e-base-url:
+    description: The base url for running end-to-end test
+    type: string
+    default: ''
 
 defaults: &defaults
   parameters:
     react-dist-tag:
       description: The dist-tag of react to be used
       type: string
       default: << pipeline.parameters.react-dist-tag >>
+    e2e-base-url:
+      description: The base url for running end-to-end test
+      type: string
+      default: << pipeline.parameters.e2e-base-url >>
   environment:
     # Keep in sync with "Save playwright cache"
     PLAYWRIGHT_BROWSERS_PATH: /tmp/pw-browsers
@@ -210,6 +222,21 @@ jobs:
       - run:
           name: Run e2e tests
           command: yarn test:e2e
+  test_e2e_website:
+    <<: *defaults
+    docker:
+      - image: mcr.microsoft.com/playwright@sha256:f08e263c95e83334104e6e2fee047ad92062a03af6ae94c0f8686ba2b3014823
+        environment:
+          NODE_ENV: development # Needed if playwright is in `devDependencies`
+    steps:
+      - checkout
+      - install_js:
+          browsers: true
+      - run:
+          name: yarn test:e2e-website
+          command: yarn test:e2e-website
+          environment:
+            PLAYWRIGHT_TEST_BASE_URL: << parameters.e2e-base-url >>
   test_regressions:
     <<: *defaults
     docker:
@@ -252,6 +279,8 @@ jobs:
 workflows:
   version: 2
   pipeline:
+    when:
+      equal: [pipeline, << pipeline.parameters.workflow >>]
     jobs:
       - checkout
       - test_unit:
@@ -278,3 +307,11 @@ workflows:
       - test_performance:
           requires:
             - checkout
+  e2e-website:
+    when:
+      equal: [e2e-website, << pipeline.parameters.workflow >>]
+    jobs:
+      - checkout
+      - test_e2e_website:
+          requires:
+            - checkout

docs/data/pages.ts

@@ -0,0 +1,51 @@
+const pages = [
+  {
+    pathname: '/x/react-data-grid',
+    scopePathnames: ['/x/api/data-grid'],
+    title: 'Data Grid',
+    icon: 'TableViewIcon',
+    children: [
+      { pathname: '/x/react-data-grid', title: 'Overview' },
+      { pathname: '/x/react-data-grid/demo' },
+      { pathname: '/x/react-data-grid/getting-started' },
+      { pathname: '/x/react-data-grid/migration-v4', title: 'Migration From v4' },
+      { pathname: '/x/react-data-grid/layout' },
+      { pathname: '/x/react-data-grid/columns' },
+      { pathname: '/x/react-data-grid/rows' },
+      { pathname: '/x/react-data-grid/editing' },
+      { pathname: '/x/react-data-grid/sorting' },
+      { pathname: '/x/react-data-grid/filtering' },
+      { pathname: '/x/react-data-grid/pagination' },
+      { pathname: '/x/react-data-grid/selection' },
+      { pathname: '/x/react-data-grid/events' },
+      { pathname: '/x/react-data-grid/export' },
+      { pathname: '/x/react-data-grid/components' },
+      { pathname: '/x/react-data-grid/style' },
+      { pathname: '/x/react-data-grid/localization' },
+      { pathname: '/x/react-data-grid/scrolling' },
+      { pathname: '/x/react-data-grid/virtualization' },
+      { pathname: '/x/react-data-grid/accessibility' },
+      { pathname: '/x/react-data-grid/group-pivot', title: 'Group & Pivot' },
+      {
+        pathname: '/x/api/data-grid',
+        title: 'API Reference',
+        children: [
+          { pathname: '/x/api/data-grid', title: 'Index' },
+          { pathname: '/x/api/data-grid/data-grid', title: 'DataGrid' },
+          { pathname: '/x/api/data-grid/data-grid-pro', title: 'DataGridPro' },
+          { pathname: '/x/api/data-grid/grid-api', title: 'GridApi' },
+          { pathname: '/x/api/data-grid/grid-col-def', title: 'GridColDef' },
+          { pathname: '/x/api/data-grid/grid-cell-params', title: 'GridCellParams' },
+          { pathname: '/x/api/data-grid/grid-row-params', title: 'GridRowParams' },
+          { pathname: '/x/api/data-grid/grid-csv-export-options', title: 'GridCSVExportOptions' },
+          {
+            pathname: '/x/api/data-grid/grid-print-export-options',
+            title: 'GridPrintExportOptions',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export default pages;

docs/next.config.js

@@ -4,6 +4,7 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const pkg = require('../node_modules/@mui/monorepo/package.json');
 const { findPages } = require('./src/modules/utils/find');
 const { LANGUAGES, LANGUAGES_SSR } = require('./src/modules/constants');
+const FEATURE_TOGGLE = require('./src/featureToggle');
 
 const workspaceRoot = path.join(__dirname, '../');
 
@@ -150,14 +151,28 @@ module.exports = {
       { source: '/api/:rest*', destination: '/api-docs/:rest*' },
     ];
   },
-  redirects:
-    process.env.NODE_ENV !== 'production'
-      ? async () => [
-          {
-            source: '/',
-            destination: '/components/data-grid/',
-            permanent: false,
-          },
-        ]
-      : undefined,
+  // redirects only take effect in the development, not production (because of `next export`).
+  redirects: async () => {
+    const redirects = [];
+    if (process.env.NODE_ENV !== 'production') {
+      redirects.push({
+        source: '/',
+        destination: '/components/data-grid/',
+        permanent: false,
+      });
+    }
+    if (FEATURE_TOGGLE.enable_redirects) {
+      redirects.push({
+        source: '/components/data-grid/:path*',
+        destination: '/x/react-data-grid/:path*',
+        permanent: false,
+      });
+      redirects.push({
+        source: '/api/data-grid/:path*',
+        destination: '/x/api/data-grid/:path*',
+        permanent: false,
+      });
+    }
+    return redirects;
+  },
 };

docs/pages/_app.js

@@ -7,9 +7,9 @@ LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE);
 import 'docs/src/modules/components/bootstrap';
 // --- Post bootstrap -----
 import pages from 'docsx/src/pages'; // DO NOT REMOVE
+import newPages from 'docsx/data/pages'; // DO NOT REMOVE
 import XWrapper from 'docsx/src/modules/XWrapper'; // DO NOT REMOVE
 import * as React from 'react';
-import find from 'lodash/find';
 import { loadCSS } from 'fg-loadcss/src/loadCSS';
 import NextHead from 'next/head';
 import PropTypes from 'prop-types';
@@ -29,6 +29,7 @@ import {
 } from 'docs/src/modules/utils/i18n';
 import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider';
 import createEmotionCache from 'docs/src/createEmotionCache';
+import findActivePage from 'docs/src/modules/utils/findActivePage';
 
 function getMuiPackageVersion(packageName, commitRef) {
   if (commitRef === undefined) {
@@ -194,36 +195,6 @@ Tip: you can access the documentation \`theme\` object directly in the console.
   );
 }
 
-// DO NOT REPLACE THIS FUNCTION WITH THE ONE FROM THE MONOREPO
-function findActivePage(currentPages, pathname) {
-  const activePage = find(currentPages, (page) => {
-    if (page.children && pathname.indexOf(`${page.pathname}/`) === 0) {
-      // Check if one of the children matches (for /components)
-      return findActivePage(page.children, pathname);
-    }
-
-    // Should be an exact match if no children
-    return pathname === page.pathname;
-  });
-
-  if (!activePage) {
-    return null;
-  }
-
-  // We need to drill down
-  if (activePage.pathname !== pathname) {
-    return findActivePage(activePage.children, pathname);
-  }
-
-  if (activePage.pathname === '/api-docs/data-grid') {
-    // If the activePage is returned, it will crash.
-    // <AppLayoutDocsFooter /> won't find the links to the previous and next pages.
-    return activePage.children[0];
-  }
-
-  return activePage;
-}
-
 function AppWrapper(props) {
   const { children, emotionCache, pageProps } = props;
 
@@ -240,7 +211,12 @@ function AppWrapper(props) {
     }
   }, []);
 
-  const activePage = findActivePage(pages, router.pathname);
+  let productPages = pages;
+  if (router.asPath.startsWith('/x')) {
+    productPages = newPages;
+  }
+
+  const activePage = findActivePage(productPages, router.pathname);
 
   let fonts = [];
   if (router.pathname.match(/onepirate/)) {
@@ -258,7 +234,7 @@ function AppWrapper(props) {
       </NextHead>
       <UserLanguageProvider defaultUserLanguage={pageProps.userLanguage}>
         <CodeVariantProvider>
-          <PageContext.Provider value={{ activePage, pages }}>
+          <PageContext.Provider value={{ activePage, pages: productPages }}>
             <ThemeProvider>
               <DocsStyledEngineProvider cacheLtr={emotionCache}>
                 <XWrapper>{children}</XWrapper>