Skip to content

feat(dataviewer): plan incremental frontend framework migration (React 19, Tailwind 4, TS 6, Vite 8) #462

@katriendg

Description

@katriendg

Context

Dependabot PR #460 attempted to bump 29 frontend packages simultaneously, including 6+ major version upgrades. The PR fails CI because these are breaking changes requiring code migration. PR #460 will be closed.

Scope

Migrate the dataviewer frontend through these major framework upgrades incrementally, one at a time, with passing CI at each step:

Package Current Target Migration Complexity
Tailwind CSS 3.4 4.x High — CSS-first config, @import syntax, no tailwind.config.js
React 18.3 19.x High — forwardRef removal, ref as prop, hooks behavior
TypeScript 5.6 6.x Medium — stricter type checking
Vite 6.4 8.x Medium — plugin API changes
ESLint 9.x 10.x Low — flat config updates
MSAL browser/react 4.x/3.x 5.x/5.x Medium — new auth API surface
tailwind-merge 2.x 3.x Low — API alignment with Tailwind 4

Suggested Order

  1. Tailwind CSS 3→4 + tailwind-merge 2→3 (foundation — affects all component styling)
  2. React 18→19 + @types/react 18→19 (core runtime)
  3. TypeScript 5→6 (type system — fix any new errors from steps 1-2)
  4. Vite 6→8 + @vitejs/plugin-react (build tooling)
  5. ESLint 9→10 + eslint-plugin-react-hooks 5→7 (linting)
  6. MSAL 4→5 / 3→5 (auth — test in deployed environment)
  7. Minor/patch bumps for remaining packages (lucide-react, recharts, zustand, etc.)

Acceptance Criteria

  • Each upgrade is a separate PR with passing CI
  • No functionality regressions in the dataviewer UI
  • Dependabot .github/dependabot.yml updated to ignore major versions already tracked here
  • All shadcn/ui components validated after Tailwind 4 migration

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions