Skip to content

Commit 986dd9f

Browse files
fitzergeraldfitzergerald
authored
Merge pull request #1233 from layer5io/rm/dev-dep/datatable
chore: migrate from mui-datatables to @sistent/mui-datatables
2 parents 410b327 + 11346a6 commit 986dd9f

File tree

16 files changed

+2079
-1888
lines changed

16 files changed

+2079
-1888
lines changed

‎examples/next-12/components/ResponsiveDataTable/ResponsiveDataTable.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import MUIDataTable from 'mui-datatables';
1+
import MUIDataTable from '@sistent/mui-datatables';
22
import { useEffect, useState } from 'react';
33

44
export function ResponsiveDataTable({ data, columns, options = {}, ...props }) {

‎examples/next-12/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"@mui/icons-material": "^5.14.16",
1818
"@mui/material": "^5.14.17",
1919
"@reduxjs/toolkit": "^1.9.7",
20-
"@sistent/mui-datatables": "^5.1.2",
20+
"@sistent/mui-datatables": "^5.1.4",
2121
"next": "^15.5.9",
2222
"react": "^18.3.1",
2323
"react-dom": "^18.3.1",

‎package-lock.json‎

Lines changed: 1955 additions & 1778 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,12 +113,12 @@
113113
"@emotion/styled": "^11.14.0",
114114
"@layer5/meshery-design-embed": "^0.4.0",
115115
"@mui/material": "^6.4.8",
116+
"@sistent/mui-datatables": "^5.1.4",
116117
"@types/mui-datatables": "*",
117118
"billboard.js": "^3.15.0",
118119
"js-yaml": "^4.1.0",
119120
"lodash": "^4.17.21",
120121
"moment": "^2.30.1",
121-
"mui-datatables": "github:leecalcote/mui-datatables#decbb0493fdd95d674d2dd748d3d35cefb801195",
122122
"re-resizable": "^6.11.2",
123123
"react-draggable": "^4.4.6",
124124
"react-share": "^5.1.0",

‎src/__testing__/ResponsiveDataTable.test.tsx‎

Lines changed: 110 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,138 @@
1-
import React, { act } from 'react';
2-
import { render, waitFor } from '@testing-library/react';
3-
import type { MUIDataTableColumn, MUIDataTableOptions, MUIDataTableProps } from 'mui-datatables';
4-
import ResponsiveDataTable from '../custom/ResponsiveDataTable';
5-
6-
const muiDataTableMock = jest.fn();
7-
8-
jest.mock('react-markdown', () => {
9-
const React = require('react');
1+
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import { SistentThemeProvider } from '../theme';
4+
5+
jest.mock('react-markdown', () => ({
6+
__esModule: true,
7+
default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>
8+
}));
9+
10+
jest.mock('remark-gfm', () => ({
11+
__esModule: true,
12+
default: () => {}
13+
}));
14+
15+
jest.mock('rehype-raw', () => ({
16+
__esModule: true,
17+
default: () => {}
18+
}));
19+
20+
jest.mock('@sistent/mui-datatables', () => {
21+
const MockMUIDataTable = ({
22+
data,
23+
columns
24+
}: {
25+
data: string[][];
26+
columns: { name: string; label: string }[];
27+
}) => (
28+
<table data-testid="mui-datatable">
29+
<thead>
30+
<tr>
31+
{columns.map((col) => (
32+
<th key={col.name}>{col.label}</th>
33+
))}
34+
</tr>
35+
</thead>
36+
<tbody>
37+
{data.map((row, rowIndex) => (
38+
<tr key={rowIndex}>
39+
{row.map((cell, cellIndex) => (
40+
<td key={cellIndex}>{cell}</td>
41+
))}
42+
</tr>
43+
))}
44+
</tbody>
45+
</table>
46+
);
1047
return {
1148
__esModule: true,
12-
default: (props: unknown) => React.createElement('div', props)
49+
default: MockMUIDataTable
1350
};
1451
});
1552

16-
jest.mock('rehype-raw', () => () => null);
17-
jest.mock('remark-gfm', () => () => null);
53+
// eslint-disable-next-line import/first
54+
import ResponsiveDataTable from '../custom/ResponsiveDataTable';
1855

19-
jest.mock('../custom', () => {
20-
const React = require('react');
21-
return {
22-
__esModule: true,
23-
CustomTooltip: ({ children }: { children: React.ReactNode }) =>
24-
React.createElement('div', null, children)
25-
};
26-
});
56+
const mockColumns = [
57+
{ name: 'id', label: 'ID', options: { display: true } },
58+
{ name: 'name', label: 'Name', options: { display: true } }
59+
];
2760

28-
jest.mock('mui-datatables', () => {
29-
const React = require('react');
30-
return {
31-
__esModule: true,
32-
default: (props: MUIDataTableProps) => {
33-
muiDataTableMock(props);
34-
return React.createElement('div', { 'data-testid': 'mui-datatables' });
35-
},
36-
MUIDataTableColumn: {}
37-
};
38-
});
61+
const mockData = [
62+
['1', 'Test Item 1'],
63+
['2', 'Test Item 2']
64+
];
3965

40-
describe('ResponsiveDataTable', () => {
41-
beforeEach(() => {
42-
muiDataTableMock.mockClear();
43-
});
66+
const mockColumnVisibility = {
67+
id: true,
68+
name: true
69+
};
4470

45-
it('applies default table options', () => {
46-
const columns: MUIDataTableColumn[] = [{ name: 'id', label: 'ID' }];
71+
const renderWithTheme = (ui: React.ReactElement) => {
72+
return render(<SistentThemeProvider>{ui}</SistentThemeProvider>);
73+
};
4774

48-
render(
75+
describe('ResponsiveDataTable', () => {
76+
it('renders without errors', () => {
77+
renderWithTheme(
4978
<ResponsiveDataTable
50-
columns={columns}
51-
data={[]}
52-
tableCols={columns}
53-
columnVisibility={{}}
79+
data={mockData}
80+
columns={mockColumns}
81+
tableCols={mockColumns}
82+
columnVisibility={mockColumnVisibility}
5483
/>
5584
);
85+
});
5686

57-
expect(muiDataTableMock).toHaveBeenCalled();
58-
const props = muiDataTableMock.mock.calls[0][0] as MUIDataTableProps;
59-
const options = props.options as MUIDataTableOptions;
60-
61-
expect(options).toEqual(
62-
expect.objectContaining({
63-
print: false,
64-
download: false,
65-
search: false,
66-
filter: false,
67-
viewColumns: false,
68-
rowsPerPageOptions: [10, 25, 50, 100],
69-
elevation: 0,
70-
enableNestedDataAccess: '.'
71-
})
87+
it('renders table with data', () => {
88+
renderWithTheme(
89+
<ResponsiveDataTable
90+
data={mockData}
91+
columns={mockColumns}
92+
tableCols={mockColumns}
93+
columnVisibility={mockColumnVisibility}
94+
/>
7295
);
96+
expect(screen.getByText('Test Item 1')).toBeTruthy();
97+
expect(screen.getByText('Test Item 2')).toBeTruthy();
7398
});
7499

75-
it('updates column visibility via onViewColumnsChange', async () => {
76-
const columns: MUIDataTableColumn[] = [{ name: 'name', label: 'Name', options: { display: true } }];
77-
const updateCols = jest.fn();
78-
79-
render(
100+
it('renders column headers', () => {
101+
renderWithTheme(
80102
<ResponsiveDataTable
81-
columns={columns}
82-
data={[]}
83-
tableCols={columns}
84-
columnVisibility={{ name: true }}
85-
updateCols={updateCols}
103+
data={mockData}
104+
columns={mockColumns}
105+
tableCols={mockColumns}
106+
columnVisibility={mockColumnVisibility}
86107
/>
87108
);
88-
89-
await waitFor(() => expect(updateCols).toHaveBeenCalled());
90-
91-
const props = muiDataTableMock.mock.calls[0][0] as MUIDataTableProps;
92-
const options = props.options as MUIDataTableOptions;
93-
94-
act(() => {
95-
options.onViewColumnsChange?.('name', 'remove');
96-
});
97-
98-
expect(columns[0].options?.display).toBe(false);
99-
expect(updateCols).toHaveBeenCalledTimes(2);
109+
expect(screen.getByText('ID')).toBeTruthy();
110+
expect(screen.getByText('Name')).toBeTruthy();
100111
});
101112

102-
it('attaches date renderer for known date columns', async () => {
103-
const columns: MUIDataTableColumn[] = [{ name: 'updated_at', label: 'Updated At', options: {} }];
104-
const updateCols = jest.fn();
105-
106-
render(
113+
it('accepts custom rowsPerPageOptions', () => {
114+
renderWithTheme(
107115
<ResponsiveDataTable
108-
columns={columns}
109-
data={[]}
110-
tableCols={columns}
111-
columnVisibility={{ updated_at: true }}
112-
updateCols={updateCols}
116+
data={mockData}
117+
columns={mockColumns}
118+
tableCols={mockColumns}
119+
columnVisibility={mockColumnVisibility}
120+
rowsPerPageOptions={[5, 10, 20]}
113121
/>
114122
);
123+
});
115124

116-
await waitFor(() => expect(updateCols).toHaveBeenCalled());
117-
118-
const renderer = columns[0].options?.customBodyRender;
119-
expect(typeof renderer).toBe('function');
120-
121-
const element = renderer && renderer('2024-01-01T00:00:00Z');
122-
expect(element).toBeTruthy();
125+
it('calls updateCols when provided', () => {
126+
const mockUpdateCols = jest.fn();
127+
renderWithTheme(
128+
<ResponsiveDataTable
129+
data={mockData}
130+
columns={mockColumns}
131+
tableCols={mockColumns}
132+
columnVisibility={mockColumnVisibility}
133+
updateCols={mockUpdateCols}
134+
/>
135+
);
136+
expect(mockUpdateCols).toHaveBeenCalled();
123137
});
124138
});

‎src/custom/CatalogDesignTable/CatalogDesignTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable @typescript-eslint/no-explicit-any */
22
import _ from 'lodash';
3-
import { MUIDataTableColumn } from 'mui-datatables';
3+
import { MUIDataTableColumn } from '@sistent/mui-datatables';
44
import { useCallback, useMemo, useRef, useState } from 'react';
55
import { PublishIcon } from '../../icons';
66
import { CHARCOAL } from '../../theme';

‎src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Lock, Public } from '@mui/icons-material';
22
import { Theme } from '@mui/material';
3-
import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
3+
import { MUIDataTableColumn, MUIDataTableMeta } from '@sistent/mui-datatables';
44
import { Typography } from '../../base';
55
import { PLAYGROUND_MODES } from '../../constants/constants';
66
import { ChainIcon, CopyIcon, KanvasIcon, MoveFileIcon, PublishIcon } from '../../icons';

‎src/custom/CatalogDesignTable/columnConfig.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable @typescript-eslint/ban-ts-comment */
22
/* eslint-disable @typescript-eslint/no-explicit-any */
3-
import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
3+
import { MUIDataTableColumn, MUIDataTableMeta } from '@sistent/mui-datatables';
44
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
55
import { iconMedium } from '../../constants/iconsSizes';
66
import {

‎src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { MUIDataTableColumn } from 'mui-datatables';
1+
import { MUIDataTableColumn } from '@sistent/mui-datatables';
22
import React from 'react';
33
import { Box } from '../../base/Box';
44
import { Card } from '../../base/Card';

‎src/custom/ResponsiveDataTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import MUIDataTable, { MUIDataTableColumn } from 'mui-datatables';
1+
import MUIDataTable, { MUIDataTableColumn } from '@sistent/mui-datatables';
22
import React, { useCallback } from 'react';
33
import { Checkbox, Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
44
import { ShareIcon } from '../icons';

0 commit comments

Comments
 (0)