feat: use data grid pro if mui license is provided

Dabolus · Apr 25, 2024 · 1dc1545 · 1dc1545
1 parent db26cbf
commit 1dc1545
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 6 deletions.
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -8,6 +8,7 @@ import {
 import { hydrateRoot } from 'react-dom/client';
 import { RemixBrowser } from '@remix-run/react';
 import { CacheProvider } from '@emotion/react';
+import { LicenseInfo } from '@mui/x-license';
 import {
   Experimental_CssVarsProvider as CssVarsProvider,
   CssBaseline,
@@ -23,6 +24,10 @@ import PageStyles from './src/PageStyles';
 import Backend from './i18next-fetch-backend';
 import i18n from './i18n';
 
+if (import.meta.env.VITE_MUI_LICENSE_KEY) {
+  LicenseInfo.setLicenseKey(import.meta.env.VITE_MUI_LICENSE_KEY);
+}
+
 interface ClientCacheProviderProps {
   children: ReactNode;
 }

diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -2,6 +2,7 @@
 import { renderToReadableStream } from 'react-dom/server.browser';
 import { RemixServer } from '@remix-run/react';
 import type { EntryContext } from '@remix-run/node';
+import { LicenseInfo } from '@mui/x-license';
 import {
   Experimental_CssVarsProvider as CssVarsProvider,
   CssBaseline,
@@ -17,6 +18,10 @@ import PageStyles from './src/PageStyles';
 import i18next, { localesDirectory } from './i18next.server';
 import i18n from './i18n';
 
+if (import.meta.env.VITE_MUI_LICENSE_KEY) {
+  LicenseInfo.setLicenseKey(import.meta.env.VITE_MUI_LICENSE_KEY);
+}
+
 // Reject all pending promises from handler functions after 5 seconds
 export const streamTimeout = 5000;
 

diff --git a/app/routes/dynamodb.tables/route.tsx b/app/routes/dynamodb.tables/route.tsx
@@ -21,7 +21,7 @@ import {
   Refresh as RefreshIcon,
   Clear as ClearIcon,
 } from '@mui/icons-material';
-import { DataGrid } from '@mui/x-data-grid';
+import DataGrid from '~/src/components/DataGrid';
 import useFuzzySearch from '~/src/hooks/useFuzzySearch';
 import {
   computeTitle,

diff --git a/app/routes/s3.buckets.$id.($key)/preview/PreviewElement.tsx b/app/routes/s3.buckets.$id.($key)/preview/PreviewElement.tsx
@@ -7,7 +7,7 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PrismAsync as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { DataGrid, DataGridProps } from '@mui/x-data-grid';
+import DataGrid, { DataGridProps } from '~/src/components/DataGrid';
 import {
   TreeItem,
   SimpleTreeView,

diff --git a/app/routes/s3.buckets.$id.($key)/route.tsx b/app/routes/s3.buckets.$id.($key)/route.tsx
@@ -37,7 +37,7 @@ import {
   Refresh as RefreshIcon,
   Clear as ClearIcon,
 } from '@mui/icons-material';
-import { DataGrid } from '@mui/x-data-grid';
+import DataGrid from '~/src/components/DataGrid';
 import useFuzzySearch from '~/src/hooks/useFuzzySearch';
 import {
   base64UrlDecode,

diff --git a/app/routes/s3.buckets._index/route.tsx b/app/routes/s3.buckets._index/route.tsx
@@ -21,7 +21,7 @@ import {
   Refresh as RefreshIcon,
   Clear as ClearIcon,
 } from '@mui/icons-material';
-import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import DataGrid, { GridColDef } from '~/src/components/DataGrid';
 import useFuzzySearch from '~/src/hooks/useFuzzySearch';
 import {
   computeTitle,

diff --git a/app/routes/sqs.queues/route.tsx b/app/routes/sqs.queues/route.tsx
@@ -22,7 +22,7 @@ import {
   Refresh as RefreshIcon,
   Clear as ClearIcon,
 } from '@mui/icons-material';
-import { DataGrid } from '@mui/x-data-grid';
+import DataGrid from '~/src/components/DataGrid';
 import useFuzzySearch from '~/src/hooks/useFuzzySearch';
 import { highlightMatches, ignoreSearchChanges } from '~/src/utils';
 import CurrentPath from '~/src/components/CurrentPath';

diff --git a/app/src/components/DataGrid.tsx b/app/src/components/DataGrid.tsx
@@ -0,0 +1,7 @@
+export type * from '@mui/x-data-grid';
+
+export const DataGrid = import.meta.env.VITE_MUI_LICENSE_KEY
+  ? await import('@mui/x-data-grid-pro').then(imp => imp.DataGridPro)
+  : await import('@mui/x-data-grid').then(imp => imp.DataGrid);
+
+export default DataGrid;
diff --git a/package.json b/package.json
@@ -32,6 +32,8 @@
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
     "@mui/x-data-grid": "^7.3.0",
+    "@mui/x-data-grid-pro": "^7.3.0",
+    "@mui/x-license": "^7.2.0",
     "@mui/x-tree-view": "^7.3.0",
     "@remix-run/node": "^2.9.1",
     "@remix-run/react": "^2.9.1",

diff --git a/yarn.lock b/yarn.lock
@@ -2323,7 +2323,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/x-data-grid@npm:^7.3.0":
+"@mui/x-data-grid-pro@npm:^7.3.0":
+  version: 7.3.0
+  resolution: "@mui/x-data-grid-pro@npm:7.3.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.24.0"
+    "@mui/system": "npm:^5.15.14"
+    "@mui/utils": "npm:^5.15.14"
+    "@mui/x-data-grid": "npm:7.3.0"
+    "@mui/x-license": "npm:7.2.0"
+    "@types/format-util": "npm:^1.0.4"
+    clsx: "npm:^2.1.0"
+    prop-types: "npm:^15.8.1"
+    reselect: "npm:^4.1.8"
+  peerDependencies:
+    "@mui/material": ^5.15.14
+    react: ^17.0.0 || ^18.0.0
+    react-dom: ^17.0.0 || ^18.0.0
+  checksum: 10/6145638d20210fc7b31b08b2c564341273d77dbc81e8e104451495ec071c5727d51ad3da2aeda4a1f23e4a73173a985743f414344e15434b245aa7bcecdde950
+  languageName: node
+  linkType: hard
+
+"@mui/x-data-grid@npm:7.3.0, @mui/x-data-grid@npm:^7.3.0":
   version: 7.3.0
   resolution: "@mui/x-data-grid@npm:7.3.0"
   dependencies:
@@ -2341,6 +2362,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/x-license@npm:7.2.0, @mui/x-license@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "@mui/x-license@npm:7.2.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.24.0"
+    "@mui/utils": "npm:^5.15.14"
+  peerDependencies:
+    react: ^17.0.0 || ^18.0.0
+  checksum: 10/02833423259fff1468fdd63ab426c5b1cfbe49a6d0c394f2113f0dea321d3d6db8c59c2dd606a65b7330da43cf9a58457b3afedb6d9ca80217dac52625444f09
+  languageName: node
+  linkType: hard
+
 "@mui/x-tree-view@npm:^7.3.0":
   version: 7.3.0
   resolution: "@mui/x-tree-view@npm:7.3.0"
@@ -3467,6 +3500,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/format-util@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "@types/format-util@npm:1.0.4"
+  checksum: 10/2c0643203de286788986ef2a73d56e8b9609dbfa9cfe817792e8bf920c0fa72ff72beb502f5c53799b6752130a177e19afac0f0ae78d349f3bac7817ccbdaadc
+  languageName: node
+  linkType: hard
+
 "@types/hast@npm:^2.0.0":
   version: 2.3.9
   resolution: "@types/hast@npm:2.3.9"
@@ -7306,6 +7346,8 @@ __metadata:
     "@mui/icons-material": "npm:^5.15.15"
     "@mui/material": "npm:^5.15.15"
     "@mui/x-data-grid": "npm:^7.3.0"
+    "@mui/x-data-grid-pro": "npm:^7.3.0"
+    "@mui/x-license": "npm:^7.2.0"
     "@mui/x-tree-view": "npm:^7.3.0"
     "@remix-run/dev": "npm:^2.9.1"
     "@remix-run/node": "npm:^2.9.1"