@truedat/df 7.12.5 → 7.12.7

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

@@ -3,20 +3,16 @@ import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { Form, Segment } from "semantic-ui-react";
 import { useIntl } from "react-intl";
+import { hasAiSuggestions, valueSegment, getKeyType } from "./valueDefinitions";
 import DefaultValue from "./DefaultValue";
 import ValuesSelector from "./ValuesSelector";
-import { valueSegment } from "./valueDefinitions";
-
-const searchableEnabledScopes = ["bg", "dq", "ie", "ri", "dd"];
+import ValuesConfiguration from "./ValuesConfiguration";
 
 export const ValuesField = ({
   defaultField,
   field,
-  fieldType,
-  keyType,
   name,
   onChange,
-  onSelectionChange,
   subscribableField,
   values,
   fieldNamePrefix,
@@ -25,9 +21,10 @@ export const ValuesField = ({
   const { formatMessage } = useIntl();
   const { ai_suggestion, editable = true, searchable = true } = field;
 
-  const hasAiSuggestion =
-    _.includes(fieldType)(["string", "enriched_text"]) &&
-    _.includes(keyType)(["fixed", "fixed_tuple", undefined]);
+  const fieldType = field?.type;
+  const keyType = getKeyType(field);
+  const hasAiSuggestion = hasAiSuggestions(fieldType, keyType);
+
   useEffect(() => {
     if (!hasAiSuggestion)
       onChange(null, {
@@ -36,6 +33,19 @@ export const ValuesField = ({
       });
   }, [hasAiSuggestion]);
 
+  const changeValue = (name, value) =>
+    value == "null"
+      ? onChange(null, { name, value: null })
+      : onChange(null, {
+        name,
+        value: { [value]: null },
+      });
+
+  const onSelectionChange = (e, { value }) => {
+    onChange(e, { name: subscribableField, value: false });
+    changeValue(name, value);
+  };
+
   const valueTypes = (options) =>
     _.map(({ id, value }) => ({
       key: value || "null",
@@ -46,105 +56,59 @@ export const ValuesField = ({
   return field.cardinality == "0"
     ? null
     : valueSegment(values, keyType, fieldType) && (
-        <Segment>
-          {_.size(values) > 1 ? (
-            <Form.Dropdown
-              fluid
-              selection
-              label={formatMessage({ id: "template.field.values" })}
-              onChange={onSelectionChange}
-              value={keyType || "null"}
-              required
-              options={valueTypes(values)}
-            />
-          ) : null}
-          {keyType ? (
-            <ValuesSelector
-              cardinality={field?.cardinality}
-              defaultField={defaultField}
-              defaultValue={field?.default}
-              name={name}
-              formatMessage={formatMessage}
-              onChange={onChange}
-              type={keyType}
-              values={_.path(`values.${keyType}`)(field)}
-            />
-          ) : null}
-          <Form.Group size="small" widths="equal">
-            <Form.Field>
-              <Form.Checkbox
-                name={`${fieldNamePrefix}.editable`}
-                label={formatMessage({
-                  id: "template.field.editable",
-                  defaultMessage: "Editable",
-                })}
-                checked={editable}
-                onChange={(e, { name, checked: value }) =>
-                  onChange(null, { name, value })
-                }
-              />
-            </Form.Field>
-            {hasAiSuggestion ? (
-              <Form.Field>
-                <Form.Checkbox
-                  name={`${fieldNamePrefix}.ai_suggestion`}
-                  label={formatMessage({
-                    id: "template.field.ai_suggestion",
-                    defaultMessage: "AI Suggestions",
-                  })}
-                  checked={ai_suggestion}
-                  onChange={(_e, { name, checked: value }) =>
-                    onChange(null, { name, value })
-                  }
-                />
-              </Form.Field>
-            ) : null}
-            {_.includes(scope)(searchableEnabledScopes) ? (
-              <Form.Field>
-                <Form.Checkbox
-                  name={`${fieldNamePrefix}.searchable`}
-                  label={formatMessage({
-                    id: "template.field.searchable",
-                    defaultMessage: "Sercheable",
-                  })}
-                  checked={searchable}
-                  onChange={(_e, { name, checked: value }) =>
-                    onChange(null, { name, value })
-                  }
-                />
-              </Form.Field>
-            ) : null}
-            {_.includes(keyType)(["fixed", "fixed_tuple"]) ? (
-              <Form.Checkbox
-                name={subscribableField}
-                label={formatMessage({ id: "template.field.subscribable" })}
-                checked={_.prop("subscribable")(field) || false}
-                onChange={(_e, { name, checked: value }) =>
-                  onChange(null, { name, value })
-                }
-              />
-            ) : null}
-          </Form.Group>
-          <DefaultValue
+      <Segment>
+        {_.size(values) > 1 ? (
+          <Form.Dropdown
+            fluid
+            selection
+            label={formatMessage({ id: "template.field.values" })}
+            onChange={onSelectionChange}
+            value={keyType || "null"}
+            required
+            options={valueTypes(values)}
+          />
+        ) : null}
+        {keyType ? (
+          <ValuesSelector
+            cardinality={field?.cardinality}
             defaultField={defaultField}
-            field={field}
-            fieldType={fieldType}
+            defaultValue={field?.default}
+            name={name}
             formatMessage={formatMessage}
             onChange={onChange}
             type={keyType}
+            values={_.path(`values.${keyType}`)(field)}
           />
-        </Segment>
-      );
+        ) : null}
+        <ValuesConfiguration
+          aiSuggestion={ai_suggestion}
+          editable={editable}
+          keyType={keyType}
+          onChange={onChange}
+          searchable={searchable}
+          fieldNamePrefix={fieldNamePrefix}
+          hasAiSuggestion={hasAiSuggestion}
+          subscribableField={subscribableField}
+          subscribable={field?.subscribable}
+          scope={scope}
+        />
+        <DefaultValue
+          defaultField={defaultField}
+          field={field}
+          fieldType={fieldType}
+          formatMessage={formatMessage}
+          onChange={onChange}
+          type={keyType}
+        />
+      </Segment>
+    );
 };
 
 ValuesField.propTypes = {
   defaultField: PropTypes.string,
-  keyType: PropTypes.string,
   field: PropTypes.object,
-  fieldType: PropTypes.string,
   name: PropTypes.string,
   onChange: PropTypes.func.isRequired,
-  onSelectionChange: PropTypes.func,
   subscribableField: PropTypes.string,
   values: PropTypes.array,
   fieldNamePrefix: PropTypes.string,

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

@@ -92,9 +92,6 @@ export class ValuesListForm extends Component {
   handleMoveDown = (key) => this.swapElements(key, key + 1);
 
   renderListContent = (value) => {
-    const {
-      intl: { formatMessage },
-    } = this.props;
     if (this.props.type == "fixed") {
       return <List.Content>{value}</List.Content>;
     } else if (this.props.type == "table_columns") {
@@ -121,6 +118,7 @@ export class ValuesListForm extends Component {
       values,
       type,
     } = this.props;
+
     const { error } = this.state;
     const isNullOrEmpty = (value) =>
       !_.isNumber(value) && (!value || _.isEmpty(value));

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

@@ -0,0 +1,227 @@
+// FieldDefinition.realDefs.test.tsx
+import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import FieldDefinition from "../FieldDefinition";
+
+const mockFormatMessage = jest.fn(({ id }) => id);
+
+jest.mock("react-intl", () => ({
+    ...jest.requireActual("react-intl"),
+    useIntl: () => ({
+        formatMessage: mockFormatMessage,
+    }),
+}));
+
+const user = userEvent.setup({ delay: null });
+
+describe("FieldDefinition", () => {
+    const baseProps = {
+        fieldNamePrefix: "field",
+        defaultField: "field.default",
+        valueName: "field.value",
+        subscribableField: "field.subscribable",
+        widget: "string",
+        type: "string",
+        cardinality: "?",
+        onChange: jest.fn(),
+        allowedTypes: [],
+        allowedWidgets: [],
+        mandatory: {},
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test("renders dropdowns with initial values", async () => {
+        const rendered = render(<FieldDefinition {...baseProps} onChange={jest.fn()} />);
+        waitForLoad(rendered);
+        expect(rendered.container).toMatchSnapshot();
+        const dropdowns = rendered.getAllByRole("listbox");
+        expect(dropdowns.length).toBe(3);
+
+        const widgetDropdown = dropdowns[0];
+        expect(widgetDropdown).toHaveAttribute("name", "field.widget");
+        const selectedWidget = within(widgetDropdown).getByRole("option", { name: "Text Input" });
+        expect(selectedWidget).toHaveAttribute("aria-checked", "true");
+
+        const typeDropdown = dropdowns[1];
+        expect(typeDropdown).toHaveAttribute("name", "field.type");
+        const selectedType = within(typeDropdown).getByRole("option", { name: "template.field.type.string" });
+        expect(selectedType).toHaveAttribute("aria-checked", "true");
+
+        const cardinalityDropdown = dropdowns[2];
+        expect(cardinalityDropdown).toHaveAttribute("name", "field.cardinality");
+        const selectedCardinality = within(cardinalityDropdown).getByRole("option", { name: "template.field.cardinality.?" });
+        expect(selectedCardinality).toHaveAttribute("aria-checked", "true");
+    });
+
+    test("handleWidgetChange: sets valueName to null (via getValues), resets default, sets subscribable=false, then emits type change", async () => {
+        const onChange = jest.fn();
+        const rendered = render(<FieldDefinition {...baseProps} onChange={onChange} />);
+        waitForLoad(rendered);
+
+        const numberOpt = within(rendered.getAllByRole("listbox")[0]).getByRole("option", { name: "Number" });
+        // Change type; for widget 'string' the only type is 'string', so switch the widget first to 'number'
+        await user.click(numberOpt);
+
+        // 1) reset value
+        expect(onChange).toHaveBeenNthCalledWith(
+            onChange.mock.calls.length - 3,
+            null,
+            { name: "field.value", value: null }
+        );
+
+        // // 2) reset defaultField
+        expect(onChange).toHaveBeenNthCalledWith(
+            onChange.mock.calls.length - 2,
+            expect.anything(),
+            { name: "field.default", value: { value: "", origin: "default" } }
+        );
+
+        // // 3) set subscribable=false
+        expect(onChange).toHaveBeenNthCalledWith(
+            onChange.mock.calls.length - 1,
+            expect.anything(),
+            { name: "field.subscribable", value: false }
+        );
+
+        // // 4) finally, the actual type widget event payload
+        expect(onChange).toHaveBeenLastCalledWith(
+            expect.anything(),
+            expect.objectContaining({ name: "field.widget", value: "number" })
+        );
+    });
+
+    test("handleTypeChange: recomputes default value via real getValues, resets default, sets subscribable=false, and emits widget change", async () => {
+        const onChange = jest.fn();
+        const rendered = render(<FieldDefinition {...{ ...baseProps, widget: "dropdown", type: "string" }} onChange={onChange} />);
+        waitForLoad(rendered);
+
+        // Switch Type from 'string' to 'domain'
+        const domainOpt = within(rendered.getAllByRole("listbox")[1]).getByRole("option", { name: "template.field.type.domain" });
+        await user.click(domainOpt);
+
+        // The first call in handleTypeChange is changeValue(valueName, ...) -> null
+        expect(onChange).toHaveBeenNthCalledWith(
+            1,
+            null,
+            { name: "field.value", value: null }
+        );
+
+        // 2) default reset
+        expect(onChange).toHaveBeenNthCalledWith(
+            2,
+            expect.anything(),
+            { name: "field.default", value: { value: "", origin: "default" } }
+        );
+
+        // 3) subscribable=false
+        expect(onChange).toHaveBeenNthCalledWith(
+            3,
+            expect.anything(),
+            { name: "field.subscribable", value: false }
+        );
+
+        // 4) widget change payload
+        expect(onChange).toHaveBeenNthCalledWith(
+            4,
+            expect.anything(),
+            expect.objectContaining({ name: "field.type", value: "domain" })
+        );
+    });
+
+    test("useEffect: auto-fixes invalid type/cardinality for a widget (real WIDGETS)", () => {
+        const onChange = jest.fn();
+
+        // For widget='number', valid types: ['integer','float']; cardinalities: ['?','1']
+        // Provide invalid type 'string' and invalid cardinality '+'
+        const rendered = render(<FieldDefinition {...baseProps}
+            onChange={onChange}
+            widget="number"
+            type="string"
+            cardinality="+" />);
+
+        waitForLoad(rendered);
+
+        // The effect should fire once and fix both:
+        expect(onChange).toHaveBeenCalledWith(
+            null,
+            { name: "field.type", value: "integer" } // first in WIDGETS types for 'number'
+        );
+        expect(onChange).toHaveBeenCalledWith(
+            null,
+            { name: "field.cardinality", value: "?" } // first in WIDGETS cardinalities for 'number'
+        );
+    });
+
+    test("handleCardinalityChange: selecting '1' (or '+') clears mandatory when it's non-empty", async () => {
+        const onChange = jest.fn();
+
+        const rendered = render(
+            <FieldDefinition
+                {...baseProps}
+                onChange={onChange}
+                widget="string"
+                type="string"
+                cardinality="?"
+                mandatory={{ some: "value" }}
+            />);
+
+        waitForLoad(rendered);
+
+        // Select exactly-one '1'
+        const cardOpt = within(rendered.getAllByRole("listbox")[2]).getByRole("option", { name: "template.field.cardinality.1" });
+        await user.click(cardOpt);
+
+        // First: direct change emission
+        expect(onChange).toHaveBeenNthCalledWith(
+            1,
+            expect.anything(),
+            expect.objectContaining({ name: "field.cardinality", value: "1" })
+        );
+
+        // Then: clear mandatory because value ∈ ['1','+'] and mandatory was non-empty
+        expect(onChange).toHaveBeenNthCalledWith(
+            2,
+            expect.anything(),
+            { name: "field.mandatory", value: null }
+        );
+    });
+
+    test("allowedWidgets & allowedTypes filter visible options (using real option generators)", () => {
+        const onChange = jest.fn();
+
+        const rendered = render(
+            <FieldDefinition
+                {...baseProps}
+                onChange={onChange}
+                allowedWidgets={["number"]}
+                allowedTypes={["float"]}
+                widget="number"
+                type="float"
+            />
+        );
+
+        waitForLoad(rendered);
+
+        const dropdowns = rendered.getAllByRole("listbox");
+        expect(dropdowns.length).toBe(3);
+
+        const widgetDropdown = dropdowns[0];
+        expect(widgetDropdown).toHaveAttribute("name", "field.widget");
+        const widgetOptions = within(widgetDropdown).getAllByRole("option");
+        expect(widgetOptions.length).toBe(1);
+        expect(widgetOptions[0]).toHaveAttribute("aria-checked", "true");
+        expect(widgetOptions[0]).toHaveTextContent("Number");
+
+        const typeDropdown = dropdowns[1];
+        expect(typeDropdown).toHaveAttribute("name", "field.type");
+        const typeOptions = within(typeDropdown).getAllByRole("option");
+        expect(typeOptions.length).toBe(1);
+        expect(typeOptions[0]).toHaveAttribute("aria-checked", "true");
+        expect(typeOptions[0]).toHaveTextContent("float");
+    });
+});

package/src/templates/components/templateForm/__tests__/TableValuesForm.spec.js

@@ -0,0 +1,215 @@
+import React from "react";
+import { within } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import TableValuesForm from "../TableValuesForm";
+
+const mockFormatMessage = jest.fn(({ id }) => id);
+
+jest.mock("react-intl", () => ({
+    ...jest.requireActual("react-intl"),
+    useIntl: () => ({
+        formatMessage: mockFormatMessage,
+    }),
+}));
+
+// --- Stub child components to isolate TableValuesForm behavior ---
+jest.mock("../FieldDefinition", () => () => <div data-testid="FieldDefinition" />);
+jest.mock("../ValuesField", () => () => <div data-testid="ValuesField" />);
+jest.mock("../ValuesConfiguration", () => () => <div data-testid="ValuesConfiguration" />);
+
+const user = userEvent.setup({ delay: null });
+
+const values = [
+    { name: "colA", widget: "string", type: "string", errors: {} },
+    { name: "colB", widget: "string", type: "string", errors: { nameDuplicated: true, hasErrors: true } },
+];
+
+const baseProps = {
+    name: "myField",
+    type: "table_columns",        // used as the key in the onChange payload
+    values,
+    onChange: jest.fn(),
+    scope: "scope-x",
+    field: { values: { table_columns: values } },
+    fieldNamePrefix: "myPrefix",
+};
+
+
+describe("TableValuesForm", () => {
+    test("renders an Accordion with a panel per value, showing name and duplicated label", () => {
+        const rendered = render(<TableValuesForm {...baseProps} />);
+        waitForLoad(rendered);
+
+        // Two labels for two columns
+        expect(rendered.getByText("colA")).toBeInTheDocument();
+        expect(rendered.getByText("colB")).toBeInTheDocument();
+
+        // Duplicated name label for the second column only
+        // The label text comes from formatMessage
+        expect(rendered.getByText("template.form.validation.name_duplicated")).toBeInTheDocument();
+    });
+
+    test("clicking a panel title toggles it active and reveals its content", async () => {
+        const rendered = render(<TableValuesForm {...baseProps} />);
+        waitForLoad(rendered);
+
+        // Click on "colA" title to expand
+        await user.click(rendered.getByText("colA"));
+
+        // Content should render the stubs under the active panel
+        // (we don't assert which panel holds it; just that they are present)
+        expect(rendered.getAllByTestId("FieldDefinition").length).toBeGreaterThan(0);
+        expect(rendered.getAllByTestId("ValuesField").length).toBeGreaterThan(0);
+    });
+
+    test("move down moves the selected column forward and calls onChange with swapped array", async () => {
+        const rendered = render(<TableValuesForm {...baseProps} />);
+        waitForLoad(rendered);
+
+        // Expand panel 0 (colA)
+        await user.click(rendered.getByText("colA"));
+
+        // In the panel content, there is a Button.Group with three buttons (up, down, delete)
+        // We'll grab them by role=button within the expanded panel area.
+        // Since Semantic UI doesn't attach specific names by default to icon-only buttons,
+        // we'll pick by order: [up, down, delete].
+        const activePanel = rendered.getByText("colA").closest(".title")?.nextElementSibling;
+        expect(activePanel).toBeTruthy();
+
+        const buttons = within(activePanel).getAllByRole("button");
+        // up is disabled for index 0; down should move colA to index 1
+        const [, downButton] = buttons;
+        await user.click(downButton);
+
+        // Expect onChange called with swapped values for key "table_columns"
+        expect(baseProps.onChange).toHaveBeenCalledWith(
+            null,
+            expect.objectContaining({
+                name: "myField",
+                value: {
+                    table_columns: [
+                        expect.objectContaining({ name: "colB" }),
+                        expect.objectContaining({ name: "colA" }),
+                    ],
+                },
+            })
+        );
+    });
+
+    test("move up moves the selected column backward and calls onChange with swapped array", async () => {
+        const rendered = render(<TableValuesForm {...baseProps} />);
+        waitForLoad(rendered);
+
+        // Expand panel 1 (colB)
+        await user.click(rendered.getByText("colB"));
+
+        // Get the three buttons from this panel (up, down, delete)
+        const activePanel = rendered.getByText("colB").closest(".title")?.nextElementSibling;
+        expect(activePanel).toBeTruthy();
+
+        const buttons = within(activePanel).getAllByRole("button");
+        const [upButton] = buttons; // first button = up
+        await user.click(upButton);
+
+        // Expect swap: colB moves to index 0
+        expect(baseProps.onChange).toHaveBeenCalledWith(
+            null,
+            expect.objectContaining({
+                name: "myField",
+                value: {
+                    table_columns: [
+                        expect.objectContaining({ name: "colB" }),
+                        expect.objectContaining({ name: "colA" }),
+                    ],
+                },
+            })
+        );
+    });
+
+    test("delete removes the selected column and calls onChange with shortened array", async () => {
+        const rendered = render(<TableValuesForm {...baseProps} />);
+        waitForLoad(rendered);
+
+        // Expand panel 0 (colA)
+        await user.click(rendered.getByText("colA"));
+
+        const activePanel = rendered.getByText("colA").closest(".title")?.nextElementSibling;
+        const buttons = within(activePanel).getAllByRole("button");
+        const deleteButton = buttons[2]; // third button
+
+        await user.click(deleteButton);
+
+        expect(baseProps.onChange).toHaveBeenCalledWith(
+            null,
+            expect.objectContaining({
+                name: "myField",
+                value: {
+                    table_columns: [
+                        expect.objectContaining({ name: "colB" }), // only colB remains
+                    ],
+                },
+            })
+        );
+    });
+
+    test("add column via Enter in input appends a default field with given name", async () => {
+        const rendered = render(<TableValuesForm {...baseProps} />);
+        waitForLoad(rendered);
+
+        // Input is at the bottom with an icon. We'll type and press Enter.
+        const input = rendered.getByRole("textbox");
+        await user.type(input, "newCol{enter}");
+
+        // The payload includes the new element at the end.
+        // It uses defaultFieldDefinition + overrides: name, label set to 'myField', ai_suggestion=false
+        expect(baseProps.onChange).toHaveBeenCalledWith(
+            null,
+            expect.objectContaining({
+                name: "myField",
+                value: {
+                    table_columns: expect.arrayContaining([
+                        expect.objectContaining({
+                            name: "newCol",
+                            ai_suggestion: false,
+                            label: "newCol",
+                        }),
+                    ]),
+                },
+            })
+        );
+    });
+
+    test("add column via clicking the add icon triggers same append behavior", async () => {
+        const rendered = render(<TableValuesForm {...baseProps} />);
+        waitForLoad(rendered);
+
+        // Type value first so state.fieldValue has content
+        const input = rendered.getByRole("textbox");
+        await user.type(input, "anotherCol");
+
+        // Click the icon (it's rendered inside the input as a clickable Icon)
+        // Find by role button might not exist; the icon has role="img" with class "add circle".
+        // We'll click it via its container: the input's parent .input has an i.icon inside.
+        const inputWrapper = input.closest(".input");
+        const addIcon = inputWrapper?.querySelector(".icon");
+        expect(addIcon).toBeTruthy();
+        await user.click(addIcon);
+
+        expect(baseProps.onChange).toHaveBeenCalledWith(
+            null,
+            expect.objectContaining({
+                name: "myField",
+                value: {
+                    table_columns: expect.arrayContaining([
+                        expect.objectContaining({
+                            name: "anotherCol",
+                            ai_suggestion: false,
+                            label: "anotherCol",
+                        }),
+                    ]),
+                },
+            })
+        );
+    });
+});