Merge branch 'main' into ms/fix-debounce-re-render

Author: mscolnick

frontend/package.json

@@ -41,7 +41,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@glideapps/glide-data-grid": "6.0.4-alpha16",
-    "@hookform/resolvers": "^3.10.0",
+    "@hookform/resolvers": "^5.2.2",
     "@img-comparison-slider/react": "^8.0.2",
     "@internationalized/date": "^3.9.0",
     "@lezer/common": "^1.2.3",
@@ -170,7 +170,7 @@
     "vscode-jsonrpc": "^8.2.1",
     "vscode-languageserver-protocol": "^3.17.5",
     "web-vitals": "^4.2.4",
-    "zod": "^3.25.76"
+    "zod": "^4.1.11"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",

frontend/src/__tests__/main.test.tsx

@@ -4,8 +4,8 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
   type AppConfig,
+  defaultUserConfig,
   parseAppConfig,
-  parseUserConfig,
 } from "@/core/config/config-schema";
 import {
   appConfigAtom,
@@ -41,7 +41,7 @@ describe("main", () => {
     store.set(showCodeInRunModeAtom, false);
     store.set(marimoVersionAtom, "unknown");
     store.set(appConfigAtom, parseAppConfig({}));
-    store.set(userConfigAtom, parseUserConfig({}));
+    store.set(userConfigAtom, defaultUserConfig());
     store.set(configOverridesAtom, {});
   });
 
@@ -106,7 +106,7 @@ describe("main", () => {
       el,
     );
     expect(error).toBeUndefined();
-    expect(store.get(userConfigAtom)).toEqual(parseUserConfig({}));
+    expect(store.get(userConfigAtom)).toEqual(defaultUserConfig());
     expect(store.get(configOverridesAtom)).toEqual({});
     expect(store.get(appConfigAtom)).toEqual(parseAppConfig({}));
     expect(store.get(viewStateAtom).mode).toBe("edit");

frontend/src/components/app-config/ai-config.tsx

@@ -1168,15 +1168,20 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
           ))}
         </Tree>
       </div>
-      <AddModelForm form={form} customModels={customModels} />
+      <AddModelForm
+        form={form}
+        customModels={customModels}
+        onSubmit={onSubmit}
+      />
     </SettingGroup>
   );
 };
 
 export const AddModelForm: React.FC<{
   form: UseFormReturn<UserConfig>;
   customModels: QualifiedModelId[];
-}> = ({ form, customModels }) => {
+  onSubmit: (values: UserConfig) => void;
+}> = ({ form, customModels, onSubmit }) => {
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [modelAdded, setModelAdded] = useState(false);
   const [provider, setProvider] = useState<ProviderId | "custom" | null>(null);
@@ -1209,6 +1214,7 @@ export const AddModelForm: React.FC<{
     );
 
     form.setValue("ai.models.custom_models", [newModel.id, ...customModels]);
+    onSubmit(form.getValues());
     resetForm();
 
     // Show model added message for 2 seconds

frontend/src/components/app-config/app-config-form.tsx

@@ -2,6 +2,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useId } from "react";
 import { useForm } from "react-hook-form";
+import type { z } from "zod";
 import {
   Form,
   FormControl,
@@ -42,8 +43,10 @@ export const AppConfigForm: React.FC = () => {
   const ipynbCheckboxId = useId();
 
   // Create form
-  const form = useForm<AppConfig>({
-    resolver: zodResolver(AppConfigSchema),
+  const form = useForm({
+    resolver: zodResolver(
+      AppConfigSchema as unknown as z.ZodType<unknown, AppConfig>,
+    ),
     defaultValues: config,
   });
 

frontend/src/components/app-config/user-config-form.tsx

@@ -15,6 +15,7 @@ import {
 import React, { useId, useRef } from "react";
 import { useLocale } from "react-aria";
 import { useForm } from "react-hook-form";
+import type z from "zod";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -124,8 +125,10 @@ export const UserConfigForm: React.FC = () => {
   const { saveUserConfig } = useRequestClient();
 
   // Create form
-  const form = useForm<UserConfig>({
-    resolver: zodResolver(UserConfigSchema),
+  const form = useForm({
+    resolver: zodResolver(
+      UserConfigSchema as unknown as z.ZodType<unknown, UserConfig>,
+    ),
     defaultValues: config,
   });
 

frontend/src/components/data-table/filters.ts

@@ -92,6 +92,7 @@ export function filterToFilterCondition(
     return {
       column_id: columnId,
       operator: filter.operator,
+      value: undefined,
     };
   }
 
@@ -179,12 +180,14 @@ export function filterToFilterCondition(
         return {
           column_id: columnId,
           operator: "is_true",
+          value: undefined,
         };
       }
       if (!filter.value) {
         return {
           column_id: columnId,
           operator: "is_false",
+          value: undefined,
         };
       }
 

frontend/src/components/editor/chrome/wrapper/storage.ts

@@ -3,7 +3,7 @@ import type { PanelGroupStorage } from "react-resizable-panels";
 import { z } from "zod";
 import { Objects } from "@/utils/objects";
 
-const schema = z.record(z.tuple([z.number(), z.number()]));
+const schema = z.record(z.string(), z.tuple([z.number(), z.number()]));
 
 let storedValue: string | null = null;
 

frontend/src/components/editor/database/__tests__/as-code.test.ts

@@ -101,6 +101,7 @@ describe("generateDatabaseCode", () => {
       type: "REST",
       uri: "http://localhost:8181",
       warehouse: "/path/to/warehouse",
+      token: undefined,
     },
   };
 
@@ -130,6 +131,7 @@ describe("generateDatabaseCode", () => {
     catalog: {
       type: "Glue",
       warehouse: "/path/to/warehouse",
+      uri: undefined,
     },
   };
 

frontend/src/components/editor/database/add-database-form.tsx

@@ -60,7 +60,7 @@ interface Props {
 
 interface ConnectionSchema {
   name: string;
-  schema: z.ZodType;
+  schema: z.ZodType<DatabaseConnection>;
   color: string;
   logo: DBLogoName;
   connectionLibraries: {
@@ -237,7 +237,7 @@ const DATA_CATALOGS = [
 ] satisfies ConnectionSchema[];
 
 const DatabaseSchemaSelector: React.FC<{
-  onSelect: (schema: z.ZodType) => void;
+  onSelect: (schema: z.ZodType<DatabaseConnection>) => void;
 }> = ({ onSelect }) => {
   const renderItem = ({ name, schema, color, logo }: ConnectionSchema) => {
     return (
@@ -276,13 +276,15 @@ const DatabaseSchemaSelector: React.FC<{
 const RENDERERS: FormRenderer[] = [ENV_RENDERER];
 
 const DatabaseForm: React.FC<{
-  schema: z.ZodType;
+  schema: z.ZodType<DatabaseConnection>;
   onSubmit: () => void;
   onBack: () => void;
 }> = ({ schema, onSubmit, onBack }) => {
   const form = useForm<DatabaseConnection>({
     defaultValues: getDefaults(schema),
-    resolver: zodResolver(schema),
+    resolver: zodResolver(
+      schema as unknown as z.ZodType<unknown, DatabaseConnection>,
+    ),
     reValidateMode: "onChange",
   });
 
@@ -357,7 +359,8 @@ const DatabaseForm: React.FC<{
 };
 
 const AddDatabaseForm: React.FC<Props> = ({ onSubmit }) => {
-  const [selectedSchema, setSelectedSchema] = useState<z.ZodType | null>(null);
+  const [selectedSchema, setSelectedSchema] =
+    useState<z.ZodType<DatabaseConnection> | null>(null);
 
   if (!selectedSchema) {
     return <DatabaseSchemaSelector onSelect={setSelectedSchema} />;

frontend/src/components/editor/database/as-code.ts

@@ -514,7 +514,7 @@ class PyIcebergGenerator extends CodeGenerator<"iceberg"> {
   }
 
   generateConnectionCode(): string {
-    let options: Record<string, string | number | boolean> = {
+    let options: Record<string, string | number | boolean | undefined> = {
       ...this.connection.catalog,
     };
     // Remove k='type' and v=nullish values