Migrate to x-data-grid v7 (#5597)

Author: LittleBigOwI

package-lock.json

@@ -83,7 +83,7 @@
     "@loadable/component": "5.16.4",
     "@mui/icons-material": "5.15.17",
     "@mui/material": "5.15.17",
-    "@mui/x-data-grid": "6.19.11",
+    "@mui/x-data-grid": "7.5.1",
     "@react-hook/resize-observer": "2.0.1",
     "@tanstack/react-query": "5.40.0",
     "@tanstack/react-query-devtools": "5.40.0",

package.json

@@ -60,7 +60,7 @@ const Activity = () => {
             field: 'User',
             headerName: globalize.translate('LabelUser'),
             width: 60,
-            valueGetter: ({ row }) => users[row.UserId]?.Name,
+            valueGetter: ( value, row ) => users[row.UserId]?.Name,
             renderCell: ({ row }) => (
                 <IconButton
                     size='large'
@@ -82,16 +82,16 @@ const Activity = () => {
             headerName: globalize.translate('LabelDate'),
             width: 90,
             type: 'date',
-            valueGetter: ({ value }) => parseISO8601Date(value),
-            valueFormatter: ({ value }) => toLocaleDateString(value)
+            valueGetter: ( value ) => parseISO8601Date(value),
+            valueFormatter: ( value ) => toLocaleDateString(value)
         },
         {
             field: 'Time',
             headerName: globalize.translate('LabelTime'),
             width: 100,
             type: 'dateTime',
-            valueGetter: ({ row }) => parseISO8601Date(row.Date),
-            valueFormatter: ({ value }) => toLocaleTimeString(value)
+            valueGetter: ( value, row ) => parseISO8601Date(row.Date),
+            valueFormatter: ( value ) => toLocaleTimeString(value)
         },
         {
             field: 'Severity',
@@ -113,7 +113,7 @@ const Activity = () => {
             field: 'Overview',
             headerName: globalize.translate('LabelOverview'),
             width: 200,
-            valueGetter: ({ row }) => row.ShortOverview ?? row.Overview,
+            valueGetter: ( value, row ) => row.ShortOverview ?? row.Overview,
             renderCell: ({ row }) => (
                 <OverviewCell {...row} />
             )

src/apps/dashboard/routes/activity.tsx

@@ -42,8 +42,7 @@ const config = {
             '@mui/private-theming': '@mui/private-theming/legacy',
             '@mui/styled-engine': '@mui/styled-engine/legacy',
             '@mui/system': '@mui/system/legacy',
-            '@mui/utils': '@mui/utils/legacy',
-            '@mui/x-data-grid': '@mui/x-data-grid/legacy'
+            '@mui/utils': '@mui/utils/legacy'
         }
     },
     plugins: [
@@ -176,6 +175,7 @@ const config = {
                 include: [
                     path.resolve(__dirname, 'node_modules/@jellyfin/libass-wasm'),
                     path.resolve(__dirname, 'node_modules/@jellyfin/sdk'),
+                    path.resolve(__dirname, 'node_modules/@mui/x-data-grid'),
                     path.resolve(__dirname, 'node_modules/@react-hook/latest'),
                     path.resolve(__dirname, 'node_modules/@react-hook/passive-layout-effect'),
                     path.resolve(__dirname, 'node_modules/@react-hook/resize-observer'),