@truedat/df 4.48.0 → 4.48.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.48.4] 2022-07-11
+
+### Changed
+
+- [TD-4995] Support localization of template fields and fixed values
+
+## [4.48.2] 2022-07-08
+
+### Changed
+
+- [TD-4995] Support localization of template fields and fixed values
+
 ## [4.47.3] 2022-06-28
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "4.48.0",
+  "version": "4.48.4",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -87,8 +87,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.48.0",
-    "@truedat/core": "4.48.0",
+    "@truedat/auth": "4.48.4",
+    "@truedat/core": "4.48.4",
     "axios": "^0.19.2",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -107,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "c4587d045fa6c9028082bdfbcfb35e4383f117ed"
+  "gitHead": "5e50a034469bf3ad8e02a64eb875ad2b710b6b03"
 }

package/src/components/DynamicFieldValue.js

@@ -7,51 +7,58 @@ import SystemPreview from "./widgets/SystemPreview";
 import FieldViewerValue from "./FieldViewerValue";
 import "../styles/fieldGroupDetail.less";
 
-export const DynamicFieldValue = (field) => {
-  const { label, value, type, values, widget, isSecret } = field;
-  return (
-    <List.Item>
-      <List.Header className="dynamic-field-header">{label}</List.Header>
-
-      <List.Description>
-        {_.isNil(value) || (!_.isNumber(value) && _.isEmpty(value)) ? (
-          isSecret ? (
-            <Container className="hidden-secret-value">
-              <FormattedMessage id="template.field.hidden_secret" />
-            </Container>
-          ) : (
-            <Icon name="minus" color="grey" />
-          )
-        ) : _.isArray(value) ? (
-          type == "table" ? (
-            <FieldViewerValue value={value} type={type} values={values} />
-          ) : type == "system" ? (
-            <SystemPreview value={value} />
-          ) : (
-            _.map.convert({ cap: false })((v, i) => (
-              <FieldViewerValue
-                key={i}
-                value={v}
-                type={type}
-                multiple
-                values={values}
-              />
-            ))(value)
-          )
-        ) : widget === "password" ? (
-          "*****"
+export const DynamicFieldValue = ({
+  label,
+  value,
+  type,
+  values,
+  widget,
+  isSecret,
+}) => (
+  <List.Item>
+    <List.Header className="dynamic-field-header">
+      {label ? (
+        <FormattedMessage id={`fields.${label}`} defaultMessage={label} />
+      ) : null}
+    </List.Header>
+    <List.Description>
+      {_.isNil(value) || (!_.isNumber(value) && _.isEmpty(value)) ? (
+        isSecret ? (
+          <Container className="hidden-secret-value">
+            <FormattedMessage id="template.field.hidden_secret" />
+          </Container>
         ) : (
-          <FieldViewerValue
-            value={value}
-            type={type}
-            values={values}
-            widget={widget}
-          />
-        )}
-      </List.Description>
-    </List.Item>
-  );
-};
+          <Icon name="minus" color="grey" />
+        )
+      ) : _.isArray(value) ? (
+        type == "table" ? (
+          <FieldViewerValue value={value} type={type} values={values} />
+        ) : type == "system" ? (
+          <SystemPreview value={value} />
+        ) : (
+          _.map.convert({ cap: false })((v, i) => (
+            <FieldViewerValue
+              key={i}
+              value={v}
+              type={type}
+              multiple
+              values={values}
+            />
+          ))(value)
+        )
+      ) : widget === "password" ? (
+        "*****"
+      ) : (
+        <FieldViewerValue
+          value={value}
+          type={type}
+          values={values}
+          widget={widget}
+        />
+      )}
+    </List.Description>
+  </List.Item>
+);
 
 DynamicFieldValue.propTypes = {
   label: PropTypes.string,
@@ -59,6 +66,7 @@ DynamicFieldValue.propTypes = {
   type: PropTypes.string,
   values: PropTypes.any,
   widget: PropTypes.string,
+  isSecret: PropTypes.bool,
 };
 
 export default DynamicFieldValue;

package/src/components/DynamicForm.js

@@ -1,6 +1,7 @@
 import _ from "lodash/fp";
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
 import { connect } from "react-redux";
 import { makeGetApplyTemplate, makeGetTemplate } from "../selectors";
 import { parseGroups } from "../utils";
@@ -15,6 +16,7 @@ export const DynamicForm = ({
   fieldsToOmit,
   selectedDomain,
 }) => {
+  const { formatMessage } = useIntl();
   const domainId = selectedDomain?.id;
   useEffect(() => {
     if (!_.isNil(domainId) && !_.isEmpty(template)) {
@@ -38,26 +40,29 @@ export const DynamicForm = ({
     onChange(newContent, {});
   };
 
-  const parsedGroups = parseGroups(
+  const parsedGroups = parseGroups(formatMessage)(
     template,
     content,
     fieldsToOmit,
     selectedDomain
   );
 
-  return (
-    <>
-      {parsedGroups.map(({ name, fields }, i) => (
-        <FieldGroupSegment
-          key={i}
-          onFieldChange={handleChange}
-          name={name}
-          fields={fields}
-          scope={_.prop("scope")(template)}
-        />
-      ))}
-    </>
-  );
+  return parsedGroups.map(({ name, fields }, i) => (
+    <FieldGroupSegment
+      key={i}
+      onFieldChange={handleChange}
+      name={
+        name
+          ? formatMessage({
+              id: `templates.groups.${name}`,
+              defaultMessage: name,
+            })
+          : null
+      }
+      fields={fields}
+      scope={template?.scope}
+    />
+  ));
 };
 
 DynamicForm.propTypes = {

package/src/components/DynamicFormViewer.js

@@ -1,7 +1,6 @@
-import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { FormattedMessage } from "react-intl";
+import { useIntl } from "react-intl";
 import { Message } from "semantic-ui-react";
 import { parseGroups } from "../utils";
 import FieldGroupDetail from "./FieldGroupDetail";
@@ -12,30 +11,33 @@ export const DynamicFormViewer = ({
   boxLayout,
   editFunctions,
 }) => {
+  const { formatMessage } = useIntl();
   if (!template)
     return (
-      <Message negative>
-        <Message.Header>
-          <FormattedMessage id="template.not_found.message" />
-        </Message.Header>
-      </Message>
+      <Message
+        negative
+        header={formatMessage({ id: "template.not_found.message" })}
+      />
     );
 
-  const parsedGroups = parseGroups(template, content);
+  const parsedGroups = parseGroups(formatMessage)(template, content);
 
-  return (
-    <>
-      {parsedGroups.map(({ name, fields }, i) => (
-        <FieldGroupDetail
-          key={i}
-          name={name}
-          fields={fields}
-          boxLayout={boxLayout}
-          editFunctions={editFunctions}
-        />
-      ))}
-    </>
-  );
+  return parsedGroups.map(({ name, fields }, i) => (
+    <FieldGroupDetail
+      key={i}
+      name={
+        name
+          ? formatMessage({
+              id: `templates.groups.${name}`,
+              defaultMessage: name,
+            })
+          : null
+      }
+      fields={fields}
+      boxLayout={boxLayout}
+      editFunctions={editFunctions}
+    />
+  ));
 };
 
 DynamicFormViewer.propTypes = {

package/src/components/EditableDynamicFieldValue.js

@@ -2,18 +2,16 @@ import _ from "lodash/fp";
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
-import { useIntl } from "react-intl";
 import { Icon, List, Button, Container } from "semantic-ui-react";
 import SystemPreview from "./widgets/SystemPreview";
 import DynamicField from "./widgets/DynamicField";
 import FieldViewerValue from "./FieldViewerValue";
 import "../styles/fieldGroupDetail.less";
 
-export const EditableDynamicFieldValue = (field) => {
-  const { formatMessage } = useIntl();
+export const EditableDynamicFieldValue = (props) => {
   const [updatedFailed, setUpdateFailed] = useState(false);
   const { label, name, value, type, values, widget, isSecret, editFunctions } =
-    field;
+    props;
   const {
     onChange,
     onCancel,
@@ -25,17 +23,10 @@ export const EditableDynamicFieldValue = (field) => {
 
   useEffect(() => {
     if (editingField !== name) return;
-    switch (updateStatus) {
-      case "success":
-        setEditingField(null);
-        break;
-      case "fail":
-        setUpdateFailed(true);
-        break;
-      case "updating":
-        setUpdateFailed(false);
-    }
-  }, [editingField, name, updateStatus]);
+    else if (updateStatus === "success") setEditingField(null);
+    else if (updateStatus === "fail") setUpdateFailed(true);
+    else if (updateStatus === "updating") setUpdateFailed(false);
+  }, [editingField, name, setEditingField, updateStatus]);
 
   const handleCancel = () => {
     setEditingField(null);
@@ -51,17 +42,23 @@ export const EditableDynamicFieldValue = (field) => {
           className="editable-dynamic-field-header"
           onClick={() => setEditingField(name)}
         >
-          {label}
+          {label ? (
+            <FormattedMessage id={`fields.${label}`} defaultMessage={label} />
+          ) : null}
           <Icon name={"pencil alternate"} />
         </List.Header>
       ) : (
-        <List.Header className="dynamic-field-header">{label}</List.Header>
+        <List.Header className="dynamic-field-header">
+          {label ? (
+            <FormattedMessage id={`fields.${label}`} defaultMessage={label} />
+          ) : null}
+        </List.Header>
       )}
 
       <List.Description>
         {editingField === name ? (
           <>
-            <DynamicField onChange={onChange} field={field} />
+            <DynamicField onChange={onChange} field={props} />
             <Container className="editable-dynamic-field-buttons">
               <Button
                 className={
@@ -73,7 +70,7 @@ export const EditableDynamicFieldValue = (field) => {
                 size="mini"
                 loading={updateStatus === "updating"}
               >
-                {formatMessage({ id: "template.field.action.save" })}
+                <FormattedMessage id="template.field.action.save" />
               </Button>
               <Button
                 onClick={handleCancel}
@@ -82,7 +79,7 @@ export const EditableDynamicFieldValue = (field) => {
                 size="mini"
                 disabled={updateStatus === "updating"}
               >
-                {formatMessage({ id: "template.field.action.cancel" })}
+                <FormattedMessage id="template.field.action.cancel" />
               </Button>
             </Container>
           </>
@@ -126,12 +123,14 @@ export const EditableDynamicFieldValue = (field) => {
 };
 
 EditableDynamicFieldValue.propTypes = {
+  editFunctions: PropTypes.object,
+  isSecret: PropTypes.bool,
   label: PropTypes.string,
-  value: PropTypes.any,
+  name: PropTypes.string,
   type: PropTypes.string,
+  value: PropTypes.any,
   values: PropTypes.any,
   widget: PropTypes.string,
-  editFunctions: PropTypes.object,
 };
 
 export default EditableDynamicFieldValue;

package/src/components/FieldGroupSegment.js

@@ -6,7 +6,7 @@ import FieldGroupSubSegment from "./FieldGroupSubSegment/FieldGroupSubSegment";
 
 export const FieldGroupSegment = ({ onFieldChange, name, fields, scope }) => (
   <Segment>
-    {name !== "undefined" && <Header as="h4" content={name} />}
+    {name && name !== "undefined" ? <Header as="h4" content={name} /> : null}
     {fields &&
       fields.map((field, i) =>
         field.widget === "copy" ? (
@@ -34,7 +34,7 @@ FieldGroupSegment.propTypes = {
   onFieldChange: PropTypes.func,
   name: PropTypes.string,
   fields: PropTypes.array,
-  scope: PropTypes.string
+  scope: PropTypes.string,
 };
 
 export default FieldGroupSegment;

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

@@ -5,7 +5,7 @@ import { FieldGroupSubSegment } from "../FieldGroupSubSegment";
 describe("<FieldGroupSubSegment />", () => {
   const setState = jest.fn();
   const useStateSpy = jest.spyOn(React, "useState");
-  useStateSpy.mockImplementation(init => [init, setState]);
+  useStateSpy.mockImplementation((init) => [init, setState]);
 
   const onFieldChange = jest.fn();
   const name = "copy";
@@ -16,10 +16,10 @@ describe("<FieldGroupSubSegment />", () => {
       cardinality: "1",
       label: "Entidad",
       name: "entidad",
-      parsed_values: undefined,
+      parsedValues: undefined,
       type: "string",
       value: "a",
-      widget: "string"
+      widget: "string",
     },
     {
       cardinality: "1",
@@ -27,7 +27,7 @@ describe("<FieldGroupSubSegment />", () => {
       description: "des",
       label: "copy",
       name: "copy",
-      parsed_values: undefined,
+      parsedValues: undefined,
       type: "string",
       value:
         '{"fileFormat":"DAT","header":true,"compression":"brotli","fields":[{"name":"New3","type":"decimal","size":11,"scale":2,"precision":10},{"name":"New5","type":"datetime","size":10,"format":"%d-%m-%Y %H:%M:%S"},{"name":"New1","type":"string","size":40},{"name":"New0","type":"datetime","size":10,"format":"%d-%m-%Y %H:%M:%S"},{"name":"New4","type":"string","size":40}]}',
@@ -38,11 +38,11 @@ describe("<FieldGroupSubSegment />", () => {
           { text: "template.widget.copy.fixed.column", value: "DAT" },
           { text: "template.widget.copy.fixed.column", value: "TXT" },
           { text: "template.widget.copy.fixed.column", value: "Sin formato" },
-          { text: "template.widget.copy.without.fixed.column", value: "hola" }
-        ]
+          { text: "template.widget.copy.without.fixed.column", value: "hola" },
+        ],
       },
-      widget: "copy"
-    }
+      widget: "copy",
+    },
   ];
   const props = { onFieldChange, name, fields, prevFields };
 
@@ -66,12 +66,12 @@ describe("<FieldGroupSubSegment />", () => {
       .onChange(
         {
           preventDefault() {},
-          target: {}
+          target: {},
         },
         {
           name: "copy",
           value:
-            '{"fileFormat": "DAT", "compression": "brotli", "fields": [{ "name": "New54", "type": "string", "size": 40 },{ "name": "New53", "type": "string", "size": 40 }]}'
+            '{"fileFormat": "DAT", "compression": "brotli", "fields": [{ "name": "New54", "type": "string", "size": 40 },{ "name": "New53", "type": "string", "size": 40 }]}',
         }
       );
     expect(wrapper.find("Segment > div Button").props().disabled).toBe(true);
@@ -86,12 +86,12 @@ describe("<FieldGroupSubSegment />", () => {
       .onChange(
         {
           preventDefault() {},
-          target: {}
+          target: {},
         },
         {
           name: "copy",
           value:
-            '{"fileFormat": "DAT", "compression": "brotli", "fields": [{ "name": "New54", "type": "string", "size": 40 },{ "name": "New53", "type": "string", "size": 40 }]}'
+            '{"fileFormat": "DAT", "compression": "brotli", "fields": [{ "name": "New54", "type": "string", "size": 40 },{ "name": "New53", "type": "string", "size": 40 }]}',
         }
       );
     expect(wrapper.find(".errorMessage").props().id).toBe(
@@ -108,12 +108,12 @@ describe("<FieldGroupSubSegment />", () => {
       .onChange(
         {
           preventDefault() {},
-          target: {}
+          target: {},
         },
         {
           name: "copy",
           value:
-            '{"fileFormat": "DAT", "header": false, "compression": "brotli", "fields": [{ "name": "New54", "type": "string"},{ "name": "New53", "type": "string", "size": 40 }]}'
+            '{"fileFormat": "DAT", "header": false, "compression": "brotli", "fields": [{ "name": "New54", "type": "string"},{ "name": "New53", "type": "string", "size": 40 }]}',
         }
       );
     expect(wrapper.find(".errorMessage").props().id).toBe(
@@ -130,12 +130,12 @@ describe("<FieldGroupSubSegment />", () => {
       .onChange(
         {
           preventDefault() {},
-          target: {}
+          target: {},
         },
         {
           name: "copy",
           value:
-            '{"fileFormat": "DAT", "header": false, "compression": "brotli", "delimiter": "sss","fields": [{ "name": "New54", "type": "string"},{ "name": "New53", "type": "string", "size": 40 }]}'
+            '{"fileFormat": "DAT", "header": false, "compression": "brotli", "delimiter": "sss","fields": [{ "name": "New54", "type": "string"},{ "name": "New53", "type": "string", "size": 40 }]}',
         }
       );
     expect(wrapper.find(".errorMessage").props().id).toBe(
@@ -152,12 +152,12 @@ describe("<FieldGroupSubSegment />", () => {
       .onChange(
         {
           preventDefault() {},
-          target: {}
+          target: {},
         },
         {
           name: "copy",
           value:
-            '{"fileFormat": "DAT", "header": false, "compression": "brotli","fields": [{ "name": "New54.", "type": "string", "size": 40},{ "name": "New53", "type": "string", "size": 40 }]}'
+            '{"fileFormat": "DAT", "header": false, "compression": "brotli","fields": [{ "name": "New54.", "type": "string", "size": 40},{ "name": "New53", "type": "string", "size": 40 }]}',
         }
       );
     expect(wrapper.find(".errorMessage").props().id).toBe(
@@ -174,12 +174,12 @@ describe("<FieldGroupSubSegment />", () => {
       .onChange(
         {
           preventDefault() {},
-          target: {}
+          target: {},
         },
         {
           name: "copy",
           value:
-            '{"header": false, "compression": "brotli","fields": [{ "name": "New54", "type": "string", "size": 40},{ "name": "New53", "type": "string", "size": 40 }]}'
+            '{"header": false, "compression": "brotli","fields": [{ "name": "New54", "type": "string", "size": 40},{ "name": "New53", "type": "string", "size": 40 }]}',
         }
       );
     expect(wrapper.find(".errorMessage").props().id).toBe(
@@ -196,12 +196,12 @@ describe("<FieldGroupSubSegment />", () => {
       .onChange(
         {
           preventDefault() {},
-          target: {}
+          target: {},
         },
         {
           name: "copy",
           value:
-            '{"fileFormat": "DAT","header": false, "compression": "brotli","fields": [{ "name": "New54", "type": "test", "size": 40},{ "name": "New53", "type": "string", "size": 40 }]}'
+            '{"fileFormat": "DAT","header": false, "compression": "brotli","fields": [{ "name": "New54", "type": "test", "size": 40},{ "name": "New53", "type": "string", "size": 40 }]}',
         }
       );
     expect(wrapper.find(".errorMessage").props().id).toBe(

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

@@ -77,7 +77,7 @@ exports[`<FieldGroupSubSegment /> matches the latest snapshot 1`] = `
         "description": "",
         "label": "fileFormat",
         "name": "fileFormat",
-        "parsed_values": Array [
+        "parsedValues": Array [
           Object {
             "text": "CSV",
             "value": "CSV",
@@ -119,7 +119,7 @@ exports[`<FieldGroupSubSegment /> matches the latest snapshot 1`] = `
         "description": "",
         "label": "header",
         "name": "header",
-        "parsed_values": Array [
+        "parsedValues": Array [
           Object {
             "text": "true",
             "value": "true",
@@ -152,7 +152,7 @@ exports[`<FieldGroupSubSegment /> matches the latest snapshot 1`] = `
         "description": "",
         "label": "compression",
         "name": "compression",
-        "parsed_values": Array [
+        "parsedValues": Array [
           Object {
             "text": "none",
             "value": "none",
@@ -186,7 +186,7 @@ exports[`<FieldGroupSubSegment /> matches the latest snapshot 1`] = `
         "description": "",
         "label": "fields",
         "name": "fields",
-        "parsed_values": Array [],
+        "parsedValues": Array [],
         "type": "string",
         "value": Array [
           Object {