Fix TypeScript compilation errors across codebase

[remyluslosius]

Background

TypeScript compilation is currently failing in CI with approximately 20+ errors across multiple files. These are pre-existing issues that accumulated over time and are now blocking CI pipeline success.

Current Impact

• ❌ Frontend CI failing
• ❌ TypeScript Code Quality checks failing
• ⚠️ Development experience degraded (type safety not working)
• ✅ Application still functions correctly (runtime not affected)

Issues Identified

1. Missing Redux Actions

Files affected: RulesExplorer.tsx

error TS2304: Cannot find name 'fetchRules'
error TS2304: Cannot find name 'fetchRuleDetails'
error TS2304: Cannot find name 'fetchRuleDependencies'
error TS2304: Cannot find name 'exportRules'

Root Cause: Redux slice actions not properly imported or defined

2. SearchRequest Interface Incomplete

Files affected: ruleService.ts

error TS2339: Property 'platform' does not exist on type 'SearchRequest'
error TS2339: Property 'severity' does not exist on type 'SearchRequest'
error TS2339: Property 'category' does not exist on type 'SearchRequest'
error TS2339: Property 'framework' does not exist on type 'SearchRequest'

Root Cause: SearchRequest interface definition missing filter properties

3. Type Mismatches in Components

Files affected: ScanProgressDialog.tsx, AddHost.tsx, RulesExplorer.tsx

error TS7009: 'new' expression, whose target lacks a construct signature
error TS2322: Type incompatibility between component props
error TS2345: Argument type mismatch

Root Cause: Component props and state types not properly aligned

4. Auth Headers Type Issue

Files affected: useAuthHeaders.ts

error TS2411: Property 'Authorization' of type 'string | undefined' is not assignable to 'string' index type

Root Cause: Optional Authorization header not handled correctly in type definition

Recommended Fix Approach

Phase 1: Critical Types (Priority: High)

1. Fix Redux action imports in RulesExplorer
2. Complete SearchRequest interface definition
3. Fix useAuthHeaders type safety

Estimated Effort: 2-3 hours

Phase 2: Component Type Fixes (Priority: Medium)

1. Fix ScanProgressDialog constructor types
2. Fix AddHost RadioGroup props
3. Fix RulesExplorer action button types

Estimated Effort: 3-4 hours

Phase 3: Comprehensive Type Safety (Priority: Low)

1. Enable strict TypeScript mode
2. Add missing type definitions
3. Fix all remaining type errors

Estimated Effort: 1-2 days

Files Requiring Attention

• frontend/src/components/rules/RulesExplorer.tsx
• frontend/src/services/ruleService.ts
• frontend/src/hooks/useAuthHeaders.ts
• frontend/src/components/host-groups/ScanProgressDialog.tsx
• frontend/src/pages/hosts/AddHost.tsx

Success Criteria

• All TypeScript compilation errors resolved
• npx tsc --noEmit passes with 0 errors
• Frontend CI pipeline passing
• TypeScript Code Quality checks passing
• No new type errors introduced

Related

• Discovered during PR Complete Remediation Engine + Security Updates + MongoDB Integration #74 merge
• Does not block functionality but affects developer experience
• Should be addressed before adding new TypeScript features

Priority

Medium - Doesn't block current functionality but degrades code quality and CI reliability.

---

Created as follow-up to PR #74 merge.

[remyluslosius]

TypeScript Compilation Status Update (Oct 29, 2025)

Ran TypeScript compiler check - found 6 remaining errors (down from previous count):

src/components/Templates/TemplateSelector.tsx(60,35): Property 'group' does not exist on type 'ScanTemplate'
src/components/dashboard/FleetHealthWidget.tsx(128,25): Type '"offline"' not assignable to 'keyof FleetHealthData'
src/components/dashboard/FleetHealthWidget.tsx(204,21): Type '"offline"' not assignable to 'keyof FleetHealthData'
src/components/host-groups/ScanProgressDialog.tsx(113,15): 'new' expression lacks construct signature
src/pages/Dashboard.tsx(309,7): Cannot find name 'setOfflineHosts'
src/pages/hosts/AddHost.tsx(523,17): Property 'disabled' does not exist on RadioGroupProps

Progress: Error count has decreased significantly. Most errors are minor type mismatches.

Next Steps:

1. Fix TemplateSelector missing 'group' property
2. Fix FleetHealthWidget 'offline' type
3. Fix Dashboard setOfflineHosts typo
4. Fix AddHost RadioGroup disabled prop
5. Fix ScanProgressDialog construct signature

These are non-blocking compilation errors that don't prevent the application from running.

[remyluslosius]

✅ TypeScript Compilation Errors Resolved - 2025-11-04

Status: All TypeScript compilation errors have been fixed!

Summary

Ran TypeScript compiler check and found 1 actual error (down from the reported 6 errors from Oct 29):

• The other 5 errors (TemplateSelector, FleetHealthWidget, Dashboard, AddHost) had already been resolved

Root Cause

File: src/components/host-groups/ScanProgressDialog.tsx
Issue: Name conflict between Material-UI's Error icon component and JavaScript's global Error constructor

// PROBLEM: Error icon import shadowing global Error
import { Error } from '@mui/icons-material';

// Later in code:
throw new Error(message);  // TypeScript thinks this is the icon component!

Fix Applied

Commit: f12102a

1. Renamed icon import to avoid conflict:

import { Error as ErrorIcon } from '@mui/icons-material';

2. Updated icon usage:

case 'failed': return <ErrorIcon color="error" />;

3. Added explicit type annotation for error data:

const errorData: { detail?: string } = await response.json();
const errorMessage = String(errorData.detail || 'Failed to fetch progress');
throw new Error(errorMessage);

Verification

✅ TypeScript Compilation: npx tsc --noEmit passes with zero errors
✅ Frontend Build: npm run build succeeds
✅ CI Pipeline: TypeScript checks will now pass

Impact

• Developer Experience: IntelliSense and type checking now work correctly
• Code Quality: Full type safety restored
• CI/CD: Frontend pipeline checks will pass
• Future Development: Type errors will be caught at development time

Time Taken

Approximately 1.5 hours (faster than estimated 2-3 hours)

Recommendation: Close this issue as resolved.

[remyluslosius]

✅ Closing: All TypeScript Errors Resolved

TypeScript compilation now passes with zero errors.

The root cause was a name conflict between Material-UI's Error icon and JavaScript's global Error constructor. Fixed by renaming the icon import to ErrorIcon.

All other reported errors (TemplateSelector, FleetHealthWidget, Dashboard, AddHost) were already resolved in previous commits.

Verification:

• npx tsc --noEmit ✅ Passes
• npm run build ✅ Succeeds
• CI TypeScript checks ✅ Will pass

Commit: f12102a

Time: 1.5 hours (under the estimated 2-3 hours)