Update deps + fix lint + fix tests

.github/workflows/ci_build.yml

@@ -28,10 +28,10 @@ jobs:
         run: |
           yarn
 
-      - name: Lint
+      - name: Lint and typecheck
         working-directory: web
         run: |
-          yarn lint
+          yarn lint && yarn typecheck
 
       - name: Run build
         working-directory: web

shared/codeEditor/package.json

@@ -4,16 +4,15 @@
   "version": "0.0.0",
   "license": "UNLICENSED",
   "peerDependencies": {
-    "@types/react": "^17.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@codemirror/autocomplete": "^0.20.0",
-    "@codemirror/commands": "^0.20.0",
-    "@codemirror/language": "^0.20.0",
-    "@codemirror/state": "^0.20.0",
-    "@codemirror/view": "^0.20.0",
-    "@replit/codemirror-indentation-markers": "^0.20.0"
+    "@codemirror/autocomplete": "^6.0.0",
+    "@codemirror/commands": "^6.0.0",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
+    "@replit/codemirror-indentation-markers": "^6.0.0"
   }
 }

shared/common/newui/select/index.tsx

@@ -8,7 +8,7 @@ import styles from "./select.module.scss";
 
 export type SelectProps<T = any> = _SelectProps<T> & {label?: string};
 
-export function Select<T>({className, label, ...props}: SelectProps) {
+export function Select<T>({className, label, ...props}: SelectProps<T>) {
   if (label != null) {
     return (
       <label className={cn(styles.selectField, className)}>

shared/common/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "peerDependencies": {
     "edgedb": "1.6.0-canary.20241030T172506",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "main": "index.ts"
 }

shared/inspector/package.json

@@ -4,18 +4,17 @@
   "version": "0.0.0",
   "license": "UNLICENSED",
   "peerDependencies": {
-    "@types/react": "^16.9.34",
     "edgedb": "1.6.0-canary.20241030T172506",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "@types/react-window": "^1.8.3",
+    "@types/react-window": "^1.8.8",
     "assert-never": "^1.2.1",
     "mobx": "^6.5.0",
     "mobx-keystone": "^1.11.0",
-    "mobx-react-lite": "^3.3.0",
-    "react-window": "^1.8.6"
+    "mobx-react-lite": "^4.0.0",
+    "react-window": "^1.8.10"
   },
   "main": "index.tsx"
 }

shared/lang-edgeql/package.json

@@ -11,9 +11,9 @@
     "genMeta": "node genMeta.js"
   },
   "dependencies": {
-    "@lezer/highlight": "^0.16.0"
+    "@lezer/highlight": "^1.2.0"
   },
   "devDependencies": {
-    "@lezer/generator": "^0.16.0"
+    "@lezer/generator": "^1.7.0"
   }
 }

shared/schemaGraph/package.json

@@ -4,10 +4,9 @@
   "version": "0.0.0",
   "license": "UNLICENSED",
   "peerDependencies": {
-    "@types/react": "^17.0.0",
     "edgedb": "1.6.0-canary.20241030T172506",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@edgedb/common": "workspace:*",

shared/studio/components/headerNav/elements.tsx

@@ -80,7 +80,7 @@ export interface HeaderNavColProps<LinkProps> {
       onMouseEnter?: () => void;
     }> &
       LinkProps
-  ) => JSX.Element;
+  ) => JSX.Element | null;
   showCursor?: boolean;
   closeDropdown: () => void;
   itemGroups: ({

shared/studio/package.json

@@ -4,15 +4,16 @@
   "private": true,
   "dependencies": {
     "@anthropic-ai/sdk": "^0.20.5",
-    "@codemirror/lang-json": "^0.20.0",
-    "@codemirror/lint": "^0.20.0",
+    "@codemirror/lang-json": "^6.0.0",
+    "@codemirror/lint": "^6.0.0",
     "@edgedb/code-editor": "workspace:*",
     "@edgedb/common": "workspace:*",
     "@edgedb/inspector": "workspace:*",
     "@edgedb/schema-graph": "workspace:*",
     "@fontsource-variable/roboto-flex": "^5.0.8",
     "@radix-ui/react-tooltip": "^1.0.5",
     "@sass-fairy/url": "^1.0.1",
+    "@types/react-window": "^1.8.8",
     "codemirror-graphql": "^1.3.0",
     "fuzzysort": "^2.0.1",
     "graphql": "^16.5.0",
@@ -23,7 +24,8 @@
     "react-colorful": "^5.6.1",
     "react-error-boundary": "^3.1.4",
     "react-hook-form": "^7.32.2",
-    "react-markdown": "^9.0.1"
+    "react-markdown": "^9.0.1",
+    "react-window": "^1.8.10"
   },
   "peerDependencies": {
     "edgedb": "1.6.0-canary.20241030T172506",

shared/studio/tabs/ai/index.tsx

@@ -1,6 +1,5 @@
 import {useEffect, useLayoutEffect, useState} from "react";
 import {Observer, observer} from "mobx-react-lite";
-import "@fontsource-variable/roboto-flex";
 
 import cn from "@edgedb/common/utils/classNames";
 import CodeBlock from "@edgedb/common/ui/codeBlock";

shared/studio/tabs/auth/loginUIPreview.tsx

@@ -1,5 +1,4 @@
 import {useEffect, useRef, useState} from "react";
-import "@fontsource-variable/roboto-flex";
 
 import cn from "@edgedb/common/utils/classNames";
 

web/jest.config.js

@@ -1,5 +1,10 @@
-module.exports = {
-  preset: "ts-jest",
+import {createDefaultPreset} from "ts-jest";
+
+const defaultPreset = createDefaultPreset({tsconfig: "./tests/tsconfig.json"});
+
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+export default {
+  ...defaultPreset,
   testEnvironment: "./tests/_testenv.js",
   globalSetup: "./tests/_globalSetup.ts",
   globalTeardown: "./tests/_globalTeardown.ts",

web/package.json

@@ -9,7 +9,8 @@
     "build": "vite build",
     "typecheck": "tsc -b",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "jest --runInBand"
   },
   "dependencies": {
     "@edgedb/code-editor": "workspace:*",
@@ -36,19 +37,18 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
     "@types/selenium-webdriver": "^4.1.10",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
+    "generic-names": "^4.0.0",
     "globals": "^15.11.0",
-    "jest": "^29.4.0",
+    "jest": "^29.7.0",
     "sass": "^1.49.9",
     "selenium-webdriver": "^4.8.0",
-    "ts-jest": "^29.0.5",
-    "typescript": "^5.0.2",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.6.0",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10"
   }

web/src/app.tsx

@@ -4,10 +4,8 @@ import {BrowserRouter, Route, Routes} from "react-router-dom";
 import "./fonts/include.scss";
 import styles from "./app.module.scss";
 
-// @ts-expect-error
-import "@fontsource-variable/roboto-flex";
-// @ts-expect-error
-import "@fontsource-variable/roboto-mono";
+import "@fontsource-variable/roboto-flex/index.css";
+import "@fontsource-variable/roboto-mono/index.css";
 
 import appState from "./state/store";
 import {appContext} from "./state/providers";
@@ -18,7 +16,7 @@ import {ModalProvider} from "@edgedb/common/hooks/useModal";
 import {HeaderNavProvider} from "@edgedb/studio/components/headerNav";
 import {GlobalTooltipsProvider} from "@edgedb/common/hooks/useTooltips";
 
-import Header from "./components/header";
+import {Header} from "./components/header";
 import Main from "./components/main";
 import LoginPage from "./components/loginPage";
 

web/src/components/databasePage/index.tsx

@@ -41,7 +41,7 @@ const tabs: DatabaseTabSpec[] = [
   aiTabSpec,
 ];
 
-export default observer(function DatabasePage() {
+export const DatabasePage = observer(function DatabasePage() {
   const appState = useAppState();
   const params = useParams();
 
@@ -90,7 +90,7 @@ function HeaderNavMenu({
       setDropdownOpen={setDropdownOpen}
     >
       <HeaderNavCol<{to: string}>
-        Link={Link as any}
+        Link={Link}
         closeDropdown={() => setDropdownOpen(false)}
         itemGroups={[
           {
@@ -125,7 +125,7 @@ function HeaderNavMenu({
   );
 }
 
-function RouterProvider({children}: PropsWithChildren<{}>) {
+function RouterProvider({children}: PropsWithChildren<unknown>) {
   const navigate = useNavigate();
   const location = useLocation();
 

web/src/components/header/index.tsx

@@ -11,7 +11,7 @@ export const Logo = ({className}: {className?: string}) => {
   return <LogoLocal className={cn(className, styles.logo)} />;
 };
 
-export default observer(function Header() {
+export const Header = observer(function Header() {
   return (
     <div className={styles.header}>
       <Logo />

web/src/components/instancePage/index.tsx

@@ -13,7 +13,7 @@ import {useAppState} from "../../state/providers";
 
 import styles from "./instancePage.module.scss";
 
-export default observer(function InstancePage() {
+export const InstancePage = observer(function InstancePage() {
   const instanceState = useAppState().instanceState;
   // const navigate = useNavigate();
   // const {openModal} = useModal();

web/src/components/main/index.tsx

@@ -10,10 +10,10 @@ import {useAppState} from "../../state/providers";
 import styles from "./main.module.scss";
 import headerNavStyles from "@edgedb/studio/components/headerNav/headerNav.module.scss";
 
-import InstancePage from "../instancePage";
-import DatabasePage from "../databasePage";
+import {InstancePage} from "../instancePage";
+import {DatabasePage} from "../databasePage";
 
-export default observer(function Main() {
+const Main = observer(function Main() {
   const appState = useAppState();
   const match = useMatch(":databaseName/*");
 
@@ -53,3 +53,5 @@ export default observer(function Main() {
     </>
   );
 });
+
+export default Main;

web/src/utils/scram.ts

@@ -1,6 +1,6 @@
-// @ts-ignore
+// @ts-expect-error No types available
 import * as SHA256 from "hash.js/lib/hash/sha/256";
-// @ts-ignore
+// @ts-expect-error No types available
 import * as Hmac from "hash.js/lib/hash/hmac";
 
 import {ProtocolError} from "edgedb";

web/tests/_globalSetup.ts

@@ -1,5 +1,5 @@
-import http from "http";
-import {ChildProcess, spawn} from "child_process";
+import * as http from "node:http";
+import {ChildProcess, spawn} from "node:child_process";
 
 import createClient, {AccessError, UnknownDatabaseError} from "edgedb";
 import Event from "edgedb/dist/primitives/event";
@@ -55,7 +55,7 @@ async function waitUntilAlive(
 
 async function checkUIServerAlive() {
   return new Promise<boolean>((resolve) => {
-    const req = http.get("http://127.0.0.1:3002/", (res) => {
+    const req = http.get("http://localhost:3002/ui", (res) => {
       if (res.statusCode === 200) {
         resolve(true);
       } else {
@@ -133,7 +133,6 @@ export default async function globalSetup() {
   } else {
     console.log("Starting UI server...");
     uiServerProc = spawn("yarn", ["dev"], {
-      // @ts-ignore
       env: {...process.env, NODE_ENV: undefined},
     }) as ChildProcess;
     uiServerProc.once("close", (code) => {
@@ -192,9 +191,7 @@ export default async function globalSetup() {
   }
   console.log("... Done");
 
-  // @ts-ignore
   globalThis.uiServerProc = uiServerProc;
-  // @ts-ignore
   globalThis.edgedbServerProc = edbServerProc;
 
   console.log("\n");

web/tests/_globalTeardown.ts

@@ -1,4 +1,4 @@
-import {ChildProcess} from "child_process";
+import {ChildProcess} from "node:child_process";
 
 function killProcess(proc: ChildProcess, signal?: number | NodeJS.Signals) {
   return new Promise<void>((resolve) => {
@@ -12,7 +12,6 @@ function killProcess(proc: ChildProcess, signal?: number | NodeJS.Signals) {
 }
 
 export default async function globalTeardown() {
-  // @ts-ignore
   const uiServerProc: ChildProcess = globalThis.uiServerProc;
 
   const waits: Promise<void>[] = [];
@@ -24,7 +23,6 @@ export default async function globalTeardown() {
     );
   }
 
-  // @ts-ignore
   const edbServerProc: ChildProcess = globalThis.edgedbServerProc;
 
   if (edbServerProc) {

web/tests/_testenv.js

@@ -1,7 +1,7 @@
-const NodeEnvironment = require("jest-environment-node").TestEnvironment;
+import {TestEnvironment as NodeEnvironment} from "jest-environment-node";
 
-const {Builder, By, until, Key, error} = require("selenium-webdriver");
-const chrome = require("selenium-webdriver/chrome");
+import {Builder, By, until, Key, error} from "selenium-webdriver";
+import chrome from "selenium-webdriver/chrome.js";
 
 let opts = new chrome.Options();
 
@@ -42,4 +42,4 @@ class SeleniumEnvironment extends NodeEnvironment {
   }
 }
 
-module.exports = SeleniumEnvironment;
+export default SeleniumEnvironment;

web/tests/global.d.ts

@@ -1,14 +1,11 @@
-import type {WebDriver} from "selenium-webdriver";
+import * as selenium from "selenium-webdriver";
 
 declare global {
-  const driver: WebDriver;
-  export {driver};
+  const driver: selenium.WebDriver;
 
-  export {
-    until,
-    By,
-    Key,
-    Condition,
-    error as SeleniumError,
-  } from "selenium-webdriver";
+  const until: typeof selenium.until;
+  const By: typeof selenium.By;
+  const Key: typeof selenium.Key;
+  const Condition: typeof selenium.Condition;
+  const SeleniumError: typeof selenium.error;
 }