source-home | details and other tabs (wip)

OpenConceptLab · Nov 19, 2020 · b476f3d · b476f3d
1 parent a22bca4
commit b476f3d
Show file tree

Hide file tree

Showing 17 changed files with 503 additions and 53 deletions.
diff --git a/src/common/utils.js b/src/common/utils.js
@@ -89,3 +89,7 @@ export const copyURL = url => {
     alertifyjs.success('Copied URL to clipboard!')
   }
 }
+
+export const toParentURI = uri => {
+  return uri.split('/').splice(0, 5).join('/');
+};
diff --git a/src/components/app/App.jsx b/src/components/app/App.jsx
@@ -7,6 +7,7 @@ import SearchInput from '../search/SearchInput';
 import Search from '../search/Search';
 import ConceptHome from '../concepts/ConceptHome';
 import MappingHome from '../mappings/MappingHome';
+import SourceHome from '../sources/SourceHome';
 import { Link } from 'react-router-dom';
 import { isAtGlobalSearch } from '../../common/utils';
 
@@ -107,6 +108,24 @@ class App extends Component {
               path="/orgs/:org([a-zA-Z0-9\-\.\_]+)/sources/:source([a-zA-Z0-9\-\.\_]+)/:version([a-zA-Z0-9\-\.\_]+)/mappings/:mapping([a-zA-Z0-9\-\.\_]+)"
               component={MappingHome}
             />
+
+            { /* Source Details */ }
+            <Route
+              path="/orgs/:org([a-zA-Z0-9\-\.\_]+)/sources/:source([a-zA-Z0-9\-\.\_]+)/:version([a-zA-Z0-9\-\.\_]+)"
+              component={SourceHome}
+            />
+            <Route
+              path="/users/:user([a-zA-Z0-9\-\.\_]+)/sources/:source([a-zA-Z0-9\-\.\_]+)/:version([a-zA-Z0-9\-\.\_]+)"
+              component={SourceHome}
+            />
+            <Route
+              path="/orgs/:org([a-zA-Z0-9\-\.\_]+)/sources/:source([a-zA-Z0-9\-\.\_]+)"
+              component={SourceHome}
+            />
+            <Route
+              path="/users/:user([a-zA-Z0-9\-\.\_]+)/sources/:source([a-zA-Z0-9\-\.\_]+)"
+              component={SourceHome}
+            />
           </Switch>
         </div>
 

diff --git a/src/components/app/App.scss b/src/components/app/App.scss
@@ -138,7 +138,13 @@ td.pagination-center {
     color: #e5e5e5;
     cursor: pointer;
     &.concept {
-        color:  rgb(51, 115, 170)
+        color: rgb(51, 115, 170)
+    }
+    &.mapping {
+        color: rgb(51, 115, 170)
+    }
+    &.source {
+        color: rgb(92, 184, 92);
     }
     svg {
         font-size: 32pt;
@@ -240,3 +246,10 @@ div.bottom-fixed-center {
     padding: 0 15px !important;
     font-weight: 500;
 }
+
+.home-resource-full-name {
+    padding-top: 10px;
+    font-size: 20px;
+    font-weight: bold;
+    padding-bottom: 7px;
+}
diff --git a/src/components/common/CustomAttributesAccordian.jsx b/src/components/common/CustomAttributesAccordian.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import {
+  Accordion, AccordionSummary, AccordionDetails, Typography
+} from '@material-ui/core';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { map, isEmpty } from 'lodash';
+
+const None = () => {
+  return <div style={{margin: '5px', fontWeight: '300'}}>None</div>
+}
+
+const CustomAttributesAccordian = ({
+  headingStyles, detailStyles, attributes
+}) => {
+  return (
+    <Accordion defaultExpanded>
+      <AccordionSummary
+        className='light-gray-bg'
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls="panel1a-content"
+      >
+        <Typography style={headingStyles}>Custom Attributes</Typography>
+      </AccordionSummary>
+      <AccordionDetails style={detailStyles}>
+        {
+          isEmpty(attributes) ?
+          None() :
+          map(attributes, (value, name) => (
+            <div className='col-md-12' style={{marginBottom: '5px'}} key={name}>
+              <div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
+                {name}
+              </div>
+              <div className='col-md-4 no-right-padding'>
+                {value}
+              </div>
+            </div>
+          ))
+        }
+      </AccordionDetails>
+    </Accordion>
+  )
+}
+
+export default CustomAttributesAccordian;
diff --git a/src/components/common/SourceButton.jsx b/src/components/common/SourceButton.jsx
@@ -2,13 +2,18 @@ import React from 'react';
 import { Button } from '@material-ui/core';
 import { List as ListIcon } from '@material-ui/icons';
 import { GREEN, WHITE } from '../../common/constants';
+import { toParentURI } from '../../common/utils';
+
+const SourceButton = ({label, onClick, href, childURI}) => {
+  let uri = href
+  if(childURI) uri = '#' + toParentURI(childURI);
 
-const SourceButton = ({label, onClick}) => {
   return (
     <Button
       variant='contained'
       startIcon={<ListIcon />}
       onClick={onClick}
+      href={uri}
       style={{background: GREEN, color: WHITE, boxShadow: 'none'}}>
       {label}
     </Button>

diff --git a/src/components/concepts/ConceptHomeDetails.jsx b/src/components/concepts/ConceptHomeDetails.jsx
@@ -6,6 +6,7 @@ import { map, get, isEmpty } from 'lodash';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ConceptDetailsLocale from './ConceptDetailsLocale';
 import NestedMappingsTable from '../mappings/NestedMappingsTable';
+import CustomAttributesAccordian from '../common/CustomAttributesAccordian';
 import { getIndirectMappings, getDirectMappings } from '../../common/utils';
 
 const ACCORDIAN_HEADING_STYLES = {
@@ -64,31 +65,11 @@ const ConceptHomeDetails = ({ concept, currentURL }) => {
             }
           </AccordionDetails>
         </Accordion>
-        <Accordion defaultExpanded>
-          <AccordionSummary
-            className='light-gray-bg'
-            expandIcon={<ExpandMoreIcon />}
-            aria-controls="panel1a-content"
-          >
-            <Typography style={ACCORDIAN_HEADING_STYLES}>Custom Attributes</Typography>
-          </AccordionSummary>
-          <AccordionDetails style={ACCORDIAN_DETAILS_STYLES}>
-            {
-              isEmpty(extras) ?
-              None() :
-              map(extras, (value, name) => (
-                <div className='col-md-12' style={{marginBottom: '5px'}} key={name}>
-                  <div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
-                    {name}
-                  </div>
-                  <div className='col-md-4 no-right-padding'>
-                    {value}
-                  </div>
-                </div>
-              ))
-            }
-          </AccordionDetails>
-        </Accordion>
+        <CustomAttributesAccordian
+          attributes={extras}
+          headingStyles={ACCORDIAN_HEADING_STYLES}
+          detailStyles={ACCORDIAN_DETAILS_STYLES}
+        />
       </div>
       <div className='col-md-6 no-right-padding'>
         <Accordion defaultExpanded>

diff --git a/src/components/concepts/ConceptHomeHeader.jsx b/src/components/concepts/ConceptHomeHeader.jsx
@@ -1,35 +1,25 @@
 import React from 'react';
-import {
-  LocalOffer as LocalOfferIcon
-} from '@material-ui/icons';
-import { Tooltip } from '@material-ui/core';
-import { toFullAPIURL, copyURL } from '../../common/utils';
 import OwnerButton from '../common/OwnerButton';
 import SourceButton from '../common/SourceButton';
 import ConceptButton from '../common/ConceptButton';
 import VersionButton from '../common/VersionButton';
 import LastUpdatedOnLabel from '../common/LastUpdatedOnLabel';
 import ExternalIdLabel from '../common/ExternalIdLabel';
+import ConceptIcon from './ConceptIcon';
 
 const ConceptHomeHeader = ({
   concept, isVersionedObject, versionedObjectURL, currentURL
 }) => {
   const isRetired = concept.retired;
-  const onIconClick = () => copyURL(toFullAPIURL(currentURL))
-
   return (
     <header className='home-header col-md-12'>
       <div className='col-md-12 container' style={{paddingTop: '10px'}}>
-        <div className='no-side-padding col-md-1 home-icon concept'>
-          <Tooltip title='Copy URL'>
-            <LocalOfferIcon onClick={onIconClick} />
-          </Tooltip>
-        </div>
+        <ConceptIcon url={currentURL} />
         <div className='col-md-11'>
           <div className='col-md-12 no-side-padding flex-vertical-center'>
             <OwnerButton {...concept} onClick={() => {}} />
             <span className='separator'>/</span>
-            <SourceButton label={concept.source} onClick={() => {}} />
+            <SourceButton label={concept.source} childURI={versionedObjectURL} />
             <span className='separator'>/</span>
             <ConceptButton label={concept.id} retired={isRetired} href={`#${versionedObjectURL}`} />
 

diff --git a/src/components/concepts/ConceptIcon.jsx b/src/components/concepts/ConceptIcon.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+  LocalOffer as LocalOfferIcon
+} from '@material-ui/icons';
+import { Tooltip } from '@material-ui/core';
+import { toFullAPIURL, copyURL } from '../../common/utils';
+
+const ConceptIcon = ({ url }) => {
+  const onIconClick = () => copyURL(toFullAPIURL(url))
+
+  return (
+    <div className='no-side-padding col-md-1 home-icon concept'>
+      <Tooltip title='Copy URL'>
+        <LocalOfferIcon onClick={onIconClick} />
+      </Tooltip>
+    </div>
+  );
+}
+
+export default ConceptIcon;
diff --git a/src/components/mappings/MappingHomeDetails.jsx b/src/components/mappings/MappingHomeDetails.jsx
@@ -3,10 +3,12 @@ import moment from 'moment';
 import {
   Accordion, AccordionSummary, AccordionDetails, Typography, Divider
 } from '@material-ui/core';
+import { get } from 'lodash';
 import { DATETIME_FORMAT } from '../../common/constants';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import FromConceptLabel from './FromConceptLabel';
 import ToConceptLabel from './ToConceptLabel';
+import CustomAttributesAccordian from '../common/CustomAttributesAccordian';
 
 const ACCORDIAN_HEADING_STYLES = {
   fontWeight: 'bold',
@@ -104,6 +106,11 @@ const MappingHomeDetails = ({ mapping }) => {
             </div>
           </AccordionDetails>
         </Accordion>
+        <CustomAttributesAccordian
+          attributes={get(mapping, 'extras', {})}
+          headingStyles={ACCORDIAN_HEADING_STYLES}
+          detailStyles={ACCORDIAN_DETAILS_STYLES}
+        />
       </div>
     </div>
   );

diff --git a/src/components/mappings/MappingHomeHeader.jsx b/src/components/mappings/MappingHomeHeader.jsx
@@ -1,9 +1,4 @@
 import React from 'react';
-import {
-  Link as LinkIcon,
-} from '@material-ui/icons';
-import { Tooltip } from '@material-ui/core';
-import { toFullAPIURL, copyURL } from '../../common/utils';
 import { DARKGRAY } from '../../common/constants';
 import OwnerButton from '../common/OwnerButton';
 import SourceButton from '../common/SourceButton';
@@ -13,6 +8,7 @@ import LastUpdatedOnLabel from '../common/LastUpdatedOnLabel';
 import ExternalIdLabel from '../common/ExternalIdLabel';
 import FromConceptLabel from './FromConceptLabel';
 import ToConceptLabel from './ToConceptLabel';
+import MappingIcon from './MappingIcon';
 
 const LABEL_STYLES = {
   textAlign: 'center', marginTop: '4px', fontSize: '12px', color: DARKGRAY
@@ -23,21 +19,16 @@ const MappingHomeHeader = ({
   mapping, isVersionedObject, versionedObjectURL, currentURL
 }) => {
   const isRetired = mapping.retired;
-  const onIconClick = () => copyURL(toFullAPIURL(currentURL))
 
   return (
     <header className='home-header col-md-12'>
       <div className='col-md-12 container' style={{paddingTop: '10px'}}>
-        <div className='no-side-padding col-md-1 home-icon concept'>
-          <Tooltip title='Copy URL'>
-            <LinkIcon onClick={onIconClick} />
-          </Tooltip>
-        </div>
+        <MappingIcon url={currentURL} />
         <div className='col-md-11'>
           <div className='col-md-12 no-side-padding flex-vertical-center'>
             <OwnerButton {...mapping} onClick={() => {}} />
             <span className='separator'>/</span>
-            <SourceButton label={mapping.source} onClick={() => {}} />
+            <SourceButton label={mapping.source} childURI={versionedObjectURL} />
             <span className='separator'>/</span>
             <MappingButton label={mapping.id} mapType={mapping.map_type} retired={isRetired} href={`#${versionedObjectURL}`} />
             {

diff --git a/src/components/mappings/MappingIcon.jsx b/src/components/mappings/MappingIcon.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+  Link as LinkIcon,
+} from '@material-ui/icons';
+import { Tooltip } from '@material-ui/core';
+import { toFullAPIURL, copyURL } from '../../common/utils';
+
+const MappingIcon = ({ url }) => {
+  const onIconClick = () => copyURL(toFullAPIURL(url))
+
+  return (
+    <div className='no-side-padding col-md-1 home-icon mapping'>
+      <Tooltip title='Copy URL'>
+        <LinkIcon onClick={onIconClick} />
+      </Tooltip>
+    </div>
+  );
+}
+
+export default MappingIcon;
diff --git a/src/components/search/ResultsTable.jsx b/src/components/search/ResultsTable.jsx
@@ -287,7 +287,7 @@ const ExpandibleRow = props => {
   }
 
   const onRowClick = event => {
-    if(includes(['concepts', 'mappings'], props.resource) && item.url) {
+    if(includes(['concepts', 'mappings', 'sources'], props.resource) && item.url) {
       event.stopPropagation();
       event.preventDefault()
       window.open('#' + item.url, '_blank')