From 52a163103ffaec695ff14b51adebec54266a2843 Mon Sep 17 00:00:00 2001
From: Sny <sny.aggarwal@gmail.com>
Date: Wed, 2 Oct 2024 11:35:22 +0530
Subject: [PATCH] OpenConceptLab/ocl_issues#1776 | Chips usage

---
 src/common/utils.js                          |  4 +-
 src/components/common/BaseEntityChip.jsx     | 29 ++++++++----
 src/components/common/Bookmark.jsx           | 13 +----
 src/components/common/Breadcrumbs.jsx        |  2 +-
 src/components/common/Events.jsx             |  2 +-
 src/components/common/FollowActionButton.jsx |  2 +-
 src/components/common/OwnerButton.jsx        |  6 +--
 src/components/concepts/ConceptCard.jsx      |  6 +--
 src/components/orgs/OrgIcon.jsx              | 26 +++++++---
 src/components/orgs/OrgMembers.jsx           |  9 ++--
 src/components/orgs/OrgStatistics.jsx        |  2 +-
 src/components/orgs/OrgTooltip.jsx           |  6 +--
 src/components/repos/CompareToolbar.jsx      |  2 +-
 src/components/repos/RepoChip.jsx            | 10 ++--
 src/components/repos/RepoHeader.jsx          |  2 +-
 src/components/repos/RepoIcon.jsx            | 23 +++++++--
 src/components/repos/RepoTooltip.jsx         | 50 ++++++++++++++------
 src/components/repos/RepoVersionButton.jsx   |  4 +-
 src/components/search/Search.jsx             |  2 +-
 src/components/users/Following.jsx           |  9 ++--
 src/components/users/UserIcon.jsx            | 19 ++++++--
 src/components/users/UserProfile.jsx         |  8 ++--
 src/components/users/UserProfileButton.jsx   |  2 +-
 src/components/users/UserStatistics.jsx      |  4 +-
 src/components/users/UserTooltip.jsx         |  4 +-
 25 files changed, 150 insertions(+), 96 deletions(-)

diff --git a/src/common/utils.js b/src/common/utils.js
index 6a4c0536..90ed8175 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -134,7 +134,7 @@ export const copyURL = url => copyToClipboard(url, 'Copied URL to clipboard!');
 
 export const toParentURI = uri => uri.split('/').splice(0, 5).join('/') + '/';
 
-export const toOwnerURI = uri => uri.split('/').splice(0, 3).join('/') + '/';
+export const toOwnerURI = uri => uri && uri.split('/').splice(0, 3).join('/') + '/';
 
 export const headFirst = versions => compact([find(versions, version => (version.version || version.id) === 'HEAD'), ...reject(versions, version => (version.version || version.id) === 'HEAD')]);
 
@@ -733,7 +733,7 @@ export const URIToOwnerParams = uri => {
     owner.owner = ownerURI.split('/orgs/')[1].replaceAll('/', '')
   } else {
     owner.ownerType = 'User'
-    owner.owner = ownerURI.split('/users/')[1].replaceAll('/', '')
+    owner.owner = ownerURI?.split('/users/')[1]?.replaceAll('/', '')
   }
   return owner
 }
diff --git a/src/components/common/BaseEntityChip.jsx b/src/components/common/BaseEntityChip.jsx
index 864c7df5..130ee92d 100644
--- a/src/components/common/BaseEntityChip.jsx
+++ b/src/components/common/BaseEntityChip.jsx
@@ -7,6 +7,7 @@ const PRIMARY_STYLE = {
   backgroundColor: `${PRIMARY_COLORS['95']} !important`,
   '&:hover': {
     backgroundColor: `${PRIMARY_COLORS['95']} !important`,
+    textDecoration: 'none !important'
   }
 }
 
@@ -14,6 +15,7 @@ const SECONDARY_STYLE = {
   backgroundColor: "#FFF",
   '&:hover': {
     backgroundColor: `${PRIMARY_COLORS['95']} !important`,
+    textDecoration: 'none !important'
   }
 }
 
@@ -66,9 +68,9 @@ const ENTITY_CHIP_SIZE_MAP = {
       backgroundColor: 'transparent',
     },
     '.MuiSvgIcon-root': {
-        color: '#000',
-        fontSize: '16px'
-      },
+      color: '#000',
+      fontSize: '16px'
+    },
     '.divider-span': {
       width: '3px',
       height: '3px',
@@ -95,28 +97,33 @@ const Avatar = ({ entity, icon }) => {
     </MuiAvatar>
 }
 
-const Label = ({ entity }) => {
+const Label = ({ entity, hideType }) => {
   return (
     <span style={{display: 'flex', alignItems: 'center'}}>
       <span className='entity-id'>
         <b>{entity.short_code || entity.id || entity.username}</b>
       </span>
-      <span className='divider-span' />
-      <span className='entity-type'>
-        {entity.type}
-      </span>
+      {
+        !hideType &&
+          <React.Fragment>
+            <span className='divider-span' />
+            <span className='entity-type'>
+              {entity.type}
+            </span>
+          </React.Fragment>
+      }
     </span>
   )
 }
 
 
-const BaseEntityChip = ({ entity, icon, primary, size, sx, ...rest }) => {
+const BaseEntityChip = ({ entity, icon, hideType, primary, size, sx, ...rest }) => {
   const sizeStyle = ENTITY_CHIP_SIZE_MAP[size || 'medium'] || ENTITY_CHIP_SIZE_MAP.medium
   const baseStyle = primary ? PRIMARY_STYLE : SECONDARY_STYLE
   return (
     <Chip
       avatar={<Avatar entity={entity} icon={icon} />}
-      label={<Label entity={entity} />}
+      label={<Label entity={entity} hideType={hideType} />}
       variant='outlined'
       sx={{
         borderRadius: '4px',
@@ -127,6 +134,8 @@ const BaseEntityChip = ({ entity, icon, primary, size, sx, ...rest }) => {
         ...sizeStyle,
         ...sx
       }}
+      href={'#' + (entity.version_url || entity.url)}
+      component='a'
       {...rest}
     />
   )
diff --git a/src/components/common/Bookmark.jsx b/src/components/common/Bookmark.jsx
index 7587de28..c5769891 100644
--- a/src/components/common/Bookmark.jsx
+++ b/src/components/common/Bookmark.jsx
@@ -3,8 +3,7 @@ import { useHistory } from 'react-router-dom';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
 import Typography from '@mui/material/Typography';
-import RepoIcon from '../repos/RepoIcon';
-import OrganizationIcon from '@mui/icons-material/AccountBalance';
+import EntityIcon from './EntityIcon'
 
 
 const Title = ({ bookmark }) => {
@@ -27,15 +26,7 @@ const Title = ({ bookmark }) => {
 }
 
 export const getIcon = (bookmark, style) => {
-  if(bookmark.resource?.logo_url) {
-    return <img src={bookmark.resource.logo_url} className='user-img-small' style={style || {width: '56px', height: '56px'}} />
-  }
-  if(['Collection', 'Collection Version', 'Source', 'Source Version'].includes(bookmark.resource?.type)) {
-    return <RepoIcon sx={ style || {width: '56px', height: '56px', color: 'secondary.main'}} />
-  }
-  if(['Organization', 'Org'].includes(bookmark.resource?.type)) {
-    return <OrganizationIcon sx={style || {width: '56px', height: '56px', color: 'secondary.main'}} />
-  }
+  return <EntityIcon entity={bookmark.resource} sx={style || {width: '56px', height: '56px', color: 'secondary.main'}}/>
 }
 
 const Bookmark = ({ bookmark, isLast }) => {
diff --git a/src/components/common/Breadcrumbs.jsx b/src/components/common/Breadcrumbs.jsx
index 4fef00d8..2b177a79 100644
--- a/src/components/common/Breadcrumbs.jsx
+++ b/src/components/common/Breadcrumbs.jsx
@@ -25,7 +25,7 @@ const Breadcrumbs = ({owner, ownerType, repo, repoVersion, repoURL, id, version,
         repo &&
           <React.Fragment>
             <DotSeparator />
-            <RepoVersionButton size={size} href={repoURL} icon={noIcons ? false : <RepoIcon sx={{color: 'secondary'}} />} repo={repo} version={repoVersion} versionStyle={{fontSize: fontSize || '14px'}} />
+            <RepoVersionButton size={size} href={repoURL} icon={noIcons ? false : <RepoIcon noTooltip sx={{color: 'secondary'}} />} repo={repo} version={repoVersion} versionStyle={{fontSize: fontSize || '14px'}} />
           </React.Fragment>
       }
       {
diff --git a/src/components/common/Events.jsx b/src/components/common/Events.jsx
index 9255b19b..92099711 100644
--- a/src/components/common/Events.jsx
+++ b/src/components/common/Events.jsx
@@ -85,7 +85,7 @@ const Events = ({ user, events, onLoadMore, showAvatar, moreMarginLeft }) => {
       <Typography component='h3' sx={{margin: '16px 0', fontWeight: 'bold', display: 'flex', alignItems: 'center'}}>
         {
           showAvatar &&
-            <UserIcon user={user} sx={{width: '40px', height: '40px', marginRight: '16px'}} color='primary' />
+            <UserIcon noTooltip user={user} sx={{width: '40px', height: '40px', marginRight: '16px'}} color='primary' />
         }
         {`${isSelf ? t('user.your') : (user.name + "'s")} ${t('user.recent_activity')}`}
       </Typography>
diff --git a/src/components/common/FollowActionButton.jsx b/src/components/common/FollowActionButton.jsx
index b1c3d628..a3176c04 100644
--- a/src/components/common/FollowActionButton.jsx
+++ b/src/components/common/FollowActionButton.jsx
@@ -17,7 +17,7 @@ const FollowIconButton = ({isFollowing, onClick, entity, size, sx}) => {
   const { t } = useTranslation()
 
   return (
-    <Tooltip title={`${isFollowing ? t('common.unfollow') : t('common.follow')} ${entity.id || entity.username || entity.name}`}>
+    <Tooltip title={`${isFollowing ? t('common.unfollow') : t('common.follow')} ${entity?.id || entity?.username || entity?.name}`}>
       <IconButton sx={{color: 'surface.contrastText', mr: 1, ...sx}} onClick={onClick} size={size}>
         <Icon isFollowing={isFollowing} fontSize='inherit' />
       </IconButton>
diff --git a/src/components/common/OwnerButton.jsx b/src/components/common/OwnerButton.jsx
index 92c27f5a..0d1295f7 100644
--- a/src/components/common/OwnerButton.jsx
+++ b/src/components/common/OwnerButton.jsx
@@ -24,13 +24,13 @@ const OwnerButton = ({owner, ownerType, ownerURL, noIcons, sx, ...rest}) => {
         minWidth: 'auto',
         ...sx
       }}
-      startIcon={!noIcons && <OwnerIcon ownerType={ownerType} {...iconProps} />}
+      startIcon={!noIcons && <OwnerIcon noTooltip ownerType={ownerType} {...iconProps} />}
       href={ownerURL ? '#' + ownerURL : undefined}
       component="button"
-    {...rest}
+      {...rest}
     >
 
-      <span>{owner}</span>
+      <span className='owner-button-label'>{owner}</span>
     </Button>
   )
 }
diff --git a/src/components/concepts/ConceptCard.jsx b/src/components/concepts/ConceptCard.jsx
index 4d784c14..644cd503 100644
--- a/src/components/concepts/ConceptCard.jsx
+++ b/src/components/concepts/ConceptCard.jsx
@@ -39,16 +39,16 @@ const ConceptCard = ({ concept, onSelect, isSelected, onCardClick, bgColor, isSh
         <div className='col-xs-12' style={{marginTop: '16px', display: 'flex', alignItems: 'center'}}>
           <div className={(isSplitView ? 'col-xs-12' : 'col-xs-6') + ' padding-0'} style={{display: 'flex', alignItems: 'center'}}>
             <span style={{display: 'flex', alignItems: 'center', fontSize: '14px', color: COLORS.secondary['40']}}>
-              <OwnerIcon fontSize='inherit' sx={{marginRight: '8px'}} ownerType={concept.owner_type} /> {concept.owner}
+              <OwnerIcon noTooltip fontSize='inherit' sx={{marginRight: '8px'}} ownerType={concept.owner_type} /> {concept.owner}
             </span>
             <DotSeparator />
             <span style={{display: 'flex', alignItems: 'center', fontSize: '14px', color: COLORS.secondary['40']}}>
-              <RepoIcon fontSize='inherit' style={{marginRight: '8px'}} />
+              <RepoIcon noTooltip fontSize='inherit' style={{marginRight: '8px'}} />
               <RepoVersionButton repo={concept.source} version={concept.latest_source_version}/>
             </span>
             <DotSeparator />
             <span className='searchable' style={{display: 'flex', alignItems: 'center', fontSize: '14px', color: COLORS.secondary['40']}}>
-              <ConceptIcon fontSize='inherit' style={{marginRight: '8px'}} selected color='secondary' /> {concept.id}
+              <ConceptIcon noTooltip fontSize='inherit' style={{marginRight: '8px'}} selected color='secondary' /> {concept.id}
             </span>
           </div>
           {
diff --git a/src/components/orgs/OrgIcon.jsx b/src/components/orgs/OrgIcon.jsx
index 2da2833a..3a727328 100644
--- a/src/components/orgs/OrgIcon.jsx
+++ b/src/components/orgs/OrgIcon.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import Chip from '@mui/material/Chip'
 import OrganizationIcon from '@mui/icons-material/AccountBalance';
+import OrgTooltip from './OrgTooltip'
 
 const Icon = ({ org, logoClassName, strict, iconColor, sx, fontSize }) => {
   return org?.logo_url ?
@@ -13,12 +14,25 @@ const Icon = ({ org, logoClassName, strict, iconColor, sx, fontSize }) => {
   )
 }
 
-const OrgIcon = ({ org, logoClassName, strict, iconColor, noLink, sx, fontSize }) => {
-  return noLink ?
-    <Icon org={org} logoClassName={logoClassName} strict={strict} iconColor={iconColor} sx={sx} fontSize={fontSize} /> :
-  <Link to={org?.url}>
-    <Icon org={org} logoClassName={logoClassName} strict={strict} iconColor={iconColor} sx={sx} fontSize={fontSize} />
-  </Link>
+const OrgIcon = ({ org, noTooltip, logoClassName, strict, iconColor, noLink, sx, fontSize }) => {
+  return noTooltip ?
+    (
+      noLink ?
+        <Icon org={org} logoClassName={logoClassName} strict={strict} iconColor={iconColor} sx={sx} fontSize={fontSize} /> :
+      <Link to={org?.url}>
+        <Icon org={org} logoClassName={logoClassName} strict={strict} iconColor={iconColor} sx={sx} fontSize={fontSize} />
+      </Link>
+  ) : (
+    <OrgTooltip org={org}>
+      {
+        noLink ?
+          <Icon org={org} logoClassName={logoClassName} strict={strict} iconColor={iconColor} sx={sx} fontSize={fontSize} /> :
+        <Link to={org?.url}>
+          <Icon org={org} logoClassName={logoClassName} strict={strict} iconColor={iconColor} sx={sx} fontSize={fontSize} />
+        </Link>
+      }
+    </OrgTooltip>
+  )
 }
 
 export default OrgIcon;
diff --git a/src/components/orgs/OrgMembers.jsx b/src/components/orgs/OrgMembers.jsx
index c8efc2cc..6e860493 100644
--- a/src/components/orgs/OrgMembers.jsx
+++ b/src/components/orgs/OrgMembers.jsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import {map, reject, filter, orderBy} from 'lodash';
 import Typography from '@mui/material/Typography'
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import UserIcon from '../users/UserIcon';
 import Link from '../common/Link';
 
@@ -11,11 +10,9 @@ const DEFAULT_MEMBERS_TO_SHOW = 12
 
 const Member = ({ member }) => {
   return (
-    <Tooltip key={member.url} title={member.name}>
-      <IconButton href={`#${member.url}`} sx={{marginRight: '10px', padding: 0, marginBottom: '10px'}}>
-        <UserIcon user={member} sx={{width: '32px', height: '32px'}} />
-      </IconButton>
-    </Tooltip>
+    <IconButton href={`#${member.url}`} sx={{marginRight: '10px', padding: 0, marginBottom: '10px'}}>
+      <UserIcon user={member} sx={{width: '32px', height: '32px'}} />
+    </IconButton>
   )
 }
 
diff --git a/src/components/orgs/OrgStatistics.jsx b/src/components/orgs/OrgStatistics.jsx
index 457eacfc..0c5e1327 100644
--- a/src/components/orgs/OrgStatistics.jsx
+++ b/src/components/orgs/OrgStatistics.jsx
@@ -27,7 +27,7 @@ const OrgStatistics = ({ org, members }) => {
         <List sx={{color: 'secondary.main', p: 0}}>
           <ListItem disablePadding  href={`#${org.url}repos`} sx={{cursor: 'pointer'}} onClick={onRepoStatsClick}>
             <ListItemIcon sx={{minWidth: 0, marginRight: '8px'}}>
-              <RepoIcon sx={{color: 'default.light', width: '20px', height: '20px'}} />
+              <RepoIcon noTooltip sx={{color: 'default.light', width: '20px', height: '20px'}} />
             </ListItemIcon>
             <ListItemText
               sx={{color: 'default.light', '.MuiListItemText-primary': {fontSize: '12px'}}}
diff --git a/src/components/orgs/OrgTooltip.jsx b/src/components/orgs/OrgTooltip.jsx
index 8f62df38..88e79932 100644
--- a/src/components/orgs/OrgTooltip.jsx
+++ b/src/components/orgs/OrgTooltip.jsx
@@ -34,7 +34,7 @@ const TooltipTitle = ({ org }) => {
   )
 }
 
-const OrgTooltip = ({ org, children }) => {
+const OrgTooltip = ({ org, children, spanStyle }) => {
   return (
     <HTMLTooltip
       title={
@@ -43,9 +43,9 @@ const OrgTooltip = ({ org, children }) => {
         </React.Fragment>
       }
     >
-      <span>
+      <span style={{display: 'flex', ...spanStyle}}>
         {children}
-        </span>
+      </span>
     </HTMLTooltip>
   )
 }
diff --git a/src/components/repos/CompareToolbar.jsx b/src/components/repos/CompareToolbar.jsx
index 40e4ef36..350836e3 100644
--- a/src/components/repos/CompareToolbar.jsx
+++ b/src/components/repos/CompareToolbar.jsx
@@ -51,7 +51,7 @@ const CompareToolbar = ({version1, version2, versions, metric, onMetricChange, o
         <span style={{display: 'flex', alignItems: 'center'}}>
           <ButtonGroup size="small" aria-label="Small button group" color='secondary'>
             <ButtonControl label={t('common.statistics')} selected={metric === 'stats'} terminal onClick={() => onMetricChange('stats')} icon={<StatsIcon fontSize='inherit' />} />
-            <ButtonControl label={t('common.metadata')} selected={metric === 'meta'} onClick={() => onMetricChange('meta')} icon={<RepoIcon fontSize='inherit' />} />
+            <ButtonControl label={t('common.metadata')} selected={metric === 'meta'} onClick={() => onMetricChange('meta')} icon={<RepoIcon noTooltip fontSize='inherit' />} />
             <ButtonControl label={t('concept.concepts')} selected={metric === 'concepts'} onClick={() => onMetricChange('concepts')} icon={<ConceptIcon selected color='secondary' fontSize='inherit' sx={{width: '10px', height: '10px'}} />} />
             <ButtonControl label={t('mapping.mappings')} selected={metric === 'mappings'} onClick={() => onMetricChange('mappings')} icon={<MappingIcon fontSize='inherit' />} />
             <ButtonControl label={t('common.json')} terminal selected={metric === 'json'} onClick={() => onMetricChange('json')} icon={<JSONIcon fontSize='inherit' />} />
diff --git a/src/components/repos/RepoChip.jsx b/src/components/repos/RepoChip.jsx
index 9c8aa196..67031450 100644
--- a/src/components/repos/RepoChip.jsx
+++ b/src/components/repos/RepoChip.jsx
@@ -12,11 +12,11 @@ const RepoChip = ({ repo, noTooltip, ...rest }) => {
     />
   ) : (
     <RepoTooltip repo={repo}>
-        <BaseEntityChip
-          entity={repo}
-          icon={<RepoIcon />}
-          {...rest}
-        />
+      <BaseEntityChip
+        entity={repo}
+        icon={<RepoIcon />}
+        {...rest}
+      />
     </RepoTooltip>
   )
 }
diff --git a/src/components/repos/RepoHeader.jsx b/src/components/repos/RepoHeader.jsx
index 272160f3..f2312b5b 100644
--- a/src/components/repos/RepoHeader.jsx
+++ b/src/components/repos/RepoHeader.jsx
@@ -41,7 +41,7 @@ const RepoHeader = ({repo, versions, onVersionChange, onCreateConceptClick}) =>
   return (
     <Paper component="div" className='col-xs-12' sx={{backgroundColor: 'surface.main', boxShadow: 'none', padding: '16px', borderRadius: '8px 8px 0 0'}}>
       <div className='col-xs-6 padding-0'>
-        <HeaderChip label={repo.type} icon={<RepoIcon sx={{color: 'surface.contrastText'}} />} />
+        <HeaderChip label={repo.type} icon={<RepoIcon noTooltip sx={{color: 'surface.contrastText'}} />} />
         {
           onVersionChange &&
             <RepoVersionChip checkbox version={repo} versions={versions} sx={{marginLeft: '8px'}} onChange={onVersionChange} />
diff --git a/src/components/repos/RepoIcon.jsx b/src/components/repos/RepoIcon.jsx
index 82f655b4..7f06ecfd 100644
--- a/src/components/repos/RepoIcon.jsx
+++ b/src/components/repos/RepoIcon.jsx
@@ -2,12 +2,27 @@ import React from 'react';
 import RepoOutlinedIcon from '@mui/icons-material/FolderOutlined';
 import RepoFilledIcon from '@mui/icons-material/Folder';
 import VersionIcon from '@mui/icons-material/AccountTreeOutlined';
+import RepoTooltip from './RepoTooltip'
 
-
-const RepoIcon = ({selected, isVersion, ...rest}) => {
+const Icon = ({isVersion, selected, ...rest}) => {
   if(isVersion)
-    return <VersionIcon {...rest} />
-  return selected ? <RepoFilledIcon color='primary' {...rest} /> : <RepoOutlinedIcon {...rest} />
+    return <VersionIcon {...rest}/>
+  if(selected)
+    return <RepoFilledIcon color='primary' {...rest} />
+  return <RepoOutlinedIcon {...rest} />
+}
+
+
+const RepoIcon = ({repo, noTooltip, selected, isVersion, ...rest}) => {
+  return noTooltip ? (
+    <React.Fragment>
+      <Icon isVersion={isVersion} selected={selected} {...rest} />
+      </React.Fragment>
+  ) : (
+    <RepoTooltip repo={repo}>
+      <Icon isVersion={isVersion} selected={selected} {...rest} />
+    </RepoTooltip>
+  )
 }
 
 export default RepoIcon;
diff --git a/src/components/repos/RepoTooltip.jsx b/src/components/repos/RepoTooltip.jsx
index db64f496..9e0f3a67 100644
--- a/src/components/repos/RepoTooltip.jsx
+++ b/src/components/repos/RepoTooltip.jsx
@@ -3,13 +3,13 @@ import { useHistory } from 'react-router-dom';
 import RepoIcon from '@mui/icons-material/FolderOutlined';
 import HTMLTooltip from '../common/HTMLTooltip'
 import FollowActionButton from '../common/FollowActionButton'
-import VersionIcon from '@mui/icons-material/AccountTreeOutlined';
 import OwnerButton from '../common/OwnerButton'
 import RepoVersionButton from './RepoVersionButton'
-import { URIToOwnerParams, dropVersion } from '../../common/utils'
+import { URIToOwnerParams } from '../../common/utils'
 import DotSeparator from '../common/DotSeparator'
 
 const TooltipTitle = ({ repo }) => {
+  // only need --> repo = {url: '/orgs/MyOrg/sources/MySource/', id: 'MyOrg'}
   const history = useHistory()
   const url = repo?.version_url || repo?.url
   const owner = URIToOwnerParams(url)
@@ -26,29 +26,42 @@ const TooltipTitle = ({ repo }) => {
               '.MuiSvgIcon-root': {
                 width: '15px',
                 height: '15px'
+              },
+              '.MuiButton-startIcon': {
+                marginRight: '4px',
+                '.span': {
+                  display: 'flex',
+                  alignItems: 'center',
+                }
+              },
+              '.owner-button-label': {
+                maxWidth: '120px',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
               }
             }}
           />
           <DotSeparator margin='0 8px' />
           <RepoVersionButton
-            icon={<RepoIcon sx={{width: '15px', height: '15px'}} />}
+            icon={<RepoIcon noTooltip sx={{width: '15px', height: '15px'}} />}
             repo={repoId}
-            href={dropVersion(url)}
-            size='small'
-          />
-          <DotSeparator margin='0 8px' />
-          <RepoVersionButton
-            icon={<VersionIcon sx={{width: '15px', height: '15px'}} />}
-            repo={repo?.version || repo?.id}
             href={url}
             size='small'
+            repoLabelStyle={{
+              maxWidth: '120px',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+              display: 'inline-block'
+            }}
           />
-          </span>
+        </span>
         <FollowActionButton iconButton entity={repo} sx={{mr: 0, ml: 1.5}} size='small' />
       </div>
       <div style={{width: '100%', fontSize: '14px', marginTop: '6px'}}>
         <span style={{color: '#000', cursor: 'pointer'}} onClick={() => history.push(url)}>
-          <b>{repo.name}</b>
+          <b>{repo?.name}</b>
         </span>
       </div>
       {
@@ -57,11 +70,20 @@ const TooltipTitle = ({ repo }) => {
             {repo.description}
           </div>
       }
+      <div style={{width: '100%', fontSize: '12px', marginTop: '6px', display: 'flex', justifyContent: 'space-between'}}>
+        <span />
+        {
+          (repo?.type === 'Source Version' || repo?.type === 'Collection Version') &&
+            <span style={{marginLeft: '8px', cursor: 'pointer'}} onClick={() => history.push(url)}>
+              {repo?.version || repo?.id}
+            </span>
+        }
+      </div>
     </React.Fragment>
   )
 }
 
-const RepoTooltip = ({ repo, children }) => {
+const RepoTooltip = ({ repo, children, spanStyle }) => {
   return (
     <HTMLTooltip
       title={
@@ -70,7 +92,7 @@ const RepoTooltip = ({ repo, children }) => {
         </React.Fragment>
       }
     >
-      <span>
+      <span style={{display: 'flex', ...spanStyle}}>
         {children}
       </span>
     </HTMLTooltip>
diff --git a/src/components/repos/RepoVersionButton.jsx b/src/components/repos/RepoVersionButton.jsx
index 08c9f21b..347bac18 100644
--- a/src/components/repos/RepoVersionButton.jsx
+++ b/src/components/repos/RepoVersionButton.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Typography from '@mui/material/Typography'
 import Button from '@mui/material/Button'
 
-const RepoVersionButton = ({icon, repo, version, versionStyle, href, vertical, size}) => {
+const RepoVersionButton = ({icon, repo, version, repoLabelStyle, versionStyle, href, vertical, size}) => {
   const verticalStyle = version && vertical ? {flexDirection: 'column', alignItems: 'baseline'} : {}
   return (
     <Button
@@ -29,7 +29,7 @@ const RepoVersionButton = ({icon, repo, version, versionStyle, href, vertical, s
       component="button"
       size={size}
     >
-      <span style={{display: 'flex', fontSize: versionStyle?.fontSize}}>{repo}</span>
+      <span style={{display: 'flex', fontSize: versionStyle?.fontSize, ...repoLabelStyle}}>{repo}</span>
       {
         version &&
           <Typography component='span' sx={{marginLeft: '4px', color: 'secondary.50', fontFamily: '"Roboto Mono","Helvetica","Arial",sans-serif', display: 'flex', fontSize: '0.85rem', marginTop: '1px', ...(versionStyle || {})}}>
diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx
index 56104f22..f37c7b4f 100644
--- a/src/components/search/Search.jsx
+++ b/src/components/search/Search.jsx
@@ -343,7 +343,7 @@ const Search = props => {
             <div className='col-xs-12 padding-0' style={{borderBottom: `1px solid ${COLORS.surface.n90}`}}>
               <Tabs value={resource} onChange={handleResourceChange} aria-label="search tabs" TabIndicatorProps={{style: {height: '3px'}}}>
                 <Tab value='concepts' icon={<ConceptIcon selected={resource == 'concepts'} fontSize='small' />} label={t('concept.concepts')} style={TAB_STYLES} />
-                <Tab value='repos' icon={<RepoIcon selected={resource == 'repos'} fontSize='small' />} label={t('repo.repos')} style={TAB_STYLES} />
+                <Tab value='repos' icon={<RepoIcon noTooltip selected={resource == 'repos'} fontSize='small' />} label={t('repo.repos')} style={TAB_STYLES} />
                 <Tab value='orgs' icon={<OrgIcon color={resource === 'orgs' ? 'primary' : 'secondary'} fontSize='small' />} label={t('org.orgs')} style={TAB_STYLES} />
                 <Tab value='users' icon={<UserIcon color={resource === 'users' ? 'primary' : 'secondary'} fontSize='small' />} label={t('user.users')} style={TAB_STYLES} />
               </Tabs>
diff --git a/src/components/users/Following.jsx b/src/components/users/Following.jsx
index 7e884713..4e8200f2 100644
--- a/src/components/users/Following.jsx
+++ b/src/components/users/Following.jsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import {map, reject, filter, orderBy} from 'lodash';
 import Typography from '@mui/material/Typography'
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import EntityIcon from '../common/EntityIcon';
 import Link from '../common/Link';
 
@@ -11,11 +10,9 @@ const DEFAULT_MEMBERS_TO_SHOW = 12
 
 const Followed = ({ object }) => {
   return (
-    <Tooltip key={object.url} title={object.name || object.id}>
-      <IconButton href={`#${object.url}`} sx={{marginRight: '10px', padding: 0, marginBottom: '10px'}}>
-        <EntityIcon noLink strict entity={object} isVersion={(object?.short_code && object?.version_url)} sx={{width: '32px', height: '32px'}} />
-      </IconButton>
-    </Tooltip>
+    <IconButton href={`#${object.url}`} sx={{marginRight: '10px', padding: 0, marginBottom: '10px'}}>
+      <EntityIcon noLink strict entity={object} isVersion={(object?.short_code && object?.version_url)} sx={{width: '32px', height: '32px'}} />
+    </IconButton>
   )
 }
 
diff --git a/src/components/users/UserIcon.jsx b/src/components/users/UserIcon.jsx
index 5fe697ac..65b5d3e9 100644
--- a/src/components/users/UserIcon.jsx
+++ b/src/components/users/UserIcon.jsx
@@ -2,11 +2,22 @@ import React from 'react';
 import PersonIcon from '@mui/icons-material/Face2';
 import StrangerIcon from '@mui/icons-material/Person';
 import { isLoggedIn } from '../../common/utils';
+import UserTooltip from './UserTooltip'
 
-const UserIcon = ({ user, color, logoClassName, sx, authenticated }) => {
+const UserIcon = ({ user, color, logoClassName, sx, authenticated, noTooltip }) => {
   const iconStyle = {...(sx || {})}
-  return (
-    <React.Fragment>
+  return noTooltip ? (
+    user?.logo_url ?
+      <img
+        src={user.logo_url}
+        className={logoClassName || 'user-img-small'}
+        style={iconStyle}
+      /> :
+    (authenticated || isLoggedIn()) ?
+      <PersonIcon color={color} sx={iconStyle} /> :
+    <StrangerIcon color={color} sx={iconStyle} />
+  ) : (
+    <UserTooltip user={user}>
       {
         user?.logo_url ?
           <img
@@ -18,7 +29,7 @@ const UserIcon = ({ user, color, logoClassName, sx, authenticated }) => {
           <PersonIcon color={color} sx={iconStyle} /> :
         <StrangerIcon color={color} sx={iconStyle} />
       }
-    </React.Fragment>
+    </UserTooltip>
   )
 }
 
diff --git a/src/components/users/UserProfile.jsx b/src/components/users/UserProfile.jsx
index de3768a7..cc6c0aba 100644
--- a/src/components/users/UserProfile.jsx
+++ b/src/components/users/UserProfile.jsx
@@ -15,7 +15,7 @@ import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined
 import CopyIcon from '@mui/icons-material/ContentCopyOutlined';
 import { formatWebsiteLink, formatDate, canEditUser, sortOrgs, copyToClipboard, getCurrentUser } from '../../common/utils'
 import UserIcon from './UserIcon';
-import OrgIcon from '../orgs/OrgIcon';
+import OrgChip from '../orgs/OrgChip'
 import Link from '../common/Link'
 import { OperationsContext } from '../app/LayoutContext';
 import APIService from '../../services/APIService';
@@ -70,7 +70,7 @@ const UserProfile = ({ user }) => {
 
   return (
     <React.Fragment>
-      <UserIcon user={user} color='primary' sx={{color: 'primary', fontSize: '100px'}} logoClassName='user-img-medium' />
+      <UserIcon noTooltip user={user} color='primary' sx={{color: 'primary', fontSize: '100px'}} logoClassName='user-img-medium' />
       <Typography component='h2' sx={{marginTop: '16px', color: 'surface.dark', fontWeight: 'bold', fontSize: '24px', letterSpacing: 'normal'}}>
         {user?.name}
       </Typography>
@@ -99,9 +99,7 @@ const UserProfile = ({ user }) => {
               <div className='col-xs-12 padding-0' style={{marginTop: '8px', maxHeight: '300px', overflow: 'auto'}}>
                 {
                   userOrgs.map(org => (
-                    <span key={org.url} style={{margin: '4px', display: 'inline-block'}}>
-                      <OrgIcon org={org} />
-                    </span>
+                    <OrgChip hideType key={org?.id} org={org} sx={{margin: '4px'}} />
                   ))
                 }
               </div>
diff --git a/src/components/users/UserProfileButton.jsx b/src/components/users/UserProfileButton.jsx
index 8a5b6478..38aea1df 100644
--- a/src/components/users/UserProfileButton.jsx
+++ b/src/components/users/UserProfileButton.jsx
@@ -6,7 +6,7 @@ import UserIcon from './UserIcon';
 const UserProfileButton = props => {
   return (
     <IconButton color='primary' {...props}>
-      <UserIcon user={getCurrentUser()} />
+      <UserIcon noTooltip user={getCurrentUser()} />
     </IconButton>
   )
 }
diff --git a/src/components/users/UserStatistics.jsx b/src/components/users/UserStatistics.jsx
index b0e0c7e7..b9ff7c5b 100644
--- a/src/components/users/UserStatistics.jsx
+++ b/src/components/users/UserStatistics.jsx
@@ -34,7 +34,7 @@ const UserStatistics = ({ user }) => {
         <List sx={{color: 'secondary.main', p: 0}}>
           <ListItem disablePadding href={`#${user.url}repos`} sx={{cursor: 'pointer'}} onClick={onRepoStatsClick}>
             <ListItemIcon sx={{minWidth: 0, marginRight: '8px'}}>
-              <RepoIcon sx={{color: 'default.light', width: '20px', height: '20px'}} />
+              <RepoIcon noTooltip sx={{color: 'default.light', width: '20px', height: '20px'}} />
             </ListItemIcon>
             <ListItemText
               sx={{color: 'default.light', '.MuiListItemText-primary': {fontSize: '12px'}}}
@@ -43,7 +43,7 @@ const UserStatistics = ({ user }) => {
           </ListItem>
           <ListItem disablePadding >
             <ListItemIcon sx={{minWidth: 0, marginRight: '8px'}}>
-              <OrgIcon strict noLink sx={{color: 'default.light', width: '20px', height: '20px'}} />
+              <OrgIcon noTooltip strict noLink sx={{color: 'default.light', width: '20px', height: '20px'}} />
             </ListItemIcon>
             <ListItemText
               sx={{color: 'default.light', '.MuiListItemText-primary': {fontSize: '12px'}}}
diff --git a/src/components/users/UserTooltip.jsx b/src/components/users/UserTooltip.jsx
index e2ee76c7..23a84200 100644
--- a/src/components/users/UserTooltip.jsx
+++ b/src/components/users/UserTooltip.jsx
@@ -35,7 +35,7 @@ const TooltipTitle = ({ user }) => {
 }
 
 
-const UserTooltip = ({ user, children  }) => {
+const UserTooltip = ({ user, children, spanStyle  }) => {
   return (
     <HTMLTooltip
       title={
@@ -44,7 +44,7 @@ const UserTooltip = ({ user, children  }) => {
         </React.Fragment>
       }
     >
-      <span>
+      <span style={{display: 'flex', ...spanStyle}}>
         {children}
       </span>
     </HTMLTooltip>