From f709b5bbef679b3b0c933468a133669de2c75f13 Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Fri, 8 Nov 2024 12:30:55 +0530
Subject: [PATCH] feat(catalog): enhance

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/custom/CatalogDetail/LeftPanel.tsx      |  2 +-
 src/custom/CatalogDetail/RelatedDesigns.tsx |  9 +++++++--
 src/custom/CatalogDetail/RightPanel.tsx     |  8 +++++++-
 src/custom/CatalogDetail/UserInfo.tsx       | 17 ++++++++++++++++-
 src/custom/CatalogDetail/style.tsx          |  5 +++--
 5 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/custom/CatalogDetail/LeftPanel.tsx b/src/custom/CatalogDetail/LeftPanel.tsx
index 70ed50d2..0fe0b63d 100644
--- a/src/custom/CatalogDetail/LeftPanel.tsx
+++ b/src/custom/CatalogDetail/LeftPanel.tsx
@@ -70,7 +70,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
           imgURL={details?.catalog_data?.imageURL}
           height={'100%'}
           width={'100%'}
-          zoomEffect={false}
+          zoomEffect={true}
           type={{ type: type }}
         />
       </CustomCatalogCard>
diff --git a/src/custom/CatalogDetail/RelatedDesigns.tsx b/src/custom/CatalogDetail/RelatedDesigns.tsx
index d1ed6726..9449f21f 100644
--- a/src/custom/CatalogDetail/RelatedDesigns.tsx
+++ b/src/custom/CatalogDetail/RelatedDesigns.tsx
@@ -16,6 +16,8 @@ interface RelatedDesignsProps {
   userProfile?: UserProfile;
   technologySVGPath: string;
   technologySVGSubpath: string;
+  orgName: string;
+  fetchingOrgError: boolean;
 }
 
 const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
@@ -25,7 +27,9 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
   onSuggestedPatternClick,
   userProfile,
   technologySVGPath,
-  technologySVGSubpath
+  technologySVGSubpath,
+  orgName,
+  fetchingOrgError
 }) => {
   const filteredPatternsPerUser = patternsPerUser?.patterns?.filter(
     (pattern) => pattern.id !== details.id
@@ -37,7 +41,8 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
     <AdditionalContainer>
       <ContentHeading>
         <h2 style={{ margin: '0', textTransform: 'uppercase' }}>
-          Other published design by {formatToTitleCase(userProfile?.first_name ?? '')}
+          Other published design by {formatToTitleCase(userProfile?.first_name ?? '')}{' '}
+          {fetchingOrgError ? '' : `under ${orgName}`}
         </h2>
       </ContentHeading>
       <DesignCardContainer>
diff --git a/src/custom/CatalogDetail/RightPanel.tsx b/src/custom/CatalogDetail/RightPanel.tsx
index 5fc88f1f..24d52f07 100644
--- a/src/custom/CatalogDetail/RightPanel.tsx
+++ b/src/custom/CatalogDetail/RightPanel.tsx
@@ -24,6 +24,8 @@ interface RightPanelProps {
   fontFamily?: string;
   technologySVGPath: string;
   technologySVGSubpath: string;
+  orgName: string;
+  fetchingOrgError: boolean;
 }
 
 const RightPanel: React.FC<RightPanelProps> = ({
@@ -43,7 +45,9 @@ const RightPanel: React.FC<RightPanelProps> = ({
   fontFamily,
   useGetUserProfileByIdQuery,
   technologySVGPath,
-  technologySVGSubpath
+  technologySVGSubpath,
+  orgName,
+  fetchingOrgError
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
   const { data: userProfile } = useGetUserProfileByIdQuery({
@@ -69,6 +73,8 @@ const RightPanel: React.FC<RightPanelProps> = ({
       {showCaveats && <CaveatsSection details={details} />}
       <RelatedDesigns
         details={details}
+        orgName={orgName}
+        fetchingOrgError={fetchingOrgError}
         type={type}
         patternsPerUser={patternsPerUser}
         onSuggestedPatternClick={onSuggestedPatternClick}
diff --git a/src/custom/CatalogDetail/UserInfo.tsx b/src/custom/CatalogDetail/UserInfo.tsx
index 60243308..7165ddb2 100644
--- a/src/custom/CatalogDetail/UserInfo.tsx
+++ b/src/custom/CatalogDetail/UserInfo.tsx
@@ -1,3 +1,4 @@
+import { Avatar } from '../../base';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { getVersion } from '../CustomCatalog/Helper';
 import { formatDate } from './helper';
@@ -15,7 +16,21 @@ const UserInfo: React.FC<UserInfoProps> = ({ details, showVersion = true, userPr
     <>
       <ContentRow>
         <ContentDetailsPoints>CREATED BY</ContentDetailsPoints>
-        <ContentDetailsText>
+        <ContentDetailsText
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '7px'
+          }}
+        >
+          <Avatar
+            src={userProfile?.avatar_url}
+            alt={`${userProfile?.first_name} ${userProfile?.last_name}`}
+            style={{
+              height: '28px',
+              width: '28px'
+            }}
+          />
           <RedirectLink
             href={`https://meshery.layer5.io/user/${details?.user_id}`}
             target="_blank"
diff --git a/src/custom/CatalogDetail/style.tsx b/src/custom/CatalogDetail/style.tsx
index 672137aa..bd447b94 100644
--- a/src/custom/CatalogDetail/style.tsx
+++ b/src/custom/CatalogDetail/style.tsx
@@ -55,13 +55,14 @@ export const UnpublishAction = styled('div')<ActionButtonProps>(({ disabled = fa
   flex: '1'
 }));
 
-export const ContentDetailsText = styled(Typography)(({ theme }) => ({
+export const ContentDetailsText = styled(Typography)(({ theme, style }) => ({
   fontFamily: 'inherit',
   fontSize: '1rem',
   color: theme.palette.text.default,
   ['@media (min-width:1200px)']: {
     fontSize: '1'
-  }
+  },
+  ...style
 }));
 
 export const ContentHeading = styled('div')(() => ({