OpenConceptLab/ocl_issues#1776 | Chips usage

OpenConceptLab · Oct 2, 2024 · 52a1631 · 52a1631
1 parent 76434a6
commit 52a1631
Show file tree

Hide file tree

Showing 25 changed files with 150 additions and 96 deletions.
diff --git 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
@@ -7,13 +7,15 @@ const PRIMARY_STYLE = {
   backgroundColor: `${PRIMARY_COLORS['95']} !important`,
   '&:hover': {
     backgroundColor: `${PRIMARY_COLORS['95']} !important`,
+    textDecoration: 'none !important'
   }
 }
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -3,19 +3,16 @@ 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';
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;