@truedat/df 8.13.5 → 8.13.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "8.13.5",
+  "version": "8.13.7",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "module": "src/index.js",
@@ -54,14 +54,14 @@
     "@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"
   },
   "dependencies": {
     "@apollo/client": "^3.13.8",
-    "@truedat/core": "8.13.5",
+    "@truedat/core": "8.13.7",
     "axios": "^1.20.0",
     "graphql": "^16.11.0",
     "is-hotkey": "^0.2.0",
@@ -90,5 +90,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "9b87cbb7143f20b305b84077c1fcf004e5b27726"
+  "gitHead": "704dcfcba34b6094a368a93059de7f4937502f32"
 }

package/src/components/DynamicForm.js

@@ -10,6 +10,7 @@ import FieldGroupSegment from "./FieldGroupSegment";
 export const DynamicForm = ({
   applyTemplate,
   content,
+  originalContent,
   fieldsToOmit,
   instanceId,
   isModification,
@@ -98,6 +99,7 @@ export const DynamicForm = ({
       noTranslatableFields={noTranslatableFields}
       scope={template?.scope}
       fields={fields}
+      originalContent={originalContent}
       onFieldChange={handleChange}
       isModification={isModification}
     />
@@ -107,6 +109,7 @@ export const DynamicForm = ({
 DynamicForm.propTypes = {
   applyTemplate: PropTypes.func,
   content: PropTypes.object,
+  originalContent: PropTypes.object,
   fieldsToOmit: PropTypes.array,
   instanceId: PropTypes.string,
   isModification: PropTypes.bool,

package/src/components/DynamicFormWithTranslations.js

@@ -11,6 +11,7 @@ import FieldGroupWithTranslations from "./FieldGroupWithTranslations";
 export const DynamicFormWithTranslations = ({
   applyTemplate,
   i18nContent,
+  originalI18nContent,
   fieldsToOmit,
   isModification,
   loading,
@@ -76,6 +77,7 @@ export const DynamicFormWithTranslations = ({
       }
       scope={template?.scope}
       fieldsByLang={langs}
+      originalI18nContent={originalI18nContent}
       onFieldChange={handleChange}
       isModification={isModification}
     />
@@ -85,6 +87,7 @@ export const DynamicFormWithTranslations = ({
 DynamicFormWithTranslations.propTypes = {
   applyTemplate: PropTypes.func,
   i18nContent: PropTypes.object,
+  originalI18nContent: PropTypes.object,
   fieldsToOmit: PropTypes.array,
   isModification: PropTypes.bool,
   loading: PropTypes.bool,

package/src/components/FieldGroupSegment.js

@@ -7,6 +7,7 @@ export const FieldGroupSegment = ({
   instanceId,
   scope,
   fields,
+  originalContent,
   isModification,
   name,
   noTranslatableFields,
@@ -24,6 +25,7 @@ export const FieldGroupSegment = ({
             disabled: _.includes(field.name)(noTranslatableFields),
           }}
           fields={fields}
+          originalField={originalContent?.[field.name]}
           isModification={isModification}
           key={i}
           onChange={
@@ -38,6 +40,7 @@ export const FieldGroupSegment = ({
 
 FieldGroupSegment.propTypes = {
   fields: PropTypes.array,
+  originalContent: PropTypes.object,
   instanceId: PropTypes.string,
   isModification: PropTypes.bool,
   name: PropTypes.string,

package/src/components/FieldGroupWithTranslations.js

@@ -13,6 +13,7 @@ export const FieldGroupWithTranslations = ({
   scope,
   name: groupName,
   fieldsByLang,
+  originalI18nContent,
   isModification,
   onFieldChange,
 }) => {
@@ -101,6 +102,9 @@ export const FieldGroupWithTranslations = ({
                               disabled: false,
                             }}
                             fields={fieldsByLang[defaultLang]}
+                            originalField={
+                              originalI18nContent?.[defaultLang]?.[field.name]
+                            }
                             isModification={isModification}
                             key={`${field.name}-${defaultLang}`}
                             lang={defaultLang}
@@ -122,6 +126,11 @@ export const FieldGroupWithTranslations = ({
                             scope={scope}
                             field={getFieldForLang(field, selectedAltLang)}
                             fields={fieldsByLang[selectedAltLang] || []}
+                            originalField={
+                              originalI18nContent?.[selectedAltLang]?.[
+                                field.name
+                              ]
+                            }
                             isModification={isModification}
                             key={`${field.name}-${selectedAltLang}`}
                             onChange={(e, { name, value }) =>
@@ -155,6 +164,9 @@ export const FieldGroupWithTranslations = ({
                         disabled: false,
                       }}
                       fields={fieldsByLang[defaultLang]}
+                      originalField={
+                        originalI18nContent?.[defaultLang]?.[field.name]
+                      }
                       isModification={isModification}
                       lang={defaultLang}
                       onChange={(e, { name, value }) =>
@@ -173,6 +185,7 @@ export const FieldGroupWithTranslations = ({
 
 FieldGroupWithTranslations.propTypes = {
   fieldsByLang: PropTypes.objectOf(PropTypes.array),
+  originalI18nContent: PropTypes.object,
   isModification: PropTypes.bool,
   name: PropTypes.string,
   onFieldChange: PropTypes.func,

package/src/components/SelectDynamicFormWithTranslations.js

@@ -11,6 +11,7 @@ import DynamicFormWithTranslations from "./DynamicFormWithTranslations";
 export default function SelectDynamicFormWithTranslations({
   beforeSelector,
   i18nContent,
+  originalI18nContent,
   onChangeContent,
   domainIds,
   header,
@@ -48,7 +49,10 @@ export default function SelectDynamicFormWithTranslations({
   const handleChange = (content, currentTemplate = thisTemplate, lang) => {
     onChangeContent(lang, {
       content,
-      valid: validateContent(currentTemplate)(content),
+      valid: validateContent(
+        currentTemplate,
+        originalI18nContent?.[lang],
+      )(content),
     });
   };
 
@@ -124,6 +128,7 @@ export default function SelectDynamicFormWithTranslations({
           <DynamicFormWithTranslations
             template={template}
             i18nContent={i18nContent}
+            originalI18nContent={originalI18nContent}
             onChange={onChangeContent}
             selectedDomain={domain}
             isModification={isModification}
@@ -137,6 +142,7 @@ export default function SelectDynamicFormWithTranslations({
 SelectDynamicFormWithTranslations.propTypes = {
   beforeSelector: PropTypes.node,
   i18nContent: PropTypes.object,
+  originalI18nContent: PropTypes.object,
   onChangeContent: PropTypes.func,
   domainIds: PropTypes.array,
   header: PropTypes.node,

package/src/components/SelectableDynamicForm.js

@@ -23,6 +23,7 @@ const TemplateQueryFetcher = ({ scope, domainIds, onLoad }) => {
 
 export default function SelectableDynamicForm({
   content,
+  originalContent,
   domainIds,
   header,
   hideLabel,
@@ -59,7 +60,10 @@ export default function SelectableDynamicForm({
     : null;
 
   const handleChange = (content, currentTemplate = template) => {
-    onChange({ content, valid: validateContent(currentTemplate)(content) });
+    onChange({
+      content,
+      valid: validateContent(currentTemplate, originalContent)(content),
+    });
   };
 
   const handleLoad = ({ templates }) => {
@@ -112,6 +116,7 @@ export default function SelectableDynamicForm({
           {header}
           <DynamicForm
             content={content}
+            originalContent={originalContent}
             instanceId={instanceId}
             selectedDomain={domain}
             template={template}
@@ -127,6 +132,7 @@ export default function SelectableDynamicForm({
 
 SelectableDynamicForm.propTypes = {
   content: PropTypes.object,
+  originalContent: PropTypes.object,
   domainIds: PropTypes.array,
   header: PropTypes.node,
   hideLabel: PropTypes.bool,

package/src/components/__tests__/__snapshots__/SelectableDynamicForm.spec.js.snap

@@ -35,7 +35,24 @@ exports[`<SelectableDynamicForm /> with disableSelector and selectedTemplate mat
 </div>
 `;
 
-exports[`<SelectableDynamicForm /> with multiple templates matches error snapshot 1`] = `<div />`;
+exports[`<SelectableDynamicForm /> with multiple templates matches error snapshot 1`] = `
+<div>
+  <div
+    class="ui compact negative message"
+  >
+    <div
+      class="content"
+    >
+      Templates could not be loaded. Check your access and try again.
+      <button
+        class="ui small button"
+      >
+        Retry
+      </button>
+    </div>
+  </div>
+</div>
+`;
 
 exports[`<SelectableDynamicForm /> with multiple templates matches the latest snapshot 1`] = `
 <div>

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

@@ -0,0 +1,131 @@
+import { render } from "@truedat/test/render";
+import { DynamicForm } from "../DynamicForm";
+import { DynamicFormWithTranslations } from "../DynamicFormWithTranslations";
+import DynamicField from "../widgets/DynamicField";
+import { parseGroups, parseGroupsWithLangs } from "../../utils";
+
+jest.mock("../widgets/DynamicField", () => ({
+  __esModule: true,
+  default: jest.fn(() => null),
+}));
+
+jest.mock("../../utils", () => ({
+  ...jest.requireActual("../../utils"),
+  parseGroups: jest.fn(),
+  parseGroupsWithLangs: jest.fn(),
+}));
+
+jest.mock("@truedat/core/i18n", () => ({
+  useLanguage: () => ({
+    defaultLang: "en",
+    altLang: "es",
+    altLangs: ["es"],
+    requiredLangs: ["en"],
+    isMultilingual: true,
+    setAltLang: jest.fn(),
+  }),
+  I18nProvider: ({ children }) => children,
+}));
+
+const template = { name: "template", content: [] };
+const originalDate = { value: "2025-01-01", origin: "user" };
+const translatedOriginalDate = { value: "2024-01-01", origin: "user" };
+const field = {
+  name: "date",
+  label: "Date",
+  type: "date",
+  widget: "date",
+  value: originalDate,
+};
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  parseGroups.mockReturnValue(() => [{ fields: [field] }]);
+  parseGroupsWithLangs.mockReturnValue(() => [
+    {
+      langs: {
+        en: [{ ...field, widget: "string" }],
+        es: [{ ...field, widget: "string" }],
+      },
+    },
+  ]);
+});
+
+describe("DynamicForm original content", () => {
+  it("forwards the original field object through its group", () => {
+    render(
+      <DynamicForm
+        template={template}
+        content={{ date: originalDate }}
+        originalContent={{ date: originalDate }}
+        applyTemplate={(content) => content}
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(DynamicField.mock.calls[0][0].originalField).toBe(originalDate);
+  });
+
+  it("does not invent a baseline when original content is absent", () => {
+    render(
+      <DynamicForm
+        template={template}
+        content={{ date: originalDate }}
+        applyTemplate={(content) => content}
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(DynamicField.mock.calls[0][0].originalField).toBeUndefined();
+  });
+});
+
+describe("DynamicFormWithTranslations original content", () => {
+  it("selects each language baseline directly from its content map", () => {
+    render(
+      <DynamicFormWithTranslations
+        template={template}
+        i18nContent={{ en: { date: originalDate }, es: {} }}
+        originalI18nContent={{
+          en: { date: originalDate },
+          es: { date: translatedOriginalDate },
+        }}
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(DynamicField.mock.calls[0][0].originalField).toBe(originalDate);
+    expect(DynamicField.mock.calls[1][0].originalField).toBe(
+      translatedOriginalDate,
+    );
+  });
+
+  it("does not use the default language baseline for a new translation", () => {
+    render(
+      <DynamicFormWithTranslations
+        template={template}
+        i18nContent={{ en: { date: originalDate }, es: {} }}
+        originalI18nContent={{ en: { date: originalDate } }}
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(DynamicField.mock.calls[1][0].originalField).toBeUndefined();
+  });
+
+  it("forwards the baseline for groups without translatable fields", () => {
+    parseGroupsWithLangs.mockReturnValue(() => [
+      { langs: { en: [{ ...field, type: "number", widget: "number" }] } },
+    ]);
+    render(
+      <DynamicFormWithTranslations
+        template={template}
+        i18nContent={{ en: { date: originalDate } }}
+        originalI18nContent={{ en: { date: originalDate } }}
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(DynamicField.mock.calls[0][0].originalField).toBe(originalDate);
+  });
+});

package/src/components/widgets/DateField.js

@@ -1,19 +1,28 @@
-import _ from "lodash/fp";
 import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
+import { checkValuesAgainstBounds } from "../../templates/utils/dateRestrictions";
 
-export const DateField = ({ field: { name, value }, onChange }) => (
-  <Form.Input
-    placeholder="Date"
-    onChange={(e, { value }) => onChange(e, { name: name, value: value })}
-    value={value || ""}
-    type="date"
-  />
-);
+export const DateField = ({ field: { name, value }, onChange, min, max }) => {
+  const outOfRange = checkValuesAgainstBounds(value, { min, max }) !== "ok";
+
+  return (
+    <Form.Input
+      error={outOfRange}
+      placeholder="Date"
+      onChange={(e, { value }) => onChange(e, { name: name, value: value })}
+      value={value || ""}
+      min={min}
+      max={max}
+      type="date"
+    />
+  );
+};
 
 DateField.propTypes = {
   field: PropTypes.object,
   onChange: PropTypes.func,
+  min: PropTypes.string,
+  max: PropTypes.string,
 };
 
 export default DateField;

package/src/components/widgets/DateTimeField.js

@@ -1,19 +1,36 @@
-import _ from "lodash/fp";
 import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
+import {
+  checkValuesAgainstBounds,
+  toInputBound,
+} from "../../templates/utils/dateRestrictions";
 
-export const DateTimeField = ({ field: { name, value } = {}, onChange }) => (
-  <Form.Input
-    placeholder="Date Time"
-    onChange={(e, { value }) => onChange(e, { name: name, value: value })}
-    value={value || ""}
-    type="datetime-local"
-  />
-);
+export const DateTimeField = ({
+  field: { name, value } = {},
+  onChange,
+  min,
+  max,
+}) => {
+  const outOfRange = checkValuesAgainstBounds(value, { min, max }) !== "ok";
+
+  return (
+    <Form.Input
+      error={outOfRange}
+      placeholder="Date Time"
+      onChange={(e, { value }) => onChange(e, { name: name, value: value })}
+      value={value || ""}
+      min={toInputBound(min, "min")}
+      max={toInputBound(max, "max")}
+      type="datetime-local"
+    />
+  );
+};
 
 DateTimeField.propTypes = {
   field: PropTypes.object,
   onChange: PropTypes.func,
+  min: PropTypes.string,
+  max: PropTypes.string,
 };
 
 export default DateTimeField;

package/src/components/widgets/DynamicField.js

@@ -1,14 +1,28 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
 import { Form, Icon, Popup, Label } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { MarkdownReader } from "@truedat/core/components/MarkdownReader";
 import OriginLabel from "@truedat/core/components/OriginLabel";
+import { dateValueUnchanged } from "../../templates/utils/dateValueUnchanged";
+import {
+  publishedBounds,
+  checkValuesAgainstBounds,
+  resolveRestrictions,
+} from "../../templates/utils/dateRestrictions";
 import FieldByWidget from "./FieldByWidget";
 
 const isNullOrEmpty = (value) =>
   !_.isNumber(value) && (!value || _.isEmpty(value));
 
+const dateBounds = (field, type) => {
+  if (type !== "date" && type !== "datetime") return {};
+  return (
+    publishedBounds(field?.restrictions) ||
+    resolveRestrictions(field?.restrictions, type)
+  );
+};
+
 export const DynamicField = ({
   field: {
     label,
@@ -21,6 +35,7 @@ export const DynamicField = ({
   },
   instanceId,
   isModification,
+  originalField,
   onChange,
   scope,
 }) => {
@@ -28,8 +43,21 @@ export const DynamicField = ({
     value: null,
     origin: "default",
   };
+
+  const { formatMessage } = useIntl();
+
+  const unchanged = dateValueUnchanged(value, originalField);
+  const bounds = unchanged ? {} : dateBounds(fieldProps, fieldProps.type);
+  const verdict =
+    fieldProps.type === "date" || fieldProps.type === "datetime"
+      ? checkValuesAgainstBounds(value, bounds)
+      : "ok";
+  const outOfRange = verdict !== "ok";
+  const breachedBound = verdict === "too_early" ? bounds.min : bounds.max;
+
   return (
     <Form.Field
+      error={outOfRange}
       disabled={(!editable && isModification) || disabled}
       data-testid="form-field"
     >
@@ -89,10 +117,34 @@ export const DynamicField = ({
       </label>
       <FieldByWidget
         field={{ ...fieldProps, value, cardinality, instanceId }}
+        originalField={originalField}
         onChange={onChange}
         scope={scope}
         widget={_.prop("widget")(fieldProps)}
       />
+      {outOfRange ? (
+        <Label
+          basic
+          color="red"
+          pointing="above"
+          style={{ marginTop: "0.5em" }}
+        >
+          {verdict === "invalid_date"
+            ? formatMessage({
+                id: "template.field.restrictions.validation.invalid_date",
+                defaultMessage: "Enter a valid date or date-time.",
+              })
+            : formatMessage(
+                {
+                  id:
+                    verdict === "too_early"
+                      ? "template.field.values.default_after_min"
+                      : "template.field.values.default_before_max",
+                },
+                { limit: breachedBound },
+              )}
+        </Label>
+      ) : null}
     </Form.Field>
   );
 };
@@ -101,6 +153,7 @@ DynamicField.propTypes = {
   field: PropTypes.object.isRequired,
   instanceId: PropTypes.string,
   isModification: PropTypes.bool,
+  originalField: PropTypes.object,
   onChange: PropTypes.func.isRequired,
   scope: PropTypes.string,
 };

package/src/components/widgets/DynamicTableField.js

@@ -3,39 +3,53 @@ import { lazy } from "react";
 import PropTypes from "prop-types";
 import { Button, Icon, Label, Table } from "semantic-ui-react";
 import { useIntl } from "react-intl";
+import {
+  copyRow,
+  getOriginalRow,
+  markNewRow,
+} from "../../templates/utils/originalTableRows";
+import { dateValueUnchanged } from "../../templates/utils/dateValueUnchanged";
+import {
+  publishedBounds,
+  checkValuesAgainstBounds,
+  resolveRestrictions,
+} from "../../templates/utils/dateRestrictions";
 
 const FieldByWidget = lazy(() => import("./FieldByWidget"));
 
 export const DynamicTableField = ({
   field: { name, value: fieldValue = [], values },
+  originalField,
   onChange,
   scope,
 }) => {
   const value = fieldValue || [];
   const table_columns = _.get("table_columns")(values) || [];
   const { formatMessage } = useIntl();
+  const originalRows = value.map((row, index) =>
+    getOriginalRow(row, index, originalField?.value),
+  );
 
   const handleAddRow = (e) => {
     e && e.preventDefault();
     onChange(e, {
       name,
-      value: [...value, {}],
+      value: [...value, markNewRow({})],
     });
   };
 
   const handleRemoveRow = (e, id) => {
     e && e.preventDefault();
-    const newValue = [...value];
-    newValue.splice(id, 1);
+    const newValue = value.filter((_row, index) => index !== id);
     onChange(e, { name, value: newValue });
   };
 
   const handleChange = (idx, e, data) => {
     const currentValue = removeDeletedColumns(table_columns, [...value]);
-    const input = {
+    const input = copyRow(currentValue[idx], {
       ...currentValue[idx],
       [data.name]: { origin: "user", value: data.value },
-    };
+    });
     onChange(e, {
       name,
       value: currentValue.map((newElem, i) => (i == idx ? input : newElem)),
@@ -48,7 +62,7 @@ export const DynamicTableField = ({
       const field_deleted = _.keys(row).filter(
         (x) => !columns_name.includes(x),
       );
-      return _.omit(field_deleted)(row);
+      return copyRow(row, _.omit(field_deleted)(row));
     });
   };
 
@@ -70,6 +84,20 @@ export const DynamicTableField = ({
     _.fromPairs,
   )(rows);
 
+  const originalCell = (rowIndex, fieldName) =>
+    originalRows[rowIndex]?.[fieldName];
+
+  const dateError = (field, originalCell) => {
+    const unchanged = dateValueUnchanged(field.value, originalCell);
+    if (unchanged || !["date", "datetime"].includes(field?.type)) return false;
+    const bounds =
+      publishedBounds(field?.restrictions) ||
+      resolveRestrictions(field?.restrictions, field?.type);
+    return bounds
+      ? checkValuesAgainstBounds(field?.value, bounds) !== "ok"
+      : false;
+  };
+
   return (
     <Table celled className="no_padding">
       <Table.Header>
@@ -96,9 +124,14 @@ export const DynamicTableField = ({
         {rows.map((row, i) => (
           <Table.Row key={i}>
             {row.map((field, k) => (
-              <Table.Cell key={k} width={5}>
+              <Table.Cell
+                key={k}
+                width={5}
+                error={dateError(field, originalCell(i, field.name))}
+              >
                 <FieldByWidget
                   field={field}
+                  originalField={originalCell(i, field.name)}
                   widget={field.widget}
                   onChange={(e, data) => handleChange(i, e, data)}
                   scope={scope}
@@ -147,6 +180,7 @@ export const DynamicTableField = ({
 
 DynamicTableField.propTypes = {
   field: PropTypes.object,
+  originalField: PropTypes.object,
   onChange: PropTypes.func,
   scope: PropTypes.string,
 };