Skip to content

Commit 188aaf4

Browse files
amitamrutiyaamitamrutiya
committed
feat: convert design column config into sistent component
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent 01959f7 commit 188aaf4

7 files changed

Lines changed: 272 additions & 8 deletions

File tree

‎src/constants/constants.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,7 @@ export const CARIBBEAN_GREEN_FILL = '#00D3A9';
77
export const DEFAULT_STROKE = '#000';
88
export const DEFAULT_STROKE_WIDTH = '2';
99
export const CLOUD_URL = 'https://cloud.layer5.io';
10+
export const PLAYGROUND_MODES = {
11+
DESIGNER: 'design',
12+
VISUALIZER: 'visualize'
13+
} as const;

‎src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
2+
import { PLAYGROUND_MODES } from '../../constants/constants';
3+
import { ChainIcon, CopyIcon, KanvasIcon, PublishIcon } from '../../icons';
4+
import Download from '../../icons/Download/Download';
5+
import { CHARCOAL } from '../../theme';
6+
import { downloadYaml, slugify } from '../CatalogDetail/helper';
7+
import { RESOURCE_TYPES } from '../CatalogDetail/types';
8+
import { Pattern } from '../CustomCatalog/CustomCard';
9+
import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
10+
import { DataTableEllipsisMenu } from '../ResponsiveDataTable';
11+
import AuthorCell from './AuthorCell';
12+
import { getColumnValue } from './helper';
13+
import { L5DeleteIcon, NameDiv } from './style';
14+
15+
interface TableMeta extends MUIDataTableMeta {
16+
rowIndex: number;
17+
tableData: Pattern[];
18+
}
19+
20+
interface ColumnConfigProps {
21+
handleDeleteModal: (data: Pattern) => () => void;
22+
handlePublishModal: (data: Pattern) => void;
23+
handleUnpublishModal: (data: Pattern) => () => void;
24+
handleCopyUrl: (type: string, name: string, id: string) => void;
25+
handleClone: (name: string, id: string) => void;
26+
handleShowDetails: (designId: string, designName: string) => void;
27+
isDownloadDisabled: boolean;
28+
isCopyLinkDisabled: boolean;
29+
isDeleteDisabled: boolean;
30+
isPublishDisabled: boolean;
31+
isUnpublishDisabled: boolean;
32+
}
33+
34+
export const colViews: [string, string][] = [
35+
['id', 'na'],
36+
['name', 'xs'],
37+
['first_name', 'xs'],
38+
['created_at', 'na'],
39+
['updated_at', 'l'],
40+
['visibility', 'l'],
41+
['actions', 'xs']
42+
];
43+
44+
export const createDesignsColumnsConfig = ({
45+
handleDeleteModal,
46+
handlePublishModal,
47+
handleUnpublishModal,
48+
handleCopyUrl,
49+
handleClone,
50+
handleShowDetails,
51+
isUnpublishDisabled,
52+
isCopyLinkDisabled,
53+
isDeleteDisabled,
54+
isPublishDisabled,
55+
isDownloadDisabled
56+
}: ColumnConfigProps): MUIDataTableColumn[] => {
57+
return [
58+
{
59+
name: 'id',
60+
label: 'ID',
61+
options: {
62+
filter: false,
63+
customBodyRender: (value: string) => <ConditionalTooltip value={value} maxLength={10} />
64+
}
65+
},
66+
{
67+
name: 'name',
68+
label: 'Pattern Name',
69+
options: {
70+
filter: false,
71+
sort: true,
72+
searchable: true,
73+
customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => {
74+
const designId = (tableMeta as TableMeta).tableData[tableMeta.rowIndex]?.id ?? '';
75+
const designName = (tableMeta as TableMeta).tableData[tableMeta.rowIndex]?.name ?? '';
76+
77+
return <NameDiv onClick={() => handleShowDetails(designId, designName)}>{value}</NameDiv>;
78+
}
79+
}
80+
},
81+
{
82+
name: 'first_name',
83+
label: 'Author',
84+
options: {
85+
filter: false,
86+
sort: true,
87+
searchable: true,
88+
customBodyRender: (_, tableMeta: MUIDataTableMeta) => {
89+
const firstName = getColumnValue(tableMeta as TableMeta, 'first_name');
90+
const lastName = getColumnValue(tableMeta as TableMeta, 'last_name');
91+
const avatar_url = getColumnValue(tableMeta as TableMeta, 'avatar_url');
92+
const user_id = getColumnValue(tableMeta as TableMeta, 'user_id');
93+
94+
return (
95+
<AuthorCell
96+
firstName={firstName}
97+
lastName={lastName}
98+
avatarUrl={avatar_url}
99+
userId={user_id}
100+
/>
101+
);
102+
}
103+
}
104+
},
105+
{
106+
name: 'created_at',
107+
label: 'Created At',
108+
options: {
109+
filter: false,
110+
sort: true,
111+
searchable: true,
112+
setCellHeaderProps: () => {
113+
return { align: 'center' };
114+
}
115+
}
116+
},
117+
{
118+
name: 'updated_at',
119+
label: 'Updated At',
120+
options: {
121+
filter: false,
122+
sort: true,
123+
searchable: true,
124+
setCellHeaderProps: () => {
125+
return { align: 'center' };
126+
}
127+
}
128+
},
129+
{
130+
name: 'visibility',
131+
label: 'Visibility',
132+
options: {
133+
filter: false,
134+
sort: false,
135+
searchable: true
136+
}
137+
},
138+
{
139+
name: 'actions',
140+
label: 'Actions',
141+
options: {
142+
filter: false,
143+
sort: false,
144+
searchable: false,
145+
setCellHeaderProps: () => ({ align: 'center' as const }),
146+
setCellProps: () => ({ align: 'center' as const }),
147+
customBodyRender: function CustomBody(_, tableMeta: MUIDataTableMeta) {
148+
const rowIndex = (tableMeta as TableMeta).rowIndex;
149+
const rowData = (tableMeta as TableMeta).tableData[rowIndex];
150+
151+
const actionsList = [
152+
{
153+
title: 'Download',
154+
onClick: () => downloadYaml(rowData?.pattern_file, rowData?.name),
155+
disabled: isDownloadDisabled,
156+
icon: <Download width={24} height={24} fill={CHARCOAL} />
157+
},
158+
{
159+
title: 'Copy Link',
160+
disabled: rowData.visibility === 'private' || isCopyLinkDisabled,
161+
onClick: () => {
162+
handleCopyUrl(RESOURCE_TYPES.DESIGNS, rowData?.name, rowData?.id);
163+
},
164+
icon: <ChainIcon width={'24'} height={'24'} fill={CHARCOAL} />
165+
},
166+
{
167+
title: 'Open in playground',
168+
onClick: () => {
169+
window.open(
170+
`https://playground.meshery.io/extension/meshmap?mode=${
171+
PLAYGROUND_MODES.DESIGNER
172+
}&type=${RESOURCE_TYPES.DESIGNS}&id=${rowData?.id}&name=${slugify(
173+
rowData?.name
174+
)}`,
175+
'_blank'
176+
);
177+
},
178+
icon: <KanvasIcon width={24} height={24} primaryFill={CHARCOAL} />
179+
},
180+
{
181+
title: 'Delete',
182+
disabled: isDeleteDisabled,
183+
onClick: () => handleDeleteModal(rowData)(),
184+
icon: <L5DeleteIcon />
185+
}
186+
];
187+
188+
const publishAction = {
189+
title: 'Publish',
190+
disabled: isPublishDisabled,
191+
onClick: () => handlePublishModal(rowData),
192+
icon: <PublishIcon width={24} height={24} fill={CHARCOAL} />
193+
};
194+
195+
const unpublishAction = {
196+
title: 'Unpublish',
197+
onClick: () => handleUnpublishModal(rowData)(),
198+
disabled: isUnpublishDisabled,
199+
icon: <PublishIcon width={24} height={24} fill={CHARCOAL} />
200+
};
201+
202+
const cloneAction = {
203+
title: 'Clone',
204+
onClick: () => handleClone(rowData?.name, rowData?.id),
205+
icon: <CopyIcon width={24} height={24} fill={CHARCOAL} />
206+
};
207+
208+
if (rowData.visibility === 'published') {
209+
actionsList.splice(0, 0, cloneAction);
210+
actionsList.splice(2, 0, unpublishAction);
211+
} else {
212+
actionsList.splice(1, 0, publishAction);
213+
}
214+
215+
return <DataTableEllipsisMenu actionsList={actionsList} />;
216+
}
217+
}
218+
}
219+
];
220+
};

‎src/custom/CatalogDesignTable/columnConfig.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Pattern } from '../CustomCatalog/CustomCard';
1919
import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
2020
import { DataTableEllipsisMenu } from '../ResponsiveDataTable';
2121
import AuthorCell from './AuthorCell';
22+
import { getColumnValue } from './helper';
2223
import { NameDiv } from './style';
2324

2425
export type ColView = [string, 'na' | 'xs' | 'l'];
@@ -83,12 +84,6 @@ export const createDesignColumns = ({
8384
showOpenPlayground
8485
}: ColumnConfigProps): MUIDataTableColumn[] => {
8586
const cleanedType = type?.replace('my-', '').replace(/s$/, '');
86-
const getColumnValue = (tableMeta: MUIDataTableMeta, targetColumn: string): any => {
87-
//@ts-ignore
88-
const rowData = tableMeta.tableData[tableMeta.rowIndex] as Pattern;
89-
return (rowData as any)[targetColumn] || '';
90-
};
91-
9287
return [
9388
{
9489
name: 'id',

‎src/custom/CatalogDesignTable/helper.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* eslint-disable @typescript-eslint/ban-ts-comment */
2+
/* eslint-disable @typescript-eslint/no-explicit-any */
3+
import { MUIDataTableMeta } from 'mui-datatables';
4+
5+
export const getColumnValue = (tableMeta: MUIDataTableMeta, targetColumn: string): any => {
6+
//@ts-ignore
7+
const rowData = tableMeta.tableData[tableMeta.rowIndex] as Pattern;
8+
return (rowData as any)[targetColumn] || '';
9+
};

‎src/custom/CatalogDesignTable/index.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
import AuthorCell from './AuthorCell';
22
import CatalogDesignsTable from './CatalogDesignTable';
33
import { colViews, createDesignColumns } from './columnConfig';
4+
import {
5+
createDesignsColumnsConfig,
6+
colViews as designColumnsColViews
7+
} from './DesignColumnConfig';
48
export { TableVisibilityControl } from './TableVisibilityControl';
59
export { ViewSwitch } from './ViewSwitch';
6-
export { AuthorCell, CatalogDesignsTable, colViews, createDesignColumns };
10+
export {
11+
AuthorCell,
12+
CatalogDesignsTable,
13+
colViews,
14+
createDesignColumns,
15+
createDesignsColumnsConfig,
16+
designColumnsColViews
17+
};

‎src/custom/CatalogDesignTable/style.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
import DeleteIcon from '@mui/icons-material/Delete';
12
import { styled } from '@mui/material';
3+
import { buttonDisabled } from '../../theme';
4+
import { HOVER_DELETE } from '../../theme/colors/colors';
25

36
export const NameDiv = styled('div')({
47
cursor: 'pointer',
@@ -9,3 +12,25 @@ export const NameDiv = styled('div')({
912
textDecoration: 'underline'
1013
}
1114
});
15+
16+
interface DeleteIconProps {
17+
disabled?: boolean;
18+
bulk?: boolean;
19+
}
20+
21+
export const L5DeleteIcon = styled(DeleteIcon)<DeleteIconProps>(({ disabled, bulk, theme }) => ({
22+
color: disabled ? theme.palette.icon.disabled : theme.palette.text.secondary,
23+
cursor: disabled ? 'not-allowed' : 'pointer',
24+
width: bulk ? '32' : '28.8',
25+
height: bulk ? '32' : '28.8',
26+
'&:hover': {
27+
color: disabled ? buttonDisabled : HOVER_DELETE,
28+
'& svg': {
29+
color: disabled ? buttonDisabled : HOVER_DELETE
30+
}
31+
},
32+
'& svg': {
33+
color: theme.palette.error.main,
34+
cursor: disabled ? 'not-allowed' : 'pointer'
35+
}
36+
}));

‎src/theme/colors/colors.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export const charcoal = {
9595
70: '#B1B9BC',
9696
60: '#8C999E',
9797
50: '#647176',
98-
40: '#3C494E',
98+
40: '#3C494F',
9999
30: '#28353A',
100100
20: '#142126',
101101
10: '#000D12'

0 commit comments

Comments
 (0)