@truedat/dq 4.44.0 → 4.44.3

package/src/components/ruleImplementationForm/RuleImplementationRawForm.js

@@ -1,16 +1,24 @@
 import _ from "lodash/fp";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Button, Form, Icon, Popup } from "semantic-ui-react";
+import { TemplateSelector } from "@truedat/core/components";
 import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
 import { validateContent as validDfContent } from "@truedat/df/utils";
-import { selectTemplate } from "@truedat/df/routines";
 import LimitsForm from "./LimitsForm";
 import { areLimitsValid } from "./limitsValidation";
 
+const DynamicForm = React.lazy(() =>
+  import("@truedat/df/components/DynamicForm")
+);
+
+const DomainDropdownSelector = React.lazy(() =>
+  import("@truedat/bg/taxonomy/components/DomainDropdownSelector")
+);
+
 const Help = ({ message }) => {
   const { formatMessage } = useIntl();
   return (
@@ -29,82 +37,51 @@ Help.propTypes = {
   message: PropTypes.string,
 };
 
-const TemplateSelector = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateSelector")
-);
-
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
-);
-
-const ImplementationDynamicForm = ({
-  ruleImplementation,
-  onChange,
-  selectTemplate,
-  template,
-}) => {
-  const [templateId, setTemplateId] = useState(template.id);
-
-  useEffect(() => {
-    selectTemplate({ id: templateId });
-  }, [selectTemplate, templateId]);
-
-  const handleContentChange = (content) => onChange("dfContent", content);
-  const handleTemplateSelected = (e, { value }) => setTemplateId(value);
-
-  return (
-    <>
-      <TemplateSelector
-        name="template"
-        selectedValue={_.prop("id")(template)}
-        onChange={handleTemplateSelected}
-      />
-      {template && template.id && (
-        <DynamicForm
-          content={_.prop("dfContent")(ruleImplementation)}
-          onChange={handleContentChange}
-        />
-      )}
-    </>
-  );
-};
-
-ImplementationDynamicForm.propTypes = {
-  onChange: PropTypes.func,
-  selectTemplate: PropTypes.func,
-  template: PropTypes.object,
-  ruleImplementation: PropTypes.object,
-};
-
 export const RuleImplementationRawForm = ({
-  ruleImplementation,
-  handleSubmit,
-  isSubmitting,
   implementationKey,
+  isSubmitting,
+  onChange,
+  onSubmit,
   rawContent,
+  rule,
+  ruleImplementation,
   setImplementationKey,
   setImplementationRawContent,
-  selectTemplate,
+  setTemplate,
   sources,
   sourcesLoading,
   template = {},
-  templates,
-  onChange,
 }) => {
   const { formatMessage } = useIntl();
   const history = useHistory();
 
+  const handleTemplatesLoaded = ({ templates }) => {
+    const name = ruleImplementation?.dfName;
+    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) => onChange("dfContent", content);
+
   const isNilOrEmpty = (propName) =>
     _.isNil(_.prop(propName)(rawContent)) ||
     _.prop(propName)(rawContent) === "";
 
   const isNotEmptyProp = (propName) => !isNilOrEmpty(propName);
   const hasNoErrors = (propName) =>
-    _.path(`${propName}.hasErrors`)(errors) == false;
+    _.path([propName, "hasErrors"])(errors) == false;
 
   const doSubmit = () => {
     if (isValidForm()) {
-      handleSubmit();
+      onSubmit();
     }
   };
 
@@ -145,17 +122,15 @@ export const RuleImplementationRawForm = ({
     template &&
     !_.isEmpty(template) &&
     _.size(validDfContent(template)(ruleImplementation?.dfContent)) == 0 &&
+    (!_.isEmpty(rule) || _.isNumber(_.prop("domain_id")(ruleImplementation))) &&
     areLimitsValid(ruleImplementation);
 
-  const isValidForm = () => {
-    return (
-      validInformation() &&
-      isNotEmptyProp("source_id") &&
-      (_.isEmpty(databaseOptions) || isNotEmptyProp("database")) &&
-      _.every(isNotEmptyProp)(["dataset", "validations"]) &&
-      _.every(hasNoErrors)(["dataset", "population", "validations"])
-    );
-  };
+  const isValidForm = () =>
+    validInformation() &&
+    isNotEmptyProp("source_id") &&
+    (_.isEmpty(databaseOptions) || isNotEmptyProp("database")) &&
+    _.every(isNotEmptyProp)(["dataset", "validations"]) &&
+    _.every(hasNoErrors)(["dataset", "population", "validations"]);
 
   const validateContent = (name) => {
     const invalidContent = getBannedWordsAndChars(_.prop(name)(rawContent));
@@ -173,13 +148,11 @@ export const RuleImplementationRawForm = ({
     };
   };
 
-  const getErrors = () => {
-    return {
-      dataset: validateContent("dataset"),
-      population: validateContent("population"),
-      validations: validateContent("validations"),
-    };
-  };
+  const getErrors = () => ({
+    dataset: validateContent("dataset"),
+    population: validateContent("population"),
+    validations: validateContent("validations"),
+  });
 
   const doCancel = () => history.goBack();
   const errors = getErrors();
@@ -209,16 +182,29 @@ export const RuleImplementationRawForm = ({
           value={implementationKey}
         />
       </Form.Field>
+      {_.isEmpty(rule) && !ruleImplementation?.rule_id && (
+        <Form.Field>
+          <DomainDropdownSelector
+            value={ruleImplementation.domain_id}
+            onChange={(_e, { value }) => onChange("domain_id", value)}
+          />
+        </Form.Field>
+      )}
       <LimitsForm onChange={onChange} ruleImplementation={ruleImplementation} />
-      {!_.isEmpty(templates) && (
-        <ImplementationDynamicForm
-          selectTemplate={selectTemplate}
+      <TemplateSelector
+        scope="ri"
+        selectedValue={template?.id}
+        onChange={handleTemplateSelected}
+        onLoad={handleTemplatesLoaded}
+        required
+      />
+      {template?.id ? (
+        <DynamicForm
           template={template}
-          templates={templates}
-          ruleImplementation={ruleImplementation}
-          onChange={onChange}
+          content={_.prop("dfContent")(ruleImplementation)}
+          onChange={handleContentChange}
         />
-      )}
+      ) : null}
       <Form.Dropdown
         label={
           <label>
@@ -335,7 +321,7 @@ export const RuleImplementationRawForm = ({
         primary
         loading={isSubmitting}
         onClick={() => doSubmit()}
-        content={formatMessage({ id: "actions.submit" })}
+        content={formatMessage({ id: "actions.save" })}
       />
       <Button
         content={formatMessage({ id: "actions.cancel" })}
@@ -348,32 +334,24 @@ export const RuleImplementationRawForm = ({
 };
 
 RuleImplementationRawForm.propTypes = {
-  handleSubmit: PropTypes.func.isRequired,
   implementationKey: PropTypes.string,
   isSubmitting: PropTypes.bool,
+  onChange: PropTypes.func,
+  onSubmit: PropTypes.func.isRequired,
   rawContent: PropTypes.object,
+  rule: PropTypes.object,
+  ruleImplementation: PropTypes.object,
   setImplementationKey: PropTypes.func,
   setImplementationRawContent: PropTypes.func,
-  selectTemplate: PropTypes.func,
+  setTemplate: PropTypes.func,
   sources: PropTypes.array,
   sourcesLoading: PropTypes.bool,
   template: PropTypes.object,
-  templates: PropTypes.object,
-  ruleImplementation: PropTypes.object,
-  onChange: PropTypes.func,
 };
 
-const mapStateToProps = (state) => ({
-  isSubmitting: state.ruleImplementationCreating,
-  templates: state.templates,
-  template: getTemplate(state),
+const mapStateToProps = ({ rule, ruleImplementationCreating }) => ({
+  isSubmitting: ruleImplementationCreating,
+  rule,
 });
 
-const getTemplate = ({ template, templates, ruleImplementation }) => {
-  const df_name = _.prop("df_name")(ruleImplementation);
-  return _.isEmpty(template) ? _.find({ name: df_name })(templates) : template;
-};
-
-export default connect(mapStateToProps, { selectTemplate })(
-  RuleImplementationRawForm
-);
+export default connect(mapStateToProps)(RuleImplementationRawForm);

package/src/components/ruleImplementationForm/__tests__/LimitsForm.spec.js

@@ -1,14 +1,9 @@
 import React from "react";
-import { render } from "@truedat/test/render";
 import { fireEvent } from "@testing-library/react";
+import { render } from "@truedat/test/render";
 import LimitsForm from "../LimitsForm";
-import messages from "../../../messages/en";
 
 describe("<LimitsForm />", () => {
-  const renderOpts = {
-    messages: { en: messages },
-  };
-
   it("input changes calls onChange prop", () => {
     const onChange = jest.fn();
     const props = {
@@ -20,7 +15,7 @@ describe("<LimitsForm />", () => {
       onChange,
     };
 
-    const { container } = render(<LimitsForm {...props} />, renderOpts);
+    const { container } = render(<LimitsForm {...props} />);
 
     fireEvent.change(container.querySelector("input[name=goal]"), {
       target: { name: "goal", value: "5" },
@@ -39,10 +34,7 @@ describe("<LimitsForm />", () => {
       onChange: jest.fn(),
     };
 
-    const { container, getByText } = render(
-      <LimitsForm {...props} />,
-      renderOpts
-    );
+    const { container, getByText } = render(<LimitsForm {...props} />);
     expect(container).toMatchSnapshot();
 
     const errorText = "Required field is empty";
@@ -60,10 +52,7 @@ describe("<LimitsForm />", () => {
       onChange: jest.fn(),
     };
 
-    const { container, getByText } = render(
-      <LimitsForm {...props} />,
-      renderOpts
-    );
+    const { container, getByText } = render(<LimitsForm {...props} />);
     expect(container).toMatchSnapshot();
 
     const errorText = "Invalid number format";
@@ -81,10 +70,7 @@ describe("<LimitsForm />", () => {
       onChange: jest.fn(),
     };
 
-    const { container, getByText } = render(
-      <LimitsForm {...props} />,
-      renderOpts
-    );
+    const { container, getByText } = render(<LimitsForm {...props} />);
     expect(container).toMatchSnapshot();
 
     const errorText = "Goal percentage cannot be greater than 100";
@@ -101,10 +87,7 @@ describe("<LimitsForm />", () => {
       onChange: jest.fn(),
     };
 
-    const { container, getByText } = render(
-      <LimitsForm {...props} />,
-      renderOpts
-    );
+    const { container, getByText } = render(<LimitsForm {...props} />);
     expect(container).toMatchSnapshot();
 
     expect(getByText("Goal")).toHaveTextContent(
@@ -125,10 +108,7 @@ describe("<LimitsForm />", () => {
       onChange: jest.fn(),
     };
 
-    const { container, getByText } = render(
-      <LimitsForm {...props} />,
-      renderOpts
-    );
+    const { container, getByText } = render(<LimitsForm {...props} />);
     expect(container).toMatchSnapshot();
 
     expect(getByText("Threshold")).toHaveTextContent(
@@ -146,10 +126,7 @@ describe("<LimitsForm />", () => {
       onChange: jest.fn(),
     };
 
-    const { container, getByText } = render(
-      <LimitsForm {...props} />,
-      renderOpts
-    );
+    const { container, getByText } = render(<LimitsForm {...props} />);
     expect(container).toMatchSnapshot();
 
     expect(getByText("Goal")).toHaveTextContent(
@@ -170,10 +147,7 @@ describe("<LimitsForm />", () => {
       onChange: jest.fn(),
     };
 
-    const { container, getByText } = render(
-      <LimitsForm {...props} />,
-      renderOpts
-    );
+    const { container, getByText } = render(<LimitsForm {...props} />);
     expect(container).toMatchSnapshot();
 
     expect(getByText("Goal")).toHaveTextContent(

package/src/components/ruleImplementationForm/__tests__/RuleImplementationForm.spec.js

@@ -1,63 +1,38 @@
-import React from "react";
+import React, { Suspense } from "react";
+import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
-import { intl } from "@truedat/test/intl-stub";
-import { RuleImplementationForm } from "../RuleImplementationForm";
+import RuleImplementationForm from "../RuleImplementationForm";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useHistory: () => ({ push: jest.fn() }),
-}));
+const renderOpts = {
+  state: {
+    rule: {},
+    implementationActions: { manage_segments: {} },
+    ruleImplementationCreating: true,
+  },
+};
 
 describe("<RuleImplementationForm />", () => {
-  const rule = {
-    id: 123,
-    rule_type: {
-      params: {
-        system_params: [
-          { type: "string", name: "table" },
-          { type: "string", name: "column" },
-        ],
-      },
-    },
-  };
-
-  const ruleImplementation = {
-    implementationKey: "foo",
-    executable: true,
-    result_type: "percentage",
-    goal: 20,
-    minimum: 10,
-  };
-  const handleSubmit = jest.fn();
-  const isSubmitting = false;
-  const systems = ["SYS"];
-
-  const renderOpts = {
-    messages: {
-      en: {
-        "ruleImplementation.form.tooltip.percentage.goal": "tooltip",
-        "ruleImplementation.form.tooltip.percentage.minimum": "Minimun",
-        "rule.form.validation.empty_required": "required",
-      },
-    },
-  };
   const props = {
-    rule,
-    handleSubmit,
-    isSubmitting,
-    systems,
-    ruleImplementation,
-    isSubmitting: true,
+    onSubmit: jest.fn(),
+    ruleImplementation: {
+      implementationKey: "foo",
+      executable: true,
+      result_type: "percentage",
+      goal: 20,
+      minimum: 10,
+    },
   };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(
-      <RuleImplementationForm {...props} />,
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <Suspense fallback="loading...">
+        <RuleImplementationForm {...props} />
+      </Suspense>,
       renderOpts
     );
+    await waitFor(() => {
+      expect(queryByText(/loading/i)).not.toBeInTheDocument();
+    });
     expect(container).toMatchSnapshot();
   });
 });

package/src/components/ruleImplementationForm/__tests__/RuleImplementationRawForm.spec.js

@@ -1,3 +1,4 @@
+import _ from "lodash/fp";
 import React from "react";
 import { shallow } from "enzyme";
 import { intl } from "@truedat/test/intl-stub";
@@ -13,7 +14,7 @@ jest.mock("react-router-dom", () => ({
 }));
 
 describe("<RuleImplementationRawForm />", () => {
-  const handleSubmit = jest.fn();
+  const onSubmit = jest.fn();
   const onChange = jest.fn();
   const isSubmitting = false;
   const sources = [
@@ -52,7 +53,7 @@ describe("<RuleImplementationRawForm />", () => {
       validations: "",
     },
     setImplementationRawContent: setImplementationRawContent,
-    handleSubmit,
+    onSubmit,
     isSubmitting,
     sources,
     onChange,
@@ -110,6 +111,25 @@ describe("<RuleImplementationRawForm />", () => {
     expect(databaseDropdown).toHaveLength(0);
   });
 
+  it("submit button enabled if there is valid content in form with database without rule", () => {
+    const domainProps = _.set("ruleImplementation.domain_id", 5)(props);
+    const customProps = {
+      ...domainProps,
+      rawContent: {
+        dataset: "address a on c.address_id=a.id",
+        source_id: 2,
+        database: "db2",
+        population: "",
+        validations: "a.city='MADRID'",
+      },
+      template: { id: 1 },
+      dfContent: {},
+    };
+    const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
+    const submitButton = wrapper.find("FormButton[type='submit']");
+    expect(submitButton.props().disabled).toBe(false);
+  });
+
   it("submit button enabled if there is valid content in form with database", () => {
     const customProps = {
       ...props,
@@ -122,6 +142,7 @@ describe("<RuleImplementationRawForm />", () => {
       },
       template: { id: 1 },
       dfContent: {},
+      rule: { id: 5, name: "regla" },
     };
     const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
     const submitButton = wrapper.find("FormButton[type='submit']");
@@ -177,6 +198,24 @@ describe("<RuleImplementationRawForm />", () => {
     });
   });
 
+  it("submit button enabled if there is valid content in form without rule", () => {
+    const domainProps = _.set("ruleImplementation.domain_id", 5)(props);
+    const customProps = {
+      ...domainProps,
+      rawContent: {
+        dataset: "cliente c join address a on c.address_id=a.id",
+        source_id: 1,
+        population: "",
+        validations: "a.city='MADRID'",
+      },
+      template: { id: 1 },
+      dfContent: {},
+    };
+    const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
+    const submitButton = wrapper.find("FormButton[type='submit']");
+    expect(submitButton.props().disabled).toBe(false);
+  });
+
   it("submit button enabled if there is valid content in form", () => {
     const customProps = {
       ...props,
@@ -188,6 +227,7 @@ describe("<RuleImplementationRawForm />", () => {
       },
       template: { id: 1 },
       dfContent: {},
+      rule: { id: 5, name: "regla" },
     };
     const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
     const submitButton = wrapper.find("FormButton[type='submit']");