Convert workspace data table into sistent component

src/constants/constants.ts

@@ -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',
+  VISUALIZER: 'visualize'
+} as const;

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -5,6 +5,7 @@ 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';
@@ -22,7 +23,7 @@ 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;
   handleBulkpatternsDataUnpublishModal: (
     selected: any,
@@ -43,7 +44,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
   page = 0,
   setPage,
   columnVisibility = {},
-  colViews = {},
+  colViews = [],
   handleBulkDeleteModal,
   handleBulkpatternsDataUnpublishModal
 }) => {

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -0,0 +1,221 @@
+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;
+  isDownloadDisabled: boolean;
+  isCopyLinkDisabled: boolean;
+  isDeleteDisabled: boolean;
+  isPublishDisabled: boolean;
+  isUnpublishDisabled: boolean;
+}
+
+export const colViews: ColView[] = [
+  ['id', 'na'],
+  ['name', 'xs'],
+  ['first_name', 'xs'],
+  ['created_at', 'na'],
+  ['updated_at', 'l'],
+  ['visibility', 'l'],
+  ['actions', 'xs']
+];
+
+export const createDesignsColumnsConfig = ({
+  handleDeleteModal,
+  handlePublishModal,
+  handleUnpublishModal,
+  handleCopyUrl,
+  handleClone,
+  handleShowDetails,
+  isUnpublishDisabled,
+  isCopyLinkDisabled,
+  isDeleteDisabled,
+  isPublishDisabled,
+  isDownloadDisabled
+}: 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: '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: isDownloadDisabled,
+              icon: <Download width={24} height={24} fill={CHARCOAL} />
+            },
+            {
+              title: 'Copy Link',
+              disabled: rowData.visibility === 'private' || isCopyLinkDisabled,
+              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: 'Delete',
+              disabled: isDeleteDisabled,
+              onClick: () => handleDeleteModal(rowData)(),
+              icon: <L5DeleteIcon />
+            }
+          ];
+
+          const publishAction = {
+            title: 'Publish',
+            disabled: isPublishDisabled,
+            onClick: () => handlePublishModal(rowData),
+            icon: <PublishIcon width={24} height={24} fill={CHARCOAL} />
+          };
+
+          const unpublishAction = {
+            title: 'Unpublish',
+            onClick: () => handleUnpublishModal(rowData)(),
+            disabled: isUnpublishDisabled,
+            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} />;
+        }
+      }
+    }
+  ];
+};

src/custom/CatalogDesignTable/columnConfig.tsx

@@ -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'],
@@ -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',

src/custom/CatalogDesignTable/helper.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { MUIDataTableMeta } from 'mui-datatables';
+
+export const getColumnValue = (tableMeta: MUIDataTableMeta, targetColumn: string): any => {
+  //@ts-ignore
+  const rowData = tableMeta.tableData[tableMeta.rowIndex] as Pattern;
+  return (rowData as any)[targetColumn] || '';
+};

src/custom/CatalogDesignTable/index.ts

@@ -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
+};

src/custom/CatalogDesignTable/style.tsx

@@ -1,4 +1,7 @@
+import DeleteIcon from '@mui/icons-material/Delete';
 import { styled } from '@mui/material';
+import { buttonDisabled } from '../../theme';
+import { HOVER_DELETE } from '../../theme/colors/colors';
 
 export const NameDiv = styled('div')({
   cursor: 'pointer',
@@ -9,3 +12,25 @@ export const NameDiv = styled('div')({
     textDecoration: 'underline'
   }
 });
+
+interface DeleteIconProps {
+  disabled?: boolean;
+  bulk?: boolean;
+}
+
+export const L5DeleteIcon = styled(DeleteIcon)<DeleteIconProps>(({ disabled, bulk, theme }) => ({
+  color: disabled ? theme.palette.icon.disabled : theme.palette.text.secondary,
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  width: bulk ? '32' : '28.8',
+  height: bulk ? '32' : '28.8',
+  '&:hover': {
+    color: disabled ? buttonDisabled : HOVER_DELETE,
+    '& svg': {
+      color: disabled ? buttonDisabled : HOVER_DELETE
+    }
+  },
+  '& svg': {
+    color: theme.palette.error.main,
+    cursor: disabled ? 'not-allowed' : 'pointer'
+  }
+}));

src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx

@@ -1,3 +1,4 @@
+import { MUIDataTableColumn } from 'mui-datatables';
 import React from 'react';
 import { Box } from '../../base/Box';
 import { Card } from '../../base/Card';
@@ -10,7 +11,7 @@ import PopperListener from '../PopperListener';
 import TooltipIcon from '../TooltipIcon';
 
 export interface CustomColumnVisibilityControlProps {
-  columns: CustomColumn[];
+  columns: MUIDataTableColumn[];
   customToolsProps: {
     columnVisibility: Record<string, boolean>;
     setColumnVisibility: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;

src/custom/PerformersSection/PerformersSection.tsx

@@ -184,7 +184,7 @@ interface PageArgs {
   [key: string]: any;
 }
 
-const withDefaultPageArgs = (args: PageArgs = {}): PageArgs => ({
+export const withDefaultPageArgs = (args: PageArgs = {}): PageArgs => ({
   search: args.search ?? '',
   order: args.order ?? '',
   pagesize: args.pagesize ?? 0,

src/custom/ResponsiveDataTable.tsx

@@ -4,6 +4,7 @@ import React, { useCallback } from 'react';
 import { Checkbox, Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
 import { ShareIcon } from '../icons';
 import { EllipsisIcon } from '../icons/Ellipsis';
+import { ColView } from './Helpers/ResponsiveColumns/responsive-coulmns.tsx';
 import TooltipIcon from './TooltipIcon';
 
 export const IconWrapper = styled('div')<{ disabled?: boolean }>(({ disabled = false }) => ({
@@ -283,7 +284,7 @@ export interface ResponsiveDataTableProps {
   updateCols?: ((columns: Column[]) => void) | undefined;
   columnVisibility: Record<string, boolean> | undefined;
   theme?: object;
-  colViews?: Record<string, boolean> | undefined;
+  colViews?: ColView[];
   rowsPerPageOptions?: number[] | undefined;
   backgroundColor?: string;
 }

src/custom/TransferModal/TransferList/TransferList.tsx

@@ -46,7 +46,7 @@ export interface TransferListProps {
   leftPermission: boolean;
 }
 
-interface ListItemType {
+export interface ListItemType {
   id: number;
   name: string;
   kind: string | undefined;