Add Validation Tab with File Upload

Start by reviewing Issue #8 and the existing IOneRosterValidator, then inspect FilesController.cs, App.tsx, and the planned TabNavigation.tsx, FileUpload.tsx, and ValidationResults.tsx components. Work through the backend and frontend phases, using the listed upload, validation, cleanup, and responsive-design tests as checkpoints. Done means users can upload valid ZIP files, see validation results, and receive secure handling for invalid or oversized files.

Overview

Add a new "Validation" tab to the frontend that allows users to upload OneRoster.zip files and receive validation results from the OneRoster validator.

Background

The current frontend is a single-page download landing page with no navigation or upload capabilities. This feature adds a tabbed interface with a file upload/validation view, enabling users to validate their own OneRoster files against the OneRoster 1.1 specification.

Requirements

Frontend

1. Tab Navigation:

   • Add tab navigation with "Download" and "Validation" tabs
   • Default to "Download" tab (existing functionality)
   • Visual tab indicators matching existing design language

2. Validation Tab UI:

   • File upload area (drag-and-drop + click to browse)
   • Accept only .zip files
   • File size limit indicator (e.g., max 15MB)
   • Upload progress indicator
   • Validation results display area

3. Validation Results Display:

   • Show validation status (Valid/Invalid)
   • List errors with clear formatting
   • List warnings with clear formatting
   • Timestamp of validation
   • Option to validate another file

4. Responsive Design:

   • Works on mobile and desktop
   • Matches existing glassmorphism design system

Backend

1. New API Endpoint:

   • POST /api/files/validate - Accepts file upload, returns validation results
   • Accepts multipart/form-data with .zip files only
   • Returns JSON with isValid, errors, warnings, validatedAt

2. File Handling:

   • Temporary storage for uploaded files (cleanup after validation)
   • File size validation (max 15MB)
   • ZIP file validation before processing

3. Security:

   • File type validation (only .zip)
   • File size limits
   • No persistent storage of uploaded files
   • Cleanup of temporary files after validation

Technical Design

Frontend Components

1. Tab Navigation

// New component: src/components/TabNavigation.tsx
interface Tab {
  id: string;
  label: string;
}

const tabs: Tab[] = [
  { id: 'download', label: 'Download' },
  { id: 'validation', label: 'Validation' }
];

2. File Upload Component

// New component: src/components/FileUpload.tsx
interface FileUploadProps {
  onFileSelect: (file: File) => void;
  isUploading: boolean;
  accept?: string;
}

3. Validation Results Component

// New component: src/components/ValidationResults.tsx
interface ValidationResult {
  isValid: boolean;
  errors: string[];
  warnings: string[];
  validatedAt: string;
}

Backend Changes

1. New Controller Endpoint

// FilesController.cs
[HttpPost("validate")]
[ValidateAntiForgeryToken]
public async Task<IActionResult> ValidateOneRosterFile(IFormFile file)
{
    // Validate file type and size
    // Save to temporary location
    // Run validation
    // Return results
    // Cleanup temporary file
}

2. Validation Service Integration

• Use existing IOneRosterValidator from Issue #8
• Add file upload handling logic
• Add temporary file management

Data Flow

User selects file → Frontend validates type/size → 
POST /api/files/validate → Backend saves temp file → 
Run validation checks → Return JSON results → 
Cleanup temp file → Display results to user

Implementation Steps

Phase 1: Backend (Issue #8 dependency)

1. Ensure IOneRosterValidator is implemented (from Issue #8)
2. Add file upload endpoint to FilesController
3. Add temporary file management service
4. Add file type/size validation
5. Write unit tests for upload endpoint

Phase 2: Frontend - Tab Navigation

1. Add tab navigation component
2. Refactor App.tsx to use tabbed layout
3. Move existing download content to "Download" tab
4. Add tab state management

Phase 3: Frontend - Validation Tab

1. Create file upload component with drag-and-drop
2. Create validation results display component
3. Add API integration for file upload
4. Add loading states and error handling
5. Add responsive styling

Phase 4: Integration & Testing

1. Test file upload flow end-to-end
2. Test validation results display
3. Test responsive design
4. Test error scenarios (invalid files, large files, etc.)

Testing Strategy

Frontend Tests

• Component rendering tests
• File upload interaction tests
• API integration tests
• Responsive design tests

Backend Tests

• File upload endpoint tests
• File type validation tests
• File size validation tests
• Temporary file cleanup tests

Success Criteria

• Users can switch between Download and Validation tabs
• Users can upload .zip files via drag-and-drop or file picker
• Validation results display correctly with errors and warnings
• File upload is secure (type checking, size limits)
• Temporary files are cleaned up after validation
• UI matches existing design language
• Responsive on mobile and desktop

Dependencies

• Issue #8: OneRoster Validator API endpoint
• Existing IOneRosterValidator service

Related Issues

• Issue #8: Add OneRoster Validator Feature (API endpoint)