Merge pull request #129 from GetDKAN/multiple-resources

Update downloads sidebar with dictionary and multiple resources

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "2.0.7",
+  "version": "2.1.0-alpha.4",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "dist/main.js",
   "source": "src/index.ts",

src/components/DatasetDownloads/datasetdownloads.test.jsx

@@ -3,15 +3,48 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import DatasetDownloads from './index';
 
+const dataDictionaryURLFixture = "https://test.com/file.pdf";
+const dataDictionaryTypeFixture = "application/pdf";
+const distributionsFixture = [
+  {identifier: "1", data: {downloadURL: "https://test.com/file.csv", format: "csv"}},
+  {identifier: "2", data: {downloadURL: "https://test.com/file.xlsx", format: "xlsx"}},
+];
+
+
 describe('<DatasetDownloads />', () => {
   test('Renders a download URL link and title', () => {
-    render(<DatasetDownloads downloadURL="http://dkan.com/download.csv" type="csv" />);
+    render(
+      <DatasetDownloads
+        dataDictionaryURL={dataDictionaryURLFixture}
+        dataDictionaryType={dataDictionaryTypeFixture}
+        distributions={distributionsFixture}
+      />
+    );
+    expect(screen.getByRole('heading', { name: 'Downloads' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: 'CSV Resource File' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: 'CSV Resource File' })).toHaveAttribute(
+      'href',
+      'https://test.com/file.csv'
+    );
+    expect(screen.getByRole('link', { name: 'XLSX Resource File' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: 'XLSX Resource File' })).toHaveAttribute(
+      'href',
+      'https://test.com/file.xlsx'
+    );
+  });
+  test('Renders a data dictionary link', () => {
+    render(
+      <DatasetDownloads
+        dataDictionaryURL={dataDictionaryURLFixture}
+        dataDictionaryType={dataDictionaryTypeFixture}
+        distributions={distributionsFixture}
+      />
+    );
     expect(screen.getByRole('heading', { name: 'Downloads' })).toBeTruthy();
-    //expect(screen.getByText('Dataset')).toBeTruthy();
-    expect(screen.getByRole('link', { name: 'Download this resource (csv)' })).toBeTruthy();
-    expect(screen.getByRole('link', { name: 'Download this resource (csv)' })).toHaveAttribute(
+    expect(screen.getByRole('link', { name: 'Data Dictionary (PDF)' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: 'Data Dictionary (PDF)' })).toHaveAttribute(
       'href',
-      'http://dkan.com/download.csv'
+      'https://test.com/file.pdf'
     );
   });
 });

src/components/DatasetDownloads/index.jsx

@@ -1,23 +1,64 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const DatasetDownloads = ({ downloadURL, type }) => {
+const DatasetDownloads = ({ dataDictionaryURL, dataDictionaryType, distributions }) => {
+  function trimDataDictionaryType() {
+    let splitDataDictionaryType = dataDictionaryType.split('/');
+    let type = splitDataDictionaryType.length > 1 ? splitDataDictionaryType[1] : splitDataDictionaryType[0];
+    return type.toUpperCase()
+  }
+
+  function getFormatType(dist) {
+    if(dist.data.format) {
+      return dist.data.format.toUpperCase()
+    }
+    if(dist.data.mediaType) {
+      const mediaType = dist.data.mediaType.split('/');
+      if (mediaType.length && mediaType[1]) {
+        return mediaType[1].toUpperCase();
+      }
+    }
+    if(dist.data["%Ref:downloadURL"].length && dist.data["%Ref:downloadURL"][0].data) {
+      if(dist.data["%Ref:downloadURL"][0].data.mimeType) {
+        const mimeType = dist.data["%Ref:downloadURL"][0].data.mimeType.split("/");
+        if (mimeType.length && mimeType[1]) {
+          return mimeType[1].toUpperCase();
+        }
+      }
+    }
+    return '';
+  }
+
   return (
-    <div className="ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border ds-u-border--1">
+    <div className="ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border ds-u-border--1 dc-c-dataset-downloads">
       <h2 className="ds-u-color--primary ds-u-font-size--h3 ds-u-margin-top--0 ds-u-margin-bottom--2 ds-u-padding-bottom--2 ds-u-border ds-u-border-bottom--1">
         Downloads
       </h2>
-      <p className="ds-u-margin-bottom--1 ds-u-color--gray">Resource</p>
-      <a href={downloadURL} className="ds-u-word-break">
-        Download this resource ({type})
-      </a>
+      {(distributions.length || (dataDictionaryURL && dataDictionaryType)) &&
+       <ul className="ds-c-list ds-c-list--bare">
+         {
+          distributions.map((dist) => (
+            <li className="ds-u-padding-bottom--1" key={dist.identifier}>
+              <a href={dist.data.downloadURL} className="ds-u-word-break">
+                {getFormatType(dist)}
+                {' '}
+                Resource File
+              </a>
+            </li>
+          ))
+         }
+         {(dataDictionaryURL && dataDictionaryType) &&
+            <li>
+              <a href={dataDictionaryURL}>
+                Data Dictionary ({trimDataDictionaryType()})
+              </a>
+            </li>
+         }
+       </ul>
+      }
     </div>
   );
 };
 
-DatasetDownloads.propTypes = {
-  downloadURL: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-};
 
 export default DatasetDownloads;

src/templates/Dataset/DatasetBody.jsx

@@ -148,7 +148,11 @@ const DatasetBody = ({
         </div>
         <div className="ds-l-md-col--3 ds-l-sm-col--12">
           {Object.keys(distribution).length ? (
-            <DatasetDownloads downloadURL={distribution.data.downloadURL} type={fileFormat} />
+            <DatasetDownloads
+              dataDictionaryURL={dataset.describedBy}
+              dataDictionaryType={dataset.describedByType}
+              distributions={dataset.distribution}
+            />
           ) : (
             ''
           )}