Skip to content

Commit

Permalink
OpenConceptLab/ocl_issues#1213 | Concept/Mapping Versions | showing c…
Browse files Browse the repository at this point in the history 
…hecksums
  • Loading branch information
@snyaggarwal
snyaggarwal committed Apr 20, 2023
1 parent 38fc38d commit b9abd8e
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 77 deletions.
4 changes: 3 additions & 1 deletion .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,9 @@
"keydown",
"rect",
"Dropdown",
"uncheck"
"uncheck",
"checksum",
"checksums"
],
"skipIfMatch": [
"http://[^s]*",
Expand Down
198 changes: 122 additions & 76 deletions src/components/common/VersionList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import React from 'react';
import {
Accordion, AccordionSummary, AccordionDetails, Divider, Tooltip,
IconButton, Button, Checkbox
IconButton, Button, Checkbox, Collapse
} from '@mui/material';
import { map, isEmpty, startCase, uniq, without, orderBy } from 'lodash';
import {
Search as SearchIcon, CompareArrows as CompareArrowsIcon,
InfoOutlined as InfoIcon
InfoOutlined as InfoIcon, ExpandLess as UpIcon,
ExpandMore as DownIcon
} from '@mui/icons-material';
import { copyToClipboard } from '../../common/utils'
import LastUpdatedOnLabel from './LastUpdatedOnLabel';
import SourceChildVersionAssociationWithContainer from './SourceChildVersionAssociationWithContainer';
import RetiredChip from '../common/RetiredChip';
import TabCountLabel from '../common/TabCountLabel';
import BetaLabel from '../common/BetaLabel';

const ACCORDIAN_HEADING_STYLES = {
fontWeight: 'bold',
Expand All @@ -24,9 +27,28 @@ const None = () => {
return <div style={{margin: '5px', fontWeight: '300'}}>None</div>
}

const _Checksum = ({ checksum }) => (
<span
style={{color: 'rgb(51, 115, 170)', marginLeft: '5px'}}
onClick={() => copyToClipboard(checksum, 'Copied to Clipboard!')}>
{checksum}
</span>
)

const Checksum = ({ title, label, checksum }) => checksum ? (
<Tooltip title={title} placement='left'>
<div>
<span>{label}:</span>
<_Checksum checksum={checksum} />
</div>
</Tooltip>
) : null;


const VersionList = ({ versions, resource }) => {
const sortedVersions = orderBy(versions, 'version_created_on', 'desc');
const [selectedList, setSelectedList] = React.useState([]);
const [expandChecksums, setExpandChecksums] = React.useState(false)
const onSelectChange = (event, id) => setSelectedList(
event.target.checked ? uniq([...selectedList, id]) : without(selectedList, id)
)
Expand Down Expand Up @@ -54,95 +76,119 @@ const VersionList = ({ versions, resource }) => {
<span className='flex-vertical-center' style={{width: '100%', justifyContent: 'space-between'}}>
<TabCountLabel style={ACCORDIAN_HEADING_STYLES} label={`${startCase(resource)} Version History`} count={!isEmpty(versions) && versions.length} />
<span className='flex-vertical-center' style={{marginLeft: '10px'}}>
{
showCompareOption &&
<Button
startIcon={<CompareArrowsIcon fontSize='inherit' />}
variant='text'
size='small'
color='primary'
style={{marginRight: '15px', textTransform: 'none'}}
onClick={onCompareClick}
>
Compare
</Button>
}

<Tooltip arrow title={`All changes to a ${resource} are automatically saved to its ${startCase(resource)} Version History`}>
<InfoIcon fontSize='small' color='action' />
</Tooltip>
</span>
</span>
{
showCompareOption &&
<span className='flex-vertical-center'>
<Button
startIcon={<CompareArrowsIcon fontSize='small' />}
variant='outlined'
size='small'
color='primary'
style={{marginLeft: '15px'}}
onClick={onCompareClick}
>
Compare
</Button>
</span>
}
</AccordionSummary>
<AccordionDetails style={ACCORDIAN_DETAILS_STYLES}>
{
isEmpty(sortedVersions) ?
None() :
map(sortedVersions, (version, index) => {
const isRetired = version.retired
return (
<React.Fragment key={index}>
<div className='col-md-12 flex-vertical-center'>
{
canSelect &&
<div className='col-md-1 no-side-padding'>
<Checkbox size='small' onChange={event => onSelectChange(event, version.version_url)} />
</div>
}
<div className={`${gridClass} no-side-padding flex-vertical-center`} style={{margin: '10px 0'}}>
<div className='col-md-11 no-left-padding flex-vertical-center'>
<div className={isRetired ? 'col-md-10 no-side-padding' : 'col-md-12 no-side-padding'}>
<div className='col-md-12 no-side-padding'>
None() :
map(sortedVersions, (version, index) => {
const isRetired = version.retired
return (
<React.Fragment key={index}>
<div className='col-md-12 flex-vertical-center' style={{padding: '0 3px'}}>
{
canSelect &&
<div className='col-md-1 no-side-padding'>
<Checkbox size='small' onChange={event => onSelectChange(event, version.version_url)} />
</div>
}
<div className={`${gridClass} no-side-padding flex-vertical-center`} style={{margin: '10px 0'}}>
<div className='col-md-11 no-side-padding flex-vertical-center'>
<div className={isRetired ? 'col-md-10 no-side-padding' : 'col-md-12 no-side-padding'}>
<div className='col-md-12 no-side-padding'>
{
Boolean(version.update_comment) &&
<span>{version.update_comment}</span>
}
</div>
<div className='col-md-12 no-side-padding' style={{marginTop: '5px'}}>
<LastUpdatedOnLabel
by={version.version_created_by}
date={version.version_created_on}
/>
</div>
{
version.update_comment ?
<span>{version.update_comment}</span> :
<span className='gray-italics-small'>No update comment</span>
version?.checksums &&
<div className='col-md-12 no-side-padding gray-italics-small' style={{marginTop: '-5px', marginBottom: '10px'}}>
<Tooltip title="Checksum of versions's metadata, locales, direct associations and source versions." placement='left'>
<div>
<BetaLabel label='Checksum' />:
<_Checksum checksum={version.checksums.all} />
<span>
<IconButton size='small' color='primary' onClick={() => setExpandChecksums(!expandChecksums)}>
{expandChecksums ? <UpIcon fontSize='inherit' /> : <DownIcon fontSize='inherit' />}
</IconButton>
</span>
</div>
</Tooltip>
{
expandChecksums &&
<Collapse in={expandChecksums} style={{marginTop: '-5px', background: 'rgba(0, 0, 0, 0.1)', padding: '5px 5px 3px', borderRadius: '2px'}}>
<Checksum title="Checksum of versions's metadata." label='Metadata' checksum={version.checksums.meta} />
<Checksum title="Checksum of versions's names." label='Names' checksum={version.checksums.names} />
<Checksum title="Checksum of versions's descriptions." label='Descriptions' checksum={version.checksums.descriptions} />
<Checksum title="Checksum of versions's associations." label='Associations' checksum={version.checksums.mappings} />
<Checksum title="Checksum of versions's source versions." label='Source Versions' checksum={version.checksums.repo_versions} />
</Collapse>
}
</div>
}
</div>
<div className='col-md-12 no-side-padding' style={{marginTop: '5px'}}>
<LastUpdatedOnLabel
by={version.version_created_by}
date={version.version_created_on}
/>
</div>
{
isRetired &&
<div className='col-md-2 no-right-padding'>
<RetiredChip size='small' />
</div>
}
</div>
<div className='col-md-1 no-right-padding' style={{paddingLeft: '5px'}}>
<Tooltip arrow title='Version Link'>
<IconButton href={`#${version.version_url}`} color='primary' size='small'>
<SearchIcon fontSize='inherit' />
</IconButton>
</Tooltip>
</div>
{
isRetired &&
<div className='col-md-2 no-right-padding'>
<RetiredChip size='small' />
</div>
}
</div>
<div className='col-md-1 no-right-padding'>
<Tooltip arrow title='Version Link'>
<IconButton href={`#${version.version_url}`} color='primary' size='small'>
<SearchIcon fontSize='inherit' />
</IconButton>
</Tooltip>
</div>
</div>
</div>
{
version && (!isEmpty(version.source_versions) || !isEmpty(version.collection_versions)) &&
<div className='col-md-11 no-side-padding' style={{textAlign: 'center', marginTop: '-15px'}}>
<SourceChildVersionAssociationWithContainer
associatedWith={{
source: version.source_versions,
collection: version.collection_versions
}}
resource={resource}
style={canSelect ? {marginLeft: '55px'} : {}}
/>
</div>
}
{
(index + 1) < versions.length &&
<Divider style={{width: '100%', display: 'inline-block'}} />
}
</React.Fragment>
)
})
{
version && (!isEmpty(version.source_versions) || !isEmpty(version.collection_versions)) &&
<div className='col-md-11 no-side-padding' style={{textAlign: 'center', marginTop: '-15px'}}>
<SourceChildVersionAssociationWithContainer
associatedWith={{
source: version.source_versions,
collection: version.collection_versions
}}
resource={resource}
style={canSelect ? {marginLeft: '40px'} : {}}
/>
</div>
}
{
(index + 1) < versions.length &&
<Divider style={{width: '100%', display: 'inline-block'}} />
}
</React.Fragment>
)
})
}
</AccordionDetails>
</Accordion>
Expand Down

0 comments on commit b9abd8e

Please sign in to comment.