@truedat/df 4.48.2 → 4.48.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.48.5] 2022-07-11
+
+### Changed
+
+- [TD-5018] Support localization of fixed values
+
+## [4.48.4] 2022-07-11
+
+### Changed
+
+- [TD-5018] Support localization of fixed values
+
 ## [4.48.2] 2022-07-08
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "4.48.2",
+  "version": "4.48.5",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -87,8 +87,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.48.2",
-    "@truedat/core": "4.48.2",
+    "@truedat/auth": "4.48.5",
+    "@truedat/core": "4.48.5",
     "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": "93133e957332713e64c97eecdf45cc283c29bd32"
+  "gitHead": "668fb37a5ca8a3ca4d3009d9b6d218a8bec75d66"
 }

package/src/components/DynamicFieldValue.js

@@ -32,26 +32,28 @@ export const DynamicFieldValue = ({
         )
       ) : _.isArray(value) ? (
         type == "table" ? (
-          <FieldViewerValue value={value} type={type} values={values} />
+          <FieldViewerValue type={type} value={value} values={values} />
         ) : type == "system" ? (
           <SystemPreview value={value} />
         ) : (
-          _.map.convert({ cap: false })((v, i) => (
+          value.map((v, i) => (
             <FieldViewerValue
               key={i}
-              value={v}
-              type={type}
+              label={label}
               multiple
+              type={type}
+              value={v}
               values={values}
             />
-          ))(value)
+          ))
         )
       ) : widget === "password" ? (
         "*****"
       ) : (
         <FieldViewerValue
-          value={value}
+          label={label}
           type={type}
+          value={value}
           values={values}
           widget={widget}
         />

package/src/components/DynamicForm.js

@@ -40,7 +40,7 @@ export const DynamicForm = ({
     onChange(newContent, {});
   };
 
-  const parsedGroups = parseGroups(
+  const parsedGroups = parseGroups(formatMessage)(
     template,
     content,
     fieldsToOmit,

package/src/components/DynamicFormViewer.js

@@ -20,7 +20,7 @@ export const DynamicFormViewer = ({
       />
     );
 
-  const parsedGroups = parseGroups(template, content);
+  const parsedGroups = parseGroups(formatMessage)(template, content);
 
   return parsedGroups.map(({ name, fields }, i) => (
     <FieldGroupDetail

package/src/components/EditableDynamicFieldValue.js

@@ -93,26 +93,28 @@ export const EditableDynamicFieldValue = (props) => {
           )
         ) : _.isArray(value) ? (
           type == "table" ? (
-            <FieldViewerValue value={value} type={type} values={values} />
+            <FieldViewerValue type={type} value={value} values={values} />
           ) : type == "system" ? (
             <SystemPreview value={value} />
           ) : (
-            _.map.convert({ cap: false })((v, i) => (
+            value.map((v, i) => (
               <FieldViewerValue
                 key={i}
-                value={v}
-                type={type}
+                label={label}
                 multiple
+                type={type}
+                value={v}
                 values={values}
               />
-            ))(value)
+            ))
           )
         ) : widget === "password" ? (
           "*****"
         ) : (
           <FieldViewerValue
-            value={value}
+            label={label}
             type={type}
+            value={value}
             values={values}
             widget={widget}
           />

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";
@@ -19,7 +19,7 @@ describe("<FieldGroupSubSegment />", () => {
       parsedValues: undefined,
       type: "string",
       value: "a",
-      widget: "string"
+      widget: "string",
     },
     {
       cardinality: "1",
@@ -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/FieldViewerValue.js

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
 import { Icon, Label, Table } from "semantic-ui-react";
 import { SafeLink, RichTextEditor } from "@truedat/core/components";
 import DomainPreview from "./widgets/DomainPreview";
@@ -8,7 +9,27 @@ import ImagePreview from "./widgets/ImagePreview";
 import SystemPreview from "./widgets/SystemPreview";
 import "../styles/fieldGroupDetail.less";
 
-export const FieldViewerValue = ({ value, type, multiple, values, widget }) => {
+export const LocalizedFieldValue = ({ label, value }) => {
+  const { formatMessage } = useIntl();
+  return formatMessage({
+    id: `fields.${label}.${value}`,
+    defaultMessage: value,
+  });
+};
+
+LocalizedFieldValue.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.any,
+};
+
+export const FieldViewerValue = ({
+  label,
+  multiple,
+  type,
+  value,
+  values,
+  widget,
+}) => {
   switch (type) {
     case "url":
       return (
@@ -67,29 +88,30 @@ export const FieldViewerValue = ({ value, type, multiple, values, widget }) => {
     case "date":
     case "datetime":
     default:
-      if (multiple) {
-        return <Label>{value}</Label>;
-      }
-      return (
+      return multiple ? (
+        <Label>
+          <LocalizedFieldValue label={label} value={value} />
+        </Label>
+      ) : (
         <div
-          className={[
-            "default-value",
-            widget === "identifier" ? "identifier-value" : "",
-          ]
-            .join(" ")
-            .trim()}
+          className={
+            widget === "identifier"
+              ? "default-value identifier-value"
+              : "default-value"
+          }
         >
-          {value}
+          <LocalizedFieldValue label={label} value={value} />
         </div>
       );
   }
 };
 
 FieldViewerValue.propTypes = {
-  value: PropTypes.any,
+  label: PropTypes.string,
+  multiple: PropTypes.bool,
   type: PropTypes.string,
+  value: PropTypes.any,
   values: PropTypes.any,
-  multiple: PropTypes.bool,
   widget: PropTypes.string,
 };
 

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { FieldGroupCopy } from "../FieldGroupCopy";
 
 describe("<FieldGroupCopy />", () => {
@@ -8,7 +8,7 @@ describe("<FieldGroupCopy />", () => {
   const props = { value };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<FieldGroupCopy {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<FieldGroupCopy {...props} />);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -3,14 +3,6 @@ import { render } from "@truedat/test/render";
 import { FieldViewerValue } from "../FieldViewerValue";
 
 describe("<FieldViewerValue />", () => {
-  const renderOpts = {
-    messages: {
-      en: {
-        "widget.copy.error.jsonformat": "Error: copy has wrong format",
-      },
-    },
-  };
-
   const testTypes = [
     {
       value: { url_name: "name", url_value: "value" },
@@ -65,18 +57,18 @@ describe("<FieldViewerValue />", () => {
 
   testTypes.forEach((props) =>
     it(`matches the latest snapshot with type: ${props.type}`, () => {
-      const wrapper = render(<FieldViewerValue {...props} />, renderOpts);
-      expect(wrapper).toMatchSnapshot();
+      const { container } = render(<FieldViewerValue {...props} />);
+      expect(container).toMatchSnapshot();
     })
   );
 
   it("matches the latest snapshot for multiple", () => {
     const props = {
-      value: ["a", "b"],
+      value: "a",
       multiple: true,
       type: "string",
     };
-    const wrapper = render(<FieldViewerValue {...props} />, renderOpts);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<FieldViewerValue {...props} />);
+    expect(container).toMatchSnapshot();
   });
 });