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
techmatters · Mar 22, 2024 · 8d661ac · 8d661ac
1 parent 8c3b52c
commit 8d661ac
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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>