@cosmicdrift/kumiko-bundled-features 0.43.0 → 0.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.43.0",
+  "version": "0.45.0",
   "description": "Built-in features — tenant, user, auth, delivery. The stuff you'd rewrite anyway, already typed.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",

package/src/custom-fields/web/__tests__/custom-fields-form-section.test.tsx

@@ -1,6 +1,7 @@
 import { describe, expect, mock, test } from "bun:test";
 import {
   createStaticLocaleResolver,
+  ExtensionFormRegistryProvider,
   LocaleProvider,
   PrimitivesProvider,
 } from "@cosmicdrift/kumiko-renderer";
@@ -382,3 +383,30 @@ describe("CustomFieldsFormSection — boolean/date-Pfade", () => {
     expect(trigger.textContent).not.toContain("—");
   });
 });
+
+describe("CustomFieldsFormSection — composed mode (Bug-Bash 3 #1)", () => {
+  test("Registry vorhanden → kein eigener Save-Button (Section schreibt am Haupt-Form mit)", () => {
+    mockedQueryRows = [
+      {
+        id: "f1",
+        entityName: "component",
+        fieldKey: "vendor",
+        type: "text",
+        required: false,
+        displayOrder: 1,
+      },
+    ];
+    const stubRegistry = { upsert: () => {}, remove: () => {} };
+    render(
+      <Wrapper>
+        <ExtensionFormRegistryProvider value={stubRegistry}>
+          <CustomFieldsFormSection entityName="component" entityId="row-42" />
+        </ExtensionFormRegistryProvider>
+      </Wrapper>,
+    );
+    // Inputs sind da …
+    expect(screen.getByTestId("custom-fields-form-section")).toBeTruthy();
+    // … aber KEIN standalone-Save-Button (composed: ein Save im Haupt-Form).
+    expect(screen.queryByTestId("custom-fields-form-save")).toBeNull();
+  });
+});

package/src/custom-fields/web/custom-fields-form-section.tsx

@@ -11,7 +11,9 @@
 // referenziert.
 
 import {
+  type ExtensionSubmitResult,
   useDispatcher,
+  useExtensionFormSubmit,
   usePrimitives,
   useQuery,
   useTranslation,
@@ -57,6 +59,61 @@ export function CustomFieldsFormSection({
   const [saving, setSaving] = useState(false);
   const [errorKey, setErrorKey] = useState<string | null>(null);
 
+  // Vor den early-returns berechnet, weil useExtensionFormSubmit (Hook) davor
+  // laufen muss. matchingFields ist während des Loadings []; dirty bleibt dann
+  // false. Dirty = weicht vom GESPEICHERTEN Wert ab (nicht von ""), sonst ist
+  // das Leeren eines Bestandswerts unsichtbar und würde übersprungen statt
+  // gecleart.
+  const matchingFields = (query.data?.rows ?? [])
+    .filter((f) => f.entityName === entityName)
+    .slice()
+    .sort((a, b) => a.displayOrder - b.displayOrder);
+  const initialDisplay = (field: (typeof matchingFields)[number]): string =>
+    displayValue(field.type, initialValues?.[field.fieldKey]);
+  const changedFields = matchingFields.filter((field) => {
+    const raw = pending[field.fieldKey];
+    return raw !== undefined && raw !== initialDisplay(field);
+  });
+  const dirty = changedFields.length > 0;
+
+  // Schreibt alle geänderten Felder via set/clear. Genutzt vom composed-Submit
+  // (Haupt-Form ruft den Handler nach dem Entity-Write) UND vom standalone-
+  // Button (wenn die Section ohne umgebende composed-Form gemountet ist).
+  const flushChanges = async (targetEntityId: string): Promise<ExtensionSubmitResult> => {
+    for (const field of changedFields) {
+      const raw = pending[field.fieldKey] ?? "";
+      const result =
+        raw === ""
+          ? await dispatcher.write(CustomFieldsHandlers.clearCustomField, {
+              entityName,
+              entityId: targetEntityId,
+              fieldKey: field.fieldKey,
+            })
+          : await dispatcher.write(CustomFieldsHandlers.setCustomField, {
+              entityName,
+              entityId: targetEntityId,
+              fieldKey: field.fieldKey,
+              value: coerceValue(field.type, raw),
+            });
+      if (!result.isSuccess) {
+        return {
+          isSuccess: false,
+          errorKey: result.error?.i18nKey ?? "custom-fields.errors.saveFailed",
+        };
+      }
+    }
+    setPending({});
+    return { isSuccess: true };
+  };
+
+  // composed = innerhalb eines entityEdit-Forms → kein eigener Save-Button,
+  // die Section schreibt beim Haupt-Save mit (Bug-Bash 3 #1). Außerhalb einer
+  // composed-Form (composed === false) bleibt der standalone-Button.
+  const composed = useExtensionFormSubmit({
+    dirty,
+    onSubmit: (ctx) => flushChanges(ctx.entityId),
+  });
+
   if (entityId === null) {
     return (
       <Banner variant="info" testId="custom-fields-form-create-mode">
@@ -78,12 +135,6 @@ export function CustomFieldsFormSection({
       </Banner>
     );
   }
-
-  const matchingFields = (query.data?.rows ?? [])
-    .filter((f) => f.entityName === entityName)
-    .slice()
-    .sort((a, b) => a.displayOrder - b.displayOrder);
-
   if (matchingFields.length === 0) {
     return (
       <Banner variant="info" testId="custom-fields-form-empty">
@@ -92,48 +143,19 @@ export function CustomFieldsFormSection({
     );
   }
 
-  // Dirty heißt: weicht vom GESPEICHERTEN Wert ab — nicht von "". Sonst ist
-  // das Leeren eines gespeicherten Werts unsichtbar (Button disabled) und
-  // handleSave würde es überspringen statt zu clearen.
-  const initialDisplay = (field: (typeof matchingFields)[number]): string =>
-    displayValue(field.type, initialValues?.[field.fieldKey]);
-  const changedFields = matchingFields.filter((field) => {
-    const raw = pending[field.fieldKey];
-    return raw !== undefined && raw !== initialDisplay(field);
-  });
-
-  const handleSave = async (): Promise<void> => {
+  const handleStandaloneSave = async (): Promise<void> => {
     setSaving(true);
     setErrorKey(null);
     try {
-      for (const field of changedFields) {
-        const raw = pending[field.fieldKey] ?? "";
-        const result =
-          raw === ""
-            ? await dispatcher.write(CustomFieldsHandlers.clearCustomField, {
-                entityName,
-                entityId,
-                fieldKey: field.fieldKey,
-              })
-            : await dispatcher.write(CustomFieldsHandlers.setCustomField, {
-                entityName,
-                entityId,
-                fieldKey: field.fieldKey,
-                value: coerceValue(field.type, raw),
-              });
-        if (!result.isSuccess) {
-          setErrorKey(result.error?.i18nKey ?? "custom-fields.errors.saveFailed");
-          return;
-        }
+      const result = await flushChanges(entityId);
+      if (!result.isSuccess) {
+        setErrorKey(result.errorKey ?? "custom-fields.errors.saveFailed");
       }
-      setPending({});
     } finally {
       setSaving(false);
     }
   };
 
-  const dirty = changedFields.length > 0;
-
   return (
     <div data-testid="custom-fields-form-section">
       {matchingFields.map((field) => (
@@ -150,15 +172,17 @@ export function CustomFieldsFormSection({
           )}
         </Field>
       ))}
-      <Button
-        variant="primary"
-        onClick={() => void handleSave()}
-        disabled={saving || !dirty}
-        testId="custom-fields-form-save"
-      >
-        {saving ? t("custom-fields.form.saving") : t("custom-fields.form.save")}
-      </Button>
-      {errorKey !== null && (
+      {!composed && (
+        <Button
+          variant="primary"
+          onClick={() => void handleStandaloneSave()}
+          disabled={saving || !dirty}
+          testId="custom-fields-form-save"
+        >
+          {saving ? t("custom-fields.form.saving") : t("custom-fields.form.save")}
+        </Button>
+      )}
+      {!composed && errorKey !== null && (
         <Banner variant="error" testId="custom-fields-form-save-error">
           <Text>{t(errorKey)}</Text>
         </Banner>

package/src/user-profile/web/profile-screen.tsx

@@ -83,7 +83,10 @@ function ChangePasswordSection(): ReactNode {
 
   const submitting = status.kind === "submitting";
   return (
-    <section data-testid="profile-password" className="flex flex-col gap-4">
+    <section
+      data-testid="profile-password"
+      className="flex flex-col gap-4 rounded-lg border bg-card p-6"
+    >
       <Heading variant="section">{t("profile.password.title")}</Heading>
       <Form onSubmit={onSubmit} testId="profile-password-form">
         <Field id="profile-old-password" label={t("profile.password.old")} required>
@@ -170,7 +173,10 @@ function ChangeEmailSection({
 
   const submitting = status.kind === "submitting";
   return (
-    <section data-testid="profile-email" className="flex flex-col gap-4">
+    <section
+      data-testid="profile-email"
+      className="flex flex-col gap-4 rounded-lg border bg-card p-6"
+    >
       <Heading variant="section">{t("profile.email.title")}</Heading>
       <p className="text-sm text-muted-foreground" data-testid="profile-email-current">
         {t("profile.email.current")}: {me.email}
@@ -245,7 +251,10 @@ function DangerZoneSection({
   };
 
   return (
-    <section data-testid="profile-danger" className="flex flex-col gap-4">
+    <section
+      data-testid="profile-danger"
+      className="flex flex-col gap-4 rounded-lg border border-destructive/40 bg-card p-6"
+    >
       <Heading variant="section">{t("profile.danger.title")}</Heading>
       {deletionRequested ? (
         <>
@@ -316,7 +325,7 @@ export function ProfileScreen(): ReactNode {
   };
 
   return (
-    <div className="p-6 flex flex-col gap-10 max-w-xl" data-testid="profile-screen">
+    <div className="p-6 flex flex-col gap-6 max-w-2xl" data-testid="profile-screen">
       <Heading variant="page">{t("profile.title")}</Heading>
       <ChangeEmailSection me={me} onChanged={refetch} />
       <ChangePasswordSection />