@cosmicdrift/kumiko-renderer 0.233.0 → 0.235.0

package/src/app/secrets-edit-body.tsx

@@ -0,0 +1,190 @@
+import type { SecretsEditScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Translate } from "@cosmicdrift/kumiko-headless";
+import { type ReactNode, useCallback, useMemo, useState } from "react";
+import { useDispatcher } from "../context/dispatcher-context";
+import { useQuery } from "../hooks/use-query";
+import { useTranslation } from "../i18n";
+import { usePrimitives } from "../primitives";
+import { dispatcherErrorText } from "./write-failed-error";
+
+type SecretListRow = {
+  readonly key: string;
+  readonly redactedPreview: string | null;
+  readonly hint: string | null;
+};
+
+export type SecretsEditBodyProps = {
+  readonly screen: SecretsEditScreenDefinition;
+  readonly translate?: Translate;
+};
+
+// secrets:query:list never returns plaintext (only a redacted preview), so
+// unlike ConfigEditBody there is no server value to pre-fill a draft with —
+// every input starts at "" and stays that way unless the user types into it.
+export function SecretsEditBody({ screen, translate }: SecretsEditBodyProps): ReactNode {
+  const { Banner, Form, Section, Field, Input, Button, Text } = usePrimitives();
+  const t = useTranslation();
+  const effectiveTranslate = translate ?? t;
+  const dispatcher = useDispatcher();
+  const listQuery = useQuery<readonly SecretListRow[]>("secrets:query:list", {});
+
+  const [drafts, setDrafts] = useState<Readonly<Record<string, string>>>({});
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const rowsByQualifiedKey = useMemo(() => {
+    const out = new Map<string, SecretListRow>();
+    for (const row of listQuery.data ?? []) out.set(row.key, row);
+    return out;
+  }, [listQuery.data]);
+
+  const setDraft = useCallback((fieldId: string, value: string) => {
+    setDrafts((prev) => ({ ...prev, [fieldId]: value }));
+  }, []);
+
+  const handleSubmit = useCallback(async (): Promise<void> => {
+    const commands = Object.entries(screen.secretKeys).flatMap(([fieldId, qualified]) => {
+      const value = drafts[fieldId]?.trim();
+      return value ? [{ type: "secrets:write:set", payload: { key: qualified, value } }] : [];
+    });
+    if (commands.length === 0) return;
+    setSubmitting(true);
+    setSubmitError(null);
+    const result = await dispatcher.batch(commands);
+    setSubmitting(false);
+    if (!result.isSuccess) {
+      setSubmitError(dispatcherErrorText(result.error, effectiveTranslate));
+      return;
+    }
+    setDrafts({});
+    await listQuery.refetch();
+  }, [dispatcher, drafts, screen.secretKeys, listQuery.refetch, effectiveTranslate]);
+
+  const handleDelete = useCallback(
+    async (qualified: string): Promise<void> => {
+      const result = await dispatcher.write("secrets:write:delete", { key: qualified });
+      if (!result.isSuccess) {
+        setSubmitError(dispatcherErrorText(result.error, effectiveTranslate));
+        return;
+      }
+      await listQuery.refetch();
+    },
+    [dispatcher, listQuery.refetch, effectiveTranslate],
+  );
+
+  if (listQuery.loading && listQuery.data === null) {
+    return (
+      <Banner padded variant="loading" testId="kumiko-screen-loading">
+        Loading…
+      </Banner>
+    );
+  }
+  if (listQuery.error) {
+    return (
+      <Banner padded variant="error" testId="kumiko-screen-error">
+        {dispatcherErrorText(listQuery.error, effectiveTranslate)}
+      </Banner>
+    );
+  }
+
+  return (
+    <Form
+      onSubmit={() => {
+        void handleSubmit();
+      }}
+      testId="secrets-edit-form"
+      actions={
+        <Button
+          type="submit"
+          variant="primary"
+          loading={submitting}
+          disabled={submitting}
+          testId="secrets-edit-submit"
+        >
+          {effectiveTranslate("kumiko.actions.save")}
+        </Button>
+      }
+    >
+      {submitError !== null && (
+        <Banner variant="error" testId="secrets-edit-error">
+          {submitError}
+        </Banner>
+      )}
+      {screen.sections.map((section, index) => (
+        <Section
+          key={section.title ?? `section-${index}`}
+          {...(section.title !== undefined && { title: effectiveTranslate(section.title) })}
+        >
+          {section.fields.map((fieldId) => {
+            const qualified = screen.secretKeys[fieldId];
+            if (qualified === undefined) return null;
+            const row = rowsByQualifiedKey.get(qualified);
+            const hintKey = screen.fieldHints?.[fieldId];
+            const isRequired = screen.requiredFields?.includes(fieldId) ?? false;
+            return (
+              <Field
+                key={fieldId}
+                id={fieldId}
+                label={effectiveTranslate(screen.fieldLabels[fieldId] ?? fieldId)}
+                required={isRequired}
+                testId={`field-${fieldId}`}
+                fieldAppendix={
+                  <>
+                    {hintKey !== undefined && (
+                      <Text variant="small">{effectiveTranslate(hintKey)}</Text>
+                    )}
+                    {row !== undefined ? (
+                      <>
+                        <Text variant="small" testId={`secret-preview-${fieldId}`}>
+                          {row.redactedPreview ?? effectiveTranslate("config.secrets.set")}
+                        </Text>
+                        <Button
+                          type="button"
+                          variant="danger-ghost"
+                          size="sm"
+                          onClick={() => handleDelete(qualified)}
+                          testId={`secret-delete-${fieldId}`}
+                        >
+                          {effectiveTranslate("config.secrets.delete")}
+                        </Button>
+                      </>
+                    ) : (
+                      <>
+                        <Text variant="small" testId={`secret-not-set-${fieldId}`}>
+                          {effectiveTranslate("config.secrets.notSet")}
+                        </Text>
+                        {isRequired && (
+                          <Text variant="small" testId={`required-marker-${fieldId}`}>
+                            {effectiveTranslate("config.secrets.required")}
+                          </Text>
+                        )}
+                      </>
+                    )}
+                  </>
+                }
+              >
+                <Text variant="small">
+                  {effectiveTranslate(
+                    row !== undefined
+                      ? "config.secrets.replacePlaceholder"
+                      : "config.secrets.placeholder",
+                  )}
+                </Text>
+                <Input
+                  kind="password"
+                  id={fieldId}
+                  name={fieldId}
+                  value={drafts[fieldId] ?? ""}
+                  onChange={(v) => setDraft(fieldId, v)}
+                  autoComplete="new-password"
+                  disabled={submitting}
+                  testId={`secret-input-${fieldId}`}
+                />
+              </Field>
+            );
+          })}
+        </Section>
+      ))}
+    </Form>
+  );
+}

package/src/components/__tests__/render-field-icon-derivation.test.tsx

@@ -0,0 +1,119 @@
+// Fields without a declared icon derive one from the field name — mirrors
+// ACTION_ICON_BY_ID/resolveActionIcon (kumiko-screen.tsx) for fields. Only
+// kind:"text" (single-line) and kind:"number" structurally carry an icon
+// prop, so that's what these tests assert against.
+
+import { describe, expect, test } from "bun:test";
+import type { EditFieldViewModel } from "@cosmicdrift/kumiko-headless";
+import { render } from "@testing-library/react";
+import type { ComponentType, ReactNode } from "react";
+import { createStaticLocaleResolver, LocaleProvider } from "../../i18n";
+import { type CorePrimitives, type InputProps, PrimitivesProvider } from "../../primitives";
+import { RenderField } from "../render-field";
+
+let captured: InputProps | undefined;
+const captureInput: ComponentType<InputProps> = (props) => {
+  captured = props;
+  return null;
+};
+const noop = (): ReactNode => null;
+const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
+
+const testPrimitives: CorePrimitives = {
+  Button: noop,
+  Banner: noop,
+  Field: passChildren,
+  Input: captureInput,
+  DataTable: noop,
+  Form: noop,
+  Section: noop,
+  Card: noop,
+  Grid: noop,
+  GridCell: noop,
+  Text: noop,
+  Heading: noop,
+  Dialog: noop,
+  Modal: noop,
+  Lightbox: noop,
+  ConfigSourceBadge: noop,
+  ConfigCascadeView: noop,
+  Link: noop,
+};
+
+function textField(overrides: Partial<EditFieldViewModel> = {}): EditFieldViewModel {
+  return {
+    field: "name",
+    label: "Name",
+    type: "text",
+    value: "",
+    visible: true,
+    readOnly: false,
+    required: false,
+    ...overrides,
+  };
+}
+
+function renderField(field: EditFieldViewModel): void {
+  captured = undefined;
+  render(
+    <LocaleProvider resolver={createStaticLocaleResolver({ locale: "en-US" })}>
+      <PrimitivesProvider value={testPrimitives}>
+        <RenderField field={field} onChange={() => {}} />
+      </PrimitivesProvider>
+    </LocaleProvider>,
+  );
+}
+
+describe("RenderField — icon derivation from field name/type", () => {
+  test("field named 'email' with no declared icon renders the mail icon", () => {
+    renderField(textField({ field: "email" }));
+    expect(captured?.kind).toBe("text");
+    if (captured?.kind === "text") expect(captured.icon).toBe("mail");
+  });
+
+  test("a declared field.icon overrides the derivation", () => {
+    renderField(textField({ field: "email", icon: "lock" }));
+    expect(captured?.kind).toBe("text");
+    if (captured?.kind === "text") expect(captured.icon).toBe("lock");
+  });
+
+  test("a generic text field with no recognizable name gets no icon", () => {
+    renderField(textField({ field: "foo" }));
+    expect(captured?.kind).toBe("text");
+    if (captured?.kind === "text") expect(captured.icon).toBeUndefined();
+  });
+
+  test("a boolean field gets no icon", () => {
+    renderField({
+      field: "isActive",
+      label: "Active",
+      type: "boolean",
+      value: false,
+      visible: true,
+      readOnly: false,
+      required: false,
+    });
+    expect(captured?.kind).toBe("boolean");
+    if (captured?.kind === "boolean") expect("icon" in captured).toBe(false);
+  });
+
+  test("a multiline field named 'email' gets no icon (textarea has no icon slot)", () => {
+    renderField(textField({ field: "email", multiline: true }));
+    expect(captured?.kind).toBe("textarea");
+    if (captured?.kind === "textarea") expect("icon" in captured).toBe(false);
+  });
+
+  test("a number field with no recognizable name gets no icon", () => {
+    renderField({
+      field: "quantity",
+      label: "Quantity",
+      type: "number",
+      value: 1,
+      visible: true,
+      readOnly: false,
+      required: false,
+    });
+    expect(captured?.kind).toBe("number");
+    if (captured?.kind === "number") expect(captured.icon).toBeUndefined();
+  });
+});

package/src/components/__tests__/render-list-toolbar-icon-only.test.tsx

@@ -0,0 +1,146 @@
+// ToolbarActionView collapses a group of >2 icon-carrying toolbar actions to
+// icon-only buttons (`shouldRenderActionsIconOnly`). The button then has no
+// accessible name from its children, so the label has to move to `ariaLabel`
+// and must NOT stay in the children — otherwise the text renders inside a
+// button sized for an icon.
+
+import { describe, expect, test } from "bun:test";
+import type {
+  EntityDefinition,
+  EntityListScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import { render, screen as rtlScreen } from "@testing-library/react";
+import type { ComponentType, ReactNode } from "react";
+import { createStaticLocaleResolver, LocaleProvider } from "../../i18n";
+import { kumikoDefaultTranslations } from "../../i18n-defaults";
+import {
+  type ButtonProps,
+  type CorePrimitives,
+  type DataTableProps,
+  PrimitivesProvider,
+} from "../../primitives";
+import { RenderList, type ToolbarActionButton } from "../render-list";
+
+const TestButton: ComponentType<ButtonProps> = ({ children, onClick, testId, ariaLabel, size }) => (
+  <button
+    type="button"
+    data-testid={testId}
+    data-size={size ?? "md"}
+    aria-label={ariaLabel}
+    onClick={() => {
+      void onClick?.();
+    }}
+  >
+    {children}
+  </button>
+);
+
+const toolbarOnlyDataTable: ComponentType<DataTableProps> = ({ toolbarEnd }) => (
+  <div>{toolbarEnd}</div>
+);
+
+const noop = (): ReactNode => null;
+const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
+
+const testPrimitives: CorePrimitives = {
+  Button: TestButton,
+  Banner: passChildren,
+  Field: passChildren,
+  Input: noop,
+  DataTable: toolbarOnlyDataTable,
+  Form: passChildren,
+  Section: passChildren,
+  Card: passChildren,
+  Grid: passChildren,
+  GridCell: passChildren,
+  Text: passChildren,
+  Heading: noop,
+  Dialog: noop,
+  Modal: noop,
+  Lightbox: noop,
+  ConfigSourceBadge: noop,
+  ConfigCascadeView: noop,
+  Link: noop,
+};
+
+const entity: EntityDefinition = {
+  fields: {
+    name: { type: "text", maxLength: 50, required: false, searchable: false, sortable: false },
+  },
+};
+
+const listScreen: EntityListScreenDefinition = {
+  id: "widget-list",
+  type: "entityList",
+  entity: "widget",
+  columns: ["name"],
+};
+
+function toolbarAction(id: string, label: string, withIcon: boolean): ToolbarActionButton {
+  return {
+    id,
+    label,
+    onTrigger: () => {},
+    ...(withIcon && { icon: "archive" as const }),
+  };
+}
+
+function renderToolbar(actions: readonly ToolbarActionButton[]): void {
+  render(
+    <LocaleProvider
+      resolver={createStaticLocaleResolver({ locale: "en" })}
+      fallbackBundles={[kumikoDefaultTranslations]}
+    >
+      <PrimitivesProvider value={testPrimitives}>
+        <RenderList
+          screen={listScreen}
+          entity={entity}
+          rows={[]}
+          featureName="toolbar-fixture"
+          toolbarActions={actions}
+        />
+      </PrimitivesProvider>
+    </LocaleProvider>,
+  );
+}
+
+describe("RenderList toolbar actions collapse to icon-only", () => {
+  test("three icon actions render buttons with no visible text but an aria-label", () => {
+    renderToolbar([
+      toolbarAction("sync", "Sync", true),
+      toolbarAction("export", "Export", true),
+      toolbarAction("archive", "Archive", true),
+    ]);
+
+    for (const [id, label] of [
+      ["sync", "Sync"],
+      ["export", "Export"],
+      ["archive", "Archive"],
+    ] as const) {
+      const button = rtlScreen.getByTestId(`render-list-toolbar-action-${id}`);
+      expect(button.getAttribute("data-size")).toBe("icon");
+      expect(button.getAttribute("aria-label")).toBe(label);
+      expect(button.textContent).toBe("");
+    }
+  });
+
+  test("two actions stay on text buttons carrying the label as children", () => {
+    renderToolbar([toolbarAction("sync", "Sync", true), toolbarAction("export", "Export", true)]);
+
+    const button = rtlScreen.getByTestId("render-list-toolbar-action-sync");
+    expect(button.getAttribute("data-size")).toBe("md");
+    expect(button.textContent).toBe("Sync");
+  });
+
+  test("an icon-less member keeps the whole group on text buttons", () => {
+    renderToolbar([
+      toolbarAction("sync", "Sync", true),
+      toolbarAction("export", "Export", true),
+      toolbarAction("archive", "Archive", false),
+    ]);
+
+    const button = rtlScreen.getByTestId("render-list-toolbar-action-sync");
+    expect(button.getAttribute("data-size")).toBe("md");
+    expect(button.textContent).toBe("Sync");
+  });
+});

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

@@ -93,26 +93,36 @@ export function RelatedListSection({
         }
       : undefined;
 
+  const content =
+    rowsQuery.loading && rowsQuery.data === null ? (
+      <Banner padded variant="loading" testId="related-list-loading">
+        Loading…
+      </Banner>
+    ) : rowsQuery.error ? (
+      <Banner padded variant="error" testId="related-list-error">
+        {dispatcherErrorText(rowsQuery.error, effectiveTranslate)}
+      </Banner>
+    ) : (
+      <RenderList
+        screen={listScreen}
+        entity={entity}
+        rows={rowsQuery.data?.rows ?? []}
+        featureName={featureName}
+        translate={effectiveTranslate}
+        {...(onRowClick !== undefined && { onRowClick })}
+      />
+    );
+
+  // hideTitle (tabs mode) → this section carries no header content of its
+  // own, and RenderList's DataTable already draws its own card frame — a
+  // Section wrapper here would only add a second, nested card (fw record-
+  // screen-type polish). Stacked (non-tabs) sections keep their Section
+  // card since they render a visible title.
+  if (hideTitle) return content;
+
   return (
-    <Section title={hideTitle ? undefined : section.title} testId={`related-list-${section.title}`}>
-      {rowsQuery.loading && rowsQuery.data === null ? (
-        <Banner padded variant="loading" testId="related-list-loading">
-          Loading…
-        </Banner>
-      ) : rowsQuery.error ? (
-        <Banner padded variant="error" testId="related-list-error">
-          {dispatcherErrorText(rowsQuery.error, effectiveTranslate)}
-        </Banner>
-      ) : (
-        <RenderList
-          screen={listScreen}
-          entity={entity}
-          rows={rowsQuery.data?.rows ?? []}
-          featureName={featureName}
-          translate={effectiveTranslate}
-          {...(onRowClick !== undefined && { onRowClick })}
-        />
-      )}
+    <Section title={section.title} testId={`related-list-${section.title}`}>
+      {content}
     </Section>
   );
 }

package/src/components/render-edit-action-button.tsx

@@ -9,11 +9,15 @@ import type { RenderEditAction } from "./render-edit-types";
 // to hook into like the built-in onDelete/onSubmit paths have).
 export function RenderEditActionButton({
   action,
+  iconOnly = false,
   Button,
   Dialog,
   onError,
 }: {
   readonly action: RenderEditAction;
+  /** Group-level collapse (see `shouldRenderActionsIconOnly`) — only takes
+   *  effect when this action actually resolved an icon. */
+  readonly iconOnly?: boolean;
   readonly Button: ReturnType<typeof usePrimitives>["Button"];
   readonly Dialog: ReturnType<typeof usePrimitives>["Dialog"];
   readonly onError: (text: string | null) => void;
@@ -37,6 +41,7 @@ export function RenderEditActionButton({
   // Same rule as RowActionWriteHandler: "danger" forces a confirm even
   // without an explicit confirm key.
   const needsConfirm = action.confirm !== undefined || action.style === "danger";
+  const showIconOnly = iconOnly && action.icon !== undefined;
 
   return (
     <>
@@ -44,6 +49,8 @@ export function RenderEditActionButton({
         type="button"
         variant={variant}
         loading={busy}
+        {...(action.icon !== undefined && { icon: action.icon })}
+        {...(showIconOnly && { size: "icon" as const, ariaLabel: action.label })}
         onClick={() => {
           if (needsConfirm) {
             setConfirmOpen(true);
@@ -53,7 +60,7 @@ export function RenderEditActionButton({
         }}
         testId={`render-edit-action-${action.id}`}
       >
-        {action.label}
+        {showIconOnly ? null : action.label}
       </Button>
       <Dialog
         open={confirmOpen}

package/src/components/render-edit-types.ts

@@ -1,6 +1,7 @@
 import type {
   EntityDefinition,
   EntityEditScreenDefinition,
+  IconKey,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import type {
   FormSnapshot,
@@ -156,6 +157,10 @@ export type RenderEditAction = {
   readonly style?: "primary" | "secondary" | "danger";
   readonly confirm?: string;
   readonly confirmLabel?: string;
+  /** Resolved icon (author `RowAction.icon` or the id-derived default) —
+   *  drives both the icon-left-of-text render and the icon-only collapse
+   *  rule (see `shouldRenderActionsIconOnly`). */
+  readonly icon?: IconKey;
 };
 
 export type RenderEditChangeState<TValues extends FormValues> = {

package/src/components/render-edit.tsx

@@ -36,7 +36,7 @@ import { useDraftStorage } from "../context/draft-storage-context";
 import { formatWhen } from "../format-when";
 import { useForm } from "../hooks/use-form";
 import { useTranslation } from "../i18n";
-import { usePrimitives } from "../primitives";
+import { shouldRenderActionsIconOnly, usePrimitives } from "../primitives";
 import { RelatedListSection } from "./related-list-section";
 import {
   filterEditSections,
@@ -922,6 +922,10 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
     onCopyLink !== undefined ||
     (actions !== undefined && actions.length > 0) ||
     onCancel !== undefined;
+  // Teil-C collapse rule: driven by the custom `actions` group only — a
+  // resolved true also folds the Copy-Link button (same visual group in the
+  // footer), but never Delete/Cancel, which keep their text regardless.
+  const iconOnlyMidActions = actions !== undefined && shouldRenderActionsIconOnly(actions);
   const secondaryFormActions = (
     <>
       {onDelete !== undefined && (
@@ -939,21 +943,30 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
       {onCopyLink !== undefined && (
         <Button
           type="button"
-          variant="link"
+          variant={iconOnlyMidActions ? "secondary" : "link"}
           icon={linkCopied ? "check" : "link"}
           testId="render-edit-copy-link"
+          {...(iconOnlyMidActions && {
+            size: "icon" as const,
+            ariaLabel: translate(
+              linkCopied ? "kumiko.actions.copyLinkCopied" : "kumiko.actions.copyLink",
+            ),
+          })}
           onClick={async () => {
             await onCopyLink();
             setLinkCopied(true);
           }}
         >
-          {translate(linkCopied ? "kumiko.actions.copyLinkCopied" : "kumiko.actions.copyLink")}
+          {iconOnlyMidActions
+            ? null
+            : translate(linkCopied ? "kumiko.actions.copyLinkCopied" : "kumiko.actions.copyLink")}
         </Button>
       )}
       {actions?.map((action) => (
         <RenderEditActionButton
           key={action.id}
           action={action}
+          iconOnly={iconOnlyMidActions}
           Button={Button}
           Dialog={Dialog}
           onError={setActionError}
@@ -972,6 +985,14 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
       )}
     </>
   );
+  // 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
+  // a defined (if empty) fragment.
+  const hasFormActions =
+    (isWizard && currentStep > 0) ||
+    (isWizard && !isLastWizardStep) ||
+    ((isFormEditable || hasExtensionRegistrations) && (!isWizard || isLastWizardStep));
   const formActions = (
     <>
       {isWizard && currentStep > 0 && (
@@ -1039,7 +1060,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
         {...(hideSectionTitles !== true && { title: formTitle })}
         {...(hideSectionTitles !== true &&
           formSubtitle !== undefined && { subtitle: formSubtitle })}
-        {...(hideActions !== true && { actions: formActions })}
+        {...(hideActions !== true && hasFormActions && { actions: formActions })}
         {...(hideActions !== true &&
           hasSecondaryFormActions && { secondaryActions: secondaryFormActions })}
         testId="render-edit-form"
@@ -1206,6 +1227,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
               key={sectionKey}
               {...(sectionTitle !== undefined && { title: sectionTitle })}
               {...(section.description !== undefined && { subtitle: section.description })}
+              {...(section.icon !== undefined && { icon: section.icon })}
               testId={`section-${sectionKey}`}
             >
               <Grid columns={section.columns}>