Configure Hardcoded Upload Limits as Environment Variables

[dgomesbr]

Configure Hardcoded Upload Limits as Environment Variables

Issue Description

The PDF accessibility application currently has several hardcoded upload limits throughout the frontend codebase that should be configurable via environment variables or configuration parameters. This makes it difficult to adjust limits for different environments (development, staging, production) or user tiers without code changes.

Current Hardcoded Values

The following limits are currently hardcoded in multiple locations:

1. Number of File Uploads per User: 3

Locations:

• pdf_ui/src/MainApp.js:35 - const [maxFilesAllowed, setMaxFilesAllowed] = useState(3);
• pdf_ui/src/MainApp.js:107 - setMaxFilesAllowed(data.maxFilesAllowed ?? 3);
• pdf_ui/src/pages/LandingPage.jsx:513 - UI text: "Each user is limited to 3 PDF document uploads"
• pdf_ui/src/components/LeftNav.jsx:38 - UI text: "Each user is limited to 3 PDF document uploads"

2. Maximum Pages per Document: 10

Locations:

• pdf_ui/src/MainApp.js:36 - const [maxPagesAllowed, setMaxPagesAllowed] = useState(10);
• pdf_ui/src/MainApp.js:108 - setMaxPagesAllowed(data.maxPagesAllowed ?? 10);
• pdf_ui/src/pages/LandingPage.jsx:516 - UI text: "Documents cannot exceed 10 pages"
• pdf_ui/src/components/LeftNav.jsx:41 - UI text: "Documents cannot exceed 10 pages"
• pdf_ui/src/pages/LandingPage.jsx:199 - Cost example: "10 pages would cost approximately..."

3. Maximum File Size: 25 MB

Locations:

• pdf_ui/src/MainApp.js:37 - const [maxSizeAllowedMB, setMaxSizeAllowedMB] = useState(25);
• pdf_ui/src/MainApp.js:109 - setMaxSizeAllowedMB(data.maxSizeAllowedMB ?? 25);
• pdf_ui/src/pages/LandingPage.jsx:519 - UI text: "Documents must be smaller than 25 MB"
• pdf_ui/src/components/LeftNav.jsx:44 - UI text: "Documents must be smaller than 25 MB"

Proposed Solution

1. Environment Variables

Create environment variables for these limits:

REACT_APP_MAX_FILES_ALLOWED=3
REACT_APP_MAX_PAGES_ALLOWED=10
REACT_APP_MAX_SIZE_ALLOWED_MB=25

2. Configuration File

Alternatively, create a configuration file (e.g., src/config/limits.js):

export const DEFAULT_LIMITS = {
  maxFilesAllowed: process.env.REACT_APP_MAX_FILES_ALLOWED || 3,
  maxPagesAllowed: process.env.REACT_APP_MAX_PAGES_ALLOWED || 10,
  maxSizeAllowedMB: process.env.REACT_APP_MAX_SIZE_ALLOWED_MB || 25,
};

3. Dynamic UI Text

Update all UI text to use the configured values instead of hardcoded numbers:

// Instead of: "Each user is limited to 3 PDF document uploads"
// Use: `Each user is limited to ${maxFilesAllowed} PDF document uploads`

Benefits

1. Environment-specific Configuration: Different limits for dev/staging/production
2. User Tier Support: Easy to implement different limits for different user types
3. Maintenance: Single source of truth for limits
4. Deployment Flexibility: Change limits without code deployment
5. Testing: Easy to test with different limit configurations

Implementation Tasks

• Create environment variables for all three limits
• Update MainApp.js to use environment variables as defaults
• Create a centralized configuration file
• Update all UI text in LandingPage.jsx and LeftNav.jsx to be dynamic
• Update cost calculation example to use dynamic page limit
• Add documentation for new environment variables
• Test with different limit configurations

Priority

Medium - This would improve maintainability and deployment flexibility, especially as the application scales to support different user tiers or environments.

Labels

enhancement, configuration, frontend, maintainability