task/TUP-713: Show inactive allocations on active projects and distin…

…guish by 'status' (#450)

* Show inactive allocations on active projects and distinguish by 'status'

* formatting

* fix tests

---------

Co-authored-by: Wesley B <62723358+wesleyboar@users.noreply.github.com>

libs/tup-components/src/projects/ProjectsListing/ProjectsListingAllocationTable.tsx

@@ -11,7 +11,6 @@ export const ProjectsListingAllocationTable: React.FC<{
   project: ProjectsRawSystem;
 }> = ({ project }) => {
   const allocations = project.allocations || [];
-  const isActive = allocations.some((a) => a.status === 'Active');
 
   return (
     <table className={styles['allocations-table']}>
@@ -20,21 +19,20 @@ export const ProjectsListingAllocationTable: React.FC<{
           <th>Systems</th>
           <th>Awarded</th>
           <th>Used</th>
+          <th>Status</th>
           <th>Expires</th>
         </tr>
       </thead>
       <tbody>
-        {allocations
-          // Show expired allocations if the project is inactive.
-          .filter((a) => (isActive ? a.status === 'Active' : true))
-          .map((allocation) => (
-            <tr key={allocation.id}>
-              <td>{allocation.resource}</td>
-              <td>{allocation.total} SU</td>
-              <td>{allocation.used} SU</td>
-              <td>{formatDate(allocation.end)}</td>
-            </tr>
-          ))}
+        {allocations.map((allocation) => (
+          <tr key={allocation.id}>
+            <td>{allocation.resource}</td>
+            <td>{allocation.total} SU</td>
+            <td>{allocation.used} SU</td>
+            <td>{allocation.status ?? '-'}</td>
+            <td>{formatDate(allocation.end)}</td>
+          </tr>
+        ))}
       </tbody>
     </table>
   );

libs/tup-components/src/projects/details/ProjectDetails.test.tsx

@@ -17,7 +17,8 @@ describe('Project Details Component', () => {
     expect(columnHeaders[0].textContent).toEqual('Systems');
     expect(columnHeaders[1].textContent).toEqual('Awarded');
     expect(columnHeaders[2].textContent).toEqual('Used');
-    expect(columnHeaders[3].textContent).toEqual('Expires');
+    expect(columnHeaders[3].textContent).toEqual('Status');
+    expect(columnHeaders[4].textContent).toEqual('Expires');
     expect(getByText('Lonestar6')).toBeDefined();
     expect(getByText('10 SU')).toBeDefined();
     expect(getByText('0 SU')).toBeDefined();