chore(Typecheck): Fail CI on new frontend type errors

.gitattributes

@@ -6,3 +6,6 @@ frontend/web/styles/_tokens.scss linguist-generated=true
 frontend/web/styles/_primitives.scss linguist-generated=true
 frontend/web/styles/_token-utilities.scss linguist-generated=true
 frontend/documentation/TokenReference.generated.stories.tsx linguist-generated=true
+
+# Generated by `npm run typecheck:baseline`.
+frontend/.tsc-baseline.json linguist-generated=true

.github/workflows/frontend-pull-request.yml

@@ -36,7 +36,7 @@ jobs:
         run: npm run test:unit -- --passWithNoTests
 
   lint:
-    name: Lint changed files
+    name: Lint and type check changed files
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -80,3 +80,18 @@ jobs:
           reporter: github-pr-check
           filter_mode: added
           fail_level: error
+
+      # Fails on type errors that aren't in .tsc-baseline.json, in the folders
+      # held at no new errors or in files this PR changed. After fixing errors,
+      # run `npm run typecheck:baseline` to shrink the baseline.
+      - name: Check for new type errors
+        env:
+          BASE_SHA: ${{ github.event.pull_request.base.sha }}
+        run: |
+          {
+            git ls-files 'web/components/base/*.ts' 'web/components/base/*.tsx'
+            git diff --name-only --relative "$BASE_SHA"...HEAD -- '*.ts' '*.tsx'
+          } > "$RUNNER_TEMP/ts-check-files.txt"
+          # tsc exits non-zero on type errors; fail only if it exited without reporting any.
+          npx tsc --noEmit --incremental false --pretty false > "$RUNNER_TEMP/tsc.txt" || grep -q 'error TS' "$RUNNER_TEMP/tsc.txt"
+          npx tsc-baseline check --changedFiles "$RUNNER_TEMP/ts-check-files.txt" < "$RUNNER_TEMP/tsc.txt"

frontend/common/hooks/useOverflowVisibleCount.ts

@@ -4,8 +4,8 @@ import { useState, useLayoutEffect, RefObject } from 'react'
 const GAP_MULTIPLIER = 5
 
 type UseOverflowVisibleCountOptions = {
-  outerContainerRef: RefObject<HTMLDivElement>
-  itemsContainerRef: RefObject<HTMLDivElement>
+  outerContainerRef: RefObject<HTMLDivElement | null>
+  itemsContainerRef: RefObject<HTMLDivElement | null>
   itemCount: number
   gap: number
   extraWidth: number

frontend/common/useOutsideClick.ts

@@ -1,7 +1,7 @@
 import { RefObject, useEffect } from 'react'
 
 const useOutsideClick = (
-  ref: RefObject<HTMLElement>,
+  ref: RefObject<HTMLElement | null>,
   handler: (event: MouseEvent | TouchEvent) => void,
 ) => {
   useEffect(() => {

frontend/package.json

@@ -27,6 +27,7 @@
     "lint:fix": "npx eslint --fix .",
     "start": "cross-env NODE_ENV=production node ./api/index",
     "typecheck": "tsc",
+    "typecheck:baseline": "tsc --noEmit --incremental false --pretty false | tsc-baseline save --exclude documentation/ --exclude .storybook/ --exclude '**/*.stories.tsx'",
     "dev": "cross-env npm run env && npx rspack serve -c ./rspack/rspack.config.local.js",
     "dev:local": "ENV=local cross-env npm run env && npx rspack serve -c ./rspack/rspack.config.local.js",
     "bundle": "npx rspack build -c ./rspack/rspack.config.prod.js",
@@ -184,6 +185,7 @@
     "storybook": "^10.3.3",
     "stylelint": "16.10.0",
     "ts-jest": "^29.4.6",
+    "tsc-baseline": "2.1.0",
     "typescript": "5.9.3"
   },
   "lint-staged": {

frontend/web/components/base/higher-order/FocusMonitor.tsx

@@ -9,7 +9,7 @@ import React, {
 } from 'react'
 
 interface FocusMonitorProps {
-  children: ReactElement
+  children: ReactElement<{ ref?: React.Ref<HTMLElement> }>
   isHover?: boolean
   onFocusChanged: (hasFocus: boolean) => void
 }

frontend/web/components/base/higher-order/ParameterizedRoute.tsx

@@ -32,22 +32,17 @@ export const ParameterizedRoute = ({
   return (
     <Route
       {...props}
-      render={(componentProps: RouteComponentProps) => (
+      render={(
+        componentProps: RouteComponentProps<{ environmentId?: string }>,
+      ) => (
         <RouteProvider
           value={{
             environmentId: componentProps.match.params.environmentId,
             organisationId: parsedOrganisationId,
             projectId: parsedProjectId,
           }}
         >
-          <EnvironmentReadyChecker
-            match={{
-              ...componentProps.match,
-              params: {
-                environmentId: componentProps.match.params.environmentId,
-              },
-            }}
-          >
+          <EnvironmentReadyChecker>
             <Component
               {...componentProps}
               match={{