@truedat/dq 4.44.4 → 4.44.5

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

@@ -1,62 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RuleProperties /> matches the latest snapshot 1`] = `
-<List
-  relaxed={true}
-  size="big"
->
-  <Label
-    color="grey"
+<div>
+  <div
+    class="ui big relaxed list"
+    role="list"
+    style=""
   >
-    <MemoizedFormattedMessage
-      id="rule.props.active.undefined"
-    />
-  </Label>
-  <ListItem>
-    <ListHeader
-      as="h3"
+    <div
+      class="ui olive label"
     >
-      <MemoizedFormattedMessage
-        id="concepts.props.description"
-      />
-    </ListHeader>
-    <lazy
-      readOnly={true}
-      value={
-        Object {
-          "document": Object {
-            "data": Object {},
-            "nodes": Array [
-              Object {
-                "data": Object {},
-                "nodes": Array [
-                  Object {
-                    "marks": Array [
-                      Object {
-                        "data": Object {},
-                        "object": "text",
-                        "text": "desc1",
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-            "object": "document",
-          },
-        }
-      }
-    />
-  </ListItem>
-  <ListItem>
-    <ListHeader>
-      <MemoizedFormattedMessage
-        id="quality.domain"
-      />
-    </ListHeader>
-    <ListContent>
-      foo
-    </ListContent>
-  </ListItem>
-</List>
+      Active
+    </div>
+    <div
+      class="item"
+      role="listitem"
+    >
+      <h3
+        class="header"
+      >
+        Description
+      </h3>
+      <div>
+        <div
+          autocorrect="on"
+          data-gramm="false"
+          data-key="0"
+          data-slate-editor="true"
+          spellcheck="true"
+          style="outline: none; white-space: pre-wrap; word-wrap: break-word;"
+        >
+          <div
+            data-key="1"
+            data-slate-object="block"
+            style="position: relative;"
+          >
+            <span
+              data-key="2"
+              data-slate-object="text"
+            >
+              <span
+                data-offset-key="2:0"
+                data-slate-leaf="true"
+              >
+                <span
+                  data-slate-string="true"
+                >
+                  desc
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="item"
+      role="listitem"
+    >
+      <div
+        class="header"
+      >
+        Domain
+      </div>
+      <div
+        class="content"
+      >
+        foo
+      </div>
+    </div>
+  </div>
+</div>
 `;

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

@@ -2,7 +2,7 @@
 
 exports[`<RulesSearch /> matches the latest snapshot 1`] = `
 <Input
-  action={<Memo(Connect(Component)) />}
+  action={<Memo(Connect(AvailableFilters)) />}
   icon={
     Object {
       "link": true,

package/src/components/ruleImplementationForm/InformationForm.js

@@ -4,43 +4,30 @@ import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import { useIntl, FormattedMessage } from "react-intl";
 import { Form, Icon, Popup } from "semantic-ui-react";
-import { TemplateSelector } from "@truedat/core/components";
 import LimitsForm from "./LimitsForm";
 
 const DomainDropdownSelector = React.lazy(() =>
   import("@truedat/bg/taxonomy/components/DomainDropdownSelector")
 );
 
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
+const SelectableDynamicForm = React.lazy(() =>
+  import("@truedat/df/components/SelectableDynamicForm")
 );
 
 export const InformationForm = ({
   setImplementationKey,
   onChange,
   ruleImplementation,
-  template,
-  setTemplate,
+  setIsValid,
   rule,
 }) => {
   const { formatMessage } = useIntl();
 
-  const handleTemplatesLoaded = ({ templates }) => {
-    const name = ruleImplementation?.dfName;
-    const template = name
-      ? _.find(_.propEq("name", name))(templates)
-      : _.size(templates) == 1
-      ? templates[0]
-      : null;
-    setTemplate(template);
+  const handleContentChange = ({ content, valid }) => {
+    onChange("dfContent", content);
+    setIsValid(_.isEmpty(valid));
   };
-
-  const handleTemplateSelected = (e, { template }) => {
-    setTemplate(template);
-  };
-
-  const handleContentChange = (content) => onChange("dfContent", content);
-
+  const domainId = ruleImplementation?.domain_id || rule?.domain_id;
   return (
     <>
       <Form.Radio
@@ -86,20 +73,15 @@ export const InformationForm = ({
         </Form.Field>
       ) : null}
       <LimitsForm onChange={onChange} ruleImplementation={ruleImplementation} />
-      <TemplateSelector
+      <SelectableDynamicForm
         scope="ri"
-        selectedValue={template?.id}
-        onChange={handleTemplateSelected}
-        onLoad={handleTemplatesLoaded}
+        domainIds={_.isNil(domainId) ? null : [domainId]}
         required
+        content={ruleImplementation?.dfContent}
+        name={ruleImplementation?.dfName}
+        onChange={handleContentChange}
+        onNameChange={(dfName) => onChange("dfName", dfName)}
       />
-      {template === null ? null : (
-        <DynamicForm
-          template={template}
-          content={ruleImplementation?.dfContent}
-          onChange={handleContentChange}
-        />
-      )}
     </>
   );
 };
@@ -109,8 +91,7 @@ InformationForm.propTypes = {
   rule: PropTypes.object,
   ruleImplementation: PropTypes.object,
   setImplementationKey: PropTypes.func,
-  setTemplate: PropTypes.func,
-  template: PropTypes.object,
+  setIsValid: PropTypes.func,
 };
 
 const mapStateToProps = ({ rule }) => ({ rule });

package/src/components/ruleImplementationForm/RuleImplementationForm.js

@@ -13,7 +13,6 @@ import {
   Step,
   Segment,
 } from "semantic-ui-react";
-import { validateContent } from "@truedat/df/utils";
 import PopulationForm from "./PopulationForm";
 import DatasetForm from "./DatasetForm";
 import ValidationsForm from "./ValidationsForm";
@@ -52,9 +51,7 @@ export const RuleImplementationForm = ({
   setPopulations,
   setSegments,
   setStructures,
-  setTemplate,
   setValidations,
-  template,
 }) => {
   const { formatMessage } = useIntl();
   const history = useHistory();
@@ -76,18 +73,20 @@ export const RuleImplementationForm = ({
 
   const [activeStep, setActiveStep] = useState("information");
   const [selector, setSelector] = useState();
+  const [isContentValid, setContentIsValid] = useState();
 
   const {
     dataset: structures,
     populations,
     validations,
-    dfContent,
+    dfName,
     segments,
   } = ruleImplementation || {};
 
   const validInformation = () =>
-    template &&
-    _.size(validateContent(template)(dfContent)) == 0 &&
+    dfName &&
+    !_.isEmpty(dfName) &&
+    isContentValid &&
     (!_.isEmpty(rule) || _.isNumber(_.prop("domain_id")(ruleImplementation))) &&
     areLimitsValid(ruleImplementation);
 
@@ -242,8 +241,7 @@ export const RuleImplementationForm = ({
                 onChange,
                 ruleImplementation,
                 setImplementationKey,
-                setTemplate,
-                template,
+                setIsValid: setContentIsValid,
               }}
             />
           )}
@@ -358,9 +356,7 @@ RuleImplementationForm.propTypes = {
   setPopulations: PropTypes.func,
   setSegments: PropTypes.func,
   setStructures: PropTypes.func,
-  setTemplate: PropTypes.func,
   setValidations: PropTypes.func,
-  template: PropTypes.object,
   rule: PropTypes.object,
 };
 
@@ -370,7 +366,7 @@ const mapStateToProps = ({
   userRulePermissions,
   implementationActions,
 }) => ({
-  rule: rule,
+  rule,
   isSubmitting: ruleImplementationCreating,
   authManageSegments:
     !!userRulePermissions?.manage_segments ||

package/src/components/ruleImplementationForm/RuleImplementationRawForm.js

@@ -1,18 +1,16 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState } 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 LimitsForm from "./LimitsForm";
 import { areLimitsValid } from "./limitsValidation";
 
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
+const SelectableDynamicForm = React.lazy(() =>
+  import("@truedat/df/components/SelectableDynamicForm")
 );
 
 const DomainDropdownSelector = React.lazy(() =>
@@ -47,30 +45,18 @@ export const RuleImplementationRawForm = ({
   ruleImplementation,
   setImplementationKey,
   setImplementationRawContent,
-  setTemplate,
   sources,
   sourcesLoading,
-  template = {},
 }) => {
   const { formatMessage } = useIntl();
   const history = useHistory();
+  const [isContentValid, setIsContentValid] = useState();
 
-  const handleTemplatesLoaded = ({ templates }) => {
-    const name = ruleImplementation?.dfName;
-    const template = name
-      ? _.find(_.propEq("name", name))(templates)
-      : _.size(templates) == 1
-      ? templates[0]
-      : null;
-    setTemplate(template);
+  const handleContentChange = ({ content, valid }) => {
+    onChange("dfContent", content);
+    setIsContentValid(_.isEmpty(valid));
   };
 
-  const handleTemplateSelected = (e, { template }) => {
-    setTemplate(template);
-  };
-
-  const handleContentChange = (content) => onChange("dfContent", content);
-
   const isNilOrEmpty = (propName) =>
     _.isNil(_.prop(propName)(rawContent)) ||
     _.prop(propName)(rawContent) === "";
@@ -119,9 +105,9 @@ export const RuleImplementationRawForm = ({
     return text ? text.match(re) : [];
   };
   const validInformation = () =>
-    template &&
-    !_.isEmpty(template) &&
-    _.size(validDfContent(template)(ruleImplementation?.dfContent)) == 0 &&
+    ruleImplementation?.dfName &&
+    !_.isEmpty(ruleImplementation?.dfName) &&
+    isContentValid &&
     (!_.isEmpty(rule) || _.isNumber(_.prop("domain_id")(ruleImplementation))) &&
     areLimitsValid(ruleImplementation);
 
@@ -157,6 +143,7 @@ export const RuleImplementationRawForm = ({
   const doCancel = () => history.goBack();
   const errors = getErrors();
 
+  const domainId = ruleImplementation?.domain_id || rule?.domain_id;
   return (
     <Form className="rule">
       <Form.Radio
@@ -185,26 +172,21 @@ export const RuleImplementationRawForm = ({
       {_.isEmpty(rule) && !ruleImplementation?.rule_id && (
         <Form.Field>
           <DomainDropdownSelector
-            value={ruleImplementation.domain_id}
+            value={domainId}
             onChange={(_e, { value }) => onChange("domain_id", value)}
           />
         </Form.Field>
       )}
       <LimitsForm onChange={onChange} ruleImplementation={ruleImplementation} />
-      <TemplateSelector
+      <SelectableDynamicForm
         scope="ri"
-        selectedValue={template?.id}
-        onChange={handleTemplateSelected}
-        onLoad={handleTemplatesLoaded}
+        domainIds={_.isNil(domainId) ? null : [domainId]}
         required
+        content={ruleImplementation?.dfContent}
+        name={ruleImplementation?.dfName}
+        onChange={handleContentChange}
+        onNameChange={(dfName) => onChange("dfName", dfName)}
       />
-      {template?.id ? (
-        <DynamicForm
-          template={template}
-          content={_.prop("dfContent")(ruleImplementation)}
-          onChange={handleContentChange}
-        />
-      ) : null}
       <Form.Dropdown
         label={
           <label>
@@ -252,11 +234,12 @@ export const RuleImplementationRawForm = ({
           }
         }
         label={
-          <label>
+          <label htmlFor="dataset">
             <FormattedMessage id="ruleImplementationRawForm.props.dataset" />
             <Help message="ruleImplementationRawForm.props.dataset.help"></Help>
           </label>
         }
+        id="dataset"
         name="dataset"
         onChange={(e, { value }) => onChangeImplementation("dataset", value)}
         placeholder={formatMessage({
@@ -343,10 +326,8 @@ RuleImplementationRawForm.propTypes = {
   ruleImplementation: PropTypes.object,
   setImplementationKey: PropTypes.func,
   setImplementationRawContent: PropTypes.func,
-  setTemplate: PropTypes.func,
   sources: PropTypes.array,
   sourcesLoading: PropTypes.bool,
-  template: PropTypes.object,
 };
 
 const mapStateToProps = ({ rule, ruleImplementationCreating }) => ({

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

@@ -1,19 +1,23 @@
-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 RuleImplementationForm from "../RuleImplementationForm";
 
 const renderOpts = {
+  mocks: [multipleTemplatesMock({ scope: "ri", domainIds: null })],
   state: {
     rule: {},
     implementationActions: { manage_segments: {} },
     ruleImplementationCreating: true,
   },
+  fallback: "lazy",
 };
 
 describe("<RuleImplementationForm />", () => {
   const props = {
     onSubmit: jest.fn(),
+    onChange: jest.fn(),
     ruleImplementation: {
       implementationKey: "foo",
       executable: true,
@@ -25,14 +29,14 @@ describe("<RuleImplementationForm />", () => {
 
   it("matches the latest snapshot", async () => {
     const { container, queryByText } = render(
-      <Suspense fallback="loading...">
-        <RuleImplementationForm {...props} />
-      </Suspense>,
+      <RuleImplementationForm {...props} />,
       renderOpts
     );
-    await waitFor(() => {
-      expect(queryByText(/loading/i)).not.toBeInTheDocument();
-    });
+
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
     expect(container).toMatchSnapshot();
   });
 });