From 8d661ac42ea4bdf588ab5f7defafccc815d7208f Mon Sep 17 00:00:00 2001
From: Carissa Knipe <carissa@techmatters.org>
Date: Fri, 22 Mar 2024 13:42:19 -0700
Subject: [PATCH] feat: Add file extension type column to shared data card for
 files (#1660)

* feat: Add the file type to shared files info as a column in a nested grid.

* feat: remove nested grid and just shrink the space used for the title in order to accomodate the file type column

* docs: remove comments that were just notes to self

* fix: move uppercasing text to the view layer. This also fixes failing tests.

* test: add expectation of a file name and its extension type
---
 .../components/LandscapeView.test.js          |  4 +++
 .../components/SharedDataEntryBase.js         | 29 ++++++++++++++-----
 .../components/SharedDataEntryFile.js         |  3 +-
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/landscape/components/LandscapeView.test.js b/src/landscape/components/LandscapeView.test.js
index b6e6a1c0d..a64d9ec5a 100644
--- a/src/landscape/components/LandscapeView.test.js
+++ b/src/landscape/components/LandscapeView.test.js
@@ -122,6 +122,7 @@ const baseViewTest = async (
             description: `Description ${index}`,
             size: 3456,
             entryType: 'FILE',
+            resourceType: 'txt',
             visualizations: { edges: [] },
           },
         },
@@ -233,6 +234,9 @@ test('LandscapeView: Display data', async () => {
   const entriesList = within(sharedDataRegion.getByRole('list'));
   const items = entriesList.getAllByRole('listitem');
   expect(items.length).toBe(6);
+  const firstEntry = within(items[0]);
+  expect(firstEntry.getByText('Data Entry 0')).toBeInTheDocument();
+  expect(firstEntry.getByText('txt')).toBeInTheDocument();
 
   // Boundary
   expect(
diff --git a/src/sharedData/components/SharedDataEntryBase.js b/src/sharedData/components/SharedDataEntryBase.js
index 252da524d..2ca31effe 100644
--- a/src/sharedData/components/SharedDataEntryBase.js
+++ b/src/sharedData/components/SharedDataEntryBase.js
@@ -54,7 +54,8 @@ const SharedDataEntryBase = props => {
     EntryTypeIcon,
     DownloadComponent,
     ShareComponent,
-    info,
+    fileSize,
+    resourceType,
     deleteTooltip,
   } = props;
   const [isEditingName, setIsEditingName] = useState(false);
@@ -173,7 +174,7 @@ const SharedDataEntryBase = props => {
         <Grid
           item
           xs={isEditingName ? 12 : 8}
-          md={6}
+          md={5}
           order={{ xs: 2, md: 2 }}
           component={StackRow}
         >
@@ -203,26 +204,38 @@ const SharedDataEntryBase = props => {
             />
           </Restricted>
         </Grid>
-        <Grid item xs={1} order={{ xs: 5 }} display={{ md: 'none' }} />
+
+        <Grid item xs={1} order={{ xs: 4 }} display={{ md: 'none' }} />
         <Grid
           item
-          xs={11}
+          xs={2}
           md={1}
-          order={{ xs: 6, md: 4 }}
+          order={{ xs: 5, md: 4 }}
+          sx={{ wordWrap: 'break-word', textTransform: 'uppercase' }}
+        >
+          {resourceType}
+        </Grid>
+        <Grid
+          item
+          xs={2}
+          md={1}
+          order={{ xs: 6, md: 5 }}
           sx={{ wordWrap: 'break-word' }}
         >
-          {info}
+          {fileSize}
         </Grid>
+        <Grid item xs={7} order={{ xs: 7 }} display={{ md: 'none' }} />
         <Grid item xs={1} order={{ xs: 7 }} display={{ md: 'none' }} />
-        <Grid item xs={11} md={3} order={{ xs: 8, md: 4 }}>
+        <Grid item xs={11} md={3} order={{ xs: 8, md: 6 }}>
           {formatDate(i18n.resolvedLanguage, dataEntry.createdAt)}, by{' '}
           {t('user.full_name', { user: dataEntry.createdBy })}
         </Grid>
+
         <Grid
           item
           xs={4}
           md={2}
-          order={{ xs: 3, md: 4 }}
+          order={{ xs: 3, md: 6 }}
           component={StackRow}
           justifyContent="flex-end"
           display={isEditingName ? 'none' : 'inherit'}
diff --git a/src/sharedData/components/SharedDataEntryFile.js b/src/sharedData/components/SharedDataEntryFile.js
index 4afbc330a..e00455d4f 100644
--- a/src/sharedData/components/SharedDataEntryFile.js
+++ b/src/sharedData/components/SharedDataEntryFile.js
@@ -362,7 +362,8 @@ const SharedDataEntryFile = props => {
       EntryTypeIcon={SharedFileIcon}
       DownloadComponent={DownloadComponent}
       ShareComponent={ShareComponent}
-      info={filesize(sharedResource.dataEntry.size, { round: 0 })}
+      fileSize={filesize(sharedResource.dataEntry.size, { round: 0 })}
+      resourceType={sharedResource.dataEntry.resourceType}
     >
       <Visualizations file={sharedResource.dataEntry} />
     </SharedDataEntryBase>