@truedat/dq 4.46.5 → 4.46.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.46.7] 2022-06-20
+
+### Added
+
+- [TD-4919] Add ruleImplementation History
+
 ## [4.46.5] 2022-06-17
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.46.5",
+  "version": "4.46.8",
   "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.5",
+    "@truedat/test": "4.46.8",
     "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.5",
-    "@truedat/df": "4.46.5",
+    "@truedat/core": "4.46.8",
+    "@truedat/df": "4.46.8",
     "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": "cc6e42515345adf2926f47216622e0fc4f7a0d86"
+  "gitHead": "44f3e7aea8153415f773f7b4f9137c11ad128b1d"
 }

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/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/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/messages/en.js

@@ -502,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",
@@ -528,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",
@@ -600,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

@@ -517,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",
@@ -546,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":
@@ -624,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(