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.

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
+```

ui/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "es5"
+}

ui/cypress.config.ts → ui/cypress.config.js

@@ -1,7 +1,7 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
-  defaultCommandTimeout: 15000,
+  defaultCommandTimeout: 30000,
   fixturesFolder: false,
   viewportWidth: 1280,
   viewportHeight: 720,

ui/cypress/e2e/cohortReview.cy.js

@@ -42,15 +42,15 @@ describe("Basic tests", () => {
     cy.iframe().find("button:Contains(Reviews)").click();
     cy.iframe().find("button:Contains(Review individual participants)").click();
 
-    cy.iframe().find("button:Contains(Procedures)", { timeout: 30000 }).click();
-    cy.iframe().contains("Retrograde pyelogram"), { timeout: 30000 };
+    cy.iframe().find("button:Contains(Procedures)", { timeout: 40000 }).click();
+    cy.iframe().contains("Retrograde pyelogram"), { timeout: 40000 };
     cy.iframe().contains("1/5");
 
     cy.iframe().find("button:Contains(Conditions)").click();
     cy.iframe().contains("Condition name");
 
     cy.iframe().find("[data-testid='KeyboardArrowRightIcon']").click();
-    cy.iframe().find("button:Contains(Condition)", { timeout: 20000 }).click();
+    cy.iframe().find("button:Contains(Condition)").click();
     cy.iframe().contains("Condition name");
     cy.iframe().contains("2/5");
 

ui/cypress/e2e/export.cy.js

@@ -50,7 +50,7 @@ describe("Basic tests", () => {
     cy.iframe().find("span:Contains(Download CSV)").click();
     cy.iframe().find("button:Contains(Export)").last().click();
 
-    cy.iframe().find(`a:Contains(${cohort1})`, { timeout: 20000 });
+    cy.iframe().find(`a:Contains(${cohort1})`);
     cy.iframe().find(`a:Contains(${cohort2})`);
     cy.iframe().find("a:Contains(person)");
     cy.iframe().find("a:Contains(conditionOccurrence)");

ui/cypress/e2e/tests.cy.js

@@ -27,16 +27,14 @@ describe("Basic tests", () => {
     cy.iframe().find("button:Contains(Add criteria)").first().click();
     cy.iframe().find("[data-testid='tanagra-race']").click();
     cy.iframe()
-      .find(".MuiSelect-select:Contains(Any value)", {
-        timeout: 20000,
-      })
+      .find(".MuiSelect-select:Contains(Any value)")
       .click();
     cy.iframe().find("li:Contains(Asian)").click();
     cy.iframe().find(".MuiBackdrop-root").click();
 
     cy.iframe().find("button:Contains(Add criteria)").first().click();
     cy.iframe()
-      .find("[data-testid='tanagra-year_of_birth']", { timeout: 20000 })
+      .find("[data-testid='tanagra-year_of_birth']")
       .click();
     cy.iframe().find(".MuiInput-input").first().type("{selectall}1940");
 

ui/cypress/support/e2e.js

@@ -73,15 +73,13 @@ Cypress.Commands.add(
 
     cy.iframe().find("[data-testid='ArrowBackIcon']").first().click();
     cy.iframe().find("[data-testid='ArrowBackIcon']").first().click();
-    cy.iframe().find("button[aria-label=back]", { timeout: 20000 }).click();
+    cy.iframe().find("button[aria-label=back]").click();
   }
 );
 
 Cypress.Commands.add("multiSelect", (search) => {
   cy.iframe()
-    .find(`p:Contains(${search}), button:Contains(${search})`, {
-      timeout: 20000,
-    })
+    .find(`p:Contains(${search}), button:Contains(${search})`)
     .first()
     .prev("button")
     .click();
@@ -94,7 +92,7 @@ Cypress.Commands.add("possiblyMultiSelect", (search) => {
       cy.iframe().find("button:Contains(Save criteria)").click();
     } else {
       cy.iframe()
-        .find(`[data-testid='${search}']`, { timeout: 20000 })
+        .find(`[data-testid='${search}']`)
         .first()
         .click();
     }

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.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
+);

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>