@truedat/dq 6.8.1 → 6.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "6.8.1",
+  "version": "6.8.3",
   "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.7.1",
+    "@truedat/test": "6.8.3",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -92,8 +92,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/core": "6.8.1",
-    "@truedat/df": "6.8.1",
+    "@truedat/core": "6.8.3",
+    "@truedat/df": "6.8.3",
     "decode-uri-component": "^0.2.2",
     "graphql": "^15.5.3",
     "moment": "^2.29.4",
@@ -118,5 +118,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "974fcd9317b94e2b5b5eafe0281deeeaa58535b7"
+  "gitHead": "d3bea8cda996ea5ec5d2a0a75dfeb9a0594269d5"
 }

package/src/components/EditRule.js

@@ -8,14 +8,18 @@ import RuleForm from "./RuleForm";
 
 export const EditRule = ({ rule, updateRule }) =>
   !rule.id ? null : (
-    <Container as={Segment} text>
+    <Container as={Segment} role="form" text>
       <Header as="h2">
         <Icon name="cube" />
         <Header.Content>
           <FormattedMessage id="quality.actions.edit" />
         </Header.Content>
       </Header>
-      <RuleForm onSubmit={updateRule} rule={rule} editMode />
+      <RuleForm
+        onSubmit={updateRule}
+        rule={{ ...rule, df_content: { ...rule.dynamic_content } }}
+        editMode
+      />
     </Container>
   );
 

package/src/components/NewBasicRuleImplementation.js

@@ -27,7 +27,7 @@ export const NewBasicRuleImplementation = ({
             ? ""
             : ruleImplementationProps.implementation_key,
           dfName: ruleImplementationProps.df_name,
-          dfContent: ruleImplementationProps.df_content,
+          dfContent: ruleImplementationProps.dynamic_content,
           result_type: ruleImplementationProps.result_type,
           minimum: ruleImplementationProps.minimum,
           goal: ruleImplementationProps.goal,

package/src/components/NewRuleImplementation.js

@@ -338,7 +338,7 @@ export const NewRuleImplementation = ({
 
           rawContent: ruleImplementationProps.raw_content,
           dfName: ruleImplementationProps.df_name,
-          dfContent: ruleImplementationProps.df_content,
+          dfContent: ruleImplementationProps.dynamic_content,
           result_type: ruleImplementationProps.result_type,
           minimum: ruleImplementationProps.minimum,
           goal: ruleImplementationProps.goal,

package/src/components/RemediationForm.js

@@ -22,7 +22,7 @@ export const RemediationForm = ({
   const { formatMessage } = useIntl();
   const [dfName, setDfName] = useState(remediation?.df_name);
   const [isValid, setIsValid] = useState();
-  const [content, setContent] = useState(remediation?.df_content || {});
+  const [content, setContent] = useState(remediation?.dynamic_content || {});
   const {
     id,
     implementation_id: implementationId,

package/src/components/RemediationPlan.js

@@ -92,7 +92,7 @@ export const RemediationPlan = ({
                   template={_.find(_.propEq("name", remediation.df_name))(
                     templates
                   )}
-                  content={remediation.df_content}
+                  content={remediation.dynamic_content}
                 />
               ) : (
                 <Container className="new-remedation-container" fluid>

package/src/components/RuleForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, injectIntl } from "react-intl";
 import { connect } from "react-redux";
@@ -10,7 +10,6 @@ import {
   Button,
   Form,
   Radio,
-  Message,
   Label,
   Segment,
   Popup,
@@ -73,128 +72,111 @@ const filters = {
   current: [true],
   status: ["pending_approval", "draft", "rejected", "published"],
 };
-export class RuleForm extends React.Component {
-  state = {
+export const RuleForm = ({
+  concept,
+  editMode,
+  intl,
+  isSubmitting,
+  match,
+  onSubmit,
+  rule: ruleData,
+}) => {
+  const [valid, setValid] = useState(false);
+  const [domainsLoading, setDomainsLoading] = useState(true);
+  const [activeSelection, setActiveSelection] = useState(false);
+  const [templateName, setTemplateName] = useState("");
+  const [rule, setRule] = useState({
     active: true,
-    activeSelection: false,
     concept: null,
     domain_id: null,
-    domainsLoading: true,
+    business_concept_id: null,
     name: "",
-    description: null,
-    df_name: "",
+    description: {},
     df_content: {},
     template: null,
-  };
+  });
 
-  componentDidMount() {
-    const { rule, concept } = this.props;
-    const description = rule ? _.propOr({}, "description")(rule) : {};
-    if (rule) {
-      this.setState({
-        ...rule,
+  useEffect(() => {
+    if (ruleData) {
+      setRule({
+        ...ruleData,
         concept: {
-          name: rule?.current_business_concept_version?.name,
-          business_concept_id: rule.business_concept_id,
+          name: ruleData?.current_business_concept_version?.name,
+          business_concept_id: ruleData.business_concept_id,
         },
       });
+      setTemplateName(ruleData.df_name);
     } else if (!_.isEmpty(concept)) {
-      this.setState({
+      setRule({
+        ...rule,
         business_concept_id: concept?.business_concept_id,
         domain_id: concept?.domain?.id,
         concept,
       });
     }
+  }, [ruleData, concept]);
 
-    this.updateDescription(description);
-  }
+  const updateRule = (content) => setRule({ ...rule, ...content });
 
-  updateRule = (rule) => {
-    this.setState({ ...rule });
+  const handleContentChange = ({ valid, content }) => {
+    setRule({ ...rule, df_content: content });
+    setValid(valid);
   };
 
-  handleContentChange = ({ valid, content: df_content }) =>
-    this.setState({ df_content, valid });
-
-  messagesInformed = (messages) => _.some(_.negate(_.isNil))(messages);
-
-  updateDescription = (description) => {
-    this.handleEditorChange(null, {
-      value: description,
-    });
-  };
+  const messagesInformed = (messages) => _.some(_.negate(_.isNil))(messages);
 
-  handleEditorChange = (e, { value }) => {
-    this.handleChange(null, { name: "description", value });
-  };
+  const updateDescription = (e, { value }) =>
+    handleChange(null, { name: "description", value });
 
-  handleChange = (e, { name, value }) => {
+  const handleChange = (e, { name, value }) => {
     e && e.preventDefault();
-    this.updateRule({ [name]: value });
-  };
-
-  handleChangeCheck = (e, { name, checked }) => {
-    e.preventDefault();
-    this.updateRule({ [name]: checked });
+    updateRule({ [name]: value });
   };
 
-  handleChangeInteger = (e, { name, value }) => {
+  const handleChangeCheck = (e, { checked }) => {
     e.preventDefault();
-    const intValue = parseInt(value);
-    if (Number.isInteger(intValue)) this.updateRule({ [name]: intValue });
-    else if (!_.isEmpty(value)) return;
-    else this.updateRule({ [name]: null });
+    updateRule({ active: checked });
   };
 
-  handleSubmit = (e) => {
+  const handleSubmit = (e) => {
     e.preventDefault();
-    if (this.messagesInformed(this.generateValidationMessages())) return;
-    const { onSubmit, match } = this.props;
-    const rule = _.omit([
-      "activeSelection",
-      "concept",
-      "domainsLoading",
-      "template",
-      "valid",
-    ])(this.state);
+    if (messagesInformed(generateValidationMessages())) return;
+    const ruleData = _.omit(["concept", "template"])(rule);
 
     onSubmit({
-      rule,
+      rule: { ...ruleData, df_name: templateName },
       ids: match.params,
     });
   };
 
-  handleConceptSelected = (concept) => {
-    this.setState({
+  const handleConceptSelected = (concept) => {
+    setRule({
+      ...rule,
       concept,
       business_concept_id: concept?.business_concept_id || null,
     });
-    concept && this.handleSelectionClick();
+    concept && handleSelectionClick();
   };
 
-  handleDomainSelected = (e, { value }) => {
+  const handleDomainSelected = (e, { value }) => {
     const domain_id = value ? _.toInteger(value) : null;
-    this.setState(
-      this.props.editMode
-        ? { concept: null, business_concept_id: null, domain_id }
-        : { domain_id }
+    setRule(
+      editMode
+        ? { ...rule, concept: null, business_concept_id: null, domain_id }
+        : { ...rule, domain_id }
     );
   };
 
-  handleSelectionClick = () => {
-    const { activeSelection } = this.state;
-    this.setState({ activeSelection: !activeSelection });
+  const handleSelectionClick = () => {
+    setActiveSelection(!activeSelection);
   };
 
-  handleDomainsLoaded = () => {
-    this.setState({ domainsLoading: false });
+  const handleDomainsLoaded = () => {
+    setDomainsLoading(false);
   };
 
-  generateValidationMessages = () => {
-    const rule = this.state;
-    const {
-      intl: { formatMessage },
-    } = this.props;
+  const generateValidationMessages = () => {
+    const { formatMessage } = intl;
     const requiredMessage = formatMessage({
       id: "rule.form.validation.empty_required",
     });
@@ -209,152 +191,138 @@ export class RuleForm extends React.Component {
     };
   };
 
-  render() {
-    const {
-      isSubmitting,
-      intl: { formatMessage },
-    } = this.props;
-    const { valid, domainsLoading, ...rule } = this.state;
-    const domain_id = rule?.domain_id;
-    const { concept } = this.props;
-    const messages = this.generateValidationMessages();
-    const hasDomainSelected = !!domain_id;
-    const defaultFilters = hasDomainSelected
-      ? { ...filters, domain_ids: [domain_id] }
-      : filters;
+  const { formatMessage } = intl;
+  const domain_id = rule?.domain_id;
+  const messages = generateValidationMessages();
+  const hasDomainSelected = Boolean(domain_id);
+  const defaultFilters = hasDomainSelected
+    ? { ...filters, domain_ids: [domain_id] }
+    : filters;
 
-    return (
-      <>
-        <Form
-          loading={domainsLoading}
-          onSubmit={this.handleSubmit}
-          className="rule-form"
+  return (
+    <>
+      <Form
+        onSubmit={handleSubmit}
+        loading={domainsLoading}
+        className="rule-form"
+      >
+        <Form.Field className="rule-form__field-right">
+          <Radio
+            name="active"
+            label={formatMessage({ id: "rule.props.active" })}
+            checked={rule.active}
+            toggle
+            onChange={handleChangeCheck}
+          />
+        </Form.Field>
+        <FieldLabelWrapping
+          label={formatMessage({ id: "rule.props.name" })}
+          messages={_.prop("name")(messages)}
+          required
         >
-          <Form.Field className="rule-form__field-right">
-            <Radio
-              name="active"
-              label={formatMessage({ id: "rule.props.active" })}
-              checked={rule.active}
-              toggle
-              onChange={this.handleChangeCheck}
-            />
-          </Form.Field>
-          <FieldLabelWrapping
-            label={formatMessage({ id: "rule.props.name" })}
-            messages={_.prop("name")(messages)}
-            required
-          >
-            <Form.Input
-              aria-label={formatMessage({ id: "rule.props.name.placeholder" })}
-              name="name"
-              onChange={this.handleChange}
-              value={rule.name}
-              placeholder={formatMessage({ id: "rule.props.name.placeholder" })}
-              autoComplete="off"
+          <Form.Input
+            aria-label={formatMessage({ id: "rule.props.name.placeholder" })}
+            name="name"
+            onChange={handleChange}
+            value={rule.name}
+            placeholder={formatMessage({ id: "rule.props.name.placeholder" })}
+            autoComplete="off"
+          />
+        </FieldLabelWrapping>
+        <FieldLabelWrapping
+          label={formatMessage({ id: "rule.props.description" })}
+          messages={_.prop("description")(messages)}
+        >
+          {rule.description ? (
+            <RichTextEditor
+              name="description"
+              value={rule.description}
+              onChange={updateDescription}
             />
-          </FieldLabelWrapping>
-          <FieldLabelWrapping
-            label={formatMessage({ id: "rule.props.description" })}
-            messages={_.prop("description")(messages)}
-          >
-            {rule.description && (
-              <RichTextEditor
-                name="description"
-                value={rule.description}
-                onChange={this.handleEditorChange}
-              />
-            )}
-          </FieldLabelWrapping>
-          <FieldLabelWrapping
-            label={formatMessage({ id: "domain.selector.label" })}
-            messages={_.prop("domain")(messages)}
+          ) : null}
+        </FieldLabelWrapping>
+        <FieldLabelWrapping
+          label={formatMessage({ id: "domain.selector.label" })}
+          messages={_.prop("domain")(messages)}
+          required
+        >
+          <DomainSelector
+            action="manageQualityRule"
+            labels
+            onChange={handleDomainSelected}
+            onLoad={handleDomainsLoaded}
             required
-          >
-            <DomainSelector
-              action="manageQualityRule"
-              labels
-              onChange={this.handleDomainSelected}
-              onLoad={this.handleDomainsLoaded}
-              required
-              value={domain_id}
-            />
-          </FieldLabelWrapping>
-          {_.isEmpty(concept) && (
-            <Segment disabled={_.isNil(domain_id)}>
-              <Form.Group inline>
-                <label className="rule-form-label">
-                  <FormattedMessage id="rule.form.concept.label" />
-                </label>
-                {_.path("concept.name")(rule) && (
-                  <Label size={"medium"}>
-                    {_.flow(
-                      _.path("concept.name"),
-                      _.truncate({ length: 90 })
-                    )(rule)}
-                    <Icon
-                      name="delete"
-                      onClick={() => this.handleConceptSelected(null)}
-                    />
-                  </Label>
-                )}
-              </Form.Group>
-
-              <Accordion>
-                <Accordion.Title
-                  active={rule.activeSelection && !!domain_id}
-                  onClick={this.handleSelectionClick}
-                >
-                  <Icon name="dropdown" />
-                  <FormattedMessage id="rule.form.accordion.select" />
-                </Accordion.Title>
-                <Accordion.Content active={rule.activeSelection && !!domain_id}>
-                  <ConceptSelector
-                    showTitle={false}
-                    defaultFilters={defaultFilters}
-                    handleConceptSelected={this.handleConceptSelected}
-                    businessConceptId={rule?.concept?.business_concept_id}
+            value={domain_id}
+          />
+        </FieldLabelWrapping>
+        {_.isEmpty(concept) ? (
+          <Segment disabled={_.isNil(domain_id)}>
+            <Form.Group inline>
+              <label className="rule-form-label">
+                <FormattedMessage id="rule.form.concept.label" />
+              </label>
+              {_.path("concept.name")(rule) ? (
+                <Label size={"medium"}>
+                  {_.flow(
+                    _.path("concept.name"),
+                    _.truncate({ length: 90 })
+                  )(rule)}
+                  <Icon
+                    name="delete"
+                    onClick={() => handleConceptSelected(null)}
                   />
-                </Accordion.Content>
-              </Accordion>
-            </Segment>
-          )}
+                </Label>
+              ) : null}
+            </Form.Group>
 
-          <SelectableDynamicForm
-            scope="dq"
-            domainIds={_.isNil(domain_id) ? null : [domain_id]}
-            required
-            content={rule.df_content}
-            name={rule.df_name}
-            isModification={this.props.editMode}
-            onChange={this.handleContentChange}
-            onNameChange={(df_name) => this.setState({ df_name })}
-          />
+            <Accordion>
+              <Accordion.Title
+                active={activeSelection && !!domain_id}
+                onClick={handleSelectionClick}
+              >
+                <Icon name="dropdown" />
+                <FormattedMessage id="rule.form.accordion.select" />
+              </Accordion.Title>
+              <Accordion.Content active={activeSelection && !!domain_id}>
+                <ConceptSelector
+                  showTitle={false}
+                  defaultFilters={defaultFilters}
+                  handleConceptSelected={handleConceptSelected}
+                  businessConceptId={rule?.concept?.business_concept_id}
+                />
+              </Accordion.Content>
+            </Accordion>
+          </Segment>
+        ) : null}
 
-          <div className="actions">
-            <HistoryBackButton
-              content={formatMessage({ id: "actions.cancel" })}
-              disabled={isSubmitting}
-            />
-            <Button
-              type="submit"
-              primary
-              loading={isSubmitting}
-              disabled={this.messagesInformed(messages) || !_.isEmpty(valid)}
-              content={formatMessage({ id: "actions.save" })}
-            />
-          </div>
-        </Form>
-        {this.state.errors ? (
-          <Message
-            error
-            header={formatMessage({ id: "rule.error.goal.minimum.header" })}
-            list={[formatMessage({ id: "rule.error.goal.minimum" })]}
+        <SelectableDynamicForm
+          scope="dq"
+          domainIds={_.isNil(domain_id) ? null : [domain_id]}
+          required
+          content={rule.df_content}
+          name={templateName}
+          isModification={editMode}
+          onChange={handleContentChange}
+          onNameChange={(df_name) => setTemplateName(df_name)}
+        />
+
+        <div className="actions">
+          <HistoryBackButton
+            content={formatMessage({ id: "actions.cancel" })}
+            disabled={isSubmitting}
           />
-        ) : null}
-      </>
-    );
-  }
-}
+          <Button
+            type="submit"
+            primary
+            loading={isSubmitting}
+            disabled={messagesInformed(messages) || !_.isEmpty(valid)}
+            content={formatMessage({ id: "actions.save" })}
+          />
+        </div>
+      </Form>
+    </>
+  );
+};
 
 RuleForm.propTypes = {
   concept: PropTypes.object,

package/src/components/RuleImplementationProperties.js

@@ -61,7 +61,7 @@ export const RuleImplementationProperties = ({
               <DynamicFormViewer
                 boxLayout
                 template={templateImpl}
-                content={ruleImplementation.df_content}
+                content={ruleImplementation.dynamic_content}
               />
             )}
           </Grid.Column>

package/src/components/RuleRoutes.js

@@ -73,7 +73,7 @@ export const RuleRoutes = ({
                 {templatesLoaded && template ? (
                   <DynamicFormViewer
                     template={template}
-                    content={rule.df_content}
+                    content={rule.dynamic_content}
                   />
                 ) : null}
               </Segment>

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

@@ -1,14 +1,70 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
+import { screen } from "@testing-library/react";
 import { EditRule } from "../EditRule";
 
+jest.mock("@truedat/bg/concepts/hooks/useConcepts", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/bg/concepts/hooks/useConcepts"
+  );
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useConceptFilters: () => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data: { data: {} },
+          }),
+      }),
+    }),
+    useConceptVersionsSearch: () => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data: { data: [] },
+            headers: {},
+          }),
+      }),
+    }),
+  };
+});
+
 describe("<EditRule />", () => {
   const updateRule = jest.fn();
-  const rule = { id: 1, name: "nn", description: "dd" };
+  const rule = {
+    id: 1,
+    name: "nn",
+    description: {
+      document: {
+        data: {},
+        nodes: [
+          {
+            data: {},
+            nodes: [
+              {
+                marks: [],
+                object: "text",
+                text: "rule description",
+              },
+            ],
+            object: "block",
+            type: "paragraph",
+          },
+        ],
+        object: "document",
+      },
+      object: "value",
+    },
+  };
   const props = { rule, updateRule };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<EditRule {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const { findByText } = render(<EditRule {...props} />, {
+      fallback: "lazy",
+    });
+    await findByText("Edit Quality Rule");
+    expect(screen.getByRole("form")).toMatchSnapshot();
   });
 });

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

@@ -11,6 +11,7 @@ const renderOpts = { fallback: "lazy", state };
 
 describe("<NewRule />", () => {
   it("matches the latest snapshot (with concept)", async () => {
+    // falla el snapshot porque viene sin description y falta algún campo
     const { container, queryByText } = render(<NewRule />, renderOpts);
     await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
     expect(container).toMatchSnapshot();

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

@@ -1,33 +1,376 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<EditRule /> matches the latest snapshot 1`] = `
-<Container
-  as={[Function]}
-  text={true}
+<div
+  class="ui segment ui text container"
+  role="form"
+  style=""
 >
-  <Header
-    as="h2"
+  <h2
+    class="ui header"
   >
-    <Icon
-      as="i"
-      name="cube"
+    <i
+      aria-hidden="true"
+      class="cube icon"
     />
-    <HeaderContent>
-      <MemoizedFormattedMessage
-        id="quality.actions.edit"
-      />
-    </HeaderContent>
-  </Header>
-  <withRouter(injectIntl(Connect(RuleForm)))
-    editMode={true}
-    onSubmit={[MockFunction]}
-    rule={
-      {
-        "description": "dd",
-        "id": 1,
-        "name": "nn",
-      }
-    }
-  />
-</Container>
+    <div
+      class="content"
+    >
+      Edit Quality Rule
+    </div>
+  </h2>
+  <form
+    class="ui loading form rule-form"
+  >
+    <div
+      class="field rule-form__field-right"
+    >
+      <div
+        class="ui checked toggle checkbox"
+      >
+        <input
+          checked=""
+          class="hidden"
+          name="active"
+          readonly=""
+          tabindex="0"
+          type="radio"
+          value=""
+        />
+        <label>
+          Active
+        </label>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label
+        class="rule-form-label"
+      >
+        Name
+        <span>
+          *
+        </span>
+      </label>
+      <div
+        class="field"
+      >
+        <div
+          class="ui input"
+        >
+          <input
+            aria-label="Rule name"
+            autocomplete="off"
+            name="name"
+            placeholder="Rule name"
+            type="text"
+            value="nn"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label
+        class="rule-form-label"
+      >
+        Description
+      </label>
+      <div>
+        <div
+          style="border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem;"
+        >
+          <div
+            class="ui menu"
+          >
+            <a
+              class="icon item"
+            >
+              <i
+                aria-hidden="true"
+                class="bold icon"
+              />
+            </a>
+            <a
+              class="icon item"
+            >
+              <i
+                aria-hidden="true"
+                class="italic icon"
+              />
+            </a>
+            <a
+              class="icon item"
+            >
+              <i
+                aria-hidden="true"
+                class="underline icon"
+              />
+            </a>
+            <a
+              class="icon item"
+            >
+              <i
+                aria-hidden="true"
+                class="header icon"
+              />
+            </a>
+            <a
+              class="icon item"
+            >
+              <i
+                aria-hidden="true"
+                class="h icon"
+              />
+            </a>
+            <a
+              class="icon item"
+            >
+              <i
+                aria-hidden="true"
+                class="list ol icon"
+              />
+            </a>
+            <a
+              class="icon item"
+            >
+              <i
+                aria-hidden="true"
+                class="list ul icon"
+              />
+            </a>
+            <a
+              class="icon item"
+            >
+              <i
+                aria-hidden="true"
+                class="linkify icon"
+              />
+            </a>
+          </div>
+          <div
+            style="padding: 10px;"
+          >
+            <div
+              autocorrect="on"
+              contenteditable="true"
+              data-gramm="false"
+              data-key="7"
+              data-slate-editor="true"
+              role="textbox"
+              spellcheck="true"
+              style="outline: none; white-space: pre-wrap; word-wrap: break-word;"
+            >
+              <div
+                data-key="8"
+                data-slate-object="block"
+                style="position: relative;"
+              >
+                <span
+                  data-key="9"
+                  data-slate-object="text"
+                >
+                  <span
+                    data-offset-key="9:0"
+                    data-slate-leaf="true"
+                  >
+                    <span
+                      data-slate-string="true"
+                    >
+                      rule description
+                    </span>
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label
+        class="rule-form-label"
+      >
+        Domain
+        <span>
+          *
+        </span>
+        <div
+          class="ui left pointing label"
+        >
+          Required field is empty
+        </div>
+      </label>
+    </div>
+    <div
+      class="ui disabled segment"
+    >
+      <div
+        class="inline fields"
+      >
+        <label
+          class="rule-form-label"
+        >
+          Concept
+        </label>
+      </div>
+      <div
+        class="accordion ui"
+      >
+        <div
+          class="title"
+        >
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          Select
+        </div>
+        <div
+          class="content"
+        >
+          <div
+            class="ui segment"
+          >
+            <div
+              class="ui action left icon input"
+            >
+              <i
+                aria-hidden="true"
+                class="search link icon"
+              />
+              <input
+                placeholder="Searching"
+                type="text"
+                value=""
+              />
+              <div
+                aria-busy="false"
+                aria-disabled="false"
+                aria-expanded="false"
+                class="ui button floating labeled scrolling dropdown icon"
+                role="listbox"
+                tabindex="0"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  class="divider text"
+                  role="alert"
+                >
+                  Filters
+                </div>
+                <i
+                  aria-hidden="true"
+                  class="filter icon"
+                />
+                <div
+                  class="menu transition"
+                >
+                  <div
+                    class="item"
+                    role="option"
+                  >
+                    <em>
+                      (reset all filters)
+                    </em>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="selectedFilters"
+            />
+            <div
+              class="ui message"
+            >
+              <div
+                class="content"
+              >
+                No concepts found
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="required field"
+    >
+      <label>
+        Template
+        <div
+          class="ui left pointing label"
+        >
+          Empty required field
+        </div>
+      </label>
+      <div
+        class="field"
+      >
+        <div
+          aria-busy="true"
+          aria-expanded="false"
+          class="ui loading search selection dropdown"
+          name="template"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider default text"
+            role="alert"
+          >
+            loading...
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="actions"
+    >
+      <a
+        class="ui secondary button"
+        href="/"
+        role="button"
+      >
+        Cancel
+      </a>
+      <button
+        class="ui primary disabled button"
+        disabled=""
+        tabindex="-1"
+        type="submit"
+      >
+        Save
+      </button>
+    </div>
+  </form>
+</div>
 `;

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

@@ -219,60 +219,6 @@ exports[`<NewRule /> matches the latest snapshot (with concept) 1`] = `
           </div>
         </label>
       </div>
-      <div
-        class="required field"
-      >
-        <label>
-          Template
-          <div
-            class="ui left pointing label"
-          >
-            Empty required field
-          </div>
-        </label>
-        <div
-          class="field"
-        >
-          <div
-            aria-busy="true"
-            aria-expanded="false"
-            class="ui loading search selection dropdown"
-            name="template"
-            role="combobox"
-          >
-            <input
-              aria-autocomplete="list"
-              autocomplete="off"
-              class="search"
-              tabindex="0"
-              type="text"
-              value=""
-            />
-            <div
-              aria-atomic="true"
-              aria-live="polite"
-              class="divider default text"
-              role="alert"
-            >
-              loading...
-            </div>
-            <i
-              aria-hidden="true"
-              class="dropdown icon"
-            />
-            <div
-              class="menu transition"
-              role="listbox"
-            >
-              <div
-                class="message"
-              >
-                No results found.
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div
         class="actions"
       >

package/src/messages/en.js

@@ -30,7 +30,7 @@ export default {
   "dataset.form.button.add_structure": "Add Structure",
   "datasetForm.implementation_key.tooltip":
     "Leave empty for autogeneration of implementation key after saving implementation",
-  "execution": "Execution",
+  execution: "Execution",
   "execution.insertedAt": "Created",
   "execution.latestEvent.insertedAt": "Latest event",
   "execution.latestEvent.message": "Message",
@@ -93,7 +93,8 @@ export default {
   "implementations.search.placeholder": "Search implementations...",
   "implementations.subheader": "Quality implementations list and details",
   "implementations.subheader.manage": "Implementation Versions in Progress",
-  "implementations.subheader.deprecated": "List of deprecated quality implementations",
+  "implementations.subheader.deprecated":
+    "List of deprecated quality implementations",
   "implementationsStructures.delete.confirmation.content":
     "The relation will be deleted. Are you sure?",
   "implementationsStructures.delete.confirmation.header":
@@ -168,13 +169,13 @@ export default {
   "quality_result.under_minumum": "Under threshold",
   "referenceDataset.dropdown.placeholder": "Reference dataset",
   "referenceDatasetFields.dropdown.placeholder": "Reference dataset fields",
-  "remediation": "Remediation plan",
+  remediation: "Remediation plan",
   "remediation.actions.create": "Create Remediation Plan",
   "remediation.actions.delete.confirmation.content":
     "Remediation plan will be deleted. Are you sure?",
   "remediation.actions.delete.confirmation.header": "Delete remediation plan",
   "remediation.actions.edit": "Edit Remediation Plan",
-  "rule": "Quality Rule",
+  rule: "Quality Rule",
   "rule.date.placeholder": "YYYY-MM-DD",
   "rule.error.goal.required": "Goal required",
   "rule.error.minimum.required": "Minimun threshold required",
@@ -271,7 +272,8 @@ export default {
     "Deprecate implementation",
   "ruleImplementation.actions.edit": "Edit implementation",
   "ruleImplementation.actions.move": "Move to another rule",
-  "ruleImplementation.actions.convert_default": "Edit as default implementation",
+  "ruleImplementation.actions.convert_default":
+    "Edit as default implementation",
   "ruleImplementation.actions.convert_raw": "Edit as raw implementation",
   "ruleImplementation.actions.restore": "Restore Implementation",
   "ruleImplementation.actions.restore.confirmation.content":
@@ -436,13 +438,15 @@ export default {
   "ruleImplementation.operator.not_in_list.string_list": "is not in the list",
   "ruleImplementation.operator.not_references": "is not referenced",
   "ruleImplementation.operator.not_references.field": "is not referenced",
-  "ruleImplementation.operator.not_references.reference_dataset_field": "not in Reference dataset",
+  "ruleImplementation.operator.not_references.reference_dataset_field":
+    "not in Reference dataset",
   "ruleImplementation.operator.number_of_decimals": "has a number of decimals",
   "ruleImplementation.operator.number_of_decimals.number":
     "has a number of decimals",
   "ruleImplementation.operator.references": "referenced in",
   "ruleImplementation.operator.references.field": "referenced in field",
-  "ruleImplementation.operator.references.reference_dataset_field": "in Reference dataset",
+  "ruleImplementation.operator.references.reference_dataset_field":
+    "in Reference dataset",
   "ruleImplementation.operator.regex_format": "matches regular expression",
   "ruleImplementation.operator.regex_format.string":
     "matches regular expression",
@@ -597,7 +601,7 @@ export default {
     "Error in {implementation_key} attribute: {key} message: {message}",
   "ruleImplementations.upload.success.header":
     "Upload success! Loaded {count_ids} omitted {count_errors}",
-  "ruleResult": "Rule execution result",
+  ruleResult: "Rule execution result",
   "ruleResult.props.date": "Date",
   "ruleResult.props.details": "Details",
   "ruleResult.props.errors": "Errors",
@@ -639,6 +643,7 @@ export default {
     "Error in {rule_name} attribute: {key} message: {message}",
   "rules.upload.success.header":
     "Upload successful! Loaded {count_ids} omitted {count_errors}",
+  "search.placeholder": "Searching",
   "segmentsForm.add.text": "Add Segment",
   "structureFields.dropdown.label": "Select Field",
   "structureFields.dropdown.placeholder": "Fields",

package/src/messages/es.js

@@ -3,7 +3,8 @@ export default {
   "alert.createExecutionGroup.success.content":
     "Se ha solicitado la ejecución de {count} implementaciones",
   "alert.createExecutionGroup.success.header": "Ejecuciones programadas",
-  "alert.createImplementationConcept.failed.header": "Error al vincular con el concepto",
+  "alert.createImplementationConcept.failed.header":
+    "Error al vincular con el concepto",
   "alert.createImplementationStructure.failed.header":
     "Error al vincular con estructura",
   "alert.createRule.failed.header": "Error creando regla",
@@ -30,7 +31,7 @@ export default {
   "dataset.form.button.add_structure": "Añadir Estructura",
   "datasetForm.implementation_key.tooltip":
     "En caso de no introducir clave de implementación, se autogenerará al guardar la implementación",
-  "execution": "Ejecución",
+  execution: "Ejecución",
   "execution.insertedAt": "Creado",
   "execution.latestEvent.insertedAt": "Evento más reciente",
   "execution.latestEvent.message": "Detalle",
@@ -172,14 +173,14 @@ export default {
   "quality_result.under_minumum": "Por debajo del umbral",
   "referenceDataset.dropdown.placeholder": "Dato de referencia",
   "referenceDatasetFields.dropdown.placeholder": "Campo de dato de referencia",
-  "remediation": "Plan de remediación",
+  remediation: "Plan de remediación",
   "remediation.actions.create": "Crear plan de remediación",
   "remediation.actions.delete.confirmation.content":
     "Se va a eliminar el plan de remediación. ¿Está seguro?",
   "remediation.actions.delete.confirmation.header":
     "Eliminar plan de remediación",
   "remediation.actions.edit": "Editar plan de remediación",
-  "rule": "Regla de Calidad",
+  rule: "Regla de Calidad",
   "rule.date.placeholder": "YYYY-MM-DD",
   "rule.error.goal.required": "Objetivo requerido",
   "rule.error.minimum.required": "Limite minimo requerido",
@@ -279,7 +280,8 @@ export default {
     "Archivar Implementación",
   "ruleImplementation.actions.edit": "Editar implementación",
   "ruleImplementation.actions.move": "Mover a otra regla",
-  "ruleImplementation.actions.convert_default": "Editar como implementación normal",
+  "ruleImplementation.actions.convert_default":
+    "Editar como implementación normal",
   "ruleImplementation.actions.convert_raw": "Editar como implementación nativa",
   "ruleImplementation.actions.restore": "Restaurar Implementación",
   "ruleImplementation.actions.restore.confirmation.content":
@@ -446,12 +448,14 @@ export default {
   "ruleImplementation.operator.not_in_list.string_list": "no está en la lista",
   "ruleImplementation.operator.not_references": "no está referenciado en",
   "ruleImplementation.operator.not_references.field": "no referenciado en",
-  "ruleImplementation.operator.not_references.reference_dataset_field": "no en Datos de Referencia",
+  "ruleImplementation.operator.not_references.reference_dataset_field":
+    "no en Datos de Referencia",
   "ruleImplementation.operator.number_of_decimals": "tiene nº decimales",
   "ruleImplementation.operator.number_of_decimals.number": "tiene nº decimales",
   "ruleImplementation.operator.references": "referenciado en",
   "ruleImplementation.operator.references.field": "referenciado en",
-  "ruleImplementation.operator.references.reference_dataset_field": "en Datos de Referencia",
+  "ruleImplementation.operator.references.reference_dataset_field":
+    "en Datos de Referencia",
   "ruleImplementation.operator.regex_format": "cumple la expresión regular",
   "ruleImplementation.operator.regex_format.string":
     "cumple la expresión regular",
@@ -618,7 +622,7 @@ export default {
     "Error en {implementation_key} atributo: {key} mensaje: {message}",
   "ruleImplementations.upload.success.header":
     "¡Fichero subido correctamente! subidos {count_ids} errores {count_errors}",
-  "ruleResult": "Resultado de ejecución de regla",
+  ruleResult: "Resultado de ejecución de regla",
   "ruleResult.props.date": "Fecha",
   "ruleResult.props.details": "Detalles",
   "ruleResult.props.errors": "Errores",
@@ -661,6 +665,7 @@ export default {
     "Error en {rule_name} atributo: {key} mensaje: {message}",
   "rules.upload.success.header":
     "¡Fichero subido correctamente! subidos {count_ids} errores {count_errors}",
+  "search.placeholder": "Buscando",
   "segmentsForm.add.text": "Añadir segmentación",
   "structureFields.dropdown.label": "Seleccionar Campo",
   "structureFields.dropdown.placeholder": "Campos",

package/src/reducers/rule.js

@@ -10,6 +10,7 @@ const pickFields = _.pick([
   "deleted_at",
   "description",
   "df_content",
+  "dynamic_content",
   "df_name",
   "domain",
   "domain_id",

package/src/reducers/ruleImplementation.js

@@ -9,6 +9,7 @@ const pickFields = _.pick([
   "deleted_at",
   "df_content",
   "df_name",
+  "dynamic_content",
   "domain",
   "domain_id",
   "event_inserted_at",