Skip to content

Commit aa248b4

Browse files
amitamrutiyaamitamrutiya
authored
Merge branch 'master' into fix/faheemonhub/update-meshery-cloud-design
2 parents 9ca859a + 2e91d50 commit aa248b4

File tree

16 files changed

+161
-140
lines changed

16 files changed

+161
-140
lines changed

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function ResponsiveDataTable({ data, columns, options = {}, ...props }) {
1313
year: 'numeric'
1414
};
1515

16-
return new Intl.DateTimeFormat('en-US', dateOptions).format(date);
16+
return new Intl.DateTimeFormat('un-US', dateOptions).format(date);
1717
};
1818

1919
const updatedOptions = {
@@ -37,21 +37,14 @@ export function ResponsiveDataTable({ data, columns, options = {}, ...props }) {
3737
break;
3838
}
3939
}
40-
},
41-
filter: true,
42-
sort: true,
43-
responsive: 'standard',
44-
serverSide: false,
40+
}
4541
};
4642

4743
useEffect(() => {
4844
columns?.forEach((col) => {
4945
if (!col.options) {
5046
col.options = {};
5147
}
52-
53-
col.options.sort = true;
54-
col.options.filter = true;
5548
col.options.display = columnVisibility[col.name];
5649

5750
if (

‎src/custom/CatalogDesignTable/CatalogDesignTable.tsx

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import _ from 'lodash';
33
import { MUIDataTableColumn } from 'mui-datatables';
44
import { useCallback, useMemo, useRef } from 'react';
55
import { PublishIcon } from '../../icons';
6-
import { CHARCOAL, useTheme } from '../../theme';
6+
import { CHARCOAL } from '../../theme';
77
import { Pattern } from '../CustomCatalog/CustomCard';
88
import { ErrorBoundary } from '../ErrorBoundary';
99
import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
@@ -52,10 +52,8 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
5252
handleBulkDeleteModal,
5353
setSearch,
5454
rowsPerPageOptions = [10, 25, 50, 100],
55-
tableBackgroundColor,
5655
handleBulkpatternsDataUnpublishModal
5756
}) => {
58-
const theme = useTheme();
5957
const modalRef = useRef<PromptRef>(null);
6058

6159
const formatDate = useCallback((date: string | Date): string => {
@@ -72,8 +70,6 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
7270
return columns.map((col) => {
7371
const newCol = { ...col };
7472
if (!newCol.options) newCol.options = {};
75-
newCol.options.sort = true;
76-
newCol.options.filter = true;
7773
newCol.options.display = columnVisibility[col.name];
7874
if (
7975
[
@@ -149,8 +145,6 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
149145
rowsPerPage: pageSize,
150146
page,
151147
elevation: 0,
152-
sort: true,
153-
filter: true,
154148
sortOrder: {
155149
name: sortOrder.split(' ')[0],
156150
direction: sortOrder.split(' ')[1]
@@ -208,13 +202,6 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
208202
colViews={colViews}
209203
tableCols={processedColumns}
210204
columnVisibility={columnVisibility}
211-
backgroundColor={
212-
tableBackgroundColor
213-
? tableBackgroundColor
214-
: theme.palette.mode === 'light'
215-
? theme.palette.background.default
216-
: theme.palette.background.secondary
217-
}
218205
/>
219206
</ErrorBoundary>
220207
);

‎src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -72,17 +72,15 @@ export const createDesignsColumnsConfig = ({
7272
name: 'id',
7373
label: 'ID',
7474
options: {
75-
filter: true,
76-
sort: true,
77-
searchable: true,
75+
filter: false,
7876
customBodyRender: (value: string) => <ConditionalTooltip value={value} maxLength={10} />
7977
}
8078
},
8179
{
8280
name: 'name',
8381
label: 'Name',
8482
options: {
85-
filter: true,
83+
filter: false,
8684
sort: true,
8785
searchable: true,
8886
customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => {
@@ -97,7 +95,7 @@ export const createDesignsColumnsConfig = ({
9795
name: 'first_name',
9896
label: 'Author',
9997
options: {
100-
filter: true,
98+
filter: false,
10199
sort: true,
102100
searchable: true,
103101
customBodyRender: (_, tableMeta: MUIDataTableMeta) => {
@@ -122,7 +120,7 @@ export const createDesignsColumnsConfig = ({
122120
name: 'created_at',
123121
label: 'Created At',
124122
options: {
125-
filter: true,
123+
filter: false,
126124
sort: true,
127125
searchable: true,
128126
setCellHeaderProps: () => {
@@ -134,7 +132,7 @@ export const createDesignsColumnsConfig = ({
134132
name: 'updated_at',
135133
label: 'Updated At',
136134
options: {
137-
filter: true,
135+
filter: false,
138136
sort: true,
139137
searchable: true,
140138
setCellHeaderProps: () => {
@@ -146,36 +144,38 @@ export const createDesignsColumnsConfig = ({
146144
name: 'visibility',
147145
label: 'Visibility',
148146
options: {
149-
filter: true,
150-
sort: true,
147+
filter: false,
148+
sort: false,
151149
searchable: true
152150
}
153151
},
154152
{
155153
name: 'user_id',
156154
label: 'User ID',
157155
options: {
158-
filter: true,
159-
sort: true,
160-
searchable: true
156+
filter: false,
157+
sort: false,
158+
searchable: false
161159
}
162160
},
161+
163162
{
164163
name: 'email',
165-
label: 'Email',
164+
label: 'email',
166165
options: {
167-
filter: true,
168-
sort: true,
169-
searchable: true
166+
filter: false,
167+
sort: false,
168+
searchable: false
170169
}
171170
},
171+
172172
{
173173
name: 'actions',
174174
label: 'Actions',
175175
options: {
176-
filter: true,
177-
sort: true,
178-
searchable: true,
176+
filter: false,
177+
sort: false,
178+
searchable: false,
179179
setCellHeaderProps: () => ({ align: 'center' as const }),
180180
setCellProps: () => ({ align: 'center' as const }),
181181
customBodyRender: function CustomBody(_, tableMeta: MUIDataTableMeta) {
@@ -247,7 +247,7 @@ export const createDesignsColumnsConfig = ({
247247
actionsList.splice(1, 0, publishAction);
248248
}
249249

250-
return <DataTableEllipsisMenu actionsList={actionsList} theme={theme} />;
250+
return <DataTableEllipsisMenu actionsList={actionsList} />;
251251
}
252252
}
253253
}

‎src/custom/CatalogDesignTable/columnConfig.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -86,15 +86,15 @@ export const createDesignColumns = ({
8686
name: 'id',
8787
label: 'ID',
8888
options: {
89-
filter: true,
89+
filter: false,
9090
customBodyRender: (value: string) => <ConditionalTooltip value={value} maxLength={10} />
9191
}
9292
},
9393
{
9494
name: 'name',
9595
label: 'Name',
9696
options: {
97-
filter: true,
97+
filter: false,
9898
sort: true,
9999
searchable: true,
100100
customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => {
@@ -122,7 +122,7 @@ export const createDesignColumns = ({
122122
name: 'first_name',
123123
label: 'Author',
124124
options: {
125-
filter: true,
125+
filter: false,
126126
sort: true,
127127
searchable: true,
128128
customBodyRender: (_: string, tableMeta: MUIDataTableMeta) => {
@@ -154,7 +154,7 @@ export const createDesignColumns = ({
154154
name: 'created_at',
155155
label: 'Created At',
156156
options: {
157-
filter: true,
157+
filter: false,
158158
sort: true,
159159
searchable: true
160160
}
@@ -163,7 +163,7 @@ export const createDesignColumns = ({
163163
name: 'updated_at',
164164
label: 'Updated At',
165165
options: {
166-
filter: true,
166+
filter: false,
167167
sort: true,
168168
searchable: true
169169
}
@@ -173,7 +173,7 @@ export const createDesignColumns = ({
173173
label: 'Type',
174174
options: {
175175
filter: true,
176-
sort: true,
176+
sort: false,
177177
searchable: true
178178
}
179179
},
@@ -182,56 +182,56 @@ export const createDesignColumns = ({
182182
label: 'Class',
183183
options: {
184184
filter: true,
185-
sort: true,
185+
sort: false,
186186
searchable: true
187187
}
188188
},
189189
{
190190
name: 'view_count',
191191
label: 'Opens',
192192
options: {
193-
filter: true,
193+
filter: false,
194194
sort: true
195195
}
196196
},
197197
{
198198
name: 'download_count',
199199
label: 'Downloads',
200200
options: {
201-
filter: true,
201+
filter: false,
202202
sort: true
203203
}
204204
},
205205
{
206206
name: 'clone_count',
207207
label: 'Clones',
208208
options: {
209-
filter: true,
209+
filter: false,
210210
sort: true
211211
}
212212
},
213213
{
214214
name: 'deployment_count',
215215
label: 'Deploys',
216216
options: {
217-
filter: true,
217+
filter: false,
218218
sort: true
219219
}
220220
},
221221
{
222222
name: 'share_count',
223223
label: 'Shares',
224224
options: {
225-
filter: true,
225+
filter: false,
226226
sort: true
227227
}
228228
},
229229
{
230230
name: 'actions',
231231
label: 'Actions',
232232
options: {
233-
filter: true,
234-
sort: true,
233+
filter: false,
234+
sort: false,
235235
searchable: false,
236236
setCellHeaderProps: () => ({ align: 'center' }),
237237
setCellProps: () => ({ align: 'center' }),

‎src/custom/ResponsiveDataTable.tsx

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { Theme, styled } from '@mui/material/styles';
21
import MUIDataTable, { MUIDataTableColumn } from 'mui-datatables';
32
import React, { useCallback } from 'react';
43
import { Checkbox, Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
54
import { ShareIcon } from '../icons';
65
import { EllipsisIcon } from '../icons/Ellipsis';
6+
import { styled, useTheme } from './../theme';
77
import { ColView } from './Helpers/ResponsiveColumns/responsive-coulmns.tsx';
88
import { TooltipIcon } from './TooltipIconButton';
99

@@ -20,11 +20,10 @@ export const IconWrapper = styled('div', {
2020

2121
export const DataTableEllipsisMenu: React.FC<{
2222
actionsList: NonNullable<Column['options']>['actionsList'];
23-
theme?: Theme;
24-
}> = ({ actionsList, theme }) => {
23+
}> = ({ actionsList }) => {
2524
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
2625
const [isSocialShareOpen, setIsSocialShareOpen] = React.useState(false);
27-
26+
const theme = useTheme();
2827
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
2928
setAnchorEl(event.currentTarget);
3029
};
@@ -50,7 +49,7 @@ export const DataTableEllipsisMenu: React.FC<{
5049
<TooltipIcon
5150
title="View Actions"
5251
onClick={handleClick}
53-
icon={<EllipsisIcon fill={theme?.palette.icon.default ?? 'black'} />}
52+
icon={<EllipsisIcon fill={theme.palette.icon.default} />}
5453
arrow
5554
/>
5655
<Menu
@@ -59,9 +58,8 @@ export const DataTableEllipsisMenu: React.FC<{
5958
open={Boolean(anchorEl)}
6059
onClose={handleClose}
6160
sx={{
62-
fontFamily: theme?.typography.fontFamily,
6361
'& .MuiPaper-root': {
64-
backgroundColor: theme?.palette.background.card ?? 'white'
62+
backgroundColor: theme.palette.background.card
6563
}
6664
}}
6765
>
@@ -73,19 +71,14 @@ export const DataTableEllipsisMenu: React.FC<{
7371
key={`${index}-menuitem`}
7472
sx={{
7573
width: '-webkit-fill-available'
76-
// background: theme.palette.background.surfaces
7774
}}
7875
onClick={() => handleActionClick(action)}
7976
disabled={action.disabled}
8077
>
8178
<ListItemIcon>
82-
<ShareIcon
83-
width={24}
84-
height={24}
85-
fill={theme?.palette.text.primary ?? 'black'}
86-
/>
79+
<ShareIcon width={24} height={24} fill={theme.palette.text.primary} />
8780
</ListItemIcon>
88-
<ListItemText sx={{ color: theme?.palette.text.primary ?? 'black' }}>
81+
<ListItemText sx={{ color: theme.palette.text.primary }}>
8982
{action.title}
9083
</ListItemText>
9184
</MenuItem>,
@@ -109,7 +102,7 @@ export const DataTableEllipsisMenu: React.FC<{
109102
disabled={action.disabled}
110103
>
111104
<ListItemIcon>{action.icon}</ListItemIcon>
112-
<ListItemText sx={{ color: theme?.palette.text.primary ?? 'black' }}>
105+
<ListItemText sx={{ color: theme.palette.text.primary }}>
113106
{action.title}
114107
</ListItemText>
115108
</MenuItem>

0 commit comments

Comments
 (0)