From 01dc56444f00bb6d7c1608c351a65e8a05ef3bf8 Mon Sep 17 00:00:00 2001
From: Amit Amrutiya <amitamrutiya2210@gmail.com>
Date: Thu, 30 Jan 2025 14:54:02 +0530
Subject: [PATCH] feat: add UserTableAvatarInfo component and update imports

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
---
 package-lock.json                             |  2 +-
 src/custom/UsersTable/UserTableAvatarInfo.tsx | 49 +++++++++++++++++++
 src/custom/index.tsx                          |  3 +-
 3 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 src/custom/UsersTable/UserTableAvatarInfo.tsx

diff --git a/package-lock.json b/package-lock.json
index 887072551..128b00f71 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,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"
       },
       "devDependencies": {
diff --git a/src/custom/UsersTable/UserTableAvatarInfo.tsx b/src/custom/UsersTable/UserTableAvatarInfo.tsx
new file mode 100644
index 000000000..3f019cea0
--- /dev/null
+++ b/src/custom/UsersTable/UserTableAvatarInfo.tsx
@@ -0,0 +1,49 @@
+import { Avatar, Box, Grid, Typography } from '../../base';
+import { CLOUD_URL } from '../../constants/constants';
+import { PersonIcon } from '../../icons';
+import { useTheme } from '../../theme';
+
+interface UserTableAvatarInfoProps {
+  userId: string;
+  userName: string;
+  userEmail: string;
+  profileUrl?: string;
+}
+
+const UserTableAvatarInfo: React.FC<UserTableAvatarInfoProps> = ({
+  userId,
+  userName,
+  userEmail,
+  profileUrl
+}): JSX.Element => {
+  const theme = useTheme();
+  const handleProfileClick = (): void => {
+    window.open(`${CLOUD_URL}/user/${userId}`);
+  };
+
+  return (
+    <Grid container alignItems="center">
+      <Grid item>
+        <Box
+          sx={{
+            color: theme.palette.text.default,
+            mr: 2,
+            cursor: 'pointer'
+          }}
+        >
+          <Avatar onClick={handleProfileClick} alt={userName} src={profileUrl}>
+            {profileUrl ? '' : <PersonIcon />}
+          </Avatar>
+        </Box>
+      </Grid>
+      <Grid item xs>
+        {userName}
+        <Typography variant="body2" color={theme.palette.background.brand?.disabled}>
+          {userEmail}
+        </Typography>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default UserTableAvatarInfo;
diff --git a/src/custom/index.tsx b/src/custom/index.tsx
index cc47f9dd8..4aeb3fdb2 100644
--- a/src/custom/index.tsx
+++ b/src/custom/index.tsx
@@ -47,7 +47,7 @@ import { TooltipIcon } from './TooltipIconButton';
 import { TransferList } from './TransferModal/TransferList';
 import { TransferListProps } from './TransferModal/TransferList/TransferList';
 import UniversalFilter, { UniversalFilterProps } from './UniversalFilter';
-import { UsersTable } from './UsersTable';
+import { UserTableAvatarInfo, UsersTable } from './UsersTable';
 import { VisibilityChipMenu } from './VisibilityChipMenu';
 export { CatalogCard } from './CatalogCard';
 export { CatalogFilterSidebar } from './CatalogFilterSection';
@@ -104,6 +104,7 @@ export {
   TooltipIcon,
   TransferList,
   UniversalFilter,
+  UserTableAvatarInfo,
   UsersTable,
   VisibilityChipMenu,
   updateVisibleColumns,