@truedat/dq 4.53.9 → 4.53.11

package/src/components/RuleImplementationResultTabs.js

@@ -21,7 +21,7 @@ export const RuleImplementationResultTabs = ({
   templates,
 }) => {
   const renderSegmentResult = () => {
-    return ruleResult.has_segments ? (
+    return ruleResult.hasSegments ? (
       <Menu.Item
         active={match.path === IMPLEMENTATION_RESULT_SEGMENTS_RESULTS}
         as={Link}
@@ -37,7 +37,7 @@ export const RuleImplementationResultTabs = ({
 
   const renderRemediationPlan = () => {
     const canCreateRemediation = authCreateRemediation && !_.isEmpty(templates);
-    const renderCondition = ruleResult.has_remediation || canCreateRemediation;
+    const renderCondition = ruleResult.hasRemediation || canCreateRemediation;
 
     return renderCondition ? (
       <Menu.Item

package/src/components/RuleImplementationResults.js

@@ -4,31 +4,18 @@ import { useParams } from "react-router-dom";
 import { useQuery } from "@apollo/client";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { connect } from "react-redux";
-import { Table, Message, Divider } from "semantic-ui-react";
+import { Message, Divider } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
-import Moment from "react-moment";
-import { Loading } from "@truedat/core/components";
-import { getRuleResultsColumns } from "../selectors";
-import { IMPLEMENTATION_RESULTS } from "../api/queries";
-import RuleResultRow from "./RuleResultRow";
-
-const optionalColumns = ["errors", "records", "details"];
-const getOptionalColumnsWithData = (ruleResults) =>
-  _.filter((column) =>
-    _.any(_.flow(_.prop(column), _.negate(_.isNil)))(ruleResults)
-  )(optionalColumns);
+import { DateTime, Loading } from "@truedat/core/components";
+import { IMPLEMENTATION_RESULTS_QUERY } from "../api/queries";
+import RuleResultsTable from "./RuleResultsTable";
 
 export const getCustomColumnsWithData = (ruleResults, columns) =>
   _.filter((column) =>
     _.any(_.flow(columnDecorator(column), _.negate(_.isEmpty)))(ruleResults)
   )(columns);
 
-export const RuleImplementationResults = ({
-  ruleImplementation,
-  ruleResultsColumns,
-  isAdmin,
-}) => {
+export const RuleImplementationResults = ({ ruleImplementation }) => {
   const { formatMessage, locale } = useIntl();
 
   if (_.isEmpty(ruleImplementation)) return null;
@@ -39,164 +26,52 @@ export const RuleImplementationResults = ({
     _.first
   )(implementationVersions);
 
-  const commonProps = {
-    ruleImplementation,
-    isAdmin,
-    ruleResultsColumns,
-    formatMessage,
-  };
-
-  const { last_quality_event } = ruleImplementation;
+  const { lastQualityEvent } = ruleImplementation;
 
   return (
     <>
-      {last_quality_event?.type === "FAILED" ? (
+      {lastQualityEvent?.type === "FAILED" ? (
         <Message negative style={{ marginTop: "14px" }}>
-          <Message.Header>
-            {formatMessage({
-              id: "quality.error",
-            })}
-          </Message.Header>
+          <Message.Header content={formatMessage({ id: "quality.error" })} />
           <Divider />
-          <Moment
+          <span
             style={{
               position: "absolute",
               top: "14px",
               right: "21px",
             }}
-            locale={locale}
-            date={last_quality_event.inserted_at}
-            format="YYYY-MM-DD HH:mm"
-          />
-          <p
-            style={{
-              whiteSpace: "pre-wrap",
-            }}
           >
-            {last_quality_event.message}
-          </p>
+            <DateTime value={lastQualityEvent.insertedAt} locale={locale} />
+          </span>
+          <p style={{ whiteSpace: "pre-wrap" }}>{lastQualityEvent.message}</p>
         </Message>
       ) : null}
-      {resultsTable({
-        commonProps,
-        implementationVersions,
-        currentImplementationVersion,
-      })}
+      <RuleResultsTable
+        currentImplementationVersion={currentImplementationVersion}
+        implementationVersions={implementationVersions}
+      />
     </>
   );
 };
 
-export const resultsTable = ({
-  commonProps,
-  implementationVersions,
-  currentImplementationVersion,
-}) => {
-  const { isAdmin, ruleResultsColumns, formatMessage } = commonProps;
-
-  const ruleResults = _.flow(
-    _.map((iv) => _.pathOr([], "results")(iv)),
-    _.flatten
-  )(implementationVersions);
-  const optionalColumns = getOptionalColumnsWithData(ruleResults);
-  const customColumns = getCustomColumnsWithData(
-    ruleResults,
-    ruleResultsColumns
-  );
-
-  return _.isEmpty(ruleResults) ? (
-    <Message
-      style={{ marginTop: "14px" }}
-      header={formatMessage({
-        id: "rule.ruleImplementation.results.empty",
-      })}
-    />
-  ) : (
-    <Table className="implementation-results small">
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell
-            content={formatMessage({ id: "ruleResult.props.date" })}
-          />
-          <Table.HeaderCell
-            content={formatMessage({ id: "ruleResult.props.quality" })}
-          />
-          {_.includes("records")(optionalColumns) ? (
-            <Table.HeaderCell
-              content={formatMessage({ id: "ruleResult.props.records" })}
-            />
-          ) : null}
-          {_.includes("errors")(optionalColumns) ? (
-            <Table.HeaderCell
-              content={formatMessage({ id: "ruleResult.props.errors" })}
-            />
-          ) : null}
-          {customColumns.map((column, index) => (
-            <Table.HeaderCell
-              key={index}
-              content={formatMessage({
-                id: `ruleResult.props.${column.name}`,
-                defaultMessage: column.name,
-              })}
-            />
-          ))}
-          {<Table.HeaderCell />}
-          {isAdmin ? <Table.HeaderCell /> : null}
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {implementationVersions.map((version, i) =>
-          _.pathOr(
-            [],
-            "results"
-          )(version).map((result, j) => (
-            <RuleResultRow
-              key={"version" + i + "_result" + j}
-              optionalColumns={optionalColumns}
-              ruleResult={result}
-              customColumns={customColumns}
-              isAdmin={isAdmin}
-              ruleImplementation={version}
-              active={currentImplementationVersion.id == version.id}
-              tagLabel={
-                j === 0
-                  ? `${formatMessage({
-                      id: "ruleImplementations.props.version",
-                    })}: ${version.version}`
-                  : null
-              }
-            />
-          ))
-        )}
-      </Table.Body>
-    </Table>
-  );
-};
-
 RuleImplementationResults.propTypes = {
   ruleImplementation: PropTypes.object,
-  isAdmin: PropTypes.bool,
-  ruleResultsColumns: PropTypes.array,
 };
 
-const mapStateToProps = (state) => ({ state: state });
-
 export const RuleImplementationResultsLoader = (props) => {
-  const { state } = props;
   const { implementation_id: id } = useParams();
-  const { loading, error, data } = useQuery(IMPLEMENTATION_RESULTS, {
+  const { loading, error, data } = useQuery(IMPLEMENTATION_RESULTS_QUERY, {
     variables: { id },
   });
   if (error) return null;
   if (loading) return <Loading />;
   const ruleImplementation = data?.implementation;
-  const componentProperties = {
-    ruleImplementation,
-    ruleResultsColumns: getRuleResultsColumns(state),
-    isAdmin: state.authentication.role === "admin",
-  };
-  return <RuleImplementationResults {...componentProperties} />;
+  return (
+    <RuleImplementationResults
+      ruleImplementation={ruleImplementation}
+      {...props}
+    />
+  );
 };
 
-export default connect(mapStateToProps, { RuleImplementationResults })(
-  RuleImplementationResultsLoader
-);
+export default RuleImplementationResultsLoader;

package/src/components/RuleImplementationSelectedFilters.js

@@ -24,7 +24,8 @@ import {
 } from "../selectors";
 
 const translations = (formatMessage) => ({
-  "execution_result_info.result_text": (v) => formatMessage({ id: v }),
+  "execution_result_info.result_text": (v) =>
+    formatMessage({ id: v, defaultMessage: v }),
 });
 
 export const mapStateToProps = (state, ownProps) => {

package/src/components/RuleImplementationTabs.js

@@ -2,14 +2,14 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { Menu } from "semantic-ui-react";
-import { Link, withRouter } from "react-router-dom";
-import { compose } from "redux";
+import { Link, useRouteMatch } from "react-router-dom";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
 import {
   IMPLEMENTATION_CONCEPT_LINKS_NEW,
   IMPLEMENTATION_CONCEPT_LINKS,
   IMPLEMENTATION_EVENTS,
+  IMPLEMENTATION_EXECUTIONS,
   IMPLEMENTATION_HISTORY,
   IMPLEMENTATION_MOVE,
   IMPLEMENTATION_RESULTS_DETAILS,
@@ -23,9 +23,9 @@ import {
 export const RuleImplementationTabs = ({
   rule,
   ruleImplementation,
-  match,
   canCreateLink,
 }) => {
+  const match = useRouteMatch();
   const latest_rule_id = _.flow(
     _.pathOr([], "results"),
     _.head,
@@ -83,7 +83,16 @@ export const RuleImplementationTabs = ({
       >
         <FormattedMessage id="tabs.dq.ruleImplementation.results" />
       </Menu.Item>
-      {!_.isNil(latest_rule_id) && (
+      <Menu.Item
+        active={match.path === IMPLEMENTATION_EXECUTIONS}
+        as={Link}
+        to={linkTo.IMPLEMENTATION_EXECUTIONS({
+          implementation_id: ruleImplementation.id,
+        })}
+      >
+        <FormattedMessage id="tabs.dq.ruleImplementation.executions" />
+      </Menu.Item>
+      {_.isNil(latest_rule_id) ? null : (
         <Menu.Item
           active={match.path === IMPLEMENTATION_RESULTS_DETAILS}
           as={Link}
@@ -135,7 +144,4 @@ const mapStateToProps = ({
   canCreateLink: _.propOr(false, "link_concept")(implementationActions),
 });
 
-export default compose(
-  withRouter,
-  connect(mapStateToProps)
-)(RuleImplementationTabs);
+export default connect(mapStateToProps)(RuleImplementationTabs);

package/src/components/RuleImplementationsTable.js

@@ -128,10 +128,7 @@ RuleImplementationsTable.propTypes = {
 
 const mapStateToProps = (state, props) => ({
   columns: getRuleImplementationColumns(state),
-  ruleImplementations:
-    props.ruleImplementations ||
-    state.structure?.implementations?.map(_.prop("implementation")) ||
-    state.ruleImplementations,
+  ruleImplementations: props.ruleImplementations || state.ruleImplementations,
   ruleImplementationsLoading: state.ruleImplementationsLoading,
   implementationsSort: _.path("ruleImplementationQuery.sort")(state),
 });

package/src/components/RuleResultDecorator.js

@@ -1,4 +1,4 @@
-import { has, isNil } from "lodash/fp";
+import { defaultTo, has, isNil } from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { Icon } from "semantic-ui-react";
@@ -28,25 +28,26 @@ export const calculateResultDecoration = ({
     };
   }
 
-  const resultType = ruleImplementation?.result_type;
+  const { resultType, result_type } = ruleImplementation;
+  const type = defaultTo(result_type)(resultType);
   const result =
-    resultType === "errors_number"
+    type === "errors_number"
       ? formatNumber(ruleResult?.errors)
       : ruleResult?.result;
   const resultText = isNil(result)
     ? formatMessage({ id: "quality.result.no.data" })
     : date
     ? formatMessage(
-        { id: `quality.result.${resultType}.date` },
+        { id: `quality.result.${type}.date` },
         { result, date: <DateTime value={date} /> }
       )
-    : formatMessage(
-        { id: `quality.result.${resultType}.description` },
-        { result }
-      );
+    : formatMessage({ id: `quality.result.${type}.description` }, { result });
   const color = selectColor({ ...ruleImplementation, ...ruleResult });
   const iconTitle = ruleResult?.result_text
-    ? formatMessage({ id: ruleResult?.result_text })
+    ? formatMessage({
+        id: ruleResult?.result_text,
+        defaultMessage: ruleResult?.result_text,
+      })
     : null;
 
   return { iconName: "circle", color, resultText, iconTitle };

package/src/components/RuleResultRow.js

@@ -3,10 +3,10 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
-import { useHistory } from "react-router-dom";
 import { Link } from "react-router-dom";
 import { Table, Icon, Label } from "semantic-ui-react";
 import { ConfirmModal, DateTime } from "@truedat/core/components";
+import { useAuthorized } from "@truedat/core/hooks";
 import { columnDecorator } from "@truedat/core/services";
 import { linkTo } from "@truedat/core/routes";
 import { selectColor } from "../functions/selectors";
@@ -19,30 +19,25 @@ export const RuleResultRow = ({
   optionalColumns,
   ruleResult,
   customColumns,
-  isAdmin,
   ruleImplementation,
   tagLabel,
 }) => {
+  const isAdmin = useAuthorized();
   const { formatMessage, formatNumber: _formatNumber } = useIntl();
   const formatNumber = (num) => (_.isNil(num) ? num : _formatNumber(num));
-  const history = useHistory();
 
   return (
     <>
       {tagLabel ? (
         <Table.Row>
-          <Table.Cell colSpan={8}>
+          <Table.Cell>
             <Label
-              as="a"
+              as={Link}
+              to={linkTo.IMPLEMENTATION({
+                implementation_id: ruleImplementation.id,
+              })}
               active={active}
               ribbon
-              onClick={() =>
-                history.push(
-                  linkTo.IMPLEMENTATION({
-                    implementation_id: ruleImplementation.id,
-                  })
-                )
-              }
             >
               {tagLabel}
             </Label>
@@ -59,7 +54,7 @@ export const RuleResultRow = ({
             })}
           >
             <DateTime className="rule-result-date" value={ruleResult.date} />
-            {ruleResult.has_segments ? (
+            {ruleResult.hasSegments ? (
               <Icon
                 circular
                 inverted
@@ -69,7 +64,7 @@ export const RuleResultRow = ({
               />
             ) : null}
 
-            {ruleResult.has_remediation ? (
+            {ruleResult.hasRemediation ? (
               <Icon circular inverted name="rain" color="blue" size="small" />
             ) : null}
           </Link>
@@ -121,7 +116,6 @@ RuleResultRow.propTypes = {
   active: PropTypes.bool,
   customColumns: PropTypes.array,
   deleteRuleResult: PropTypes.func,
-  isAdmin: PropTypes.bool,
   optionalColumns: PropTypes.array,
   ruleImplementation: PropTypes.object,
   ruleResult: PropTypes.object,

package/src/components/RuleResultsRoutes.js

@@ -8,7 +8,7 @@ import {
   IMPLEMENTATION_RESULT_SEGMENTS_RESULTS,
   IMPLEMENTATION_RESULT_REMEDIATION_PLAN,
 } from "@truedat/core/routes";
-import { IMPLEMENTATION_RESULT } from "../api/queries";
+import { IMPLEMENTATION_RESULT_QUERY } from "../api/queries";
 import RuleResult from "./RuleResult";
 import RuleResultDetails from "./RuleResultDetails";
 import RuleResultSegments from "./RuleResultSegments";
@@ -18,7 +18,7 @@ import RuleResultSegmentsLoader from "./RuleResultSegmentsLoader";
 
 export const RuleResultsRoutes = ({}) => {
   const { rule_result_id } = useParams();
-  const { loading, error, data } = useQuery(IMPLEMENTATION_RESULT, {
+  const { loading, error, data } = useQuery(IMPLEMENTATION_RESULT_QUERY, {
     variables: { id: rule_result_id },
   });
   if (error) return null;

package/src/components/RuleResultsTable.js

@@ -0,0 +1,117 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { connect } from "react-redux";
+import { Table, Message } from "semantic-ui-react";
+import { useAuthorized } from "@truedat/core/hooks";
+import { columnDecorator } from "@truedat/core/services";
+import { ruleResultsColumnsSelector } from "../selectors";
+import RuleResultRow from "./RuleResultRow";
+
+const optionalColumns = ["errors", "records", "details"];
+
+const getOptionalColumnsWithData = (ruleResults) =>
+  _.filter((column) =>
+    _.any(_.flow(_.prop(column), _.negate(_.isNil)))(ruleResults)
+  )(optionalColumns);
+
+export const getCustomColumnsWithData = (ruleResults, columns) =>
+  _.filter((column) =>
+    _.any(_.flow(columnDecorator(column), _.negate(_.isEmpty)))(ruleResults)
+  )(columns);
+
+export const RuleResultsTable = ({
+  columns,
+  implementationVersions,
+  currentImplementationVersion,
+}) => {
+  const isAdmin = useAuthorized();
+  const { formatMessage } = useIntl();
+
+  const ruleResults = _.flow(
+    _.map((iv) => _.pathOr([], "results")(iv)),
+    _.flatten
+  )(implementationVersions);
+  const optionalColumns = getOptionalColumnsWithData(ruleResults);
+  const customColumns = getCustomColumnsWithData(ruleResults, columns);
+
+  return _.isEmpty(ruleResults) ? (
+    <Message
+      style={{ marginTop: "14px" }}
+      header={formatMessage({
+        id: "rule.ruleImplementation.results.empty",
+      })}
+    />
+  ) : (
+    <Table className="implementation-results small">
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell
+            content={formatMessage({ id: "ruleResult.props.date" })}
+          />
+          <Table.HeaderCell
+            content={formatMessage({ id: "ruleResult.props.quality" })}
+          />
+          {_.includes("records")(optionalColumns) ? (
+            <Table.HeaderCell
+              content={formatMessage({ id: "ruleResult.props.records" })}
+            />
+          ) : null}
+          {_.includes("errors")(optionalColumns) ? (
+            <Table.HeaderCell
+              content={formatMessage({ id: "ruleResult.props.errors" })}
+            />
+          ) : null}
+          {customColumns.map((column, index) => (
+            <Table.HeaderCell
+              key={index}
+              content={formatMessage({
+                id: `ruleResult.props.${column.name}`,
+                defaultMessage: column.name,
+              })}
+            />
+          ))}
+          {<Table.HeaderCell />}
+          {isAdmin ? <Table.HeaderCell /> : null}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {implementationVersions.map((version) =>
+          _.pathOr(
+            [],
+            "results"
+          )(version).map((result, key) => (
+            <RuleResultRow
+              key={key}
+              optionalColumns={optionalColumns}
+              ruleResult={result}
+              customColumns={customColumns}
+              ruleImplementation={version}
+              active={currentImplementationVersion.id === version.id}
+              tagLabel={
+                key === 0
+                  ? `${formatMessage({
+                      id: "ruleImplementations.props.version",
+                    })}: ${version.version}`
+                  : null
+              }
+            />
+          ))
+        )}
+      </Table.Body>
+    </Table>
+  );
+};
+
+RuleResultsTable.propTypes = {
+  columns: PropTypes.array,
+  implementationVersions: PropTypes.array,
+  currentImplementationVersion: PropTypes.object,
+};
+
+const mapStateToProps = (state) => ({
+  columns: ruleResultsColumnsSelector(state),
+});
+
+export default connect(mapStateToProps)(RuleResultsTable);

package/src/components/RuleResultsUpload.js

@@ -25,12 +25,8 @@ export const RuleResultsUpload = ({ uploadResults, loading }) => {
       content={formatMessage({
         id: "uploadModal.actions.upload.confirmation.content",
       })}
-      param={"rule_results"}
-      handleSubmit={(data) =>
-        uploadResults({
-          data,
-        })
-      }
+      param="rule_results"
+      handleSubmit={(data) => uploadResults({ data })}
     />
   );
 };

package/src/components/RulesUploadButton.js

@@ -34,7 +34,7 @@ export const RulesUploadButton = ({ uploadRules, loading }) => {
       content={
         <FormattedMessage id="rules.actions.upload.confirmation.content" />
       }
-      param={"rules"}
+      param="rules"
       handleSubmit={(data) =>
         uploadRules({
           action: "upload",

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ImplementationExecutionFilters from "../ImplementationExecutionFilters";
+import { implementationExecutionFiltersMock } from "./__fixtures__/executionMocks";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ implementation_id: "123" }),
+}));
+
+const renderOpts = {
+  mocks: [implementationExecutionFiltersMock({ id: "123" })],
+};
+
+describe("<ImplementationExecutionFilters />", () => {
+  it("matches snapshot with filter links", async () => {
+    const { container, findAllByRole } = render(
+      <ImplementationExecutionFilters />,
+      renderOpts
+    );
+    expect(await findAllByRole("link")).toHaveLength(4);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ImplementationExecutions from "../ImplementationExecutions";
+import {
+  implementationExecutionFiltersMock,
+  implementationExecutionsMock,
+} from "./__fixtures__/executionMocks";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ implementation_id: "123" }),
+}));
+
+const renderOpts = {
+  mocks: [
+    implementationExecutionFiltersMock({ id: "123" }),
+    implementationExecutionsMock({ id: "123", last: 20, filters: [] }),
+  ],
+};
+
+describe("<ImplementationExecutions />", () => {
+  it("matches snapshot with executions table", async () => {
+    const { container, findByRole, getByRole, getAllByRole } = render(
+      <ImplementationExecutions />,
+      renderOpts
+    );
+    expect(await findByRole("table")).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+    expect(getAllByRole("row")).toHaveLength(3);
+    expect(getByRole("cell", { name: /succeeded/ })).toBeInTheDocument();
+  });
+});