Skip to content

Commit

Permalink
Merge branch 'master' into FormLabel
Browse files Browse the repository at this point in the history
  • Loading branch information
amitamrutiya authored Nov 28, 2024
2 parents 6d35b8f + bf2512e commit de2714b
Show file tree
Hide file tree
Showing 54 changed files with 3,331 additions and 115 deletions.
4 changes: 4 additions & 0 deletions src/constants/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,7 @@ export const CARIBBEAN_GREEN_FILL = '#00D3A9';
export const DEFAULT_STROKE = '#000';
export const DEFAULT_STROKE_WIDTH = '2';
export const CLOUD_URL = 'https://cloud.layer5.io';
export const PLAYGROUND_MODES = {
DESIGNER: 'design',
OPERATOR: 'operator'
} as const;
22 changes: 17 additions & 5 deletions src/custom/CatalogDesignTable/CatalogDesignTable.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import _ from 'lodash';
import { MUIDataTableColumn } from 'mui-datatables';
import { useCallback, useMemo, useRef } from 'react';
import { PublishIcon } from '../../icons';
import { CHARCOAL, useTheme } from '../../theme';
import { Pattern } from '../CustomCatalog/CustomCard';
import { ErrorBoundary } from '../ErrorBoundary';
import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
import PromptComponent from '../Prompt';
import { PromptRef } from '../Prompt/promt-component';
import ResponsiveDataTable from '../ResponsiveDataTable';
Expand All @@ -13,7 +15,7 @@ import UnpublishTooltipIcon from './UnpublishTooltipIcon';
interface CatalogDesignsTableProps {
patterns: Pattern[];
filter: any;
columns: Array<any>;
columns: MUIDataTableColumn[];
totalCount: number;
sortOrder: string;
setSortOrder: (order: string) => void;
Expand All @@ -22,8 +24,9 @@ interface CatalogDesignsTableProps {
page: number;
setPage: (page: number) => void;
columnVisibility: Record<string, boolean>;
colViews: Record<string, boolean> | undefined;
colViews: ColView[];
handleBulkDeleteModal: (patterns: Pattern[], modalRef: React.RefObject<PromptRef>) => void;
setSearch?: (search: string) => void;
handleBulkpatternsDataUnpublishModal: (
selected: any,
patterns: Pattern[],
Expand All @@ -43,8 +46,9 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
page = 0,
setPage,
columnVisibility = {},
colViews = {},
colViews = [],
handleBulkDeleteModal,
setSearch,
handleBulkpatternsDataUnpublishModal
}) => {
const theme = useTheme();
Expand All @@ -60,7 +64,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
return new Date(date).toLocaleDateString('en-US', dateOptions);
}, []);

const processedColumns = useMemo(() => {
const processedColumns: MUIDataTableColumn[] = useMemo(() => {
return columns.map((col) => {
const newCol = { ...col };
if (!newCol.options) newCol.options = {};
Expand Down Expand Up @@ -105,6 +109,9 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
case 'changeRowsPerPage':
setPageSize(tableState.rowsPerPage);
break;
case 'search':
setSearch && setSearch(tableState.searchText !== null ? tableState.searchText : '');
break;
case 'sort':
if (
sortInfo.length === 2 &&
Expand All @@ -123,7 +130,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
break;
}
},
[columns, setPage, setPageSize, setSortOrder, sortOrder]
[columns, setPage, setSearch, setPageSize, setSortOrder, sortOrder]
);

const options = useMemo(
Expand All @@ -136,6 +143,11 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
rowsPerPage: pageSize,
page,
elevation: 0,
sortOrder: {
name: 'updated_at',
direction: 'desc'
},

onTableChange: handleTableChange,
customToolbarSelect: _.isNil(filter)
? (selected: any) => (
Expand Down
236 changes: 236 additions & 0 deletions src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,236 @@
import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
import { PLAYGROUND_MODES } from '../../constants/constants';
import { ChainIcon, CopyIcon, KanvasIcon, PublishIcon } from '../../icons';
import Download from '../../icons/Download/Download';
import { CHARCOAL } from '../../theme';
import { downloadYaml, slugify } from '../CatalogDetail/helper';
import { RESOURCE_TYPES } from '../CatalogDetail/types';
import { Pattern } from '../CustomCatalog/CustomCard';
import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx';
import { DataTableEllipsisMenu } from '../ResponsiveDataTable';
import AuthorCell from './AuthorCell';
import { getColumnValue } from './helper';
import { L5DeleteIcon, NameDiv } from './style';

interface TableMeta extends MUIDataTableMeta {
rowIndex: number;
tableData: Pattern[];
}

interface ColumnConfigProps {
handleDeleteModal: (data: Pattern) => () => void;
handlePublishModal: (data: Pattern) => void;
handleUnpublishModal: (data: Pattern) => () => void;
handleCopyUrl: (type: string, name: string, id: string) => void;
handleClone: (name: string, id: string) => void;
handleShowDetails: (designId: string, designName: string) => void;
isDownloadAllowed: boolean;
isCopyLinkAllowed: boolean;
isDeleteAllowed: boolean;
isPublishAllowed: boolean;
isUnpublishAllowed: boolean;
// for workspace designs table page only
isFromWorkspaceTable?: boolean;
isRemoveAllowed?: boolean;
}

export const colViews: ColView[] = [
['id', 'na'],
['name', 'xs'],
['first_name', 'xs'],
['created_at', 'na'],
['updated_at', 'l'],
['visibility', 'l'],
['user_id', 'na'],
['actions', 'xs']
];

export const createDesignsColumnsConfig = ({
handleDeleteModal,
handlePublishModal,
handleUnpublishModal,
handleCopyUrl,
handleClone,
handleShowDetails,
isUnpublishAllowed,
isCopyLinkAllowed,
isDeleteAllowed,
isPublishAllowed,
isDownloadAllowed,
isRemoveAllowed,
isFromWorkspaceTable = false
}: ColumnConfigProps): MUIDataTableColumn[] => {
return [
{
name: 'id',
label: 'ID',
options: {
filter: false,
customBodyRender: (value: string) => <ConditionalTooltip value={value} maxLength={10} />
}
},
{
name: 'name',
label: 'Pattern Name',
options: {
filter: false,
sort: true,
searchable: true,
customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => {
const designId = (tableMeta as TableMeta).tableData[tableMeta.rowIndex]?.id ?? '';
const designName = (tableMeta as TableMeta).tableData[tableMeta.rowIndex]?.name ?? '';

return <NameDiv onClick={() => handleShowDetails(designId, designName)}>{value}</NameDiv>;
}
}
},
{
name: 'first_name',
label: 'Author',
options: {
filter: false,
sort: true,
searchable: true,
customBodyRender: (_, tableMeta: MUIDataTableMeta) => {
const firstName = getColumnValue(tableMeta as TableMeta, 'first_name');
const lastName = getColumnValue(tableMeta as TableMeta, 'last_name');
const avatar_url = getColumnValue(tableMeta as TableMeta, 'avatar_url');
const user_id = getColumnValue(tableMeta as TableMeta, 'user_id');

return (
<AuthorCell
firstName={firstName}
lastName={lastName}
avatarUrl={avatar_url}
userId={user_id}
/>
);
}
}
},
{
name: 'created_at',
label: 'Created At',
options: {
filter: false,
sort: true,
searchable: true,
setCellHeaderProps: () => {
return { align: 'center' };
}
}
},
{
name: 'updated_at',
label: 'Updated At',
options: {
filter: false,
sort: true,
searchable: true,
setCellHeaderProps: () => {
return { align: 'center' };
}
}
},
{
name: 'visibility',
label: 'Visibility',
options: {
filter: false,
sort: false,
searchable: true
}
},
{
name: 'user_id',
label: 'User ID',
options: {
filter: false,
sort: false,
searchable: false
}
},
{
name: 'actions',
label: 'Actions',
options: {
filter: false,
sort: false,
searchable: false,
setCellHeaderProps: () => ({ align: 'center' as const }),
setCellProps: () => ({ align: 'center' as const }),
customBodyRender: function CustomBody(_, tableMeta: MUIDataTableMeta) {
const rowIndex = (tableMeta as TableMeta).rowIndex;
const rowData = (tableMeta as TableMeta).tableData[rowIndex];

const actionsList = [
{
title: 'Download',
onClick: () => downloadYaml(rowData?.pattern_file, rowData?.name),
disabled: !isDownloadAllowed,
icon: <Download width={24} height={24} fill={CHARCOAL} />
},
{
title: 'Copy Link',
disabled: rowData.visibility === 'private' || !isCopyLinkAllowed,
onClick: () => {
handleCopyUrl(RESOURCE_TYPES.DESIGNS, rowData?.name, rowData?.id);
},
icon: <ChainIcon width={'24'} height={'24'} fill={CHARCOAL} />
},
{
title: 'Open in playground',
onClick: () => {
window.open(
`https://playground.meshery.io/extension/meshmap?mode=${
PLAYGROUND_MODES.DESIGNER
}&type=${RESOURCE_TYPES.DESIGNS}&id=${rowData?.id}&name=${slugify(
rowData?.name
)}`,
'_blank'
);
},
icon: <KanvasIcon width={24} height={24} primaryFill={CHARCOAL} />
},
{
title: isFromWorkspaceTable ? 'Remove Design' : 'Delete',
disabled: isFromWorkspaceTable ? !isRemoveAllowed : !isDeleteAllowed,
onClick: () => handleDeleteModal(rowData)(),
icon: <L5DeleteIcon />
}
];

const publishAction = {
title: 'Publish',
disabled: !isPublishAllowed,
onClick: () => handlePublishModal(rowData),
icon: <PublishIcon width={24} height={24} fill={CHARCOAL} />
};

const unpublishAction = {
title: 'Unpublish',
onClick: () => handleUnpublishModal(rowData)(),
disabled: !isUnpublishAllowed,
icon: <PublishIcon width={24} height={24} fill={CHARCOAL} />
};

const cloneAction = {
title: 'Clone',
onClick: () => handleClone(rowData?.name, rowData?.id),
icon: <CopyIcon width={24} height={24} fill={CHARCOAL} />
};

if (rowData.visibility === 'published') {
actionsList.splice(0, 0, cloneAction);
actionsList.splice(2, 0, unpublishAction);
} else {
actionsList.splice(1, 0, publishAction);
}

return <DataTableEllipsisMenu actionsList={actionsList} />;
}
}
}
];
};
10 changes: 2 additions & 8 deletions src/custom/CatalogDesignTable/columnConfig.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@ import { downloadFilter, downloadYaml } from '../CatalogDetail/helper';
import { RESOURCE_TYPES } from '../CatalogDetail/types';
import { Pattern } from '../CustomCatalog/CustomCard';
import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
import { DataTableEllipsisMenu } from '../ResponsiveDataTable';
import AuthorCell from './AuthorCell';
import { getColumnValue } from './helper';
import { NameDiv } from './style';

export type ColView = [string, 'na' | 'xs' | 'l'];

export const colViews: ColView[] = [
['id', 'na'],
['name', 'xs'],
Expand Down Expand Up @@ -83,12 +83,6 @@ export const createDesignColumns = ({
showOpenPlayground
}: ColumnConfigProps): MUIDataTableColumn[] => {
const cleanedType = type?.replace('my-', '').replace(/s$/, '');
const getColumnValue = (tableMeta: MUIDataTableMeta, targetColumn: string): any => {
//@ts-ignore
const rowData = tableMeta.tableData[tableMeta.rowIndex] as Pattern;
return (rowData as any)[targetColumn] || '';
};

return [
{
name: 'id',
Expand Down
6 changes: 6 additions & 0 deletions src/custom/CatalogDesignTable/helper.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */

export const getColumnValue = (tableMeta: any, targetColumn: string): any => {
const rowData = tableMeta.tableData[tableMeta.rowIndex];
return (rowData as any)[targetColumn] || '';
};
13 changes: 12 additions & 1 deletion src/custom/CatalogDesignTable/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
import AuthorCell from './AuthorCell';
import CatalogDesignsTable from './CatalogDesignTable';
import { colViews, createDesignColumns } from './columnConfig';
import {
createDesignsColumnsConfig,
colViews as designColumnsColViews
} from './DesignTableColumnConfig';
export { TableVisibilityControl } from './TableVisibilityControl';
export { ViewSwitch } from './ViewSwitch';
export { AuthorCell, CatalogDesignsTable, colViews, createDesignColumns };
export {
AuthorCell,
CatalogDesignsTable,
colViews,
createDesignColumns,
createDesignsColumnsConfig,
designColumnsColViews
};
Loading

0 comments on commit de2714b

Please sign in to comment.