@truedat/dq 4.33.10 → 4.35.2

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

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RuleImplementationsOptions /> matches the latest loading snapshot 1`] = `
+<Dropdown
+  additionLabel="Add "
+  additionPosition="top"
+  className="button icon group-actions button-update"
+  closeOnBlur={true}
+  closeOnEscape={true}
+  deburr={false}
+  direction="left"
+  disabled={true}
+  floating={true}
+  icon="ellipsis vertical"
+  minCharacters={1}
+  noResultsMessage="No results found."
+  openOnFocus={true}
+  renderLabel={[Function]}
+  searchInput="text"
+  selectOnBlur={true}
+  selectOnNavigation={true}
+  wrapSelection={true}
+>
+  <DropdownMenu>
+    <Connect(RuleImplementationsDownload) />
+    <Connect(ImplementationsUploadButton) />
+    <Connect(RuleResultsUpload) />
+  </DropdownMenu>
+</Dropdown>
+`;
+
+exports[`<RuleImplementationsOptions /> matches the latest snapshot 1`] = `
+<Dropdown
+  additionLabel="Add "
+  additionPosition="top"
+  className="button icon group-actions button-update"
+  closeOnBlur={true}
+  closeOnEscape={true}
+  deburr={false}
+  direction="left"
+  floating={true}
+  icon="ellipsis vertical"
+  minCharacters={1}
+  noResultsMessage="No results found."
+  openOnFocus={true}
+  renderLabel={[Function]}
+  searchInput="text"
+  selectOnBlur={true}
+  selectOnNavigation={true}
+  wrapSelection={true}
+>
+  <DropdownMenu>
+    <Connect(RuleImplementationsDownload) />
+    <Connect(ImplementationsUploadButton) />
+    <Connect(RuleResultsUpload) />
+  </DropdownMenu>
+</Dropdown>
+`;

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

@@ -58,6 +58,5 @@ exports[`<RuleProperties /> matches the latest snapshot 1`] = `
       foo
     </ListContent>
   </ListItem>
-  <Connect(RuleRangeNumber) />
 </List>
 `;

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RuleResultsUpload /> matches the latest snapshot 1`] = `
+<UploadModal
+  content="uploadModal.actions.upload.confirmation.content"
+  handleSubmit={[Function]}
+  header="ruleResults.actions.upload.confirmation.header"
+  icon="upload"
+  param="rule_results"
+  trigger={
+    <DropdownItem
+      disabled={false}
+      icon="upload"
+      text="ruleResults.actions.upload.tooltip"
+    />
+  }
+/>
+`;

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

@@ -24,19 +24,6 @@ exports[`<RuleRow /> matches the latest snapshot 1`] = `
         >
           
         </td>
-        <td
-          class=""
-        />
-        <td
-          class="right aligned"
-        >
-          1%
-        </td>
-        <td
-          class="right aligned"
-        >
-          22%
-        </td>
       </tr>
     </tbody>
   </table>
@@ -66,21 +53,6 @@ exports[`<RuleRow /> row prints column fields 1`] = `
           class=""
         >
           
-        </td>
-        <td
-          class=""
-        >
-          Percentage
-        </td>
-        <td
-          class="right aligned"
-        >
-          1%
-        </td>
-        <td
-          class="right aligned"
-        >
-          22%
         </td>
         <td
           class=""

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

@@ -57,47 +57,6 @@ exports[`<Rules /> matches the latest snapshot 1`] = `
           sorted={null}
           width={3}
         />
-        <TableHeaderCell
-          as="th"
-          className=""
-          content={
-            <Memo(MemoizedFormattedMessage)
-              id="quality.result_type"
-            />
-          }
-          key="3"
-          onClick={[Function]}
-          sorted={null}
-          width={2}
-        />
-        <TableHeaderCell
-          as="th"
-          className=""
-          content={
-            <Memo(MemoizedFormattedMessage)
-              id="quality.minimum"
-            />
-          }
-          key="4"
-          onClick={[Function]}
-          sorted={null}
-          textAlign="right"
-          width={1}
-        />
-        <TableHeaderCell
-          as="th"
-          className=""
-          content={
-            <Memo(MemoizedFormattedMessage)
-              id="quality.goal.list"
-            />
-          }
-          key="5"
-          onClick={[Function]}
-          sorted={null}
-          textAlign="right"
-          width={1}
-        />
       </TableRow>
     </TableHeader>
     <TableBody
@@ -131,34 +90,6 @@ exports[`<Rules /> matches the latest snapshot 1`] = `
               },
               "width": 3,
             },
-            Object {
-              "fieldDecorator": [Function],
-              "name": "result_type",
-              "sort": Object {
-                "name": "result_type.raw",
-              },
-              "width": 2,
-            },
-            Object {
-              "fieldDecorator": [Function],
-              "fieldSelector": [Function],
-              "name": "minimum",
-              "sort": Object {
-                "name": "minimum",
-              },
-              "textAlign": "right",
-              "width": 1,
-            },
-            Object {
-              "fieldDecorator": [Function],
-              "fieldSelector": [Function],
-              "name": "goal.list",
-              "sort": Object {
-                "name": "goal",
-              },
-              "textAlign": "right",
-              "width": 1,
-            },
           ]
         }
         key="0"
@@ -166,9 +97,7 @@ exports[`<Rules /> matches the latest snapshot 1`] = `
           Object {
             "business_concept_id": "2D2B3",
             "description": "desc1",
-            "goal": 10,
             "id": 123,
-            "minimum": 1,
             "name": "control1",
             "status": "status1",
             "type": "type1",
@@ -204,34 +133,6 @@ exports[`<Rules /> matches the latest snapshot 1`] = `
               },
               "width": 3,
             },
-            Object {
-              "fieldDecorator": [Function],
-              "name": "result_type",
-              "sort": Object {
-                "name": "result_type.raw",
-              },
-              "width": 2,
-            },
-            Object {
-              "fieldDecorator": [Function],
-              "fieldSelector": [Function],
-              "name": "minimum",
-              "sort": Object {
-                "name": "minimum",
-              },
-              "textAlign": "right",
-              "width": 1,
-            },
-            Object {
-              "fieldDecorator": [Function],
-              "fieldSelector": [Function],
-              "name": "goal.list",
-              "sort": Object {
-                "name": "goal",
-              },
-              "textAlign": "right",
-              "width": 1,
-            },
           ]
         }
         key="1"
@@ -239,9 +140,7 @@ exports[`<Rules /> matches the latest snapshot 1`] = `
           Object {
             "business_concept_id": "2D2B4",
             "description": "desc2",
-            "goal": 10,
             "id": 122,
-            "minimum": 1,
             "name": "control2",
             "status": "status2",
             "type": "type2",

package/src/components/ruleImplementationForm/FiltersGroup.js

@@ -110,6 +110,7 @@ const Filter = ({
                 composeValue={composeValue}
                 population={clause?.population || [{}]}
                 onChange={onValueConditionChange}
+                onModifierChange={onModifierChange}
                 parentStructures={parentStructures}
                 siblings={findSiblings(clause)}
                 scope="population"

package/src/components/ruleImplementationForm/InformationForm.js

@@ -6,6 +6,8 @@ import { useIntl } from "react-intl";
 import { Form, Icon, Popup } from "semantic-ui-react";
 import { selectTemplate } from "@truedat/df/routines";
 
+import LimitsForm from "./LimitsForm";
+
 const TemplateSelector = React.lazy(() =>
   import("@truedat/df/templates/components/TemplateSelector")
 );
@@ -33,12 +35,11 @@ const ImplementationDynamicForm = ({
         ? firstTemplate
         : {}
     );
-
-    selectTemplate({ id: templateId });
+    if (templateId !== undefined) selectTemplate({ id: templateId });
   }, [ruleImplementation, selectTemplate, templates]);
 
   const handleContentChange = (content) => onChange("dfContent", content);
-  const handleTemplateSelected = (e, { value }) =>
+  const handleTemplateSelected = (_e, { value }) =>
     selectTemplate({ id: value });
 
   return (
@@ -47,7 +48,6 @@ const ImplementationDynamicForm = ({
         name="template"
         selectedValue={_.prop("id")(template)}
         onChange={handleTemplateSelected}
-        isOptional={true}
       />
       {template && template.id && (
         <DynamicForm
@@ -113,7 +113,7 @@ export const InformationForm = ({
           autoComplete="off"
         />
       </Form.Field>
-
+      <LimitsForm onChange={onChange} ruleImplementation={ruleImplementation} />
       {!_.isEmpty(templates) && (
         <ImplementationDynamicForm
           selectTemplate={selectTemplate}

package/src/components/ruleImplementationForm/LimitsForm.js

@@ -0,0 +1,142 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Form, Icon, Popup, Label, Segment } from "semantic-ui-react";
+
+import generateValidationMessages from "./limitsValidation";
+
+export const FieldLabelWrapping = ({
+  children,
+  label,
+  required,
+  tooltip,
+  message,
+}) => (
+  <Form.Field>
+    <label className="rule-form-label">
+      {label}
+      {required && <span>*</span>}
+      {tooltip && (
+        <Popup
+          trigger={
+            <Icon className="rule-form-popup" name="question circle outline" />
+          }
+          content={tooltip}
+          on="click"
+          hideOnScroll
+        />
+      )}
+      {message && <Label pointing="left">{message}</Label>}
+    </label>
+    {children}
+  </Form.Field>
+);
+
+FieldLabelWrapping.propTypes = {
+  children: PropTypes.node,
+  label: PropTypes.string,
+  required: PropTypes.bool,
+  tooltip: PropTypes.string,
+  message: PropTypes.string,
+};
+
+export default function LimitsForm({ onChange, ruleImplementation }) {
+  const { formatMessage } = useIntl();
+  const handleChange = (e, { name, value }) => {
+    e && e.preventDefault();
+    onChange(name, value);
+  };
+
+  const { minimum: minimumMessage, goal: goalMessage } =
+    generateValidationMessages(ruleImplementation);
+
+  return (
+    <Segment>
+      <FieldLabelWrapping
+        label={formatMessage({ id: "ruleImplementations.props.result_type" })}
+        required
+        tooltip={formatMessage({
+          id: "ruleImplementation.form.tooltip.result_type",
+        })}
+      >
+        <Form.Group inline>
+          <Form.Radio
+            name={"result_type"}
+            label={formatMessage({
+              id: "ruleImplementations.props.result_type.percentage",
+            })}
+            value={"percentage"}
+            checked={ruleImplementation.result_type == "percentage"}
+            onChange={handleChange}
+          />
+          <Form.Radio
+            name={"result_type"}
+            label={formatMessage({
+              id: "ruleImplementations.props.result_type.deviation",
+            })}
+            value={"deviation"}
+            checked={ruleImplementation.result_type == "deviation"}
+            onChange={handleChange}
+          />
+          <Form.Radio
+            name={"result_type"}
+            label={formatMessage({
+              id: "ruleImplementations.props.result_type.errors_number",
+            })}
+            value={"errors_number"}
+            checked={ruleImplementation.result_type == "errors_number"}
+            onChange={handleChange}
+          />
+        </Form.Group>
+      </FieldLabelWrapping>
+      <FieldLabelWrapping
+        label={formatMessage({ id: "ruleImplementations.props.minimum" })}
+        message={minimumMessage && formatMessage({ id: minimumMessage })}
+        required
+        tooltip={formatMessage({
+          id: `ruleImplementation.form.tooltip.${ruleImplementation.result_type}.minimum`,
+        })}
+      >
+        <Form.Input
+          name="minimum"
+          onChange={handleChange}
+          value={
+            _.isNil(ruleImplementation.minimum)
+              ? ""
+              : ruleImplementation.minimum
+          }
+          placeholder={formatMessage({
+            id: "ruleImplementations.props.minimum.placeholder",
+          })}
+          autoComplete="off"
+        />
+      </FieldLabelWrapping>
+      <FieldLabelWrapping
+        label={formatMessage({ id: "ruleImplementations.props.goal" })}
+        message={goalMessage && formatMessage({ id: goalMessage })}
+        required
+        tooltip={formatMessage({
+          id: `ruleImplementation.form.tooltip.${ruleImplementation.result_type}.goal`,
+        })}
+      >
+        <Form.Input
+          name="goal"
+          onChange={handleChange}
+          value={
+            _.isNil(ruleImplementation.goal) ? "" : ruleImplementation.goal
+          }
+          placeholder={formatMessage({
+            id: "ruleImplementations.props.goal.placeholder",
+          })}
+          autoComplete="off"
+        />
+      </FieldLabelWrapping>
+    </Segment>
+  );
+}
+
+LimitsForm.propTypes = {
+  ruleImplementation: PropTypes.object,
+  onChange: PropTypes.func,
+};

package/src/components/ruleImplementationForm/RuleImplementationForm.js

@@ -5,10 +5,12 @@ import { connect } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Button, Divider, Form, Grid, Icon, Step } from "semantic-ui-react";
+import { validateContent } from "@truedat/df/utils";
 import PopulationForm from "./PopulationForm";
 import DatasetForm from "./DatasetForm";
 import ValidationsForm from "./ValidationsForm";
 import InformationForm from "./InformationForm";
+import { areLimitsValid } from "./limitsValidation";
 
 const RuleImplementationStep = ({ activeStep, name, icon }) => (
   <Step active={activeStep == name}>
@@ -37,12 +39,12 @@ export const RuleImplementationForm = ({
   handleSubmit,
   operators,
   onChange,
-  applyTemplate,
+  template,
 }) => {
   const { formatMessage } = useIntl();
   const history = useHistory();
   const steps = [
-    { name: "information", icon: "info", isValid: () => true },
+    { name: "information", icon: "info", isValid: () => validInformation() },
     { name: "dataset", icon: "database", isValid: () => validDataSet() },
     { name: "population", icon: "user", isValid: () => validPopulation() },
     { name: "validations", icon: "setting", isValid: () => validValidations() },
@@ -55,8 +57,15 @@ export const RuleImplementationForm = ({
     dataset: structures,
     population,
     validations,
+    dfContent,
   } = ruleImplementation || {};
 
+  const validInformation = () =>
+    template &&
+    !_.isEmpty(template) &&
+    _.size(validateContent(template)(dfContent)) == 0 &&
+    areLimitsValid(ruleImplementation);
+
   const validPopulation = () =>
     _.every(_.isEmpty)(population) || populationComplete();
 
@@ -208,7 +217,6 @@ export const RuleImplementationForm = ({
                 setImplementationKey,
                 ruleImplementation,
                 onChange,
-                applyTemplate,
               }}
             />
           )}
@@ -241,6 +249,7 @@ export const RuleImplementationForm = ({
           )}
         </Form>
       </Grid.Row>
+      <Divider hidden />
       <Grid.Row stretched>
         <Button
           floated="right"
@@ -287,11 +296,12 @@ RuleImplementationForm.propTypes = {
   setValidations: PropTypes.func,
   operators: PropTypes.object,
   onChange: PropTypes.func,
-  applyTemplate: PropTypes.func,
+  template: PropTypes.object,
 };
 
 const mapStateToProps = (state) => ({
   isSubmitting: state.ruleImplementationCreating,
+  template: state.template,
 });
 
 export default connect(mapStateToProps)(RuleImplementationForm);

package/src/components/ruleImplementationForm/RuleImplementationRawForm.js

@@ -5,7 +5,10 @@ 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 { validateContent as validDfContent } from "@truedat/df/utils";
 import { selectTemplate } from "@truedat/df/routines";
+import LimitsForm from "./LimitsForm";
+import { areLimitsValid } from "./limitsValidation";
 
 const Help = ({ message }) => {
   const { formatMessage } = useIntl();
@@ -60,7 +63,6 @@ const ImplementationDynamicForm = ({
         name="template"
         selectedValue={_.prop("id")(template)}
         onChange={handleTemplateSelected}
-        isOptional={true}
       />
       {template && template.id && (
         <DynamicForm
@@ -84,7 +86,6 @@ export const RuleImplementationRawForm = ({
   handleSubmit,
   isSubmitting,
   implementationKey,
-  mode,
   rawContent,
   setImplementationKey,
   setImplementationRawContent,
@@ -148,9 +149,15 @@ export const RuleImplementationRawForm = ({
       /\b(DROP|DELETE|INSERT|UPDATE|CALL|EXEC|EXECUTE|ALTER)\b|;|--|#/gi;
     return text ? text.match(re) : [];
   };
+  const validInformation = () =>
+    template &&
+    !_.isEmpty(template) &&
+    _.size(validDfContent(template)(ruleImplementation?.dfContent)) == 0 &&
+    areLimitsValid(ruleImplementation);
 
   const isValidForm = () => {
     return (
+      validInformation() &&
       isNotEmptyProp("source_id") &&
       (_.isEmpty(databasesOptions) || isNotEmptyProp("database")) &&
       _.every(isNotEmptyProp)(["dataset", "validations"]) &&
@@ -208,11 +215,14 @@ export const RuleImplementationRawForm = ({
             placeholder={formatMessage({
               id: "ruleImplementation.props.name.placeholder",
             })}
-            readOnly={mode == "edition"}
             required
             value={implementationKey}
           />
         </Form.Field>
+        <LimitsForm
+          onChange={onChange}
+          ruleImplementation={ruleImplementation}
+        />
         {!_.isEmpty(templates) && (
           <ImplementationDynamicForm
             selectTemplate={selectTemplate}
@@ -279,7 +289,7 @@ export const RuleImplementationRawForm = ({
           required
           rows={4}
           size="small"
-          value={_.prop("dataset")(rawContent)}
+          value={_.prop("dataset")(rawContent) || ""}
         />
         <Form.TextArea
           className="raw"
@@ -303,7 +313,7 @@ export const RuleImplementationRawForm = ({
           })}
           rows={4}
           size="small"
-          value={_.prop("population")(rawContent)}
+          value={_.prop("population")(rawContent) || ""}
         />
         <Form.TextArea
           className="raw"
@@ -328,7 +338,7 @@ export const RuleImplementationRawForm = ({
           required
           rows={4}
           size="small"
-          value={_.prop("validations")(rawContent)}
+          value={_.prop("validations")(rawContent) || ""}
         />
         <Form.Button
           floated="right"

package/src/components/ruleImplementationForm/ValueConditions.js

@@ -64,6 +64,16 @@ export const ValueConditions = ({
 
   const onRowAddition = () => onChange(_.concat(population)([{}]));
 
+  const onModifierChange = (index, modifier) => {
+    const clause = _.nth(index)(population);
+    const updatedCondition = {
+      ...clause,
+      modifier,
+    };
+    const modifiedPopulation = replaceAt(index, updatedCondition)(population);
+    onChange && onChange(modifiedPopulation);
+  };
+
   return population.map((clause, index) => (
     <React.Fragment key={index}>
       <Grid.Row>
@@ -74,6 +84,7 @@ export const ValueConditions = ({
             onOperatorChange={onOperatorChange}
             onStructureChange={onStructureChange}
             onValueChange={onValueChange}
+            onModifierChange={onModifierChange}
             parentStructures={parentStructures}
             scope={scope}
             siblings={siblings}