@truedat/df 7.12.5 → 7.12.7

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

@@ -0,0 +1,257 @@
+import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { screen, fireEvent, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import DynamicTableField from "../DynamicTableField";
+
+jest.mock("../FieldByWidget", () => ({
+    __esModule: true,
+    default: ({ field, onChange }) => {
+        const testId = `cell-input-${field.name}`;
+        return (
+            <input
+                data-testid={testId}
+                defaultValue={field.value ?? ""}
+                onChange={(e) =>
+                    onChange(e, { name: field.name, value: e.target.value })
+                }
+            />
+        );
+    },
+}));
+
+const baseColumns = [
+    { name: "col1", widget: "text" },
+    { name: "col2", widget: "text" },
+];
+
+describe("DynamicTableField", () => {
+    test("renders header cells (including required asterisk when cardinality is '+' or '1')", async () => {
+        const onChange = jest.fn();
+        const table_columns = [
+            { name: "col1", widget: "text", cardinality: "+" },
+            { name: "col2", widget: "text" },
+            { name: "col3", widget: "text", cardinality: "1" },
+        ];
+
+        const props = {
+            field: {
+                name: "tbl",
+                value: [
+                    {
+                        col1: { value: "a" },
+                        col2: { value: "b" },
+                        col3: { value: "c" },
+                    },
+                ],
+                values: { table_columns },
+            },
+            onChange,
+            scope: "test",
+        };
+
+        const rendered = render(<DynamicTableField {...props} />);
+        await waitForLoad(rendered);
+        expect(rendered.container).toMatchSnapshot();
+
+        table_columns.forEach((c) => {
+            expect(rendered.getByText(c.name)).toBeInTheDocument();
+        });
+
+        const requiredMarks = rendered.getAllByText("*");
+        expect(requiredMarks.length).toBe(2);
+    });
+
+    test("clicking add row calls onChange with a new empty row appended", async () => {
+        const user = userEvent.setup({ delay: null });
+        const onChange = jest.fn();
+
+        const initialValue = [
+            { col1: { value: "a" }, col2: { value: "1" } },
+            { col1: { value: "b" }, col2: { value: "2" } },
+        ];
+
+        const props = {
+            field: {
+                name: "tbl",
+                value: initialValue,
+                values: { table_columns: baseColumns },
+            },
+            onChange,
+            scope: "test",
+        };
+
+        const rendered = render(<DynamicTableField {...props} />);
+        await waitForLoad(rendered);
+        const addButton = rendered.getByTestId("add-button");
+        await user.click(addButton);
+
+        expect(onChange).toHaveBeenCalledTimes(1);
+        const [_e, payload] = onChange.mock.calls[0];
+        expect(payload.name).toBe("tbl");
+        expect(Array.isArray(payload.value)).toBe(true);
+        expect(payload.value).toHaveLength(initialValue.length + 1);
+
+        expect(payload.value[payload.value.length - 1]).toEqual({});
+    });
+
+    test("clicking the trash icon removes the corresponding row and calls onChange", async () => {
+        const onChange = jest.fn();
+
+        const initialValue = [
+            { col1: { value: "a" }, col2: { value: "1" } },
+            { col1: { value: "b" }, col2: { value: "2" } },
+            { col1: { value: "c" }, col2: { value: "3" } },
+        ];
+
+        const props = {
+            field: {
+                name: "tbl",
+                value: initialValue,
+                values: { table_columns: baseColumns },
+            },
+            onChange,
+            scope: "test",
+        };
+
+        const rendered = render(<DynamicTableField {...props} />);
+        await waitForLoad(rendered);
+
+        const firstRow = rendered.container.querySelector("tbody tr");
+        expect(firstRow).toBeTruthy();
+
+        const trashIcon = firstRow.querySelector(".selectable");
+        expect(trashIcon).toBeTruthy();
+
+        fireEvent.click(trashIcon);
+
+        expect(onChange).toHaveBeenCalledTimes(1);
+        const [, payload] = onChange.mock.calls[0];
+
+        expect(payload.name).toBe("tbl");
+        expect(payload.value).toHaveLength(2);
+
+        expect(payload.value[0]).toEqual(initialValue[1]);
+        expect(payload.value[1]).toEqual(initialValue[2]);
+    });
+
+    test("editing a cell calls onChange with updated structure { origin: 'user', value }", async () => {
+        const user = userEvent.setup({ delay: null });
+        const onChange = jest.fn();
+
+        const initialValue = [
+            { col1: { value: "old-a" }, col2: { value: "1" } },
+            { col1: { value: "old-b" }, col2: { value: "2" } },
+        ];
+
+        const props = {
+            field: {
+                name: "tbl",
+                value: initialValue,
+                values: { table_columns: baseColumns },
+            },
+            onChange,
+            scope: "test",
+        };
+
+        const rendered = render(<DynamicTableField {...props} />);
+        await waitForLoad(rendered);
+
+        const input = rendered.getAllByTestId("cell-input-col1")[0];
+        await user.clear(input);
+        await user.type(input, "new-a");
+
+        // Last call should have the updated row 0 col1 shape
+        expect(onChange).toHaveBeenCalled();
+        const [, payload] = onChange.mock.calls[onChange.mock.calls.length - 1];
+
+        expect(payload.name).toBe("tbl");
+        expect(payload.value).toHaveLength(2);
+
+        expect(payload.value[0].col1).toEqual({
+            origin: "user",
+            value: "new-a",
+        });
+
+        expect(payload.value[0].col2).toEqual({ value: "1" });
+        expect(payload.value[1]).toEqual(initialValue[1]);
+    });
+
+    test("removeDeletedColumns strips keys not present in table_columns before emitting onChange", async () => {
+        const user = userEvent.setup({ delay: null });
+        const onChange = jest.fn();
+
+        const columns = [
+            { name: "col1", widget: "text" },
+            { name: "col2", widget: "text" },
+            // Note: no 'ghost' column
+        ];
+
+        const initialValue = [
+            // Row contains an extra 'ghost' key that should be stripped on change
+            { col1: { value: "x" }, col2: { value: "y" }, ghost: { value: "zzz" } },
+        ];
+
+        const props = {
+            field: {
+                name: "tbl",
+                value: initialValue,
+                values: { table_columns: columns },
+            },
+            onChange,
+            scope: "test",
+        };
+
+        const rendered = render(<DynamicTableField {...props} />);
+        await waitForLoad(rendered);
+
+        // Trigger a change on col2; this will call handleChange → removeDeletedColumns
+        const input = rendered.getByTestId("cell-input-col2");
+        await user.clear(input);
+        await user.type(input, "updated");
+
+        expect(onChange).toHaveBeenCalled();
+        const [, payload] = onChange.mock.calls[onChange.mock.calls.length - 1];
+
+        // 'ghost' should be omitted from the emitted row
+        expect(payload.value[0]).toEqual({
+            col1: { value: "x" },
+            col2: { origin: "user", value: "updated" },
+        });
+        expect(payload.value[0].ghost).toBeUndefined();
+    });
+
+    test("delete button exists per row and add button exists in footer", async () => {
+        const onChange = jest.fn();
+
+        const initialValue = [
+            { col1: { value: "a" }, col2: { value: "1" } },
+            { col1: { value: "b" }, col2: { value: "2" } },
+        ];
+
+        const props = {
+            field: {
+                name: "tbl",
+                value: initialValue,
+                values: { table_columns: baseColumns },
+            },
+            onChange,
+            scope: "test",
+        };
+
+        const rendered = render(<DynamicTableField {...props} />);
+        await waitForLoad(rendered);
+
+        // Footer add button
+        expect(rendered.getByTestId("add-button")).toBeInTheDocument();
+
+        // Each row should render a Button containing the trash Icon
+        const rows = rendered.container.querySelectorAll("tbody tr");
+        expect(rows.length).toBe(2);
+
+        rows.forEach((row) => {
+            const trashIcon = row.querySelector(".selectable");
+            expect(trashIcon).toBeTruthy();
+        });
+    });
+});

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

@@ -391,6 +391,103 @@ exports[`<DynamicField /> matches the latest snapshot (dropdown widget) 1`] = `
 </div>
 `;
 
+exports[`<DynamicField /> matches the latest snapshot (dynamic_table widget) 1`] = `
+<div>
+  <div
+    class="field"
+    data-testid="form-field"
+  >
+    <label />
+    <table
+      class="ui celled table no_padding"
+    >
+      <thead
+        class=""
+      >
+        <tr
+          class=""
+        >
+          <th
+            class=""
+          >
+            col
+            <span
+              class="is_required"
+            >
+              *
+            </span>
+          </th>
+          <th
+            class=""
+          />
+        </tr>
+      </thead>
+      <tbody
+        class=""
+      >
+        <tr
+          class=""
+        >
+          <td
+            class="five wide"
+          >
+            <div
+              class="field"
+            >
+              <div
+                class="ui input"
+              >
+                <input
+                  name="col"
+                  type="text"
+                  value="foo"
+                />
+              </div>
+            </div>
+          </td>
+          <td
+            class="one wide"
+            style="text-align: center; padding: 1px;"
+          >
+            <button
+              class="ui red mini basic icon button"
+            >
+              <i
+                aria-hidden="true"
+                class="red trash alternate outline icon selectable"
+              />
+            </button>
+          </td>
+        </tr>
+      </tbody>
+      <tfoot
+        class=""
+      >
+        <tr
+          class=""
+        >
+          <th
+            class=""
+            colspan="2"
+          >
+            <button
+              class="ui small compact icon right floated button"
+              data-testid="add-button"
+              name="add_button"
+            >
+              <i
+                aria-hidden="true"
+                class="green add icon"
+              />
+            </button>
+          </th>
+        </tr>
+      </tfoot>
+    </table>
+  </div>
+</div>
+`;
+
 exports[`<DynamicField /> matches the latest snapshot (image widget) 1`] = `
 <div>
   <div

package/src/components/widgets/__tests__/__snapshots__/DynamicTableField.spec.js.snap

@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DynamicTableField renders header cells (including required asterisk when cardinality is '+' or '1') 1`] = `
+<div>
+  <table
+    class="ui celled table no_padding"
+  >
+    <thead
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <th
+          class=""
+        >
+          col1
+          <span
+            class="is_required"
+          >
+            *
+          </span>
+        </th>
+        <th
+          class=""
+        >
+          col2
+        </th>
+        <th
+          class=""
+        >
+          col3
+          <span
+            class="is_required"
+          >
+            *
+          </span>
+        </th>
+        <th
+          class=""
+        />
+      </tr>
+    </thead>
+    <tbody
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <td
+          class="five wide"
+        >
+          <input
+            data-testid="cell-input-col1"
+            value="a"
+          />
+        </td>
+        <td
+          class="five wide"
+        >
+          <input
+            data-testid="cell-input-col2"
+            value="b"
+          />
+        </td>
+        <td
+          class="five wide"
+        >
+          <input
+            data-testid="cell-input-col3"
+            value="c"
+          />
+        </td>
+        <td
+          class="one wide"
+          style="text-align: center; padding: 1px;"
+        >
+          <button
+            class="ui red mini basic icon button"
+          >
+            <i
+              aria-hidden="true"
+              class="red trash alternate outline icon selectable"
+            />
+          </button>
+        </td>
+      </tr>
+    </tbody>
+    <tfoot
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <th
+          class=""
+          colspan="4"
+        >
+          <button
+            class="ui small compact icon right floated button"
+            data-testid="add-button"
+            name="add_button"
+          >
+            <i
+              aria-hidden="true"
+              class="green add icon"
+            />
+          </button>
+        </th>
+      </tr>
+    </tfoot>
+  </table>
+</div>
+`;

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

@@ -10,9 +10,10 @@ import {
   Input,
   Icon,
 } from "semantic-ui-react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 import { dropAt, swap } from "@truedat/core/services/arrays";
 import FieldForm from "./FieldForm";
+import { defaultFieldDefinition } from "./widgetDefinitions";
 
 export const ActiveGroupForm = ({
   activeGroup,
@@ -52,20 +53,8 @@ export const ActiveGroupForm = ({
   };
 
   const handleAddField = () => {
-    const newField = {
-      name: "new_field",
-      label: "New Field",
-      widget: "string",
-      cardinality: "?",
-      type: "string",
-      default: {
-        value: "",
-        origin: "default",
-      },
-      values: null,
-    };
     const name = `${groupNamePrefix}.fields`;
-    onChange(null, { name, value: [...fields, newField] });
+    onChange(null, { name, value: [...fields, defaultFieldDefinition] });
     setActiveField(fields.length);
   };
 
@@ -166,8 +155,8 @@ export const ActiveGroupForm = ({
                 {_.isEmpty(_.prop(field.name)(dependencies))
                   ? null
                   : _.map(({ label, name }) => (
-                      <Label key={name}>{label}</Label>
-                    ))(_.prop(field.name)(dependencies))}
+                    <Label key={name}>{label}</Label>
+                  ))(_.prop(field.name)(dependencies))}
               </>
             ),
           },

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

@@ -0,0 +1,158 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import { Form } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { useEffect } from "react";
+
+import {
+    getCardinalityOptions,
+    getWidgetOptions,
+    getTypeOptions,
+    WIDGETS,
+} from "./widgetDefinitions";
+import { getValues } from "./valueDefinitions";
+
+const defaultType = (values) => _.flow(_.map("value"), _.first)(values);
+
+const FieldDefinition = ({
+    allowedTypes = [],
+    allowedWidgets = [],
+    cardinality,
+    defaultField,
+    fieldNamePrefix,
+    mandatory,
+    onChange,
+    subscribableField,
+    type,
+    valueName,
+    widget,
+}) => {
+    const { formatMessage } = useIntl();
+
+    const changeValue = (name, value) =>
+        value == "null"
+            ? onChange(null, { name, value: null })
+            : onChange(null, {
+                name,
+                value: { [value]: null },
+            });
+
+    const handleTypeChange = (e, data) => {
+        const { value } = data;
+        changeValue(valueName, defaultType(getValues(widget, value)) || "null");
+        onChange(e, {
+            name: defaultField,
+            value: { value: "", origin: "default" },
+        });
+        onChange(e, { name: subscribableField, value: false });
+        onChange(e, data);
+    };
+
+    const handleCardinalityChange = (e, data) => {
+        const value = data?.value;
+        onChange(e, data);
+        if (_.includes(value)(["1", "+"]) && !_.isEmpty(mandatory))
+            onChange(e, { name: `${fieldNamePrefix}.mandatory`, value: null });
+    };
+
+    const handleWidgetChange = (e, data) => {
+        const { value } = data;
+        const types = _.find({ value })(WIDGETS).types;
+        const updatedType = _.indexOf(type)(types) < 0 ? _.head(types) : type;
+        changeValue(
+            valueName,
+            defaultType(getValues(value, updatedType)) || "null",
+        );
+        onChange(e, {
+            name: defaultField,
+            value: { value: "", origin: "default" },
+        });
+        onChange(e, { name: subscribableField, value: false });
+        onChange(e, data);
+    };
+
+    const typeCheckOnChange = (widgetOption) => {
+        if (widgetOption && _.indexOf(type)(widgetOption.types) < 0)
+            onChange(null, {
+                name: `${fieldNamePrefix}.type`,
+                value: widgetOption.types[0],
+            });
+    };
+
+    const cardinalityCheckOnChange = (widgetOption) => {
+        if (
+            widgetOption &&
+            _.indexOf(cardinality)(widgetOption.cardinalities) < 0
+        )
+            onChange(null, {
+                name: `${fieldNamePrefix}.cardinality`,
+                value: widgetOption.cardinalities[0],
+            });
+    };
+
+    //On widget change, verify if type and cardinality are still valid
+    useEffect(() => {
+        const widgetOption = _.find({ value: widget })(WIDGETS);
+        typeCheckOnChange(widgetOption);
+        cardinalityCheckOnChange(widgetOption);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [widget, type]);
+
+    const widgetOptions = _.isEmpty(allowedWidgets)
+        ? getWidgetOptions()
+        : _.filter((widget) => allowedWidgets.includes(widget.value))(
+            getWidgetOptions(),
+        );
+    const typeOptions = _.isEmpty(allowedTypes)
+        ? getTypeOptions(widget)
+        : _.filter((type) => allowedTypes.includes(type.value))(
+            getTypeOptions(widget),
+        );
+
+    return (
+        <Form.Group size="small" widths="equal">
+            <Form.Dropdown
+                name={`${fieldNamePrefix}.widget`}
+                fluid
+                selection
+                label={formatMessage({ id: "template.field.widget" })}
+                value={widget}
+                options={widgetOptions}
+                required
+                onChange={handleWidgetChange}
+            />
+            <Form.Dropdown
+                fluid
+                selection
+                label={formatMessage({ id: "template.field.type" })}
+                onChange={handleTypeChange}
+                name={`${fieldNamePrefix}.type`}
+                value={type}
+                required
+                options={typeOptions}
+            />
+            <Form.Dropdown
+                fluid
+                selection
+                label={formatMessage({ id: "template.field.cardinality" })}
+                name={`${fieldNamePrefix}.cardinality`}
+                value={cardinality}
+                onChange={handleCardinalityChange}
+                required
+                options={getCardinalityOptions(widget)}
+            />
+        </Form.Group>
+    );
+};
+
+FieldDefinition.propTypes = {
+    fieldNamePrefix: PropTypes.string,
+    handleWidgetChange: PropTypes.func,
+    handleTypeChange: PropTypes.func,
+    handleCardinalityChange: PropTypes.func,
+    type: PropTypes.string,
+    widget: PropTypes.string,
+    cardinality: PropTypes.string,
+};
+
+export default FieldDefinition;