@marimo-team/islands 0.23.11-dev9 → 0.23.11

package/src/components/app-config/data-form.tsx

@@ -5,7 +5,6 @@ import type { FieldPath, UseFormReturn } from "react-hook-form";
 import {
   FormControl,
   FormDescription,
-  FormField,
   FormItem,
   FormLabel,
   FormMessage,
@@ -19,25 +18,23 @@ import {
   SettingGroup,
   SQL_OUTPUT_SELECT_OPTIONS,
 } from "./common";
-import { IsOverridden } from "./is-overridden";
+import { IsOverridden, OverriddenFormField } from "./is-overridden";
 
 const DISCOVERY_OPTIONS = ["auto", "true", "false"];
 
 export const DataForm = ({
   form,
-  config,
   onSubmit,
 }: {
   form: UseFormReturn<UserConfig>;
-  config: UserConfig;
   onSubmit: (values: UserConfig) => void;
 }) => {
   const renderDiscoveryForm = (name: FieldPath<UserConfig>, label: string) => {
     return (
-      <FormField
+      <OverriddenFormField
         control={form.control}
         name={name}
-        render={({ field }) => {
+        render={({ field, override }) => {
           const onChange = (e: ChangeEvent<HTMLSelectElement>) => {
             const value = e.target.value;
             field.onChange(
@@ -54,9 +51,11 @@ export const DataForm = ({
                   data-testid="auto-discover-schemas-select"
                   onChange={onChange}
                   value={
-                    field.value === undefined ? "auto" : field.value.toString()
+                    override.value === undefined
+                      ? "auto"
+                      : override.value.toString()
                   }
-                  disabled={field.disabled}
+                  disabled={field.disabled || override.isOverridden}
                   className="w-[100px]"
                 >
                   {DISCOVERY_OPTIONS.map((option) => (
@@ -66,7 +65,7 @@ export const DataForm = ({
                   ))}
                 </NativeSelect>
               </FormControl>
-              <IsOverridden userConfig={config} name={name} />
+              <IsOverridden override={override} />
             </FormItem>
           );
         }}
@@ -76,10 +75,10 @@ export const DataForm = ({
 
   return (
     <>
-      <FormField
+      <OverriddenFormField
         control={form.control}
         name="display.dataframes"
-        render={({ field }) => (
+        render={({ field, override }) => (
           <div className="flex flex-col space-y-1">
             <FormItem className={formItemClasses}>
               <FormLabel>Dataframe viewer</FormLabel>
@@ -87,8 +86,8 @@ export const DataForm = ({
                 <NativeSelect
                   data-testid="display-dataframes-select"
                   onChange={(e) => field.onChange(e.target.value)}
-                  value={field.value}
-                  disabled={field.disabled}
+                  value={override.value}
+                  disabled={field.disabled || override.isOverridden}
                   className="inline-flex mr-2"
                 >
                   {["rich", "plain"].map((option) => (
@@ -99,7 +98,7 @@ export const DataForm = ({
                 </NativeSelect>
               </FormControl>
               <FormMessage />
-              <IsOverridden userConfig={config} name="display.dataframes" />
+              <IsOverridden override={override} />
             </FormItem>
 
             <FormDescription>
@@ -109,10 +108,10 @@ export const DataForm = ({
           </div>
         )}
       />
-      <FormField
+      <OverriddenFormField
         control={form.control}
         name="display.default_table_page_size"
-        render={({ field }) => (
+        render={({ field, override }) => (
           <div className="flex flex-col space-y-1">
             <FormItem className={formItemClasses}>
               <FormLabel>Default table page size</FormLabel>
@@ -122,7 +121,8 @@ export const DataForm = ({
                   data-testid="default-table-page-size-input"
                   className="m-0 w-24"
                   {...field}
-                  value={field.value}
+                  value={override.value}
+                  isDisabled={override.isOverridden}
                   minValue={1}
                   step={1}
                   onChange={(value) => {
@@ -134,10 +134,7 @@ export const DataForm = ({
                 />
               </FormControl>
               <FormMessage />
-              <IsOverridden
-                userConfig={config}
-                name="display.default_table_page_size"
-              />
+              <IsOverridden override={override} />
             </FormItem>
             <FormDescription>
               The default number of rows displayed in dataframes and SQL
@@ -146,10 +143,10 @@ export const DataForm = ({
           </div>
         )}
       />
-      <FormField
+      <OverriddenFormField
         control={form.control}
         name="display.default_table_max_columns"
-        render={({ field }) => (
+        render={({ field, override }) => (
           <div className="flex flex-col space-y-1">
             <FormItem className={formItemClasses}>
               <FormLabel>Default table max columns</FormLabel>
@@ -159,7 +156,8 @@ export const DataForm = ({
                   data-testid="default-table-max-columns-input"
                   className="m-0 w-24"
                   {...field}
-                  value={field.value}
+                  value={override.value}
+                  isDisabled={override.isOverridden}
                   minValue={1}
                   step={1}
                   onChange={(value) => {
@@ -171,10 +169,7 @@ export const DataForm = ({
                 />
               </FormControl>
               <FormMessage />
-              <IsOverridden
-                userConfig={config}
-                name="display.default_table_max_columns"
-              />
+              <IsOverridden override={override} />
             </FormItem>
             <FormDescription>
               The default maximum number of columns displayed in dataframes and
@@ -213,25 +208,23 @@ export const DataForm = ({
           {renderDiscoveryForm("datasources.auto_discover_columns", "Columns")}
         </div>
 
-        <FormField
+        <OverriddenFormField
           control={form.control}
           name="diagnostics.sql_linter"
-          render={({ field }) => (
+          render={({ field, override }) => (
             <div className="flex flex-col space-y-1">
               <FormItem className={formItemClasses}>
                 <FormLabel>SQL Linter</FormLabel>
                 <FormControl>
                   <Checkbox
                     data-testid="sql-linter-checkbox"
-                    checked={field.value}
+                    checked={override.value}
+                    disabled={override.isOverridden}
                     onCheckedChange={field.onChange}
                   />
                 </FormControl>
                 <FormMessage />
-                <IsOverridden
-                  userConfig={config}
-                  name="diagnostics.sql_linter"
-                />
+                <IsOverridden override={override} />
               </FormItem>
               <FormDescription>
                 Better linting and autocompletions for SQL cells.
@@ -240,10 +233,10 @@ export const DataForm = ({
           )}
         />
 
-        <FormField
+        <OverriddenFormField
           control={form.control}
           name="runtime.default_sql_output"
-          render={({ field }) => (
+          render={({ field, override }) => (
             <div className="flex flex-col space-y-1">
               <FormItem className={formItemClasses}>
                 <FormLabel>Default SQL output</FormLabel>
@@ -251,8 +244,8 @@ export const DataForm = ({
                   <NativeSelect
                     data-testid="user-config-sql-output-select"
                     onChange={(e) => field.onChange(e.target.value)}
-                    value={field.value}
-                    disabled={field.disabled}
+                    value={override.value}
+                    disabled={field.disabled || override.isOverridden}
                     className="inline-flex mr-2"
                   >
                     {SQL_OUTPUT_SELECT_OPTIONS.map((option) => (
@@ -263,10 +256,7 @@ export const DataForm = ({
                   </NativeSelect>
                 </FormControl>
                 <FormMessage />
-                <IsOverridden
-                  userConfig={config}
-                  name="runtime.default_sql_output"
-                />
+                <IsOverridden override={override} />
               </FormItem>
 
               <FormDescription>

package/src/components/app-config/is-overridden.tsx

@@ -1,36 +1,130 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
-import { get } from "lodash-es";
+import { get, has } from "lodash-es";
 import { FolderCog2 } from "lucide-react";
-import type { FieldPath } from "react-hook-form";
+import { useCallback } from "react";
+import type {
+  Control,
+  ControllerRenderProps,
+  FieldPath,
+  FieldPathValue,
+} from "react-hook-form";
+import { FormField } from "@/components/ui/form";
 import { Tooltip } from "@/components/ui/tooltip";
 import { configOverridesAtom, useUserConfig } from "@/core/config/config";
 import type { UserConfig } from "@/core/config/config-schema";
 import { Kbd } from "../ui/kbd";
 
+export interface ConfigOverride<T> {
+  isOverridden: boolean;
+  /**
+   * The effective value: the project config value when overridden, otherwise
+   * the user's own value.
+   */
+  value: T;
+  userValue: unknown;
+  projectValue: unknown;
+}
+
+function resolveOverride<T>({
+  userConfig,
+  overrides,
+  name,
+  value,
+}: {
+  userConfig: UserConfig;
+  overrides: unknown;
+  name: FieldPath<UserConfig>;
+  value: T;
+}): ConfigOverride<T> {
+  const userValue = get(userConfig, name);
+  const projectValue = get(overrides as UserConfig, name);
+  // A setting is overridden when the project config specifies the path at all
+  // (so it stays locked even if the value equals the user's, or is `null`).
+  const isOverridden = has(overrides, name);
+  return {
+    isOverridden,
+    userValue,
+    projectValue,
+    value: isOverridden ? (projectValue as T) : value,
+  };
+}
+
 /**
- * Hook to determine if a user config value is overridden by project config.
- * Returns { isOverridden, currentValue, overriddenValue }
+ * Returns a function that resolves a form field against the project config
+ * overrides (e.g. `pyproject.toml`).
+ *
+ * The returned function is a plain callback (not a hook), so it's safe to call
+ * inside `FormField` render callbacks and loops.
  */
-function useIsConfigOverridden(
-  userConfig: UserConfig,
+export function useConfigOverride(): <T>(
   name: FieldPath<UserConfig>,
-): {
-  isOverridden: boolean;
-  currentValue: unknown;
-  overriddenValue: unknown;
-} {
-  const currentValue = get(userConfig, name);
+  value: T,
+) => ConfigOverride<T> {
+  const [userConfig] = useUserConfig();
   const overrides = useAtomValue(configOverridesAtom);
-  const overriddenValue = get(overrides as UserConfig, name);
-
-  const isOverridden =
-    overriddenValue != null && currentValue !== overriddenValue;
+  return useCallback(
+    <T,>(name: FieldPath<UserConfig>, value: T): ConfigOverride<T> =>
+      resolveOverride({ userConfig, overrides, name, value }),
+    [userConfig, overrides],
+  );
+}
 
-  return { isOverridden, currentValue, overriddenValue };
+/**
+ * A `FormField` that resolves the field against the project config overrides.
+ */
+export function OverriddenFormField<TName extends FieldPath<UserConfig>>({
+  control,
+  name,
+  disabled,
+  render,
+}: {
+  control: Control<UserConfig>;
+  name: TName;
+  disabled?: boolean;
+  render: (args: {
+    field: ControllerRenderProps<UserConfig, TName>;
+    override: ConfigOverride<FieldPathValue<UserConfig, TName>>;
+  }) => React.ReactElement;
+}) {
+  const getOverride = useConfigOverride();
+  return (
+    <FormField
+      control={control}
+      name={name}
+      disabled={disabled}
+      render={({ field }) =>
+        render({
+          field,
+          // `field.value` is `FieldPathValue<UserConfig, TName>`, but the deep
+          // conditional type doesn't reduce for the compiler, so we narrow it.
+          override: getOverride(name, field.value) as ConfigOverride<
+            FieldPathValue<UserConfig, TName>
+          >,
+        })
+      }
+    />
+  );
 }
 
+/**
+ * Shared explanation shown in override tooltips, so the wording stays
+ * consistent across the badge and the disabled-wrapper.
+ */
+const OverriddenExplanation = () => (
+  <>
+    <p>
+      This setting is overridden by the{" "}
+      <Kbd className="inline mx-px">pyproject.toml</Kbd> config.
+    </p>
+    <p>
+      To change it, edit the project config{" "}
+      <Kbd className="inline mx-px">pyproject.toml</Kbd> directly.
+    </p>
+  </>
+);
+
 /**
  * Wraps a component and shows a tooltip if the user config is overridden by the
  * project config.
@@ -42,22 +136,13 @@ export const DisableIfOverridden = ({
   name: FieldPath<UserConfig>;
   children: React.ReactNode;
 }) => {
-  const [userConfig] = useUserConfig();
-  const { isOverridden } = useIsConfigOverridden(userConfig, name);
+  const { isOverridden } = useConfigOverride()(name, undefined);
   return isOverridden ? (
     <Tooltip
       delayDuration={200}
       content={
         <div className="flex flex-col gap-2">
-          <p>
-            This setting is overridden by the{" "}
-            <Kbd className="inline mx-px">pyproject.toml</Kbd> config.
-          </p>
-          <p>
-            To change it, edit the project config{" "}
-            <Kbd className="inline mx-px">pyproject.toml</Kbd>
-            directly.
-          </p>
+          <OverriddenExplanation />
         </div>
       }
     >
@@ -71,48 +156,30 @@ export const DisableIfOverridden = ({
 };
 
 export const IsOverridden = ({
-  userConfig,
-  name,
+  override,
 }: {
-  userConfig: UserConfig;
-  name: FieldPath<UserConfig>;
+  override: ConfigOverride<unknown>;
 }) => {
-  const { isOverridden, currentValue, overriddenValue } = useIsConfigOverridden(
-    userConfig,
-    name,
-  );
-
-  if (!isOverridden) {
+  if (!override.isOverridden) {
     return null;
   }
 
   return (
     <Tooltip
       content={
-        <>
-          <span>
-            This setting is overridden by{" "}
-            <Kbd className="inline">pyproject.toml</Kbd>.
-          </span>
-          <br />
-          <span>
-            Edit the <Kbd className="inline">pyproject.toml</Kbd> file directly
-            to change this setting.
-          </span>
-          <br />
-          <span>
-            User value: <strong>{String(currentValue)}</strong>
-          </span>
-          <br />
-          <span>
-            Project value: <strong>{String(overriddenValue)}</strong>
-          </span>
-        </>
+        <div className="flex flex-col gap-2">
+          <OverriddenExplanation />
+          <p>
+            User value: <strong>{String(override.userValue)}</strong>
+            <br />
+            Project value: <strong>{String(override.projectValue)}</strong>
+          </p>
+        </div>
       }
     >
       <span className="text-(--amber-12) text-xs flex items-center gap-1 border rounded px-2 py-1 bg-(--amber-2) border-(--amber-6) ml-1">
         <FolderCog2 className="w-3 h-3" />
-        Overridden by pyproject.toml [{String(overriddenValue)}]
+        Overridden by pyproject.toml
       </span>
     </Tooltip>
   );