[TSPS-645] Improve error handling when submitting Teaspoons jobs (#5439)

Author: MatthewBemis

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

@@ -3,8 +3,13 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Teaspoons, TeaspoonsContract } from 'src/libs/ajax/teaspoons/Teaspoons';
 import { Pipeline, PipelineInput, PipelineList, PipelineWithDetails } from 'src/libs/ajax/teaspoons/teaspoons-models';
+import { notify } from 'src/libs/notifications';
 import { mockUserPipelineQuotaDetails } from 'src/pages/scientificServices/pipelines/utils/mock-utils';
-import { preparePipelineRun } from 'src/pages/scientificServices/pipelines/utils/submission-utils';
+import {
+  preparePipelineRun,
+  startPipelineRun,
+  uploadPipelineFiles,
+} from 'src/pages/scientificServices/pipelines/utils/submission-utils';
 import { asMockedFn, partial, renderWithAppContexts as render } from 'src/testing/test-utils';
 
 import { RunJob } from './RunJob';
@@ -19,6 +24,11 @@ jest.mock('src/libs/nav', () => ({
   getLink: jest.fn(() => '/'),
 }));
 
+jest.mock('src/libs/notifications', () => ({
+  ...jest.requireActual('src/libs/notifications'),
+  notify: jest.fn(),
+}));
+
 jest.mock('src/pages/scientificServices/pipelines/utils/submission-utils', () => ({
   ...jest.requireActual('src/pages/scientificServices/pipelines/utils/submission-utils'),
   preparePipelineRun: jest.fn(),
@@ -340,6 +350,112 @@ describe('RunJob Component', () => {
       expect.any(String)
     );
   });
+
+  it('handles error when preparePipelineRun fails', async () => {
+    const mockError = new Error('Failed to prepare pipeline');
+    asMockedFn(preparePipelineRun).mockRejectedValue(mockError);
+
+    const user = userEvent.setup();
+    render(<RunJob />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Submit')).toBeInTheDocument();
+    });
+
+    // Fill in required fields
+    const outputPrefixInput = screen.getByLabelText('outputBasename text input');
+    await user.type(outputPrefixInput, 'test_output');
+
+    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const file = new File(['test'], 'test.vcf.gz', { type: 'text/plain' });
+    await waitFor(() => userEvent.upload(fileInput, file));
+
+    const submitButton = screen.getByText('Submit');
+    await waitFor(() => user.click(submitButton));
+
+    await waitFor(() => {
+      expect(notify).toHaveBeenCalledWith('error', 'Error: Failed to prepare pipeline');
+    });
+
+    // Verify submit button is re-enabled after error
+    expect(submitButton).not.toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('handles error when uploadPipelineFiles fails', async () => {
+    asMockedFn(preparePipelineRun).mockResolvedValue({
+      jobId: 'mock-job-id',
+      fileInputUploadUrls: {
+        multiSampleVcf: { signedUrl: 'https://mock-signed-url.com/upload' },
+      },
+    });
+
+    const mockError = new Error('Upload failed :(');
+    asMockedFn(uploadPipelineFiles).mockRejectedValue(mockError);
+
+    const user = userEvent.setup();
+    render(<RunJob />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Submit')).toBeInTheDocument();
+    });
+
+    // Fill in required fields
+    const outputPrefixInput = screen.getByLabelText('outputBasename text input');
+    await user.type(outputPrefixInput, 'test_output');
+
+    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const file = new File(['test'], 'test.vcf.gz', { type: 'text/plain' });
+    await waitFor(() => userEvent.upload(fileInput, file));
+
+    const submitButton = screen.getByText('Submit');
+    await waitFor(() => user.click(submitButton));
+
+    await waitFor(() => {
+      expect(notify).toHaveBeenCalledWith('error', 'Error: Upload failed :(');
+    });
+
+    // Verify submit button is re-enabled after error
+    expect(submitButton).not.toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('handles error when startPipelineRun fails', async () => {
+    asMockedFn(preparePipelineRun).mockResolvedValue({
+      jobId: 'mock-job-id',
+      fileInputUploadUrls: {
+        multiSampleVcf: { signedUrl: 'https://mock-signed-url.com/upload' },
+      },
+    });
+
+    asMockedFn(uploadPipelineFiles).mockResolvedValue(undefined);
+
+    const mockError = new Error('Failed to start run');
+    asMockedFn(startPipelineRun).mockRejectedValue(mockError);
+
+    const user = userEvent.setup();
+    render(<RunJob />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Submit')).toBeInTheDocument();
+    });
+
+    // Fill in required fields
+    const outputPrefixInput = screen.getByLabelText('outputBasename text input');
+    await user.type(outputPrefixInput, 'test_output');
+
+    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const file = new File(['test'], 'test.vcf.gz', { type: 'text/plain' });
+    await waitFor(() => userEvent.upload(fileInput, file));
+
+    const submitButton = screen.getByText('Submit');
+    await waitFor(() => user.click(submitButton));
+
+    await waitFor(() => {
+      expect(notify).toHaveBeenCalledWith('error', 'Error: Failed to start run');
+    });
+
+    // Verify submit button is re-enabled after error
+    expect(submitButton).not.toHaveAttribute('aria-disabled', 'true');
+  });
 });
 
 describe('uploadPipelineFiles function', () => {

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

@@ -99,6 +99,12 @@ export const RunJob = () => {
     setIsSubmitting(false);
   }
 
+  const handlePipelineSubmissionError = (error: unknown, fallbackMessage: string) => {
+    const errorMessage = error instanceof Error ? error.message : fallbackMessage;
+    notify('error', `Error: ${errorMessage}`);
+    setIsSubmitting(false);
+  };
+
   useEffect(() => {
     // Clear selected user inputs when pipeline inputs change
     resetSelectedUserInputs();
@@ -136,18 +142,14 @@ export const RunJob = () => {
 
   const handleSubmit = async () => {
     if (!selectedPipeline) {
-      notify('error', 'Missing required fields');
+      // This should not happen as the submit button is disabled when no pipeline is selected,
+      // but it's helpful as a type-guard here since Typescript obviously can't infer that
+      notify('error', 'Please select a pipeline before submitting.');
       return;
     }
 
-    const pipeline = pipelinesList?.find((pipeline) => pipeline?.pipelineVersion === selectedPipeline?.pipelineVersion);
-    const pipelineName = pipeline?.pipelineName;
-
-    // Only proceed if we have a valid pipeline name
-    if (!pipelineName) {
-      notify('error', 'No pipeline selected or pipeline name not found');
-      return;
-    }
+    const pipelineName = selectedPipeline.pipelineName;
+    const pipelineVersion = selectedPipeline.pipelineVersion;
 
     // Filter out empty string inputs to avoid sending them to the backend.
     // At this point we've already validated required inputs are filled, so this
@@ -158,35 +160,48 @@ export const RunJob = () => {
 
     setIsSubmitting(true);
 
-    const { jobId: preparedJobId, fileInputUploadUrls } = await preparePipelineRun(
-      pipelineName,
-      selectedPipeline.pipelineVersion,
-      filteredUserInputs,
-      runDescription
-    );
+    let preparedJobId: string;
+    let fileInputUploadUrls: Record<string, { signedUrl: string }>;
 
-    setPreparedJobId(preparedJobId);
+    // Prepare pipeline run
+    try {
+      const result = await preparePipelineRun(pipelineName, pipelineVersion, filteredUserInputs, runDescription);
+      preparedJobId = result.jobId;
+      fileInputUploadUrls = result.fileInputUploadUrls;
+      setPreparedJobId(preparedJobId);
+    } catch (error) {
+      handlePipelineSubmissionError(error, 'Failed to prepare pipeline run');
+      return;
+    }
 
+    // Upload pipeline input files
     try {
       await uploadPipelineFiles(
         pipelineName,
-        selectedPipeline.pipelineVersion,
+        pipelineVersion,
         pipelineInputs,
         filteredUserInputs,
         fileInputUploadUrls,
         setUploadState
       );
+    } catch (error) {
+      handlePipelineSubmissionError(error, 'File upload failed');
+      return;
+    }
 
+    // Submit the pipeline run
+    try {
       await onUploadComplete(preparedJobId);
     } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : '';
-      console.error(errorMessage);
-    } finally {
-      Metrics().captureEvent(Events.teaspoons.submitJob, {
-        pipelineName,
-        pipelineVersion: selectedPipeline.pipelineVersion,
-      });
+      handlePipelineSubmissionError(error, 'Failed to start pipeline run');
+      return;
     }
+
+    setIsSubmitting(false);
+    Metrics().captureEvent(Events.teaspoons.submitJob, {
+      pipelineName,
+      pipelineVersion,
+    });
   };
 
   return (