Replatform the UI

[aaazzam]

Describe the current behavior

The open-source Prefect UI is built with Vue, with its functionality spread across multiple Prefect-managed packages. Key aspects of the UI, including the component system, data management, and state handling, are custom-developed. However, the Prefect UI faces several challenges:

• Limited test coverage: Insufficient tests reduce developers' confidence in making changes safely and increase the risk of introducing regressions.
• High maintenance burden: Custom-built systems are harder to maintain and update.
• Barriers to contributions: The complexity and lack of testing make it difficult for community members to contribute effectively.

These issues collectively hinder the UI’s maintainability and slow down the development process. To create a more sustainable and open platform that supports rapid iteration and ensures high quality, we have decided to replatform the Prefect UI using modern frameworks, libraries, and tooling.

Describe the proposed behavior

We intend to "replatform" the open-source Prefect UI in the following way:

1. Adopt React: Transitioning to React will give us access to a robust ecosystem of libraries and a larger community.

2. Improve data management: Implementing TanStack Query will enhance data fetching while providing a more consistent developer experience. TanStack Query’s capabilities to prefetch and cache data across routes, along with optimistic updates for mutations, will improve application responsiveness.

   Adopting React Hook Form and Zod will improve the surface area of our forms by providing consistent form creation and data validation patterns throughout the application.

3. Enhance routing: TanStack Router's type-safe approach with built-in data loading will improve our cross-route data fetching patterns, improving responsiveness and developer productivity. TanStack Router supports preloading routes and data loading for routes out of the box; both will be key to improving navigation responsiveness.

4. Use modern, accessible components: By leveraging shadcn/ui built on Radix UI primitives, we can create accessible, consistent components built with best practices. Components from shadcn/ui will be hosted directly in the project, are customizable, and are available for reuse. This will make it easier to contribute, speed up development, and improve the overall user experience.

5. Automate API type generation: Generating TypeScript types and data fetching code from our OpenAPI specification (with tools like openapi-fetch will ensure consistency between our frontend and backend, reduce errors, and improve our development workflow.

6. Create a robust test suite: Since the UI replatform will involve rewriting nearly the entire UI codebase, we can start with solid testing practices and maintain them long term. We plan on using vitest and react-testing-library for unit testing and Playwright for end-to-end tests covering both the UI and the API.

Some parts of the UI codebase will remain unchanged. For example, we will continue to use Vite for our dev server and build system, and we will continue to use eslint for static type checking. The Prefect UI codebase will continue to live alongside the rest of the prefect package, but our goal is to have the entire codebase contained in the PrefectHQ/prefect repository without any other Prefect-maintained dependencies.

How we’ll get there

Until the new UI is ready, self-hosted Prefect instances will continue to serve the current UI version. The new UI will be available in experimental preview once enough functionality has been reimplemented, and users will be able to switch between the new and old UI as they see fit. Once we’ve fully reimplemented the UI and addressed feedback from the community, we will remove the old UI, and the new UI will become the default.

Example Use

No response

Additional context

No response

[devinvillarosa]

Here's a mental model I'm using when breaking down my PRs and replatforming the UI