@truedat/dq 4.46.4 → 4.46.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.46.7] 2022-06-20
+
+### Added
+
+- [TD-4919] Add ruleImplementation History
+
+## [4.46.5] 2022-06-17
+
+### Added
+
+- [TD-4894] Multiple column operator in implementation creation
+
 ## [4.46.3] 2022-06-16
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.46.4",
+  "version": "4.46.7",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.46.4",
+    "@truedat/test": "4.46.7",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,8 +88,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.4",
-    "@truedat/core": "4.46.4",
-    "@truedat/df": "4.46.4",
+    "@truedat/core": "4.46.7",
+    "@truedat/df": "4.46.7",
     "axios": "^0.19.2",
     "graphql": "^15.5.3",
     "path-to-regexp": "^1.7.0",
@@ -110,5 +110,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "dcd0aa42ffe1fb816945154ec2a2d06889dca7e7"
+  "gitHead": "2b1c3f0fcf94a7b510f171c06cfb2e1550a14166"
 }

package/src/api/queries.js

@@ -0,0 +1,16 @@
+import { gql } from "@apollo/client";
+
+export const IMPLEMENTATION_WITH_VERSIONS_QUERY = gql`
+  query Implementation($id: ID!) {
+    implementation(id: $id) {
+      id
+      versions {
+        id
+        implementation_key
+        version
+        status
+        updated_at
+      }
+    }
+  }
+`;

package/src/components/ConditionSummary.js

@@ -8,23 +8,41 @@ import { linkTo } from "@truedat/core/routes";
 
 const concatValues = (values, link) => _.join(link)(values);
 
-const FormattedLink = ({ value, operator = {} }) =>
-  _.propEq("value_type", "field")(operator) ? (
+const LinkToStructure = ({ value }) => {
+  return value?.id ? (
     <Link to={linkTo.STRUCTURE({ id: value.id })}>
       <span className="highlighted">{`"${
         !_.isEmpty(value.path) ? path(value) : value.name
       }"`}</span>{" "}
     </Link>
-  ) : (
-    <span className="highlighted">
-      <FormattedMessage
-        id={`ruleImplementation.filtersField.${value.raw}`}
-        defaultMessage={`"${
-          _.isArray(value.raw) ? _.join(", ")(value.raw) : value.raw
-        }"`}
-      ></FormattedMessage>
-    </span>
-  );
+  ) : null;
+};
+
+const FormattedLink = ({ value, operator = {} }) => {
+  switch (operator?.value_type) {
+    case "field":
+      return <LinkToStructure value={value} />;
+    case "field_list":
+      return (
+        <>
+          {_.map.convert({ cap: false })((v, i) => (
+            <LinkToStructure key={i} value={v} />
+          ))(value)}
+        </>
+      );
+    default:
+      return (
+        <span className="highlighted">
+          <FormattedMessage
+            id={`ruleImplementation.filtersField.${value.raw}`}
+            defaultMessage={`"${
+              _.isArray(value.raw) ? _.join(", ")(value.raw) : value.raw
+            }"`}
+          ></FormattedMessage>
+        </span>
+      );
+  }
+};
 
 FormattedLink.propTypes = {
   value: PropTypes.object,
@@ -33,26 +51,52 @@ FormattedLink.propTypes = {
 
 const nilOrEmpty = (v) => _.isNil(v) || v === "";
 
-const filterNilOrEmpties = (values, keys) =>
-  _.filter((v) => _.every((k) => !nilOrEmpty(_.prop(k)(v.kv)))(keys))(values);
+const filterNilOrEmpties = (values, keys) => {
+  if ("kv" in values) {
+    return _.every((k) => !nilOrEmpty(values.kv[k]))(keys) ? values : null;
+  }
 
-const valuesFromKeys = (values, keys, optionalKeys, value_modifier) =>
-  _.flow(
-    _.map((v) => {
-      return { kv: _.pick(keys)(v), optv: _.pick(optionalKeys)(v) };
+  return _.flow(
+    _.map((v) => filterNilOrEmpties(v, keys)),
+    _.filter((v) => !!v)
+  )(values);
+};
+
+const pick = (value, keys, optionalKeys) => ({
+  kv: _.pick(keys)(value),
+  optv: _.pick(optionalKeys)(value),
+});
+
+const convert = (v, index, value_modifier) => {
+  if (_.has("kv")(v)) {
+    return { ...v.kv, ...v.optv, modifier: _.nth(index)(value_modifier) };
+  }
+
+  return _.map.convert({ cap: false })((v, i) => {
+    return convert(v, i, value_modifier);
+  })(v);
+};
+
+const valuesFromKeys = (values, keys, optionalKeys, value_modifier) => {
+  return _.flow(
+    _.map((value) => {
+      return Array.isArray(value?.fields)
+        ? _.map((innerValue) => pick(innerValue, keys, optionalKeys))(
+            value?.fields
+          )
+        : pick(value, keys, optionalKeys);
     }),
     (v) => filterNilOrEmpties(v, keys),
-    _.map.convert({ cap: false })((v, i) => {
-      return { ...v.kv, ...v.optv, modifier: _.nth(i)(value_modifier) };
-    })
+    (v) => convert(v, 0, value_modifier)
   )(values);
+};
 
 export const empty = (rows) =>
   rows && _.every((r) => _.isEmpty(r) || _.isNil(r))(rows);
 
 export const getValues = ({ value = [], operator = {}, value_modifier }) => {
   const defaultOrValue = value || [];
-  return _.propEq("value_type", "field")(operator)
+  return ["field", "field_list"].includes(operator?.value_type)
     ? valuesFromKeys(defaultOrValue, ["id", "name"], ["path"], value_modifier)
     : valuesFromKeys(defaultOrValue, ["raw"], [], value_modifier);
 };

package/src/components/ImplementationsRoutes.js

@@ -12,6 +12,7 @@ import {
   IMPLEMENTATION_CONCEPT_LINKS,
   IMPLEMENTATION_EDIT,
   IMPLEMENTATION_EVENTS,
+  IMPLEMENTATION_HISTORY,
   IMPLEMENTATION_MOVE,
   IMPLEMENTATION_NEW,
   IMPLEMENTATION_NEW_RAW,
@@ -36,6 +37,7 @@ import MoveImplementation from "./MoveImplementation";
 import NewRuleImplementation from "./NewRuleImplementation";
 import RuleImplementation from "./RuleImplementation";
 import RuleImplementationEvents from "./RuleImplementationEvents";
+import RuleImplementationHistory from "./RuleImplementationHistory";
 import RuleImplementationLoader from "./RuleImplementationLoader";
 import RuleImplementationProperties from "./RuleImplementationProperties";
 import RuleImplementationResults from "./RuleImplementationResults";
@@ -312,6 +314,23 @@ export const ImplementationsRoutes = ({
                 </>
               )}
             />
+            <Route
+              exact
+              path={IMPLEMENTATION_HISTORY}
+              render={() => (
+                <>
+                  <ImplementationCrumbs />
+                  <Segment>
+                    {ruleImplementationLoaded ? (
+                      <RuleImplementation>
+                        <RuleImplementationHistory />
+                      </RuleImplementation>
+                    ) : null}
+                  </Segment>
+                </>
+              )}
+            />
+
             <Route
               exact
               path={IMPLEMENTATION_RESULTS_DETAILS}

package/src/components/NewRuleImplementation.js

@@ -25,6 +25,24 @@ const updateDatasetKey = (data) =>
     {}
   )(data);
 
+// https://stackoverflow.com/a/38417085
+const updateValueKeyValue = (object) => {
+  if (object?.id || object?.raw || object?.fields) {
+    return object?.id
+      ? _.pick(["id", "parent_index"])(object)
+      : _.pick(["raw", "fields"])(object);
+  }
+
+  return Object.keys(object).reduce(
+    (output, key) => {
+      // eslint-disable-next-line fp/no-mutation
+      output[key] = updateValueKeyValue(object[key]);
+      return output;
+    },
+    Array.isArray(object) ? [] : {}
+  );
+};
+
 const updateConditionValue = (acc, value, key) => {
   if (key === "structure") {
     return _.set(key, _.pick(["id", "parent_index"])(value))(acc);
@@ -49,12 +67,10 @@ const updateConditionValue = (acc, value, key) => {
       )
     )(acc);
   if (key == "value")
-    return _.set(
-      key,
-      _.map((v) =>
-        _.has("id")(v) ? _.pick(["id", "parent_index"])(v) : _.pick(["raw"])(v)
-      )(value)
-    )(acc);
+    return {
+      ...acc,
+      value: updateValueKeyValue(value),
+    };
   if (key === "population") return _.set(key, conditionAttributes(value))(acc);
 
   return acc;
@@ -103,6 +119,7 @@ const fieldTypeFromStructure = (row, structures, operators, scope) => {
     field_type,
     _.prop("operator")(row)
   );
+
   const updatedRow = {
     ...row,
     operator,

package/src/components/RuleImplementationHistory.js

@@ -0,0 +1,84 @@
+import _ from "lodash/fp";
+import React from "react";
+import { useParams } from "react-router-dom";
+import { useQuery } from "@apollo/client";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Segment, Grid, Table } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { Loading } from "@truedat/core/components";
+import { IMPLEMENTATION_WITH_VERSIONS_QUERY } from "../api/queries";
+
+import RuleImplementationHistoryRow from "./RuleImplementationHistoryRow";
+
+export const RuleImplementationHistory = ({ implementation }) => (
+  <Segment attached="bottom">
+    <Grid>
+      <Grid.Row>
+        <Grid.Column>
+          {!_.isEmpty(implementation) && (
+            <Table selectable>
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeaderCell
+                    content={
+                      <FormattedMessage id="ruleImplementations.props.implementation_key" />
+                    }
+                  />
+                  <Table.HeaderCell
+                    content={
+                      <FormattedMessage id="ruleImplementations.props.status" />
+                    }
+                  />
+                  <Table.HeaderCell
+                    content={
+                      <FormattedMessage id="ruleImplementations.props.version" />
+                    }
+                  />
+                  <Table.HeaderCell
+                    content={
+                      <FormattedMessage id="ruleImplementations.props.last_change_at" />
+                    }
+                  />
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {implementation?.versions.map((item, i) => (
+                  <RuleImplementationHistoryRow
+                    key={i}
+                    {...item}
+                    active={item.id == implementation.id}
+                  />
+                ))}
+              </Table.Body>
+            </Table>
+          )}
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
+  </Segment>
+);
+
+RuleImplementationHistory.propTypes = {
+  implementation: PropTypes.object,
+};
+
+export const RuleImplementationHistoryLoader = (props) => {
+  const { implementation_id: id } = useParams();
+  const { loading, error, data } = useQuery(
+    IMPLEMENTATION_WITH_VERSIONS_QUERY,
+    {
+      variables: { id },
+    }
+  );
+  if (error) return null;
+  if (loading) return <Loading />;
+  const implementation = data?.implementation;
+  return (
+    <RuleImplementationHistory implementation={implementation} {...props} />
+  );
+};
+
+export default connect(null, { RuleImplementationHistory })(
+  RuleImplementationHistoryLoader
+);

package/src/components/RuleImplementationHistoryRow.js

@@ -0,0 +1,50 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useHistory } from "react-router-dom";
+import { Table } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { DateTime } from "@truedat/core/components";
+import { linkTo } from "@truedat/core/routes";
+
+export const RuleImplementationHistoryRow = ({
+  id,
+  status,
+  updated_at,
+  version,
+  implementation_key,
+  active,
+}) => {
+  const history = useHistory();
+  return (
+    <Table.Row
+      active={active}
+      onClick={() =>
+        history.push(linkTo.IMPLEMENTATION({ implementation_id: id }))
+      }
+    >
+      <Table.Cell content={implementation_key} />
+      <Table.Cell
+        content={
+          <FormattedMessage
+            id={`concepts.status.${status}`}
+            defaultMessage={status}
+          />
+        }
+      />
+      <Table.Cell content={version} />
+      <Table.Cell content={<DateTime value={updated_at} />} />
+    </Table.Row>
+  );
+};
+
+RuleImplementationHistoryRow.propTypes = {
+  id: PropTypes.number,
+  implementation_key: PropTypes.string,
+  status: PropTypes.string,
+  updated_at: PropTypes.string,
+  version: PropTypes.number,
+  active: PropTypes.bool,
+};
+
+export default RuleImplementationHistoryRow;

package/src/components/RuleImplementationLoader.js

@@ -1,48 +1,36 @@
-import React from "react";
-import { withRouter } from "react-router-dom";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import { compose } from "redux";
 import { connect } from "react-redux";
+import { useParams } from "react-router-dom";
 import { Loading } from "@truedat/core/components";
 import { clearRuleImplementation, fetchRuleImplementation } from "../routines";
 
-export class RuleImplementationLoader extends React.Component {
-  static propTypes = {
-    fetchRuleImplementation: PropTypes.func,
-    clearRuleImplementation: PropTypes.func,
-    match: PropTypes.object,
-    ruleImplementationLoading: PropTypes.bool,
-  };
+export const RuleImplementationLoader = ({
+  clearRuleImplementation,
+  fetchRuleImplementation,
+  ruleImplementationLoading: loading,
+}) => {
+  const { implementation_id } = useParams();
+  useEffect(() => {
+    fetchRuleImplementation({ id: implementation_id });
+    return () => {
+      clearRuleImplementation();
+    };
+  }, [implementation_id, clearRuleImplementation, fetchRuleImplementation]);
+  return loading ? <Loading /> : null;
+};
 
-  componentDidMount() {
-    const { fetchRuleImplementation, match } = this.props;
-    const { implementation_id } = match.params;
-    if (implementation_id) {
-      fetchRuleImplementation({ id: implementation_id });
-    }
-  }
-
-  componentWillUnmount() {
-    const { clearRuleImplementation } = this.props;
-    clearRuleImplementation();
-  }
-
-  render() {
-    const { ruleImplementationLoading } = this.props;
-
-    if (ruleImplementationLoading) {
-      return <Loading />;
-    } else {
-      return null;
-    }
-  }
-}
+RuleImplementationLoader.propTypes = {
+  fetchRuleImplementation: PropTypes.func,
+  clearRuleImplementation: PropTypes.func,
+  ruleImplementationLoading: PropTypes.bool,
+};
 
 const mapStateToProps = ({ ruleImplementationLoading }) => ({
   ruleImplementationLoading,
 });
 
-export default compose(
-  withRouter,
-  connect(mapStateToProps, { clearRuleImplementation, fetchRuleImplementation })
-)(RuleImplementationLoader);
+export default connect(mapStateToProps, {
+  clearRuleImplementation,
+  fetchRuleImplementation,
+})(RuleImplementationLoader);

package/src/components/RuleImplementationTabs.js

@@ -7,14 +7,15 @@ import { compose } from "redux";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
 import {
-  IMPLEMENTATION_EVENTS,
-  IMPLEMENTATION_CONCEPT_LINKS,
   IMPLEMENTATION_CONCEPT_LINKS_NEW,
-  IMPLEMENTATION_STRUCTURES,
-  IMPLEMENTATION_STRUCTURES_NEW,
+  IMPLEMENTATION_CONCEPT_LINKS,
+  IMPLEMENTATION_EVENTS,
+  IMPLEMENTATION_HISTORY,
   IMPLEMENTATION_MOVE,
   IMPLEMENTATION_RESULTS_DETAILS,
   IMPLEMENTATION_RESULTS,
+  IMPLEMENTATION_STRUCTURES_NEW,
+  IMPLEMENTATION_STRUCTURES,
   IMPLEMENTATION,
   linkTo,
 } from "@truedat/core/routes";
@@ -94,6 +95,16 @@ export const RuleImplementationTabs = ({
           <FormattedMessage id="tabs.dq.ruleImplementation.details" />
         </Menu.Item>
       )}
+      <Menu.Item
+        active={match.path === IMPLEMENTATION_HISTORY}
+        as={Link}
+        to={linkTo.IMPLEMENTATION_HISTORY({
+          implementation_id: ruleImplementation.id,
+        })}
+      >
+        <FormattedMessage id="tabs.dq.ruleImplementation.history" />
+      </Menu.Item>
+
       <Menu.Item
         active={match.path === IMPLEMENTATION_EVENTS}
         as={Link}

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { RuleImplementationHistory } from "../RuleImplementationHistory";
+
+describe("<RuleImplementationHistory", () => {
+  const implementation_id = 23;
+  const props = {
+    implementation: {
+      id: implementation_id,
+      versions: [
+        {
+          id: 34,
+          implementation_key: "some implementation key 34",
+          version: 3,
+          status: "draft",
+          updated_at: "2022-02-10T15:22:07Z",
+        },
+        {
+          id: implementation_id,
+          implementation_key: "some implementation key " + implementation_id,
+          version: 2,
+          status: "published",
+          updated_at: "2022-02-10T15:22:07Z",
+        },
+        {
+          id: 22,
+          implementation_key: "some implementation key 22",
+          version: 1,
+          status: "versioned",
+          updated_at: "2022-02-10T15:22:07Z",
+        },
+      ],
+    },
+  };
+
+  const renderOpts = {
+    messages: {
+      en: {
+        "ruleImplementations.props.implementation_key": "key",
+        "ruleImplementations.props.status": "status",
+        "ruleImplementations.props.version": "version",
+        "ruleImplementations.props.last_change_at": "change",
+      },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <RuleImplementationHistory {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -1,67 +1,57 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { RuleImplementationLoader } from "../RuleImplementationLoader";
 
+const implementation_id = 234;
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ implementation_id: implementation_id }),
+}));
+
 describe("<RuleImplementationLoader />", () => {
-  const match = { params: { implementation_id: 1 } };
   const clearRuleImplementation = jest.fn();
   const fetchRuleImplementation = jest.fn();
+  const common_props = {
+    fetchRuleImplementation,
+    clearRuleImplementation,
+  };
 
   it("matches the latest snapshot", () => {
-    const ruleImplementationLoading = true;
     const props = {
-      fetchRuleImplementation,
-      clearRuleImplementation,
-      ruleImplementationLoading,
-      match
+      ...common_props,
+      ruleImplementationLoading: true,
     };
-    const wrapper = shallow(<RuleImplementationLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<RuleImplementationLoader {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
   it("renders a loader if rulesLoading is true", () => {
-    const ruleImplementationLoading = true;
     const props = {
-      fetchRuleImplementation,
-      clearRuleImplementation,
-      match,
-      ruleImplementationLoading
+      ...common_props,
+      ruleImplementationLoading: true,
     };
-    const wrapper = shallow(<RuleImplementationLoader {...props} />);
-    expect(wrapper.find("Loading").length).toBe(1);
+    const { container } = render(<RuleImplementationLoader {...props} />);
+    expect(container).toMatchSnapshot();
+    expect(container.firstChild).not.toBeNull();
   });
 
   it("renders null if ruleImplementationLoading is false", () => {
-    const ruleImplementationLoading = false;
     const props = {
-      fetchRuleImplementation,
-      clearRuleImplementation,
-      match,
-      ruleImplementationLoading
+      ...common_props,
+      ruleImplementationLoading: false,
     };
-    const wrapper = shallow(<RuleImplementationLoader {...props} />);
-    expect(wrapper.getElement()).toBeNull();
+    const { container } = render(<RuleImplementationLoader {...props} />);
+    expect(container.firstChild).toBeNull();
   });
 
   it("calls fetchRuleImplementation when component mounts, clearRuleImplementation when component unmounts", () => {
-    const ruleImplementationLoading = false;
-    const fetchRuleImplementation = jest.fn();
-    const clearRuleImplementation = jest.fn();
-    const props = {
-      fetchRuleImplementation,
-      clearRuleImplementation,
-      match,
-      ruleImplementationLoading
-    };
-    jest.spyOn(RuleImplementationLoader.prototype, "componentDidMount");
-    const wrapper = shallow(<RuleImplementationLoader {...props} />);
-    expect(
-      RuleImplementationLoader.prototype.componentDidMount.mock.calls.length
-    ).toBe(1);
-    expect(clearRuleImplementation.mock.calls.length).toBe(0);
-    expect(fetchRuleImplementation.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(clearRuleImplementation.mock.calls.length).toBe(1);
-    expect(fetchRuleImplementation.mock.calls.length).toBe(1);
+    clearRuleImplementation.mockClear();
+    fetchRuleImplementation.mockClear();
+    const { unmount } = render(<RuleImplementationLoader {...common_props} />);
+    expect(fetchRuleImplementation).toHaveBeenCalledWith({
+      id: implementation_id,
+    });
+    unmount();
+    expect(clearRuleImplementation).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -12,6 +12,7 @@ describe("<RuleImplementationTabs />", () => {
         "tabs.dq.ruleImplementation.results": "results",
         "tabs.dq.ruleImplementation.details": "details",
         "tabs.dq.ruleImplementation.audit": "audit",
+        "tabs.dq.ruleImplementation.history": "history",
       },
     },
   };

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

@@ -148,6 +148,12 @@ exports[`<RuleImplementation /> matches the latest snapshot 1`] = `
     >
       Results
     </a>
+    <a
+      class="item"
+      href="/implementations/1/history"
+    >
+      History
+    </a>
     <a
       class="item"
       href="/implementations/1/events"

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

@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RuleImplementationHistory matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui bottom attached segment"
+  >
+    <div
+      class="ui grid"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="column"
+        >
+          <table
+            class="ui selectable table"
+          >
+            <thead
+              class=""
+            >
+              <tr
+                class=""
+              >
+                <th
+                  class=""
+                >
+                  key
+                </th>
+                <th
+                  class=""
+                >
+                  status
+                </th>
+                <th
+                  class=""
+                >
+                  version
+                </th>
+                <th
+                  class=""
+                >
+                  change
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class=""
+            >
+              <tr
+                class=""
+              >
+                <td
+                  class=""
+                >
+                  some implementation key 34
+                </td>
+                <td
+                  class=""
+                >
+                  draft
+                </td>
+                <td
+                  class=""
+                >
+                  3
+                </td>
+                <td
+                  class=""
+                >
+                  <time
+                    datetime="1644506527000"
+                  >
+                    2022-02-10 15:22
+                  </time>
+                </td>
+              </tr>
+              <tr
+                class="active"
+              >
+                <td
+                  class=""
+                >
+                  some implementation key 23
+                </td>
+                <td
+                  class=""
+                >
+                  published
+                </td>
+                <td
+                  class=""
+                >
+                  2
+                </td>
+                <td
+                  class=""
+                >
+                  <time
+                    datetime="1644506527000"
+                  >
+                    2022-02-10 15:22
+                  </time>
+                </td>
+              </tr>
+              <tr
+                class=""
+              >
+                <td
+                  class=""
+                >
+                  some implementation key 22
+                </td>
+                <td
+                  class=""
+                >
+                  versioned
+                </td>
+                <td
+                  class=""
+                >
+                  1
+                </td>
+                <td
+                  class=""
+                >
+                  <time
+                    datetime="1644506527000"
+                  >
+                    2022-02-10 15:22
+                  </time>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -1,3 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RuleImplementationLoader /> matches the latest snapshot 1`] = `<Loading />`;
+exports[`<RuleImplementationLoader /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui active loader"
+  />
+</div>
+`;
+
+exports[`<RuleImplementationLoader /> renders a loader if rulesLoading is true 1`] = `
+<div>
+  <div
+    class="ui active loader"
+  />
+</div>
+`;

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

@@ -29,6 +29,12 @@ exports[`<RuleImplementationTabs /> matches the latest snapshot 1`] = `
     >
       results
     </a>
+    <a
+      class="item"
+      href="/implementations/1/history"
+    >
+      history
+    </a>
     <a
       class="item"
       href="/implementations/1/events"

package/src/components/ruleImplementationForm/FiltersField.js

@@ -48,6 +48,24 @@ export const FiltersField = ({
   const { value_type, value_type_filter, fixed_values } = operator;
 
   const modifierDef = _.find({ name: modifier?.name })(typeCastModifiers);
+  const pickFromValue = _.pick(["data_structure_id", "name", "parent_index"]);
+
+  const getVal = (value) => {
+    return _.isNil(_.prop("parent_index")(value))
+      ? _.prop("id")(value)
+      : `${_.prop("id")(value)}/${_.prop("parent_index")(value)}`;
+  };
+
+  const getValue = (valueOrValues, operator) => {
+    const getValueResultado =
+      operator?.value_type === "field_list"
+        ? (valueOrValues?.fields || []).map((v) => {
+            return getVal(v);
+          })
+        : getVal(valueOrValues);
+
+    return getValueResultado;
+  };
 
   switch (value_type) {
     case "string":
@@ -89,6 +107,7 @@ export const FiltersField = ({
     case "timestamp":
       return <DateTimeField label={label} value={value} onChange={onChange} />;
     case "field":
+    case "field_list":
       const structureFields = getStructureFields(parentStructures);
       return value_type_filter == "any" ? (
         <StructureSelectorInputField
@@ -111,24 +130,30 @@ export const FiltersField = ({
       ) : (
         <>
           <StructureFieldsDropdown
+            multiple={value_type === "field_list"}
             label={label}
             inline={false}
             parentStructures={parentStructures}
             structureFields={structureFields}
             typeCastModifiers={typeCastModifiers}
-            filters={{ field_type: [fieldType] }}
-            onSelectField={(value, modifier) =>
+            filters={
+              value_type === "field_list" ? null : { field_type: [fieldType] }
+            }
+            onSelectField={(value, modifier) => {
               onChange(
                 null,
-                _.pick(["data_structure_id", "name", "parent_index"])(value),
+                pickFromValue(value),
                 modifier ? { name: modifier.name } : null
-              )
-            }
-            value={
-              _.isNil(_.prop("parent_index")(value))
-                ? _.prop("id")(value)
-                : `${_.prop("id")(value)}/${_.prop("parent_index")(value)}`
-            }
+              );
+            }}
+            onSelectFields={(values) => {
+              onChange(
+                null,
+                values.map((value) => pickFromValue(value)),
+                null
+              );
+            }}
+            value={getValue(value, operator)}
           />
           {modifier && (
             <FieldModifier

package/src/components/ruleImplementationForm/FiltersFormGroup.js

@@ -65,7 +65,9 @@ export const FiltersFormGroup = ({
                 inline={false}
                 parentStructures={parentStructures}
                 structureFields={structureFields}
-                onSelectField={(value) => onStructureChange(index, value)}
+                onSelectField={(value) => {
+                  return onStructureChange(index, value /*[0]*/);
+                }}
                 value={
                   _.isNil(_.prop("parent_index")(clause?.structure))
                     ? _.prop("id")(clause?.structure)
@@ -122,7 +124,9 @@ export const FiltersFormGroup = ({
           })}
           options={operatorsOptions}
           value={getOperatorValue(clause)}
-          onClick={({ id }) => onOperatorChange(index, id)}
+          onClick={(whatever) => {
+            onOperatorChange(index, whatever.id);
+          }}
           placeholder={formatMessage({
             id: "operator.dropdown.placeholder",
           })}

package/src/components/ruleImplementationForm/FiltersGrid.js

@@ -56,13 +56,23 @@ export const FiltersGrid = ({
     });
   };
 
+  const composeFieldValue = (value) => {
+    return {
+      id: value.data_structure_id || value.id,
+      name: value.name,
+      path: value.path,
+      parent_index: value.parent_index,
+    };
+  };
+
   const composeValue = (value_type, value) => {
     if (value_type == "field") {
+      return composeFieldValue(value);
+    } else if (value_type === "field_list") {
       return {
-        id: value.data_structure_id || value.id,
-        name: value.name,
-        path: value.path,
-        parent_index: value.parent_index,
+        fields: _.map((v) => {
+          return composeFieldValue(v);
+        })(value),
       };
     } else {
       return { raw: value };

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

@@ -50,7 +50,13 @@ exports[`<FiltersFormGroup /> matches the latest snapshot 1`] = `
         <div
           class="menu transition"
           role="listbox"
-        />
+        >
+          <div
+            class="message"
+          >
+            No results found.
+          </div>
+        </div>
       </div>
     </div>
     <div

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

@@ -56,7 +56,13 @@ exports[`<FiltersGroup /> matches the latest snapshot when siblings provided 1`]
             <div
               class="menu transition"
               role="listbox"
-            />
+            >
+              <div
+                class="message"
+              >
+                No results found.
+              </div>
+            </div>
           </div>
         </div>
         <div

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

@@ -56,7 +56,13 @@ exports[`<ValueConditions /> matches the latest snapshot when siblings provided
             <div
               class="menu transition"
               role="listbox"
-            />
+            >
+              <div
+                class="message"
+              >
+                No results found.
+              </div>
+            </div>
           </div>
         </div>
         <div

package/src/messages/en.js

@@ -423,7 +423,8 @@ export default {
     "matches regular expression",
   "ruleImplementation.operator.starts_with": "starts with",
   "ruleImplementation.operator.starts_with.string": "starts with",
-  "ruleImplementation.operator.unique": "has unique value",
+  "ruleImplementation.operator.unique": "unique",
+  "ruleImplementation.operator.unique.field_list": "unique across fields",
   "ruleImplementation.operator.variation_on_count": "count variation",
   "ruleImplementation.operator.variation_on_count.string": "count variation",
   "ruleImplementation.props.esquema": "Structure",
@@ -501,6 +502,7 @@ export default {
   "ruleImplementations.events.action_restored": "Implementation restored",
   "ruleImplementations.events.action_updated": "Implementation updated",
   "ruleImplementations.props.business_concept": "Concept",
+  "ruleImplementations.props.last_change_at": "Last change at",
   "ruleImplementations.props.status": "Status",
   "ruleImplementations.props.executable": "Executable",
   "ruleImplementations.props.executable.true": "Executable",
@@ -527,6 +529,7 @@ export default {
   "ruleImplementations.props.template": "Template",
   "ruleImplementations.props.rule_template": "Rule template",
   "ruleImplementations.props.implementation_template": "Implementation template",
+  "ruleImplementations.props.version": "Version",
   "ruleImplementations.retrieved.results": "{count} implementations found",
   "ruleImplementations.search.results.empty": "No implementations found",
   "ruleImplementations.searching": "Searching implementations",
@@ -599,6 +602,7 @@ export default {
   "tabs.dq.ruleImplementation": "Implementation",
   "tabs.dq.ruleImplementation.audit": "Audit",
   "tabs.dq.ruleImplementation.details": "Details",
+  "tabs.dq.ruleImplementation.history": "History",
   "tabs.dq.ruleImplementation.results": "Results",
   "tabs.dq.ruleImplementations": "Implementations",
   "tabs.dq.ruleImplementationResult.info": "Information",

package/src/messages/es.js

@@ -435,7 +435,8 @@ export default {
   "ruleImplementation.operator.regex_format": "cumple la expresión regular",
   "ruleImplementation.operator.starts_with.string": "empieza por",
   "ruleImplementation.operator.starts_with": "empieza por",
-  "ruleImplementation.operator.unique": "tiene valor único",
+  "ruleImplementation.operator.unique": "único",
+  "ruleImplementation.operator.unique.field_list": "único en conjunto",
   "ruleImplementation.operator.variation_on_count.string": "variación conteo",
   "ruleImplementation.operator.variation_on_count": "variación conteo",
   "ruleImplementation.props.esquema.placeholder": "añade una estructura",
@@ -516,6 +517,7 @@ export default {
   "ruleImplementations.events.action_restored": "Implementación restaurada",
   "ruleImplementations.events.action_updated": "Implementación actualizada",
   "ruleImplementations.props.business_concept": "Concepto",
+  "ruleImplementations.props.last_change_at": "Fecha de última modificación",
   "ruleImplementations.props.executable.false": "Interna",
   "ruleImplementations.props.executable.true": "Ejecutable",
   "ruleImplementations.props.executable": "Ejecutable",
@@ -545,6 +547,8 @@ export default {
   "ruleImplementations.props.rule_template": "Plantilla de regla",
   "ruleImplementations.props.implementation_template":
     "Plantilla de implementación",
+    
+  "ruleImplementations.props.version": "Versión",
   "ruleImplementations.retrieved.results":
     "{count} implementaciones encontradas",
   "ruleImplementations.search.results.empty":
@@ -623,6 +627,7 @@ export default {
   "tabs.dq.rule.audit": "Auditoría",
   "tabs.dq.ruleImplementation.audit": "Auditoría",
   "tabs.dq.ruleImplementation.details": "Detalles",
+  "tabs.dq.ruleImplementation.history": "Historial",
   "tabs.dq.ruleImplementation.results": "Resultados",
   "tabs.dq.ruleImplementation": "Implementación",
   "tabs.dq.ruleImplementations": "Implementaciones",

package/src/routines.js

@@ -61,6 +61,9 @@ export const fetchRuleImplementation = createRoutine(
 export const fetchRuleImplementations = createRoutine(
   "FETCH_RULE_IMPLEMENTATIONS"
 );
+export const fetchRuleImplementationV2 = createRoutine(
+  "FETCH_RULE_IMPLEMENTATION_V2"
+);
 export const fetchRules = createRoutine("FETCH_RULES");
 export const fetchSegmentResults = createRoutine("FETCH_SEGMENT_RESULTS");
 export const openImplementationFilter = createRoutine(

package/src/selectors/getRuleImplementationOperators.js

@@ -5,6 +5,7 @@ const defaultOperators = {
   any: {
     operators: [
       { name: "unique", scope: "validation" },
+      { name: "unique", value_type: "field_list" },
       { name: "not_empty" },
       { name: "empty" },
       {