@truedat/df 4.48.0 → 4.48.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [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.2",
   "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.2",
+    "@truedat/core": "4.48.2",
     "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": "93133e957332713e64c97eecdf45cc283c29bd32"
 }

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)) {
@@ -45,19 +47,22 @@ export const DynamicForm = ({
     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);
 
-  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

@@ -16,7 +16,7 @@ describe("<FieldGroupSubSegment />", () => {
       cardinality: "1",
       label: "Entidad",
       name: "entidad",
-      parsed_values: undefined,
+      parsedValues: undefined,
       type: "string",
       value: "a",
       widget: "string"
@@ -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}]}',

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 {

package/src/components/FieldGroupSubSegment/handleCopyModule.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import {
   ENTRIES_FORMAT,
   REQUIRED_COPY_ENTRIES,
-  VALID_COMPRESSION
+  VALID_COMPRESSION,
 } from "./constants";
 
 const getCopyForm = (field, fileFormat, formatOptions) => {
@@ -12,7 +12,7 @@ const getCopyForm = (field, fileFormat, formatOptions) => {
   );
 
   const fileFormatConfiguration = fileFormat
-    ? formatOptions.find(option => option.text === fileFormat).value
+    ? formatOptions.find((option) => option.text === fileFormat).value
     : "";
 
   return Object.entries(copyEntries)
@@ -44,7 +44,7 @@ const getCopyForm = (field, fileFormat, formatOptions) => {
         type: "string",
         name: key,
         widget,
-        description: ""
+        description: "",
       };
       const dropdownValues =
         key === "compression"
@@ -52,18 +52,18 @@ const getCopyForm = (field, fileFormat, formatOptions) => {
           : key === "header"
           ? { fixed: ["true", "false"] }
           : key === "fileFormat"
-          ? { fixed: formatOptions.map(option => option.text) }
+          ? { fixed: formatOptions.map((option) => option.text) }
           : "";
 
-      const parsed_values = dropdownValues
-        ? dropdownValues.fixed.map(item => {
+      const parsedValues = dropdownValues
+        ? dropdownValues.fixed.map((item) => {
             return { value: item, text: item };
           })
         : [];
       const values =
         typeof value === "boolean" ? [{ true: true }, { false: false }] : [];
       const currentValue = setFormFieldValue(key, value, fileFormat);
-      return { ...dynamicFormObj, values, value: currentValue, parsed_values };
+      return { ...dynamicFormObj, values, value: currentValue, parsedValues };
     });
 };
 
@@ -75,7 +75,7 @@ const setFormFieldValue = (key, value, fileFormat) => {
     case "compression":
       return !VALID_COMPRESSION.includes(value) ? "none" : value;
     case "fields":
-      return value.map(field => _handleCopyFields(field, fileFormat));
+      return value.map((field) => _handleCopyFields(field, fileFormat));
     default:
       return value;
   }
@@ -91,8 +91,8 @@ const getCopyJson = (field, fileFormat, hasChangedFormat = false) => {
       _.map(([key, value]) => [
         key,
         key === "fields"
-          ? value.map(field => _handleCopyFields(field, fileFormat))
-          : value
+          ? value.map((field) => _handleCopyFields(field, fileFormat))
+          : value,
       ]),
       _.fromPairs
     )(copyEntries);
@@ -107,7 +107,7 @@ const getCopyEntriesOnFormat = (format, copyEntries) => {
     header: true,
     compression: "none",
     fields: [],
-    ...copyEntries
+    ...copyEntries,
   };
   if (format === "CSV") {
     const {
@@ -117,7 +117,7 @@ const getCopyEntriesOnFormat = (format, copyEntries) => {
       fields,
       delimiter,
       escape_char,
-      quoted
+      quoted,
     } = emptyCopy;
     return {
       fileFormat,
@@ -126,7 +126,7 @@ const getCopyEntriesOnFormat = (format, copyEntries) => {
       escape_char: escape_char === undefined ? "\\" : escape_char,
       quoted: quoted === undefined ? '"' : quoted,
       delimiter: delimiter === undefined ? "," : delimiter,
-      fields
+      fields,
     };
   }
   if (format === "JSON") {
@@ -145,7 +145,7 @@ const _handleCopyFields = (field, fileFormat) => {
     name,
     type: type || "string",
     size: size || 40,
-    ...field
+    ...field,
   };
   switch (type) {
     case "integer":
@@ -155,25 +155,25 @@ const _handleCopyFields = (field, fileFormat) => {
       Object.assign(copyField, {
         scale: scale || 2,
         precision: precision || 10,
-        size: size || 11
+        size: size || 11,
       });
       break;
     case "date":
       Object.assign(copyField, {
         size: size || 10,
-        format: fieldFormat || "%d-%m-%Y"
+        format: fieldFormat || "%d-%m-%Y",
       });
       break;
     case "time":
       Object.assign(copyField, {
         size: size || 10,
-        format: fieldFormat || "%H:%M:%S"
+        format: fieldFormat || "%H:%M:%S",
       });
       break;
     case "datetime":
       Object.assign(copyField, {
         size: size || 10,
-        format: fieldFormat || "%d-%m-%Y %H:%M:%S"
+        format: fieldFormat || "%d-%m-%Y %H:%M:%S",
       });
       break;
   }