Merge branch 'master' into patch-34

.github/workflows/node-checks.yml

@@ -0,0 +1,44 @@
+name: Node version and Lint Check
+on:
+  pull_request:
+    types: [opened, synchronize]
+  push:
+    branches:
+      - '*'
+    paths-ignore:
+      - 'system/**/*'
+      - '.github/**/*'
+      - '*.md'
+
+jobs:
+  compatibility-check:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16, 18, 20]
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Lint Check
+        run: npm run lint
+
+      - name: Prettier Check
+        run: npm run format:check
+
+      - name: Build Project
+        run: npm run build
+
+      - name: Run Tests
+        run: npm run test
+
+      - name: Log Node.js Version
+        run: echo "Tested on Node.js version ${{ matrix.node-version }}"

package.json

@@ -119,9 +119,9 @@
     "billboard.js": "^3.14.3",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
+    "moment": "^2.30.1",
     "re-resizable": "^6.10.3",
     "react-draggable": "^4.4.6",
-    "moment": "^2.30.1",
     "react-share": "^5.1.0"
   }
 }

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/CatalogDetail/RelatedDesigns.tsx

@@ -1,6 +1,6 @@
 import { CatalogCardDesignLogo } from '../CustomCatalog';
 import CustomCatalogCard, { Pattern } from '../CustomCatalog/CustomCard';
-import { formatToTitleCase } from './helper';
+import { getHeadingText } from './helper';
 import { AdditionalContainer, ContentHeading, DesignCardContainer } from './style';
 import { UserProfile } from './types';
 
@@ -41,8 +41,7 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
     <AdditionalContainer>
       <ContentHeading>
         <h2 style={{ margin: '0', textTransform: 'uppercase' }}>
-          Other published design by {formatToTitleCase(userProfile?.first_name ?? '')}{' '}
-          {fetchingOrgError ? '' : `under ${organizationName}`}
+          {getHeadingText({ type, userProfile, organizationName, fetchingOrgError })}
         </h2>
       </ContentHeading>
       <DesignCardContainer>

src/custom/CatalogDetail/helper.ts

@@ -61,3 +61,25 @@ export const formatDate = (date: Date) => {
   const formattedDate = new Date(date).toLocaleDateString('en-US', options);
   return formattedDate;
 };
+
+interface HeadingProps {
+  type: string;
+  userProfile?: {
+    first_name?: string;
+  };
+  organizationName?: string;
+  fetchingOrgError: boolean;
+}
+
+export const getHeadingText = ({
+  type,
+  userProfile,
+  organizationName,
+  fetchingOrgError
+}: HeadingProps): string => {
+  const designType = type.toLowerCase() === 'my-designs' ? 'public' : 'published';
+  const firstName = formatToTitleCase(userProfile?.first_name ?? '');
+  const orgText = fetchingOrgError ? '' : `under ${organizationName}`;
+
+  return `Other ${designType} design by ${firstName} ${orgText}`;
+};