Convert Appliance Maintenance UI to Bazel (#63661)

Write Bazel machinery for the Appliance maintenance UI.

## Test plan

- `bazel build ...` passes
- `pnpm run dev` launches app successfully

---------

Co-authored-by: Jean-Hadrien Chabran <jh@chabran.fr>

.bazelignore

@@ -25,6 +25,7 @@ client/testing/node_modules
 client/web/node_modules
 client/web-sveltekit/node_modules
 client/wildcard/node_modules
+internal/appliance/frontend/maintenance/node_modules
 
 cmd/symbols/internal/squirrel/test_repos/starlark
 

internal/appliance/frontend/.gitignore

@@ -0,0 +1,4 @@
+# Disable bzlmod lockfile for now. It needs merge conflict resolution built-in.
+# See https://github.com/bazelbuild/bazel/issues/20369
+MODULE.bazel.lock
+bazel-*

internal/appliance/frontend/.npmrc

@@ -0,0 +1,6 @@
+# Disabling pnpm [hoisting](https://pnpm.io/npmrc#hoist) by setting `hoist=false` is recommended on
+# projects using rules_js so that pnpm outside of Bazel lays out a node_modules tree similar to what
+# rules_js lays out under Bazel (without a hidden node_modules/.pnpm/node_modules). See
+# https://github.com/aspect-build/rules_js/blob/7377f2d0387cc2a9251137929b1c53ccdb3fbcf0/docs/npm_import.md#npm_translate_lock
+# documentation for more information.
+hoist=false

internal/appliance/frontend/maintenance/BUILD.bazel

@@ -0,0 +1,115 @@
+load("@aspect_rules_js//js:defs.bzl", "js_library", "js_run_binary", "js_run_devserver")
+load("@aspect_rules_ts//ts:defs.bzl", "ts_config")
+load("@npm//:defs.bzl", "npm_link_all_packages")
+load("@npm//internal/appliance/frontend/maintenance:tsconfig-to-swcconfig/package_json.bzl", tsconfig_to_swcconfig = "bin")
+load("@npm//internal/appliance/frontend/maintenance:vite/package_json.bzl", vite_bin = "bin")
+
+npm_link_all_packages(
+    name = "node_modules",
+)
+
+RUNTIME_DEPS = [
+    "assets/cody.svg",
+    "assets/sourcegraph-reverse-logo.png",
+    "assets/sourcegraph.png",
+    "index.html",
+    "src/App.css",
+    "src/Frame.tsx",
+    "src/Home.tsx",
+    "src/Install.tsx",
+    "src/Login.tsx",
+    "src/Maintenance.tsx",
+    "src/OperatorDebugBar.tsx",
+    "src/OperatorStatus.tsx",
+    "src/Progress.tsx",
+    "src/Theme.tsx",
+    "src/WaitForAdmin.tsx",
+    "src/api.ts",
+    "src/debugBar.ts",
+    "src/index.css",
+    "src/main.tsx",
+    "src/reportWebVitals.ts",
+    ":node_modules/@emotion/react",
+    ":node_modules/@emotion/styled",
+    ":node_modules/@mui/icons-material",
+    ":node_modules/@mui/material",
+    ":node_modules/classnames",
+    ":node_modules/react",
+    ":node_modules/react-dom",
+    ":node_modules/react-router-dom",
+    ":node_modules/web-vitals",
+    ":node_modules/vite",
+    ":node_modules/std-env",
+    ":node_modules/rollup",
+]
+
+DEV_DEPS = [
+    "vite.config.mts",
+    ":node_modules/@vitejs/plugin-react",
+    ":node_modules/vitest",
+]
+
+ts_config(
+    name = "tsconfig",
+    src = "tsconfig.json",
+    visibility = ["//visibility:public"],
+)
+
+tsconfig_to_swcconfig.t2s(
+    name = "write_swcrc",
+    srcs = ["tsconfig.json"],
+    args = [
+        "--filename",
+        "$(location tsconfig.json)",
+    ],
+    stdout = ".swcrc",
+    visibility = ["//maintenance:__subpackages__"],
+)
+
+js_library(
+    name = "package_json",
+    srcs = ["package.json"],
+    visibility = ["//visibility:public"],
+)
+
+js_library(
+    name = "vite.config",
+    srcs = ["vite.config.mts"],
+    data = [
+        ":node_modules/@vitejs/plugin-react",
+        ":node_modules/vitest",
+    ],
+    visibility = ["//maintenance:__subpackages__"],
+)
+
+vite_bin.vite_binary(
+    name = "vite",
+    chdir = package_name(),
+    data = ["vite.config"],
+)
+
+# Fast developer round-trip under ibazel
+js_run_devserver(
+    name = "start",
+    args = ["."],
+    data = RUNTIME_DEPS + DEV_DEPS,
+    tool = ":vite",
+)
+
+# Create production release artifacts
+js_run_binary(
+    name = "build",
+    srcs = RUNTIME_DEPS,
+    args = ["build"],
+    mnemonic = "ViteBuild",
+    out_dirs = ["dist"],
+    tool = ":vite",
+)
+
+# Hosts the production-bundled application in a web server
+vite_bin.vite_binary(
+    name = "preview",
+    args = ["preview"],
+    chdir = package_name(),
+    data = [":build"],
+)

internal/appliance/frontend/maintenance/README.md

@@ -0,0 +1,14 @@
+# Sourcegraph Appliance Maintenance UI
+
+## Build
+
+This will produce the distributable `dist` folder in `bazel-bin/internal/appliance/frontend/maintenance/dist`:
+
+    sg bazel build //internal/appliance/frontend/maintenance:build
+
+## Local run
+
+This will run the service locally, starting a Vite developer environment:
+
+    pnpm install
+    pnpm run dev

internal/appliance/frontend/maintenance/defs.bzl

@@ -0,0 +1,29 @@
+"Constants for conventions used for React source files"
+
+load("@aspect_rules_swc//swc:defs.bzl", "swc")
+load("@bazel_skylib//lib:partial.bzl", "partial")
+
+ASSET_PATTERNS = [
+    "*.svg",
+    "*.css",
+]
+
+SRC_PATTERNS = [
+    "*.tsx",
+    "*.ts",
+]
+
+# Filename conventions described at
+# https://create-react-app.dev/docs/running-tests#filename-conventions
+TEST_PATTERNS = [
+    "*.test.tsx",
+    "*.test.ts",
+    "*.spec.tsx",
+    "*.spec.ts",
+]
+
+# Partially-apply our (generated) .swcrc config file to the swc starlark function
+TRANSPILER = partial.make(
+    swc,
+    swcrc = "//react:.swcrc",
+)

internal/appliance/frontend/maintenance/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@sourcegraph/operator-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.19",
+    "@mui/material": "^5.14.20",
+    "classnames": "^2.2.6",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-router-dom": "^6.8.1",
+    "web-vitals": "2.1.4"
+  },
+  "devDependencies": {
+    "@types/node": "20.8.0",
+    "@types/react": "18.0.8",
+    "@types/react-dom": "18.0.2",
+    "@vitejs/plugin-react": "^3.1.0",
+    "rollup": "^4.18.1",
+    "std-env": "^3.7.0",
+    "tsconfig-to-swcconfig": "^2.7.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.1.4",
+    "vitest": "1.0.0-beta.4"
+  }
+}

internal/appliance/frontend/maintenance/src/main.tsx

@@ -11,6 +11,7 @@ import './index.css'
 import { Install } from './Install.tsx'
 import { Maintenance } from './Maintenance.tsx'
 import { Progress } from './Progress.tsx'
+import reportWebVitals from './reportWebVitals'
 import { ThemeProvider } from './Theme.tsx'
 import { WaitForAdmin } from './WaitForAdmin.tsx'
 
@@ -54,3 +55,5 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
         </ThemeProvider>
     </React.StrictMode>
 )
+
+reportWebVitals(console.log)

internal/appliance/frontend/maintenance/src/reportWebVitals.ts

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+    if (onPerfEntry && onPerfEntry instanceof Function) {
+        import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+            getCLS(onPerfEntry)
+            getFID(onPerfEntry)
+            getFCP(onPerfEntry)
+            getLCP(onPerfEntry)
+            getTTFB(onPerfEntry)
+        })
+    }
+}
+
+export default reportWebVitals

internal/appliance/frontend/maintenance/tsconfig.json

@@ -5,21 +5,16 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
   },
   "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }],
 }

internal/appliance/frontend/maintenance/vite.config.mts

@@ -1,5 +1,5 @@
 import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
 
 const devVersion = `v0.0.${Math.floor(Date.now() / 1000 - 1703122377)}`
 

internal/appliance/maintenance/frontend/package.json

@@ -1,35 +0,0 @@
-{
-  "name": "operator-ui",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.19",
-    "@mui/material": "^5.14.20",
-    "classnames": "^2.3.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.20.1"
-  },
-  "devDependencies": {
-    "@types/node": "^20.10.4",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.55.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.7"
-  }
-}

internal/appliance/maintenance/frontend/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-  },
-  "include": ["vite.config.ts"],
-}

pnpm-workspace.yaml

@@ -3,3 +3,4 @@ packages:
   # The test dataset is generated and ignored by Git. Use the published version instead.
   - '!client/cody-context-filters-test-dataset'
   - 'schema'
+  - 'internal/appliance/frontend/maintenance'