Migrate to Vite from CRA and upgrade dependencies

This contains a variety of changes because of various dependencies between steps: * CRA (create-react-app) is deprecated and hasn't had updates for a couple years. Migrate to Vite as a replacement framework. I recreated the project from scratch to avoid any leftovers causing issues. * Migrate to React 18. Required for Vite and it was fairly out of date along with CRA. * Upgrade most dependencies. Various requirements coming from the other changes make it much more practical to just blanket update to recent versions rather than update individually. I attempted to make minimal changes beyond what was required to get everything back into a working state. That includes: * Removing react-final-form-listeners because it has been abandoned doesn't support React 18. * Tweaking immerjs `produce` imports. * Updating the `RouterLink` component to work with the updated MUI. * Moving the WIP `newCriteria` to a proper context. It should have been done that way anyways. * Adding proper typing to useMessageListener. * Adding a trailing slash to `generatePath` due to react-router changes. * Renaming the Cypress config. * Explicitly convert bigints to strings in a few places. * Some small test fixes. Still to be done is fixing a number of lint issues based on the updated lint config, as well as adding additional recommended React linters.
DataBiosphere · Feb 25, 2025 · 6a1c923 · 6a1c923
1 parent 3eca4d6
commit 6a1c923
Show file tree

Hide file tree

Showing 63 changed files with 8,059 additions and 19,762 deletions.
diff --git a/docs/UI.md b/docs/UI.md
@@ -51,3 +51,10 @@ To run the UI integration tests, first start the service and UI, then open Cypre
 [terminal 3] npx cypress open
 ```
 In the Cypress window, click on "Electron Testing" and then you can run the tests one at a time.
+
+### Linting
+To run linting manually, use:
+```
+npm run lint
+npm run lint -- --fix
+```
diff --git a/ui/.eslintignore b/ui/.eslintignore
diff --git a/ui/.eslintrc.json b/ui/.eslintrc.json
diff --git a/ui/.prettierignore b/ui/.prettierignore
diff --git a/ui/.prettierrc b/ui/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "trailingComma": "es5"
+}
diff --git a/ui/.prettierrc.json b/ui/.prettierrc.json
diff --git a/ui/cypress.config.ts → ui/cypress.config.js b/ui/cypress.config.ts → ui/cypress.config.js
diff --git a/ui/eslint.config.js b/ui/eslint.config.js
@@ -0,0 +1,42 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+
+export default tseslint.config(
+  {
+    ignores: [
+      "build/",
+      "src/tanagra-api/",
+      "src/tanagra-ui/",
+      "src/tanagra-underlay/",
+      "src/proto/",
+    ],
+  },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+  eslintPluginPrettierRecommended
+);
diff --git a/ui/index.html b/ui/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Verily Data Explorer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      // Hack for randombytes because it relies on global existing.
+      var global = global || window
+    </script>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>