Merge pull request #796 from sudhanshutech/feature/catalog

Enhance catalog details

Author: aabidsofi19

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>

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>

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}

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"

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')(() => ({