@truedat/df 4.48.3 → 4.48.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "4.48.3",
+  "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.3",
-    "@truedat/core": "4.48.3",
+    "@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": "5b30312f30c532988985ab9271d1e39ad0ad5c43"
+  "gitHead": "5e50a034469bf3ad8e02a64eb875ad2b710b6b03"
 }

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/widgets/CheckboxField.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
 import React from "react";
-import { FormattedMessage } from "react-intl";
 import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
 
@@ -13,14 +12,7 @@ export const CheckboxField = ({
       <Form.Checkbox
         name={name}
         key={i}
-        label={
-          text ? (
-            <FormattedMessage
-              id={`fields.${name}.${text}`}
-              defaultMessage={text}
-            />
-          ) : null
-        }
+        label={text}
         value={value}
         checked={_.isArray(fieldValue) && _.includes(value)(fieldValue)}
         onChange={(e, { checked, value: thisValue, ...changes }) => {

package/src/components/widgets/RadioField.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
 import React from "react";
-import { FormattedMessage } from "react-intl";
 import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
 
@@ -12,14 +11,7 @@ export const RadioField = ({
     <Form.Radio
       name={name}
       key={i}
-      label={
-        text ? (
-          <FormattedMessage
-            id={`fields.${name}.${text}`}
-            defaultMessage={text}
-          />
-        ) : null
-      }
+      label={text}
       value={value}
       checked={fieldValue === value}
       onChange={onChange}

package/src/components/widgets/StandardDropdown.js

@@ -1,9 +1,9 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
 import { connect } from "react-redux";
 import { Form } from "semantic-ui-react";
-import { useIntl } from "react-intl";
 import { makeGetDropdownOptions } from "../../selectors";
 
 const isMultiple = (cardinality) => _.includes(cardinality)(["+", "*"]);
@@ -22,8 +22,22 @@ const valueOrEmpty = (cardinality, type, value) =>
       : ""
     : valueFromType(type, value);
 
-const setOptions = (cardinality, values, text) =>
-  isMultiple(cardinality) ? values : _.union(values, [{ text, value: null }]);
+const translateValues = (formatMessage, label) => (values) =>
+  values?.map(({ text, ...rest }, key) => ({
+    key,
+    text: formatMessage({
+      id: `fields.${label}.${text}`,
+      defaultMessage: text,
+    }),
+    ...rest,
+  }));
+
+const makeOptions = (formatMessage, label) => (cardinality, values) =>
+  isMultiple(cardinality)
+    ? translateValues(formatMessage, label)(values)
+    : _.union(translateValues(formatMessage, label)(values), [
+        { text: formatMessage({ id: "selector.no.selection" }), value: null },
+      ]);
 
 const singleValueType = (name, value, options) =>
   _.flow(
@@ -59,7 +73,7 @@ const cachedTypeValue = (data, options) => {
 };
 
 export const StandardDropdown = ({
-  field: { name, cardinality, type, value },
+  field: { label, name, cardinality, type, value },
   onChange,
   options,
 }) => {
@@ -69,26 +83,22 @@ export const StandardDropdown = ({
     onChange(e, value);
   };
   return (
-    <>
-      <Form.Dropdown
-        fluid
-        search
-        selection
-        placeholder={formatMessage({ id: "fields.dropdown.placeholder" })}
-        onChange={handleChange}
-        name={name}
-        value={valueOrEmpty(cardinality, type, value)}
-        multiple={isMultiple(cardinality)}
-        options={setOptions(
-          cardinality,
-          options,
-          formatMessage({ id: "selector.no.selection" })
-        ).map((o, key) => ({
+    <Form.Dropdown
+      fluid
+      search
+      selection
+      placeholder={formatMessage({ id: "fields.dropdown.placeholder" })}
+      onChange={handleChange}
+      name={name}
+      value={valueOrEmpty(cardinality, type, value)}
+      multiple={isMultiple(cardinality)}
+      options={makeOptions(formatMessage, label)(cardinality, options).map(
+        (o, key) => ({
           ...o,
           key,
-        }))}
-      />
-    </>
+        })
+      )}
+    />
   );
 };
 

package/src/components/widgets/__tests__/RadioField.spec.js

@@ -7,7 +7,7 @@ describe("<RadioField />", () => {
   const name = "name";
   const cardinality = "1";
   const value = "Foo";
-  const parsedValues = ["Foo", "Bar"];
+  const parsedValues = ["Foo", "Bar"].map((v) => ({ value: v, text: v }));
   const onChange = jest.fn();
   const props = {
     field: { label, name, cardinality, value, parsedValues },

package/src/components/widgets/__tests__/__snapshots__/CheckboxField.spec.js.snap

@@ -7,12 +7,7 @@ Array [
     checked={false}
     control={[Function]}
     key="0"
-    label={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Foo"
-        id="fields.name.Foo"
-      />
-    }
+    label="Foo"
     name="name"
     onChange={[Function]}
     value="foo"
@@ -22,12 +17,7 @@ Array [
     checked={false}
     control={[Function]}
     key="1"
-    label={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Bar"
-        id="fields.name.Bar"
-      />
-    }
+    label="Bar"
     name="name"
     onChange={[Function]}
     value="bar"

package/src/components/widgets/__tests__/__snapshots__/RadioField.spec.js.snap

@@ -4,21 +4,23 @@ exports[`<RadioField /> matches the latest snapshot 1`] = `
 Array [
   <FormRadio
     as={[Function]}
-    checked={false}
+    checked={true}
     control={[Function]}
     key="0"
-    label={null}
+    label="Foo"
     name="name"
     onChange={[MockFunction]}
+    value="Foo"
   />,
   <FormRadio
     as={[Function]}
     checked={false}
     control={[Function]}
     key="1"
-    label={null}
+    label="Bar"
     name="name"
     onChange={[MockFunction]}
+    value="Bar"
   />,
 ]
 `;

package/src/components/widgets/__tests__/__snapshots__/StandardDropdown.spec.js.snap

@@ -1,37 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StandardDropdown /> matches the latest snapshot 1`] = `
-<Fragment>
-  <FormDropdown
-    as={[Function]}
-    control={[Function]}
-    fluid={true}
-    multiple={false}
-    name="name"
-    onChange={[Function]}
-    options={
-      Array [
-        Object {
-          "key": 0,
-          "text": "selector.no.selection",
-          "value": null,
-        },
-        Object {
-          "key": 1,
-          "text": "Foo",
-          "value": "Foo",
-        },
-        Object {
-          "key": 2,
-          "text": "Bar",
-          "value": "Bar",
-        },
-      ]
-    }
-    placeholder="fields.dropdown.placeholder"
-    search={true}
-    selection={true}
-    value="Foo"
-  />
-</Fragment>
+<FormDropdown
+  as={[Function]}
+  control={[Function]}
+  fluid={true}
+  multiple={false}
+  name="name"
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "key": 0,
+        "text": "selector.no.selection",
+        "value": null,
+      },
+      Object {
+        "key": 1,
+        "text": "Foo",
+        "value": "Foo",
+      },
+      Object {
+        "key": 2,
+        "text": "Bar",
+        "value": "Bar",
+      },
+    ]
+  }
+  placeholder="fields.dropdown.placeholder"
+  search={true}
+  selection={true}
+  value="Foo"
+/>
 `;

package/src/templates/utils/__tests__/parseFieldOptions.spec.js

@@ -1,10 +1,13 @@
 import { parseFieldOptions } from "..";
 
+const formatMessage = ({ defaultMessage }) => defaultMessage;
+const parseFormatFieldOptions = parseFieldOptions(formatMessage);
+
 describe("utils: parseFieldOptions", () => {
   it("adds value to field", () => {
     const field = { name: "field" };
     const content = { field: "1" };
-    const result = parseFieldOptions(content)(field);
+    const result = parseFormatFieldOptions(content)(field);
     expect(result).toEqual({ ...field, value: "1" });
   });
 
@@ -22,7 +25,7 @@ describe("utils: parseFieldOptions", () => {
       },
     };
     const content = { field: "1", switcher: "odd" };
-    const result = parseFieldOptions(content)(field);
+    const result = parseFormatFieldOptions(content)(field);
     expect(result).toEqual({
       ...field,
       value: "1",
@@ -41,7 +44,7 @@ describe("utils: parseFieldOptions", () => {
       },
     };
     const content = { field: "b" };
-    const result = parseFieldOptions(content)(field);
+    const result = parseFormatFieldOptions(content)(field);
     expect(result).toEqual({
       ...field,
       value: "b",
@@ -64,7 +67,7 @@ describe("utils: parseFieldOptions", () => {
       },
     };
     const content = { field: "a" };
-    const result = parseFieldOptions(content)(field);
+    const result = parseFormatFieldOptions(content)(field);
     expect(result).toEqual({
       ...field,
       value: "a",
@@ -84,7 +87,7 @@ describe("utils: parseFieldOptions", () => {
       },
     };
     const content = { field: "y" };
-    const result = parseFieldOptions(content)(field);
+    const result = parseFormatFieldOptions(content)(field);
     expect(result).toEqual({
       ...field,
       value: "y",
@@ -107,13 +110,13 @@ describe("utils: parseFieldOptions", () => {
       },
     };
     const content = { field: "bar" };
-    const result = parseFieldOptions(content, selectedDomain)(field);
+    const result = parseFormatFieldOptions(content, selectedDomain)(field);
     expect(result).toEqual({
       ...field,
       value: "bar",
       parsedValues: [
-        { text: "foo", value: "foo" },
         { text: "bar", value: "bar" },
+        { text: "foo", value: "foo" },
       ],
     });
   });

package/src/templates/utils/__tests__/parseGroups.spec.js

@@ -1,5 +1,8 @@
 import { parseGroups } from "..";
 
+const formatMessage = ({ defaultMessage }) => defaultMessage;
+const formatParseGroups = parseGroups(formatMessage);
+
 describe("utils: parseGroups", () => {
   it("adds required and value to field", () => {
     const template = {
@@ -14,7 +17,7 @@ describe("utils: parseGroups", () => {
       ],
     };
     const content = { field: "1", field_mandatory: "2" };
-    const result = parseGroups(template, content);
+    const result = formatParseGroups(template, content);
     expect(result).toEqual([
       {
         fields: [
@@ -42,7 +45,7 @@ describe("utils: parseGroups", () => {
     };
     const content = { field: "1" };
     const fieldsToOmit = ["ommitedField"];
-    const result = parseGroups(template, content, fieldsToOmit);
+    const result = formatParseGroups(template, content, fieldsToOmit);
     expect(result).toEqual([
       {
         fields: [{ name: "field", required: false, value: "1" }],
@@ -66,7 +69,7 @@ describe("utils: parseGroups", () => {
     };
     const content = { parent: "b", dependant: "value" };
     const fieldsToOmit = ["ommitedField"];
-    const result = parseGroups(template, content, fieldsToOmit);
+    const result = formatParseGroups(template, content, fieldsToOmit);
     expect(result).toEqual([
       {
         fields: [
@@ -106,7 +109,7 @@ describe("utils: parseGroups", () => {
     };
     const content = { parent: ["b", "c"] };
     const fieldsToOmit = ["ommitedField"];
-    const result = parseGroups(template, content, fieldsToOmit);
+    const result = formatParseGroups(template, content, fieldsToOmit);
     expect(result).toEqual([
       {
         fields: [
@@ -152,7 +155,7 @@ describe("utils: parseGroups", () => {
     };
     const content = { parent: "b", dependant: "1" };
     const fieldsToOmit = ["ommitedField"];
-    const result = parseGroups(template, content, fieldsToOmit);
+    const result = formatParseGroups(template, content, fieldsToOmit);
     expect(result).toEqual([
       {
         fields: [
@@ -192,7 +195,7 @@ describe("utils: parseGroups", () => {
       ],
     };
     const content = { field: "1" };
-    const result = parseGroups(template, content);
+    const result = formatParseGroups(template, content);
     expect(result).toEqual([
       {
         fields: [{ name: "field", required: false, value: "1" }],
@@ -216,7 +219,7 @@ describe("utils: parseGroups", () => {
       ],
     };
     const content = { secret: "1", not_secret: "2" };
-    const result = parseGroups(template, content);
+    const result = formatParseGroups(template, content);
     expect(result).toEqual([
       {
         fields: [{ name: "not_secret", required: false, value: "2" }],

package/src/templates/utils/parseFieldOptions.js

@@ -1,60 +1,72 @@
 import _ from "lodash/fp";
+import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
 
-const stringToValueTextList = _.map((v) => ({ value: v, text: v }));
+const makeOptions = (formatMessage, label) =>
+  _.map((v) => ({
+    value: v,
+    text: formatMessage({ id: `fields.${label}.${v}`, defaultMessage: v }),
+  }));
 
-export const parseFieldOptions = (content, selectedDomain) => (field) => {
-  const value = _.prop(field?.name)(content);
-  if (!field?.values) return { ...field, value };
+export const parseFieldOptions =
+  (formatMessage) => (content, selectedDomain) => (field) => {
+    const value = _.prop(field?.name)(content);
+    if (!field?.values) return { ...field, value };
 
-  const parseSwitch = (values) => {
-    const switchOn = _.prop("switch.on")(values);
-    const switchedValues = _.prop(`switch.values.${content[switchOn]}`)(values);
-    return stringToValueTextList(switchedValues);
-  };
-  const parseFixed = _.flow(_.get("fixed"), stringToValueTextList);
-  const parseRoleUsers = _.flow(
-    _.get("processed_users"),
-    _.cond([
-      [_.isArray, _.identity],
-      [_.stubTrue, _.constant([])],
-    ]),
-    stringToValueTextList
-  );
-  const parseRoleGroups = (values) =>
-    _.concat(
-      _.flow(
-        _.get("processed_users"),
-        _.map((name) => ({
-          value: `user:${name}`,
-          text: name,
-          icon: "user",
-        }))
-      )(values),
-      _.flow(
-        _.get("processed_groups"),
-        _.map((name) => ({
-          value: `group:${name}`,
-          text: name,
-          icon: "group",
-        }))
-      )(values)
+    const translateValues = _.flow(
+      makeOptions(formatMessage, field?.label),
+      _.sortBy(accentInsensitivePathOrder("text"))
+    );
+    const parseSwitch = (values) => {
+      const switchOn = _.prop("switch.on")(values);
+      const switchedValues = _.prop(`switch.values.${content[switchOn]}`)(
+        values
+      );
+      return translateValues(switchedValues);
+    };
+    const parseFixed = _.flow(_.get("fixed"), translateValues);
+    const parseRoleUsers = _.flow(
+      _.get("processed_users"),
+      _.cond([
+        [_.isArray, _.identity],
+        [_.stubTrue, _.constant([])],
+      ]),
+      translateValues
+    );
+    const parseRoleGroups = (values) =>
+      _.concat(
+        _.flow(
+          _.get("processed_users"),
+          _.map((name) => ({
+            value: `user:${name}`,
+            text: name,
+            icon: "user",
+          }))
+        )(values),
+        _.flow(
+          _.get("processed_groups"),
+          _.map((name) => ({
+            value: `group:${name}`,
+            text: name,
+            icon: "group",
+          }))
+        )(values)
+      );
+    const parseDomain = _.flow(
+      _.get("domain"),
+      _.propOr([], _.toString(selectedDomain?.id)),
+      translateValues
     );
-  const parseDomain = _.flow(
-    _.get("domain"),
-    _.propOr([], _.toString(selectedDomain?.id)),
-    stringToValueTextList
-  );
 
-  const parsedValues = _.flow(
-    _.get("values"),
-    _.cond([
-      [_.has("switch"), parseSwitch],
-      [_.has("fixed"), parseFixed],
-      [_.has("fixed_tuple"), _.get("fixed_tuple")],
-      [_.has("role_users"), parseRoleUsers],
-      [_.has("role_groups"), parseRoleGroups],
-      [_.has("domain"), parseDomain],
-    ])
-  )(field);
-  return { ...field, value, parsedValues };
-};
+    const parsedValues = _.flow(
+      _.get("values"),
+      _.cond([
+        [_.has("switch"), parseSwitch],
+        [_.has("fixed"), parseFixed],
+        [_.has("fixed_tuple"), _.get("fixed_tuple")],
+        [_.has("role_users"), parseRoleUsers],
+        [_.has("role_groups"), parseRoleGroups],
+        [_.has("domain"), parseDomain],
+      ])
+    )(field);
+    return { ...field, value, parsedValues };
+  };

package/src/templates/utils/parseGroups.js

@@ -17,26 +17,27 @@ const checkDependency = (field, content) => {
 const enrichIsSecret = (isSecret) => (field) =>
   isSecret ? { ...field, isSecret } : field;
 
-export const parseGroups = (template, content, fieldsToOmit, selectedDomain) =>
-  _.flow(
-    _.getOr([], "content"),
-    _.map((group) => {
-      const fields = _.flow(
-        _.get("fields"),
-        _.reject((field) => _.includes(fieldsToOmit)(field?.name)),
-        _.filter(
-          (field) =>
-            (!("depends" in field) ||
-              (hasDependentKeys(field) && checkDependency(field, content))) &&
-            (!(field.values && "switch" in field.values) ||
-              _.prop(_.prop("values.switch.on")(field))(content) in
-                _.prop("values.switch.values")(field))
-        ),
-        _.map(parseFieldOptions(content, selectedDomain)),
-        _.map(enrichRequired(content)),
-        _.map(enrichIsSecret(_.get("is_secret")(group)))
-      )(group);
-      return { ...group, fields };
-    }),
-    _.filter(({ fields }) => _.negate(_.isEmpty)(fields))
-  )(template);
+export const parseGroups =
+  (formatMessage) => (template, content, fieldsToOmit, selectedDomain) =>
+    _.flow(
+      _.getOr([], "content"),
+      _.map((group) => {
+        const fields = _.flow(
+          _.get("fields"),
+          _.reject((field) => _.includes(fieldsToOmit)(field?.name)),
+          _.filter(
+            (field) =>
+              (!("depends" in field) ||
+                (hasDependentKeys(field) && checkDependency(field, content))) &&
+              (!(field.values && "switch" in field.values) ||
+                _.prop(_.prop("values.switch.on")(field))(content) in
+                  _.prop("values.switch.values")(field))
+          ),
+          _.map(parseFieldOptions(formatMessage)(content, selectedDomain)),
+          _.map(enrichRequired(content)),
+          _.map(enrichIsSecret(_.get("is_secret")(group)))
+        )(group);
+        return { ...group, fields };
+      }),
+      _.filter(({ fields }) => _.negate(_.isEmpty)(fields))
+    )(template);