@truedat/df 6.6.5 → 6.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "6.6.5",
+  "version": "6.7.0",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.6.5",
+    "@truedat/test": "6.7.0",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -87,8 +87,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "6.6.5",
-    "@truedat/core": "6.6.5",
+    "@truedat/auth": "6.7.0",
+    "@truedat/core": "6.7.0",
     "decode-uri-component": "^0.2.2",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -109,5 +109,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "875dcb0716cc64d30974106dc64c861d4306fcd6"
+  "gitHead": "6a4284b126a917e396160f1b36c03ca0faf6bac5"
 }

package/src/components/DynamicFieldValue.js

@@ -3,6 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Icon, List, Container } from "semantic-ui-react";
+import OriginLabel from "./OriginLabel";
 import DomainPreview from "./widgets/DomainPreview";
 import HierarchyPreview from "./widgets/HierarchyPreview";
 import SystemPreview from "./widgets/SystemPreview";
@@ -11,13 +12,17 @@ import "../styles/fieldGroupDetail.less";
 
 export const DynamicFieldValue = ({
   label,
-  value,
+  value: valueAndOrigin,
   type,
   values,
   widget,
   isSecret,
   isChanged,
 }) => {
+  const { value, origin } = valueAndOrigin || {
+    value: null,
+    origin: "default",
+  };
   const { formatMessage } = useIntl();
   return (
     <List.Item>
@@ -36,6 +41,7 @@ export const DynamicFieldValue = ({
         {label ? (
           <FormattedMessage id={`fields.${label}`} defaultMessage={label} />
         ) : null}
+        <OriginLabel origin={origin} />
       </List.Header>
       <List.Description>
         {_.isNil(value) || (!_.isNumber(value) && _.isEmpty(value)) ? (

package/src/components/DynamicForm.js

@@ -38,7 +38,10 @@ export const DynamicForm = ({
 
   const handleChange = (e, { name, value }) => {
     e && e.preventDefault();
-    const newContent = applyTemplate({ ...content, [name]: value }, domainId);
+    const newContent = applyTemplate(
+      { ...content, [name]: { value: value, origin: "user" } },
+      domainId
+    );
     onChange(newContent);
   };
 

package/src/components/DynamicFormViewer.js

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

package/src/components/FieldGroupDetail.js

@@ -18,9 +18,9 @@ const parseField = (field) => {
       )(values);
     return {
       ...field,
-      value: _.isArray(value)
-        ? _.map(translateValue)(value)
-        : translateValue(value),
+      value: _.isArray(value.value)
+        ? { ...value, value: _.map(translateValue)(value.value) }
+        : { ...value, value: translateValue(value.value) },
     };
   } else {
     return field;

package/src/components/FieldGroupSegment.js

@@ -22,7 +22,7 @@ export const FieldGroupSegment = ({
             key={i}
             onFieldChange={onFieldChange}
             name={field.name}
-            fields={field.value}
+            fields={field.value.value}
             prevFields={fields}
           />
         ) : (
@@ -35,7 +35,11 @@ export const FieldGroupSegment = ({
             fields={fields}
             isModification={isModification}
             key={i}
-            onChange={onFieldChange}
+            onChange={
+              _.includes(field.name)(noTranslatableFields)
+                ? () => false
+                : onFieldChange
+            }
           />
         )
       )}

package/src/components/OriginLabel.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import PropTypes from "prop-types";
+
+import { Icon } from "semantic-ui-react";
+
+const OriginLabel = ({ origin }) => {
+  const { formatMessage } = useIntl();
+
+  const icon = formatMessage({
+    id: `template.field.origin.${origin}.icon`,
+    defaultMessage: "none",
+  }).replace("none", "");
+  const label = formatMessage({
+    id: `template.field.origin.${origin}.label`,
+    defaultMessage: "none",
+  }).replace("none", "");
+
+  return icon || label ? (
+    <span
+      title={`Generated by ${origin}`}
+      className={`originLabel ${origin}Label`}
+    >
+      {icon && <Icon name={icon} />}
+      {label && <span>{label}</span>}
+    </span>
+  ) : null;
+};
+
+OriginLabel.propTypes = {
+  origin: PropTypes.string,
+};
+
+export default OriginLabel;

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

@@ -6,7 +6,7 @@ describe("<DynamicFieldValue />", () => {
   it("matches the latest snapshot", () => {
     const props = {
       label: "label",
-      value: "value",
+      value: { value: "value", origin: "user" },
       type: "string",
       values: null,
       widget: "text",
@@ -19,7 +19,7 @@ describe("<DynamicFieldValue />", () => {
     const props = {
       isChanged: true,
       label: "label",
-      value: "value",
+      value: { value: "value", origin: "user" },
       type: "string",
       values: null,
       widget: "text",

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

@@ -114,7 +114,7 @@ describe("<DynamicForm />", () => {
           fields: [
             {
               name: "test",
-              default: { 1: ["a"] },
+              default: { value: { 1: ["a"] }, origin: "user" },
               values: {
                 domain: { 1: ["a", "b", "c"] },
               },
@@ -123,6 +123,9 @@ describe("<DynamicForm />", () => {
         },
       ],
     };
+    const content = {
+      test: { value: "a", origin: "user" },
+    };
     const props = {
       applyTemplate,
       onChange,

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

@@ -9,24 +9,24 @@ describe("<FieldGroupDetail />", () => {
       fields: [
         {
           cardinality: "?",
-          default: "",
+          default: { value: "", origin: "default" },
           label: "foo field",
           name: "foo_field",
           type: "string",
           values: null,
           widget: "text",
-          value: "foo value",
+          value: { value: "foo value", origin: "user" },
           required: false,
         },
         {
           cardinality: "?",
-          default: "",
+          default: { value: "", origin: "default" },
           label: "bar field",
           name: "bar_field",
           type: "string",
           values: null,
           widget: "number",
-          value: 25,
+          value: { value: 25, origin: "user" },
           required: false,
         },
       ],
@@ -42,24 +42,24 @@ describe("<FieldGroupDetail />", () => {
       fields: [
         {
           cardinality: "?",
-          default: "",
+          default: { value: "", origin: "default" },
           label: "foo field",
           name: "foo_field",
           type: "string",
           values: null,
           widget: "text",
-          value: "foo value",
+          value: { value: "foo value", origin: "user" },
           required: false,
         },
         {
           cardinality: "?",
-          default: "",
+          default: { value: "", origin: "default" },
           label: "bar field",
           name: "bar_field",
           type: "string",
           values: null,
           widget: "number",
-          value: 25,
+          value: { value: 25, origin: "user" },
           required: false,
         },
       ],
@@ -75,24 +75,24 @@ describe("<FieldGroupDetail />", () => {
       fields: [
         {
           cardinality: "?",
-          default: "",
+          default: { value: "", origin: "default" },
           label: "foo field",
           name: "foo_field",
           type: "string",
           values: null,
           widget: "text",
-          value: "foo value",
+          value: { value: "foo value", origin: "user" },
           required: false,
         },
         {
           cardinality: "?",
-          default: "",
+          default: { value: "", origin: "default" },
           label: "bar field",
           name: "bar_field",
           type: "string",
           values: null,
           widget: "number",
-          value: 25,
+          value: { value: 25, origin: "user" },
           required: false,
         },
       ],

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

@@ -70,7 +70,7 @@ describe("<SelectableDynamicForm />", () => {
       const input = container.querySelector('[name="field1"]');
       userEvent.type(input, "A");
       expect(onChange).toHaveBeenCalledWith({
-        content: { field1: "A" },
+        content: { field1: { value: "A", origin: "user" } },
         valid: [],
       });
     });

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

@@ -33,7 +33,7 @@ exports[`<EditableDynamicFieldValue /> matches the latest snapshot 1`] = `
                 <input
                   name="name"
                   type="text"
-                  value="value"
+                  value=""
                 />
               </div>
             </div>
@@ -85,7 +85,7 @@ exports[`<EditableDynamicFieldValue /> matches the latest snapshot 1`] = `
               <input
                 name="name"
                 type="text"
-                value="value"
+                value=""
               />
             </div>
           </div>

package/src/components/widgets/DynamicField.js

@@ -3,6 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Form, Icon, Popup, Label } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
+import OriginLabel from "../OriginLabel";
 import DateTimeField from "./DateTimeField";
 import CheckboxField from "./CheckboxField";
 import ColorPickerField from "./ColorPickerField";
@@ -72,7 +73,7 @@ export const DynamicField = ({
     label,
     cardinality,
     description,
-    value,
+    value: valueAndOrigin,
     editable = true,
     disabled = false,
     ...fieldProps
@@ -80,71 +81,79 @@ export const DynamicField = ({
   isModification,
   onChange,
   scope,
-}) => (
-  <Form.Field
-    disabled={(!editable && isModification) || disabled}
-    data-testid="form-field"
-  >
-    <label>
-      {(label && fieldProps.type != "hierarchy") ||
-      (fieldProps.type == "hierarchy" &&
-        fieldProps.values.hierarchy.min_depth == 0) ? (
-        <FormattedMessage id={`fields.${label}`} defaultMessage={label} />
-      ) : null}
-      {label &&
-      fieldProps.type == "hierarchy" &&
-      fieldProps.values.hierarchy.min_depth > 0 ? (
-        <>
+}) => {
+  const { value, origin } = valueAndOrigin || {
+    value: null,
+    origin: "default",
+  };
+  return (
+    <Form.Field
+      disabled={(!editable && isModification) || disabled}
+      data-testid="form-field"
+    >
+      <label>
+        {(label && fieldProps.type != "hierarchy") ||
+        (fieldProps.type == "hierarchy" &&
+          (fieldProps.values.hierarchy.min_depth == 0 ||
+            !fieldProps.values.hierarchy.min_depth)) ? (
           <FormattedMessage id={`fields.${label}`} defaultMessage={label} />
+        ) : null}
+        {label &&
+        fieldProps.type == "hierarchy" &&
+        fieldProps.values.hierarchy.min_depth > 0 ? (
+          <>
+            <FormattedMessage id={`fields.${label}`} defaultMessage={label} />
+            <Label pointing="left">
+              <FormattedMessage
+                id="hierarchy.selectable.mindepth"
+                values={{ depth: fieldProps.values.hierarchy.min_depth }}
+              />
+            </Label>
+          </>
+        ) : null}
+        {fieldProps?.required && (
+          <span
+            style={{
+              color: "#D95C5C",
+              marginLeft: "3px",
+            }}
+          >
+            *
+          </span>
+        )}
+        <OriginLabel origin={origin} />
+        {description && (
+          <Popup
+            trigger={
+              <Icon
+                style={{
+                  cursor: "pointer",
+                  marginLeft: "5px",
+                }}
+                name="question circle outline"
+              />
+            }
+            content={description}
+            on="click"
+            hideOnScroll
+          />
+        )}
+        {fieldProps?.required && isNullOrEmpty(value) ? (
           <Label pointing="left">
-            <FormattedMessage
-              id="hierarchy.selectable.mindepth"
-              values={{ depth: fieldProps.values.hierarchy.min_depth }}
-            />
+            <FormattedMessage id="template.form.validation.empty_required" />
           </Label>
-        </>
-      ) : null}
-      {fieldProps?.required && (
-        <span
-          style={{
-            color: "#D95C5C",
-            marginLeft: "3px",
-          }}
-        >
-          *
-        </span>
-      )}
-      {description && (
-        <Popup
-          trigger={
-            <Icon
-              style={{
-                cursor: "pointer",
-                marginLeft: "5px",
-              }}
-              name="question circle outline"
-            />
-          }
-          content={description}
-          on="click"
-          hideOnScroll
-        />
-      )}
-      {fieldProps?.required && isNullOrEmpty(value) ? (
-        <Label pointing="left">
-          <FormattedMessage id="template.form.validation.empty_required" />
-        </Label>
-      ) : null}
-    </label>
+        ) : null}
+      </label>
 
-    <FieldByWidget
-      field={{ ...fieldProps, value, cardinality }}
-      onChange={onChange}
-      scope={scope}
-      widget={_.prop("widget")(fieldProps)}
-    />
-  </Form.Field>
-);
+      <FieldByWidget
+        field={{ ...fieldProps, value, cardinality }}
+        onChange={onChange}
+        scope={scope}
+        widget={_.prop("widget")(fieldProps)}
+      />
+    </Form.Field>
+  );
+};
 
 DynamicField.propTypes = {
   field: PropTypes.object.isRequired,

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

@@ -6,6 +6,8 @@ import { DynamicField } from "../DynamicField";
 const onChange = jest.fn();
 
 describe("<DynamicField />", () => {
+  const defaultValue = { value: "", origin: "user" };
+
   it("matches the latest snapshot (radio widget)", () => {
     const parsedValues = [
       {
@@ -21,74 +23,84 @@ describe("<DynamicField />", () => {
         text: "c",
       },
     ];
-    const props = { field: { widget: "radio", parsedValues }, onChange };
+    const props = {
+      field: { widget: "radio", parsedValues, ...defaultValue },
+      onChange,
+    };
     const { container } = render(<DynamicField {...props} />);
     expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (checkbox widget)", () => {
-    const props = { field: { widget: "checkbox" }, onChange };
+    const props = { field: { widget: "checkbox", ...defaultValue }, onChange };
     const { container } = render(<DynamicField {...props} />);
     expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (dropdown widget)", () => {
-    const props = { field: { widget: "dropdown" }, onChange };
+    const props = { field: { widget: "dropdown", ...defaultValue }, onChange };
     const { container } = render(<DynamicField {...props} />);
     expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (textarea widget)", () => {
-    const props = { field: { widget: "textarea" }, onChange };
+    const props = { field: { widget: "textarea", ...defaultValue }, onChange };
     const { container } = render(<DynamicField {...props} />);
     expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (color_picker widget)", () => {
-    const props = { field: { widget: "color_picker" }, onChange };
+    const props = {
+      field: { widget: "color_picker", ...defaultValue },
+      onChange,
+    };
     const { container } = render(<DynamicField {...props} />);
     expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (pair_list widget)", () => {
-    const props = { field: { widget: "pair_list" }, onChange };
+    const props = { field: { widget: "pair_list", ...defaultValue }, onChange };
     const { container } = render(<DynamicField {...props} />);
     expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (image widget)", () => {
-    const props = { field: { widget: "image" }, onChange };
+    const props = { field: { widget: "image", ...defaultValue }, onChange };
     const { container } = render(<DynamicField {...props} />);
     expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (number widget)", () => {
-    const props = { field: { widget: "number" }, onChange };
+    const props = { field: { widget: "number", ...defaultValue }, onChange };
     const { container } = render(<DynamicField {...props} />);
     expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (date widget)", () => {
-    const props = { field: { widget: "date" }, onChange };
+    const props = { field: { widget: "date", ...defaultValue }, onChange };
     const { container } = render(<DynamicField {...props} />);
     expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (datetime widget)", () => {
-    const props = { field: { widget: "datetime" }, onChange };
+    const props = { field: { widget: "datetime", ...defaultValue }, onChange };
     const { container } = render(<DynamicField {...props} />);
     expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (default widget)", () => {
-    const props = { field: { widget: "foo" }, onChange };
+    const props = { field: { widget: "foo", ...defaultValue }, onChange };
     const { container } = render(<DynamicField {...props} />);
     expect(container).toMatchSnapshot();
   });
 
   it("editable: false enable the form field if is not modification", () => {
     const props = {
-      field: { widget: "string", value: "input_placeholder", editable: false },
+      field: {
+        widget: "string",
+        value: { value: "input_placeholder", origin: "ai" },
+        editable: false,
+      },
       onChange,
       isModification: false,
     };
@@ -102,7 +114,11 @@ describe("<DynamicField />", () => {
 
   it("editable: false disables the form field if is a modification", () => {
     const props = {
-      field: { widget: "string", value: "input_placeholder", editable: false },
+      field: {
+        widget: "string",
+        value: { value: "input_placeholder", origin: "user" },
+        editable: false,
+      },
       onChange,
       isModification: true,
     };
@@ -116,7 +132,11 @@ describe("<DynamicField />", () => {
 
   it("editable: true enables the form field if not a modification", () => {
     const props = {
-      field: { widget: "string", value: "input_placeholder", editable: true },
+      field: {
+        widget: "string",
+        value: { value: "input_placeholder", origin: "user" },
+        editable: true,
+      },
       onChange,
       isModification: false,
     };

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

@@ -16,4 +16,52 @@ describe("<HierarchyDropdown />", () => {
     const { container } = render(<HierarchyDropdown {...props} />);
     expect(container).toMatchSnapshot();
   });
+
+  it("matches the latest snapshot (min-depth 0)", async () => {
+    const missingMinDepthProps = {
+      field: {
+        name: "foo",
+        cardinality: "*",
+        value: "",
+        values: { hierarchy: { id: 50, min_depth: 0 } },
+      },
+      onChange: jest.fn(),
+    };
+    const { container } = render(
+      <HierarchyDropdown {...missingMinDepthProps} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot (min-depth 2)", async () => {
+    const missingMinDepthProps = {
+      field: {
+        name: "foo",
+        cardinality: "*",
+        value: "",
+        values: { hierarchy: { id: 50, min_depth: 2 } },
+      },
+      onChange: jest.fn(),
+    };
+    const { container } = render(
+      <HierarchyDropdown {...missingMinDepthProps} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot (missing min-depth)", async () => {
+    const missingMinDepthProps = {
+      field: {
+        name: "foo",
+        cardinality: "*",
+        value: "",
+        values: { hierarchy: { id: 50 } },
+      },
+      onChange: jest.fn(),
+    };
+    const { container } = render(
+      <HierarchyDropdown {...missingMinDepthProps} />
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

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

@@ -20,9 +20,8 @@ describe("<HierarchyPreview />", () => {
   });
 
   it("show tooltip", async () => {
-    const { getByText, debug } = render(<HierarchyPreview {...props} />);
+    const { getByText } = render(<HierarchyPreview {...props} />);
     userEvent.hover(await getByText("xyz"));
     await waitFor(() => expect(getByText("baz")).toBeInTheDocument());
-    debug();
   });
 });