CSCFAIRMETA-990: Show remote object count in data tab (#775)

* Show remote object count in data tab * Open remote links in new tab * Fix "Go to the original source" not working
CSCfi · Mar 31, 2021 · ea2ef09 · ea2ef09
1 parent 7c860fb
commit ea2ef09
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/etsin_finder/frontend/js/components/dataset/data/common/iconButton.jsx b/etsin_finder/frontend/js/components/dataset/data/common/iconButton.jsx
@@ -21,8 +21,10 @@ const IconButton = ({
   ...props
 }) => {
   let as = null
+  let target
   if (link) {
     as = invert ? InvertedLink : Link
+    target = '_blank'
   } else if (invert) {
     as = InvertedButton
   }
@@ -36,7 +38,7 @@ const IconButton = ({
         showOnClick={!!tooltip}
         flexGrow={flexGrow}
       >
-        <StyledIconButton fill="white" as={as} href={href} {...props}>
+        <StyledIconButton fill="white" target={target} as={as} href={href} {...props}>
           <StyledIconButtonIcon icon={icon} spin={spin} fixedWidth />
           <IconButtonText fontSize={fontSize}>{children}</IconButtonText>
         </StyledIconButton>

diff --git a/etsin_finder/frontend/js/components/dataset/data/externalResources/index.jsx b/etsin_finder/frontend/js/components/dataset/data/externalResources/index.jsx
@@ -18,7 +18,7 @@ import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
 
 import buildColumns from '../../../../utils/buildColumns'
 import { useStores } from '../../../../stores/stores'
-import { Header, HeaderTitle, HeaderButton } from '../common/dataHeader'
+import { Header, HeaderTitle, HeaderStats, HeaderButton } from '../common/dataHeader'
 import ResourceItem from './resourceItem'
 
 const ExternalResources = () => {
@@ -34,9 +34,8 @@ const ExternalResources = () => {
     return null
   }
 
-  const accessUrls = new Set(
-    remote.map(resource => resource.access_url?.identifier).filter(v => v)
-  )
+  const totalCount = remote.length
+  const accessUrls = new Set(remote.map(resource => resource.access_url?.identifier).filter(v => v))
   const hasAccess = accessUrls.size > 0
   const hasCommonAccess = accessUrls.size === 1
   const hasDownload = !!remote.find(resource => resource.download_url?.identifier)
@@ -45,9 +44,19 @@ const ExternalResources = () => {
     <DataTable>
       <Header>
         <Translate component={HeaderTitle} content="dataset.dl.remote" />
+        <HeaderStats>
+          <Translate content="dataset.dl.objectCount" with={{ count: totalCount }} />
+        </HeaderStats>
 
         {hasCommonAccess && (
-          <Translate component={HeaderButton} icon={faExternalLinkAlt} invert color="darkgray">
+          <Translate
+            component={HeaderButton}
+            link
+            href={Array.from(accessUrls)[0]}
+            icon={faExternalLinkAlt}
+            invert
+            color="darkgray"
+          >
             <Translate content="dataset.dl.commonSource" />
             <Translate className="sr-only" content="dataset.dl.file_types.both" />
           </Translate>
@@ -89,7 +98,7 @@ export const Grid = styled.ul`
   grid-auto-rows: 1.5rem;
   align-items: center;
   gap: 0.5rem;
-  margin-top: 0.5rem;
+  margin-top: 1rem;
 `
 
 const DataTable = styled.div`

diff --git a/etsin_finder/frontend/locale/english.js b/etsin_finder/frontend/locale/english.js
@@ -144,6 +144,10 @@ const english = {
           cancel: 'Cancel',
         },
       },
+      objectCount: {
+        one: '1 object',
+        other: '%(count)s objects',
+      },
       fileCount: {
         one: '1 file',
         other: '%(count)s files',

diff --git a/etsin_finder/frontend/locale/finnish.js b/etsin_finder/frontend/locale/finnish.js
@@ -144,6 +144,10 @@ const finnish = {
           cancel: 'Peruuta',
         },
       },
+      objectCount: {
+        one: '1 object',
+        other: '%(count)s objects',
+      },
       fileCount: {
         one: '1 tiedosto',
         other: '%(count)s tiedostoa',