ding-react-admin 1.0.4 → 2.0.4

package/src/crud/utils/choiceSelectionUtils.ts

@@ -0,0 +1,116 @@
+import type { ChoiceOption } from "../types";
+
+export function isRecordObject(
+  value: unknown,
+  optionValue: string,
+): value is Record<string, unknown> {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    !Array.isArray(value) &&
+    optionValue in value
+  );
+}
+
+export function valueAsId(
+  value: unknown,
+  optionValue: string,
+): string | number | undefined {
+  if (value == null || value === "") return undefined;
+  if (isRecordObject(value, optionValue)) {
+    const id = value[optionValue];
+    if (typeof id === "string" || typeof id === "number") return id;
+    return undefined;
+  }
+  if (typeof value === "string" || typeof value === "number") return value;
+  return undefined;
+}
+
+export function valuesAsIds(
+  values: unknown,
+  optionValue: string,
+): (string | number)[] {
+  if (!Array.isArray(values)) return [];
+  return values
+    .map((value) => valueAsId(value, optionValue))
+    .filter((value): value is string | number => value != null);
+}
+
+export function normalizeSelectedIds(
+  selectedValues: unknown | unknown[] | undefined,
+  optionValue: string,
+): unknown[] {
+  if (selectedValues == null) return [];
+  const values = Array.isArray(selectedValues)
+    ? selectedValues
+    : [selectedValues];
+  return values
+    .filter((value) => value != null && value !== "")
+    .map((value) =>
+      isRecordObject(value, optionValue) ? value[optionValue] : value,
+    );
+}
+
+export function collectSelectedRecords(
+  selectedValues: unknown | unknown[] | undefined,
+  selectedRecords: Record<string, unknown> | Record<string, unknown>[] | undefined,
+  optionValue: string,
+): Record<string, unknown>[] {
+  const records: Record<string, unknown>[] = [];
+
+  if (selectedRecords != null) {
+    if (Array.isArray(selectedRecords)) {
+      records.push(
+        ...selectedRecords.filter(
+          (record): record is Record<string, unknown> =>
+            isRecordObject(record, optionValue),
+        ),
+      );
+    } else if (isRecordObject(selectedRecords, optionValue)) {
+      records.push(selectedRecords);
+    }
+  }
+
+  if (selectedValues == null) return records;
+
+  const values = Array.isArray(selectedValues)
+    ? selectedValues
+    : [selectedValues];
+  for (const value of values) {
+    if (isRecordObject(value, optionValue)) {
+      records.push(value);
+    }
+  }
+
+  return records;
+}
+
+export function resolveOptionLabel(
+  record: Record<string, unknown>,
+  optionLabel: string | ((record: Record<string, unknown>) => string),
+): string {
+  if (typeof optionLabel === "function") return optionLabel(record);
+  return String(record[optionLabel] ?? "");
+}
+
+export function recordsToOptions(
+  records: Record<string, unknown>[],
+  optionLabel: string | ((record: Record<string, unknown>) => string),
+  optionValue: string,
+): ChoiceOption[] {
+  return records.map((record) => ({
+    label: resolveOptionLabel(record, optionLabel),
+    value: record[optionValue],
+    record,
+  }));
+}
+
+export function mergeOptions(
+  existing: ChoiceOption[],
+  incoming: ChoiceOption[],
+): ChoiceOption[] {
+  const byValue = new Map<unknown, ChoiceOption>();
+  for (const option of existing) byValue.set(option.value, option);
+  for (const option of incoming) byValue.set(option.value, option);
+  return Array.from(byValue.values());
+}

package/src/crud/utils/formErrors.test.ts

@@ -0,0 +1,168 @@
+import { describe, expect, it, vi } from "vitest";
+import type { UseFormReturn } from "react-hook-form";
+
+import type { DataProvider } from "../../data/dataProviderTypes";
+import type { InlineFieldRegistration } from "../context/InlineFieldsRegistry";
+import {
+  applyApiErrorsToForm,
+  isKnownFormFieldPath,
+  partitionFormErrors,
+} from "./formErrors";
+
+const inlineRegistry = new Map<string, InlineFieldRegistration>([
+  [
+    "lines",
+    {
+      field: "lines",
+      sources: ["label", "quantity"],
+    },
+  ],
+]);
+
+describe("isKnownFormFieldPath", () => {
+  it("matches top-level payload fields", () => {
+    const payloadFields = new Set(["name", "email"]);
+    expect(isKnownFormFieldPath("name", payloadFields, inlineRegistry)).toBe(
+      true,
+    );
+    expect(
+      isKnownFormFieldPath("unknown", payloadFields, inlineRegistry),
+    ).toBe(false);
+  });
+
+  it("matches inline nested paths", () => {
+    const payloadFields = new Set(["lines"]);
+    expect(
+      isKnownFormFieldPath("lines.0.quantity", payloadFields, inlineRegistry),
+    ).toBe(true);
+    expect(
+      isKnownFormFieldPath("lines.2.label", payloadFields, inlineRegistry),
+    ).toBe(true);
+    expect(
+      isKnownFormFieldPath("lines.0.missing", payloadFields, inlineRegistry),
+    ).toBe(false);
+  });
+});
+
+describe("partitionFormErrors", () => {
+  it("keeps known fields and promotes unknown keys to global", () => {
+    const payloadFields = new Set(["name"]);
+    const { fieldErrors, globalErrors } = partitionFormErrors(
+      {
+        fields: {
+          name: "Required",
+          internal_code: "Already used",
+        },
+        global: ["Cannot save while locked"],
+      },
+      payloadFields,
+      inlineRegistry,
+    );
+
+    expect(fieldErrors).toEqual({ name: "Required" });
+    expect(globalErrors).toEqual([
+      "Cannot save while locked",
+      "Already used",
+    ]);
+  });
+
+  it("routes inline errors to fields when the column exists", () => {
+    const payloadFields = new Set(["lines"]);
+    const { fieldErrors, globalErrors } = partitionFormErrors(
+      {
+        fields: {
+          "lines.0.quantity": "Must be positive",
+          "lines.1.unknown": "Bad value",
+        },
+      },
+      payloadFields,
+      inlineRegistry,
+    );
+
+    expect(fieldErrors).toEqual({
+      "lines.0.quantity": "Must be positive",
+    });
+    expect(globalErrors).toEqual(["Bad value"]);
+  });
+});
+
+describe("applyApiErrorsToForm", () => {
+  const context = { resource: "users", mutation: "create" as const };
+  const options = {
+    payloadFields: new Set(["email"]),
+    inlineRegistry: [] as InlineFieldRegistration[],
+  };
+
+  function createForm() {
+    return {
+      setError: vi.fn(),
+    } as unknown as UseFormReturn<{ email: string }>;
+  }
+
+  it("maps standard validation bodies to field errors", async () => {
+    const form = createForm();
+    const dp = {
+      parseFormError: vi.fn().mockReturnValue({
+        fields: { email: "Already taken" },
+      }),
+    } as unknown as DataProvider;
+
+    const result = await applyApiErrorsToForm(
+      dp,
+      form,
+      {
+        body: { email: ["Already taken"] },
+      },
+      context,
+      options,
+    );
+
+    expect(result.handled).toBe(true);
+    expect(result.globalErrors).toEqual([]);
+    expect(form.setError).toHaveBeenCalledWith("email", {
+      type: "server",
+      message: "Already taken",
+    });
+  });
+
+  it("returns a non-standard format warning when the parser cannot map the body", async () => {
+    const form = createForm();
+    const dp = {
+      parseFormError: vi.fn().mockReturnValue(null),
+    } as unknown as DataProvider;
+
+    const result = await applyApiErrorsToForm(
+      dp,
+      form,
+      { body: { message: "Unexpected shape" } },
+      context,
+      options,
+    );
+
+    expect(result.handled).toBe(true);
+    expect(result.globalErrors[0]).toContain("Non-standard validation response.");
+    expect(result.globalErrors[0]).toContain('{"message":"Unexpected shape"}');
+    expect(form.setError).not.toHaveBeenCalled();
+  });
+
+  it("returns a non-standard format warning for HTTP 400 without JSON", async () => {
+    const form = createForm();
+    const dp = {} as DataProvider;
+    const response = new Response("bad request", {
+      status: 400,
+      headers: { "Content-Type": "text/plain" },
+    });
+
+    const result = await applyApiErrorsToForm(
+      dp,
+      form,
+      { response },
+      context,
+      options,
+    );
+
+    expect(result.handled).toBe(true);
+    expect(result.globalErrors[0]).toContain("Non-standard validation response.");
+    expect(result.globalErrors[0]).toContain("text/plain");
+  });
+});

package/src/crud/utils/formErrors.ts

@@ -1,38 +1,138 @@
-import type { MessageInstance } from "antd/es/message/interface";
-import type { FieldPath, FieldValues, UseFormReturn } from "react-hook-form";
-import type { DataProvider, ParseFormErrorContext } from "../../data/dataProviderTypes";
-
-function toMessages(value: string | string[] | undefined): string[] {
-  if (!value) return [];
-  return Array.isArray(value) ? value : [value];
-}
-
-export function applyFormErrors<T extends FieldValues>(
-  form: UseFormReturn<T>,
-  parsed: { fields?: Record<string, string | string[]>; global?: string | string[] },
-  message: MessageInstance,
-) {
-  for (const msg of toMessages(parsed.global)) {
-    message.error(msg);
-  }
-  for (const [path, msg] of Object.entries(parsed.fields ?? {})) {
-    const text = Array.isArray(msg) ? msg.join(", ") : msg;
-    form.setError(path as FieldPath<T>, { type: "server", message: text });
-  }
-}
-
-export function parseAndApplyFormErrors<T extends FieldValues>(
-  dp: DataProvider,
-  form: UseFormReturn<T>,
-  message: MessageInstance,
-  error: unknown,
-  context: ParseFormErrorContext,
-): boolean {
-  const parsed = dp.parseFormError?.(error, context);
-  if (!parsed) return false;
-  const hasFields = Object.keys(parsed.fields ?? {}).length > 0;
-  const hasGlobal = toMessages(parsed.global).length > 0;
-  if (!hasFields && !hasGlobal) return false;
-  applyFormErrors(form, parsed, message);
-  return true;
-}
+import type { FieldPath, FieldValues, UseFormReturn } from "react-hook-form";
+
+import type {
+  DataProvider,
+  FormValidationErrors,
+  ParseFormErrorContext,
+} from "../../data/dataProviderTypes";
+import type { InlineFieldRegistration } from "../context/InlineFieldsRegistry";
+import {
+  describeNonStandardValidationBody,
+  getErrorResponseContentType,
+  getValidationErrorStatus,
+  resolveErrorBody,
+} from "../../data/parseFormErrorHelpers";
+
+export type ApplyApiErrorsResult = {
+  handled: boolean;
+  globalErrors: string[];
+};
+
+export type ApplyApiErrorsOptions = {
+  payloadFields: Iterable<string>;
+  inlineRegistry: Iterable<InlineFieldRegistration>;
+};
+
+function toMessages(value: string | string[] | undefined): string[] {
+  if (!value) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+function messageText(msg: string | string[]): string {
+  return Array.isArray(msg) ? msg.join(", ") : msg;
+}
+
+/** Top-level `source` or inline cell path such as `lines.0.quantity`. */
+export function isKnownFormFieldPath(
+  path: string,
+  payloadFields: Set<string>,
+  inlineRegistry: Map<string, InlineFieldRegistration>,
+): boolean {
+  if (payloadFields.has(path)) return true;
+
+  const match = path.match(/^([^.]+)\.(\d+)\.([^.]+)$/);
+  if (!match) return false;
+
+  const [, arrayName, , source] = match;
+  return inlineRegistry.get(arrayName)?.sources.includes(source) ?? false;
+}
+
+export function partitionFormErrors(
+  parsed: FormValidationErrors,
+  payloadFields: Set<string>,
+  inlineRegistry: Map<string, InlineFieldRegistration>,
+): { fieldErrors: Record<string, string | string[]>; globalErrors: string[] } {
+  const fieldErrors: Record<string, string | string[]> = {};
+  const globalErrors = [...toMessages(parsed.global)];
+
+  for (const [path, msg] of Object.entries(parsed.fields ?? {})) {
+    if (isKnownFormFieldPath(path, payloadFields, inlineRegistry)) {
+      fieldErrors[path] = msg;
+    } else {
+      globalErrors.push(messageText(msg));
+    }
+  }
+
+  return { fieldErrors, globalErrors };
+}
+
+export function applyFormErrors<T extends FieldValues>(
+  form: UseFormReturn<T>,
+  fieldErrors: Record<string, string | string[]>,
+) {
+  for (const [path, msg] of Object.entries(fieldErrors)) {
+    form.setError(path as FieldPath<T>, {
+      type: "server",
+      message: messageText(msg),
+    });
+  }
+}
+
+function nonStandardValidationHint(error: unknown): string | undefined {
+  const contentType = getErrorResponseContentType(error);
+  if (contentType && !/application\/json/i.test(contentType)) {
+    return `non-JSON response (Content-Type: ${contentType})`;
+  }
+  return undefined;
+}
+
+export async function applyApiErrorsToForm<T extends FieldValues>(
+  dp: DataProvider,
+  form: UseFormReturn<T>,
+  error: unknown,
+  context: ParseFormErrorContext,
+  options: ApplyApiErrorsOptions,
+): Promise<ApplyApiErrorsResult> {
+  const body = await resolveErrorBody(error);
+
+  if (body != null) {
+    const parsed = dp.parseFormError?.({ body }, context);
+
+    if (parsed) {
+      const payloadFields = new Set(options.payloadFields);
+      const inlineRegistry = new Map<string, InlineFieldRegistration>();
+      for (const inline of options.inlineRegistry) {
+        inlineRegistry.set(inline.field, inline);
+      }
+
+      const { fieldErrors, globalErrors } = partitionFormErrors(
+        parsed,
+        payloadFields,
+        inlineRegistry,
+      );
+
+      if (Object.keys(fieldErrors).length || globalErrors.length) {
+        applyFormErrors(form, fieldErrors);
+        return { handled: true, globalErrors };
+      }
+    }
+
+    return {
+      handled: true,
+      globalErrors: [describeNonStandardValidationBody(body)],
+    };
+  }
+
+  if (getValidationErrorStatus(error) != null) {
+    return {
+      handled: true,
+      globalErrors: [
+        describeNonStandardValidationBody(null, {
+          hint: nonStandardValidationHint(error),
+        }),
+      ],
+    };
+  }
+
+  return { handled: false, globalErrors: [] };
+}

package/src/crud/utils/formSectionErrors.ts

@@ -1,85 +1,85 @@
-import { useEffect, useRef, type MutableRefObject } from "react";
-import {
-  useFormContext,
-  useFormState,
-  type FieldPath,
-  type FieldValues,
-  type FormState,
-  type UseFormGetFieldState,
-} from "react-hook-form";
-
-export function sectionHasError<T extends FieldValues>(
-  sources: Set<string>,
-  getFieldState: UseFormGetFieldState<T>,
-  formState: FormState<T>,
-): boolean {
-  for (const source of sources) {
-    if (getFieldState(source as FieldPath<T>, formState).invalid) {
-      return true;
-    }
-  }
-  return false;
-}
-
-export function useSectionSourceRefs(count: number) {
-  const refs = useRef<MutableRefObject<Set<string>>[]>([]);
-
-  while (refs.current.length < count) {
-    refs.current.push({ current: new Set() });
-  }
-  if (refs.current.length > count) {
-    refs.current.length = count;
-  }
-
-  return refs.current;
-}
-
-export function useActivateFirstErrorSection(
-  sectionRefs: MutableRefObject<Set<string>>[],
-  activate: (index: number) => void,
-) {
-  const { control, getFieldState, setFocus } = useFormContext<FieldValues>();
-  const formState = useFormState({ control });
-  const prevSubmitCount = useRef(0);
-  const prevErrorCount = useRef(0);
-
-  useEffect(() => {
-    if (formState.submitCount === 0) return;
-
-    const errorCount = Object.keys(formState.errors).length;
-    const submitChanged = formState.submitCount !== prevSubmitCount.current;
-    const serverErrorsArrived =
-      !submitChanged && errorCount > 0 && prevErrorCount.current === 0;
-
-    prevSubmitCount.current = formState.submitCount;
-    prevErrorCount.current = errorCount;
-
-    if ((!submitChanged && !serverErrorsArrived) || errorCount === 0) {
-      return;
-    }
-
-    const first = sectionRefs.findIndex((ref) =>
-      sectionHasError(ref.current, getFieldState, formState),
-    );
-    if (first < 0) return;
-
-    activate(first);
-
-    const firstInvalid = [...sectionRefs[first].current].find((source) =>
-      getFieldState(source as FieldPath<FieldValues>, formState).invalid,
-    );
-    if (firstInvalid) {
-      requestAnimationFrame(() => {
-        void setFocus(firstInvalid as FieldPath<FieldValues>);
-      });
-    }
-  }, [
-    activate,
-    formState,
-    formState.errors,
-    formState.submitCount,
-    getFieldState,
-    sectionRefs,
-    setFocus,
-  ]);
-}
+import { useEffect, useRef, type MutableRefObject } from "react";
+import {
+  useFormContext,
+  useFormState,
+  type FieldPath,
+  type FieldValues,
+  type FormState,
+  type UseFormGetFieldState,
+} from "react-hook-form";
+
+export function sectionHasError<T extends FieldValues>(
+  sources: Set<string>,
+  getFieldState: UseFormGetFieldState<T>,
+  formState: FormState<T>,
+): boolean {
+  for (const source of sources) {
+    if (getFieldState(source as FieldPath<T>, formState).invalid) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function useSectionSourceRefs(count: number) {
+  const refs = useRef<MutableRefObject<Set<string>>[]>([]);
+
+  while (refs.current.length < count) {
+    refs.current.push({ current: new Set() });
+  }
+  if (refs.current.length > count) {
+    refs.current.length = count;
+  }
+
+  return refs.current;
+}
+
+export function useActivateFirstErrorSection(
+  sectionRefs: MutableRefObject<Set<string>>[],
+  activate: (index: number) => void,
+) {
+  const { control, getFieldState, setFocus } = useFormContext<FieldValues>();
+  const formState = useFormState({ control });
+  const prevSubmitCount = useRef(0);
+  const prevErrorCount = useRef(0);
+
+  useEffect(() => {
+    if (formState.submitCount === 0) return;
+
+    const errorCount = Object.keys(formState.errors).length;
+    const submitChanged = formState.submitCount !== prevSubmitCount.current;
+    const serverErrorsArrived =
+      !submitChanged && errorCount > 0 && prevErrorCount.current === 0;
+
+    prevSubmitCount.current = formState.submitCount;
+    prevErrorCount.current = errorCount;
+
+    if ((!submitChanged && !serverErrorsArrived) || errorCount === 0) {
+      return;
+    }
+
+    const first = sectionRefs.findIndex((ref) =>
+      sectionHasError(ref.current, getFieldState, formState),
+    );
+    if (first < 0) return;
+
+    activate(first);
+
+    const firstInvalid = [...sectionRefs[first].current].find((source) =>
+      getFieldState(source as FieldPath<FieldValues>, formState).invalid,
+    );
+    if (firstInvalid) {
+      requestAnimationFrame(() => {
+        void setFocus(firstInvalid as FieldPath<FieldValues>);
+      });
+    }
+  }, [
+    activate,
+    formState,
+    formState.errors,
+    formState.submitCount,
+    getFieldState,
+    sectionRefs,
+    setFocus,
+  ]);
+}

package/src/crud/utils/{getByPath.ts → getFormValue.ts}

@@ -1,13 +1,13 @@
-/** Read nested value from a record using dot notation, e.g. `brand.name`. */
-export function getByPath(
-  record: Record<string, unknown>,
-  path: string,
-): unknown {
-  const parts = path.split(".");
-  let cur: unknown = record;
-  for (const part of parts) {
-    if (cur == null || typeof cur !== "object") return undefined;
-    cur = (cur as Record<string, unknown>)[part];
-  }
-  return cur;
-}
+/** Read a nested value from form values or a record, e.g. `lines.0.label`. */
+export function getFormValue(
+  record: Record<string, unknown>,
+  path: string,
+): unknown {
+  const parts = path.split(".");
+  let cur: unknown = record;
+  for (const part of parts) {
+    if (cur == null || typeof cur !== "object") return undefined;
+    cur = (cur as Record<string, unknown>)[part];
+  }
+  return cur;
+}

package/src/crud/utils/hasUploadValues.ts

@@ -0,0 +1,9 @@
+/** Whether a save payload contains a `File` or `Blob` anywhere (including inline rows). */
+export function hasUploadValues(value: unknown): boolean {
+  if (value instanceof Blob) return true;
+  if (Array.isArray(value)) return value.some(hasUploadValues);
+  if (value && typeof value === "object") {
+    return Object.values(value as Record<string, unknown>).some(hasUploadValues);
+  }
+  return false;
+}

package/src/crud/utils/nestedFieldPath.ts

@@ -0,0 +1,8 @@
+/** RHF path for one cell in a nested field array row, e.g. `lines.0.label`. */
+export function nestedFieldPath(
+  field: string,
+  index: number,
+  source: string,
+): string {
+  return `${field}.${index}.${source}`;
+}