@truedat/dq 4.38.6 → 4.39.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [4.39.0] 2022-03-01
+
+### Changed
+
+- [TD-4528] Restyle quality results table
+
+## [4.38.7] 2022-02-22
+
+### Added
+
+- [TD-4437]
+  - Access denied alert message on rule results upload
+  - Hide rule results button if there is no manage_rule_results permission
+
 ## [4.37.6] 2022-02-06
 
 ### Fix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.38.6",
+  "version": "4.39.0",
   "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.38.6",
+    "@truedat/test": "4.39.0",
     "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.38.6",
-    "@truedat/df": "4.38.6",
+    "@truedat/core": "4.39.0",
+    "@truedat/df": "4.39.0",
     "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": "0005b4c27ac7f10cca2036594b4ce3a7469492aa"
+  "gitHead": "f3d2fe3fcdec546afc22d0a79c4f4f3dfb91ea48"
 }

package/src/components/ExecutionDetails.js

@@ -91,14 +91,7 @@ export const ExecutionDetails = ({ ruleImplementation, ruleResultId }) => {
     ruleImplementation.results
   );
 
-  return _.isEmpty(ruleResult.details) ? (
-    <Message
-      style={{ marginTop: "14px" }}
-      header={formatMessage({
-        id: "rule.ruleImplementation.results.details.empty",
-      })}
-    />
-  ) : (
+  return (
     <Table className="implementation-results medium">
       <Table.Header>
         <Table.Row>
@@ -116,20 +109,23 @@ export const ExecutionDetails = ({ ruleImplementation, ruleResultId }) => {
           ruleResult={ruleResult}
         />
       </Table.Body>
-
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell
-            colSpan={2}
-            content={formatMessage({
-              id: "ruleResult.props.header.details",
-            })}
-          />
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        <DetailRow details={ruleResult.details} />
-      </Table.Body>
+      {!_.isEmpty(ruleResult.details) ? (
+        <>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell
+                colSpan={2}
+                content={formatMessage({
+                  id: "ruleResult.props.header.details",
+                })}
+              />
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            <DetailRow details={ruleResult?.details} />
+          </Table.Body>
+        </>
+      ) : null}
     </Table>
   );
 };

package/src/components/ImplementationsRoutes.js

@@ -8,6 +8,9 @@ import RuleImplementationsLoader from "./RuleImplementationsLoader";
 const TemplatesLoader = React.lazy(() =>
   import("@truedat/df/templates/components/TemplatesLoader")
 );
+const UserDomainsLoader = React.lazy(() =>
+  import("@truedat/auth/users/components/UserDomainsLoader")
+);
 const UserSearchFiltersLoader = React.lazy(() =>
   import("@truedat/dd/components/UserSearchFiltersLoader")
 );
@@ -21,6 +24,7 @@ const ImplementationsRoutes = () => (
         <ImplementationFiltersLoader />
         <TemplatesLoader scope="qe" />
         <UserSearchFiltersLoader scope="rule_implementation" />
+        <UserDomainsLoader permissions={["manage_rule_results"]} />
         <RuleImplementations exact />
       </>
     )}

package/src/components/RuleImplementationResults.js

@@ -35,7 +35,7 @@ export const RuleImplementationResults = ({
 
   return (
     <>
-      {ruleImplementation.event_type === "FAILED" && (
+      {ruleImplementation.event_type === "FAILED" ? (
         <Message negative style={{ marginTop: "14px" }}>
           <Message.Header>
             {formatMessage({
@@ -61,7 +61,7 @@ export const RuleImplementationResults = ({
             {ruleImplementation.event_message}
           </p>
         </Message>
-      )}
+      ) : null}
       {_.isEmpty(ruleResults) ? (
         <Message
           style={{ marginTop: "14px" }}
@@ -70,25 +70,25 @@ export const RuleImplementationResults = ({
           })}
         />
       ) : (
-        <Table className="implementation-results small" selectable>
+        <Table className="implementation-results small">
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell
-                content={formatMessage({ id: "ruleResult.props.quality" })}
+                content={formatMessage({ id: "ruleResult.props.date" })}
               />
               <Table.HeaderCell
-                content={formatMessage({ id: "ruleResult.props.date" })}
+                content={formatMessage({ id: "ruleResult.props.quality" })}
               />
-              {_.includes("records")(optionalColumns) && (
+              {_.includes("records")(optionalColumns) ? (
                 <Table.HeaderCell
                   content={formatMessage({ id: "ruleResult.props.records" })}
                 />
-              )}
-              {_.includes("errors")(optionalColumns) && (
+              ) : null}
+              {_.includes("errors")(optionalColumns) ? (
                 <Table.HeaderCell
                   content={formatMessage({ id: "ruleResult.props.errors" })}
                 />
-              )}
+              ) : null}
               {customColumns.map((column, index) => (
                 <Table.HeaderCell
                   key={index}
@@ -99,7 +99,7 @@ export const RuleImplementationResults = ({
                 />
               ))}
               {<Table.HeaderCell />}
-              {isAdmin && <Table.HeaderCell />}
+              {isAdmin ? <Table.HeaderCell /> : null}
             </Table.Row>
           </Table.Header>
           <Table.Body>

package/src/components/RuleResultRow.js

@@ -3,13 +3,14 @@ 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 } from "semantic-ui-react";
 import { ConfirmModal, DateTime } from "@truedat/core/components";
 import { columnDecorator } from "@truedat/core/services";
 import { linkTo } from "@truedat/core/routes";
 import { selectColor } from "../functions/selectors";
 import { deleteRuleResult } from "../routines";
+import "../styles/ruleResultRow.less";
 
 export const RuleResultRow = ({
   deleteRuleResult,
@@ -22,24 +23,25 @@ export const RuleResultRow = ({
 }) => {
   const { formatMessage, formatNumber: _formatNumber } = useIntl();
   const formatNumber = (num) => (_.isNil(num) ? num : _formatNumber(num));
-  const history = useHistory();
 
   return (
-    <Table.Row
-      onClick={() =>
-        !_.isEmpty(ruleResult.details)
-          ? history.push(
-              linkTo.RULE_IMPLEMENTATION_RESULT_DETAILS({
-                id: rule.id,
-                implementation_id: ruleImplementation.id,
-                rule,
-                ruleImplementation,
-                rule_result_id: ruleResult.id,
-              })
-            )
-          : null
-      }
-    >
+    <Table.Row>
+      <Table.Cell>
+        <Link
+          to={linkTo.RULE_IMPLEMENTATION_RESULT_DETAILS({
+            id: rule.id,
+            implementation_id: ruleImplementation.id,
+            rule,
+            ruleImplementation,
+            rule_result_id: ruleResult.id,
+          })}
+        >
+          <DateTime className="rule-result-date" value={ruleResult.date} />
+          {!_.isEmpty(ruleResult.details) ? (
+            <Icon name="info circle" color="blue" />
+          ) : null}
+        </Link>
+      </Table.Cell>
       <Table.Cell>
         <Icon
           name="circle"
@@ -47,28 +49,18 @@ export const RuleResultRow = ({
         />
         {`${parseFloat(ruleResult.result)} %`}
       </Table.Cell>
-      <Table.Cell>
-        <DateTime value={ruleResult.date} />
-      </Table.Cell>
-      {_.includes("records")(optionalColumns) && (
+      {_.includes("records")(optionalColumns) ? (
         <Table.Cell>{formatNumber(ruleResult.records)}</Table.Cell>
-      )}
-      {_.includes("errors")(optionalColumns) && (
+      ) : null}
+      {_.includes("errors")(optionalColumns) ? (
         <Table.Cell>{formatNumber(ruleResult.errors)}</Table.Cell>
-      )}
-      {_.includes("details")(optionalColumns) && (
-        <Table.Cell>
-          {!_.isEmpty(ruleResult.details) && (
-            <Icon name="info circle" color="blue" />
-          )}
-        </Table.Cell>
-      )}
+      ) : null}
       {customColumns?.map((column, index) => (
         <Table.Cell key={index}>
           {columnDecorator(column)(ruleResult)}
         </Table.Cell>
       ))}
-      {isAdmin && (
+      {isAdmin ? (
         <Table.Cell onClick={(e) => e.stopPropagation()}>
           <ConfirmModal
             icon="trash"
@@ -88,7 +80,7 @@ export const RuleResultRow = ({
             }
           />
         </Table.Cell>
-      )}
+      ) : null}
     </Table.Row>
   );
 };

package/src/components/RuleResultsUpload.js

@@ -1,4 +1,5 @@
-import React from "react";
+import _ from "lodash/fp";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Dropdown } from "semantic-ui-react";
@@ -6,18 +7,31 @@ import { useIntl } from "react-intl";
 import { UploadModal } from "@truedat/core/components";
 import { uploadResults } from "../routines";
 
-export const RuleResultsUpload = ({ uploadResults, loading }) => {
+export const RuleResultsUpload = ({ uploadResults, loading, userDomains }) => {
   const { formatMessage } = useIntl();
+  const [permissionFound, setPermissionFound] = useState(false);
+
+  useEffect(() => {
+    setPermissionFound(
+      !_.flow(
+        _.find({ permission: "manage_rule_results" }),
+        _.path("domains"),
+        _.isEmpty
+      )(userDomains)
+    );
+  }, [userDomains]);
 
   return (
     <UploadModal
       icon="upload"
       trigger={
-        <Dropdown.Item
-          icon="upload"
-          text={formatMessage({ id: "ruleResults.actions.upload.tooltip" })}
-          disabled={loading}
-        />
+        permissionFound ? (
+          <Dropdown.Item
+            icon="upload"
+            text={formatMessage({ id: "ruleResults.actions.upload.tooltip" })}
+            disabled={loading}
+          />
+        ) : null
       }
       header={formatMessage({
         id: "ruleResults.actions.upload.confirmation.header",
@@ -38,10 +52,14 @@ export const RuleResultsUpload = ({ uploadResults, loading }) => {
 RuleResultsUpload.propTypes = {
   uploadResults: PropTypes.func,
   loading: PropTypes.bool,
+  userDomains: PropTypes.array,
 };
 
-const mapStateToProps = ({ uploadingResults }) => ({
-  loading: uploadingResults,
-});
+const mapStateToProps = (state) => {
+  return {
+    loading: state.uploadingResults,
+    userDomains: state.userDomains,
+  };
+};
 
 export default connect(mapStateToProps, { uploadResults })(RuleResultsUpload);

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

@@ -11,8 +11,12 @@ jest.spyOn(React, "useContext").mockImplementation(() => intl);
 describe("<RuleResultRow />", () => {
   it("renders customColumns values when passed", () => {
     const ruleResultRowProps = {
-      id: 10,
-      ruleResult: { result: 80, params: { p1: "1", p2: "2", p3: "no" } },
+      rule: { id: 10 },
+      ruleResult: {
+        id: 54,
+        result: 80,
+        params: { p1: "1", p2: "2", p3: "no" },
+      },
       customColumns: [
         {
           name: "m_parm1",
@@ -24,7 +28,12 @@ describe("<RuleResultRow />", () => {
         },
       ],
       date: "2019-08-12T02:00:00Z",
-      ruleImplementation: { minimum: 1, goal: 10, result_type: "percentage" },
+      ruleImplementation: {
+        id: 23,
+        minimum: 1,
+        goal: 10,
+        result_type: "percentage",
+      },
     };
 
     const wrapper = shallow(<RuleResultRow {...ruleResultRowProps} />);
@@ -50,10 +59,11 @@ describe("<RuleResultRow />", () => {
 
   it("green icon when result is over goal", () => {
     const ruleResultRowProps = {
-      id: 10,
-      ruleResult: { result: 80 },
+      rule: { id: 10 },
+      ruleResult: { id: 54, result: 80 },
       date: "2019-08-12T02:00:00Z",
       ruleImplementation: {
+        id: 23,
         minimum: 1,
         goal: 10,
         result_type: "percentage",
@@ -61,7 +71,7 @@ describe("<RuleResultRow />", () => {
     };
 
     const wrapper = shallow(<RuleResultRow {...ruleResultRowProps} />);
-    const cell = wrapper.find("TableRow").find("TableCell").at(0).dive();
+    const cell = wrapper.find("TableRow").find("TableCell").at(1).dive();
 
     expect(cell.find("td").find("Icon")).toHaveLength(1);
 
@@ -72,10 +82,11 @@ describe("<RuleResultRow />", () => {
 
   it("red icon when result is under minimum", () => {
     const ruleResultRowProps = {
-      id: 10,
-      ruleResult: { result: 80 },
+      rule: { id: 10 },
+      ruleResult: { id: 54, result: 80 },
       date: "2019-08-12T02:00:00Z",
       ruleImplementation: {
+        id: 23,
         minimum: 81,
         goal: 90,
         result_type: "percentage",
@@ -83,7 +94,7 @@ describe("<RuleResultRow />", () => {
     };
 
     const wrapper = shallow(<RuleResultRow {...ruleResultRowProps} />);
-    const cell = wrapper.find("TableRow").find("TableCell").at(0).dive();
+    const cell = wrapper.find("TableRow").find("TableCell").at(1).dive();
 
     expect(cell.find("td").find("Icon")).toHaveLength(1);
 
@@ -94,18 +105,19 @@ describe("<RuleResultRow />", () => {
 
   it("yellow icon when result is between minimum and goal", () => {
     const ruleResultRowProps = {
-      id: 10,
+      rule: { id: 10 },
       ruleImplementation: {
+        id: 23,
         minimum: 81,
         goal: 90,
         result_type: "percentage",
       },
-      ruleResult: { result: 82 },
+      ruleResult: { id: 54, result: 82 },
       date: "2019-08-12T02:00:00Z",
     };
 
     const wrapper = shallow(<RuleResultRow {...ruleResultRowProps} />);
-    const cell = wrapper.find("TableRow").find("TableCell").at(0).dive();
+    const cell = wrapper.find("TableRow").find("TableCell").at(1).dive();
 
     expect(cell.find("td").find("Icon")).toHaveLength(1);
 
@@ -116,13 +128,14 @@ describe("<RuleResultRow />", () => {
 
   it("renders delete cell in RuleResultRow when user isAdmin is true", () => {
     const ruleResultRowProps = {
-      id: 10,
+      rule: { id: 10 },
       ruleImplementation: {
+        id: 23,
         minimum: 81,
         goal: 90,
         result_type: "percentage",
       },
-      ruleResult: { result: 82 },
+      ruleResult: { id: 54, result: 82 },
       date: "2019-08-12T02:00:00Z",
       isAdmin: true,
       deleteRuleResult: jest.fn(),
@@ -138,13 +151,14 @@ describe("<RuleResultRow />", () => {
 
   it("does not render delete cell in RuleResultRow when user isAdmin is false", () => {
     const ruleResultRowProps = {
-      id: 10,
+      rule: { id: 10 },
       ruleImplementation: {
+        id: 23,
         minimum: 81,
         goal: 90,
         result_type: "percentage",
       },
-      ruleResult: { result: 82 },
+      ruleResult: { id: 54, result: 82 },
       date: "2019-08-12T02:00:00Z",
       isAdmin: false,
       deleteRuleResult: jest.fn(),

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

@@ -1,18 +1,73 @@
-import _ from "lodash/fp";
 import React from "react";
-import { shallow } from "enzyme";
 import { intl } from "@truedat/test/intl-stub";
+import { IntlProvider } from "react-intl";
+import { render } from "@truedat/test/render";
+import { shallow } from "enzyme";
 import { RuleResultsUpload } from "../RuleResultsUpload";
 
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
+afterEach(() => {    
+  jest.clearAllMocks();
+});
 
 describe("<RuleResultsUpload />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "ruleResults.actions.upload.tooltip": "Upload rule results",
+        "ruleResults.actions.upload.confirmation.header": "Upload rule results",
+        "uploadModal.actions.upload.confirmation.content": "Drag an drop file or click to select file",
+        "ruleResults.actions.upload.confirmation.header": "Upload rule results",
+      },
+    },
+  };
+
   it("matches the latest snapshot", () => {
+    const spy = jest.spyOn(React, "useContext").mockImplementation(() => intl);
     const props = {
       uploadResults: jest.fn(),
       loading: false,
     };
     const wrapper = shallow(<RuleResultsUpload {...props} />);
     expect(wrapper).toMatchSnapshot();
+    spy.mockRestore();
+  });
+
+  it("Renders upload rule results menu item if there is a domain with manage_rule_results permission", () => {
+    const props = {
+      uploadResults: jest.fn(),
+      loading: false,
+      userDomains: [
+        {
+          domains: [
+            {
+              external_id: "Truedat",
+              id: 2,
+              name: "Truedat",
+            },
+          ],
+          permission: "manage_rule_results",
+        },
+      ],
+    };
+    const { getByText } = render(<RuleResultsUpload {...props} />, renderOpts);
+
+    const element = getByText("Upload rule results");
+    expect(element).toBeInTheDocument()
+  });
+
+  it("Does not render upload rule results menu item if there is no domain with manage_rule_results permission", () => {
+    const props = {
+      uploadResults: jest.fn(),
+      loading: false,
+      userDomains: [],
+    };
+
+    const { queryByText } = render(
+      <RuleResultsUpload {...props} />,
+      renderOpts
+    );
+
+    const element = queryByText("Upload rule results");
+    expect(element).toBeNull();
   });
 });

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

@@ -115,19 +115,81 @@ exports[`<ExecutionDetails> matches the lastest snapshot 1`] = `
 
 exports[`<ExecutionDetails> without details 1`] = `
 <div>
-  <div
-    class="ui message"
-    style="margin-top: 14px;"
+  <table
+    class="ui table implementation-results medium"
   >
-    <div
-      class="content"
+    <thead
+      class=""
     >
-      <div
-        class="header"
+      <tr
+        class=""
       >
-        No details found for current result
-      </div>
-    </div>
-  </div>
+        <th
+          class=""
+          colspan="2"
+        >
+          Information
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <td
+          class=""
+        >
+          Quality
+        </td>
+        <td
+          class=""
+        >
+          <i
+            aria-hidden="true"
+            class="grey circle icon"
+          />
+          NaN %
+        </td>
+      </tr>
+      <tr
+        class=""
+      >
+        <td
+          class=""
+        >
+          Date
+        </td>
+        <td
+          class=""
+        />
+      </tr>
+      <tr
+        class=""
+      >
+        <td
+          class=""
+        >
+          Records
+        </td>
+        <td
+          class=""
+        />
+      </tr>
+      <tr
+        class=""
+      >
+        <td
+          class=""
+        >
+          Errors
+        </td>
+        <td
+          class=""
+        />
+      </tr>
+    </tbody>
+  </table>
 </div>
 `;

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

@@ -5,7 +5,6 @@ exports[`<RuleImplementationResults /> matches the latest snapshot 1`] = `
   <Table
     as="table"
     className="implementation-results small"
-    selectable={true}
   >
     <TableHeader
       as="thead"
@@ -16,11 +15,11 @@ exports[`<RuleImplementationResults /> matches the latest snapshot 1`] = `
       >
         <TableHeaderCell
           as="th"
-          content="ruleResult.props.quality"
+          content="ruleResult.props.date"
         />
         <TableHeaderCell
           as="th"
-          content="ruleResult.props.date"
+          content="ruleResult.props.quality"
         />
         <TableHeaderCell
           as="th"

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

@@ -7,12 +7,6 @@ exports[`<RuleResultsUpload /> matches the latest snapshot 1`] = `
   header="ruleResults.actions.upload.confirmation.header"
   icon="upload"
   param="rule_results"
-  trigger={
-    <DropdownItem
-      disabled={false}
-      icon="upload"
-      text="ruleResults.actions.upload.tooltip"
-    />
-  }
+  trigger={null}
 />
 `;

package/src/reducers/dqMessage.js

@@ -104,7 +104,17 @@ const dqMessage = (state = initialState, { type, payload }) => {
         text: "",
       };
     case uploadResults.FAILURE:
-      if (payload.status != 500) {
+      if (payload.status === 403) {
+        return {
+          error: true,
+          header: `ruleResults.upload.failed.header`,
+          messages: [
+            { id: "alert.status.403.header" },
+            { id: "permission.manage_rule_results" },
+          ],
+          icon: "attention",
+        };
+      } else if (payload.status != 500) {
         return {
           error: true,
           header: "ruleResults.upload.failed.header",

package/src/styles/ruleResultRow.less

@@ -0,0 +1,3 @@
+.rule-result-date {
+  margin-right: 5px;
+}