@truedat/df 4.28.1 → 4.28.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.28.2] 2021-09-14
+
+### Added
+
+- [TD-3971] Template mandatory dependent field
+
 ## [4.27.6] 2021-09-02
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "4.28.1",
+  "version": "4.28.5",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -30,7 +30,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.28.1",
+    "@truedat/test": "4.28.5",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -80,8 +80,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.28.1",
-    "@truedat/core": "4.28.1",
+    "@truedat/auth": "4.28.5",
+    "@truedat/core": "4.28.5",
     "axios": "^0.19.2",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
@@ -100,5 +100,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "6ff590df29781cbbbdbd8719a394649d758330c4"
+  "gitHead": "e004c6a673d6824a4807e4378b6e5c83e947c992"
 }

package/src/components/DynamicForm.js

@@ -3,8 +3,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { makeGetApplyTemplate, makeGetTemplate } from "../selectors";
+import { enrichRequired } from "../utils";
 import FieldGroupSegment from "./FieldGroupSegment";
-
 const hasDependentKeys = (field) =>
   !_.isNil(_.path("depends.to_be")(field)) &&
   !_.isNil(_.path("depends.on")(field));
@@ -82,12 +82,14 @@ export const DynamicForm = ({
             (!(field.values && "switch" in field.values) ||
               content[field.values.switch.on] in field.values.switch.values)
         ),
-        _.map(parseValues)
+        _.map(parseValues),
+        _.map((field) => enrichRequired(field, content))
       )(group.fields);
       return { ...group, fields };
     }),
     _.filter(({ fields }) => _.negate(_.isEmpty)(fields))
   )(template.content);
+
   return (
     <>
       {parsedGroups.map(({ name, fields }, i) => {

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

@@ -8,6 +8,7 @@ exports[`<DynamicForm /> matches snapshot for default field 1`] = `
         Object {
           "name": "test",
           "parsed_values": undefined,
+          "required": false,
           "value": undefined,
         },
       ]
@@ -34,6 +35,7 @@ exports[`<DynamicForm /> matches snapshot for role_users values 1`] = `
               "value": "user1",
             },
           ],
+          "required": false,
           "value": undefined,
           "values": Object {
             "processed_users": Array [

package/src/components/widgets/DynamicField.js

@@ -72,7 +72,7 @@ export const DynamicField = ({
   <Form.Field>
     <label>
       {label}
-      {_.includes(cardinality)(["1", "+"]) && (
+      {fieldProps?.required && (
         <span
           style={{
             color: "#D95C5C",
@@ -98,7 +98,7 @@ export const DynamicField = ({
           hideOnScroll
         />
       )}
-      {_.includes(cardinality)(["1", "+"]) && isNullOrEmpty(value) ? (
+      {fieldProps?.required && isNullOrEmpty(value) ? (
         <Label pointing="left">
           <FormattedMessage id="template.form.validation.empty_required" />
         </Label>

package/src/messages/en.js

@@ -18,6 +18,9 @@ export default {
   "template.field.depends.to_be": "Source Value",
   "template.field.description": "Description",
   "template.field.label": "Label",
+  "template.field.mandatory.depends": "Mandatory depending on",
+  "template.field.mandatory.depends.on": "Depending on",
+  "template.field.mandatory.depends.to_be": "Depending value",
   "template.field.name": "Name",
   "template.field.subscribable": "Subscribable",
   "template.field.switch_values": "Dependent List",

package/src/messages/es.js

@@ -17,6 +17,9 @@ export default {
   "template.field.depends.on": "Campo origen",
   "template.field.depends.to_be": "Valor origen",
   "template.field.description": "Descripción",
+  "template.field.mandatory.depends": "Obligatorio dependiente de",
+  "template.field.mandatory.depends.on": "Depende de",
+  "template.field.mandatory.depends.to_be": "Valor dependiente",
   "template.field.label": "Label",
   "template.field.name": "Nombre",
   "template.field.subscribable": "Suscribible",

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

@@ -3,13 +3,12 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import {
   Accordion,
-  Checkbox,
   Form,
   Button,
   Label,
   Confirm,
   Input,
-  Icon
+  Icon,
 } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { dropAt, swap } from "@truedat/core/services/arrays";
@@ -19,7 +18,7 @@ export const ActiveGroupForm = ({
   activeGroup,
   content,
   setActiveGroup,
-  onChange
+  onChange,
 }) => {
   const [activeField, setActiveField] = useState();
   const [confirmDelete, setConfirmDelete] = useState(null);
@@ -30,21 +29,21 @@ export const ActiveGroupForm = ({
 
   const allFields = _.flow([
     _.map("fields"),
-    _.reduce((acc, f) => [...acc, ...f], [])
+    _.reduce((acc, f) => [...acc, ...f], []),
   ])(content);
 
   const dependencies = _.groupBy("depends.on")(allFields);
   const groupFieldsName = _.map("name")(fields);
 
   const disabledDelete = _.flow(
-    _.map(fieldName => _.prop(fieldName)(dependencies)),
+    _.map((fieldName) => _.prop(fieldName)(dependencies)),
     _.reject(_.isNil),
     _.flatten,
     _.reject(({ name }) => _.includes(name)(groupFieldsName)),
     _.negate(_.isEmpty)
   )(groupFieldsName);
 
-  const moveGroup = direction => {
+  const moveGroup = (direction) => {
     const newIndex = direction == "up" ? activeGroup - 1 : activeGroup + 1;
     const value = swap(activeGroup, newIndex)(content);
     onChange(null, { name: "content", value });
@@ -59,14 +58,14 @@ export const ActiveGroupForm = ({
       cardinality: "?",
       type: "string",
       default: "",
-      values: null
+      values: null,
     };
     const name = `${groupNamePrefix}.fields`;
     onChange(null, { name, value: [...fields, newField] });
   };
 
   const onSelectField = (e, { index }) =>
-    setActiveField(x => (x == index ? null : index));
+    setActiveField((x) => (x == index ? null : index));
 
   const handleMoveField = (idx, direction) => {
     const newIndex = direction == "up" ? idx - 1 : idx + 1;
@@ -104,28 +103,28 @@ export const ActiveGroupForm = ({
             icon: "arrow up",
             disabled: activeGroup === 0,
             type: "button",
-            onClick: () => moveGroup("up")
+            onClick: () => moveGroup("up"),
           },
           {
             key: "down",
             icon: "arrow down",
             disabled: activeGroup === content.length - 1,
             type: "button",
-            onClick: () => moveGroup("down")
+            onClick: () => moveGroup("down"),
           },
           {
             key: "delete",
             icon: "trash alternate outline",
             disabled: disabledDelete,
             type: "button",
-            onClick: () => setConfirmDelete({ type: "group" })
+            onClick: () => setConfirmDelete({ type: "group" }),
           },
           {
             key: "add_field",
             content: formatMessage({ id: "template.form.group.newField" }),
             type: "button",
-            onClick: handleAddField
-          }
+            onClick: handleAddField,
+          },
         ]}
       />
       <Form.Field
@@ -138,8 +137,8 @@ export const ActiveGroupForm = ({
           errors &&
           errors.nameDuplicated && {
             content: formatMessage({
-              id: "template.form.validation.name_duplicated"
-            })
+              id: "template.form.validation.name_duplicated",
+            }),
           }
         }
       />
@@ -160,11 +159,11 @@ export const ActiveGroupForm = ({
                   {field.label}
                 </Label>
                 {!_.isEmpty(_.prop(field.name)(dependencies)) &&
-                  _.map(d => <Label key={i}>{d.name}</Label>)(
+                  _.map((d) => <Label key={i}>{d.name}</Label>)(
                     _.prop(field.name)(dependencies)
                   )}
               </>
-            )
+            ),
           },
           active: activeField === i,
           onTitleClick: onSelectField,
@@ -182,8 +181,8 @@ export const ActiveGroupForm = ({
                 onMove={handleMoveField}
                 onDelete={() => setConfirmDelete({ type: "field", idx: i })}
               />
-            )
-          }
+            ),
+          },
         }))(fields)}
       />
       {!_.isEmpty(confirmDelete) && (
@@ -192,7 +191,7 @@ export const ActiveGroupForm = ({
           cancelButton={formatMessage({ id: "confirmation.no" })}
           confirmButton={formatMessage({ id: "confirmation.yes" })}
           content={formatMessage({
-            id: `template.form.delete.${confirmDelete.type}`
+            id: `template.form.delete.${confirmDelete.type}`,
           })}
           onCancel={() => setConfirmDelete(null)}
           onConfirm={handleDelete}
@@ -206,8 +205,7 @@ ActiveGroupForm.propTypes = {
   activeGroup: PropTypes.number.isRequired,
   setActiveGroup: PropTypes.func.isRequired,
   content: PropTypes.array.isRequired,
-  allowSecretOption: PropTypes.bool,
-  onChange: PropTypes.func.isRequired
+  onChange: PropTypes.func.isRequired,
 };
 
 export default ActiveGroupForm;

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

@@ -1,23 +1,25 @@
 import _ from "lodash/fp";
 import React from "react";
+import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { Form } from "semantic-ui-react";
+import DependentFormField from "./DependentFormField";
 
-const nilOrEmpty = value => _.isEmpty(value) || _.isNil(value);
+const nilOrEmpty = (value) => _.isEmpty(value) || _.isNil(value);
 const fieldsToOptions = (fields, fieldName) =>
   _.flow(
     _.filter(
-      f => !nilOrEmpty(_.pathOr([], "values.fixed")(f)) && f.name !== fieldName
+      (f) =>
+        !nilOrEmpty(_.pathOr([], "values.fixed")(f)) && f.name !== fieldName
     ),
-    _.map(f => ({ text: f.label, value: f.name }))
+    _.map((f) => ({ text: f.label, value: f.name }))
   )(fields);
 const valuesToOptions = (fields, value) =>
   value !== ""
     ? _.flow(
-        _.find(f => f.name === value),
+        _.find((f) => f.name === value),
         _.propOr([], "values.fixed"),
-        _.filter(v => !_.isNil(v)),
-        _.map(v => ({ text: v, value: v }))
+        _.filter((v) => !_.isNil(v)),
+        _.map((v) => ({ text: v, value: v }))
       )(fields)
     : [];
 
@@ -25,44 +27,39 @@ const ConditionalFieldForm = ({
   allFields,
   fieldNamePrefix,
   field,
-  onChange
+  onChange,
 }) => {
   const { formatMessage } = useIntl();
   const { name, depends } = field;
   const optionFields = fieldsToOptions(allFields, name);
   const optionValues = valuesToOptions(allFields, _.propOr("", "on")(depends));
+  const handleChange = (e, { name, value }) => {
+    if (_.includes("depends.on")(name) && !_.isEmpty(depends?.to_be))
+      onChange(e, { name: `${fieldNamePrefix}.depends.to_be`, value: [] });
+
+    onChange(e, { name, value });
+  };
   return (
-    <Form.Field>
-      <label>{formatMessage({ id: "template.field.depends" })}</label>
-      <Form.Group size="small" widths="equal">
-        <Form.Dropdown
-          name={`${fieldNamePrefix}.depends.on`}
-          fluid
-          selection
-          clearable
-          placeholder={formatMessage({ id: "template.field.depends.on" })}
-          value={_.propOr("", "on")(depends)}
-          onChange={onChange}
-          options={optionFields}
-          disabled={_.isEmpty(optionFields)}
-          search
-        />
-        <Form.Dropdown
-          name={`${fieldNamePrefix}.depends.to_be`}
-          size="small"
-          fluid
-          selection
-          placeholder={formatMessage({ id: "template.field.depends.to_be" })}
-          value={_.propOr([], "to_be")(depends)}
-          onChange={onChange}
-          options={optionValues}
-          multiple
-          disabled={_.isEmpty(optionValues)}
-          search
-        />
-      </Form.Group>
-    </Form.Field>
+    <DependentFormField
+      label={formatMessage({ id: "template.field.depends" })}
+      fieldName={`${fieldNamePrefix}.depends.on`}
+      fieldOptions={optionFields}
+      fieldPlaceholder={formatMessage({ id: "template.field.depends.on" })}
+      fieldValue={_.propOr("", "on")(depends)}
+      onChange={handleChange}
+      value={_.propOr([], "to_be")(depends)}
+      valueName={`${fieldNamePrefix}.depends.to_be`}
+      valueOptions={optionValues}
+      valuePlaceholder={formatMessage({ id: "template.field.depends.to_be" })}
+    />
   );
 };
 
+ConditionalFieldForm.propTypes = {
+  allFields: PropTypes.array,
+  fieldNamePrefix: PropTypes.string,
+  field: PropTypes.object,
+  onChange: PropTypes.func,
+};
+
 export default ConditionalFieldForm;

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

@@ -0,0 +1,68 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Form } from "semantic-ui-react";
+
+export const DependentFormField = ({
+  label,
+  fieldName,
+  fieldOptions,
+  fieldPlaceholder,
+  fieldValue,
+  onChange,
+  value,
+  valueName,
+  valueOptions,
+  valuePlaceholder,
+}) => (
+  <Form.Field>
+    <label>{label}</label>
+    <Form.Group size="small" widths="equal">
+      <Form.Field>
+        <Form.Dropdown
+          clearable
+          disabled={_.isEmpty(fieldOptions)}
+          fluid
+          name={fieldName}
+          onChange={onChange}
+          options={fieldOptions}
+          placeholder={fieldPlaceholder}
+          search
+          selection
+          size="small"
+          value={fieldValue || ""}
+        />
+      </Form.Field>
+      <Form.Field>
+        <Form.Dropdown
+          clearable
+          disabled={_.isEmpty(valueOptions)}
+          fluid
+          name={valueName}
+          onChange={onChange}
+          options={valueOptions}
+          placeholder={valuePlaceholder}
+          multiple
+          search
+          selection
+          value={value || []}
+        />
+      </Form.Field>
+    </Form.Group>
+  </Form.Field>
+);
+
+DependentFormField.propTypes = {
+  label: PropTypes.string,
+  fieldOptions: PropTypes.array,
+  fieldPlaceholder: PropTypes.string,
+  fieldName: PropTypes.string,
+  fieldValue: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  valueName: PropTypes.string,
+  valueOptions: PropTypes.array,
+  valuePlaceholder: PropTypes.string,
+};
+
+export default DependentFormField;