diff --git a/src/components/common/AccessChip.jsx b/src/components/common/AccessChip.jsx new file mode 100644 index 00000000..0b323e48 --- /dev/null +++ b/src/components/common/AccessChip.jsx @@ -0,0 +1,21 @@ +import React from 'react' +import { useTranslation } from 'react-i18next'; +import Chip from '@mui/material/Chip' +import AccessIcon from './AccessIcon' + + +const AccessChip = ({public_access, ...rest}) => { + const { t } = useTranslation() + const isPublic = ['view', 'edit'].includes(public_access?.toLowerCase()) + return ( + } + label={isPublic ? t('common.public') : t('common.private')} + {...rest} + /> + ) +} + +export default AccessChip; diff --git a/src/components/common/AccessIcon.jsx b/src/components/common/AccessIcon.jsx index af689500..b2349d82 100644 --- a/src/components/common/AccessIcon.jsx +++ b/src/components/common/AccessIcon.jsx @@ -3,7 +3,7 @@ import PublicIcon from '@mui/icons-material/LanguageOutlined'; import PrivateIcon from '@mui/icons-material/LockOutlined'; const AccessIcon = ({isPublic, public_access, ...rest}) => { - const _isPublic = isPublic || ['view', 'edit'].includes(public_access.toLowerCase()) + const _isPublic = isPublic || ['view', 'edit'].includes(public_access?.toLowerCase()) return _isPublic ? : } diff --git a/src/components/repos/RepoHome.jsx b/src/components/repos/RepoHome.jsx index fd0970af..28104073 100644 --- a/src/components/repos/RepoHome.jsx +++ b/src/components/repos/RepoHome.jsx @@ -13,6 +13,7 @@ import ConceptHome from '../concepts/ConceptHome'; import MappingHome from '../mappings/MappingHome'; import ConceptForm from '../concepts/ConceptForm'; import Error404 from '../errors/Error404'; +import RepoSummary from './RepoSummary' const RepoHome = () => { const { t } = useTranslation() @@ -21,11 +22,9 @@ const RepoHome = () => { const params = useParams() const TABS = [ + {key: 'about', label: t('common.overview')}, {key: 'concepts', label: t('concept.concepts')}, {key: 'mappings', label: t('mapping.mappings')}, - {key: 'versions', label: t('common.versions')}, - {key: 'summary', label: t('common.summary')}, - {key: 'about', label: t('common.about')} ] const TAB_KEYS = TABS.map(tab => tab.key) const findTab = () => TAB_KEYS.includes(params?.tab || params?.repoVersion) ? params.tab || params.repoVersion : 'concepts' @@ -117,6 +116,7 @@ const RepoHome = () => { (repo?.id || loading) && setConceptForm(false)} /> +
{ repo?.id && ['concepts', 'mappings'].includes(tab) && @@ -129,9 +129,14 @@ const RepoHome = () => { onShowItem={onShowItem} showItem={showItem} filtersHeight='calc(100vh - 300px)' - resultContainerStyle={{height: showItem ? 'calc(100vh - 440px)' : 'calc(100vh - 400px)', overflow: 'auto'}} + resultContainerStyle={{height: isSplitView ? 'calc(100vh - 440px)' : 'calc(100vh - 400px)', overflow: 'auto'}} + containerStyle={{padding: 0}} /> } +
+ + + } { diff --git a/src/components/repos/RepoSummary.jsx b/src/components/repos/RepoSummary.jsx new file mode 100644 index 00000000..6057887f --- /dev/null +++ b/src/components/repos/RepoSummary.jsx @@ -0,0 +1,218 @@ +import React from 'react'; +import { Trans, useTranslation } from 'react-i18next'; + +import Chip from '@mui/material/Chip' +import Skeleton from '@mui/material/Skeleton' +import Typography from '@mui/material/Typography' +import List from '@mui/material/List' +import ListItem from '@mui/material/ListItem' +import ListItemText from '@mui/material/ListItemText' +import ListItemButton from '@mui/material/ListItemButton' +import ListItemIcon from '@mui/material/ListItemIcon' +import ExperimentalIcon from '@mui/icons-material/ScienceOutlined'; +import LanguageIcon from '@mui/icons-material/TranslateOutlined'; +import VersionIcon from '@mui/icons-material/AccountTreeOutlined'; + +import isEmpty from 'lodash/isEmpty' + +import AccessChip from '../common/AccessChip' +import ConceptIcon from '../concepts/ConceptIcon' +import MappingIcon from '../mappings/MappingIcon' + +const SkeletonText = () => () + +const PropertyChip = ({label, icon, ...rest}) => { + return ( + } + {...rest} + /> + ) +} + +const RepoSummary = ({ repo, summary }) => { + const { t } = useTranslation() + + const isLoaded = isEmpty(summary) + const activeConcepts = isLoaded ? false : (summary?.concepts?.active || 0) + const totalConcepts = isLoaded ? false : ((summary?.concepts?.active || 0) + (summary?.concepts?.retired || 0)) + const activeMappings = isLoaded ? false : (summary?.mappings?.active || 0) + const totalMappings = isLoaded ? false : ((summary?.mappings?.active || 0) + (summary?.mappings?.retired || 0)) + const mapTypes = isLoaded ? false : (summary?.mappings?.map_type?.length || 0) + const datatypes = isLoaded ? false : (summary?.concepts?.datatype?.length || 0) + const conceptClasses = isLoaded ? false : (summary?.concepts?.concept_class?.length || 0) + const nameTypes = isLoaded ? false : (summary?.concepts?.name_type?.length || 0) + const locales = isLoaded ? false : (summary?.concepts?.locale?.length || 0) + const totalVersions = isLoaded ? false : (summary?.versions?.total || 0) + const releasedVersions = isLoaded ? false : (summary?.versions?.released || 0) + + return ( +
+
+ + + } /> +
+
+ + {t('common.summary')} + + + + + + + + : + + } + sx={{ + '.MuiListItemText-primary': {fontSize: '12px', color: 'secondary.main'} + }} + /> + + + + + + + + : + + } + sx={{ + '.MuiListItemText-primary': {fontSize: '12px', color: 'secondary.main'} + }} + /> + + + + + + + + : + <>{`${datatypes?.toLocaleString()} ${t('concept.datatypes')}`} + } + sx={{ + '.MuiListItemText-primary': {fontSize: '12px', color: 'secondary.main'} + }} + /> + + + + + + + + : + <>{`${conceptClasses?.toLocaleString()} ${t('concept.concept_classes')}`} + } + sx={{ + '.MuiListItemText-primary': {fontSize: '12px', color: 'secondary.main'} + }} + /> + + + + + + + + : + <>{`${nameTypes?.toLocaleString()} ${t('concept.name_types')}`} + } + sx={{ + '.MuiListItemText-primary': {fontSize: '12px', color: 'secondary.main'} + }} + /> + + + + + + + + : + <>{`${locales?.toLocaleString()} ${t('repo.locales')}`} + } + sx={{ + '.MuiListItemText-primary': {fontSize: '12px', color: 'secondary.main'} + }} + /> + + + + + + + + : + <>{`${mapTypes?.toLocaleString()} ${t('mapping.map_types')}`} + } + sx={{ + '.MuiListItemText-primary': {fontSize: '12px', color: 'secondary.main'} + }} + /> + + + { + totalVersions > 0 && + + + + + + : + + } + sx={{ + '.MuiListItemText-primary': {fontSize: '12px', color: 'secondary.main'} + }} + /> + + + } + +
+
+ ) +} + +export default RepoSummary diff --git a/src/components/search/ResultConstants.js b/src/components/search/ResultConstants.js index fae9ecfa..9faa40f3 100644 --- a/src/components/search/ResultConstants.js +++ b/src/components/search/ResultConstants.js @@ -15,7 +15,7 @@ export const ALL_COLUMNS = { concepts: [ {id: 'id', labelKey: 'common.id', value: 'id', sortOn: 'id_lowercase', className: 'searchable'}, {id: 'name', labelKey: 'concept.display_name', value: 'display_name', sortOn: '_name', className: 'searchable', sortBy: 'asc', renderer: item => ({item.retired && } {item.display_name})}, - {id: 'concept_class', labelKey: 'concept.concept_class', value: 'concept_class', sortOn: 'concept_class'}, + {id: 'concept_class', labelKey: 'concept.concept_class', value: 'concept_class', sortOn: 'concept_class', sx: {whiteSpace: 'pre'}}, {id: 'datatype', labelKey: 'concept.datatype', value: 'datatype', sortOn: 'datatype'}, {id: 'owner', labelKey: 'common.owner', value: 'owner', sortOn: 'owner', nested: false, renderer: item => ({item.owner})}, {id: 'parent', labelKey: 'repo.repo', value: 'source', sortOn: 'source', nested: false, renderer: item => }, diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx index dd9df6bc..821b68b7 100644 --- a/src/components/search/Search.jsx +++ b/src/components/search/Search.jsx @@ -358,7 +358,7 @@ const Search = props => { }
-
+
{ appliedFilters={filters} />
-
+
{ return ( 0 && { @@ -29,8 +31,6 @@ const ResultsToolbar = props => { }), borderBottom: (disabled || display === 'card') ? 'none': '1px solid rgba(224, 224, 224, 1)', minHeight: '48px !important', - borderTopLeftRadius: '8px', - borderTopRightRadius: '8px' }} > { diff --git a/src/components/search/TableResults.jsx b/src/components/search/TableResults.jsx index ff18fe9f..e7adb356 100644 --- a/src/components/search/TableResults.jsx +++ b/src/components/search/TableResults.jsx @@ -22,7 +22,7 @@ const EnhancedTableHead = props => { }; return ( - + { align='left' padding='normal' sortDirection={orderBy === headCell.id ? order : false} - sx={{background: 'inherit'}} + sx={{background: 'inherit', ...headCell.sx}} > handleClick(event, id)} style={{color: color}}> @@ -154,11 +159,11 @@ const TableResults = ({selected, bgColor, handleClick, handleRowClick, handleSel scope="row" padding="normal" className={column.className} - style={{color: color}} + sx={{color: color}} > {value} : - + {value} }) diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json index e8b0417a..c0b7d7d7 100644 --- a/src/i18n/locales/en/translations.json +++ b/src/i18n/locales/en/translations.json @@ -215,7 +215,10 @@ "autoid_mapping_external_id": "Mapping External ID Auto Assignment", "custom_validation_schema": "Custom Validation Schema", "compare_origin_version_disabled_tooltip": "You must select an older version to compare", - "compare_destination_version_disabled_tooltip": "You must select a newer version to compare" + "compare_destination_version_disabled_tooltip": "You must select a newer version to compare", + "summary_active_concepts_from_total": "{{active}} active from {{total}} Concepts", + "summary_active_mappings_from_total": "{{active}} active from {{total}} Mappings", + "summary_released_versions_from_total": "{{released}} released from {{total}} Versions" }, "org": { "my": "My organizations",