Merge pull request #815 from amitamrutiya/update-cell

feat: add AuthorCell component and integrate it into CatalogDesignTable

Author: amitamrutiya

src/custom/CatalogDesignTable/AuthorCell.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Avatar, Box, Grid, Typography } from '../../base';
+import { CLOUD_URL } from '../../constants/constants';
+import { PersonIcon } from '../../icons';
+import { CustomTooltip } from '../CustomTooltip';
+
+interface AuthorCellProps {
+  firstName: string;
+  lastName: string;
+  avatarUrl: string;
+  userId: string;
+  maxWidth?: boolean;
+}
+
+const AuthorCell: React.FC<AuthorCellProps> = ({
+  firstName,
+  lastName,
+  avatarUrl,
+  userId,
+  maxWidth = true
+}) => {
+  const displayName =
+    firstName && lastName
+      ? `${firstName} ${lastName}`
+      : firstName
+      ? firstName
+      : lastName
+      ? lastName
+      : '';
+
+  return (
+    <Box sx={{ '& > img': { mr: 2, flexShrink: 0 } }}>
+      <Grid
+        container
+        alignItems="center"
+        style={maxWidth ? { width: 'max-content' } : { width: '' }}
+      >
+        <Grid item>
+          <Box sx={{ color: 'text.secondary', mr: 1 }}>
+            <CustomTooltip title={`View ${displayName}'s Profile`}>
+              <div>
+                <Avatar
+                  style={{ cursor: 'pointer' }}
+                  alt={displayName}
+                  src={avatarUrl}
+                  onClick={() => {
+                    window.open(`${CLOUD_URL}/user/${userId}`, '_blank');
+                  }}
+                >
+                  {!avatarUrl && <PersonIcon />}
+                </Avatar>
+              </div>
+            </CustomTooltip>
+          </Box>
+        </Grid>
+        {maxWidth && (
+          <Grid item>
+            <Typography variant="body2">{displayName}</Typography>
+          </Grid>
+        )}
+      </Grid>
+    </Box>
+  );
+};
+
+export default AuthorCell;

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -4,7 +4,7 @@ import { useCallback, useMemo, useRef } from 'react';
 import { PublishIcon } from '../../icons';
 import { CHARCOAL, useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
-import { useWindowDimensions } from '../Helpers/Dimension';
+import { ErrorBoundary } from '../ErrorBoundary';
 import PromptComponent from '../Prompt';
 import { PromptRef } from '../Prompt/promt-component';
 import ResponsiveDataTable from '../ResponsiveDataTable';
@@ -47,8 +47,6 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
   handleBulkDeleteModal,
   handleBulkpatternsDataUnpublishModal
 }) => {
-  const { width } = useWindowDimensions();
-  const smallScreen = width <= 360;
   const theme = useTheme();
   const modalRef = useRef<PromptRef>(null);
 
@@ -133,7 +131,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
       selectableRows: _.isNil(filter) ? 'none' : 'multiple',
       serverSide: true,
       filterType: 'multiselect',
-      responsive: smallScreen ? 'vertical' : 'standard',
+      responsive: 'standard',
       count: totalCount,
       rowsPerPage: pageSize,
       page,
@@ -163,7 +161,6 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
     }),
     [
       filter,
-      smallScreen,
       totalCount,
       pageSize,
       page,
@@ -179,7 +176,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
   }
 
   return (
-    <>
+    <ErrorBoundary>
       <PromptComponent ref={modalRef} />
       <ResponsiveDataTable
         columns={processedColumns}
@@ -196,7 +193,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
             : theme.palette.background.secondary
         }
       />
-    </>
+    </ErrorBoundary>
   );
 };
 

src/custom/CatalogDesignTable/columnConfig.tsx

@@ -2,8 +2,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
 import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
-import { Avatar, Box, Grid, Typography } from '../../base';
-import { CLOUD_URL } from '../../constants/constants';
 import { iconMedium } from '../../constants/iconsSizes';
 import {
   ChainIcon,
@@ -12,16 +10,15 @@ import {
   FacebookIcon,
   KanvasIcon,
   LinkedinIcon,
-  PersonIcon,
   PublishIcon,
   TwitterIcon
 } from '../../icons';
 import { downloadFilter, downloadYaml } from '../CatalogDetail/helper';
 import { RESOURCE_TYPES } from '../CatalogDetail/types';
 import { Pattern } from '../CustomCatalog/CustomCard';
-import { CustomTooltip } from '../CustomTooltip';
 import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
 import { DataTableEllipsisMenu } from '../ResponsiveDataTable';
+import AuthorCell from './AuthorCell';
 import { NameDiv } from './style';
 
 export type ColView = [string, 'na' | 'xs' | 'l'];
@@ -141,47 +138,15 @@ export const createDesignColumns = ({
           const lastName = getColumnValue(tableMeta, 'last_name');
           const avatar_url = getColumnValue(tableMeta, 'avatar_url');
           const user_id = getColumnValue(tableMeta, 'user_id');
-          const displayName =
-            firstName && lastName
-              ? `${firstName} ${lastName}`
-              : firstName
-              ? firstName
-              : lastName
-              ? lastName
-              : '';
 
           return (
-            <Box sx={{ '& > img': { mr: 2, flexShrink: 0 } }}>
-              <Grid
-                container
-                alignItems="center"
-                style={maxWidth ? { width: 'max-content' } : { width: '' }}
-              >
-                <Grid item>
-                  <Box sx={{ color: 'text.secondary', mr: 1 }}>
-                    <CustomTooltip title={`View ${displayName}'s Profile`}>
-                      <div>
-                        <Avatar
-                          style={{ cursor: 'pointer' }}
-                          alt={displayName}
-                          src={avatar_url}
-                          onClick={() => {
-                            window.open(`${CLOUD_URL}/user/${user_id}`, '_blank');
-                          }}
-                        >
-                          {!avatar_url && <PersonIcon />}
-                        </Avatar>
-                      </div>
-                    </CustomTooltip>
-                  </Box>
-                </Grid>
-                {maxWidth && (
-                  <Grid item>
-                    <Typography variant="body2">{displayName}</Typography>
-                  </Grid>
-                )}
-              </Grid>
-            </Box>
+            <AuthorCell
+              firstName={firstName}
+              lastName={lastName}
+              avatarUrl={avatar_url}
+              userId={user_id}
+              maxWidth={maxWidth}
+            />
           );
         }
       }

src/custom/CatalogDesignTable/index.ts

@@ -1,5 +1,6 @@
+import AuthorCell from './AuthorCell';
 import CatalogDesignsTable from './CatalogDesignTable';
 import { colViews, createDesignColumns } from './columnConfig';
 export { TableVisibilityControl } from './TableVisibilityControl';
 export { ViewSwitch } from './ViewSwitch';
-export { CatalogDesignsTable, colViews, createDesignColumns };
+export { AuthorCell, CatalogDesignsTable, colViews, createDesignColumns };