ci: add typechecks for UI

.github/workflows/ci.yaml

@@ -44,7 +44,7 @@ jobs:
       with:
         token: ${{ secrets.CODECOV_TOKEN }}
 
-  lint-ui:
+  lint-and-typecheck-ui:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout code
@@ -65,6 +65,8 @@ jobs:
         node-version: "22.8.0"
         cache: "pnpm"
         cache-dependency-path: "**/pnpm-lock.yaml"
+    - name: Run typecheck
+      run: make typecheck-ui
     - name: Run linter
       run: make lint-ui
 
@@ -186,7 +188,7 @@ jobs:
       run: git diff --exit-code -- .
 
   build-image:
-    needs: [test-unit, lint-go, lint-charts, lint-proto, lint-ui, check-codegen]
+    needs: [test-unit, lint-go, lint-charts, lint-proto, lint-and-typecheck-ui, check-codegen]
     runs-on: ubuntu-latest
     services:
       registry:
@@ -218,7 +220,7 @@ jobs:
         cache-to: type=gha,mode=max
 
   build-cli:
-    needs: [test-unit, lint-go, lint-charts, lint-proto, lint-ui, check-codegen]
+    needs: [test-unit, lint-go, lint-charts, lint-proto, lint-and-typecheck-ui, check-codegen]
     runs-on: ubuntu-latest
     container:
       image: golang:1.23.3-bookworm

Makefile

@@ -96,6 +96,11 @@ lint-ui:
 	pnpm --dir=ui install --dev
 	pnpm --dir=ui run lint
 
+.PHONY: typecheck-ui
+typecheck-ui:
+	pnpm --dir=ui install
+	pnpm --dir=ui run typecheck
+
 .PHONY: format-ui
 format-ui:
 	pnpm --dir=ui install --dev

ui/src/features/common/code-editor/yaml-editor-lazy.tsx

@@ -89,6 +89,7 @@ const YamlEditor: FC<YamlEditorProps> = (props) => {
       validate: true,
       isKubernetes: true,
       format: true,
+      // @ts-expect-error correct schema
       schemas: schema && [
         {
           uri: `https://raw.githubusercontent.com/akuity/kargo/${__UI_VERSION__ && __UI_VERSION__ !== 'development' ? __UI_VERSION__ : 'main'}/ui/src/gen/schema/${resourceType || 'stages'}.kargo.akuity.io_v1alpha1.json`,

ui/src/features/project/credentials/create-credentials-modal.tsx

@@ -10,11 +10,11 @@ import { FieldContainer } from '@ui/features/common/form/field-container';
 import { ModalComponentProps } from '@ui/features/common/modal/modal-context';
 import { SegmentLabel } from '@ui/features/common/segment-label';
 import { dnsRegex } from '@ui/features/common/utils';
+import { Secret } from '@ui/gen/k8s.io/api/core/v1/generated_pb';
 import {
   createCredentials,
   updateCredentials
 } from '@ui/gen/service/v1alpha1/service-KargoService_connectquery';
-import { Secret } from '@ui/gen/v1alpha1/types_pb';
 import { zodValidators } from '@ui/utils/validators';
 
 import { constructDefaults, labelForKey, typeLabel } from './utils';
@@ -151,6 +151,7 @@ export const CreateCredentialsModal = ({ project, onSuccess, editing, init, ...p
             control={control}
           >
             {({ field }) => (
+              // @ts-expect-error repoUrlInRegex won't be here so no boolean only strings
               <Input
                 {...field}
                 type={key === 'password' ? 'password' : 'text'}

ui/src/features/project/credentials/utils.tsx

@@ -3,7 +3,7 @@ import { faAnchor, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 
 import { SegmentLabel } from '@ui/features/common/segment-label';
 import { DESCRIPTION_ANNOTATION_KEY } from '@ui/features/common/utils';
-import { Secret } from '@ui/gen/v1alpha1/types_pb';
+import { Secret } from '@ui/gen/k8s.io/api/core/v1/generated_pb';
 
 import { CredentialTypeLabelKey, CredentialsDataKey, CredentialsType } from './types';
 

ui/src/features/project/list/project-list-filter.tsx

@@ -20,13 +20,15 @@ export const ProjectListFilter = ({
   const navigate = useNavigate();
 
   const filteredProjects = data?.projects.filter((p) =>
-    p.metadata?.name.toLowerCase().includes(filter.toLowerCase())
+    p.metadata?.name?.toLowerCase().includes(filter.toLowerCase())
   );
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && filteredProjects?.length === 1) {
       const selectedProject = filteredProjects[0].metadata?.name;
-      navigate(paths.project.replace(':name', selectedProject));
+      if (selectedProject) {
+        navigate(paths.project.replace(':name', selectedProject));
+      }
     }
   };
 

ui/src/features/project/pipelines/nodes/freight-indicators.tsx

@@ -32,7 +32,7 @@ export const FreightIndicators = ({
             style={{
               width: '10px',
               height: '10px',
-              backgroundColor: warehouseColorMap[freight?.warehouse || '']
+              backgroundColor: warehouseColorMap[freight?.origin?.name || '']
             }}
             onClick={(e) => {
               e.stopPropagation();

ui/src/features/project/pipelines/utils/useImages.ts

@@ -12,24 +12,26 @@ export const useImages = (stages: Stage[]) => {
   return useMemo(() => {
     const images = new Map<string, Map<string, StageStyleMap>>();
     stages.forEach((stage) => {
-      const len = stage.status?.history?.length || 0;
-      stage.status?.history?.forEach((freight, i) => {
-        freight.images?.forEach((image) => {
-          let repo = image.repoURL ? images.get(image.repoURL) : undefined;
-          if (!repo) {
-            repo = new Map<string, StageStyleMap>();
-            images.set(image.repoURL!, repo);
-          }
-          let curStages = image.tag ? repo.get(image.tag) : undefined;
-          if (!curStages) {
-            curStages = {} as StageStyleMap;
-          }
-          curStages[stage.metadata?.name as string] = {
-            opacity: 1 - i / len,
-            backgroundColor: stageColorMap[stage.metadata?.name as string]
-          };
-          repo.set(image.tag!, curStages);
-        });
+      const len = stage.status?.freightHistory?.length || 0;
+      stage.status?.freightHistory?.forEach((freight, i) => {
+        for (const warehouseValue of Object.values(freight?.items)) {
+          warehouseValue.images?.forEach((image) => {
+            let repo = image.repoURL ? images.get(image.repoURL) : undefined;
+            if (!repo) {
+              repo = new Map<string, StageStyleMap>();
+              images.set(image.repoURL!, repo);
+            }
+            let curStages = image.tag ? repo.get(image.tag) : undefined;
+            if (!curStages) {
+              curStages = {} as StageStyleMap;
+            }
+            curStages[stage.metadata?.name as string] = {
+              opacity: 1 - i / len,
+              backgroundColor: stageColorMap[stage.metadata?.name as string]
+            };
+            repo.set(image.tag!, curStages);
+          });
+        }
       });
 
       const existingImages = getCurrentFreight(stage).flatMap((freight) => freight.images || []);

ui/tsconfig.json

@@ -21,5 +21,6 @@
       "@kargo-public/*": ["./public/*"]
     }
   },
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx"]
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["src/**/*.test.ts"]
 }