@truedat/dq 4.42.5 → 4.43.1

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

@@ -136,10 +136,16 @@ exports[`<RuleImplementation /> matches the latest snapshot 1`] = `
     </a>
     <a
       class="item"
-      href="/rules/1/implementations/1/links"
+      href="/rules/1/implementations/1/links/concepts"
     >
       Related concepts
     </a>
+    <a
+      class="item"
+      href="/rules/1/implementations/1/structures"
+    >
+      Structures
+    </a>
     <a
       class="item"
       href="/rules/1/implementations/1/results"

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

@@ -65,6 +65,7 @@ exports[`<RuleImplementationProperties /> matches the latest snapshot 1`] = `
             "dataset",
             "populations",
             "validations",
+            "segments",
           ]
         }
         ruleImplementation={

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

@@ -13,9 +13,15 @@ exports[`<RuleImplementationTabs /> matches the latest snapshot 1`] = `
     </a>
     <a
       class="item"
-      href="/rules/8/implementations/1/links"
+      href="/rules/8/implementations/1/links/concepts"
     >
-      links
+      concepts
+    </a>
+    <a
+      class="item"
+      href="/rules/8/implementations/1/structures"
+    >
+      structures
     </a>
     <a
       class="item"

package/src/components/index.js

@@ -1,7 +1,7 @@
 import ConceptRules from "./ConceptRules";
 import DynamicRuleForm from "./DynamicRuleForm";
 import EditRule from "./EditRule";
-import ExecutionDetails from "./ExecutionDetails";
+import RuleResultDetails from "./RuleResultDetails";
 import ExecutionGroup from "./ExecutionGroup";
 import ExecutionGroupLoader from "./ExecutionGroupLoader";
 import ImplementationFiltersLoader from "./ImplementationFiltersLoader";
@@ -25,7 +25,7 @@ export {
   ConceptRules,
   DynamicRuleForm,
   EditRule,
-  ExecutionDetails,
+  RuleResultDetails,
   ExecutionGroup,
   ExecutionGroupLoader,
   ImplementationFiltersLoader,

package/src/components/ruleImplementationForm/FieldsGrid.js

@@ -0,0 +1,57 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Button, Grid } from "semantic-ui-react";
+import FieldsGroup from "./FieldsGroup";
+
+export const FieldsGrid = ({ rows, setRowValue, structures }) => {
+  const [activeConditionIndex, setActiveConditionIndex] = useState();
+
+  const parentStructures = _.map((s) =>
+    _.isNil(_.prop("alias")(s))
+      ? _.prop("structure")(s)
+      : { ..._.prop("structure")(s), alias: _.prop("alias")(s) }
+  )(structures);
+
+  const onStructureChange = (index, value) => {
+    const structure = {
+      ..._.pick(["field_type", "name", "parent_index"])(value),
+      id: value.data_structure_id,
+    };
+    setRowValue({
+      index,
+      value: {
+        structure,
+      },
+    });
+  };
+
+  const onRowAddition = () => {
+    setRowValue({});
+    setActiveConditionIndex(-1);
+  };
+
+  return (
+    <>
+      <Grid verticalAlign="middle" divided="vertically">
+        <FieldsGroup
+          activeConditionIndex={activeConditionIndex}
+          onStructureChange={onStructureChange}
+          parentStructures={parentStructures}
+          rows={rows}
+          setActiveConditionIndex={setActiveConditionIndex}
+          setRowValue={setRowValue}
+        />
+      </Grid>
+      <Button onClick={onRowAddition} icon="plus circle" />
+    </>
+  );
+};
+
+FieldsGrid.propTypes = {
+  rows: PropTypes.array,
+  setRowValue: PropTypes.func,
+  structures: PropTypes.array,
+};
+
+export default FieldsGrid;

package/src/components/ruleImplementationForm/FieldsGroup.js

@@ -0,0 +1,107 @@
+import _ from "lodash/fp";
+import React from "react";
+import { useIntl } from "react-intl";
+import { Grid, Icon } from "semantic-ui-react";
+import PropTypes from "prop-types";
+import { getStructureFields } from "../../selectors/getStructureFields";
+
+const StructureFieldsDropdown = React.lazy(() =>
+  import("@truedat/dd/components/StructureFieldsDropdown")
+);
+
+const Field = ({
+  clause,
+  index,
+  onStructureChange,
+  parentStructures,
+  setRowValue,
+}) => {
+  const { formatMessage } = useIntl();
+  const structureFields = getStructureFields(parentStructures);
+  return (
+    <>
+      <Grid.Row>
+        <Grid.Column width={4}>
+          <StructureFieldsDropdown
+            label={formatMessage({ id: "filtersGrid.field.label" })}
+            inline={false}
+            parentStructures={parentStructures}
+            structureFields={structureFields}
+            onSelectField={(value) => onStructureChange(index, value)}
+            value={
+              _.isNil(_.prop("parent_index")(clause?.structure))
+                ? _.prop("id")(clause?.structure)
+                : `${_.prop("id")(clause?.structure)}/${_.prop("parent_index")(
+                    clause?.structure
+                  )}`
+            }
+          />
+        </Grid.Column>
+        <Grid.Column width={2}>
+          <Icon
+            name="trash"
+            className="selectable segment-trash-buttom"
+            onClick={() => setRowValue({ index })}
+          />
+        </Grid.Column>
+      </Grid.Row>
+    </>
+  );
+};
+
+Field.propTypes = {
+  activeConditionIndex: PropTypes.number,
+  allOperators: PropTypes.array,
+  operators: PropTypes.array,
+  clause: PropTypes.object,
+  composeValue: PropTypes.func,
+  onConditionChange: PropTypes.func,
+  onOperatorChange: PropTypes.func,
+  onStructureChange: PropTypes.func,
+  onValueChange: PropTypes.func,
+  onModifierChange: PropTypes.func,
+  parentStructures: PropTypes.array,
+  setActiveConditionIndex: PropTypes.func,
+  index: PropTypes.number,
+  setRowValue: PropTypes.func,
+  scope: PropTypes.string,
+};
+
+export const FieldsGroup = ({
+  activeConditionIndex,
+  composeValue,
+  onStructureChange,
+  parentStructures,
+  rows = [],
+  setActiveConditionIndex,
+  setRowValue,
+  scope,
+}) => {
+  return rows.map((clause, index) => (
+    <Field
+      key={index}
+      activeConditionIndex={activeConditionIndex}
+      composeValue={composeValue}
+      clause={clause}
+      index={index}
+      onStructureChange={onStructureChange}
+      parentStructures={parentStructures}
+      setActiveConditionIndex={setActiveConditionIndex}
+      setRowValue={setRowValue}
+      scope={scope}
+    />
+  ));
+};
+
+FieldsGroup.propTypes = {
+  activeConditionIndex: PropTypes.number,
+  composeValue: PropTypes.func,
+  onStructureChange: PropTypes.func,
+  rows: PropTypes.array,
+  parentStructures: PropTypes.array,
+  setActiveConditionIndex: PropTypes.func,
+  setRowValue: PropTypes.func,
+  scope: PropTypes.string,
+};
+
+export default FieldsGroup;

package/src/components/ruleImplementationForm/RuleImplementationForm.js

@@ -18,6 +18,7 @@ import PopulationForm from "./PopulationForm";
 import DatasetForm from "./DatasetForm";
 import ValidationsForm from "./ValidationsForm";
 import InformationForm from "./InformationForm";
+import SegmentsForm from "./SegmentsForm";
 import { areLimitsValid } from "./limitsValidation";
 
 const RuleImplementationStep = ({ activeStep, name, icon }) => (
@@ -44,6 +45,8 @@ export const RuleImplementationForm = ({
   setPopulations,
   setImplementationKey,
   setValidations,
+  addSegments,
+  setSegments,
   isSubmitting,
   handleSubmit,
   operators,
@@ -57,6 +60,11 @@ export const RuleImplementationForm = ({
     { name: "dataset", icon: "database", isValid: () => validDataSet() },
     { name: "populations", icon: "user", isValid: () => validPopulations() },
     { name: "validations", icon: "setting", isValid: () => validValidations() },
+    {
+      name: "segments",
+      icon: "grid layout",
+      isValid: () => validSegments(),
+    },
   ];
 
   const [activeStep, setActiveStep] = useState("information");
@@ -67,6 +75,7 @@ export const RuleImplementationForm = ({
     populations,
     validations,
     dfContent,
+    segments,
   } = ruleImplementation || {};
 
   const validInformation = () =>
@@ -81,6 +90,8 @@ export const RuleImplementationForm = ({
   const validValidations = () =>
     _.every(_.negate(_.isEmpty))(validations) && validationsComplete();
 
+  const validSegments = () => _.every(_.negate(_.isEmpty))(segments);
+
   const validDataSet = () => areStructuresComplete();
 
   const areStructuresComplete = () =>
@@ -271,6 +282,20 @@ export const RuleImplementationForm = ({
               typeOperators={operators}
             />
           )}
+          {activeStep == "segments" ? (
+            <>
+              {_.flow(_.flatten, _.isEmpty)(segments) ? (
+                <SegmentsTypeForm createFilter={() => addSegments()} />
+              ) : (
+                <SegmentsForm
+                  segments={segments}
+                  setSegments={setSegments}
+                  structures={structures}
+                  typeOperators={operators}
+                />
+              )}
+            </>
+          ) : null}
         </Form>
       </Grid.Row>
       <Divider hidden />
@@ -319,6 +344,8 @@ RuleImplementationForm.propTypes = {
   setPopulations: PropTypes.func,
   setImplementationKey: PropTypes.func,
   setValidations: PropTypes.func,
+  setSegments: PropTypes.func,
+  addSegments: PropTypes.func,
   operators: PropTypes.object,
   onChange: PropTypes.func,
   template: PropTypes.object,
@@ -354,3 +381,21 @@ const PopulationTypeForm = ({ createFilter }) => (
 PopulationTypeForm.propTypes = {
   createFilter: PropTypes.func,
 };
+
+const SegmentsTypeForm = ({ createFilter }) => (
+  <Grid columns={2} textAlign="center">
+    <Grid.Column>
+      <Segment
+        className={`population selectable`}
+        onClick={() => createFilter()}
+      >
+        <Icon name="plus circle" />
+        <FormattedMessage id="segmentsForm.add.text" />
+      </Segment>
+    </Grid.Column>
+  </Grid>
+);
+
+SegmentsTypeForm.propTypes = {
+  createFilter: PropTypes.func,
+};

package/src/components/ruleImplementationForm/SegmentsForm.js

@@ -0,0 +1,35 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { dropAt, replaceAt } from "@truedat/core/services/arrays";
+import { FieldsGrid } from "./FieldsGrid";
+
+export const SegmentsForm = ({ segments, setSegments, structures }) => {
+  const setSegmentsRow = ({ index, value }) => {
+    if (_.isNil(index)) {
+      setSegments(_.isEmpty(segments) ? [{}] : [...segments, {}]);
+    } else if (value) {
+      const segment = { ..._.nth(index)(segments), ...value };
+      setSegments(replaceAt(index, segment)(segments));
+    } else {
+      const array = dropAt(index)(segments);
+      setSegments(_.isEmpty(array) ? [{}] : array);
+    }
+  };
+
+  return (
+    <FieldsGrid
+      rows={segments}
+      setRowValue={setSegmentsRow}
+      structures={structures}
+    />
+  );
+};
+
+SegmentsForm.propTypes = {
+  structures: PropTypes.array,
+  segments: PropTypes.array,
+  setSegments: PropTypes.func,
+};
+
+export default SegmentsForm;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { intl } from "@truedat/test/intl-stub";
 import { RuleImplementationForm } from "../RuleImplementationForm";
 
@@ -8,7 +8,7 @@ import { RuleImplementationForm } from "../RuleImplementationForm";
 jest.spyOn(React, "useContext").mockImplementation(() => intl);
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
-  useHistory: () => ({ push: jest.fn() })
+  useHistory: () => ({ push: jest.fn() }),
 }));
 
 describe("<RuleImplementationForm />", () => {
@@ -18,29 +18,46 @@ describe("<RuleImplementationForm />", () => {
       params: {
         system_params: [
           { type: "string", name: "table" },
-          { type: "string", name: "column" }
-        ]
-      }
-    }
+          { type: "string", name: "column" },
+        ],
+      },
+    },
   };
+
   const ruleImplementation = {
     implementationKey: "foo",
-    executable: true
+    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
+    ruleImplementation,
+    isSubmitting: true,
   };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<RuleImplementationForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(
+      <RuleImplementationForm {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
   });
 });