@cosmicdrift/kumiko-renderer 0.258.1 → 0.260.0

package/src/components/__tests__/related-list-section.test.tsx

@@ -1,10 +1,13 @@
 import { describe, expect, spyOn, test } from "bun:test";
-import type { RowAction } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { EntityEditScreenDefinition, RowAction } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher, EditRelatedListSectionViewModel } from "@cosmicdrift/kumiko-headless";
 import { fireEvent, render, screen as rtlScreen, waitFor } from "@testing-library/react";
 import type { ComponentType, ReactNode } from "react";
+import { AppFeaturesProvider } from "../../app/app-features-context";
+import type { FeatureSchema } from "../../app/feature-schema";
 import { type NavApi, NavProvider } from "../../app/nav";
 import { DispatcherProvider } from "../../context/dispatcher-context";
+import { UserRolesProvider } from "../../context/user-roles-context";
 import { createStaticLocaleResolver, LocaleProvider } from "../../i18n";
 import { kumikoDefaultTranslations } from "../../i18n-defaults";
 import {
@@ -938,3 +941,118 @@ describe("RelatedListSection — search + facets (fw#2740)", () => {
     ]);
   });
 });
+
+// Same findEditScreenFor/buildDefaultEditRowAction resolution as
+// entityList/projectionList, driven by rowClick.entity and rowClick.idColumn.
+describe("RelatedListSection — default edit row action", () => {
+  function editScreen(entity: string, roles?: readonly string[]): EntityEditScreenDefinition {
+    return {
+      id: "lease:screen:item-edit",
+      type: "entityEdit",
+      entity,
+      layout: { sections: [{ columns: 1, fields: ["name"] }] },
+      ...(roles !== undefined && { access: { roles } }),
+    };
+  }
+
+  function renderWithFeatures(
+    section: EditRelatedListSectionViewModel,
+    dispatcher: Dispatcher,
+    features: readonly FeatureSchema[],
+    userRoles: readonly string[] = [],
+    nav: NavApi = stubNav().nav,
+  ) {
+    return render(
+      <LocaleProvider
+        resolver={createStaticLocaleResolver({ locale: "en-US" })}
+        fallbackBundles={[kumikoDefaultTranslations]}
+      >
+        <DispatcherProvider dispatcher={dispatcher}>
+          <AppFeaturesProvider features={features}>
+            <UserRolesProvider roles={userRoles}>
+              <PrimitivesProvider value={testPrimitives()}>
+                <NavProvider value={nav}>
+                  <RelatedListSection section={section} parentId="order-1" featureName="orders" />
+                </NavProvider>
+              </PrimitivesProvider>
+            </UserRolesProvider>
+          </AppFeaturesProvider>
+        </DispatcherProvider>
+      </LocaleProvider>,
+    );
+  }
+
+  const sectionWithRowClick: EditRelatedListSectionViewModel = {
+    kind: "relatedList",
+    title: "Positions",
+    query: "lease:query:items:list",
+    columns: [{ field: "name" }],
+    rowClick: { entity: "item" },
+  };
+
+  test("adds a default edit action at the first position when rowClick.entity resolves an entityEdit screen", async () => {
+    const { dispatcher } = stubDispatcher();
+    const { nav, navigations } = stubNav();
+    const schema: FeatureSchema = {
+      featureName: "lease",
+      entities: {},
+      screens: [editScreen("item")],
+    };
+    renderWithFeatures(sectionWithRowClick, dispatcher, [schema], [], nav);
+
+    await waitFor(() => expect(rtlScreen.getByTestId("row-r1")).toBeTruthy());
+    const editButton = rtlScreen.getByTestId("action-edit-r1");
+    expect(editButton.textContent).toBe("Edit");
+
+    fireEvent.click(editButton);
+    await waitFor(() => expect(navigations).toHaveLength(1));
+    expect(navigations[0]).toEqual({ screenId: "item-edit", entityId: "r1" });
+  });
+
+  test("a declared rowAction with id 'edit' wins — no doubling", async () => {
+    const { dispatcher } = stubDispatcher();
+    const schema: FeatureSchema = {
+      featureName: "lease",
+      entities: {},
+      screens: [editScreen("item")],
+    };
+    renderWithFeatures(
+      {
+        ...sectionWithRowClick,
+        rowActions: [{ kind: "navigate", id: "edit", label: "custom-edit", screen: "item-edit" }],
+      },
+      dispatcher,
+      [schema],
+    );
+
+    await waitFor(() => expect(rtlScreen.getByTestId("row-r1")).toBeTruthy());
+    expect(rtlScreen.queryAllByTestId("action-edit-r1")).toHaveLength(1);
+    expect(rtlScreen.getByTestId("action-edit-r1").textContent).toBe("custom-edit");
+  });
+
+  test("no rowClick.entity → no default edit action", async () => {
+    const { dispatcher } = stubDispatcher();
+    const schema: FeatureSchema = {
+      featureName: "lease",
+      entities: {},
+      screens: [editScreen("item")],
+    };
+    renderWithFeatures({ ...sectionWithRowClick, rowClick: undefined }, dispatcher, [schema]);
+
+    await waitFor(() => expect(rtlScreen.getByTestId("row-r1")).toBeTruthy());
+    expect(rtlScreen.queryByTestId("action-edit-r1")).toBeNull();
+  });
+
+  test("access denied to the entityEdit screen → no default edit action", async () => {
+    const { dispatcher } = stubDispatcher();
+    const schema: FeatureSchema = {
+      featureName: "lease",
+      entities: {},
+      screens: [editScreen("item", ["admin"])],
+    };
+    renderWithFeatures(sectionWithRowClick, dispatcher, [schema]);
+
+    await waitFor(() => expect(rtlScreen.getByTestId("row-r1")).toBeTruthy());
+    expect(rtlScreen.queryByTestId("action-edit-r1")).toBeNull();
+  });
+});

package/src/components/related-list-section.tsx

@@ -11,15 +11,22 @@ import type {
   Translate,
 } from "@cosmicdrift/kumiko-headless";
 import { type ReactNode, useCallback, useMemo, useState } from "react";
+import { useAppFeatures } from "../app/app-features-context";
 import {
   buildFilterFacets,
   buildFilterPayload,
   resolveProjectionFacetSpecs,
 } from "../app/list-facets";
 import { useNav } from "../app/nav";
-import { buildProjectionRowActions, runProjectionRowNavigate } from "../app/row-actions";
+import {
+  buildDefaultEditRowAction,
+  buildProjectionRowActions,
+  runProjectionRowNavigate,
+} from "../app/row-actions";
+import { findEditScreenFor } from "../app/screen-access";
 import { dispatcherErrorText } from "../app/write-failed-error";
 import { useOptionalDispatcher } from "../context/dispatcher-context";
+import { useUserRoles } from "../context/user-roles-context";
 import type { ListSort } from "../hooks/use-list-url-state";
 import { useQuery } from "../hooks/use-query";
 import { useTranslation } from "../i18n";
@@ -79,6 +86,17 @@ export function RelatedListSection({
   const effectiveTranslate = translate ?? t;
   const nav = useNav();
   const dispatcher = useOptionalDispatcher();
+  const appFeatures = useAppFeatures();
+  const userRoles = useUserRoles();
+  const defaultEditScreen = useMemo(() => {
+    const targetEntity = section.rowClick?.entity;
+    if (targetEntity === undefined) return undefined;
+    return findEditScreenFor(targetEntity, appFeatures, userRoles);
+  }, [appFeatures, section.rowClick, userRoles]);
+  const defaultEditRowAction = useMemo(
+    () => buildDefaultEditRowAction(defaultEditScreen, section.rowClick?.idColumn ?? "id"),
+    [defaultEditScreen, section.rowClick],
+  );
 
   const entity = useMemo(() => synthesizeRelatedListEntity(section.columns), [section.columns]);
   const listScreen = useMemo(
@@ -195,8 +213,17 @@ export function RelatedListSection({
         nav,
         refetch: rowsQuery.refetch,
         openDrawer: onOpenDrawer,
+        defaultEditRowAction,
       }),
-    [section.rowActions, effectiveTranslate, dispatcher, nav, rowsQuery.refetch, onOpenDrawer],
+    [
+      section.rowActions,
+      effectiveTranslate,
+      dispatcher,
+      nav,
+      rowsQuery.refetch,
+      onOpenDrawer,
+      defaultEditRowAction,
+    ],
   );
 
   // A truncated fetch means `sortedRows` is a sort of a partial set, not of

package/src/components/render-edit.tsx

@@ -1,6 +1,7 @@
 import type {
   EntityEditScreenDefinition,
   FieldCondition,
+  PlatformComponent,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import {
   evalFieldCondition,
@@ -190,6 +191,53 @@ function ExtensionSectionMount({
   );
 }
 
+// Resolves an entityEdit slot's (`screen.slots.header` / `.footer`)
+// `{ react: { __component: "X" } }` marker via the same ExtensionSectionsProvider
+// registry as ExtensionSectionMount / ListHeaderSlotMount and mounts it. One
+// component for both slots — header passes no hasUnsavedChanges/wizardStep,
+// footer does. Own component for rules-of-hooks (useExtensionSectionComponent
+// must not run conditionally inside RenderEdit's render body).
+function EditSlotMount({
+  slot,
+  slotName,
+  screenId,
+  entityName,
+  entityId,
+  values,
+  hasUnsavedChanges,
+  wizardStep,
+}: {
+  readonly slot: PlatformComponent;
+  readonly slotName: "header" | "footer";
+  readonly screenId: string;
+  readonly entityName: string;
+  readonly entityId: string | null;
+  readonly values: Readonly<Record<string, unknown>>;
+  readonly hasUnsavedChanges?: boolean;
+  readonly wizardStep?: { readonly index: number; readonly isLast: boolean };
+}): ReactNode {
+  const name = extensionSectionName(slot);
+  const Component = useExtensionSectionComponent(name);
+  useEffect(() => {
+    if (name !== undefined && Component === undefined) {
+      // biome-ignore lint/suspicious/noConsole: dev warning for a setup error
+      console.warn(
+        `[kumiko] Edit ${slotName} slot component "${name}" on screen "${screenId}" is not registered in clientFeatures.extensionSectionComponents — the ${slotName} slot renders nothing.`,
+      );
+    }
+  }, [name, Component, screenId, slotName]);
+  if (Component === undefined) return null;
+  return (
+    <Component
+      entityName={entityName}
+      entityId={entityId}
+      values={values}
+      {...(hasUnsavedChanges !== undefined && { hasUnsavedChanges })}
+      {...(wizardStep !== undefined && { wizardStep })}
+    />
+  );
+}
+
 export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
   props: RenderEditProps<TValues, TCtx>,
 ): ReactNode {
@@ -1016,6 +1064,30 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
       )}
     </>
   );
+  const headerSlot = screen.slots?.header;
+  const headerSlotMount =
+    headerSlot !== undefined ? (
+      <EditSlotMount
+        slot={headerSlot}
+        slotName="header"
+        screenId={screen.id}
+        entityName={vm.entityName}
+        entityId={resolveExtensionEntityId(entityIdProp, vm.id)}
+        values={snapshot.values}
+      />
+    ) : undefined;
+  // Slot renders above the caller's own headerRegion; without slots.header
+  // this is bit-identical to the plain headerRegion prop below.
+  const formHeaderRegion =
+    headerSlotMount !== undefined ? (
+      <>
+        {headerSlotMount}
+        {headerRegion}
+      </>
+    ) : (
+      headerRegion
+    );
+  const footerSlot = screen.slots?.footer;
   // Mirrors every branch inside formActions below — without this guard
   // DefaultForm renders an empty footer strip (border + padding, no content)
   // on read-only detail screens, since `actions` would otherwise always be
@@ -1024,7 +1096,8 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
     (isWizard && currentStep > 0) ||
     (isWizard && !isLastWizardStep) ||
     ((isFormEditable || hasExtensionRegistrations || isFieldless) &&
-      (!isWizard || isLastWizardStep));
+      (!isWizard || isLastWizardStep)) ||
+    footerSlot !== undefined;
   const formActions = (
     <>
       {isWizard && currentStep > 0 && (
@@ -1038,6 +1111,18 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
           {translate("kumiko.actions.back")}
         </Button>
       )}
+      {footerSlot !== undefined && (
+        <EditSlotMount
+          slot={footerSlot}
+          slotName="footer"
+          screenId={screen.id}
+          entityName={vm.entityName}
+          entityId={resolveExtensionEntityId(entityIdProp, vm.id)}
+          values={snapshot.values}
+          hasUnsavedChanges={snapshot.isDirty || extensionDirty}
+          wizardStep={isWizard ? { index: currentStep, isLast: isLastWizardStep } : undefined}
+        />
+      )}
       {isWizard && !isLastWizardStep && (
         <Button
           type="submit"
@@ -1108,7 +1193,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
         testId="render-edit-form"
         stickyActions={isWizard}
         {...(screen.layout.width !== undefined && { width: screen.layout.width })}
-        {...(headerRegion !== undefined && { headerRegion })}
+        {...(formHeaderRegion !== undefined && { headerRegion: formHeaderRegion })}
         {...(fillHeight && { fillHeight })}
         {...(hideSectionTitles === true && { chromeless: true })}
       >

package/src/index.ts

@@ -81,6 +81,8 @@ export {
   useNav,
 } from "./app/nav";
 export { lastSegment } from "./app/qn";
+export type { EmbeddedScreenTarget } from "./app/use-embedded-screen";
+export { useEmbeddedScreen } from "./app/use-embedded-screen";
 export type { VariableChipsProps } from "./app/variable-chips";
 export { VariableChips } from "./app/variable-chips";
 export { dispatcherErrorText, WriteFailedError } from "./app/write-failed-error";

package/src/primitives.tsx

@@ -476,6 +476,9 @@ export type InputProps =
       /** Read-only Textarea. Nicht `disabled` — bleibt fokussier-/
        *  kopierbar (analog zu kind:"text"). */
       readonly readOnly?: boolean;
+      /** Ctrl/Cmd+Enter submits instead of inserting a newline. Plain
+       *  Enter still inserts a newline. */
+      readonly onSubmitShortcut?: () => void;
     };
 
 // Sort-Wire-Format. `null`-State unterscheidet "User hat noch nichts