OpenConceptLab/ocl_issues#1621 | Concept details view | header proper…

…ties

src/components/common/Breadcrumbs.jsx

@@ -54,7 +54,7 @@ const Breadcrumbs = ({owner, ownerType, repo, repoVersion, repoURL, id, version,
             <DotSeparator />
             {
               !noIcons &&
-                <ConceptIcon selected {...iconProps} />
+                <ConceptIcon selected {...iconProps} color='primary' />
             }
             <span className='searchable'>{id}</span>
           </React.Fragment>

src/components/common/ExternalIdIcon.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import SvgIcon from '@mui/material/SvgIcon';
+
+const ExternalIdIcon = ({fill, ...rest}) => {
+  return (
+    <SvgIcon {...rest}>
+      <path d="m16.5 9-3-3v2.25h-6v1.5h6V12m1.5 1.5a7.5 7.5 0 1 1 0-9h-2.047a6 6 0 1 0 0 9H15z" fill={fill}/>
+    </SvgIcon>
+  )
+}
+
+export default ExternalIdIcon;

src/components/common/ExternalIdLabel.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next';
+import { join, slice } from 'lodash'
+import Tooltip from '@mui/material/Tooltip'
+import { SECONDARY_COLORS } from '../../common/colors'
+import ExternalIdIcon from './ExternalIdIcon'
+import { OperationsContext } from '../app/LayoutContext';
+import { copyToClipboard } from '../../common/utils'
+
+const ExternalIdLabel = ({ value, style }) => {
+  const { t } = useTranslation()
+  const { setAlert } = React.useContext(OperationsContext);
+  const getValue = () => {
+    let newValue = value
+    if(value?.length > 11) {
+      newValue = join([slice(value, 0, 4).join(''), '...', slice(value, -4).join('')], '');
+    }
+    return newValue
+  }
+
+  const onClick = () => {
+    copyToClipboard(value)
+    setAlert({message: t('common.copied_to_clipboard'), severity: 'success', duration: 1000})
+  }
+
+  return (
+    <Tooltip title={t('common.click_to_copy')}>
+      <span style={{display: 'flex', alignItems: 'center', cursor: 'copy', ...style}} onClick={onClick}>
+      <ExternalIdIcon size='small' sx={{marginTop: '4px', width: '18px', height: '18px'}} />
+      <span style={{marginRight: '4px', fontSize: '12px', colors: SECONDARY_COLORS.main}}>
+        {t('concept.form.external_id')}
+      </span>
+      <span style={{fontSize: '12px', color: SECONDARY_COLORS['50']}}>
+        {getValue()}
+      </span>
+    </span>
+    </Tooltip>
+  )
+}
+
+export default ExternalIdLabel;

src/components/concepts/ConceptHeader.jsx

@@ -3,15 +3,29 @@ import { useTranslation } from 'react-i18next';
 import Typography from '@mui/material/Typography'
 import Chip from '@mui/material/Chip'
 import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import DownloadIcon from '@mui/icons-material/Download';
 import DownIcon from '@mui/icons-material/ArrowDropDown';
-import ShareIcon from '@mui/icons-material/Share';
 import CloseIconButton from '../common/CloseIconButton';
 import { toOwnerURI } from '../../common/utils';
 import Breadcrumbs from '../common/Breadcrumbs'
-import { BLACK } from '../../common/colors'
+import { BLACK, SECONDARY_COLORS } from '../../common/colors'
 import ConceptManagementList from './ConceptManagementList'
+import ExternalIdLabel from '../common/ExternalIdLabel';
+
+const PropertyChip = ({name, property, sx}) => {
+  const label = (
+    <span style={{display: 'flex', alignItems: 'center'}}>
+      <span style={{display: 'flex', alignItems: 'center'}}>
+        {name}:
+    </span>
+      <span style={{fontWeight: 'bold', display: 'flex', alignItems: 'center', color: SECONDARY_COLORS.main, marginLeft: '4px'}}>
+        {property}
+      </span>
+    </span>
+  )
+  return (
+    <Chip label={label} variant='outlined' sx={{color: 'surface.contrastText', borderRadius: '8px', ...sx}} />
+  )
+}
 
 const ConceptHeader = ({concept, onClose, repoURL, onEdit}) => {
   const { t } = useTranslation()
@@ -58,17 +72,15 @@ const ConceptHeader = ({concept, onClose, repoURL, onEdit}) => {
         <Typography sx={{fontSize: '22px', color: BLACK}} className='searchable'>{concept.display_name}</Typography>
       </div>
       <div className='col-xs-12 padding-0' style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
-        <span>
-          <Chip label={concept.concept_class} sx={{backgroundColor: 'surface.n90', color: 'surface.dark', borderRadius: '4px'}} />
-          <Chip label={concept.datatype} sx={{backgroundColor: 'surface.n90', color: 'surface.dark', borderRadius: '4px', marginLeft: '8px'}} />
+        <span style={{display: 'flex', alignItems: 'center'}}>
+          <PropertyChip name={t('concept.concept_class')} property={concept.concept_class} sx={{marginRight: '8px'}} />
+          <PropertyChip name={t('concept.datatype')} property={concept.datatype} />
+          {
+            concept.external_id &&
+              <ExternalIdLabel value={concept.external_id} style={{marginLeft: '8px'}} />
+          }
         </span>
         <span>
-          <IconButton sx={{color: 'surface.contrastText', mr: 1}}>
-            <DownloadIcon fontSize='inherit' />
-          </IconButton>
-          <IconButton sx={{color: 'surface.contrastText', mr: 1}}>
-            <ShareIcon fontSize='inherit' />
-          </IconButton>
           <Button endIcon={<DownIcon fontSize='inherit' />} variant='text' sx={{textTransform: 'none', color: 'surface.contrastText'}} onClick={onMenuOpen} id='concept-actions'>
             {t('common.actions')}
           </Button>

src/i18n/locales/en/translations.json

@@ -74,7 +74,8 @@
     "with": "with",
     "json": "JSON",
     "draft": "Draft",
-    "highlights": "Highlights"
+    "highlights": "Highlights",
+    "click_to_copy": "Click to Copy"
   },
   "errors": {
     "404": "Sorry your page could not be found.",