Skip to content

Migrate UI from JavaScript to TypeScript#900

Merged
fmartinou merged 3 commits intogetwud:test/#900from
avargaskun:migrate-ui-to-ts
Feb 14, 2026
Merged

Migrate UI from JavaScript to TypeScript#900
fmartinou merged 3 commits intogetwud:test/#900from
avargaskun:migrate-ui-to-ts

Conversation

@avargaskun
Copy link
Contributor

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`).
@s-b-e-n-s-o-n
Copy link

WUD-CE independently completed the full UI TypeScript migration as part of 9.0.0-ce, along with Vitest for UI tests. Thanks for the effort!

@fmartinou fmartinou self-assigned this Feb 14, 2026
@fmartinou fmartinou changed the base branch from main to test/#900 February 14, 2026 14:18
@fmartinou
Copy link
Collaborator

Thanks you very much; I'll give it a test before integrating into the main branch 👌

@fmartinou fmartinou merged commit 2352883 into getwud:test/#900 Feb 14, 2026
fmartinou added a commit that referenced this pull request Feb 14, 2026
* feat(ui): migrate ui codebase from javascript to typescript

- 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)

* chore(ui): Fix UI unit tests and improve coverage for views

- 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`).

* chore(dev): update dev config for proxy, vue resolution and auth hash

Co-authored-by: Antonio Vargas <avargaskun@users.noreply.github.com>
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.

3 participants