Skip to content

Conversation

@avargaskun
Copy link

Overview

This PR performs the migration of the ui directory from JavaScript to TypeScript,
modernizing the codebase with improved type safety and developer experience.

Important

Combined with PR #893 this PR completes the migration of all major areas of this codebase to Typescript.

Key Changes

TypeScript Migration

  • Converted all .js files to .ts with proper ESM imports
  • Added comprehensive TypeScript type definitions for dependencies
  • Included @ts-nocheck pragmas for gradual migration support

🔧 Build & Tooling

  • Added TypeScript compilation step
  • Implemented ts-jest for TypeScript test support
  • Updated build configuration for ESM compatibility

📦 Development Dependencies

  • Installed TypeScript (^5.9.3)
  • Added @types/* packages for all major dependencies
  • Added ts-jest and related tooling

Testing

  • All existing tests have been migrated and verified to work with TypeScript and passing 100%
  • Verified that site loads and works as expected when used within the Docker container (manual validation)

Breaking Changes

None - this is a transparent migration that maintains full backward compatibility.

Migration Strategy

  • Gradual migration path with @ts-nocheck comments where needed
  • Type definitions ensure compatibility with external packages
  • Can continue adding stricter typing in future PRs

Why This Matters

This migration improves:

  • Type Safety: Catch errors at compile time rather than runtime
  • Developer Experience: Better IDE support, autocompletion, and refactoring tools
  • Code Quality: More maintainable and self-documenting code
  • Long-term Maintenance: Easier for future contributors to understand code intent

- Convert all .js files to .ts
- Separate component logic from .vue files into .ts files
- Update build configuration (tsconfig, webpack) for TypeScript support
- Fix linting and type errors
- Update dependencies (jest, typescript-eslint)
- Fix `ts-jest` deprecation warnings by moving `isolatedModules` to `tsconfig.json` and updating `jest.config.js`.
- Fix `LoginOidc.spec.ts` by mocking `window.location`.
- Fix `AppBar.spec.ts` injection warnings by mocking `vue-router` and updating `v-menu` stub.
- Implement comprehensive tests for `HomeView.spec.ts`:
  - Mock container, registry, trigger, and watcher services.
  - Verify rendering of status cards and counts.
  - Test update availability indicators.
  - Verify navigation links.
- Implement comprehensive tests for `LoginView.spec.ts`:
  - Mock authentication services and strategies.
  - Test login dialog rendering for Basic and OIDC strategies.
  - Verify `beforeRouteEnter` logic for anonymous auth and redirects.
- Add Jest SVG mock configuration.
- Update `setup.ts` stubs (add `v-avatar`, improve `v-btn`).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant