OpenConceptLab/ocl_issues#1776 | Repo Header with chips

OpenConceptLab · Oct 7, 2024 · de7462f · de7462f
1 parent 48ee5f2
commit de7462f
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 53 deletions.
diff --git a/src/components/common/BaseEntityChip.jsx b/src/components/common/BaseEntityChip.jsx
@@ -42,7 +42,7 @@ const ENTITY_CHIP_SIZE_MAP = {
     '.MuiAvatar-root': {
       width: '18px',
       height: '18px',
-      margin: '1px 4px 1px 0',
+      margin: '1px 6px 1px 0',
       backgroundColor: 'transparent'
     },
     '.MuiSvgIcon-root': {
@@ -75,7 +75,7 @@ const ENTITY_CHIP_SIZE_MAP = {
     '.MuiAvatar-root': {
       width: '16px',
       height: '16px',
-      margin: '0 4px 0 0',
+      margin: '0 6px 0 0',
       backgroundColor: 'transparent',
     },
     '.MuiSvgIcon-root': {
@@ -112,14 +112,14 @@ const Label = ({ entity, hideType }) => {
   return (
     <span style={{display: 'flex', alignItems: 'center'}}>
       <span className='entity-id'>
-        <b>{entity.short_code || entity.id || entity.username}</b>
+        <b>{entity?.short_code || entity?.id || entity?.username}</b>
       </span>
       {
         !hideType &&
           <React.Fragment>
             <span className='divider-span' />
             <span className='entity-type'>
-              {entity.type}
+              {entity?.type}
             </span>
           </React.Fragment>
       }
@@ -152,7 +152,7 @@ const BaseEntityChip = ({ entity, icon, hideType, primary, size, sx, ...rest })
         event.stopPropagation()
         history.push(entity.version_url || entity.url)
       }}
-      href={'#' + (entity.version_url || entity.url)}
+      href={'#' + (entity?.version_url || entity?.url)}
       component='a'
       {...rest}
     />

diff --git a/src/components/common/OwnerChip.jsx b/src/components/common/OwnerChip.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import OrgChip from '../orgs/OrgChip';
+import UserChip from '../users/UserChip';
+
+const OwnerChip = ({ ownerType, owner, ...rest }) => {
+  return ['user', 'users'].includes(ownerType?.toLowerCase() || owner?.type?.toLowerCase()) ?
+    <UserChip user={owner} {...rest} /> :
+  <OrgChip org={owner} {...rest} />
+}
+
+export default OwnerChip;
diff --git a/src/components/orgs/OrgTooltip.jsx b/src/components/orgs/OrgTooltip.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { useHistory } from 'react-router-dom';
 import OrganizationIcon from '@mui/icons-material/AccountBalance';
+import Avatar from '@mui/material/Avatar'
 import HTMLTooltip from '../common/HTMLTooltip'
 import FollowActionButton from '../common/FollowActionButton'
 
@@ -12,7 +13,9 @@ const TooltipTitle = ({ org }) => {
         {
           org?.logo_url ?
             <img src={org.logo_url} style={{width: '48px', height: '48px', borderRadius: '50%', objectFit: 'cover'}} /> :
-          <OrganizationIcon sx={{width: '30px', height: '30px'}} />
+            <Avatar sx={{width: '36px', height: '36px'}}>
+              <OrganizationIcon sx={{width: '24px', height: '24px'}}  />
+            </Avatar>
         }
         <FollowActionButton iconButton entity={org} sx={{mr: 0, ml: 1.5}} size='small' />
       </div>

diff --git a/src/components/repos/CompareVersions.jsx b/src/components/repos/CompareVersions.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import moment from 'moment'
 import { useLocation } from 'react-router-dom';
 import Paper from '@mui/material/Paper'
-import { toParentURI } from '../../common/utils';
+import { toParentURI, toOwnerURI } from '../../common/utils';
 import APIService from '../../services/APIService';
 import LoaderDialog from '../common/LoaderDialog';
 import Error404 from '../errors/Error404'
@@ -17,6 +17,7 @@ const CompareVersions = () => {
   const [loading, setLoading] = React.useState(false)
   const [status, setStatus] = React.useState(false)
   const [repo, setRepo] = React.useState(false)
+  const [owner, setOwner] = React.useState(false)
   const [versions, setVersions] = React.useState(false)
   const [version1, setVersion1] = React.useState()
   const [version2, setVersion2] = React.useState()
@@ -52,10 +53,17 @@ const CompareVersions = () => {
       setStatus(response?.status || response?.response.status)
       setLoading(false)
       setRepo(response?.data || response?.response?.data || {})
+      fetchOwner()
       fetchVersions()
     })
   }
 
+  const fetchOwner = () => {
+    APIService.new().overrideURL(toOwnerURI(getURL())).get().then(response => {
+      setOwner(response.data || {})
+    })
+  }
+
   const fetchVersions = () => {
     APIService.new().overrideURL(getURL()).appendToUrl('versions/').get(null, null, {verbose:true, includeSummary: true}).then(response => {
       const repoVersions = response?.data || []
@@ -97,7 +105,7 @@ const CompareVersions = () => {
         {
           (repo?.id || loading) &&
             <React.Fragment>
-              <RepoHeader repo={repo} versions={versions} />
+              <RepoHeader repo={repo} owner={owner} versions={versions} />
             </React.Fragment>
         }
         {

diff --git a/src/components/repos/RepoHeader.jsx b/src/components/repos/RepoHeader.jsx
@@ -7,18 +7,16 @@ import IconButton from '@mui/material/IconButton';
 import DownloadIcon from '@mui/icons-material/Download';
 import ShareIcon from '@mui/icons-material/Share';
 import DownIcon from '@mui/icons-material/ArrowDropDown';
-import isNumber from 'lodash/isNumber';
-import HeaderChip from '../common/HeaderChip';
 import RepoVersionChip from './RepoVersionChip';
-import RepoIcon from './RepoIcon';
+import RepoChip from './RepoChip'
 import DotSeparator from '../common/DotSeparator';
-import OwnerIcon from '../common/OwnerIcon';
+import OwnerChip from '../common/OwnerChip';
 import { PRIMARY_COLORS } from '../../common/colors';
 import { formatDate } from '../../common/utils';
 import RepoManagementList from './RepoManagementList';
 import FollowActionButton from '../common/FollowActionButton'
 
-const RepoHeader = ({repo, versions, onVersionChange, onCreateConceptClick}) => {
+const RepoHeader = ({repo, owner, versions, onVersionChange, onCreateConceptClick}) => {
   const { t } = useTranslation()
   const [menu, setMenu] = React.useState(false)
   const [menuAnchorEl, setMenuAnchorEl] = React.useState(false)
@@ -40,14 +38,15 @@ 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 noTooltip sx={{color: 'surface.contrastText'}} />} />
+      <div className='col-xs-9 padding-0' style={{display: 'flex'}}>
+        <OwnerChip owner={owner} sx={{background: 'transparent', borderColor: 'surface.light'}} hideType />
+        <RepoChip repo={repo} sx={{marginLeft: '12px', background: 'transparent', borderColor: 'surface.light'}} onChange={onVersionChange} checkbox version={repo} versions={versions}  />
         {
           onVersionChange &&
-            <RepoVersionChip checkbox version={repo} versions={versions} sx={{marginLeft: '8px'}} onChange={onVersionChange} />
+            <RepoVersionChip checkbox version={repo} versions={versions} sx={{marginLeft: '8px', borderRadius: '4px'}} onChange={onVersionChange} />
         }
       </div>
-      <div className='col-xs-6 padding-0' style={{textAlign: 'right'}}>
+      <div className='col-xs-3 padding-0' style={{textAlign: 'right'}}>
         <FollowActionButton iconButton entity={repo} />
         <IconButton sx={{color: 'surface.contrastText', mr: 1}}>
           <DownloadIcon fontSize='inherit' />
@@ -60,33 +59,10 @@ const RepoHeader = ({repo, versions, onVersionChange, onCreateConceptClick}) =>
         </Button>
         <RepoManagementList anchorEl={menuAnchorEl} open={menu} onClose={onMenuClose} id='repo-manage' onClick={onManageOptionClick} />
       </div>
-      <div className='col-xs-12 padding-0' style={{margin: '4px 0 8px 0'}}>
+      <div className='col-xs-12 padding-0' style={{margin: '8px 0'}}>
         <Typography sx={{fontSize: '28px', color: 'surface.dark', fontWeight: 600}}>{repo.name}</Typography>
       </div>
       <div className='col-xs-12 padding-0' style={{display: 'flex', alignItems: 'center', fontSize: '16px'}}>
-        <span style={{display: 'flex', alignItems: 'center'}}>
-          <OwnerIcon ownerType={repo.ownerType} sx={{marginRight: '8px', color: 'surface.contrastText'}} />
-          <a style={{color: PRIMARY_COLORS.main}} className='no-anchor-styles' href={`#${repo.owner_url}`}>{repo.owner}</a>
-        </span>
-        {
-          isNumber(repo?.summary?.active_concepts) &&
-            <React.Fragment>
-              <DotSeparator margin="0 6px" />
-              <span style={{display: 'flex', alignItems: 'center', opacity: 0.7}}>
-                {repo.summary.active_concepts.toLocaleString()} {t('concept.concepts')}
-              </span>
-            </React.Fragment>
-        }
-        {
-          isNumber(repo?.summary?.active_mappings) &&
-            <React.Fragment>
-              <DotSeparator margin="0 6px" />
-              <span style={{display: 'flex', alignItems: 'center', opacity: 0.7}}>
-                {repo.summary.active_mappings.toLocaleString()} {t('mapping.mappings')}
-              </span>
-            </React.Fragment>
-        }
-        <DotSeparator margin="0 6px" />
         <span style={{display: 'flex', alignItems: 'center'}}>
           <a style={{color: PRIMARY_COLORS.main}} className='no-anchor-styles'>{t('common.view_all_attributes')}</a>
         </span>

diff --git a/src/components/repos/RepoHome.jsx b/src/components/repos/RepoHome.jsx
@@ -7,7 +7,7 @@ import LoaderDialog from '../common/LoaderDialog';
 import RepoHeader from './RepoHeader';
 import CommonTabs from '../common/CommonTabs';
 import Search from '../search/Search';
-import { dropVersion, toParentURI } from '../../common/utils';
+import { dropVersion, toParentURI, toOwnerURI } from '../../common/utils';
 import { WHITE } from '../../common/colors';
 import ConceptHome from '../concepts/ConceptHome';
 import ConceptForm from '../concepts/ConceptForm';
@@ -34,6 +34,7 @@ const RepoHome = () => {
   const [tab, setTab] = React.useState(findTab)
   const [status, setStatus] = React.useState(false)
   const [repo, setRepo] = React.useState(false)
+  const [owner, setOwner] = React.useState(false)
   const [repoSummary, setRepoSummary] = React.useState(false)
   const [versions, setVersions] = React.useState(false)
   const [loading, setLoading] = React.useState(true)
@@ -48,12 +49,19 @@ const RepoHome = () => {
       setLoading(false)
       const _repo = response?.data || response?.response?.data || {}
       setRepo(_repo)
+      fetchOwner()
       fetchRepoSummary()
       if(isConceptURL)
         setShowItem(true)
     })
   }
 
+  const fetchOwner = () => {
+    APIService.new().overrideURL(toOwnerURI(getURL())).get().then(response => {
+      setOwner(response?.data || {})
+    })
+  }
+
   const fetchRepoSummary = () => {
     APIService.new().overrideURL(getURL()).appendToUrl('summary/').get(null, null, {verbose: true}, true).then(response => {
       setRepoSummary(response?.data || response?.response?.data)
@@ -104,7 +112,7 @@ const RepoHome = () => {
         {
           (repo?.id || loading) &&
             <React.Fragment>
-              <RepoHeader repo={repo} versions={versions} onVersionChange={onVersionChange} onCreateConceptClick={onCreateConceptClick} onCloseConceptForm={() => setConceptForm(false)} />
+              <RepoHeader owner={owner} repo={repo} versions={versions} onVersionChange={onVersionChange} onCreateConceptClick={onCreateConceptClick} onCloseConceptForm={() => setConceptForm(false)} />
               <CommonTabs TABS={TABS} value={tab} onChange={onTabChange} />
               {
                 repo?.id && ['concepts', 'mappings'].includes(tab) &&
@@ -130,7 +138,7 @@ const RepoHome = () => {
       <div className={'col-xs-5 padding-0' + (isSplitView ? ' split-appear' : '')} style={{marginLeft: '16px', width: isSplitView ? 'calc(41.66666667% - 16px)' : 0, backgroundColor: WHITE, borderRadius: '10px', height: isSplitView ? 'calc(100vh - 100px)' : 0, opacity: isSplitView ? 1 : 0}}>
         {
           showConceptURL && !conceptForm &&
-            <ConceptHome repoSummary={repoSummary} source={repo} repo={repo} url={showConceptURL} onClose={() => setShowItem(false)} />
+            <ConceptHome repoSummary={repoSummary} source={repo} repo={repo} url={showConceptURL} onClose={() => setShowItem(false)} nested />
         }
         {
           conceptForm &&

diff --git a/src/components/repos/RepoTooltip.jsx b/src/components/repos/RepoTooltip.jsx
@@ -1,12 +1,15 @@
 import React from 'react'
 import { useHistory } from 'react-router-dom';
 import RepoIcon from '@mui/icons-material/FolderOutlined';
+import isNumber from 'lodash/isNumber';
 import HTMLTooltip from '../common/HTMLTooltip'
 import FollowActionButton from '../common/FollowActionButton'
 import OwnerButton from '../common/OwnerButton'
 import RepoVersionButton from './RepoVersionButton'
 import { URIToOwnerParams } from '../../common/utils'
 import DotSeparator from '../common/DotSeparator'
+import ConceptIcon from '../concepts/ConceptIcon'
+import MappingIcon from '../mappings/MappingIcon'
 
 const TooltipTitle = ({ repo }) => {
   // only need --> repo = {url: '/orgs/MyOrg/sources/MySource/', id: 'MyOrg'}
@@ -44,7 +47,7 @@ const TooltipTitle = ({ repo }) => {
           />
           <DotSeparator margin='0 8px' />
           <RepoVersionButton
-            icon={<RepoIcon noTooltip sx={{width: '15px', height: '15px'}} />}
+            icon={<RepoIcon sx={{width: '15px', height: '15px'}} />}
             repo={repoId}
             href={url}
             size='small'
@@ -71,13 +74,29 @@ const TooltipTitle = ({ repo }) => {
           </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>
-        }
+        <span style={{display: 'flex', alignItems: 'center'}}>
+          {
+            isNumber(repo?.summary?.active_concepts) &&
+              <span style={{cursor: 'pointer', display: 'flex', alignItems: 'center'}} onClick={() => history.push(url + 'concepts/')}>
+                <ConceptIcon fontSize='small' selected color='secondary' sx={{marginRight: '4px', width: '10px', height: '10px'}} />
+                {repo.summary.active_concepts.toLocaleString()}
+              </span>
+          }
+          {
+            isNumber(repo?.summary?.active_mappings) &&
+              <span style={{marginLeft: '12px', cursor: 'pointer', display: 'flex', alignItems: 'center'}} onClick={() => history.push(url + 'mappings/')}>
+                <MappingIcon fontSize='small' color='secondary' sx={{marginRight: '4px', width: '15px', height: '15px'}} />
+                {repo.summary.active_mappings.toLocaleString()}
+              </span>
+          }
+        </span>
+        <span style={{marginLeft: '8px', cursor: 'pointer'}} onClick={() => history.push(url)}>
+          {
+            (repo?.type === 'Source Version' || repo?.type === 'Collection Version') ?
+              (repo?.version || repo?.id):
+              'HEAD'
+          }
+        </span>
       </div>
     </React.Fragment>
   )

diff --git a/src/components/users/UserTooltip.jsx b/src/components/users/UserTooltip.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { useHistory } from 'react-router-dom';
 import UserIcon from '@mui/icons-material/Face2';
+import Avatar from '@mui/material/Avatar'
 import HTMLTooltip from '../common/HTMLTooltip'
 import FollowActionButton from '../common/FollowActionButton'
 
@@ -12,7 +13,9 @@ const TooltipTitle = ({ user }) => {
         {
           user?.logo_url ?
             <img src={user.logo_url} style={{width: '48px', height: '48px', borderRadius: '50%', objectFit: 'cover'}} /> :
-          <UserIcon sx={{width: '30px', height: '30px'}} />
+          <Avatar sx={{width: '36px', height: '36px'}}>
+            <UserIcon sx={{width: '24px', height: '24px'}} />
+            </Avatar>
         }
         <FollowActionButton iconButton entity={user} sx={{mr: 0, ml: 1.5}} size='small' />
       </div>