@truedat/core 8.13.5 → 8.13.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.13.5",
+  "version": "8.13.7",
   "description": "Truedat Web Core",
   "sideEffects": [
     "**/*.css",
@@ -57,7 +57,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.13.5",
+    "@truedat/test": "8.13.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -99,5 +99,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "9b87cbb7143f20b305b84077c1fcf004e5b27726"
+  "gitHead": "704dcfcba34b6094a368a93059de7f4937502f32"
 }

package/src/components/Alert.js

@@ -11,10 +11,14 @@ import { AlertExporter } from "./AlertExporter";
 const existingList = (list) => list && !_.isEmpty(list);
 
 const safeFormat = (formatMessage) => (descriptor, values) => {
+  const fallback = descriptor.defaultMessage ?? descriptor.id;
+
   try {
-    return formatMessage(descriptor, values);
+    const formatted = formatMessage(descriptor, values);
+
+    return formatted === descriptor.id ? fallback : formatted;
   } catch {
-    return descriptor.defaultMessage ?? descriptor.id;
+    return fallback;
   }
 };
 
@@ -34,14 +38,14 @@ const formatErrorMessages = (error, formatMessage) => {
     });
   }
 
-  if (_.every(["name", "code"], _.partial(_.has)(error)))
-    return formatMessage(
-      { id: error.name, defaultMessage: error.name },
-      { text: error.code },
+  if (_.has("name")(error)) {
+    const message = safe(
+      { id: error.name },
+      { text: error.code, field: error.field, ...(error.values || {}) },
     );
 
-  if (_.has("name")(error))
-    return formatMessage({ id: error.name, defaultMessage: error.name });
+    return error.field ? `${error.field}: ${message}` : message;
+  }
 
   return formatMessage({
     id: "error.unknown",

package/src/components/TemplateSelector.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import PropTypes from "prop-types";
 
 import { useEffect, useRef } from "react";
-import { Form, Label } from "semantic-ui-react";
+import { Button, Form, Label, Message } from "semantic-ui-react";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useQuery } from "@apollo/client";
 import { accentInsensitivePathOrder } from "../services/sort";
@@ -112,13 +112,37 @@ TemplateSelector.propTypes = {
 };
 
 const emptyTemplates = [];
+
+export const TemplateLoadError = ({ onRetry }) => (
+  <Message negative compact>
+    <Message.Content>
+      <FormattedMessage
+        id="template.selector.load_error"
+        defaultMessage="Templates could not be loaded. Check your access and try again."
+      />
+      {onRetry ? (
+        <Button size="small" onClick={onRetry}>
+          <FormattedMessage
+            id="template.selector.retry"
+            defaultMessage="Retry"
+          />
+        </Button>
+      ) : null}
+    </Message.Content>
+  </Message>
+);
+
+TemplateLoadError.propTypes = {
+  onRetry: PropTypes.func,
+};
+
 export const TemplateSelectorLoader = ({
   scope,
   onLoad,
   domainIds,
   ...props
 }) => {
-  const { loading, error, data } = useQuery(TEMPLATES_QUERY, {
+  const { loading, error, data, refetch } = useQuery(TEMPLATES_QUERY, {
     fetchPolicy: "cache-and-network",
     variables: { scope, domainIds },
   });
@@ -131,7 +155,9 @@ export const TemplateSelectorLoader = ({
     }
   }, [data, onLoad]);
 
-  if (error) return null;
+  if (error && !loading) {
+    return <TemplateLoadError onRetry={() => refetch()} />;
+  }
 
   const templates = data?.templates || emptyTemplates;
   return (

package/src/components/UploadJobParser.js

@@ -47,7 +47,13 @@ export const ResponseCell = ({
       );
     }
     case "ERROR":
-      return <ErrorDetail response={response} showOrigin={showOrigin} />;
+      return (
+        <ErrorDetail
+          response={response}
+          showOrigin={showOrigin}
+          scope={scope}
+        />
+      );
     case "COMPLETED":
       return <CompletedDetail response={response} />;
     case "INFO":
@@ -209,7 +215,7 @@ const externalIdDetailValue = (details) =>
     (details?.external_id ?? "")
   );
 
-const ErrorDetail = ({ response, showOrigin }) => {
+const ErrorDetail = ({ response, showOrigin, scope }) => {
   const { formatMessage } = useIntl();
 
   if (!response || !response.type) {
@@ -218,6 +224,31 @@ const ErrorDetail = ({ response, showOrigin }) => {
   const { type } = response;
   const messagePrefix = "uploadJob.parser.detail";
 
+  const translatedFieldError = (error, details) => {
+    const rawMessageId = error?.name || error?.message;
+    const resourcePrefix =
+      scope === "concepts"
+        ? "concept.error.content."
+        : details?.implementation_key
+          ? "implementation.error."
+          : details?.rule_name
+            ? "rule.error."
+            : details?.external_id
+              ? "structureNote.error."
+              : "";
+    const messageId = error?.name
+      ? rawMessageId.startsWith(resourcePrefix) || !resourcePrefix
+        ? rawMessageId
+        : `${resourcePrefix}${rawMessageId}`
+      : rawMessageId;
+    if (!messageId) return "";
+
+    return formatMessage(
+      { id: messageId, defaultMessage: error?.message || messageId },
+      { field: error?.field, ...(error?.values || {}) },
+    );
+  };
+
   if (!showOrigin && type === "data_structure_not_found") {
     return (
       <span className="upload-job-simple-error">
@@ -251,11 +282,11 @@ const ErrorDetail = ({ response, showOrigin }) => {
     }
   }
 
-  const validationErrorPairs = (errors) => {
+  const validationErrorPairs = (errors, details) => {
     if (_.isArray(errors)) {
       return errors.map((e) => [
         e?.field ?? formatMessage({ id: `${messagePrefix}.message` }),
-        e?.message ?? "",
+        translatedFieldError(e, details),
       ]);
     }
 
@@ -343,7 +374,7 @@ const ErrorDetail = ({ response, showOrigin }) => {
         [null, externalIdDetailValue(details)],
       ].filter(([, v]) => v !== undefined && v !== ""),
     field_validation_error: (details) =>
-      validationErrorPairs(details?.errors) ?? [
+      validationErrorPairs(details?.errors, details) ?? [
         [null, externalIdDetailValue(details)],
       ],
     unprocessable_entity: (details) => [[null, externalIdDetailValue(details)]],
@@ -355,7 +386,7 @@ const ErrorDetail = ({ response, showOrigin }) => {
           ? `structures.uploadStructures.failed.note.${reason}`
           : null;
 
-      const validationPairs = validationErrorPairs(details?.errors);
+      const validationPairs = validationErrorPairs(details?.errors, details);
 
       const errorPairs = _.isEmpty(validationPairs)
         ? [

package/src/components/UploadJobs.js

@@ -105,6 +105,7 @@ export default function UploadJobs({ scope }) {
                           <ResponseCell
                             response={job.latest_event_response}
                             status={job.latest_status}
+                            scope={scope}
                           />
                         </Table.Cell>
                         <Table.Cell>

package/src/components/__tests__/AlertDateRestrictionError.spec.js

@@ -0,0 +1,87 @@
+import { renderWithIntl as render } from "@truedat/test/renderWithIntl";
+import { waitForLoad } from "@truedat/test/waitForLoad";
+import { Alert } from "../Alert";
+
+const mockFormatMessage = jest.fn(({ id }) => id);
+
+jest.mock("react-intl", () => ({
+  ...jest.requireActual("react-intl"),
+  useIntl: () => ({ formatMessage: mockFormatMessage }),
+}));
+
+beforeEach(() => mockFormatMessage.mockClear());
+
+const renderError = async (error) => {
+  const rendered = render(
+    <Alert
+      dismissAlert={jest.fn()}
+      message={{
+        error: true,
+        header: "header.id",
+        icon: "attention",
+        text: "text",
+        errorList: [error],
+      }}
+    />,
+  );
+  await waitForLoad(rendered);
+  return rendered;
+};
+
+describe("a validation error with values", () => {
+  it("shows the message and the field it came from", async () => {
+    const rendered = await renderError({
+      code: "undefined",
+      name: "concept.error.content.errors.date_restrictions.out_of_range",
+      field: "fecha max fija",
+      values: { limit: "2026-06-30" },
+    });
+
+    const text = rendered.container.textContent;
+
+    expect(text).toContain("fecha max fija");
+    expect(text).toContain(
+      "concept.error.content.errors.date_restrictions.out_of_range",
+    );
+  });
+
+  it("passes the field and limit as interpolation parameters", async () => {
+    await renderError({
+      code: "undefined",
+      name: "concept.error.content.errors.date_restrictions.out_of_range",
+      field: "fecha max fija",
+      values: { limit: "2026-06-30" },
+    });
+
+    expect(mockFormatMessage).toHaveBeenCalledWith(
+      { id: "concept.error.content.errors.date_restrictions.out_of_range" },
+      {
+        text: "undefined",
+        field: "fecha max fija",
+        limit: "2026-06-30",
+      },
+    );
+  });
+
+  it("falls back to the key when there are no values", async () => {
+    const rendered = await renderError({
+      code: "undefined",
+      name: "concept.error.content.name.is.invalid",
+    });
+
+    expect(
+      rendered.getByText("concept.error.content.name.is.invalid"),
+    ).toBeInTheDocument();
+  });
+
+  it("keeps showing a plain error with a code and no field", async () => {
+    const rendered = await renderError({
+      code: "some_code",
+      name: "createDomain.error.name.unique",
+    });
+
+    expect(
+      rendered.getByText("createDomain.error.name.unique"),
+    ).toBeInTheDocument();
+  });
+});

package/src/components/__tests__/TemplateSelector.spec.js

@@ -62,14 +62,31 @@ describe("<TemplateSelector />", () => {
     expect(rendered.container).toMatchSnapshot();
   });
 
-  it("is empty if templates query returns an error", async () => {
+  it("shows an actionable message if templates query returns an error", async () => {
     const renderOpts = { mocks: [errorTemplateMock(variables)] };
     const rendered = render(
       <TemplateSelector {...props} required />,
       renderOpts,
     );
     await waitForLoad(rendered);
-    expect(rendered.queryByText(/template1/i)).not.toBeInTheDocument();
+    expect(
+      rendered.getByText(/templates could not be loaded/i),
+    ).toBeInTheDocument();
+    expect(
+      rendered.getByRole("button", { name: /retry/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("retries a failed templates query", async () => {
+    const renderOpts = {
+      mocks: [errorTemplateMock(variables), multipleTemplatesMock(variables)],
+    };
+    const rendered = render(<TemplateSelector {...props} />, renderOpts);
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(await rendered.findByRole("button", { name: /retry/i }));
+
+    expect(await rendered.findByText(/template1/i)).toBeInTheDocument();
   });
 
   it("calls onChange when template is selected", async () => {

package/src/components/__tests__/UploadJobParser.spec.js

@@ -610,6 +610,91 @@ describe("<ResponseCell />", () => {
     expect(rendered.getByText(/Already exists/i)).toBeInTheDocument();
   });
 
+  it("translates named field errors and interpolates their field and values", () => {
+    const rendered = render(
+      <ResponseCell
+        response={{
+          type: "field_validation_error",
+          details: {
+            implementation_key: "implementation-key",
+            errors: [
+              {
+                name: "errors.date_restrictions.out_of_range",
+                message: "Invalid value",
+                field: "threshold",
+                values: { min: 10, max: 20 },
+              },
+            ],
+          },
+        }}
+        status="ERROR"
+        scope="concepts"
+      />,
+      {
+        messages: {
+          en: {
+            "concept.error.content.errors.date_restrictions.out_of_range":
+              "{field} must be between {min} and {max}",
+          },
+        },
+      },
+    );
+
+    expect(
+      rendered.getByText("threshold must be between 10 and 20"),
+    ).toBeInTheDocument();
+  });
+
+  it("keeps field errors with only a message compatible", () => {
+    const rendered = render(
+      <ResponseCell
+        response={{
+          type: "field_validation_error",
+          details: {
+            errors: [{ field: "name", message: "Required" }],
+          },
+        }}
+        status="ERROR"
+      />,
+    );
+
+    expect(rendered.getByText("Required")).toBeInTheDocument();
+  });
+
+  it("translates named implementation errors and interpolates their values", () => {
+    const rendered = render(
+      <ResponseCell
+        response={{
+          type: "field_validation_error",
+          details: {
+            implementation_key: "implementation-key",
+            errors: [
+              {
+                name: "value.out_of_range",
+                message: "Invalid value",
+                field: "threshold",
+                values: { min: 10, max: 20 },
+              },
+            ],
+          },
+        }}
+        status="ERROR"
+      />,
+      {
+        messages: {
+          en: {
+            "implementation.error.value.out_of_range":
+              "{field} must be between {min} and {max}",
+          },
+        },
+      },
+    );
+
+    expect(
+      rendered.getByText("threshold must be between 10 and 20"),
+    ).toBeInTheDocument();
+  });
+
   it("renders ERROR status with field_validation_error details as an object", () => {
     const response = {
       type: "field_validation_error",

package/src/components/index.js

@@ -55,7 +55,7 @@ import SideMenu from "./SideMenu";
 import StructureFilterItem from "./StructureFilterItem";
 import Submenu from "./Submenu";
 import TaxonomyMenu from "./TaxonomyMenu";
-import TemplateSelector from "./TemplateSelector";
+import TemplateSelector, { TemplateLoadError } from "./TemplateSelector";
 import TreeSelector from "./TreeSelector";
 import Unauthorized from "./Unauthorized";
 import UploadModal from "./UploadModal";
@@ -119,6 +119,7 @@ export {
   StructureFilterItem,
   Submenu,
   TaxonomyMenu,
+  TemplateLoadError,
   TemplateSelector,
   TreeSelector,
   TrueModal,

package/src/services/__tests__/messageObjectErrors.spec.js

@@ -0,0 +1,77 @@
+import { toErrorList, phoenixFailure } from "../message";
+
+describe("errors whose entries are objects", () => {
+  it("does not stringify an object into the key", () => {
+    const [error] = toErrorList("checkoutGrantRequest.error")({
+      requests: [{ data_structure_id: 42 }],
+    });
+
+    expect(error.name).not.toContain("[object Object]");
+  });
+
+  it("falls back to the key itself when the object carries no message", () => {
+    const [error] = toErrorList("checkoutGrantRequest.error")({
+      requests: [{ data_structure_id: 42 }],
+    });
+
+    expect(error.name).toBe("checkoutGrantRequest.error.requests");
+  });
+
+  it("uses a message when the object carries one", () => {
+    const [error] = toErrorList("checkoutGrantRequest.error")({
+      requests: [{ message: "user_id is required" }],
+    });
+
+    expect(error.name).toBe(
+      "checkoutGrantRequest.error.requests.user_id is required",
+    );
+  });
+
+  it("keeps plain string entries working as before", () => {
+    const errors = toErrorList("checkoutGrantRequest.error")({
+      user_id: ["can't be blank"],
+    });
+
+    expect(errors).toEqual([
+      { name: "checkoutGrantRequest.error.user_id.can't be blank" },
+    ]);
+  });
+
+  it("a phoenix failure with an object entry does not leak it either", () => {
+    const failure = phoenixFailure("CHECKOUT_GRANT_REQUEST/FAILURE", {
+      requests: [{ data_structure_id: 42 }],
+    });
+
+    expect(JSON.stringify(failure)).not.toContain("[object Object]");
+  });
+});
+
+describe("both changeset error shapes", () => {
+  it("passes through a list the back end already normalised", () => {
+    const failure = phoenixFailure("RULE_CREATE/FAILURE", [
+      {
+        name: "rule.error.errors.date_restrictions.out_of_range",
+        field: "fecha max fija",
+        values: { limit: "2026-06-30" },
+      },
+    ]);
+
+    expect(failure.errorList).toEqual([
+      {
+        name: "rule.error.errors.date_restrictions.out_of_range",
+        field: "fecha max fija",
+        values: { limit: "2026-06-30" },
+      },
+    ]);
+  });
+
+  it("still builds keys from the older object shape", () => {
+    const failure = phoenixFailure("RULE_CREATE/FAILURE", {
+      name: ["can't be blank"],
+    });
+
+    expect(failure.errorList).toEqual([
+      { name: "ruleCreate.error.name.can't be blank" },
+    ]);
+  });
+});

package/src/services/message.js

@@ -4,7 +4,9 @@ const isErrorsFailure = (status, data) =>
   status === 422 && _.conformsTo({ errors: _.isArray })(data);
 
 const isPhoenixFailure = (status, data) =>
-  status === 422 && _.conformsTo({ errors: _.isObject })(data);
+  status === 422 &&
+  (_.conformsTo({ errors: _.isObject })(data) ||
+    _.conformsTo({ errors: _.isArray })(data));
 
 const isDefaultFailure = (status) => {
   return !!status;
@@ -79,14 +81,32 @@ export const graphQLErrors = (payload) => {
   };
 };
 
-export const toErrorList = (prefix) =>
-  _.flow(
+const errorKeyPart = (entry) => {
+  if (_.isString(entry)) return entry;
+  if (_.isObject(entry)) return entry.message || "";
+  return String(entry ?? "");
+};
+
+export const toErrorList = (prefix) => (errors) => {
+  if (_.isArray(errors)) {
+    return errors.map((error) => ({
+      name: error.name,
+      ...(error.field ? { field: error.field } : {}),
+      ...(_.isEmpty(error.values) ? {} : { values: error.values }),
+    }));
+  }
+
+  return _.flow(
     _.toPairs,
-    _.flatMap(([field, errors]) =>
-      _.map((v) => `${prefix}.${field}.${v}`)(errors),
+    _.flatMap(([field, errorList]) =>
+      _.map((entry) => {
+        const part = errorKeyPart(entry);
+        return part ? `${prefix}.${field}.${part}` : `${prefix}.${field}`;
+      })(errorList),
     ),
     _.map((name) => ({ name })),
-  );
+  )(errors);
+};
 
 export const phoenixFailure = (type, errors) => {
   const action = _.flow(_.replace("/FAILURE", ""), _.camelCase)(type);