@truedat/df 8.3.6 → 8.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "8.3.6",
+  "version": "8.4.1",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "module": "src/index.js",
@@ -51,14 +51,14 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.3.6",
+    "@truedat/test": "8.4.1",
     "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.3.6",
+    "@truedat/core": "8.4.1",
     "axios": "^1.13.5",
     "graphql": "^16.11.0",
     "is-hotkey": "^0.2.0",
@@ -87,5 +87,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "767585383b6373e75fa50d7440e9ecf67b0573c2"
+  "gitHead": "fc56d67c36dfe2d5db692b26ebdd2071b7518e1f"
 }

package/src/components/FieldViewerValue.js

@@ -2,7 +2,7 @@ import _ from "lodash";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Icon, Label, Table } from "semantic-ui-react";
-import { SafeLink, RichTextEditor } from "@truedat/core/components";
+import { MarkdownReader, SafeLink, RichTextEditor } from "@truedat/core/components";
 import ImagePreview from "./widgets/ImagePreview";
 import SystemPreview from "./widgets/SystemPreview";
 import "../styles/fieldGroupDetail.less";
@@ -56,6 +56,8 @@ export const FieldViewerValue = ({
       );
     case "enriched_text":
       return <RichTextEditor readOnly value={value} />;
+    case "markdown":
+      return <MarkdownReader content={value} />;
     case "table":
       return (
         <Table style={{ marginTop: "10px" }} celled striped compact fixed>

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

@@ -1,6 +1,31 @@
+import { fireEvent, waitFor } from "@testing-library/react";
 import { render, waitForLoad } from "@truedat/test/render";
 import { DynamicForm } from "../DynamicForm";
 
+jest.mock("../widgets/FieldByWidget", () => ({
+  __esModule: true,
+  default: ({ field, onChange }) => {
+    if (field?.widget !== "markdown") {
+      const actual = jest.requireActual("../widgets/FieldByWidget");
+      return actual.default({ field, onChange });
+    }
+
+    return (
+      <button
+        type="button"
+        onClick={() =>
+          onChange?.(null, {
+            name: field?.name,
+            value: `${field?.value || ""} updated`,
+          })
+        }
+      >
+        Edit markdown
+      </button>
+    );
+  },
+}));
+
 describe("<DynamicForm />", () => {
   const applyTemplate = jest.fn(),
     onChange = jest.fn(),
@@ -162,4 +187,68 @@ describe("<DynamicForm />", () => {
     await waitForLoad(rendered);
     expect(rendered.container.querySelector(".field-group-segment")).toBeNull();
   });
+
+  it("sends updated markdown string to onChange payload", async () => {
+    const applyTemplate = jest.fn((content) => content);
+    const onChange = jest.fn();
+
+    const template = {
+      scope: "bg",
+      content: [
+        {
+          name: "g1",
+          fields: [
+            {
+              name: "md-field",
+              label: "md-label",
+              type: "markdown",
+              widget: "markdown",
+              cardinality: "1",
+            },
+          ],
+        },
+      ],
+    };
+
+    const initialMarkdown = `## Initial
+
+_Now you can use:_
+
+*   Lists
+    
+[Links](https://example.com)
+
+**Bold**
+
+_Italic_`;
+
+    const content = {
+      "md-field": { value: initialMarkdown, origin: "user" },
+    };
+
+    const rendered = render(
+      <DynamicForm
+        applyTemplate={applyTemplate}
+        content={content}
+        onChange={onChange}
+        template={template}
+      />,
+    );
+
+    await waitForLoad(rendered);
+    onChange.mockClear();
+
+    fireEvent.click(rendered.getByText(/edit markdown/i));
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    expect(onChange).toHaveBeenLastCalledWith({
+      "md-field": {
+        value: `${initialMarkdown} updated`,
+        origin: "user",
+      },
+    });
+  });
 });

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

@@ -0,0 +1,40 @@
+import { render } from "@truedat/test/render";
+import { DynamicFormViewer } from "../DynamicFormViewer";
+import { markdownToHtml } from "@truedat/core/components/Markdown";
+
+describe("<DynamicFormViewer />", () => {
+  it("renders markdown content through MarkdownReader", () => {
+    const markdown = "## Title\n\n**Hello** world\n\n[link](https://example.com)";
+
+    const template = {
+      scope: "bg",
+      content: [
+        {
+          name: "g1",
+          fields: [
+            {
+              name: "md-field",
+              label: "md-label",
+              type: "markdown",
+              widget: "markdown",
+              cardinality: "1",
+            },
+          ],
+        },
+      ],
+    };
+
+    const content = {
+      "md-field": { value: markdown, origin: "user" },
+    };
+
+    const { container } = render(
+      <DynamicFormViewer template={template} content={content} />
+    );
+
+    const reader = container.querySelector(".markdown-reader");
+    expect(reader).toBeInTheDocument();
+    expect(reader.innerHTML).toBe(markdownToHtml(markdown));
+  });
+});
+

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

@@ -0,0 +1,122 @@
+import { fireEvent, waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { DynamicFormWithTranslations } from "../DynamicFormWithTranslations";
+
+jest.mock("@truedat/core/i18n", () => {
+  const originalModule = jest.requireActual("@truedat/core/i18n");
+  return {
+    __esModule: true,
+    ...originalModule,
+    useLanguage: () => ({
+      defaultLang: "es",
+      altLangs: ["es", "en"],
+      requiredLangs: ["es", "en"],
+      enabledLangs: ["es", "en"],
+      isMultilingual: true,
+      setAltLang: jest.fn(),
+      altLang: "en",
+      getMessagesForLang: () => ({}),
+      lang: "es",
+      loading: false,
+      locales: [],
+      localesError: null,
+      mutate: jest.fn(),
+      onIntlError: () => {},
+    }),
+  };
+});
+
+jest.mock("../widgets/FieldByWidget", () => ({
+  __esModule: true,
+  default: ({ field, onChange }) => (
+    <button
+      type="button"
+      onClick={() =>
+        onChange?.(null, {
+          name: field?.name,
+          value: `${field?.value || ""} updated`,
+        })
+      }
+    >
+      Edit markdown
+    </button>
+  ),
+}));
+
+jest.mock("@truedat/core/components", () => {
+  const originalModule = jest.requireActual("@truedat/core/components");
+  return {
+    __esModule: true,
+    ...originalModule,
+    LanguagesTabs: () => null,
+  };
+});
+
+describe("<DynamicFormWithTranslations /> markdown", () => {
+  it("calls onChange with the updated markdown per language", async () => {
+    const applyTemplate = jest.fn((content) => content);
+    const onChange = jest.fn();
+
+    const template = {
+      scope: "bg",
+      name: "tmpl",
+      content: [
+        {
+          name: "g1",
+          fields: [
+            {
+              name: "md-field",
+              label: "md-label",
+              type: "markdown",
+              widget: "markdown",
+              cardinality: "1",
+            },
+          ],
+        },
+      ],
+    };
+
+    const i18nContent = {
+      es: { "md-field": { value: "## ES", origin: "user" } },
+      en: { "md-field": { value: "## EN", origin: "user" } },
+    };
+
+    const rendered = render(
+      <DynamicFormWithTranslations
+        applyTemplate={applyTemplate}
+        i18nContent={i18nContent}
+        onChange={onChange}
+        template={template}
+      />,
+    );
+
+    const buttons = rendered.getAllByText(/edit markdown/i);
+    expect(buttons.length).toBe(2);
+
+    fireEvent.click(buttons[0]);
+    fireEvent.click(buttons[1]);
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    const calls = onChange.mock.calls;
+    const esCall = calls.find(([lang]) => lang === "es");
+    const enCall = calls.find(([lang]) => lang === "en");
+
+    expect(esCall).toBeTruthy();
+    expect(esCall[1]).toEqual({
+      content: {
+        "md-field": { value: "## ES updated", origin: "user" },
+      },
+    });
+
+    expect(enCall).toBeTruthy();
+    expect(enCall[1]).toEqual({
+      content: {
+        "md-field": { value: "## EN updated", origin: "user" },
+      },
+    });
+  });
+});
+

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

@@ -1,4 +1,6 @@
+import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
+import { markdownToHtml } from "@truedat/core/components/Markdown";
 import { EditableDynamicFieldValue } from "../EditableDynamicFieldValue";
 
 describe("<EditableDynamicFieldValue />", () => {
@@ -33,4 +35,75 @@ describe("<EditableDynamicFieldValue />", () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  it("renders MarkdownReader when not editing", () => {
+    const markdown = "## Title\n\n**Hello** world";
+
+    const getEditFunctions = ({
+      editingField,
+      setEditingField = jest.fn(),
+      onChange = jest.fn(),
+    }) => ({
+      onChange,
+      onCancel: jest.fn(),
+      onSubmit: jest.fn(),
+      editingField,
+      setEditingField,
+      updateStatus: "none",
+    });
+
+    const props = {
+      label: "md-label",
+      name: "md-field",
+      value: { value: markdown, origin: "user" },
+      type: "markdown",
+      values: null,
+      widget: "markdown",
+      isSecret: false,
+      isChanged: false,
+      editFunctions: getEditFunctions({ editingField: "other" }),
+    };
+
+    const { container } = render(<EditableDynamicFieldValue {...props} />);
+    const reader = container.querySelector(".markdown-reader");
+    expect(reader).toBeInTheDocument();
+    expect(reader.innerHTML).toBe(markdownToHtml(markdown));
+  });
+
+  it("renders MarkdownEditor when editing", async () => {
+    const markdown = "## Title\n\n**Hello** world";
+
+    const getEditFunctions = ({
+      editingField,
+      setEditingField = jest.fn(),
+      onChange = jest.fn(),
+    }) => ({
+      onChange,
+      onCancel: jest.fn(),
+      onSubmit: jest.fn(),
+      editingField,
+      setEditingField,
+      updateStatus: "none",
+    });
+
+    const props = {
+      label: "md-label",
+      name: "md-field",
+      value: { value: markdown, origin: "user" },
+      type: "markdown",
+      values: null,
+      widget: "markdown",
+      isSecret: false,
+      isChanged: false,
+      editFunctions: getEditFunctions({ editingField: "md-field" }),
+    };
+
+    const { container } = render(<EditableDynamicFieldValue {...props} />);
+
+    await waitFor(() => {
+      expect(container.querySelector(".markdown-editor")).toBeInTheDocument();
+    });
+
+    expect(container.querySelector(".tiptap")).toBeInTheDocument();
+  });
 });

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

@@ -1,5 +1,6 @@
 import { render } from "@truedat/test/render";
 import { FieldViewerValue } from "../FieldViewerValue";
+import { markdownToHtml } from "@truedat/core/components/Markdown";
 
 describe("<FieldViewerValue />", () => {
   const testTypes = [
@@ -78,4 +79,22 @@ describe("<FieldViewerValue />", () => {
     const { container } = render(<FieldViewerValue {...props} />);
     expect(container).toMatchSnapshot();
   });
+
+  it("renders MarkdownReader for type=markdown", () => {
+    const markdown = "## Title\n\n**Hello** world\n\n[link](https://example.com)";
+    const { container } = render(
+      <FieldViewerValue type="markdown" value={markdown} label="md" widget="markdown" />,
+    );
+
+    const reader = container.querySelector(".markdown-reader");
+    expect(reader).toBeInTheDocument();
+    expect(reader.innerHTML).toBe(markdownToHtml(markdown));
+  });
+
+  it("returns null when markdown content is empty", () => {
+    const { container } = render(
+      <FieldViewerValue type="markdown" value="   " label="md" widget="markdown" />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
 });

package/src/components/widgets/FieldByWidget.js

@@ -6,6 +6,7 @@ import DropdownField from "./DropdownField";
 import EnrichedTextField from "./EnrichedTextField";
 import IdentifierField from "./IdentifierField";
 import ImageField from "./ImageField";
+import MarkdownField from "./MarkdownField";
 import PairListField from "./PairListField";
 import PasswordField from "./PasswordField";
 import RadioField from "./RadioField";
@@ -34,6 +35,8 @@ const FieldByWidget = ({ scope, widget, onChange, field }) => {
             return <PairListField field={field} onChange={onChange} />;
         case "enriched_text":
             return <EnrichedTextField field={field} onChange={onChange} />;
+        case "markdown":
+            return <MarkdownField field={field} onChange={onChange} />;
         case "table":
             return <TableField field={field} onChange={onChange} />;
         case "dynamic_table":

package/src/components/widgets/MarkdownField.js

@@ -0,0 +1,14 @@
+import PropTypes from "prop-types";
+import { MarkdownEditor } from "@truedat/core/components";
+
+export const MarkdownField = ({ field: { name, value }, onChange }) => (
+  <MarkdownEditor name={name} value={value || ""} onChange={onChange} />
+);
+
+MarkdownField.propTypes = {
+  field: PropTypes.object,
+  onChange: PropTypes.func,
+};
+
+export default MarkdownField;
+

package/src/components/widgets/__tests__/DynamicField.spec.js

@@ -1,5 +1,5 @@
 import { render, waitForLoad } from "@truedat/test/render";
-import { within } from "@testing-library/react";
+import { within, waitFor } from "@testing-library/react";
 import { DynamicField } from "../DynamicField";
 
 const onChange = jest.fn();
@@ -155,4 +155,29 @@ describe("<DynamicField />", () => {
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
+
+  it("renders MarkdownEditor for widget=markdown", async () => {
+    const props = {
+      field: {
+        widget: "markdown",
+        type: "markdown",
+        name: "md-field",
+        label: "Markdown field",
+        description: null,
+        cardinality: "1",
+        value: { value: "**Bold** text", origin: "user" },
+        editable: true,
+        disabled: false,
+      },
+      onChange: jest.fn(),
+    };
+
+    const { container } = render(<DynamicField {...props} />);
+
+    await waitFor(() => {
+      expect(container.querySelector(".markdown-editor")).toBeInTheDocument();
+    });
+
+    expect(container.querySelector(".tiptap")).toBeInTheDocument();
+  });
 });

package/src/templates/components/templateForm/__tests__/__snapshots__/ActiveGroupForm.spec.js.snap

@@ -426,6 +426,23 @@ exports[`<ActiveGroupForm /> matches the latest snapshot 1`] = `
                     Enrichedtext
                   </span>
                 </div>
+                <div
+                  aria-checked="false"
+                  aria-selected="false"
+                  class="item"
+                  role="option"
+                  style="pointer-events: all;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="text cursor icon"
+                  />
+                  <span
+                    class="text"
+                  >
+                    Markdown
+                  </span>
+                </div>
                 <div
                   aria-checked="false"
                   aria-selected="false"

package/src/templates/components/templateForm/__tests__/__snapshots__/FieldDefinition.spec.js.snap

@@ -187,6 +187,23 @@ exports[`FieldDefinition renders dropdowns with initial values 1`] = `
               Enrichedtext
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <i
+              aria-hidden="true"
+              class="text cursor icon"
+            />
+            <span
+              class="text"
+            >
+              Markdown
+            </span>
+          </div>
           <div
             aria-checked="false"
             aria-selected="false"

package/src/templates/components/templateForm/__tests__/__snapshots__/FieldForm.spec.js.snap

@@ -353,6 +353,23 @@ exports[`<FieldForm /> matches the latest snapshot 1`] = `
                 Enrichedtext
               </span>
             </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="text cursor icon"
+              />
+              <span
+                class="text"
+              >
+                Markdown
+              </span>
+            </div>
             <div
               aria-checked="false"
               aria-selected="false"
@@ -1049,6 +1066,23 @@ exports[`<FieldForm /> renders MandatoryConditional 1`] = `
                 Enrichedtext
               </span>
             </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="text cursor icon"
+              />
+              <span
+                class="text"
+              >
+                Markdown
+              </span>
+            </div>
             <div
               aria-checked="false"
               aria-selected="false"
@@ -1899,6 +1933,23 @@ exports[`<FieldForm /> renders ValuesField and manages onChange 1`] = `
                 Enrichedtext
               </span>
             </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="text cursor icon"
+              />
+              <span
+                class="text"
+              >
+                Markdown
+              </span>
+            </div>
             <div
               aria-checked="false"
               aria-selected="false"

package/src/templates/components/templateForm/__tests__/__snapshots__/TemplateForm.spec.js.snap

@@ -697,6 +697,23 @@ exports[`<TemplateForm /> matches snapshot when scope has no relations 1`] = `
                           Enrichedtext
                         </span>
                       </div>
+                      <div
+                        aria-checked="false"
+                        aria-selected="false"
+                        class="item"
+                        role="option"
+                        style="pointer-events: all;"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="text cursor icon"
+                        />
+                        <span
+                          class="text"
+                        >
+                          Markdown
+                        </span>
+                      </div>
                       <div
                         aria-checked="false"
                         aria-selected="false"
@@ -1792,6 +1809,23 @@ exports[`<TemplateForm /> matches snapshot when scope has relations 1`] = `
                           Enrichedtext
                         </span>
                       </div>
+                      <div
+                        aria-checked="false"
+                        aria-selected="false"
+                        class="item"
+                        role="option"
+                        style="pointer-events: all;"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="text cursor icon"
+                        />
+                        <span
+                          class="text"
+                        >
+                          Markdown
+                        </span>
+                      </div>
                       <div
                         aria-checked="false"
                         aria-selected="false"

package/src/templates/components/templateForm/valueDefinitions.js

@@ -28,6 +28,7 @@ const eligibleValues = {
   pair_list: { url: [null] }, // Links
   color_picker: { string: [null] },
   enriched_text: { enriched_text: [null] },
+  markdown: { markdown: [null] },
   table: { table: ["table_columns"] },
   dynamic_table: { dynamic_table: ["table_columns"] },
   password: { string: [null] },
@@ -55,7 +56,7 @@ export const valuesSelector = (type) =>
 export const valueSegment = (values, type, fieldType) =>
   _.size(values) > 1 || valuesSelector(type) || defaultValue(type, fieldType);
 
-export const hasAiSuggestions = (fieldType, keyType) => _.includes(fieldType)(["string", "enriched_text"]) &&
+export const hasAiSuggestions = (fieldType, keyType) => _.includes(fieldType)(["string", "enriched_text", "markdown"]) &&
   _.includes(keyType)(["fixed", "fixed_tuple", undefined]);
 
 const typeFromKey = (keys) =>

package/src/templates/components/templateForm/widgetDefinitions.js

@@ -108,6 +108,14 @@ export const WIDGETS = [
     cardinalities: ["?", "1"],
     types: ["enriched_text"],
   },
+  {
+    key: "markdown",
+    value: "markdown",
+    text: "Markdown",
+    icon: "text cursor",
+    cardinalities: ["?", "1"],
+    types: ["markdown"],
+  },
   {
     key: "table",
     value: "table",