@truedat/dq 4.44.4 → 4.45.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [4.44.5] 2022-05-20
+
+### Changed
+
+- [TD-4230] Refactored components to use `SelectableDynamicForm`:
+  - `NewRuleImplementation`
+  - `RemediationForm`
+  - `RuleForm`
+  - `InformationForm`
+  - `RuleImplementationRawForm`
+
 ## [4.44.3] 2022-05-11
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.44.4",
+  "version": "4.45.1",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -22,17 +22,20 @@
     "eslint:fix": "eslint --fix src/**"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.0",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.44.4",
-    "babel-jest": "^27.0.6",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-react": "^7.17.12",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@truedat/test": "4.45.1",
+    "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-react-intl": "^5.1.18",
@@ -41,7 +44,8 @@
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.6",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "redux-saga-test-plan": "^4.0.4",
@@ -49,6 +53,8 @@
     "semantic-ui-react": "^2.0.3"
   },
   "jest": {
+    "maxWorkers": "50%",
+    "testTimeout": 10000,
     "moduleDirectories": [
       "<rootDir>/src",
       "../../node_modules"
@@ -81,15 +87,16 @@
     ]
   },
   "dependencies": {
-    "@apollo/client": "^3.4.10",
-    "@truedat/core": "4.44.4",
-    "@truedat/df": "4.44.4",
+    "@apollo/client": "^3.6.4",
+    "@truedat/core": "4.45.1",
+    "@truedat/df": "4.45.1",
     "axios": "^0.19.2",
     "graphql": "^15.5.3",
     "path-to-regexp": "^1.7.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "rc-slider": "^8.6.1",
     "react-intl": "^5.20.10",
+    "react-moment": "^1.1.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "redux": "^4.1.1",
@@ -103,5 +110,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "36fb183e1d22181e6a15b3bac2c01b39214eacdb"
+  "gitHead": "c13f37ee357bf4a5e8c8c99eb6bd0c798f468c49"
 }

package/src/components/NewRuleImplementation.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Divider, Header, Grid } from "semantic-ui-react";
@@ -7,7 +7,6 @@ import { FormattedMessage } from "react-intl";
 import { gql, useQuery } from "@apollo/client";
 import { Loading } from "@truedat/core/components";
 import { getFieldType } from "@truedat/core/services/fieldType";
-import { applyTemplate } from "@truedat/df/utils";
 import {
   createRuleImplementation,
   updateRuleImplementation,
@@ -251,7 +250,6 @@ export const NewRuleImplementation = ({
     withDefaultAlias
   )(ruleImplementationProps);
 
-  const [template, setTemplate] = useState(null);
   const [ruleImplementation, setRuleImplementation] = useState(
     edition
       ? {
@@ -411,7 +409,7 @@ export const NewRuleImplementation = ({
   };
 
   const onChange = (prop, value) =>
-    setRuleImplementation({ ...ruleImplementation, [prop]: value });
+    setRuleImplementation((prevValue) => ({ ...prevValue, [prop]: value }));
 
   const addPopulation = () => {
     const populations = _.concat(
@@ -452,28 +450,11 @@ export const NewRuleImplementation = ({
   const setImplementationRawContent = (rawContent) =>
     setRuleImplementation({ ...ruleImplementation, rawContent });
 
-  useEffect(() => {
-    if (template) {
-      onChange(
-        "dfContent",
-        applyTemplate(template)(ruleImplementation.dfContent)
-      );
-    }
-    /* eslint-disable react-hooks/exhaustive-deps */
-  }, [template]);
-
   const doSubmit = () => {
     const populations = _.reject(_.isEmpty)(ruleImplementation.populations);
     const validations = _.reject(_.isEmpty)(ruleImplementation.validations);
     const segments = _.reject(_.isEmpty)(ruleImplementation.segments);
 
-    const dfContent = _.flow(
-      _.prop("dfContent"),
-      applyTemplate(template)
-    )(ruleImplementation);
-
-    const df_name = template?.name || ruleImplementation?.dfName || null;
-
     const raw_content = _.prop("rawContent")(ruleImplementation);
     const source_id = _.prop("source_id")(raw_content);
     const source = _.find({ id: source_id })(sources);
@@ -484,8 +465,8 @@ export const NewRuleImplementation = ({
             executable: ruleImplementation.executable,
             implementation_key: ruleImplementation.implementationKey,
             implementation_type: ruleImplementation.implementationType,
-            df_name,
-            df_content: dfContent,
+            df_name: ruleImplementation?.dfName,
+            df_content: ruleImplementation?.dfContent,
             rule_id: rule ? rule.id : ruleImplementation.rule_id,
             raw_content: { ...raw_content, source },
             result_type: ruleImplementation.result_type,
@@ -501,8 +482,8 @@ export const NewRuleImplementation = ({
             segments,
             implementation_key: ruleImplementation.implementationKey,
             implementation_type: ruleImplementation.implementationType,
-            df_name,
-            df_content: dfContent,
+            df_name: ruleImplementation?.dfName,
+            df_content: ruleImplementation?.dfContent,
             rule_id: rule ? rule.id : ruleImplementation.rule_id,
             result_type: ruleImplementation.result_type,
             minimum: ruleImplementation.minimum,
@@ -554,8 +535,6 @@ export const NewRuleImplementation = ({
               onSubmit={doSubmit}
               sources={sources}
               sourcesLoading={sourcesLoading}
-              template={template}
-              setTemplate={setTemplate}
             />
           ) : (
             <RuleImplementationForm
@@ -569,9 +548,7 @@ export const NewRuleImplementation = ({
               setPopulations={setPopulations}
               setSegments={setSegments}
               setStructures={setDataset}
-              setTemplate={setTemplate}
               setValidations={setValidations}
-              template={template}
             />
           )}
         </Grid.Row>

package/src/components/RemediationForm.js

@@ -1,53 +1,37 @@
 import _ from "lodash/fp";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { applyTemplate, validateContent } from "@truedat/df/utils";
 import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
 import { Button, Form } from "semantic-ui-react";
-import { TemplateSelector } from "@truedat/core/components";
 import { createRemediation, updateRemediation } from "../routines";
 
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
+const SelectableDynamicForm = React.lazy(() =>
+  import("@truedat/df/components/SelectableDynamicForm")
 );
 
 export const RemediationForm = ({
   createRemediation,
   updateRemediation,
   remediation,
+  ruleImplementation,
   onSave,
   latestResultId,
 }) => {
   const { formatMessage } = useIntl();
-  const [template, setTemplate] = useState();
-  const [content, setContent] = useState();
+  const [dfName, setDfName] = useState(remediation?.df_name);
+  const [isValid, setIsValid] = useState();
+  const [content, setContent] = useState(remediation?.df_content || {});
   const {
     id,
     implementation_id: implementationId,
     rule_result_id: ruleResultId,
   } = useParams();
 
-  const isValidContent = _.flow(validateContent(template), _.isEmpty);
-  const isValid = _.has("name")(template) && isValidContent(content);
-
-  const handleTemplatesLoaded = ({ templates }) => {
-    const name = remediation?.df_name;
-    const template = name
-      ? _.find(_.propEq("name", name))(templates)
-      : _.size(templates) == 1
-      ? templates[0]
-      : null;
-    setTemplate(template);
-  };
-
-  const handleTemplateSelected = (e, { template }) => {
-    setTemplate(template);
-  };
-
-  const handleContentChange = (content) => {
+  const handleChange = ({ valid, content }) => {
     setContent(content);
+    setIsValid(_.isEmpty(valid));
   };
 
   const handleSubmit = () => {
@@ -58,8 +42,8 @@ export const RemediationForm = ({
     actionFunction({
       remediation: {
         ...remediation,
-        df_name: template?.name,
-        df_content: template ? applyTemplate(template)(content) : {},
+        df_name: dfName,
+        df_content: content,
       },
       id,
       implementation_id: implementationId,
@@ -68,30 +52,18 @@ export const RemediationForm = ({
     onSave();
   };
 
-  useEffect(() => {
-    const content =
-      template && remediation?.df_content
-        ? applyTemplate(template)(remediation.df_content)
-        : null;
-    setContent(content);
-  }, [remediation, template]);
-
+  const domainId = ruleImplementation?.domain_id;
   return (
     <Form aria-label="remediation-form">
-      <TemplateSelector
+      <SelectableDynamicForm
         scope="remediation"
-        selectedValue={template?.id}
-        onChange={handleTemplateSelected}
-        onLoad={handleTemplatesLoaded}
+        domainIds={_.isNil(domainId) ? null : [domainId]}
         required
+        content={content}
+        name={dfName}
+        onChange={handleChange}
+        onNameChange={setDfName}
       />
-      {template ? (
-        <DynamicForm
-          template={template}
-          onChange={handleContentChange}
-          content={content || {}}
-        />
-      ) : null}
       <Button
         primary
         disabled={!isValid}
@@ -109,10 +81,11 @@ RemediationForm.propTypes = {
   latestResultId: PropTypes.number,
   onSave: PropTypes.func,
   remediation: PropTypes.object,
+  ruleImplementation: PropTypes.object,
   updateRemediation: PropTypes.func,
 };
 
-export default connect(null, {
+export default connect(_.pick("ruleImplementation"), {
   createRemediation,
   updateRemediation,
 })(RemediationForm);

package/src/components/RemediationPlan.js

@@ -79,7 +79,7 @@ export const RemediationPlan = ({
                 primary
                 onClick={() => setIsEdit(!isEdit)}
                 content={formatMessage({
-                  id: !isEdit ? "actions.edit" : "actions.cancel",
+                  id: isEdit ? "actions.cancel" : "actions.edit",
                 })}
               />
             </div>

package/src/components/RuleFilters.js

@@ -1,13 +1,9 @@
-import React from "react";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
+import { AvailableFilters } from "@truedat/core/components";
 import { addRuleFilter, resetRuleFilters } from "../routines";
 import { getRuleAvailableFilters } from "../selectors";
 
-const AvailableFilters = React.lazy(() =>
-  import("@truedat/core/components/AvailableFilters")
-);
-
 const mapStateToProps = (state) => ({
   filters: getRuleAvailableFilters(state),
   disabled: state.ruleFiltersLoading,

package/src/components/RuleForm.js

@@ -16,9 +16,7 @@ import {
   Popup,
   Icon,
 } from "semantic-ui-react";
-import { HistoryBackButton, TemplateSelector } from "@truedat/core/components";
-import { applyTemplate } from "@truedat/df/utils";
-import { selectDomain } from "@truedat/df/routines";
+import { HistoryBackButton } from "@truedat/core/components";
 import { getDomainSelectorOptions } from "@truedat/bg/selectors";
 
 const DomainDropdownSelector = React.lazy(() =>
@@ -33,8 +31,8 @@ const ConceptSelector = React.lazy(() =>
   import("@truedat/bg/concepts/relations/components/ConceptSelector")
 );
 
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
+const SelectableDynamicForm = React.lazy(() =>
+  import("@truedat/df/components/SelectableDynamicForm")
 );
 
 export const FieldLabelWrapping = ({
@@ -96,10 +94,9 @@ export class RuleForm extends React.Component {
   };
 
   componentDidMount() {
-    const { rule, concept, selectDomain } = this.props;
+    const { rule, concept } = this.props;
     const description = rule ? _.propOr({}, "description")(rule) : {};
     if (rule) {
-      !_.isNil(rule.domain_id) && selectDomain({ id: rule.domain_id });
       this.setState({
         ...rule,
         concept: {
@@ -108,7 +105,6 @@ export class RuleForm extends React.Component {
         },
       });
     } else if (!_.isEmpty(concept)) {
-      !_.isNil(concept.domain.id) && selectDomain({ id: concept.domain.id });
       this.setState({ concept });
     }
 
@@ -119,32 +115,8 @@ export class RuleForm extends React.Component {
     this.setState({ ...rule });
   };
 
-  handleTemplateChange = (template) => {
-    const { domain_id, df_content } = this.state;
-    this.setState({
-      template,
-      df_name: template?.name || null,
-      df_content: template
-        ? applyTemplate(template)(df_content, domain_id)
-        : null,
-    });
-  };
-
-  handleTemplatesLoaded = ({ templates }) => {
-    const name = this.props.rule?.df_name;
-    const template = name
-      ? _.find(_.propEq("name", name))(templates)
-      : _.size(templates) == 1
-      ? templates[0]
-      : null;
-    this.setState({ template, templatesLoading: false });
-  };
-
-  handleTemplateSelected = (e, { template }) => {
-    this.setState({ template });
-  };
-
-  handleContentChange = (df_content) => this.setState({ df_content });
+  handleContentChange = ({ valid, content: df_content }) =>
+    this.setState({ df_content, valid });
 
   messagesInformed = (messages) => _.some(_.negate(_.isNil))(messages);
 
@@ -180,14 +152,10 @@ export class RuleForm extends React.Component {
     e.preventDefault();
     if (this.messagesInformed(this.generateValidationMessages())) return;
     const { onSubmit, match } = this.props;
-    // eslint-disable-next-line no-unused-vars
-    const { template, concept, templatesLoading, ...rule } = this.state;
-    const df_content = template
-      ? applyTemplate(template)(rule?.df_content, rule?.domain_id)
-      : null;
+    const { concept, ...rule } = this.state;
 
     onSubmit({
-      rule: { ...rule, df_content },
+      rule,
       ids: match.params,
     });
   };
@@ -202,8 +170,7 @@ export class RuleForm extends React.Component {
 
   handleDomainSelected = (e, { value }) => {
     const domain_id = value;
-    const { selectDomain, editMode } = this.props;
-    !_.isString(domain_id) && selectDomain({ id: domain_id });
+    const { editMode } = this.props;
 
     this.setState(
       editMode
@@ -241,7 +208,7 @@ export class RuleForm extends React.Component {
       isSubmitting,
       intl: { formatMessage },
     } = this.props;
-    const { template, ...rule } = this.state;
+    const { template, valid, ...rule } = this.state;
     const { domain_id } = rule;
     const { concept, domainOptions } = this.props;
     const messages = this.generateValidationMessages();
@@ -348,20 +315,17 @@ export class RuleForm extends React.Component {
               </Accordion>
             </Segment>
           )}
-          <TemplateSelector
+
+          <SelectableDynamicForm
             scope="dq"
-            selectedValue={template?.id}
-            onChange={this.handleTemplateSelected}
-            onLoad={this.handleTemplatesLoaded}
+            domainIds={_.isNil(domain_id) ? null : [domain_id]}
             required
+            content={rule.df_content}
+            name={rule.df_name}
+            onChange={this.handleContentChange}
+            onNameChange={(df_name) => this.setState({ df_name })}
           />
-          {template ? (
-            <DynamicForm
-              onChange={this.handleContentChange}
-              content={rule.df_content}
-              template={template}
-            />
-          ) : null}
+
           <div className="actions">
             <HistoryBackButton
               content={formatMessage({ id: "actions.cancel" })}
@@ -371,7 +335,7 @@ export class RuleForm extends React.Component {
               type="submit"
               primary
               loading={isSubmitting}
-              disabled={this.messagesInformed(messages)}
+              disabled={this.messagesInformed(messages) || !_.isEmpty(valid)}
               content={formatMessage({ id: "actions.save" })}
             />
           </div>
@@ -397,7 +361,6 @@ RuleForm.propTypes = {
   match: PropTypes.object,
   onSubmit: PropTypes.func.isRequired,
   rule: PropTypes.object,
-  selectDomain: PropTypes.func,
 };
 
 const mapStateToProps = (state) => ({
@@ -406,10 +369,8 @@ const mapStateToProps = (state) => ({
   domainOptions: _.pathOr(null, "conceptRulesActions.domain_ids")(state),
 });
 
-const mapDispatchToProps = { selectDomain };
-
 export default compose(
   withRouter,
   injectIntl,
-  connect(mapStateToProps, mapDispatchToProps)
+  connect(mapStateToProps)
 )(RuleForm);

package/src/components/RuleImplementationFilters.js

@@ -1,16 +1,12 @@
-import React from "react";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
+import { AvailableFilters } from "@truedat/core/components";
 import {
   addImplementationFilter,
   resetImplementationFilters,
 } from "../routines";
 import { getRuleImplementationAvailableFilters } from "../selectors";
 
-const AvailableFilters = React.lazy(() =>
-  import("@truedat/core/components/AvailableFilters")
-);
-
 const mapStateToProps = (state) => ({
   filters: getRuleImplementationAvailableFilters(state),
   disabled: state.ruleFiltersLoading,

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

@@ -1,5 +1,7 @@
 import React from "react";
+import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
+import { multipleTemplatesMock } from "@truedat/test/mocks";
 import { ExecutionForm } from "../ExecutionForm";
 
 describe("<ExecutionForm />", () => {
@@ -12,20 +14,20 @@ describe("<ExecutionForm />", () => {
     selectTemplate,
   };
   const renderOpts = {
-    messages: {
-      en: {
-        "actions.cancel": "cancel",
-        "actions.create": "create",
-        "implementation.actions.execution.confirmation.content": "content",
-        "implementations.actions.execution.confirmation.content": "content",
-        "implementations.actions.execution.confirmation.header": "header",
-        "implementations.actions.execution.confirmation.legend": "legend",
-      },
-    },
+    mocks: [multipleTemplatesMock({ scope: "qe" })],
+    fallback: "lazy",
   };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<ExecutionForm {...props} />, renderOpts);
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <ExecutionForm {...props} />,
+      renderOpts
+    );
+
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
     expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,12 +1,10 @@
-import React, { Suspense } from "react";
+import React from "react";
+import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
+import { multipleTemplatesMock } from "@truedat/test/mocks";
 import { NewRuleImplementation } from "../NewRuleImplementation";
 import { newRuleImplementationProps } from "../__test_samples__/NewRuleImplementationProps";
 
-const renderOpts = {
-  state: { ruleImplementationCreating: false },
-};
-
 describe("<NewRuleImplementation />", () => {
   const createRuleImplementation = jest.fn();
   const updateRuleImplementation = jest.fn();
@@ -18,29 +16,43 @@ describe("<NewRuleImplementation />", () => {
     updateRuleImplementation,
     sources,
   };
+  const renderOpts = {
+    mocks: [
+      multipleTemplatesMock({
+        scope: "ri",
+        domainIds: null,
+      }),
+    ],
+    state: { ruleImplementationCreating: false },
+    fallback: "lazy",
+  };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(
-      <Suspense fallback={null}>
-        <NewRuleImplementation {...props} />
-      </Suspense>,
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <NewRuleImplementation {...props} />,
       renderOpts
     );
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
     expect(container).toMatchSnapshot();
   });
 
-  it("calculate aliases when not informed", () => {
+  it("calculate aliases when not informed", async () => {
     const applyTemplate = jest.fn();
     const props = {
       ...newRuleImplementationProps,
       applyTemplate: applyTemplate,
     };
-    const { container } = render(
-      <Suspense fallback={null}>
-        <NewRuleImplementation {...props} />
-      </Suspense>,
+    const { container, queryByText } = render(
+      <NewRuleImplementation {...props} />,
       renderOpts
     );
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
     expect(container).toMatchSnapshot();
   });
 });