@truedat/dq 4.40.5 → 4.40.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.40.8] 2022-03-18
+
+### Added
+
+- [TD-3233] Rule result remediation plan forms
+
 ## [4.40.3] 2022-03-14
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.40.5",
+  "version": "4.40.8",
   "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.40.5",
+    "@truedat/test": "4.40.8",
     "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.40.5",
-    "@truedat/df": "4.40.5",
+    "@truedat/core": "4.40.8",
+    "@truedat/df": "4.40.8",
     "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": "0fbea5da0db04c2d79c6237e7bd450091988bf19"
+  "gitHead": "b3570c4151f142384ee7201d05f72ed274f2eeb9"
 }

package/src/api.js

@@ -2,6 +2,7 @@ const API_CONCEPT_RULES = "/api/rules/concept/:id";
 const API_EXECUTION_GROUP = "/api/execution_groups/:id";
 const API_EXECUTION_GROUPS = "/api/execution_groups";
 const API_RULE = "/api/rules/:id";
+const API_REMEDIATION_PLAN = "/api/rule_results/:rule_result_id/remediation";
 const API_RULES = "/api/rules";
 const API_RULES_SEARCH = "/api/rules/search";
 const API_RULES_UPLOAD = "/api/rules/upload";
@@ -25,6 +26,7 @@ export {
   API_CONCEPT_RULES,
   API_EXECUTION_GROUP,
   API_EXECUTION_GROUPS,
+  API_REMEDIATION_PLAN,
   API_RULE,
   API_RULES,
   API_RULES_SEARCH,

package/src/components/ExecutionDetails.js

@@ -4,9 +4,12 @@ import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
-import { Table, Message, Icon } from "semantic-ui-react";
+import { Header, Table, Icon } from "semantic-ui-react";
 import { DateTime } from "@truedat/core/components";
+import { FormattedMessage } from "react-intl";
 import { selectColor } from "../functions/selectors";
+import RemediationPlan from "./RemediationPlan";
+import "../styles/executionDetails.less";
 
 const GeneralInformation = ({ ruleImplementation, ruleResult }) => {
   const { formatMessage, formatNumber: _formatNumber } = useIntl();
@@ -81,52 +84,69 @@ const DetailRow = ({ details }) => {
 
 DetailRow.propTypes = { details: PropTypes.object };
 
+const TemplatesLoader = React.lazy(() =>
+  import("@truedat/df/templates/components/TemplatesLoader")
+);
+
 export const ExecutionDetails = ({ ruleImplementation, ruleResultId }) => {
   const { formatMessage } = useIntl();
   const { rule_result_id: paramsId } = useParams();
 
-  const result_id = _.defaultTo(_.toNumber(paramsId))(ruleResultId);
+  const resultId = _.defaultTo(_.toNumber(paramsId))(ruleResultId);
 
-  const ruleResult = _.find(_.propEq("id", result_id))(
+  const ruleResult = _.find(_.propEq("id", resultId))(
     ruleImplementation.results
   );
 
-  return (
-    <Table className="implementation-results medium">
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell
-            colSpan={2}
-            content={formatMessage({
-              id: "ruleResult.props.header.information",
-            })}
+  return _.isEmpty(ruleResult) ? null : (
+    <>
+      <Header as="h2">
+        <Icon circular name="chart pie" />
+        <Header.Content>
+          <FormattedMessage id="ruleResult" />
+        </Header.Content>
+      </Header>
+      <Table className="implementation-results medium">
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell
+              colSpan={2}
+              content={formatMessage({
+                id: "ruleResult.props.header.information",
+              })}
+            />
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <GeneralInformation
+            ruleImplementation={ruleImplementation}
+            ruleResult={ruleResult}
           />
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        <GeneralInformation
-          ruleImplementation={ruleImplementation}
-          ruleResult={ruleResult}
-        />
-      </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>
+        </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>
+      <TemplatesLoader scope="remediation" />
+      <RemediationPlan
+        className="execution-details-remediation"
+        latestResultId={resultId}
+      />
+    </>
   );
 };
 
@@ -135,8 +155,13 @@ ExecutionDetails.propTypes = {
   ruleResultId: PropTypes.number,
 };
 
-const mapStateToProps = (state) => ({
-  ruleImplementation: state.ruleImplementation,
+const mapStateToProps = ({
+  ruleImplementation,
+  templatesLoading,
+  templates,
+}) => ({
+  templatesLoaded: !templatesLoading && !_.isEmpty(templates),
+  ruleImplementation: ruleImplementation,
 });
 
 export default connect(mapStateToProps)(ExecutionDetails);

package/src/components/ImplementationResultBar.js

@@ -47,7 +47,7 @@ export default function ImplementationResultBar({ implementation }) {
     },
   };
   const summaryProps = propsByColor[color];
-  return (
+  return _.isEmpty(implementation) ? null : (
     <div className="rule-summary-wrapper">
       <Link
         as="div"

package/src/components/NewRemediation.js

@@ -0,0 +1,62 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Button, Header, Icon, Segment } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { createRemediation, fetchRuleImplementation } from "../routines";
+import RemediationForm from "./RemediationForm";
+
+export const NewRemediation = ({
+  manageRemediations,
+  onSaveRemediation,
+  templates,
+}) => {
+  const { formatMessage } = useIntl();
+  const [isEdit, setIsEdit] = useState(false);
+
+  const onSave = () => {
+    setIsEdit(false);
+    onSaveRemediation();
+  };
+
+  return !manageRemediations || _.isEmpty(templates) ? null : (
+    <>
+      {!isEdit ? (
+        <Button
+          primary
+          onClick={() => setIsEdit(!isEdit)}
+          content={formatMessage({ id: "remediation.actions.create" })}
+        />
+      ) : (
+        <>
+          <Header as="h2">
+            <Icon name="plug" />
+            <Header.Content>
+              <FormattedMessage id="remediation.actions.create" />
+            </Header.Content>
+          </Header>
+          <Segment>
+            <RemediationForm onSave={onSave} />
+          </Segment>
+        </>
+      )}
+    </>
+  );
+};
+
+NewRemediation.propTypes = {
+  onSaveRemediation: PropTypes.func,
+  manageRemediations: PropTypes.bool,
+  templates: PropTypes.array,
+};
+
+const mapStateToProps = ({ templates, remediationActions }) => ({
+  manageRemediations: _.has("create")(remediationActions),
+  templates,
+});
+
+export default connect(mapStateToProps, {
+  fetchRuleImplementation,
+  createRemediation,
+})(NewRemediation);

package/src/components/RemediationCrumbs.js

@@ -0,0 +1,76 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Breadcrumb } from "semantic-ui-react";
+import { connect } from "react-redux";
+import { Link, useParams } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { RULES, linkTo } from "@truedat/core/routes";
+
+export const RemediationCrumbs = ({ rule, ruleImplementation }) => {
+  const { rule_result_id: ruleResultId } = useParams();
+
+  return rule?.name ? (
+    <Breadcrumb>
+      <Breadcrumb.Section as={Link} to={RULES} active={false}>
+        <FormattedMessage id="rules.crumbs.top" />
+      </Breadcrumb.Section>
+      {rule.name && (
+        <>
+          <Breadcrumb.Divider icon="right angle" />
+          {ruleImplementation.id ? (
+            <Breadcrumb.Section
+              as={Link}
+              to={linkTo.RULE({ id: rule.id })}
+              active={_.isEmpty(ruleImplementation)}
+            >
+              {rule.name}
+            </Breadcrumb.Section>
+          ) : (
+            <Breadcrumb.Section active>{rule.name}</Breadcrumb.Section>
+          )}
+        </>
+      )}
+      {ruleImplementation.id && (
+        <>
+          <Breadcrumb.Divider icon="right angle" />
+          {ruleResultId ? (
+            <Breadcrumb.Section
+              as={Link}
+              to={linkTo.RULE_IMPLEMENTATION({
+                id: rule.id,
+                implementation_id: ruleImplementation.id,
+              })}
+              active={_.isEmpty(ruleImplementation)}
+            >
+              {ruleImplementation.implementation_key}
+            </Breadcrumb.Section>
+          ) : (
+            <Breadcrumb.Section active>
+              {ruleImplementation.implementation_key}
+            </Breadcrumb.Section>
+          )}
+        </>
+      )}
+      {ruleResultId && (
+        <>
+          <Breadcrumb.Divider icon="right angle" />
+          <Breadcrumb.Section active>
+            <span>Result {ruleResultId}</span>
+          </Breadcrumb.Section>
+        </>
+      )}
+    </Breadcrumb>
+  ) : null;
+};
+
+RemediationCrumbs.propTypes = {
+  rule: PropTypes.object,
+  ruleImplementation: PropTypes.object,
+};
+
+const mapStateToProps = ({ rule, ruleImplementation }) => ({
+  rule,
+  ruleImplementation,
+});
+export default connect(mapStateToProps)(RemediationCrumbs);

package/src/components/RemediationForm.js

@@ -0,0 +1,129 @@
+import _ from "lodash/fp";
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { applyTemplate, validateContent } from "@truedat/df/utils";
+import { connect } from "react-redux";
+import { useParams } from "react-router-dom";
+import { Button, Form } from "semantic-ui-react";
+import { createRemediation, updateRemediation } from "../routines";
+
+const DynamicForm = React.lazy(() =>
+  import("@truedat/df/components/DynamicForm")
+);
+
+const TemplateSelector = React.lazy(() =>
+  import("@truedat/df/templates/components/TemplateSelector")
+);
+
+export const RemediationForm = ({
+  createRemediation,
+  updateRemediation,
+  templates,
+  remediation,
+  onSave,
+  latestResultId,
+}) => {
+  const { formatMessage } = useIntl();
+  const [template, setTemplate] = useState();
+  const [content, setContent] = useState();
+  const {
+    id,
+    implementation_id: implementationId,
+    rule_result_id: ruleResultId,
+  } = useParams();
+
+  const isValidContent = _.flow(validateContent(template), _.isEmpty);
+  const isValid = _.has("name")(template) && isValidContent(content);
+
+  const handleTemplateSelected = (e, { value }) => {
+    setTemplate(_.find({ id: value }, templates));
+  };
+
+  const handleContentChange = (content) => {
+    setContent(content);
+  };
+
+  const handleSubmit = () => {
+    const actionFunction = _.has("id")(remediation)
+      ? updateRemediation
+      : createRemediation;
+
+    actionFunction({
+      remediation: {
+        ...remediation,
+        df_name: template?.name,
+        df_content: template ? applyTemplate(template)(content) : {},
+      },
+      id,
+      implementation_id: implementationId,
+      rule_result_id: ruleResultId || latestResultId,
+    });
+    onSave();
+  };
+
+  useEffect(() => {
+    _.flow(
+      _.cond([
+        [(templates) => _.size(templates) === 1, _.head],
+        [
+          () => !_.isEmpty(remediation),
+          _.find(_.propEq("name")(remediation?.df_name)),
+        ],
+      ]),
+      (template) => {
+        setTemplate(template);
+        return template;
+      },
+      (template) => applyTemplate(template)(remediation?.df_content),
+      setContent
+    )(templates);
+  }, [remediation, templates]);
+
+  return (
+    <Form aria-label="remediation-form">
+      {_.size(templates) > 1 && (
+        <TemplateSelector
+          name="template"
+          selectedValue={_.prop("id")(template)}
+          onChange={handleTemplateSelected}
+        />
+      )}
+
+      {!template ? null : (
+        <DynamicForm
+          template={template}
+          onChange={handleContentChange}
+          content={content || {}}
+        />
+      )}
+
+      <Button
+        primary
+        disabled={!isValid}
+        onClick={handleSubmit}
+        content={formatMessage({
+          id: _.isEmpty(remediation) ? "actions.create" : "actions.save",
+        })}
+      />
+    </Form>
+  );
+};
+
+RemediationForm.propTypes = {
+  createRemediation: PropTypes.func.isRequired,
+  updateRemediation: PropTypes.func,
+  templates: PropTypes.array,
+  remediation: PropTypes.object,
+  onSave: PropTypes.func,
+  latestResultId: PropTypes.number,
+};
+
+const mapStateToProps = ({ templates }) => ({
+  templates,
+});
+
+export default connect(mapStateToProps, {
+  createRemediation,
+  updateRemediation,
+})(RemediationForm);

package/src/components/RemediationPlan.js

@@ -0,0 +1,161 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { useParams } from "react-router-dom";
+import { Button, Header, Icon, Grid, Segment } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { Loading } from "@truedat/core/components";
+import { ConfirmModal } from "@truedat/core/components";
+import {
+  fetchRemediation,
+  clearRemediation,
+  deleteRemediation,
+} from "../routines";
+import NewRemediation from "./NewRemediation";
+import RemediationForm from "./RemediationForm";
+import "../styles/remediationPlan.less";
+
+const DynamicFormViewer = React.lazy(() =>
+  import("@truedat/df/components/DynamicFormViewer")
+);
+
+export const RemediationPlan = ({
+  remediationLoading,
+  className,
+  deleteRemediation,
+  fetchRemediation,
+  clearRemediation,
+  remediation,
+  templates,
+  latestResultId,
+  manageRemediations,
+}) => {
+  const {
+    implementation_id: implementationId,
+    rule_result_id: paramsRuleResultId,
+  } = useParams();
+  const { formatMessage } = useIntl();
+  const [isEdit, setIsEdit] = useState(false);
+  const [ruleResultId, setRuleResultId] = useState(null);
+
+  useEffect(() => {
+    setRuleResultId(paramsRuleResultId || latestResultId);
+  }, [paramsRuleResultId, latestResultId]);
+
+  useEffect(() => {
+    ruleResultId && fetchRemediation({ rule_result_id: ruleResultId });
+  }, [fetchRemediation, ruleResultId]);
+
+  useEffect(
+    () => () => {
+      clearRemediation();
+    },
+    [clearRemediation]
+  );
+
+  const onSave = () => {
+    setIsEdit(false);
+  };
+
+  return !ruleResultId ? null : remediationLoading ? (
+    <Loading />
+  ) : _.isEmpty(remediation) && manageRemediations ? (
+    <NewRemediation onSaveRemediation={onSave} />
+  ) : (
+    <>
+      <Header as="h2">
+        <Icon circular name="rain" />
+        <Header.Content>
+          <FormattedMessage
+            id={!isEdit ? "remediation" : "remediation.actions.edit"}
+          />
+        </Header.Content>
+      </Header>
+
+      <Segment className={className}>
+        {!_.isEmpty(remediation) && manageRemediations ? (
+          <div className="ui actions remediation">
+            <ConfirmModal
+              icon="trash"
+              trigger={<Button secondary icon="trash" basic color="red" />}
+              header={
+                <FormattedMessage id="remediation.actions.delete.confirmation.header" />
+              }
+              content={
+                <FormattedMessage
+                  id="remediation.actions.delete.confirmation.content"
+                  values={{ ruleResultId: <b>{ruleResultId}</b> }}
+                />
+              }
+              onConfirm={() =>
+                deleteRemediation({
+                  implementation_id: implementationId,
+                  rule_result_id: ruleResultId,
+                })
+              }
+            />
+            <Button
+              className="button-edit-remediation"
+              primary
+              onClick={() => setIsEdit(!isEdit)}
+              content={formatMessage({
+                id: !isEdit ? "actions.edit" : "actions.cancel",
+              })}
+            />
+          </div>
+        ) : null}
+
+        <Grid>
+          <Grid.Column width={8}>
+            {!isEdit && remediation?.df_name ? (
+              <DynamicFormViewer
+                template={_.find(_.propEq("name", remediation.df_name))(
+                  templates
+                )}
+                content={remediation.df_content}
+              />
+            ) : (
+              <RemediationForm
+                onSave={onSave}
+                remediation={remediation}
+                latestResultId={latestResultId}
+              />
+            )}
+          </Grid.Column>
+        </Grid>
+      </Segment>
+    </>
+  );
+};
+
+RemediationPlan.propTypes = {
+  remediationLoading: PropTypes.bool,
+  className: PropTypes.string,
+  deleteRemediation: PropTypes.func,
+  clearRemediation: PropTypes.func,
+  fetchRemediation: PropTypes.func,
+  remediation: PropTypes.object,
+  templates: PropTypes.array,
+  latestResultId: PropTypes.number,
+  manageRemediations: PropTypes.bool,
+};
+
+const mapStateToProps = ({
+  templates,
+  remediation,
+  remediationLoading,
+  remediationActions,
+}) => ({
+  templates,
+  remediation,
+  remediationLoading,
+  manageRemediations: _.has("create")(remediationActions),
+});
+
+export default connect(mapStateToProps, {
+  deleteRemediation,
+  fetchRemediation,
+  clearRemediation,
+})(RemediationPlan);

package/src/components/RuleImplementation.js

@@ -13,7 +13,7 @@ import RuleImplementationTabs from "./RuleImplementationTabs";
 import ImplementationResultBar from "./ImplementationResultBar";
 
 const getAvailableActions = (props, formatMessage) => {
-  const contentActions = [
+  const contentActions = _.isEmpty(props?.ruleImplementation) ? [] : [
     {
       key: "delete",
       value: "delete",

package/src/components/RuleImplementationResults.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
@@ -126,6 +126,7 @@ RuleImplementationResults.propTypes = {
   rule: PropTypes.object,
   customColumns: PropTypes.array,
   isAdmin: PropTypes.bool,
+  ruleResult: PropTypes.object,
 };
 
 const mapStateToProps = (state) => ({

package/src/components/RuleResultRow.js

@@ -38,7 +38,10 @@ export const RuleResultRow = ({
         >
           <DateTime className="rule-result-date" value={ruleResult.date} />
           {!_.isEmpty(ruleResult.details) ? (
-            <Icon name="info circle" color="blue" />
+            <Icon circular inverted name="info" color="blue" size="small" />
+          ) : null}
+          {ruleResult.has_remediation ? (
+            <Icon circular inverted name="rain" color="blue" size="small" />
           ) : null}
         </Link>
       </Table.Cell>