@truedat/df 4.28.1 → 4.28.5

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

@@ -5,18 +5,19 @@ import { useIntl } from "react-intl";
 import { Form, Button, Divider, Segment } from "semantic-ui-react";
 import ValuesField from "./ValuesField";
 import ConditionalFieldForm from "./ConditionalFieldForm";
+import MandatoryConditional from "./MandatoryConditional";
 import {
   getCardinalityOptions,
   getWidgetOptions,
   getTypeOptions,
-  WIDGETS
+  WIDGETS,
 } from "./widgetDefinitions";
 import { getValues } from "./valueDefinitions";
 
-const typeFromKey = keys =>
+const typeFromKey = (keys) =>
   _.includes("role_users")(keys) ? "role_users" : _.first(keys);
 
-const defaultType = values => _.flow(_.map("value"), _.first)(values);
+const defaultType = (values) => _.flow(_.map("value"), _.first)(values);
 
 export const FieldForm = ({
   allFields,
@@ -27,7 +28,7 @@ export const FieldForm = ({
   groupNamePrefix,
   onChange,
   onDelete,
-  onMove
+  onMove,
 }) => {
   const { formatMessage } = useIntl();
   const {
@@ -38,7 +39,7 @@ export const FieldForm = ({
     type,
     widget,
     disabled,
-    errors
+    errors,
   } = field;
 
   const fieldNamePrefix = `${groupNamePrefix}.fields[${fieldIndex}]`;
@@ -49,22 +50,22 @@ export const FieldForm = ({
   const keyType = _.flow([_.getOr({}, "values"), _.keys, typeFromKey])(field);
   const hasDependencies = _.negate(_.isEmpty)(dependencies);
 
-  const typeCheckOnChange = widgetOptions => {
+  const typeCheckOnChange = (widgetOptions) => {
     if (widgetOptions && _.indexOf(type)(widgetOptions.types) < 0)
       onChange(null, {
         name: `${fieldNamePrefix}.type`,
-        value: widgetOptions.types[0]
+        value: widgetOptions.types[0],
       });
   };
 
-  const cardinalityCheckOnChange = widgetOptions => {
+  const cardinalityCheckOnChange = (widgetOptions) => {
     if (
       widgetOptions &&
       _.indexOf(cardinality)(widgetOptions.cardinalities) < 0
     )
       onChange(null, {
         name: `${fieldNamePrefix}.cardinality`,
-        value: widgetOptions.cardinalities[0]
+        value: widgetOptions.cardinalities[0],
       });
   };
 
@@ -73,9 +74,16 @@ export const FieldForm = ({
       ? onChange(null, { name, value: null })
       : onChange(null, {
           name,
-          value: { [value]: null }
+          value: { [value]: null },
         });
 
+  const handleCardinalityChange = (e, data) => {
+    const value = data?.value;
+    onChange(e, data);
+    if (_.includes(value)(["1", "+"]) && !_.isEmpty(field?.mandatory))
+      onChange(e, { name: `${fieldNamePrefix}.mandatory`, value: null });
+  };
+
   const handleWidgetChange = (e, data) => {
     const { value } = data;
     const types = _.find({ value })(WIDGETS).types;
@@ -122,20 +130,20 @@ export const FieldForm = ({
             key: "up",
             icon: "arrow up",
             onClick: () => onMove(fieldIndex, "up"),
-            disabled: fieldIndex === 0
+            disabled: fieldIndex === 0,
           },
           {
             key: "down",
             icon: "arrow down",
             onClick: () => onMove(fieldIndex, "down"),
-            disabled: fieldIndex === fieldCount - 1
+            disabled: fieldIndex === fieldCount - 1,
           },
           {
             key: "delete",
             disabled: hasDependencies,
             icon: "trash alternate outline",
-            onClick: onDelete
-          }
+            onClick: onDelete,
+          },
         ]}
       />
       <Divider hidden clearing />
@@ -161,8 +169,8 @@ export const FieldForm = ({
             errors &&
             errors.nameDuplicated && {
               content: formatMessage({
-                id: "template.form.validation.name_duplicated"
-              })
+                id: "template.form.validation.name_duplicated",
+              }),
             }
           }
         />
@@ -200,7 +208,7 @@ export const FieldForm = ({
           fluid
           selection
           label={formatMessage({ id: "template.field.cardinality" })}
-          onChange={onChange}
+          onChange={handleCardinalityChange}
           name={`${fieldNamePrefix}.cardinality`}
           value={cardinality}
           required
@@ -224,6 +232,14 @@ export const FieldForm = ({
         field={field}
         onChange={onChange}
       />
+      {_.includes(field?.cardinality)(["*", "?"]) && (
+        <MandatoryConditional
+          allFields={allFields}
+          field={field}
+          fieldNamePrefix={fieldNamePrefix}
+          onChange={onChange}
+        />
+      )}
     </Segment>
   );
 };
@@ -237,7 +253,7 @@ FieldForm.propTypes = {
   groupNamePrefix: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
-  onMove: PropTypes.func.isRequired
+  onMove: PropTypes.func.isRequired,
 };
 
 export default FieldForm;

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

@@ -0,0 +1,61 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import DependentFormField from "./DependentFormField";
+
+export const MandatoryConditional = ({
+  allFields,
+  field,
+  fieldNamePrefix,
+  onChange,
+}) => {
+  const { formatMessage } = useIntl();
+  const name = field?.name;
+  const depends = field?.mandatory?.on;
+  const fieldOptions = _.flow(
+    _.reject({ name }),
+    _.reject((field) => _.isEmpty(field?.values?.fixed)),
+    _.map(({ label, name }) => ({ text: label, value: name }))
+  )(allFields);
+  const valueOptions = _.flow(
+    _.find({ name: depends }),
+    _.propOr([], "values.fixed"),
+    _.reject(_.isNil),
+    _.map((value) => ({ text: value, value }))
+  )(allFields);
+  const handleChange = (e, { name, value }) => {
+    if (_.includes("mandatory.on")(name) && !_.isEmpty(field?.mandatory?.to_be))
+      onChange(e, { name: `${fieldNamePrefix}.mandatory.to_be`, value: [] });
+
+    onChange(e, { name, value });
+  };
+
+  return (
+    <DependentFormField
+      label={formatMessage({ id: "template.field.mandatory.depends" })}
+      fieldName={`${fieldNamePrefix}.mandatory.on`}
+      fieldOptions={fieldOptions}
+      fieldPlaceholder={formatMessage({
+        id: "template.field.mandatory.depends.on",
+      })}
+      fieldValue={field?.mandatory?.on}
+      onChange={handleChange}
+      value={field?.mandatory?.to_be}
+      valueName={`${fieldNamePrefix}.mandatory.to_be`}
+      valueOptions={valueOptions}
+      valuePlaceholder={formatMessage({
+        id: "template.field.mandatory.depends.to_be",
+      })}
+    />
+  );
+};
+
+MandatoryConditional.propTypes = {
+  allFields: PropTypes.array,
+  fieldNamePrefix: PropTypes.string,
+  field: PropTypes.object,
+  onChange: PropTypes.func,
+};
+
+export default MandatoryConditional;

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

@@ -64,6 +64,7 @@ export const TemplateForm = ({ loading, template, onSubmit, onDelete }) => {
               "values",
               "default",
               "subscribable",
+              "mandatory",
             ];
 
             const dependsProperty = _.isEmpty(_.path("depends.on")(field))

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

@@ -0,0 +1,34 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { DependentFormField } from "../DependentFormField";
+
+describe("<DependentFormField />", () => {
+  const label = "label";
+  const fieldName = "field";
+  const fieldOptions = [{ text: "bar", value: "bar" }];
+  const fieldPlaceholder = "field placeholder";
+  const fieldValue = "bar";
+  const value = "foo";
+  const valueName = "value";
+  const valueOptions = [{ text: "foo", value: "foo" }];
+  const valuePlaceholder = "value placeholder";
+  const onChange = jest.fn();
+
+  const props = {
+    label,
+    fieldName,
+    fieldOptions,
+    fieldPlaceholder,
+    fieldValue,
+    value,
+    valueName,
+    valueOptions,
+    valuePlaceholder,
+    onChange,
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<DependentFormField {...props} />, {});
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -20,7 +20,7 @@ describe("<FieldForm />", () => {
       label: "Field 1",
       description: "A field for testing",
       meta: { role: "Data Owner" },
-      widget: "string"
+      widget: "string",
     };
     const fieldIndex = 0;
     const fieldCount = 1;
@@ -42,7 +42,7 @@ describe("<FieldForm />", () => {
       description: "A field for testing",
       meta: { role: "Data Owner" },
       disabled: true,
-      widget: "string"
+      widget: "string",
     };
     const fieldIndex = 0;
     const fieldCount = 1;
@@ -54,15 +54,10 @@ describe("<FieldForm />", () => {
       onDelete,
       onMove,
       onChange,
-      editMode
+      editMode,
     };
     const wrapper = shallow(<FieldForm {...props} />);
-    expect(
-      wrapper
-        .find("FormInput")
-        .at(1)
-        .prop("disabled")
-    ).toBe(true);
+    expect(wrapper.find("FormInput").at(1).prop("disabled")).toBe(true);
   });
 
   it("renders ValuesField and manages onChange", () => {
@@ -76,7 +71,7 @@ describe("<FieldForm />", () => {
       name: "field1",
       label: "Field 1",
       description: "A field for testing",
-      widget: "dropdown"
+      widget: "dropdown",
     };
     const fieldIndex = 0;
     const fieldCount = 1;
@@ -87,7 +82,7 @@ describe("<FieldForm />", () => {
       groupNamePrefix: "Group",
       onDelete,
       onMove,
-      onChange
+      onChange,
     };
     const wrapper = shallow(<FieldForm {...props} />);
     expect(wrapper).toMatchSnapshot();
@@ -99,11 +94,11 @@ describe("<FieldForm />", () => {
     dropdown.simulate("change", null, { value: "fixed_tuple" });
     expect(onChange).toBeCalledWith(null, {
       name: "Group.fields[0].subscribable",
-      value: false
+      value: false,
     });
     expect(onChange).toBeCalledWith(null, {
       name: "Group.fields[0].values",
-      value: { fixed_tuple: null }
+      value: { fixed_tuple: null },
     });
   });
 
@@ -118,7 +113,7 @@ describe("<FieldForm />", () => {
       name: "field1",
       label: "Field 1",
       description: "A field for testing",
-      widget: "dropdown"
+      widget: "dropdown",
     };
     const fieldIndex = 0;
     const fieldCount = 1;
@@ -129,7 +124,7 @@ describe("<FieldForm />", () => {
       groupNamePrefix: "Group",
       onDelete,
       onMove,
-      onChange
+      onChange,
     };
     const wrapper = shallow(<FieldForm {...props} />);
     const widgetDropdown = wrapper.find({ name: "Group.fields[0].widget" });
@@ -137,15 +132,15 @@ describe("<FieldForm />", () => {
     widgetDropdown.simulate("change", null, { value: "string" });
     expect(onChange).toBeCalledWith(null, {
       name: "Group.fields[0].values",
-      value: null
+      value: null,
     });
     expect(onChange).toBeCalledWith(null, {
       name: "Group.fields[0].default",
-      value: ""
+      value: "",
     });
     expect(onChange).toBeCalledWith(null, {
       name: "Group.fields[0].subscribable",
-      value: false
+      value: false,
     });
     expect(onChange).toBeCalledWith(null, { value: "string" });
   });
@@ -161,7 +156,7 @@ describe("<FieldForm />", () => {
       name: "field1",
       label: "Field 1",
       description: "A field for testing",
-      widget: "dropdown"
+      widget: "dropdown",
     };
     const fieldIndex = 0;
     const fieldCount = 1;
@@ -172,7 +167,7 @@ describe("<FieldForm />", () => {
       groupNamePrefix: "Group",
       onDelete,
       onMove,
-      onChange
+      onChange,
     };
     const wrapper = shallow(<FieldForm {...props} />);
     const typeDropdown = wrapper.find({ name: "Group.fields[0].type" });
@@ -180,16 +175,141 @@ describe("<FieldForm />", () => {
     typeDropdown.simulate("change", null, { value: "string" });
     expect(onChange).toBeCalledWith(null, {
       name: "Group.fields[0].values",
-      value: { fixed: null }
+      value: { fixed: null },
     });
     expect(onChange).toBeCalledWith(null, {
       name: "Group.fields[0].default",
-      value: ""
+      value: "",
     });
     expect(onChange).toBeCalledWith(null, {
       name: "Group.fields[0].subscribable",
-      value: false
+      value: false,
     });
     expect(onChange).toBeCalledWith(null, { value: "string" });
   });
+
+  it("renders MandatoryConditional", () => {
+    const allFields = [
+      {
+        name: "foo",
+        label: "Foo",
+        type: "string",
+        cardinality: "+",
+        values: { fixed: ["1", "2"] },
+      },
+      {
+        name: "bar",
+        label: "Bar",
+        type: "string",
+        cardinality: "?",
+        values: { fixed: ["3", "4"] },
+      },
+      {
+        name: "xyz",
+        label: "Xyz",
+        type: "string",
+        cardinality: "?",
+      },
+      {
+        name: "name",
+        label: "Name",
+        type: "string",
+        cardinality: "?",
+      },
+    ];
+    const onDelete = jest.fn();
+    const onMove = jest.fn();
+    const onChange = jest.fn();
+    const field = {
+      name: "name",
+      label: "Name",
+      mandatory: { on: "bar", to_be: ["3"] },
+      cardinality: "?",
+    };
+    const fieldIndex = 0;
+    const fieldCount = 1;
+    const props = {
+      allFields,
+      field,
+      fieldIndex,
+      fieldCount,
+      groupNamePrefix: "Group",
+      onDelete,
+      onMove,
+      onChange,
+    };
+    const wrapper = shallow(<FieldForm {...props} />);
+    expect(wrapper).toMatchSnapshot();
+    const MandatoryConditional = wrapper.find("MandatoryConditional").first();
+    expect(MandatoryConditional).toBeTruthy();
+  });
+
+  it("manages handleCardinalityChange", () => {
+    const allFields = [
+      {
+        name: "foo",
+        label: "Foo",
+        type: "string",
+        cardinality: "+",
+        values: { fixed: ["1", "2"] },
+      },
+      {
+        name: "bar",
+        label: "Bar",
+        type: "string",
+        cardinality: "?",
+        values: { fixed: ["3", "4"] },
+      },
+      {
+        name: "xyz",
+        label: "Xyz",
+        type: "string",
+        cardinality: "?",
+      },
+      {
+        name: "name",
+        label: "Name",
+        type: "string",
+        cardinality: "?",
+      },
+    ];
+    const onDelete = jest.fn();
+    const onMove = jest.fn();
+    const onChange = jest.fn();
+    const field = {
+      name: "name",
+      label: "Name",
+      mandatory: { on: "bar", to_be: ["3"] },
+      cardinality: "?",
+    };
+    const fieldIndex = 0;
+    const fieldCount = 1;
+    const props = {
+      allFields,
+      field,
+      fieldIndex,
+      fieldCount,
+      groupNamePrefix: "Group",
+      onDelete,
+      onMove,
+      onChange,
+    };
+    const wrapper = shallow(<FieldForm {...props} />);
+    expect(wrapper).toMatchSnapshot();
+    const CardinalityDropdown = wrapper.find({
+      name: "Group.fields[0].cardinality",
+    });
+    CardinalityDropdown.simulate("change", null, {
+      name: "Group.fields[0].cardinality",
+      value: "1",
+    });
+    expect(onChange.mock.calls[0][1]).toEqual({
+      name: "Group.fields[0].cardinality",
+      value: "1",
+    });
+    expect(onChange.mock.calls[1][1]).toEqual({
+      name: "Group.fields[0].mandatory",
+      value: null,
+    });
+  });
 });