From b958c6d0ff6baa8098019bdd2d391854647eed91 Mon Sep 17 00:00:00 2001
From: Andrew Cherniavskii <andrew@mui.com>
Date: Thu, 7 Sep 2023 12:45:33 +0200
Subject: [PATCH] [docs] Include code links in the data grid demo (#10219)

---
 .../data-grid/demo/PopularFeaturesDemo.js     | 36 +++++++++++++++---
 .../data-grid/demo/PopularFeaturesDemo.tsx    | 37 ++++++++++++++++---
 2 files changed, 63 insertions(+), 10 deletions(-)

diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.js b/docs/data/data-grid/demo/PopularFeaturesDemo.js
index 8374403bef89..2ebb71910fb3 100644
--- a/docs/data/data-grid/demo/PopularFeaturesDemo.js
+++ b/docs/data/data-grid/demo/PopularFeaturesDemo.js
@@ -31,7 +31,7 @@ import BasicGroupingDemo from '../column-groups/BasicGroupingDemo';
 import EditingWithDatePickers from '../recipes-editing/EditingWithDatePickers';
 import CellSelectionGrid from '../cell-selection/CellSelectionRangeStyling';
 import AddNewColumnMenuGrid from '../column-menu/AddNewColumnMenuGrid';
-import HeaderFiltering from '../filtering/HeaderFilteringDataGridPro';
+import HeaderFilteringDataGridPro from '../filtering/HeaderFilteringDataGridPro';
 import ClipboardPaste from '../clipboard/ClipboardPaste';
 
 export const featuresSet = [
@@ -42,6 +42,7 @@ export const featuresSet = [
     plan: 'Pro',
     detailPage: '/master-detail/',
     demo: <BasicDetailPanels />,
+    linkToCode: '/master-detail/#system-BasicDetailPanels.tsx',
   },
   {
     id: 2,
@@ -51,6 +52,7 @@ export const featuresSet = [
     plan: 'Community',
     detailPage: '/editing/',
     demo: <EditingWithDatePickers />,
+    linkToCode: '/recipes-editing/#system-EditingWithDatePickers.tsx',
   },
   {
     id: 3,
@@ -60,6 +62,7 @@ export const featuresSet = [
     detailPage: '/column-groups/',
     newBadge: true,
     demo: <BasicGroupingDemo />,
+    linkToCode: '/column-groups/#system-BasicGroupingDemo.tsx',
   },
   {
     id: 4,
@@ -68,6 +71,7 @@ export const featuresSet = [
     plan: 'Pro',
     detailPage: '/pagination/',
     demo: <LazyLoadingGrid />,
+    linkToCode: '/row-updates/#system-LazyLoadingGrid.tsx',
   },
   {
     id: 5,
@@ -77,6 +81,7 @@ export const featuresSet = [
     plan: 'Community',
     detailPage: '/state/#save-and-restore-the-state',
     demo: <RestoreStateInitialState />,
+    linkToCode: '/state/#system-RestoreStateInitialState.tsx',
   },
   {
     id: 6,
@@ -85,6 +90,7 @@ export const featuresSet = [
     plan: 'Premium',
     detailPage: '/row-grouping/',
     demo: <RowGroupingInitialState />,
+    linkToCode: '/row-grouping/#system-RowGroupingInitialState.tsx',
   },
   {
     id: 7,
@@ -94,6 +100,7 @@ export const featuresSet = [
     plan: 'Premium',
     detailPage: '/export/#excel-export',
     demo: <ExcelExport />,
+    linkToCode: '/export/#system-ExcelExport.tsx',
   },
   {
     id: 8,
@@ -102,6 +109,7 @@ export const featuresSet = [
     plan: 'Community',
     detailPage: '/filtering/quick-filter/',
     demo: <QuickFilteringGrid />,
+    linkToCode: '/filtering/quick-filter/#system-QuickFilteringGrid.tsx',
   },
   {
     id: 9,
@@ -110,6 +118,7 @@ export const featuresSet = [
     plan: 'Pro',
     detailPage: '/row-ordering/',
     demo: <RowOrderingGrid />,
+    linkToCode: '/row-ordering/#system-RowOrderingGrid.tsx',
   },
   {
     id: 10,
@@ -118,6 +127,7 @@ export const featuresSet = [
     plan: 'Pro',
     detailPage: '/column-pinning/',
     demo: <BasicColumnPinning />,
+    linkToCode: '/column-pinning/#system-BasicColumnPinning.tsx',
   },
   {
     id: 11,
@@ -126,6 +136,7 @@ export const featuresSet = [
     plan: 'Pro',
     detailPage: '/row-pinning/',
     demo: <RowPinningWithPagination />,
+    linkToCode: '/row-pinning/#system-RowPinningWithPagination.tsx',
   },
   {
     id: 12,
@@ -134,6 +145,7 @@ export const featuresSet = [
     plan: 'Premium',
     detailPage: '/aggregation/',
     demo: <AggregationRowGrouping />,
+    linkToCode: '/aggregation/#system-AggregationRowGrouping.tsx',
   },
   {
     id: 13,
@@ -143,6 +155,7 @@ export const featuresSet = [
     plan: 'Community',
     detailPage: '/column-visibility/',
     demo: <ColumnSelectorGrid />,
+    linkToCode: '/column-visibility/#system-ColumnSelectorGrid.tsx',
   },
   {
     id: 14,
@@ -151,6 +164,7 @@ export const featuresSet = [
     plan: 'Community',
     detailPage: '/virtualization/#column-virtualization',
     demo: <ColumnVirtualizationGrid />,
+    linkToCode: '/virtualization/#system-ColumnVirtualizationGrid.tsx',
   },
   {
     id: 15,
@@ -167,6 +181,7 @@ export const featuresSet = [
     plan: 'Pro',
     detailPage: '/tree-data/',
     demo: <TreeDataFullExample />,
+    linkToCode: '/tree-data/#system-TreeDataFullExample.tsx',
   },
   {
     id: 17,
@@ -176,6 +191,7 @@ export const featuresSet = [
     plan: 'Premium',
     detailPage: '/cell-selection/',
     demo: <CellSelectionGrid />,
+    linkToCode: '/cell-selection/#system-CellSelectionGrid.tsx',
     newBadge: true,
   },
   {
@@ -185,6 +201,7 @@ export const featuresSet = [
     plan: 'Community',
     detailPage: '/column-menu/',
     demo: <AddNewColumnMenuGrid />,
+    linkToCode: '/column-menu/#system-AddNewColumnMenuGrid.tsx',
     newBadge: true,
   },
   {
@@ -195,6 +212,7 @@ export const featuresSet = [
     plan: 'Premium',
     detailPage: '/clipboard/#clipboard-paste',
     demo: <ClipboardPaste />,
+    linkToCode: '/clipboard/#system-ClipboardPaste.tsx',
     newBadge: true,
   },
   {
@@ -204,7 +222,8 @@ export const featuresSet = [
       'Quickly accessible and customizable header filters to filter the data',
     plan: 'Pro',
     detailPage: '/filtering/#header-filters',
-    demo: <HeaderFiltering />,
+    demo: <HeaderFilteringDataGridPro />,
+    linkToCode: '/filtering/header-filters/#system-HeaderFilteringDataGridPro.tsx',
     newBadge: true,
   },
 ];
@@ -257,9 +276,16 @@ function RowDemo(props) {
 
   return (
     <Box sx={{ py: 2, backgroundColor: panelColor }}>
-      <Box sx={{ width: '90%', margin: 'auto', backgroundColor: gridBgColor }}>
-        {row.demo}
-      </Box>
+      <div style={{ width: '90%', margin: 'auto' }}>
+        <Box sx={{ backgroundColor: gridBgColor }}>{row.demo}</Box>
+        {row.linkToCode ? (
+          <Typography sx={{ marginTop: 1 }} variant="body2">
+            <Link href={`/x/react-data-grid${row.linkToCode}`} target="_blank">
+              Open demo source
+            </Link>
+          </Typography>
+        ) : null}
+      </div>
     </Box>
   );
 }
diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx
index 4e614cc31a79..52e9484d115e 100644
--- a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx
+++ b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx
@@ -36,7 +36,7 @@ import BasicGroupingDemo from '../column-groups/BasicGroupingDemo';
 import EditingWithDatePickers from '../recipes-editing/EditingWithDatePickers';
 import CellSelectionGrid from '../cell-selection/CellSelectionRangeStyling';
 import AddNewColumnMenuGrid from '../column-menu/AddNewColumnMenuGrid';
-import HeaderFiltering from '../filtering/HeaderFilteringDataGridPro';
+import HeaderFilteringDataGridPro from '../filtering/HeaderFilteringDataGridPro';
 import ClipboardPaste from '../clipboard/ClipboardPaste';
 
 type Row = {
@@ -47,6 +47,7 @@ type Row = {
   detailPage: string;
   demo: React.JSX.Element;
   newBadge?: boolean;
+  linkToCode?: string;
 };
 
 export const featuresSet: Row[] = [
@@ -57,6 +58,7 @@ export const featuresSet: Row[] = [
     plan: 'Pro',
     detailPage: '/master-detail/',
     demo: <BasicDetailPanels />,
+    linkToCode: '/master-detail/#system-BasicDetailPanels.tsx',
   },
   {
     id: 2,
@@ -66,6 +68,7 @@ export const featuresSet: Row[] = [
     plan: 'Community',
     detailPage: '/editing/',
     demo: <EditingWithDatePickers />,
+    linkToCode: '/recipes-editing/#system-EditingWithDatePickers.tsx',
   },
   {
     id: 3,
@@ -75,6 +78,7 @@ export const featuresSet: Row[] = [
     detailPage: '/column-groups/',
     newBadge: true,
     demo: <BasicGroupingDemo />,
+    linkToCode: '/column-groups/#system-BasicGroupingDemo.tsx',
   },
   {
     id: 4,
@@ -83,6 +87,7 @@ export const featuresSet: Row[] = [
     plan: 'Pro',
     detailPage: '/pagination/',
     demo: <LazyLoadingGrid />,
+    linkToCode: '/row-updates/#system-LazyLoadingGrid.tsx',
   },
   {
     id: 5,
@@ -92,6 +97,7 @@ export const featuresSet: Row[] = [
     plan: 'Community',
     detailPage: '/state/#save-and-restore-the-state',
     demo: <RestoreStateInitialState />,
+    linkToCode: '/state/#system-RestoreStateInitialState.tsx',
   },
   {
     id: 6,
@@ -100,6 +106,7 @@ export const featuresSet: Row[] = [
     plan: 'Premium',
     detailPage: '/row-grouping/',
     demo: <RowGroupingInitialState />,
+    linkToCode: '/row-grouping/#system-RowGroupingInitialState.tsx',
   },
   {
     id: 7,
@@ -109,6 +116,7 @@ export const featuresSet: Row[] = [
     plan: 'Premium',
     detailPage: '/export/#excel-export',
     demo: <ExcelExport />,
+    linkToCode: '/export/#system-ExcelExport.tsx',
   },
   {
     id: 8,
@@ -117,6 +125,7 @@ export const featuresSet: Row[] = [
     plan: 'Community',
     detailPage: '/filtering/quick-filter/',
     demo: <QuickFilteringGrid />,
+    linkToCode: '/filtering/quick-filter/#system-QuickFilteringGrid.tsx',
   },
   {
     id: 9,
@@ -125,6 +134,7 @@ export const featuresSet: Row[] = [
     plan: 'Pro',
     detailPage: '/row-ordering/',
     demo: <RowOrderingGrid />,
+    linkToCode: '/row-ordering/#system-RowOrderingGrid.tsx',
   },
   {
     id: 10,
@@ -133,6 +143,7 @@ export const featuresSet: Row[] = [
     plan: 'Pro',
     detailPage: '/column-pinning/',
     demo: <BasicColumnPinning />,
+    linkToCode: '/column-pinning/#system-BasicColumnPinning.tsx',
   },
   {
     id: 11,
@@ -141,6 +152,7 @@ export const featuresSet: Row[] = [
     plan: 'Pro',
     detailPage: '/row-pinning/',
     demo: <RowPinningWithPagination />,
+    linkToCode: '/row-pinning/#system-RowPinningWithPagination.tsx',
   },
   {
     id: 12,
@@ -149,6 +161,7 @@ export const featuresSet: Row[] = [
     plan: 'Premium',
     detailPage: '/aggregation/',
     demo: <AggregationRowGrouping />,
+    linkToCode: '/aggregation/#system-AggregationRowGrouping.tsx',
   },
   {
     id: 13,
@@ -158,6 +171,7 @@ export const featuresSet: Row[] = [
     plan: 'Community',
     detailPage: '/column-visibility/',
     demo: <ColumnSelectorGrid />,
+    linkToCode: '/column-visibility/#system-ColumnSelectorGrid.tsx',
   },
   {
     id: 14,
@@ -166,6 +180,7 @@ export const featuresSet: Row[] = [
     plan: 'Community',
     detailPage: '/virtualization/#column-virtualization',
     demo: <ColumnVirtualizationGrid />,
+    linkToCode: '/virtualization/#system-ColumnVirtualizationGrid.tsx',
   },
   {
     id: 15,
@@ -182,6 +197,7 @@ export const featuresSet: Row[] = [
     plan: 'Pro',
     detailPage: '/tree-data/',
     demo: <TreeDataFullExample />,
+    linkToCode: '/tree-data/#system-TreeDataFullExample.tsx',
   },
   {
     id: 17,
@@ -191,6 +207,7 @@ export const featuresSet: Row[] = [
     plan: 'Premium',
     detailPage: '/cell-selection/',
     demo: <CellSelectionGrid />,
+    linkToCode: '/cell-selection/#system-CellSelectionGrid.tsx',
     newBadge: true,
   },
   {
@@ -200,6 +217,7 @@ export const featuresSet: Row[] = [
     plan: 'Community',
     detailPage: '/column-menu/',
     demo: <AddNewColumnMenuGrid />,
+    linkToCode: '/column-menu/#system-AddNewColumnMenuGrid.tsx',
     newBadge: true,
   },
   {
@@ -210,6 +228,7 @@ export const featuresSet: Row[] = [
     plan: 'Premium',
     detailPage: '/clipboard/#clipboard-paste',
     demo: <ClipboardPaste />,
+    linkToCode: '/clipboard/#system-ClipboardPaste.tsx',
     newBadge: true,
   },
   {
@@ -219,7 +238,8 @@ export const featuresSet: Row[] = [
       'Quickly accessible and customizable header filters to filter the data',
     plan: 'Pro',
     detailPage: '/filtering/#header-filters',
-    demo: <HeaderFiltering />,
+    demo: <HeaderFilteringDataGridPro />,
+    linkToCode: '/filtering/header-filters/#system-HeaderFilteringDataGridPro.tsx',
     newBadge: true,
   },
 ];
@@ -271,9 +291,16 @@ function RowDemo(props: { row: Row }) {
 
   return (
     <Box sx={{ py: 2, backgroundColor: panelColor }}>
-      <Box sx={{ width: '90%', margin: 'auto', backgroundColor: gridBgColor }}>
-        {row.demo}
-      </Box>
+      <div style={{ width: '90%', margin: 'auto' }}>
+        <Box sx={{ backgroundColor: gridBgColor }}>{row.demo}</Box>
+        {row.linkToCode ? (
+          <Typography sx={{ marginTop: 1 }} variant="body2">
+            <Link href={`/x/react-data-grid${row.linkToCode}`} target="_blank">
+              Open demo source
+            </Link>
+          </Typography>
+        ) : null}
+      </div>
     </Box>
   );
 }