Upgrade MUI X to v7 (#2837)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Manuel Blum <mb@vivid-planet.com>
vivid-planet · Dec 3, 2024 · de6d677 · de6d677
1 parent e8f4b07
commit de6d677
Show file tree

Hide file tree

Showing 42 changed files with 403 additions and 269 deletions.
diff --git a/.changeset/nice-masks-invite.md b/.changeset/nice-masks-invite.md
@@ -0,0 +1,24 @@
+---
+"@comet/admin-theme": major
+"@comet/cms-admin": major
+"@comet/admin": major
+---
+
+Bump @mui/x-data-grid peer dependency to v7
+
+This has breaking changes in DataGrid.
+Follow the official [migration guide](<(https://mui.com/x/migration/migration-data-grid-v6/)>) to upgrade.
+
+As well, be aware if you have a date in the data grid, you will need to add a `valueGetter`
+
+```diff
+    <DataGrid
+        //other props
+        columns=[
+        {
+            field: "updatedAt",
+            type: "dateTime",
++            valueGetter: (params, row) => row.updatedAt && new Date(row.updatedAt)
+        }]
+    />
+```
diff --git a/demo/admin/package.json b/demo/admin/package.json
@@ -38,8 +38,8 @@
         "@mui/lab": "^6.0.0-beta.10",
         "@mui/material": "^6.0.0",
         "@mui/system": "^6.0.0",
-        "@mui/x-data-grid": "^6.20.4",
-        "@mui/x-data-grid-pro": "^6.0.0",
+        "@mui/x-data-grid": "^7.22.3",
+        "@mui/x-data-grid-pro": "^7.22.3",
         "change-case": "^5.2.0",
         "dnd-core": "^16.0.0",
         "draft-js": "^0.11.0",

diff --git a/demo/admin/src/news/generated/NewsGrid.tsx b/demo/admin/src/news/generated/NewsGrid.tsx
@@ -238,8 +238,8 @@ export function NewsGrid(): React.ReactElement {
                 rowCount={rowCount}
                 columns={columns}
                 loading={loading}
-                components={{
-                    Toolbar: NewsGridToolbar,
+                slots={{
+                    toolbar: NewsGridToolbar,
                 }}
             />
         </MainContent>

diff --git a/demo/admin/src/products/ManufacturersGrid.tsx b/demo/admin/src/products/ManufacturersGrid.tsx
@@ -80,43 +80,43 @@ export function ManufacturersGrid() {
         {
             field: "address.street",
             headerName: intl.formatMessage({ id: "manufacturers.street", defaultMessage: "Street" }),
-            valueGetter: ({ row }) => `${row.address?.street} ${row.address?.streetNumber}`,
+            valueGetter: (params, row) => `${row.address?.street} ${row.address?.streetNumber}`,
         },
         {
             field: "address.zip",
             headerName: intl.formatMessage({ id: "manufacturers.zip", defaultMessage: "ZIP" }),
-            valueGetter: ({ row }) => row.address?.zip,
+            valueGetter: (params, row) => row.address?.zip,
         },
         {
             field: "address.alternativeAddress.street",
             headerName: intl.formatMessage({ id: "manufacturers.alternativeAddressStreet", defaultMessage: "alt. Street" }),
-            valueGetter: ({ row }) => `${row.address?.alternativeAddress?.street} ${row.address?.alternativeAddress?.streetNumber}`,
+            valueGetter: (params, row) => `${row.address?.alternativeAddress?.street} ${row.address?.alternativeAddress?.streetNumber}`,
         },
         {
             field: "address.alternativeAddress.zip",
             headerName: intl.formatMessage({ id: "manufacturers.alternativeAddressZip", defaultMessage: "alt. ZIP" }),
-            valueGetter: ({ row }) => row.address?.alternativeAddress?.zip,
+            valueGetter: (params, row) => row.address?.alternativeAddress?.zip,
         },
         {
             field: "addressAsEmbeddable.street",
             headerName: intl.formatMessage({ id: "manufacturers.street2", defaultMessage: "Street2" }),
-            valueGetter: ({ row }) => `${row.addressAsEmbeddable?.street} ${row.addressAsEmbeddable?.streetNumber}`,
+            valueGetter: (params, row) => `${row.addressAsEmbeddable?.street} ${row.addressAsEmbeddable?.streetNumber}`,
         },
         {
             field: "addressAsEmbeddable.zip",
             headerName: intl.formatMessage({ id: "manufacturers.zip2", defaultMessage: "ZIP2" }),
-            valueGetter: ({ row }) => row.addressAsEmbeddable?.zip,
+            valueGetter: (params, row) => row.addressAsEmbeddable?.zip,
         },
         {
             field: "addressAsEmbeddable.alternativeAddress.street",
             headerName: intl.formatMessage({ id: "manufacturers.alternativeAddressStreet2", defaultMessage: "alt. Street2" }),
-            valueGetter: ({ row }) =>
+            valueGetter: (params, row) =>
                 `${row.addressAsEmbeddable?.alternativeAddress?.street} ${row.addressAsEmbeddable?.alternativeAddress?.streetNumber}`,
         },
         {
             field: "addressAsEmbeddable.alternativeAddress.zip",
             headerName: intl.formatMessage({ id: "manufacturers.alternativeAddressZip", defaultMessage: "alt. ZIP2" }),
-            valueGetter: ({ row }) => row.addressAsEmbeddable?.alternativeAddress?.zip,
+            valueGetter: (params, row) => row.addressAsEmbeddable?.alternativeAddress?.zip,
         },
         {
             field: "action",
@@ -183,8 +183,8 @@ export function ManufacturersGrid() {
                 rowCount={rowCount}
                 columns={columns}
                 loading={loading}
-                components={{
-                    Toolbar: ManufacturersGridToolbar,
+                slots={{
+                    toolbar: ManufacturersGridToolbar,
                 }}
             />
         </MainContent>

diff --git a/demo/admin/src/products/ProductVariantsGrid.tsx b/demo/admin/src/products/ProductVariantsGrid.tsx
@@ -129,8 +129,8 @@ export function ProductVariantsGrid({ productId }: { productId: string }) {
                 rowCount={rowCount}
                 columns={columns}
                 loading={loading}
-                components={{
-                    Toolbar: ProductVariantsGridToolbar,
+                slots={{
+                    toolbar: ProductVariantsGridToolbar,
                 }}
             />
         </Box>

diff --git a/demo/admin/src/products/ProductsGrid.tsx b/demo/admin/src/products/ProductsGrid.tsx
@@ -194,15 +194,15 @@ export function ProductsGrid() {
             headerName: "Available Since",
             width: 130,
             type: "date",
-            valueGetter: ({ row }) => row.availableSince && new Date(row.availableSince),
+            valueGetter: (params, row) => row.availableSince && new Date(row.availableSince),
         },
         {
             field: "status",
             headerName: "Status",
             flex: 1,
             minWidth: 130,
             type: "boolean",
-            valueGetter: (params) => params.row.status == "Published",
+            valueGetter: (params, row) => row.status == "Published",
             renderCell: (params) => {
                 return (
                     <CrudVisibility
@@ -298,8 +298,8 @@ export function ProductsGrid() {
                 rowCount={rowCount}
                 columns={columns}
                 loading={loading}
-                components={{
-                    Toolbar: ProductsGridToolbar,
+                slots={{
+                    toolbar: ProductsGridToolbar,
                 }}
             />
         </MainContent>

diff --git a/demo/admin/src/products/categories/ProductCategoriesTable.tsx b/demo/admin/src/products/categories/ProductCategoriesTable.tsx
@@ -121,8 +121,8 @@ function ProductCategoriesTable() {
             rowCount={rowCount}
             columns={columns}
             loading={loading}
-            components={{
-                Toolbar: ProductCategoriesTableToolbar,
+            slots={{
+                toolbar: ProductCategoriesTableToolbar,
             }}
         />
     );

diff --git a/demo/admin/src/products/future/generated/CombinationFieldsTestProductsGrid.tsx b/demo/admin/src/products/future/generated/CombinationFieldsTestProductsGrid.tsx
@@ -18,7 +18,7 @@ import {
     usePersistentColumnState,
 } from "@comet/admin";
 import { DamImageBlock } from "@comet/cms-admin";
-import { DataGridPro, GridRenderCellParams, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
+import { DataGridPro, GridRenderCellParams, GridSlotsComponent, GridToolbarProps, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
 import * as React from "react";
 import { FormattedMessage, FormattedNumber, useIntl } from "react-intl";
 
@@ -71,7 +71,10 @@ const createProductMutation = gql`
     }
 `;
 
-function ProductsGridToolbar({ toolbarAction }: { toolbarAction?: React.ReactNode }) {
+interface ProductsGridToolbarToolbarProps extends GridToolbarProps {
+    toolbarAction: React.ReactNode;
+}
+function ProductsGridToolbar({ toolbarAction }: ProductsGridToolbarToolbarProps) {
     return (
         <DataGridToolbar>
             <ToolbarItem>
@@ -382,11 +385,11 @@ export function ProductsGrid({ toolbarAction, rowAction, actionsColumnWidth = 52
             rowCount={rowCount}
             columns={columns}
             loading={loading}
-            components={{
-                Toolbar: ProductsGridToolbar,
+            slots={{
+                toolbar: ProductsGridToolbar as GridSlotsComponent["toolbar"],
             }}
-            componentsProps={{
-                toolbar: { toolbarAction },
+            slotProps={{
+                toolbar: { toolbarAction } as ProductsGridToolbarToolbarProps,
             }}
         />
     );

diff --git a/demo/admin/src/products/future/generated/ManufacturersGrid.tsx b/demo/admin/src/products/future/generated/ManufacturersGrid.tsx
@@ -20,7 +20,7 @@ import {
 } from "@comet/admin";
 import { Add as AddIcon, Edit as EditIcon, Info } from "@comet/admin-icons";
 import { Button, IconButton } from "@mui/material";
-import { DataGridPro, GridColumnHeaderTitle, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
+import { DataGridPro, GridColumnHeaderTitle, GridSlotsComponent, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
 import * as React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -127,7 +127,7 @@ export function ManufacturersGrid(): React.ReactElement {
             headerName: intl.formatMessage({ id: "manufacturer.address.street", defaultMessage: "Street" }),
             filterable: false,
             sortable: false,
-            valueGetter: ({ row }) => row.address?.street,
+            valueGetter: (params, row) => row.address?.street,
             flex: 1,
             minWidth: 150,
         },
@@ -137,7 +137,7 @@ export function ManufacturersGrid(): React.ReactElement {
             type: "number",
             filterable: false,
             sortable: false,
-            valueGetter: ({ row }) => row.address?.streetNumber,
+            valueGetter: (params, row) => row.address?.streetNumber,
             flex: 1,
             minWidth: 150,
         },
@@ -164,7 +164,7 @@ export function ManufacturersGrid(): React.ReactElement {
             ),
             filterable: false,
             sortable: false,
-            valueGetter: ({ row }) => row.address?.alternativeAddress?.street,
+            valueGetter: (params, row) => row.address?.alternativeAddress?.street,
             flex: 1,
             minWidth: 150,
         },
@@ -195,29 +195,29 @@ export function ManufacturersGrid(): React.ReactElement {
             type: "number",
             filterable: false,
             sortable: false,
-            valueGetter: ({ row }) => row.address?.alternativeAddress?.streetNumber,
+            valueGetter: (params, row) => row.address?.alternativeAddress?.streetNumber,
             flex: 1,
             minWidth: 150,
         },
         {
             field: "addressAsEmbeddable_street",
             headerName: intl.formatMessage({ id: "manufacturer.addressAsEmbeddable.street", defaultMessage: "Street 2" }),
-            valueGetter: ({ row }) => row.addressAsEmbeddable?.street,
+            valueGetter: (params, row) => row.addressAsEmbeddable?.street,
             flex: 1,
             minWidth: 150,
         },
         {
             field: "addressAsEmbeddable_streetNumber",
             headerName: intl.formatMessage({ id: "manufacturer.addressAsEmbeddable.streetNumber", defaultMessage: "Street number 2" }),
             type: "number",
-            valueGetter: ({ row }) => row.addressAsEmbeddable?.streetNumber,
+            valueGetter: (params, row) => row.addressAsEmbeddable?.streetNumber,
             flex: 1,
             minWidth: 150,
         },
         {
             field: "addressAsEmbeddable_alternativeAddress_street",
             headerName: intl.formatMessage({ id: "manufacturer.addressAsEmbeddable.alternativeAddress.street", defaultMessage: "Alt-Street 2" }),
-            valueGetter: ({ row }) => row.addressAsEmbeddable?.alternativeAddress?.street,
+            valueGetter: (params, row) => row.addressAsEmbeddable?.alternativeAddress?.street,
             flex: 1,
             minWidth: 150,
         },
@@ -228,7 +228,7 @@ export function ManufacturersGrid(): React.ReactElement {
                 defaultMessage: "Alt-Street number 2",
             }),
             type: "number",
-            valueGetter: ({ row }) => row.addressAsEmbeddable?.alternativeAddress?.streetNumber,
+            valueGetter: (params, row) => row.addressAsEmbeddable?.alternativeAddress?.streetNumber,
             flex: 1,
             minWidth: 150,
         },
@@ -296,8 +296,8 @@ export function ManufacturersGrid(): React.ReactElement {
             rowCount={rowCount}
             columns={columns}
             loading={loading}
-            components={{
-                Toolbar: ManufacturersGridToolbar,
+            slots={{
+                toolbar: ManufacturersGridToolbar as GridSlotsComponent["toolbar"],
             }}
         />
     );

diff --git a/demo/admin/src/products/future/generated/ProductVariantsGrid.tsx b/demo/admin/src/products/future/generated/ProductVariantsGrid.tsx
@@ -20,7 +20,7 @@ import {
 import { Add as AddIcon, Edit as EditIcon } from "@comet/admin-icons";
 import { DamImageBlock } from "@comet/cms-admin";
 import { Button, IconButton } from "@mui/material";
-import { DataGridPro, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
+import { DataGridPro, GridSlotsComponent, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
 import * as React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -114,8 +114,8 @@ export function ProductVariantsGrid({ product }: Props): React.ReactElement {
             field: "createdAt",
             headerName: intl.formatMessage({ id: "productVariant.createdAt", defaultMessage: "Created at" }),
             type: "date",
-            valueGetter: ({ row }) => row.createdAt && new Date(row.createdAt),
-            valueFormatter: ({ value }) => (value ? intl.formatDate(value) : ""),
+            valueGetter: (params, row) => row.createdAt && new Date(row.createdAt),
+            valueFormatter: (value, row) => (row.createdAt ? intl.formatDate(row.createdAt) : ""),
             flex: 1,
             minWidth: 150,
         },
@@ -187,8 +187,8 @@ export function ProductVariantsGrid({ product }: Props): React.ReactElement {
             rowCount={rowCount}
             columns={columns}
             loading={loading}
-            components={{
-                Toolbar: ProductVariantsGridToolbar,
+            slots={{
+                toolbar: ProductVariantsGridToolbar as GridSlotsComponent["toolbar"],
             }}
         />
     );