Merge pull request #901 from amitamrutiya/workspace-table

Create seperate component for workspace page

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -28,6 +28,7 @@ interface CatalogDesignsTableProps {
   rowsPerPageOptions?: number[];
   handleBulkDeleteModal: (patterns: Pattern[], modalRef: React.RefObject<PromptRef>) => void;
   setSearch?: (search: string) => void;
+  tableBackgroundColor?: string;
   handleBulkpatternsDataUnpublishModal: (
     selected: any,
     patterns: Pattern[],
@@ -51,6 +52,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
   handleBulkDeleteModal,
   setSearch,
   rowsPerPageOptions = [10, 25, 50, 100],
+  tableBackgroundColor,
   handleBulkpatternsDataUnpublishModal
 }) => {
   const theme = useTheme();
@@ -203,7 +205,9 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
         tableCols={processedColumns}
         columnVisibility={columnVisibility}
         backgroundColor={
-          theme.palette.mode === 'light'
+          tableBackgroundColor
+            ? tableBackgroundColor
+            : theme.palette.mode === 'light'
             ? theme.palette.background.default
             : theme.palette.background.secondary
         }

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -1,15 +1,15 @@
+import { Theme } from '@mui/material';
 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 { downloadPattern, 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 { UserTableAvatarInfo } from '../UsersTable';
 import { getColumnValue } from './helper';
 import { L5DeleteIcon, NameDiv } from './style';
 
@@ -25,7 +25,8 @@ interface ColumnConfigProps {
   handleCopyUrl: (type: string, name: string, id: string) => void;
   handleClone: (name: string, id: string) => void;
   handleShowDetails: (designId: string, designName: string) => void;
-  getDownloadUrl: (id: string) => string;
+  handleDownload?: (design: Pattern) => void;
+  getDownloadUrl?: (id: string) => string;
   isDownloadAllowed: boolean;
   isCopyLinkAllowed: boolean;
   isDeleteAllowed: boolean;
@@ -34,6 +35,7 @@ interface ColumnConfigProps {
   // for workspace designs table page only
   isFromWorkspaceTable?: boolean;
   isRemoveAllowed?: boolean;
+  theme?: Theme;
 }
 
 export const colViews: ColView[] = [
@@ -55,12 +57,14 @@ export const createDesignsColumnsConfig = ({
   handleClone,
   handleShowDetails,
   getDownloadUrl,
+  handleDownload,
   isUnpublishAllowed,
   isCopyLinkAllowed,
   isDeleteAllowed,
   isPublishAllowed,
   isDownloadAllowed,
   isRemoveAllowed,
+  theme,
   isFromWorkspaceTable = false
 }: ColumnConfigProps): MUIDataTableColumn[] => {
   return [
@@ -99,13 +103,14 @@ export const createDesignsColumnsConfig = ({
           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');
+          const userEmail = getColumnValue(tableMeta as TableMeta, 'email');
 
           return (
-            <AuthorCell
-              firstName={firstName}
-              lastName={lastName}
-              avatarUrl={avatar_url}
+            <UserTableAvatarInfo
+              userEmail={userEmail}
               userId={user_id}
+              userName={`${firstName} ${lastName}`}
+              profileUrl={avatar_url}
             />
           );
         }
@@ -153,6 +158,17 @@ export const createDesignsColumnsConfig = ({
         searchable: false
       }
     },
+
+    {
+      name: 'email',
+      label: 'email',
+      options: {
+        filter: false,
+        sort: false,
+        searchable: false
+      }
+    },
+
     {
       name: 'actions',
       label: 'Actions',
@@ -165,21 +181,22 @@ export const createDesignsColumnsConfig = ({
         customBodyRender: function CustomBody(_, tableMeta: MUIDataTableMeta) {
           const rowIndex = (tableMeta as TableMeta).rowIndex;
           const rowData = (tableMeta as TableMeta).tableData[rowIndex];
-
           const actionsList = [
             {
               title: 'Download',
-              onClick: () => downloadPattern(rowData.id, rowData.name, getDownloadUrl),
+              onClick: getDownloadUrl
+                ? () => downloadPattern(rowData.id, rowData.name, getDownloadUrl)
+                : () => handleDownload && handleDownload(rowData),
               disabled: !isDownloadAllowed,
-              icon: <Download width={24} height={24} fill={CHARCOAL} />
+              icon: <Download width={24} height={24} fill={theme?.palette.icon.secondary} />
             },
             {
               title: 'Copy Link',
               disabled: rowData.visibility === 'private' || !isCopyLinkAllowed,
               onClick: () => {
                 handleCopyUrl(RESOURCE_TYPES.DESIGN, rowData?.name, rowData?.id);
               },
-              icon: <ChainIcon width={'24'} height={'24'} fill={CHARCOAL} />
+              icon: <ChainIcon width={'24'} height={'24'} fill={theme?.palette.icon.secondary} />
             },
             {
               title: 'Open in playground',
@@ -191,7 +208,9 @@ export const createDesignsColumnsConfig = ({
                   '_blank'
                 );
               },
-              icon: <KanvasIcon width={24} height={24} primaryFill={CHARCOAL} />
+              icon: (
+                <KanvasIcon width={24} height={24} primaryFill={theme?.palette.icon.secondary} />
+              )
             },
             {
               title: isFromWorkspaceTable ? 'Remove Design' : 'Delete',
@@ -205,20 +224,20 @@ export const createDesignsColumnsConfig = ({
             title: 'Publish',
             disabled: !isPublishAllowed,
             onClick: () => handlePublishModal(rowData),
-            icon: <PublishIcon width={24} height={24} fill={CHARCOAL} />
+            icon: <PublishIcon width={24} height={24} fill={theme?.palette.icon.secondary} />
           };
 
           const unpublishAction = {
             title: 'Unpublish',
             onClick: () => handleUnpublishModal(rowData)(),
             disabled: !isUnpublishAllowed,
-            icon: <PublishIcon width={24} height={24} fill={CHARCOAL} />
+            icon: <PublishIcon width={24} height={24} fill={theme?.palette.icon.secondary} />
           };
 
           const cloneAction = {
             title: 'Clone',
             onClick: () => handleClone(rowData?.name, rowData?.id),
-            icon: <CopyIcon width={24} height={24} fill={CHARCOAL} />
+            icon: <CopyIcon width={24} height={24} fill={theme?.palette.icon.secondary} />
           };
 
           if (rowData.visibility === 'published') {
@@ -228,7 +247,7 @@ export const createDesignsColumnsConfig = ({
             actionsList.splice(1, 0, publishAction);
           }
 
-          return <DataTableEllipsisMenu actionsList={actionsList} />;
+          return <DataTableEllipsisMenu actionsList={actionsList} theme={theme} />;
         }
       }
     }

src/custom/CatalogDesignTable/columnConfig.tsx

@@ -320,7 +320,7 @@ export const createDesignColumns = ({
             });
           }
           //@ts-ignore
-          return <DataTableEllipsisMenu actionsList={actionsList} theme={theme} />;
+          return <DataTableEllipsisMenu actionsList={actionsList} />;
         }
       }
     }

src/custom/CatalogDesignTable/style.tsx

@@ -19,7 +19,7 @@ interface DeleteIconProps {
 }
 
 export const L5DeleteIcon = styled(DeleteIcon)<DeleteIconProps>(({ disabled, bulk, theme }) => ({
-  color: disabled ? theme.palette.icon.disabled : theme.palette.text.secondary,
+  color: disabled ? theme.palette.icon.disabled : theme.palette.text.default,
   cursor: disabled ? 'not-allowed' : 'pointer',
   width: bulk ? '32' : '28.8',
   height: bulk ? '32' : '28.8',

src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx

@@ -36,8 +36,13 @@ export function CustomColumnVisibilityControl({
   const theme = useTheme();
 
   const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    setOpen((prev) => !prev);
+    if (anchorEl) {
+      setAnchorEl(null);
+      return;
+    }
     setAnchorEl(event.currentTarget);
-    setOpen(true);
   };
 
   const handleClose = () => {

src/custom/FlipCard/FlipCard.tsx

@@ -7,8 +7,17 @@ export type FlipCardProps = {
   onClick?: () => void;
   onShow?: () => void;
   children: [React.ReactNode, React.ReactNode];
+  disableFlip?: boolean;
+  padding?: string;
 };
 
+/**
+ * Helper function to get the front or back child component from the children array
+ * @param children Array containing exactly two child components
+ * @param key Index to retrieve (0 for front, 1 for back)
+ * @throws Error if children is undefined or doesn't contain exactly two components
+ * @returns The selected child component
+ */
 function GetChild(children: [React.ReactNode, React.ReactNode], key: number) {
   if (!children) throw Error('FlipCard requires exactly two child components');
   if (children.length != 2) throw Error('FlipCard requires exactly two child components');
@@ -42,7 +51,32 @@ const BackContent = styled('div')({
   wordBreak: 'break-word'
 });
 
-export function FlipCard({ duration = 500, onClick, onShow, children }: FlipCardProps) {
+/**
+ * A card component that provides a flipping animation between two content faces
+ *
+ * @component
+ * @param props.duration - Animation duration in milliseconds (default: 500)
+ * @param props.onClick - Callback function triggered on card click
+ * @param props.onShow - Additional callback function triggered when card shows new face
+ * @param props.children - Array of exactly two child components (front and back)
+ * @param props.disableFlip - When true, prevents the card from flipping (default: false)
+ *
+ * @example
+ * ```tsx
+ * <FlipCard>
+ *   <div>Front Content</div>
+ *   <div>Back Content</div>
+ * </FlipCard>
+ * ```
+ */
+export function FlipCard({
+  duration = 500,
+  onClick,
+  onShow,
+  children,
+  disableFlip = false,
+  padding
+}: FlipCardProps) {
   const [flipped, setFlipped] = React.useState(false);
   const [activeBack, setActiveBack] = React.useState(false);
 
@@ -72,6 +106,7 @@ export function FlipCard({ duration = 500, onClick, onShow, children }: FlipCard
   return (
     <Card
       onClick={() => {
+        if (disableFlip) return;
         setFlipped((flipped) => !flipped);
         onClick && onClick();
         onShow && onShow();
@@ -80,7 +115,8 @@ export function FlipCard({ duration = 500, onClick, onShow, children }: FlipCard
       <InnerCard
         style={{
           transform: flipped ? 'scale(-1,1)' : undefined,
-          transition: `transform ${duration}ms`
+          transition: `transform ${duration}ms`,
+          padding: padding
         }}
       >
         {!activeBack ? (

src/custom/ResponsiveDataTable.tsx

@@ -48,7 +48,7 @@ export const DataTableEllipsisMenu: React.FC<{
       <TooltipIcon
         title="View Actions"
         onClick={handleClick}
-        icon={<EllipsisIcon fill={theme?.palette.text.primary ?? 'black'} />}
+        icon={<EllipsisIcon fill={theme?.palette.icon.default ?? 'black'} />}
         arrow
       />
       <Menu
@@ -59,7 +59,7 @@ export const DataTableEllipsisMenu: React.FC<{
         sx={{
           fontFamily: theme?.typography.fontFamily,
           '& .MuiPaper-root': {
-            backgroundColor: theme?.palette.background.default ?? 'white'
+            backgroundColor: theme?.palette.background.card ?? 'white'
           }
         }}
       >

src/custom/TeamTable/TeamTable.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Grid, TableCell } from '@mui/material';
+import { TableCell } from '@mui/material';
 import { MUIDataTableColumn } from 'mui-datatables';
+import { Grid } from '../../base';
+import { styled, useTheme } from '../../theme';
 import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary.js';
 import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/index.js';
 import ResponsiveDataTable from '../ResponsiveDataTable.js';
@@ -20,6 +22,14 @@ interface TeamTableProps {
   useNotificationHandlers: any;
   useRemoveUserFromTeamMutation: any;
 }
+const StyledGrid = styled(Grid)(({ theme }) => ({
+  display: 'grid',
+  margin: 'auto',
+  paddingLeft: '0.5rem',
+  borderRadius: '0.25rem',
+  width: 'inherit',
+  gap: theme.spacing(1)
+}));
 
 const TeamTable: React.FC<TeamTableProps> = ({
   teams,
@@ -35,6 +45,7 @@ const TeamTable: React.FC<TeamTableProps> = ({
   useNotificationHandlers,
   useRemoveUserFromTeamMutation
 }) => {
+  const theme = useTheme();
   return (
     <ErrorBoundary>
       <ResponsiveDataTable
@@ -48,31 +59,20 @@ const TeamTable: React.FC<TeamTableProps> = ({
               <TableCell
                 colSpan={6}
                 sx={{
-                  padding: '0.5rem',
-                  backgroundColor: 'rgba(0, 0, 0, 0.05)'
+                  padding: '0.5rem'
                 }}
               >
-                <Grid
-                  container
-                  xs={12}
-                  spacing={1}
-                  sx={{
-                    margin: 'auto',
-                    backgroundColor: '#f3f1f1',
-                    paddingLeft: '0.5rem',
-                    borderRadius: '0.25rem',
-                    width: 'inherit'
-                  }}
-                >
+                <StyledGrid container xs={12}>
                   <UsersTable
                     teamID={teamID}
                     isRemoveFromTeamAllowed={isRemoveFromTeamAllowed}
                     org_id={org_id}
                     useGetUsersForOrgQuery={useGetUsersForOrgQuery}
                     useNotificationHandlers={useNotificationHandlers}
                     useRemoveUserFromTeamMutation={useRemoveUserFromTeamMutation}
+                    theme={theme}
                   />
-                </Grid>
+                </StyledGrid>
               </TableCell>
             );
           }