[TSPS-704] Uses outputExpirationDate for Deletion Date in Job History page (#5451)

Author: salonishah11

src/libs/ajax/teaspoons/teaspoons-models.ts

@@ -66,6 +66,7 @@ export interface PipelineRun {
   timeSubmitted: string;
   timeCompleted?: string;
   quotaConsumed?: number;
+  outputExpirationDate?: string;
 }
 
 export interface GetPipelineRunsResponse {

src/pages/scientificServices/pipelines/utils/mock-utils.ts

@@ -98,5 +98,7 @@ export function mockPipelineRun(status: PipelineRunStatus): PipelineRun {
     timeSubmitted: '2023-10-01T00:00:00Z',
     timeCompleted: status === 'SUCCEEDED' || status === 'FAILED' ? new Date().toISOString() : undefined,
     quotaConsumed: status === 'SUCCEEDED' ? 500 : undefined,
+    outputExpirationDate:
+      status === 'SUCCEEDED' ? new Date(Date.now() + 14 * 24 * 60 * 60 * 1000).toISOString() : undefined, // job outputs expire in 14 days
   };
 }

src/pages/scientificServices/pipelines/views/JobHistory.test.tsx

@@ -1,4 +1,5 @@
-import { screen, waitFor } from '@testing-library/react';
+import { formatDatetime } from '@terra-ui-packages/core-utils';
+import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Teaspoons, TeaspoonsContract } from 'src/libs/ajax/teaspoons/Teaspoons';
@@ -174,6 +175,7 @@ describe('job history table', () => {
       ...mockPipelineRun('SUCCEEDED'),
       timeSubmitted: fifteenDaysAgo,
       timeCompleted: fifteenDaysAgo,
+      outputExpirationDate: new Date(Date.now()).toISOString(),
     };
     const pipelineRuns = [pipelineRun];
 
@@ -195,9 +197,21 @@ describe('job history table', () => {
       expect(screen.getAllByText(pipelineRun.jobId)).toHaveLength(2);
     });
 
-    const viewOutputsButton = screen.getByText('View Outputs');
+    const table = screen.getByRole('table');
+    const rows = within(table).getAllByRole('row');
+    const dataRow = within(rows[1]).getAllByRole('cell');
+
+    const viewOutputsButton = within(dataRow[7]).getByText('View Outputs');
     expect(viewOutputsButton).toBeInTheDocument();
     expect(viewOutputsButton).toBeDisabled();
+
+    const user = userEvent.setup();
+    await user.hover(viewOutputsButton);
+
+    const tooltip = await within(dataRow[7]).findByText(
+      'The outputs for this job have been deleted. Outputs are available for 14 days after job completion.'
+    );
+    expect(tooltip).toBeInTheDocument();
   });
 
   it('shows View Error button for FAILED jobs', async () => {
@@ -462,6 +476,41 @@ describe('job history table', () => {
       const pipelineRun = {
         ...mockPipelineRun('SUCCEEDED'),
         timeCompleted: '2023-10-15T14:00:00Z',
+        outputExpirationDate: '2023-10-29T14:00:00Z',
+      };
+      const pipelineRuns = [pipelineRun];
+
+      const mockPipelineRunResponse = {
+        pageToken: null,
+        results: pipelineRuns,
+        totalResults: 1,
+      };
+
+      asMockedFn(Teaspoons).mockReturnValue(
+        partial<TeaspoonsContract>({
+          getAllPipelineRuns: jest.fn().mockReturnValue(mockPipelineRunResponse),
+        })
+      );
+
+      render(<JobHistory />);
+
+      await waitFor(() => {
+        expect(screen.getAllByText(pipelineRun.jobId)).toHaveLength(2);
+      });
+
+      const table = screen.getByRole('table');
+      const rows = within(table).getAllByRole('row');
+      const cells = within(rows[1]).getAllByRole('cell');
+      expect(cells[5]).toHaveTextContent('Oct 29, 2023');
+    });
+
+    it('displays the deletion date in red for job outputs expiring within 3 days', async () => {
+      const twoDaysFromNow = new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString();
+      const twelveDaysAgo = new Date(Date.now() - 12 * 24 * 60 * 60 * 1000).toISOString();
+      const pipelineRun = {
+        ...mockPipelineRun('SUCCEEDED'),
+        timeCompleted: twelveDaysAgo,
+        outputExpirationDate: twoDaysFromNow,
       };
       const pipelineRuns = [pipelineRun];
 
@@ -483,7 +532,15 @@ describe('job history table', () => {
         expect(screen.getAllByText(pipelineRun.jobId)).toHaveLength(2);
       });
 
-      expect(screen.getByText('Oct 15, 2023')).toBeInTheDocument();
+      const table = screen.getByRole('table');
+      const rows = within(table).getAllByRole('row');
+      const cells = within(rows[1]).getAllByRole('cell');
+      expect(cells[5]).toHaveTextContent(formatDatetime(twoDaysFromNow));
+
+      // assert the date text is in red
+      const deletionDateDiv = within(cells[5]).getByText(formatDatetime(twoDaysFromNow)).parentElement!;
+      const style = window.getComputedStyle(deletionDateDiv);
+      expect(style.color).toBe('rgb(219, 50, 20)');
     });
   });
 });

src/pages/scientificServices/pipelines/views/JobHistory.tsx

@@ -284,13 +284,11 @@ const CompletedCell = ({ pipelineRun }: CellProps): ReactNode => {
 };
 
 const DataDeletionDateCell = ({ pipelineRun }: CellProps): ReactNode => {
-  if (!pipelineRun.timeCompleted || !(pipelineRun.status === 'SUCCEEDED')) {
+  if (!pipelineRun.outputExpirationDate || !(pipelineRun.status === 'SUCCEEDED')) {
     return <div>N/A</div>;
   }
 
-  const completionDate = new Date(pipelineRun?.timeCompleted);
-  const deletionDate = new Date(completionDate);
-  deletionDate.setDate(deletionDate.getDate() + TEASPOONS_FILE_OUTPUT_TTL_DAYS);
+  const deletionDate = new Date(pipelineRun?.outputExpirationDate);
 
   const today = new Date();
   const threeDaysFromNow = new Date();
@@ -339,9 +337,12 @@ const ActionCell = ({ pipelineRun }: CellProps): ReactNode => {
     return <ViewErrorModal pipelineRun={pipelineRun} onDismiss={errorModal.close} />;
   });
 
-  const jobOutputsDeleted =
+  // `!!` converts the expression to a boolean
+  const jobOutputsDeleted = !!(
     pipelineRun.status === 'SUCCEEDED' &&
-    (hoursElapsedSinceCompletion(pipelineRun) ?? -1) > 24 * TEASPOONS_FILE_OUTPUT_TTL_DAYS; // 24 hours * 14 days
+    pipelineRun.outputExpirationDate &&
+    new Date() >= new Date(pipelineRun.outputExpirationDate)
+  );
 
   return (
     <div>
@@ -505,12 +506,3 @@ const hoursElapsedSinceSubmission = (pipelineRun: PipelineRun): number => {
   const currentTime = new Date();
   return (currentTime.getTime() - submittedTime.getTime()) / (1000 * 60 * 60);
 };
-
-const hoursElapsedSinceCompletion = (pipelineRun: PipelineRun): number | undefined => {
-  if (!pipelineRun.timeCompleted) {
-    return undefined;
-  }
-  const completedTime = new Date(pipelineRun.timeCompleted);
-  const currentTime = new Date();
-  return (currentTime.getTime() - completedTime.getTime()) / (1000 * 60 * 60);
-};