[TSPS-721] Add support for boolean input types (#5458)

Author: MatthewBemis

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

@@ -7,7 +7,7 @@ export interface Pipeline {
 
 export interface PipelineInput {
   name: string;
-  type: 'FILE' | 'STRING' | 'FLOAT';
+  type: 'FILE' | 'STRING' | 'FLOAT' | 'BOOLEAN';
   isRequired: boolean;
   displayName?: string;
   description?: string;

src/pages/scientificServices/pipelines/tabs/run/RunJob.test.tsx

@@ -116,6 +116,7 @@ describe('RunJob Component', () => {
     expect(screen.getByText('Enter minimum imputation quality for inclusion')).toBeInTheDocument();
     expect(screen.getByText(/Enter description/)).toBeInTheDocument();
     expect(screen.getByText('Select a multi-sample VCF file')).toBeInTheDocument();
+    expect(screen.getByText('Allow chunk failures')).toBeInTheDocument();
 
     // Wait for pipeline options to load
     await waitFor(() => {
@@ -162,6 +163,15 @@ describe('RunJob Component', () => {
     await user.type(descriptionTextArea, 'Test description for pipeline run');
 
     expect(descriptionTextArea).toHaveValue('Test description for pipeline run');
+
+    // Toggle allowChunkFailures
+    const allowChunkFailuresCheckbox = screen.getByLabelText('Allow chunk failures');
+    // initially assert unchecked because the default is false
+    expect(allowChunkFailuresCheckbox).not.toBeChecked();
+
+    await user.click(allowChunkFailuresCheckbox);
+
+    expect(allowChunkFailuresCheckbox).toBeChecked();
   });
 
   it('handles file selection and triggers upload process', async () => {

src/pages/scientificServices/pipelines/tabs/run/RunJob.tsx

@@ -16,6 +16,7 @@ import {
 } from 'src/pages/scientificServices/pipelines/common/scientific-services-common';
 import { usePipelinesList } from 'src/pages/scientificServices/pipelines/hooks/usePipelinesList';
 import { useUserQuota } from 'src/pages/scientificServices/pipelines/hooks/useUserQuota';
+import { PipelineBooleanInput } from 'src/pages/scientificServices/pipelines/tabs/run/inputs/PipelineBooleanInput';
 import {
   PipelineFileInput,
   PipelineInputFileUploadState,
@@ -280,6 +281,25 @@ export const RunJob = () => {
               {/* Displays optional run description */}
               {selectedPipeline && <PipelineRunDescription value={runDescription} onChange={setRunDescription} />}
 
+              {/* Displays all BOOLEAN inputs, one after another */}
+              {pipelineInputs
+                .filter((input) => input.type === 'BOOLEAN')
+                .map((input) => {
+                  return (
+                    <PipelineBooleanInput
+                      value={selectedUserInputs[input.name]}
+                      input={input}
+                      key={`${input.name}`}
+                      onChange={(value) => {
+                        setSelectedUserInputs((prev) => ({
+                          ...prev,
+                          [input.name]: value,
+                        }));
+                      }}
+                    />
+                  );
+                })}
+
               {/* Displays all FILE inputs, one after another */}
               {pipelineInputs
                 .filter((input) => input.type === 'FILE')
@@ -303,6 +323,7 @@ export const RunJob = () => {
                     />
                   );
                 })}
+
               {/* Submit button */}
               {!submittedJobId && quota && (
                 <>

src/pages/scientificServices/pipelines/tabs/run/inputs/PipelineBooleanInput.test.tsx

@@ -0,0 +1,99 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { PipelineInput } from 'src/libs/ajax/teaspoons/teaspoons-models';
+import { renderWithAppContexts as render } from 'src/testing/test-utils';
+
+import { PipelineBooleanInput } from './PipelineBooleanInput';
+
+describe('PipelineBooleanInput', () => {
+  const mockOnChange = jest.fn();
+
+  const basePipelineInput: PipelineInput = {
+    name: 'testInput',
+    displayName: 'Test Input',
+    description: 'This is a test input description',
+    type: 'BOOLEAN',
+    defaultValue: 'false',
+    isRequired: false,
+  };
+
+  it('renders with display name and description', () => {
+    render(<PipelineBooleanInput input={basePipelineInput} value={false} onChange={mockOnChange} />);
+
+    expect(screen.getByText('Test Input')).toBeInTheDocument();
+    expect(screen.getByText('This is a test input description')).toBeInTheDocument();
+  });
+
+  it('renders with input name when display name is not provided', () => {
+    const inputWithoutDisplayName = { ...basePipelineInput, displayName: undefined };
+    render(<PipelineBooleanInput input={inputWithoutDisplayName} value={false} onChange={mockOnChange} />);
+
+    expect(screen.getByText('testInput')).toBeInTheDocument();
+  });
+
+  it('renders required indicator when input is required', () => {
+    const requiredInput = { ...basePipelineInput, isRequired: true };
+    render(<PipelineBooleanInput input={requiredInput} value={false} onChange={mockOnChange} />);
+
+    const requiredIndicator = screen.getByText('*');
+    expect(requiredIndicator).toBeInTheDocument();
+    expect(requiredIndicator).toHaveStyle('color: rgb(219, 50, 20)'); // colors.danger()
+  });
+
+  it('does not render required indicator when input is not required', () => {
+    render(<PipelineBooleanInput input={basePipelineInput} value={false} onChange={mockOnChange} />);
+
+    expect(screen.queryByText('*')).not.toBeInTheDocument();
+  });
+
+  it('renders checkbox as unchecked when value is false', () => {
+    render(<PipelineBooleanInput input={basePipelineInput} value={false} onChange={mockOnChange} />);
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('renders checkbox as checked when value is true', () => {
+    render(<PipelineBooleanInput input={basePipelineInput} value onChange={mockOnChange} />);
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeChecked();
+  });
+
+  it('uses default value when value prop is undefined', () => {
+    const inputWithDefaultTrue = { ...basePipelineInput, defaultValue: 'true' };
+    render(<PipelineBooleanInput input={inputWithDefaultTrue} value={undefined as any} onChange={mockOnChange} />);
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeChecked();
+  });
+
+  it('falls back to false when both value and defaultValue are undefined', () => {
+    const inputWithoutDefault = { ...basePipelineInput, defaultValue: undefined };
+    render(<PipelineBooleanInput input={inputWithoutDefault} value={undefined as any} onChange={mockOnChange} />);
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('calls onChange when checkbox is clicked', async () => {
+    const user = userEvent.setup();
+    render(<PipelineBooleanInput input={basePipelineInput} value={false} onChange={mockOnChange} />);
+
+    const checkbox = screen.getByRole('checkbox');
+    await user.click(checkbox);
+
+    expect(mockOnChange).toHaveBeenCalledWith(true);
+  });
+
+  it('calls onChange with correct value when toggling from true to false', async () => {
+    const user = userEvent.setup();
+    render(<PipelineBooleanInput input={basePipelineInput} value onChange={mockOnChange} />);
+
+    const checkbox = screen.getByRole('checkbox');
+    await user.click(checkbox);
+
+    expect(mockOnChange).toHaveBeenCalledWith(false);
+  });
+});

src/pages/scientificServices/pipelines/tabs/run/inputs/PipelineBooleanInput.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { LabeledCheckbox } from 'src/components/common';
+import { PipelineInput } from 'src/libs/ajax/teaspoons/teaspoons-models';
+import colors from 'src/libs/colors';
+
+interface PipelineBooleanInputProps {
+  input: PipelineInput;
+  value: boolean;
+  onChange: (value: boolean) => void;
+}
+
+export const PipelineBooleanInput: React.FC<PipelineBooleanInputProps> = ({ input, value, onChange }) => {
+  const { name, displayName, description, defaultValue, isRequired } = input;
+
+  return (
+    <>
+      <div style={{ display: 'flex', alignItems: 'center', marginTop: '1.5rem' }}>
+        <LabeledCheckbox
+          checked={value ?? defaultValue ?? false}
+          width={400}
+          onChange={(e) => {
+            onChange(e);
+          }}
+        >
+          <div style={{ marginLeft: '0.5rem', fontWeight: 'bold', fontSize: 16 }}>
+            {displayName || name} {isRequired ? <span style={{ color: colors.danger() }}> *</span> : null}
+          </div>
+        </LabeledCheckbox>
+      </div>
+      {description && (
+        <div style={{ marginBottom: '1.5rem', marginTop: '0.5rem', fontStyle: 'italic', maxWidth: 500 }}>
+          {description}
+        </div>
+      )}
+    </>
+  );
+};

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

@@ -33,6 +33,13 @@ export function mockPipelineWithDetails(name: string): PipelineWithDetails {
         minValue: 0,
         maxValue: 1,
       },
+      {
+        name: 'allowChunkFailures',
+        displayName: 'Allow chunk failures',
+        description: 'If true, allow up to 10% chunk failure rate. Default false.',
+        type: 'BOOLEAN',
+        isRequired: false,
+      },
       {
         name: 'multiSampleVcf',
         displayName: 'multi-sample VCF file',

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

@@ -17,7 +17,13 @@ export async function preparePipelineRun(
   const jobId = crypto.randomUUID();
 
   const finalUserInputs = Object.entries(selectedUserInputs).reduce((acc, [key, value]) => {
-    acc[key] = value instanceof File ? value.name : value.trim();
+    if (typeof value === 'boolean') {
+      acc[key] = value;
+    } else if (value instanceof File) {
+      acc[key] = value.name;
+    } else {
+      acc[key] = value.trim();
+    }
     return acc;
   }, {} as Record<string, any>);