ref(ui): use vite instead of webpack (#739)

Basically:
- Replace web pack setup with vite and upgrade various dependencies and cull unnecessary ones.
- Also remove TSLint. Will replace with typescript-eslint rules eventually.
- Got rid of the hacky landing page static generation.

Various road bumps along the way:

- https://javascript.plainenglish.io/how-to-set-up-path-resolving-in-vite-ad284e0d9eae
- fix sass imports vitejs/vite#5764 (comment)
- Then needed to rewrite the alias for typescript again to match the types
- Replace `process`. With the `import.meta.env` thing
- https://stackoverflow.com/questions/64677212/how-to-configure-proxy-in-vite
- Fix imports for static files from `requires()`
- Had to fix proxying for `/avatar` and `/api` in dev
- Ran into remarkjs/react-markdown#339 (comment)
    - Upgrade markdown react to fix
- Migrate from `react-helmet` to fix some deprecation warnings
- Vite has a different jsx config, so no need to import React
    - microsoft/TypeScript#41882
- Vitest issue:
    - https://github.com/vitest-dev/vitest/blob/57c2367196b3fd978a04fa38ebdac7a5b6ef9b16/packages/vite-node/src/client.ts#L178-L179
- Couldn’t import react-dnd, upgraded
    - react-dnd/react-dnd#3368
- `import { isUndefined } from "util"` didn’t work
- Favicon via https://github.com/darkobits/vite-plugin-favicons to replace web pack equivalent 
- Issue with React router browser history in vitest, it exploded until jsdom was setup
- Question: https://stackoverflow.com/questions/71703933/what-is-the-difference-between-vite-and-vite-preview
- Vitest vscode integration broken :/
    - vitest-dev/vscode#44
- Tried happy-dom but it doesn’t work, lots of issues, supposed to be faster
- Took a while to get MSW in a good place, had to write some stuff so missing endpoint mocks fail the test
    - I think there's room for improvement here in terms of developer experience
    - Test with react testing library and API calls
        - https://www.npmjs.com/package/nock
            - Doesn’t fail test on unknown mock
            - https://stackoverflow.com/questions/69430232/jest-nock-how-to-fail-a-test-if-a-non-mocked-request-is-made
        - MSW
            - Doesn’t fail test on unknown mock
            - mswjs/msw#946
        - Relay’s mockEnvironment
          - couldn't easily find thorough examples
        - Apollo mock provider
            - Doesn’t fail test on unknown mock
- Added a visualize plugin similar to a web pack analyzer thing, but it’s slightly off with the numbers it gives for sizes:
    - btd/rollup-plugin-visualizer#96
- TODO:
    - ESLINT rules, replace what tslint provided, eslint-cake anyone?
        - https://typescript-eslint.io/rules/no-floating-promises/
        - And more!!!
    - Replace lodash with lodash-es
        - Or maybe: https://github.com/onebay/vite-plugin-imp
        - Although lodash-es seems cleaner
    - SSR  for landing page?

.circleci/config.yml

@@ -124,7 +124,7 @@ jobs:
 
   frontend_test:
     docker:
-      - image: circleci/node:12.4.0
+      - image: cimg/node:18.7.0
     steps:
       - checkout
       - run:
@@ -150,7 +150,7 @@ jobs:
 
   frontend_lint:
     docker:
-      - image: circleci/node:12.4.0
+      - image: cimg/node:18.7.0
     steps:
       - checkout
       - run:
@@ -181,7 +181,7 @@ jobs:
           # copy bundle analyzer report
           command: |
             mkdir -p /tmp/frontend-artifacts
-            cp -R build/report.html build/webpack-stats.json /tmp/frontend-artifacts
+            cp -R stats.html /tmp/frontend-artifacts
       - store_artifacts:
           path: /tmp/frontend-artifacts
 

.gitignore

@@ -18,3 +18,5 @@ docker-compose-shipit.yml
 *.egg*
 pip-wheel-metadata
 .testmondata
+.eslintcache
+stats.html

frontend/.eslintignore

@@ -0,0 +1,5 @@
+dist/
+build/
+.eslintrc.js
+vite.config.ts
+vitest-setup.ts

frontend/.eslintrc.js

@@ -8,15 +8,19 @@ module.exports = {
       jsx: true,
     },
   },
-  plugins: ["html", "react", "react-hooks", "@typescript-eslint", "import"],
+  plugins: ["react", "react-hooks", "@typescript-eslint"],
   extends: ["prettier"],
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
   env: {
     browser: true,
   },
   rules: {
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "error",
-    "import/no-duplicates": "error",
     "no-restricted-globals": [
       "error",
       "close",
@@ -60,11 +64,11 @@ module.exports = {
     "no-unneeded-ternary": ["error", { defaultAssignment: false }],
     "@typescript-eslint/no-non-null-assertion": "error",
     "@typescript-eslint/await-thenable": "error",
+    "@typescript-eslint/no-floating-promises": "error",
     "@typescript-eslint/no-for-in-array": "error",
     "@typescript-eslint/prefer-as-const": "error",
     "@typescript-eslint/prefer-reduce-type-parameter": "error",
     "@typescript-eslint/restrict-plus-operands": "error",
-    "init-declarations": ["error", "always"],
     "react/jsx-fragments": "error",
     "no-lonely-if": "error",
     "object-shorthand": ["error", "always"],

frontend/.ignore

@@ -0,0 +1 @@
+dist

frontend/.prettierignore

@@ -1,4 +1,5 @@
 build/
+dist/
 node_modules/
 coverage/
 .venv/

frontend/.prettierrc.js

@@ -6,6 +6,4 @@ module.exports = {
   singleQuote: false,
   trailingComma: "all",
   bracketSpacing: true,
-  jsxBracketSameLine: true,
-  arrowParens: "avoid",
 }