@truedat/df 4.37.5 → 4.38.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.38.2]
+
+### Added
+
+- [TD-2511] DynamicFormViewer support for editing individual fields
+
 ## [4.35.6] 2022-01-04
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "4.37.5",
+  "version": "4.38.3",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -30,7 +30,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.34.0",
+    "@truedat/test": "4.38.3",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -80,8 +80,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.37.5",
-    "@truedat/core": "4.37.5",
+    "@truedat/auth": "4.38.3",
+    "@truedat/core": "4.38.3",
     "axios": "^0.19.2",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
@@ -100,5 +100,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "98ff8669e99824ef1bdbd3d12035e6371029e4ca"
+  "gitHead": "0ad3a7fe5d8d09b9c5e6e7007d8298748f6677fe"
 }

package/src/components/DynamicFieldValue.js

@@ -0,0 +1,64 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Icon, List, Container } from "semantic-ui-react";
+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" ? (
+          "*****"
+        ) : (
+          <FieldViewerValue
+            value={value}
+            type={type}
+            values={values}
+            widget={widget}
+          />
+        )}
+      </List.Description>
+    </List.Item>
+  );
+};
+
+DynamicFieldValue.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.any,
+  type: PropTypes.string,
+  values: PropTypes.any,
+  widget: PropTypes.string,
+};
+
+export default DynamicFieldValue;

package/src/components/DynamicForm.js

@@ -3,19 +3,8 @@ import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { makeGetApplyTemplate, makeGetTemplate } from "../selectors";
-import { enrichRequired } from "../utils";
+import { parseGroups } from "../utils";
 import FieldGroupSegment from "./FieldGroupSegment";
-const hasDependentKeys = (field) =>
-  !_.isNil(_.path("depends.to_be")(field)) &&
-  !_.isNil(_.path("depends.on")(field));
-
-const checkDependency = (field, content) => {
-  const on = _.prop(_.path("depends.on")(field))(content);
-  const to_be = _.path("depends.to_be")(field);
-  return _.isArray(on)
-    ? _.some((d) => to_be.includes(d))(on)
-    : to_be.includes(on);
-};
 
 export const DynamicForm = ({
   applyTemplate,
@@ -51,61 +40,12 @@ export const DynamicForm = ({
     onChange(newContent, {});
   };
 
-  const stringToValueTextList = (values) =>
-    _.map((v) => ({ value: v, text: v }))(values);
-
-  const parseValues = (field) => {
-    // FIXME: Refactor this function
-    const value = content[field.name];
-    if (field.values) {
-      if ("switch" in field.values) {
-        const values =
-          field.values.switch.values[content[field.values.switch.on]];
-        const parsed_values = stringToValueTextList(values);
-        return { ...field, value, parsed_values };
-      } else if ("fixed" in field.values) {
-        const parsed_values = stringToValueTextList(field.values.fixed);
-        return { ...field, value, parsed_values };
-      } else if ("fixed_tuple" in field.values) {
-        const parsed_values = field.values.fixed_tuple;
-        return { ...field, value, parsed_values };
-      } else if ("role_users" in field.values) {
-        const values = _.isArray(field.values.processed_users)
-          ? field.values.processed_users
-          : [];
-        const parsed_values = stringToValueTextList(values);
-        return { ...field, value, parsed_values };
-      } else if ("domain" in field.values) {
-        const values = _.propOr(
-          [],
-          _.toString(selectedDomain?.id)
-        )(field.values.domain);
-        const parsed_values = stringToValueTextList(values);
-        return { ...field, value, parsed_values };
-      }
-    }
-
-    return { ...field, value };
-  };
-
-  const parsedGroups = _.flow(
-    _.map((group) => {
-      const fields = _.flow(
-        _.filter((field) => !_.includes(fieldsToOmit)(field.name)),
-        _.filter(
-          (field) =>
-            (!("depends" in field) ||
-              (hasDependentKeys(field) && checkDependency(field, content))) &&
-            (!(field.values && "switch" in field.values) ||
-              content[field.values.switch.on] in field.values.switch.values)
-        ),
-        _.map(parseValues),
-        _.map((field) => enrichRequired(field, content))
-      )(group.fields);
-      return { ...group, fields };
-    }),
-    _.filter(({ fields }) => _.negate(_.isEmpty)(fields))
-  )(template.content);
+  const parsedGroups = parseGroups(
+    template,
+    content,
+    fieldsToOmit,
+    selectedDomain
+  );
 
   return (
     <>

package/src/components/DynamicFormViewer.js

@@ -3,21 +3,15 @@ import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Message } from "semantic-ui-react";
+import { parseGroups } from "../utils";
 import FieldGroupDetail from "./FieldGroupDetail";
 
-const hasDependentKeys = (field) =>
-  !_.isNil(_.path("depends.to_be")(field)) &&
-  !_.isNil(_.path("depends.on")(field));
-
-const checkDependency = (field, content) => {
-  const on = _.prop(_.path("depends.on")(field))(content);
-  const to_be = _.path("depends.to_be")(field);
-  return _.isArray(on)
-    ? _.some((d) => to_be.includes(d))(on)
-    : to_be.includes(on);
-};
-
-export const DynamicFormViewer = ({ template, content, boxLayout }) => {
+export const DynamicFormViewer = ({
+  template,
+  content,
+  boxLayout,
+  editFunctions,
+}) => {
   if (!template)
     return (
       <Message negative>
@@ -27,22 +21,7 @@ export const DynamicFormViewer = ({ template, content, boxLayout }) => {
       </Message>
     );
 
-  const parsedGroups = _.flow(
-    _.map((group) => {
-      const fields = _.flow(
-        _.filter(
-          (field) =>
-            (!("depends" in field) ||
-              (hasDependentKeys(field) && checkDependency(field, content))) &&
-            (!(field.values && "switch" in field.values) ||
-              content[field.values.switch.on] in field.values.switch.values)
-        ),
-        _.map((field) => ({ ...field, value: content[field.name] }))
-      )(group.fields);
-      return { ...group, fields };
-    }),
-    _.filter(({ fields }) => _.negate(_.isEmpty)(fields))
-  )(template.content);
+  const parsedGroups = parseGroups(template, content);
 
   return (
     <>
@@ -52,6 +31,7 @@ export const DynamicFormViewer = ({ template, content, boxLayout }) => {
           name={name}
           fields={fields}
           boxLayout={boxLayout}
+          editFunctions={editFunctions}
         />
       ))}
     </>
@@ -62,6 +42,7 @@ DynamicFormViewer.propTypes = {
   template: PropTypes.object,
   content: PropTypes.object,
   boxLayout: PropTypes.bool,
+  editFunctions: PropTypes.func,
 };
 
 export default DynamicFormViewer;

package/src/components/EditableDynamicFieldValue.js

@@ -0,0 +1,137 @@
+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();
+  const [updatedFailed, setUpdateFailed] = useState(false);
+  const { label, name, value, type, values, widget, isSecret, editFunctions } =
+    field;
+  const {
+    onChange,
+    onCancel,
+    onSubmit,
+    editingField,
+    setEditingField,
+    updateStatus,
+  } = editFunctions;
+
+  useEffect(() => {
+    if (editingField !== name) return;
+    switch (updateStatus) {
+      case "success":
+        setEditingField(null);
+        break;
+      case "fail":
+        setUpdateFailed(true);
+        break;
+      case "updating":
+        setUpdateFailed(false);
+    }
+  }, [editingField, name, updateStatus]);
+
+  const handleCancel = () => {
+    setEditingField(null);
+    onCancel();
+  };
+  const handleSubmit = () => {
+    onSubmit(name);
+  };
+  return (
+    <List.Item>
+      {!editingField ? (
+        <List.Header
+          className="editable-dynamic-field-header"
+          onClick={() => setEditingField(name)}
+        >
+          {label}
+          <Icon name={"pencil alternate"} />
+        </List.Header>
+      ) : (
+        <List.Header className="dynamic-field-header">{label}</List.Header>
+      )}
+
+      <List.Description>
+        {editingField === name ? (
+          <>
+            <DynamicField onChange={onChange} field={field} />
+            <Container className="editable-dynamic-field-buttons">
+              <Button
+                className={
+                  updatedFailed ? "editable-dynamic-field-button-shake" : ""
+                }
+                onClick={handleSubmit}
+                positive
+                icon
+                size="mini"
+                loading={updateStatus === "updating"}
+              >
+                {formatMessage({ id: "template.field.action.save" })}
+              </Button>
+              <Button
+                onClick={handleCancel}
+                negative
+                icon
+                size="mini"
+                disabled={updateStatus === "updating"}
+              >
+                {formatMessage({ id: "template.field.action.cancel" })}
+              </Button>
+            </Container>
+          </>
+        ) : _.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" ? (
+          "*****"
+        ) : (
+          <FieldViewerValue
+            value={value}
+            type={type}
+            values={values}
+            widget={widget}
+          />
+        )}
+      </List.Description>
+    </List.Item>
+  );
+};
+
+EditableDynamicFieldValue.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.any,
+  type: PropTypes.string,
+  values: PropTypes.any,
+  widget: PropTypes.string,
+  editFunctions: PropTypes.object,
+};
+
+export default EditableDynamicFieldValue;

package/src/components/FieldGroupDetail.js

@@ -1,98 +1,11 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import {
-  Divider,
-  Icon,
-  Label,
-  List,
-  Button,
-  Table,
-  Segment,
-} from "semantic-ui-react";
-import DomainPreview from "./widgets/DomainPreview";
-import FieldGroupCopy from "./FieldGroupCopy";
-import ImagePreview from "./widgets/ImagePreview";
-import SystemPreview from "./widgets/SystemPreview";
+import { Divider, List, Segment } from "semantic-ui-react";
+import DynamicFieldValue from "./DynamicFieldValue";
+import EditableDynamicFieldValue from "./EditableDynamicFieldValue";
 import "../styles/fieldGroupDetail.less";
 
-const RichTextEditor = React.lazy(() =>
-  import("@truedat/core/components/RichTextEditor")
-);
-
-const ValueRenderByType = ({ value, type, multiple, values, widget }) => {
-  switch (type) {
-    case "url":
-      return (
-        <Button compact href={value.url_value} target="_blank">
-          {value.url_name}
-        </Button>
-      );
-    case "enriched_text":
-      return <RichTextEditor readOnly value={value} />;
-    case "table":
-      const { table_columns } = values;
-      return (
-        <Table style={{ marginTop: "10px" }} celled striped compact fixed>
-          <Table.Header>
-            <Table.Row>
-              {table_columns.map(({ name }, i) => (
-                <Table.HeaderCell key={i}>{name}</Table.HeaderCell>
-              ))}
-            </Table.Row>
-          </Table.Header>
-
-          <Table.Body>
-            {value.map((row, i) => (
-              <Table.Row key={i}>
-                {table_columns.map(({ name }, i) => (
-                  <Table.Cell key={i}>{row[name]}</Table.Cell>
-                ))}
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-      );
-    case "image":
-      return <ImagePreview value={value} />;
-    case "system":
-      return <SystemPreview value={value} />;
-    case "domain":
-      return <DomainPreview value={value} />;
-    case "copy":
-      return <FieldGroupCopy value={value} />;
-    case "string":
-    case "user":
-    case "number":
-    case "date":
-    case "datetime":
-    default:
-      if (multiple) {
-        return <Label>{value}</Label>;
-      }
-      return (
-        <div
-          className={[
-            "default-value",
-            widget === "identifier" ? "identifier-value" : "",
-          ]
-            .join(" ")
-            .trim()}
-        >
-          {value}
-        </div>
-      );
-  }
-};
-
-ValueRenderByType.propTypes = {
-  value: PropTypes.any,
-  type: PropTypes.string,
-  values: PropTypes.any,
-  multiple: PropTypes.bool,
-  widget: PropTypes.string,
-};
-
 const parseField = (field) => {
   const { value, values } = field;
   if (_.has("fixed_tuple")(values)) {
@@ -114,60 +27,22 @@ const parseField = (field) => {
   }
 };
 
-const DynamicFieldValue = ({ label, value, type, values, widget }) => {
-  return (
-    <List.Item>
-      <List.Header className="dynamic-field-header">{label}</List.Header>
-      <List.Description>
-        {_.isNil(value) || (!_.isNumber(value) && _.isEmpty(value)) ? (
-          <Icon name="minus" color="grey" />
-        ) : _.isArray(value) ? (
-          type == "table" ? (
-            <ValueRenderByType value={value} type={type} values={values} />
-          ) : type == "system" ? (
-            <SystemPreview value={value} />
-          ) : (
-            _.map.convert({ cap: false })((v, i) => (
-              <ValueRenderByType
-                key={i}
-                value={v}
-                type={type}
-                multiple
-                values={values}
-              />
-            ))(value)
-          )
-        ) : widget === "password" ? (
-          "*****"
-        ) : (
-          <ValueRenderByType
-            value={value}
-            type={type}
-            values={values}
-            widget={widget}
-          />
-        )}
-      </List.Description>
-    </List.Item>
-  );
-};
-
-DynamicFieldValue.propTypes = {
-  label: PropTypes.string,
-  value: PropTypes.any,
-  type: PropTypes.string,
-  values: PropTypes.any,
-  widget: PropTypes.string,
-};
-
-export const FieldGroupDetail = ({ name, fields, boxLayout }) =>
-  boxLayout ? (
+export const FieldGroupDetail = ({
+  name,
+  fields,
+  boxLayout,
+  editFunctions,
+}) => {
+  const FieldComponent = editFunctions
+    ? EditableDynamicFieldValue
+    : DynamicFieldValue;
+  return boxLayout ? (
     <>
       <Segment>
         {name && name !== "undefined" && <h4>{name}</h4>}
         <List>
           {fields.map(parseField).map((f, i) => (
-            <DynamicFieldValue key={i} {...f} />
+            <FieldComponent key={i} {...f} editFunctions={editFunctions} />
           ))}
         </List>
       </Segment>
@@ -181,16 +56,17 @@ export const FieldGroupDetail = ({ name, fields, boxLayout }) =>
       )}
       <List size="big" relaxed="very">
         {fields.map(parseField).map((f, i) => (
-          <DynamicFieldValue key={i} {...f} />
+          <FieldComponent key={i} {...f} editFunctions={editFunctions} />
         ))}
       </List>
     </>
   );
-
+};
 FieldGroupDetail.propTypes = {
   name: PropTypes.string,
   fields: PropTypes.array,
   boxLayout: PropTypes.bool,
+  editFunctions: PropTypes.func,
 };
 
 export default FieldGroupDetail;

package/src/components/FieldViewerValue.js

@@ -0,0 +1,88 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Label, Button, Table } from "semantic-ui-react";
+import DomainPreview from "./widgets/DomainPreview";
+import FieldGroupCopy from "./FieldGroupCopy";
+import ImagePreview from "./widgets/ImagePreview";
+import SystemPreview from "./widgets/SystemPreview";
+import "../styles/fieldGroupDetail.less";
+
+const RichTextEditor = React.lazy(() =>
+  import("@truedat/core/components/RichTextEditor")
+);
+
+export const FieldViewerValue = ({ value, type, multiple, values, widget }) => {
+  switch (type) {
+    case "url":
+      return (
+        <Button compact href={value.url_value} target="_blank">
+          {value.url_name}
+        </Button>
+      );
+    case "enriched_text":
+      return <RichTextEditor readOnly value={value} />;
+    case "table":
+      const { table_columns } = values;
+      return (
+        <Table style={{ marginTop: "10px" }} celled striped compact fixed>
+          <Table.Header>
+            <Table.Row>
+              {table_columns.map(({ name }, i) => (
+                <Table.HeaderCell key={i}>{name}</Table.HeaderCell>
+              ))}
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {value.map((row, i) => (
+              <Table.Row key={i}>
+                {table_columns.map(({ name }, i) => (
+                  <Table.Cell key={i}>{row[name]}</Table.Cell>
+                ))}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      );
+    case "image":
+      return <ImagePreview value={value} />;
+    case "system":
+      return <SystemPreview value={value} />;
+    case "domain":
+      return <DomainPreview value={value} />;
+    case "copy":
+      return <FieldGroupCopy value={value} />;
+    case "string":
+    case "user":
+    case "number":
+    case "date":
+    case "datetime":
+    default:
+      if (multiple) {
+        return <Label>{value}</Label>;
+      }
+      return (
+        <div
+          className={[
+            "default-value",
+            widget === "identifier" ? "identifier-value" : "",
+          ]
+            .join(" ")
+            .trim()}
+        >
+          {value}
+        </div>
+      );
+  }
+};
+
+FieldViewerValue.propTypes = {
+  value: PropTypes.any,
+  type: PropTypes.string,
+  values: PropTypes.any,
+  multiple: PropTypes.bool,
+  widget: PropTypes.string,
+};
+
+export default FieldViewerValue;