From c5f4cc45bb5216d906c04dab6eba87ad92642854 Mon Sep 17 00:00:00 2001
From: Avery Smith <avery@averysmith.pro>
Date: Tue, 2 Apr 2024 17:24:39 -0400
Subject: [PATCH] WCMS-19787 added modified date information to /data page
 (#182)

* WCMS-19787 added modified date information to /data page

* WCMS-19787 updated class attribute to className
added Modified Date info to DataSet component
updated DataSet data type

* WCMS-19787 removed accidentally added comma

* WCMS-19787 removed h1 bottom margin

* WCMS-19787 corrected typescript errors

* Remove extra margin

---------

Co-authored-by: Bethany Dunfield <bethany.dunfield@civicactions.com>
---
 .../useMetastoreDataset/useMetastoreDataset.tsx        |  3 ++-
 src/templates/Dataset/index.tsx                        | 10 ++++++++--
 .../FilteredResource/FilteredResourceBody.jsx          |  4 ++++
 src/types/dataset.ts                                   |  1 +
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/services/useMetastoreDataset/useMetastoreDataset.tsx b/src/services/useMetastoreDataset/useMetastoreDataset.tsx
index cac19a2c..271eacdb 100644
--- a/src/services/useMetastoreDataset/useMetastoreDataset.tsx
+++ b/src/services/useMetastoreDataset/useMetastoreDataset.tsx
@@ -10,6 +10,7 @@ const useMetastoreDataset = (datasetId : string, rootAPIUrl : string, additional
     error: '',
     description: '',
     identifier: '',
+    modified: '',
   } as DatasetType);
   const [id, setId] = useState(datasetId)
   const [rootUrl, setRootUrl] = useState(rootAPIUrl)
@@ -18,7 +19,7 @@ const useMetastoreDataset = (datasetId : string, rootAPIUrl : string, additional
     async function fetchData() {
       return axios.get(`${rootUrl}/metastore/schemas/dataset/items/${id}?show-reference-ids${additionalParamsString}`)
         .then((res) => setDataset(res.data))
-        .catch((error) => setDataset({title: dataset.title, distribution: dataset.distribution, error: error, description: dataset.description, identifier: dataset.identifier}));
+        .catch((error) => setDataset({title: dataset.title, distribution: dataset.distribution, error: error, description: dataset.description, identifier: dataset.identifier, modified: dataset.modified}));
     }
     fetchData();
   }, [id, rootUrl]);
diff --git a/src/templates/Dataset/index.tsx b/src/templates/Dataset/index.tsx
index e55dea36..a1866632 100644
--- a/src/templates/Dataset/index.tsx
+++ b/src/templates/Dataset/index.tsx
@@ -15,6 +15,7 @@ import DatasetOverview from '../../components/DatasetOverviewTab';
 import DatasetAPI from '../../components/DatasetAPITab';
 import DataDictionary from '../../components/DatasetDataDictionaryTab';
 import { DatasetDictionaryItemType, DatasetPageType, DatasetDictionaryType, DistributionType, ResourceType } from '../../types/dataset';
+import TransformedDate from '../../components/TransformedDate';
 import './dataset.scss';
 
 const getSiteWideDataDictionary = (rootUrl : string, dataDictionaryUrl : string) => {
@@ -134,9 +135,14 @@ const Dataset = ({
         <div className={'ds-l-container'}>
           <div className={'ds-l-row'}>
             <div className={'ds-l-md-col--9'}>
-              <h1 className={'ds-u-margin-bottom--4 ds-h1 title-underline'}>{title}</h1>
+              <h1 className={'ds-h1 title-underline'}>{title}</h1>
+            </div>
+            <div className={'ds-l-md-col--12 ds-u-color--gray ds-u-margin-y--1 ds-u-text-align--right'}>
+              <p className="ds-u-margin--0">Updated <TransformedDate date={dataset.modified} /></p>
+            </div>
+            <div className={'ds-l-md-col--9'}>
               <div className={'ds-u-measure--wide ds-u-margin-bottom--7'}>
-                <p className="dc-c-metadata-description" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(dataset.description) }}/>
+                <p className="dc-c-metadata-description ds-u-margin--0" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(dataset.description) }}/>
               </div>
             </div>
           </div>
diff --git a/src/templates/FilteredResource/FilteredResourceBody.jsx b/src/templates/FilteredResource/FilteredResourceBody.jsx
index 432359b4..e3201419 100644
--- a/src/templates/FilteredResource/FilteredResourceBody.jsx
+++ b/src/templates/FilteredResource/FilteredResourceBody.jsx
@@ -17,6 +17,7 @@ import ResourcePreview from '../../components/ResourcePreview';
 import ResourceFooter from '../../components/ResourceFooter';
 import { buildCustomColHeaders } from './functions';
 import QueryBuilder from './QueryBuilder';
+import TransformedDate from '../../components/TransformedDate';
 import 'swagger-ui-react/swagger-ui.css';
 
 const FilteredResourceBody = ({
@@ -84,6 +85,9 @@ const FilteredResourceBody = ({
             Back to {dataset.title}
           </Link>
           <h1 className="ds-title">{customTitle ? customTitle : pageTitle}</h1>
+          <div className="ds-l-row">
+            <span className="ds-l-col--12 ds-u-color--gray ds-u-margin-y--1 ds-u-text-align--right">Updated <TransformedDate date={dataset.modified} /></span>
+          </div>
           <p
             className="ds-u-margin-top--0 dc-c-metadata-description"
             dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(distribution.data.description) }}
diff --git a/src/types/dataset.ts b/src/types/dataset.ts
index 637dcbdc..8430f24b 100644
--- a/src/types/dataset.ts
+++ b/src/types/dataset.ts
@@ -21,6 +21,7 @@ export type DatasetType = {
   identifier: string,
   describedBy?: any, // TODO
   describedByType?: any, //TODO
+  modified: string,
 }
 
 export type ConditionType = {