@truedat/dq 4.43.4 → 4.43.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.43.5] 2022-05-05
+
+# Added
+
+- [TD-4538] Add more coding for segments configuration and segment results for implementations
+
 ## [4.43.3] 2022-05-04
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.43.4",
+  "version": "4.43.5",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -31,7 +31,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.43.4",
+    "@truedat/test": "4.43.5",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -82,8 +82,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.10",
-    "@truedat/core": "4.43.4",
-    "@truedat/df": "4.43.4",
+    "@truedat/core": "4.43.5",
+    "@truedat/df": "4.43.5",
     "axios": "^0.19.2",
     "graphql": "^15.5.3",
     "path-to-regexp": "^1.7.0",
@@ -103,5 +103,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "7f0463a65a0b8137f1598487bf26fefa52e5fa59"
+  "gitHead": "ab63882af7d0c31643f56b9c7eafca813763dd9e"
 }

package/src/components/NewRuleImplementation.js

@@ -224,8 +224,8 @@ const updateStructureParentIndex = (structures) => (structure) => {
   return structure;
 };
 
-const withConditionDefaultAlias = (conditions, structures) => {
-  return _.map((p) => {
+const withConditionDefaultAlias = (conditions, structures) =>
+  _.map((p) => {
     return {
       ...p,
       structure: updateStructureParentIndex(structures)(p.structure),
@@ -235,7 +235,6 @@ const withConditionDefaultAlias = (conditions, structures) => {
           : p.value,
     };
   })(conditions);
-};
 
 export const NewRuleImplementation = ({
   canManageRaw,

package/src/components/RuleImplementation.js

@@ -13,92 +13,102 @@ import RuleImplementationTabs from "./RuleImplementationTabs";
 import ImplementationResultBar from "./ImplementationResultBar";
 
 const getAvailableActions = (props, formatMessage) => {
-  const contentActions = _.isEmpty(props?.ruleImplementation) ? [] : [
-    {
-      key: "delete",
-      value: "delete",
-      as: OptionModal,
-      headerMessage: "ruleImplementation.actions.delete.confirmation.header",
-      contentMessage: "ruleImplementation.actions.delete.confirmation.content",
-      iconName: "trash alternate outline",
-      iconColor: "red",
-      option: "ruleImplementation.actions.delete",
-      selected: false,
-      active: false,
-      filter: !_.prop("activeMode")(props),
-      ...props,
-    },
-    {
-      key: "softDelete",
-      value: "softDelete",
-      as: OptionModal,
-      headerMessage: "ruleImplementation.actions.delete.confirmation.header",
-      contentMessage: "ruleImplementation.actions.delete.confirmation.content",
-      iconName: "folder open outline",
-      iconColor: "black",
-      option: "ruleImplementation.actions.deprecate",
-      selected: false,
-      active: false,
-      filter: _.prop("activeMode")(props),
-      ...props,
-    },
-    {
-      key: "restore",
-      iconName: "undo",
-      option: "ruleImplementation.actions.restore",
-      value: "restore",
-      as: OptionModal,
-      headerMessage: "ruleImplementation.actions.restore.confirmation.header",
-      contentMessage: "ruleImplementation.actions.restore.confirmation.content",
-      selected: false,
-      active: false,
-      filter: !_.prop("activeMode")(props),
-      restore: true,
-      ...props,
-    },
-    {
-      key: "edit",
-      icon: "edit outline",
-      text: formatMessage({ id: "ruleImplementation.actions.edit" }),
-      value: "edit",
-      as: Link,
-      to: linkTo.RULE_IMPLEMENTATION_EDIT({
-        id: _.path("rule.id")(props),
-        implementation_id: _.path("ruleImplementation.id")(props),
-      }),
-      filter: true,
-      selected: false,
-      active: false,
-    },
-    {
-      key: "move",
-      icon: "share square",
-      text: formatMessage({ id: "ruleImplementation.actions.move" }),
-      value: "move",
-      as: Link,
-      to: linkTo.RULE_IMPLEMENTATION_MOVE({
-        id: _.path("rule.id")(props),
-        implementation_id: _.path("ruleImplementation.id")(props),
-      }),
-      filter: props?.authorized,
-      selected: false,
-      active: false,
-    },
-    {
-      key: "clone",
-      icon: "copy outline",
-      text: formatMessage({ id: "ruleImplementation.actions.clone" }),
-      value: "clone",
-      as: Link,
-      to: linkTo.RULE_IMPLEMENTATION_CLONE({
-        id: _.path("rule.id")(props),
-        implementation_id: _.path("ruleImplementation.id")(props),
-      }),
-      filter: true,
-      selected: false,
-      active: false,
-    },
-  ];
+  const contentActions = _.isEmpty(props?.ruleImplementation)
+    ? []
+    : [
+        {
+          key: "delete",
+          value: "delete",
+          as: OptionModal,
+          headerMessage:
+            "ruleImplementation.actions.delete.confirmation.header",
+          contentMessage:
+            "ruleImplementation.actions.delete.confirmation.content",
+          iconName: "trash alternate outline",
+          iconColor: "red",
+          option: "ruleImplementation.actions.delete",
+          selected: false,
+          active: false,
+          filter: !_.prop("activeMode")(props),
+          ...props,
+        },
+        {
+          key: "softDelete",
+          value: "softDelete",
+          as: OptionModal,
+          headerMessage:
+            "ruleImplementation.actions.delete.confirmation.header",
+          contentMessage:
+            "ruleImplementation.actions.delete.confirmation.content",
+          iconName: "folder open outline",
+          iconColor: "black",
+          option: "ruleImplementation.actions.deprecate",
+          selected: false,
+          active: false,
+          filter: _.prop("activeMode")(props),
+          ...props,
+        },
+        {
+          key: "restore",
+          iconName: "undo",
+          option: "ruleImplementation.actions.restore",
+          value: "restore",
+          as: OptionModal,
+          headerMessage:
+            "ruleImplementation.actions.restore.confirmation.header",
+          contentMessage:
+            "ruleImplementation.actions.restore.confirmation.content",
+          selected: false,
+          active: false,
+          filter: !_.prop("activeMode")(props),
+          restore: true,
+          ...props,
+        },
+        {
+          key: "edit",
+          icon: "edit outline",
+          text: formatMessage({ id: "ruleImplementation.actions.edit" }),
+          value: "edit",
+          as: Link,
+          to: linkTo.RULE_IMPLEMENTATION_EDIT({
+            id: _.path("rule.id")(props),
+            implementation_id: _.path("ruleImplementation.id")(props),
+          }),
+          filter:
+            props.authManageSegments ||
+            _.isEmpty(props.ruleImplementation.segments),
+          selected: false,
+          active: false,
+        },
+        {
+          key: "move",
+          icon: "share square",
+          text: formatMessage({ id: "ruleImplementation.actions.move" }),
+          value: "move",
+          as: Link,
+          to: linkTo.RULE_IMPLEMENTATION_MOVE({
+            id: _.path("rule.id")(props),
+            implementation_id: _.path("ruleImplementation.id")(props),
+          }),
+          filter: props?.authorized,
+          selected: false,
+          active: false,
+        },
+        {
+          key: "clone",
+          icon: "copy outline",
+          text: formatMessage({ id: "ruleImplementation.actions.clone" }),
+          value: "clone",
+          as: Link,
+          to: linkTo.RULE_IMPLEMENTATION_CLONE({
+            id: _.path("rule.id")(props),
+            implementation_id: _.path("ruleImplementation.id")(props),
+          }),
+          filter: true,
+          selected: false,
+          active: false,
+        },
+      ];
 
   return _.flow(_.filter("filter"), _.map(_.omit(["filter"])))(contentActions);
 };
@@ -159,6 +169,7 @@ export const RuleImplementation = ({
   rule,
   ruleImplementation,
   userRulePermissions,
+  authManageSegments,
 }) => {
   const authorized = useAuthorized();
   const { formatMessage } = useIntl();
@@ -171,6 +182,7 @@ export const RuleImplementation = ({
       rule,
       ruleImplementation,
       setRuleImplementationStatus,
+      authManageSegments,
     },
     formatMessage
   );
@@ -218,6 +230,7 @@ RuleImplementation.propTypes = {
   rule: PropTypes.object,
   ruleImplementation: PropTypes.object,
   userRulePermissions: PropTypes.object,
+  authManageSegments: PropTypes.bool,
   children: PropTypes.node,
 };
 
@@ -225,10 +238,13 @@ const mapStateToProps = ({
   rule,
   ruleImplementation,
   userRulePermissions,
+  implementationActions,
 }) => ({
   rule,
   ruleImplementation,
   userRulePermissions,
+  authManageSegments:
+    _.pathOr(false, "manage_segments.method")(implementationActions) === "POST",
 });
 
 export default connect(mapStateToProps, { setRuleImplementationStatus })(

package/src/components/RuleImplementationResultTabs.js

@@ -9,16 +9,10 @@ import { FormattedMessage } from "react-intl";
 import {
   RULE_IMPLEMENTATION_RESULT_DETAILS,
   RULE_IMPLEMENTATION_RESULT_SEGMENTS_RESULTS,
-  //TODO: change name route
-  RULE_IMPLEMENTATION_RESULT_DETAILS_REMEDIATION_PLAN,
+  RULE_IMPLEMENTATION_RESULT_REMEDIATION_PLAN,
   linkTo,
 } from "@truedat/core/routes";
 
-import RuleResultRemediationLoader from "./RuleResultRemediationLoader";
-const TemplatesLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplatesLoader")
-);
-
 export const RuleImplementationResultTabs = ({
   rule,
   ruleImplementation,
@@ -49,11 +43,9 @@ export const RuleImplementationResultTabs = ({
 
     return renderCondition ? (
       <Menu.Item
-        active={
-          match.path === RULE_IMPLEMENTATION_RESULT_DETAILS_REMEDIATION_PLAN
-        }
+        active={match.path === RULE_IMPLEMENTATION_RESULT_REMEDIATION_PLAN}
         as={Link}
-        to={linkTo.RULE_IMPLEMENTATION_RESULT_DETAILS_REMEDIATION_PLAN({
+        to={linkTo.RULE_IMPLEMENTATION_RESULT_REMEDIATION_PLAN({
           id: rule.id,
           implementation_id: ruleImplementation.id,
           rule_result_id: ruleResult.id,
@@ -66,8 +58,6 @@ export const RuleImplementationResultTabs = ({
 
   return _.isEmpty(ruleImplementation) || _.isEmpty(rule) ? null : (
     <>
-      <RuleResultRemediationLoader propRuleResultId={ruleResult.id} />
-      <TemplatesLoader scope="remediation" />
       <Menu attached="top" pointing secondary tabular>
         <Menu.Item
           active={match.path === RULE_IMPLEMENTATION_RESULT_DETAILS}

package/src/components/RuleResult.js

@@ -1,67 +1,14 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { useIntl } from "react-intl";
 import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
-import { Header, Table, Icon } from "semantic-ui-react";
-import { DateTime } from "@truedat/core/components";
+import { Header, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
-import { selectColor } from "../functions/selectors";
 import RuleImplementationResultTabs from "./RuleImplementationResultTabs";
 
-const GeneralInformation = ({ ruleImplementation, ruleResult }) => {
-  const { formatMessage, formatNumber: _formatNumber } = useIntl();
-  const formatNumber = (num) => (_.isNil(num) ? num : _formatNumber(num));
-  return (
-    <>
-      <Table.Row>
-        <Table.Cell>
-          {formatMessage({ id: "ruleResult.props.quality" })}
-        </Table.Cell>
-        <Table.Cell>
-          <Icon
-            name="circle"
-            color={selectColor({ ...ruleImplementation, ...ruleResult })}
-          />
-          {`${parseFloat(ruleResult.result)} %`}
-        </Table.Cell>
-      </Table.Row>
-
-      <Table.Row>
-        <Table.Cell>
-          {formatMessage({ id: "ruleResult.props.date" })}
-        </Table.Cell>
-        <Table.Cell>
-          <DateTime value={ruleResult.date} />
-        </Table.Cell>
-      </Table.Row>
-
-      <Table.Row>
-        <Table.Cell>
-          {formatMessage({ id: "ruleResult.props.records" })}
-        </Table.Cell>
-        <Table.Cell>{formatNumber(ruleResult.records)}</Table.Cell>
-      </Table.Row>
-
-      <Table.Row>
-        <Table.Cell>
-          {formatMessage({ id: "ruleResult.props.errors" })}
-        </Table.Cell>
-        <Table.Cell>{formatNumber(ruleResult.errors)}</Table.Cell>
-      </Table.Row>
-    </>
-  );
-};
-
-GeneralInformation.propTypes = {
-  ruleImplementation: PropTypes.object,
-  ruleResult: PropTypes.object,
-};
-
 export const RuleResult = ({ ruleImplementation, ruleResultId, children }) => {
   const { rule_result_id: paramsId } = useParams();
-
   const resultId = _.defaultTo(_.toNumber(paramsId))(ruleResultId);
 
   const ruleResult = _.find(_.propEq("id", resultId))(

package/src/components/RuleResultRemediations.js

@@ -6,11 +6,6 @@ import { useParams } from "react-router-dom";
 import RemediationPlan from "./RemediationPlan";
 import "../styles/executionDetails.less";
 
-import RuleResultRemediationLoader from "./RuleResultRemediationLoader";
-const TemplatesLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplatesLoader")
-);
-
 export const RuleResultRemediations = ({
   ruleImplementation,
   ruleResultId,
@@ -25,8 +20,6 @@ export const RuleResultRemediations = ({
 
   return _.isEmpty(ruleResult) ? null : (
     <>
-      <RuleResultRemediationLoader propRuleResultId={ruleResult.id} />
-      <TemplatesLoader scope="remediation" />
       <RemediationPlan
         className="execution-details-remediation"
         latestResultId={resultId}

package/src/components/RuleResultRow.js

@@ -37,6 +37,16 @@ export const RuleResultRow = ({
           })}
         >
           <DateTime className="rule-result-date" value={ruleResult.date} />
+          {ruleResult.has_segments ? (
+            <Icon
+              circular
+              inverted
+              name="grid layout"
+              color="blue"
+              size="small"
+            />
+          ) : null}
+
           {ruleResult.has_remediation ? (
             <Icon circular inverted name="rain" color="blue" size="small" />
           ) : null}

package/src/components/RuleResultSegmentRow.js

@@ -24,7 +24,7 @@ export const RuleResultSegmentRow = ({
 
   return (
     <Table.Row>
-      <Table.Cell>{_.prop("name")(segmentResult.params)}</Table.Cell>
+      <Table.Cell>{_.prop("segment_name")(segmentResult.params)}</Table.Cell>
       <Table.Cell>
         <Icon
           name="circle"
@@ -75,7 +75,7 @@ RuleResultSegmentRow.propTypes = {
   optionalColumns: PropTypes.array,
   rule: PropTypes.object,
   ruleImplementation: PropTypes.object,
-  ruleResult: PropTypes.object,
+  segmentResult: PropTypes.object,
 };
 
 const mapDispatchToProps = { deleteRuleResult };

package/src/components/RuleResultSegments.js

@@ -5,8 +5,16 @@ import { useIntl } from "react-intl";
 import { connect } from "react-redux";
 import { Table, Message, Divider } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
+import { getSegmentResultsColumns } from "../selectors";
 import RuleResultSegmentRow from "./RuleResultSegmentRow";
 
+const optionalColumns = ["errors", "records", "details"];
+
+const getOptionalColumnsWithData = (segmentResults) =>
+  _.filter((column) =>
+    _.any(_.flow(_.prop(column), _.negate(_.isNil)))(segmentResults)
+  )(optionalColumns);
+
 export const getCustomColumnsWithData = (segmentResults, columns) =>
   _.filter((column) =>
     _.any(_.flow(columnDecorator(column), _.negate(_.isEmpty)))(segmentResults)
@@ -16,11 +24,12 @@ export const RuleResultSegments = ({
   rule,
   isAdmin,
   ruleImplementation,
+  customColumns,
   segmentResults,
 }) => {
   const { formatMessage } = useIntl();
-  const customColumns = [];
-  const optionalColumns = ["errors", "records", "details"];
+
+  const optionalColumns = getOptionalColumnsWithData(segmentResults);
 
   if (_.isEmpty(rule) || _.isEmpty(segmentResults)) return null;
 
@@ -89,6 +98,7 @@ RuleResultSegments.propTypes = {
   ruleImplementation: PropTypes.object,
   rule: PropTypes.object,
   segmentResults: PropTypes.object,
+  customColumns: PropTypes.array,
   isAdmin: PropTypes.bool,
 };
 
@@ -96,6 +106,10 @@ const mapStateToProps = (state) => ({
   rule: state.rule,
   ruleImplementation: state.ruleImplementation,
   segmentResults: state.segmentResults,
+  customColumns: getCustomColumnsWithData(
+    state.segmentResults,
+    getSegmentResultsColumns(state)
+  ),
   isAdmin: state.authentication.role === "admin",
 });
 

package/src/components/RuleResultsRoutes.js

@@ -4,7 +4,7 @@ import { Segment } from "semantic-ui-react";
 import {
   RULE_IMPLEMENTATION_RESULT_DETAILS,
   RULE_IMPLEMENTATION_RESULT_SEGMENTS_RESULTS,
-  RULE_IMPLEMENTATION_RESULT_DETAILS_REMEDIATION_PLAN,
+  RULE_IMPLEMENTATION_RESULT_REMEDIATION_PLAN,
 } from "@truedat/core/routes";
 
 import RuleResult from "./RuleResult";
@@ -52,7 +52,7 @@ export const RuleResultsRoutes = ({}) => {
       />
       <Route
         exact
-        path={RULE_IMPLEMENTATION_RESULT_DETAILS_REMEDIATION_PLAN}
+        path={RULE_IMPLEMENTATION_RESULT_REMEDIATION_PLAN}
         render={() => (
           <>
             <Segment>

package/src/components/RuleRoutes.js

@@ -1,5 +1,6 @@
 import _ from "lodash/fp";
 import React from "react";
+import { useParams } from "react-router-dom";
 import PropTypes from "prop-types";
 import { Route, useRouteMatch } from "react-router-dom";
 import { connect } from "react-redux";
@@ -51,6 +52,7 @@ import RuleImplementationsFromRuleLoader from "./RuleImplementationsFromRuleLoad
 import RuleLoader from "./RuleLoader";
 import RuleProperties from "./RuleProperties";
 import RuleSubscriptionLoader from "./RuleSubscriptionLoader";
+import RuleResultRemediationLoader from "./RuleResultRemediationLoader";
 
 const DomainsLoader = React.lazy(() =>
   import("@truedat/bg/taxonomy/components/DomainsLoader")
@@ -227,6 +229,8 @@ const ImplementationRoutes = ({
 }) => {
   const latest = _.head(ruleImplementation.results);
   const authorized = useAuthorized();
+  const { rule_result_id: ruleResultId } = useParams();
+
   return (
     <>
       <Route
@@ -425,7 +429,15 @@ const ImplementationRoutes = ({
             />
             <Route
               path={RULE_IMPLEMENTATION_RESULT_DETAILS}
-              render={() => <RuleResultsRoutes />}
+              render={() => (
+                <>
+                  <RuleResultRemediationLoader
+                    propRuleResultId={ruleResultId}
+                  />
+                  <TemplatesLoader scope="remediation" />
+                  <RuleResultsRoutes />
+                </>
+              )}
             />
           </>
         )}

package/src/components/__test_samples__/NewRuleImplementationProps.js

@@ -245,9 +245,6 @@ export const newRuleImplementationProps = {
           external_id:
             "/home/alberto/projects/connectors/td-connector-txt-files/data/########_D_PELAYO_POLIZAS_20201202033016_I.txt[Agencia]",
           id: 4814766,
-          metadata: {
-            order: "6",
-          },
           name: "Agencia",
           path: ["Area_Vida", "########_D_PELAYO_POLIZAS_20201202033016_I.txt"],
           system: {

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

@@ -1,5 +1,4 @@
 import React, { Suspense } from "react";
-// import { shallow } from "enzyme";
 import { render } from "@truedat/test/render";
 import { NewRuleImplementation } from "../NewRuleImplementation";
 import { newRuleImplementationProps } from "../__test_samples__/NewRuleImplementationProps";

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import messages from "@truedat/dq/messages";
+import { RuleImplementationResultTabs } from "../RuleImplementationResultTabs";
+
+describe("<RuleImplementationResultTabs />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        ...messages.en,
+      },
+    },
+  };
+
+  const props = {
+    rule: { id: 8 },
+    ruleImplementation: { id: 1 },
+    match: { path: "" },
+    canCreateLink: true,
+    ruleResult: { id: 2 },
+    authCreateRemediation: true,
+  };
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <RuleImplementationResultTabs {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,34 @@
+import React, { Suspense } from "react";
+import { render } from "@truedat/test/render";
+import messages from "@truedat/dq/messages";
+import { RuleResult } from "../RuleResult";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+}));
+
+const renderOpts = {
+  messages: {
+    en: {
+      ...messages.en,
+    },
+  },
+};
+
+describe("<RuleResult>", () => {
+  it("matches the latest snapshot", () => {
+    const props = {
+      ruleImplementation: {
+        results: [{ foo: "bar", id: 100, details: { Query: "ImZvbyI=" } }],
+      },
+      ruleResultId: 123,
+    };
+    const { container } = render(
+      <Suspense fallback={null}>
+        <RuleResult {...props} />
+      </Suspense>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { mount } from "enzyme";
+import { RuleResultRemediationLoader } from "../RuleResultRemediationLoader";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ propRuleResultId: 123 }),
+}));
+
+describe("<RuleResultRemediationLoader />", () => {
+  it("calls fetchRemediation when component mounts but not when it unmounts", () => {
+    const props = {
+      clearRemediation: jest.fn(),
+      fetchRemediation: jest.fn(),
+      propRuleResultId: 123,
+    };
+    const wrapper = mount(<RuleResultRemediationLoader {...props} />);
+    expect(props.fetchRemediation.mock.calls.length).toBe(1);
+    wrapper.unmount();
+    expect(props.fetchRemediation.mock.calls.length).toBe(1);
+  });
+
+  it("calls clearRemediation when component unmounts but not when it mounts", () => {
+    const props = {
+      clearRemediation: jest.fn(),
+      fetchRemediation: jest.fn(),
+    };
+    const wrapper = mount(<RuleResultRemediationLoader {...props} />);
+    expect(props.clearRemediation.mock.calls.length).toBe(0);
+    wrapper.unmount();
+    expect(props.clearRemediation.mock.calls.length).toBe(1);
+  });
+});

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import messages from "@truedat/dq/messages";
+import { RuleResultRemediations } from "../RuleResultRemediations";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ rule_result_id: 1 }),
+}));
+
+const renderOpts = {
+  messages: {
+    en: {
+      ...messages.en,
+    },
+  },
+};
+
+describe("<RuleResultRemediations />", () => {
+  it("renders remediation plan if has rule result", () => {
+    const props = {
+      ruleImplementation: {
+        id: 23,
+        minimum: 1,
+        goal: 10,
+        result_type: "percentage",
+        results: [
+          {
+            date: "2021-06-03T05:44:00Z",
+            details: {},
+            id: 65599,
+            implementation_id: 852,
+            result: "80.00",
+            result_type: "percentage",
+          },
+          {
+            date: "2021-06-03T05:44:00Z",
+            details: {},
+            id: 65600,
+            implementation_id: 852,
+            result: "80.00",
+            result_type: "percentage",
+          },
+        ],
+      },
+      ruleResultId: 65599,
+    };
+
+    const { container } = render(
+      <RuleResultRemediations {...props} />,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { RuleResultsRoutes } from "../RuleResultsRoutes";
+
+describe("<RuleResultsRoutes>", () => {
+  const props = {};
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<RuleResultsRoutes {...props} />, {});
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,183 @@
+import _ from "lodash/fp";
+import React from "react";
+import { shallow } from "enzyme";
+import { intl } from "@truedat/test/intl-stub";
+import { RuleResultSegmentRow } from "../RuleResultSegmentRow";
+
+// workaround for enzyme issue with React.useContext
+// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
+jest.spyOn(React, "useContext").mockImplementation(() => intl);
+
+describe("<RuleResultSegmentRow />", () => {
+  it("renders customColumns values when passed", () => {
+    const RuleResultSegmentRowProps = {
+      rule: { id: 10 },
+      segmentResult: {
+        id: 54,
+        result: 80,
+        params: { p1: "1", p2: "2", p3: "no", segment_name: "foo" },
+      },
+      customColumns: [
+        {
+          name: "m_parm1",
+          fieldSelector: _.path("params.p1"),
+        },
+        {
+          name: "m_parm2",
+          fieldSelector: _.path("params.p2"),
+        },
+      ],
+      date: "2019-08-12T02:00:00Z",
+      ruleImplementation: {
+        id: 23,
+        minimum: 1,
+        goal: 10,
+        result_type: "percentage",
+      },
+    };
+
+    const wrapper = shallow(
+      <RuleResultSegmentRow {...RuleResultSegmentRowProps} />
+    );
+
+    const customColumn = wrapper
+      .find("TableRow")
+      .find("TableCell")
+      .at(2)
+      .props().children;
+
+    expect(customColumn).toBe("1");
+
+    const customColumn2 = wrapper
+      .find("TableRow")
+      .find("TableCell")
+      .at(3)
+      .props().children;
+
+    expect(customColumn2).toBe("2");
+
+    expect(wrapper.find("TableRow").find("TableCell")).toHaveLength(4);
+  });
+
+  it("green icon when result is over goal", () => {
+    const RuleResultSegmentRowProps = {
+      rule: { id: 10 },
+      segmentResult: { id: 54, result: 80, params: { segment_name: "foo" } },
+
+      date: "2019-08-12T02:00:00Z",
+      ruleImplementation: {
+        id: 23,
+        minimum: 1,
+        goal: 10,
+        result_type: "percentage",
+      },
+    };
+
+    const wrapper = shallow(
+      <RuleResultSegmentRow {...RuleResultSegmentRowProps} />
+    );
+    const cell = wrapper.find("TableRow").find("TableCell").at(1).dive();
+
+    expect(cell.find("td").find("Icon")).toHaveLength(1);
+
+    const icon = cell.find("td").find("Icon").at(0);
+
+    expect(icon.props().color).toBe("green");
+  });
+
+  it("red icon when result is under minimum", () => {
+    const RuleResultSegmentRowProps = {
+      rule: { id: 10 },
+      segmentResult: { id: 54, result: 80, params: { segment_name: "foo" } },
+      date: "2019-08-12T02:00:00Z",
+      ruleImplementation: {
+        id: 23,
+        minimum: 81,
+        goal: 90,
+        result_type: "percentage",
+      },
+    };
+
+    const wrapper = shallow(
+      <RuleResultSegmentRow {...RuleResultSegmentRowProps} />
+    );
+    const cell = wrapper.find("TableRow").find("TableCell").at(1).dive();
+
+    expect(cell.find("td").find("Icon")).toHaveLength(1);
+
+    const icon = cell.find("td").find("Icon").at(0);
+
+    expect(icon.props().color).toBe("red");
+  });
+
+  it("yellow icon when result is between minimum and goal", () => {
+    const RuleResultSegmentRowProps = {
+      rule: { id: 10 },
+      ruleImplementation: {
+        id: 23,
+        minimum: 81,
+        goal: 90,
+        result_type: "percentage",
+      },
+      segmentResult: { id: 54, result: 82, params: { segment_name: "foo" } },
+      date: "2019-08-12T02:00:00Z",
+    };
+
+    const wrapper = shallow(
+      <RuleResultSegmentRow {...RuleResultSegmentRowProps} />
+    );
+    const cell = wrapper.find("TableRow").find("TableCell").at(1).dive();
+
+    expect(cell.find("td").find("Icon")).toHaveLength(1);
+
+    const icon = cell.find("td").find("Icon").at(0);
+
+    expect(icon.props().color).toBe("yellow");
+  });
+
+  it("renders delete cell in RuleResultSegmentRow when user isAdmin is true", () => {
+    const RuleResultSegmentRowProps = {
+      rule: { id: 10 },
+      ruleImplementation: {
+        id: 23,
+        minimum: 81,
+        goal: 90,
+        result_type: "percentage",
+      },
+      segmentResult: { id: 54, result: 82, params: { segment_name: "foo" } },
+      date: "2019-08-12T02:00:00Z",
+      isAdmin: true,
+      deleteRuleResult: jest.fn(),
+    };
+    const wrapper = shallow(
+      <RuleResultSegmentRow {...RuleResultSegmentRowProps} />
+    );
+    const modal = wrapper
+      .find("TableRow")
+      .find("TableCell")
+      .at(2)
+      .find("ConfirmModal");
+    expect(modal).toHaveLength(1);
+  });
+
+  it("does not render delete cell in RuleResultSegmentRow when user isAdmin is false", () => {
+    const RuleResultSegmentRowProps = {
+      rule: { id: 10 },
+      ruleImplementation: {
+        id: 23,
+        minimum: 81,
+        goal: 90,
+        result_type: "percentage",
+      },
+      segmentResult: { id: 54, result: 82, params: { segment_name: "foo" } },
+      date: "2019-08-12T02:00:00Z",
+      isAdmin: false,
+      deleteRuleResult: jest.fn(),
+    };
+    const wrapper = shallow(
+      <RuleResultSegmentRow {...RuleResultSegmentRowProps} />
+    );
+    const modal = wrapper.find("ConfirmModal");
+    expect(modal).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,68 @@
+import _ from "lodash/fp";
+import React from "react";
+import { shallow } from "enzyme";
+import { intl } from "@truedat/test/intl-stub";
+import {
+  RuleResultSegments,
+  getCustomColumnsWithData,
+} from "../RuleResultSegments";
+
+// workaround for enzyme issue with React.useContext
+// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
+jest.spyOn(React, "useContext").mockImplementation(() => intl);
+
+describe("<RuleResultSegments />", () => {
+  const rule = {
+    result_type: "percentage",
+    minimum: 50,
+    goal: 100,
+  };
+  const ruleImplementation = {
+    results: [{ foo: "bar" }],
+  };
+  const customColumns = [{ foo: "bar", name: "foo" }];
+  const props = {
+    rule,
+    ruleImplementation,
+    customColumns,
+  };
+
+  it("matches the latest snapshot", () => {
+    const wrapper = shallow(<RuleResultSegments {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe("getCustomColumnsWithData", () => {
+  it("filters custom columns discarding the ones not present in rule results params", () => {
+    const segmentResults = [
+      { result: 80, params: { p1: "1", p2: "2" } },
+      { result: 45 },
+      { result: 20, params: { p1: "2" } },
+    ];
+    const customColumns = [
+      {
+        name: "p1",
+        fieldSelector: _.path("params.p1"),
+      },
+      {
+        name: "p2",
+        fieldSelector: _.path("params.p2"),
+      },
+      {
+        name: "p3",
+        fieldSelector: _.path("params.p3"),
+      },
+    ];
+
+    const filteredColumns = getCustomColumnsWithData(
+      segmentResults,
+      customColumns
+    );
+    const columnNames = _.map("name")(filteredColumns);
+
+    expect(_.includes("p1")(columnNames)).toBe(true);
+    expect(_.includes("p2")(columnNames)).toBe(true);
+    expect(_.includes("p3")(columnNames)).toBe(false);
+  });
+});

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

@@ -104,23 +104,6 @@ exports[`<NewRuleImplementation /> calculate aliases when not informed 1`] = `
                   </div>
                 </div>
               </div>
-              <div
-                class="step"
-              >
-                <i
-                  aria-hidden="true"
-                  class="grid layout icon"
-                />
-                <div
-                  class="content"
-                >
-                  <div
-                    class="title"
-                  >
-                    Segments
-                  </div>
-                </div>
-              </div>
             </div>
             <div
               class="ui fitted hidden divider"
@@ -886,23 +869,6 @@ exports[`<NewRuleImplementation /> matches the latest snapshot 1`] = `
                   </div>
                 </div>
               </div>
-              <div
-                class="step"
-              >
-                <i
-                  aria-hidden="true"
-                  class="grid layout icon"
-                />
-                <div
-                  class="content"
-                >
-                  <div
-                    class="title"
-                  >
-                    Segments
-                  </div>
-                </div>
-              </div>
             </div>
             <div
               class="ui fitted hidden divider"

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RuleImplementationResultTabs /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui pointing secondary top attached tabular menu"
+  >
+    <a
+      class="item"
+      href="/rules/8/implementations/1/results/2"
+    >
+      Information
+    </a>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RuleResult> matches the latest snapshot 1`] = `<div />`;

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RuleResultRemediations /> renders remediation plan if has rule result 1`] = `<div />`;

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RuleResultsRoutes> matches the latest snapshot 1`] = `<div />`;

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RuleResultSegments /> matches the latest snapshot 1`] = `""`;

package/src/components/ruleImplementationForm/RuleImplementationForm.js

@@ -46,6 +46,7 @@ export const RuleImplementationForm = ({
   setImplementationKey,
   setValidations,
   addSegments,
+  authManageSegments,
   setSegments,
   isSubmitting,
   handleSubmit,
@@ -60,12 +61,14 @@ export const RuleImplementationForm = ({
     { name: "dataset", icon: "database", isValid: () => validDataSet() },
     { name: "populations", icon: "user", isValid: () => validPopulations() },
     { name: "validations", icon: "setting", isValid: () => validValidations() },
-    {
+  ];
+
+  if (authManageSegments)
+    steps.push({
       name: "segments",
       icon: "grid layout",
       isValid: () => validSegments(),
-    },
-  ];
+    });
 
   const [activeStep, setActiveStep] = useState("information");
   const [selector, setSelector] = useState();
@@ -336,6 +339,8 @@ export const RuleImplementationForm = ({
 };
 
 RuleImplementationForm.propTypes = {
+  isAdmin: PropTypes.bool,
+  userRulesPermissions: PropTypes.object,
   ruleImplementation: PropTypes.object,
   handleSubmit: PropTypes.func.isRequired,
   isSubmitting: PropTypes.bool.isRequired,
@@ -346,6 +351,7 @@ RuleImplementationForm.propTypes = {
   setValidations: PropTypes.func,
   setSegments: PropTypes.func,
   addSegments: PropTypes.func,
+  authManageSegments: PropTypes.bool,
   operators: PropTypes.object,
   onChange: PropTypes.func,
   template: PropTypes.object,
@@ -354,6 +360,10 @@ RuleImplementationForm.propTypes = {
 const mapStateToProps = (state) => ({
   isSubmitting: state.ruleImplementationCreating,
   template: state.template,
+  authManageSegments: _.pathOr(
+    false,
+    "manage_segments"
+  )(state.userRulesPermissions),
 });
 
 export default connect(mapStateToProps)(RuleImplementationForm);

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

@@ -79,23 +79,6 @@ exports[`<RuleImplementationForm /> matches the latest snapshot 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="step"
-        >
-          <i
-            aria-hidden="true"
-            class="grid layout icon"
-          />
-          <div
-            class="content"
-          >
-            <div
-              class="title"
-            >
-              ruleImplementationForm.step.segments
-            </div>
-          </div>
-        </div>
       </div>
       <div
         class="ui fitted hidden divider"

package/src/selectors/getSegmentResultsColumns.js

@@ -0,0 +1,9 @@
+import _ from "lodash/fp";
+import { createSelector } from "reselect";
+
+export const defaultSegmentResultsColumns = [];
+
+export const getSegmentResultsColumns = createSelector(
+  _.prop("segmentResultsColumns"),
+  _.defaultTo(defaultSegmentResultsColumns)
+);

package/src/selectors/index.js

@@ -27,5 +27,6 @@ export { getRuleImplementationAvailableFilters } from "./getRuleImplementationAv
 export { getRuleImplementationSelectedFilters } from "./getRuleImplementationSelectedFilters";
 export { getRuleImplementationSelectedFilterValues } from "./getRuleImplementationSelectedFilterValues";
 export { getRuleImplementationSelectedFilterActiveValues } from "./getRuleImplementationSelectedFilterActiveValues";
+export { getSegmentResultsColumns } from "./getSegmentResultsColumns";
 export * from "./getImplementationStructures";
 export { getParsedEvents } from "./getParsedEvents";