build: move the UI off create-react-app and onto Vite

Makefile

@@ -416,6 +416,7 @@ ui-devel: awx/ui/node_modules
 		cp -r awx/ui/build/static/media/* /var/lib/awx/public/static/media; \
 	fi
 
+## Start the Vite dev server on port 3001, proxying the API to TARGET.
 ui-devel-test: awx/ui/node_modules
 	$(NPM_BIN) --prefix awx/ui --loglevel warn run start
 

awx/ui/Dockerfile

@@ -5,10 +5,15 @@ ARG TARGET='https://awx:8043'
 ENV TARGET=${TARGET}
 ENV CI=true
 WORKDIR /ui
-ADD .eslintignore .eslintignore
-ADD .eslintrc.json .eslintrc.json
-ADD .linguirc .linguirc
+# The three dotfiles this used to add, .eslintignore, .eslintrc.json and
+# .linguirc, have not existed since the flat eslint config and lingui.config.js
+# replaced them, so the build has been failing on the first of them.
+ADD eslint.config.mjs eslint.config.mjs
+ADD lingui.config.js lingui.config.js
 ADD jsconfig.json jsconfig.json
+ADD vite.config.mjs vite.config.mjs
+ADD index.html index.html
+ADD config config
 ADD public public
 ADD package.json package.json
 ADD package-lock.json package-lock.json

awx/ui/config/build/aliases.mjs

@@ -0,0 +1,25 @@
+import { fileURLToPath, URL } from 'node:url';
+
+const srcPath = fileURLToPath(new URL('../../src', import.meta.url));
+
+/*
+ * Absolute imports out of src, as `import { JobsAPI } from 'api'`.
+ *
+ * Under webpack these resolved through resolve.modules, which put src on the
+ * module search path, derived from the baseUrl in jsconfig.json. Vite has no
+ * such search path, so each prefix is an explicit alias. The list is every
+ * top-level entry in src that is imported bare somewhere, and it is shared
+ * with the test config so the two cannot drift: a module that resolves when
+ * the application builds has to resolve the same way when it is tested.
+ */
+export const srcAliases = [
+  {
+    // Anchored, so node's own util is still reachable as node:util.
+    find: /^(api|components|contexts|hooks|screens|util)(\/|$)/,
+    replacement: `${srcPath}/$1$2`,
+  },
+  { find: /^i18nLoader$/, replacement: `${srcPath}/i18nLoader.js` },
+  { find: /^themeRegistry$/, replacement: `${srcPath}/themeRegistry.js` },
+];
+
+export default srcAliases;

awx/ui/config/build/babel.mjs

@@ -0,0 +1,50 @@
+import { fileURLToPath, URL } from 'node:url';
+import { transformAsync } from '@babel/core';
+
+const resolvePath = (relative) =>
+  fileURLToPath(new URL(relative, import.meta.url));
+
+const SOURCE = /\.[jt]sx?$/;
+
+/*
+ * The babel pass the source cannot be built without, shared by the application
+ * build and the test run so the two cannot disagree about what the source
+ * means.
+ *
+ * The lingui macro is the reason babel is here at all. oxc, which Vite and
+ * @vitejs/plugin-react use, has no macro support, so useLingui() and every t``
+ * in the 486 files that import one would go through untransformed.
+ *
+ * JSX is transformed here rather than left to oxc because this codebase keeps
+ * JSX in .js files, a create-react-app convention, and Vite 8 has no way to
+ * say so: the option that used to carry it is not part of its oxc config.
+ *
+ * @babel/preset-env is deliberately absent. It only ever targeted the running
+ * node, and under babel-jest it also rewrote the modules to CommonJS, which is
+ * the one thing that must not happen now that ESM is handled natively.
+ */
+export function babelTransform() {
+  return {
+    name: 'awx:babel',
+    enforce: 'pre',
+    async transform(code, id) {
+      if (!SOURCE.test(id.split('?')[0]) || id.includes('/node_modules/')) {
+        return null;
+      }
+      const result = await transformAsync(code, {
+        filename: id,
+        babelrc: false,
+        configFile: false,
+        sourceMaps: true,
+        presets: [['@babel/preset-react', { runtime: 'automatic' }]],
+        plugins: [
+          '@lingui/babel-plugin-lingui-macro',
+          resolvePath('../babel/jsx-compat-plugin.js'),
+        ],
+      });
+      return { code: result.code, map: result.map };
+    },
+  };
+}
+
+export default babelTransform;