Begin replatform of UI to React

.github/CODEOWNERS

@@ -7,5 +7,8 @@
 # documentation
 /docs                                @discdiver @cicdw @desertaxle @zzstoatzz
 # imports
-/src/prefect/__init__.py              @aaazzam @chrisguidry @cicdw @desertaxle @zzstoatzz
-/src/prefect/main.py                  @aaazzam @chrisguidry @cicdw @desertaxle @zzstoatzz
+/src/prefect/__init__.py             @aaazzam @chrisguidry @cicdw @desertaxle @zzstoatzz
+/src/prefect/main.py                 @aaazzam @chrisguidry @cicdw @desertaxle @zzstoatzz
+
+# UI Replatform
+/ui-v2                               @aaazzam @cicdw @desertaxle @zzstoatzz

.github/workflows/ui-v2-checks.yml

@@ -0,0 +1,56 @@
+name: UI v2 Checks
+
+on:
+  pull_request:
+    paths:
+      - .github/workflows/ui-v2-checks.yml
+      - ui-v2/**
+      - .nvmrc
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+# Limit concurrency by workflow/branch combination.
+#
+# For pull request builds, pushing additional changes to the
+# branch will cancel prior in-progress and pending builds.
+#
+# For builds triggered on a branch push, additional changes
+# will wait for prior builds to complete before starting.
+#
+# https://docs.github.com/en/actions/using-jobs/using-concurrency
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+jobs:
+  build-ui:
+    name: Build ui
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache-dependency-path: "**/package-lock.json"
+
+      - name: Install UI dependencies
+        working-directory: ./ui-v2
+        run: npm ci install
+
+      - name: Check formatting
+        working-directory: ./ui-v2
+        run: npm run format:check
+
+      - name: Lint
+        working-directory: ./ui-v2
+        run: npm run lint
+
+      - name: Build UI
+        working-directory: ./ui-v2
+        run: npm run build

scripts/generate_oss_openapi_schema.py

@@ -1,8 +1,13 @@
+# /// script
+# dependencies = [
+#   "prefect @ file:${PROJECT_ROOT}/../",
+# ]
+# ///
 import json
 
-from prefect.server.api.server import create_app
+from prefect.server.api.server import create_api_app
 
-app = create_app()
+app = create_api_app()
 openapi_schema = app.openapi()
 
 with open("oss_schema.json", "w") as f:

ui-v2/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Generated files
+oss_schema.json
+*.tsbuildinfo

ui-v2/README.md

@@ -0,0 +1,73 @@
+# Prefect UI
+
+## Project setup
+
+```
+npm ci
+```
+
+### Compiles and hot-reloads for development
+
+```
+npm run dev
+```
+
+### Compiles and minifies for production
+
+```
+npm run build
+```
+
+### Lints and fixes files
+
+```
+npm run lint
+```
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

ui-v2/biome.json

@@ -0,0 +1,30 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": false
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"ignore": []
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": false,
+		"rules": {
+			"recommended": true
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		}
+	}
+}

ui-v2/components.json

@@ -0,0 +1,20 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "new-york",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "src/index.css",
+		"baseColor": "neutral",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	}
+}

ui-v2/eslint.config.js

@@ -0,0 +1,46 @@
+import js from "@eslint/js";
+import pluginRouter from "@tanstack/eslint-plugin-router";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+	{ ignores: ["dist", "src/api/prefect.tsx"] },
+	{
+		extends: [
+			js.configs.recommended,
+			...tseslint.configs.recommendedTypeChecked,
+		],
+		files: ["**/*.{ts,tsx}"],
+		languageOptions: {
+			ecmaVersion: 2020,
+			globals: globals.browser,
+			parserOptions: {
+				project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+				tsconfigRootDir: import.meta.dirname,
+			},
+		},
+		settings: {
+			react: {
+				version: "18.3",
+			},
+		},
+		plugins: {
+			react,
+			"react-hooks": reactHooks,
+			"react-refresh": reactRefresh,
+		},
+		rules: {
+			...reactHooks.configs.recommended.rules,
+			"react-refresh/only-export-components": [
+				"warn",
+				{ allowConstantExport: true },
+			],
+			...react.configs.recommended.rules,
+			...react.configs["jsx-runtime"].rules,
+		},
+	},
+	...pluginRouter.configs["flat/recommended"],
+);

ui-v2/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/ico/apple-touch-icon.png"> 
+    <link rel="icon" id="favicon-32" type="image/png" sizes="32x32" href="/ico/favicon-32x32.png" media="(prefers-color-scheme:light)">
+    <link rel="icon" id="favicon-16" type="image/png" sizes="16x16" href="/ico/favicon-16x16.png" media="(prefers-color-scheme:light)">
+
+    <link rel="icon" id="favicon-32-dark" type="image/png" sizes="32x32" href="/ico/favicon-32x32-dark.png" media="(prefers-color-scheme:dark)">
+    <link rel="icon" id="favicon-16-dark" type="image/png" sizes="16x16" href="/ico/favicon-16x16-dark.png" media="(prefers-color-scheme:dark)">
+
+    <link rel="icon" href="/favicon.ico" media="(prefers-color-scheme:no-preference)">
+    <link rel="icon" href="/favicon.ico" media="(prefers-color-scheme:light)">
+    <link rel="icon" href="/favicon-dark.ico" media="(prefers-color-scheme:dark)">
+
+    <link rel="manifest" href="/ico/site.webmanifest">
+    <link rel="mask-icon" href="/ico/safari-pinned-tab.svg" color="#5bbad5">
+
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Prefect Server</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>