@truedat/dq 4.44.0 → 4.44.3

package/CHANGELOG.md

@@ -1,10 +1,29 @@
 # Changelog
 
+## [4.44.3] 2022-05-11
+
+### Added
+
+- [TD-4045] Implementation execution button in implementation view
+
+## [4.44.2] 2022-05-11
+
+### Fixed
+
+- [TD-4089] Segments tab was not displaying segments
+
+## [4.44.1] 2022-05-11
+
+### Added
+
+- [TD-4089] Support for Implementations without Rules
+
 ## [4.43.5] 2022-05-05
 
 # Added
 
-- [TD-4538] Add more coding for segments configuration and segment results for implementations
+- [TD-4538] Add more coding for segments configuration and segment results for
+  implementations
 
 ## [4.43.3] 2022-05-04
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.44.0",
+  "version": "4.44.3",
   "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.44.0",
+    "@truedat/test": "4.44.3",
     "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.44.0",
-    "@truedat/df": "4.44.0",
+    "@truedat/core": "4.44.3",
+    "@truedat/df": "4.44.3",
     "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": "55fd4a8be70ca0d1bd4f3cb7b5eaf073b0350029"
+  "gitHead": "d5e72d523389c6e66d6f7168d7e3546b5d2ffdda"
 }

package/src/components/EditRule.js

@@ -15,7 +15,7 @@ export const EditRule = ({ rule, updateRule }) =>
           <FormattedMessage id="quality.actions.edit" />
         </Header.Content>
       </Header>
-      <RuleForm handleSubmit={updateRule} rule={rule} editMode />
+      <RuleForm onSubmit={updateRule} rule={rule} editMode />
     </Container>
   );
 

package/src/components/ExecutionForm.js

@@ -1,48 +1,35 @@
 import _ from "lodash/fp";
-import React, { Suspense, useState } from "react";
+import React, { useState } from "react";
+import { Button, Form, Header } from "semantic-ui-react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
 import { useIntl } from "react-intl";
-import { Button, Form, Header } from "semantic-ui-react";
+import { TemplateSelector } from "@truedat/core/components";
 import { validateContent } from "@truedat/df/utils";
-import { selectTemplate } from "@truedat/df/routines";
-
-const TemplateSelector = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateSelector")
-);
-
-const TemplateLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateLoader")
-);
 
 const DynamicForm = React.lazy(() =>
   import("@truedat/df/components/DynamicForm")
 );
 
-export const ExecutionForm = ({
-  count,
-  selectTemplate,
-  template,
-  templates,
-  handleSubmit,
-  onCancel,
-}) => {
+export const ExecutionForm = ({ count, onSubmit, onCancel }) => {
   const { formatMessage } = useIntl();
   const [content, setContent] = useState({});
+  const [template, setTemplate] = useState();
+  const [templatesLoading, setTemplatesLoading] = useState(true);
 
   const handleContentChange = (content) => setContent(content);
 
-  const handleTemplateSelected = (e, { value }) =>
-    selectTemplate({ id: value });
+  const handleTemplatesLoaded = ({ templates }) => {
+    setTemplatesLoading(false);
+    if (templates?.length === 1) {
+      setTemplate(templates[0]);
+    }
+  };
+
+  const handleTemplateSelected = (e, { template }) => setTemplate(template);
 
   const isInvalid = () =>
     template && !_.isEmpty(validateContent(template)(content));
 
-  if (_.size(templates) == 1) {
-    const id = _.flow(_.head, _.prop("id"))(templates);
-    selectTemplate({ id });
-  }
-
   return (
     <>
       <Header
@@ -51,66 +38,69 @@ export const ExecutionForm = ({
           id: "implementations.actions.execution.confirmation.header",
         })}
       />
-      <Suspense fallback={null}>
-        <Form>
-          <TemplateLoader scope="qe" />
-          {_.size(templates) > 1 && (
-            <TemplateSelector
-              name="template"
-              selectedValue={_.prop("id")(template)}
-              onChange={handleTemplateSelected}
-              isOptional={true}
+      <Form loading={templatesLoading}>
+        <TemplateSelector
+          scope="qe"
+          selectedValue={template?.id}
+          onChange={handleTemplateSelected}
+          onLoad={handleTemplatesLoaded}
+          clearable
+        />
+        {template?.id ? (
+          <>
+            <Header
+              as="h3"
+              content={formatMessage({
+                id: "implementations.actions.execution.confirmation.legend",
+              })}
             />
-          )}
-          {template && template.id && (
-            <>
-              <Header
-                as="h3"
-                content={formatMessage({
-                  id: "implementations.actions.execution.confirmation.legend",
-                })}
+            <div
+              style={{
+                maxHeight: "calc(100vh - 550px)",
+                overflowY: "auto",
+              }}
+            >
+              <DynamicForm
+                onChange={handleContentChange}
+                content={content}
+                template={template}
               />
-              <div
-                style={{ maxHeight: "calc(100vh - 550px)", overflowY: "auto" }}
-              >
-                <DynamicForm onChange={handleContentChange} content={content} />
-              </div>
-            </>
+            </div>
+          </>
+        ) : null}
+        <p>
+          {formatMessage(
+            {
+              id:
+                count === 1
+                  ? "implementation.actions.execution.confirmation.content"
+                  : "implementations.actions.execution.confirmation.content",
+            },
+            { implementations_count: count }
           )}
-          <p>
-            {formatMessage(
-              { id: "implementations.actions.execution.confirmation.content" },
-              { implementations_count: count }
-            )}
-          </p>
-          <div className="actions">
-            <Button
-              secondary
-              onClick={onCancel}
-              content={formatMessage({ id: "actions.cancel" })}
-            />
-            <Button
-              primary
-              disabled={isInvalid()}
-              onClick={() => handleSubmit(content)}
-              content={formatMessage({ id: "actions.create" })}
-            />
-          </div>
-        </Form>
-      </Suspense>
+        </p>
+        <div className="actions">
+          <Button
+            secondary
+            onClick={onCancel}
+            content={formatMessage({ id: "actions.cancel" })}
+          />
+          <Button
+            primary
+            disabled={isInvalid()}
+            onClick={() => onSubmit(content)}
+            content={formatMessage({ id: "actions.create" })}
+          />
+        </div>
+      </Form>
     </>
   );
 };
 
 ExecutionForm.propTypes = {
   count: PropTypes.number,
-  template: PropTypes.object,
-  templates: PropTypes.array,
-  selectTemplate: PropTypes.func,
-  handleSubmit: PropTypes.func,
+  onSubmit: PropTypes.func,
   onCancel: PropTypes.func,
 };
 
-const mapStateToProps = _.pick(["templates", "template"]);
-
-export default connect(mapStateToProps, { selectTemplate })(ExecutionForm);
+export default ExecutionForm;

package/src/components/ExecutionPopup.js

@@ -1,4 +1,3 @@
-import _ from "lodash/fp";
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
@@ -10,7 +9,7 @@ export const ExecutionPopup = ({
   disabled,
   executionGroupLoading,
   count,
-  handleSubmit,
+  onSubmit,
 }) => {
   const { formatMessage } = useIntl();
   const [open, setOpen] = useState(false);
@@ -32,14 +31,17 @@ export const ExecutionPopup = ({
           disabled={disabled}
           loading={executionGroupLoading}
           content={formatMessage({
-            id: "implementations.actions.do_execution",
+            id:
+              count === 1
+                ? "implementation.actions.do_execution"
+                : "implementations.actions.do_execution",
           })}
         />
       }
     >
       <ExecutionForm
         count={count}
-        handleSubmit={handleSubmit}
+        onSubmit={onSubmit}
         onCancel={() => setOpen(false)}
       />
     </Popup>
@@ -50,9 +52,11 @@ ExecutionPopup.propTypes = {
   count: PropTypes.number,
   disabled: PropTypes.bool,
   executionGroupLoading: PropTypes.bool,
-  handleSubmit: PropTypes.func,
+  onSubmit: PropTypes.func,
 };
 
-const mapStateToProps = _.pick(["executionGroupLoading"]);
+const mapStateToProps = ({ executionGroupLoading }) => ({
+  executionGroupLoading,
+});
 
 export default connect(mapStateToProps)(ExecutionPopup);

package/src/components/ImplementationCrumbs.js

@@ -0,0 +1,91 @@
+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, IMPLEMENTATIONS, linkTo } from "@truedat/core/routes";
+import { DateTime } from "@truedat/core/components";
+
+export const ImplementationCrumbs = ({ ruleImplementation }) => {
+  const { rule_result_id } = useParams();
+  const rule = _.get("rule")(ruleImplementation);
+
+  const ruleResultDate = _.flow(
+    _.propOr([], "results"),
+    _.find(_.propEq("id", _.toNumber(rule_result_id))),
+    _.pathOr("0000-00-00 00:00", "date")
+  )(ruleImplementation);
+
+  return (
+    <Breadcrumb>
+      {rule ? (
+        <>
+          <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: ruleImplementation.rule_id })}
+                  active={_.isEmpty(ruleImplementation)}
+                >
+                  {rule.name}
+                </Breadcrumb.Section>
+              ) : (
+                <Breadcrumb.Section active>{rule.name}</Breadcrumb.Section>
+              )}
+            </>
+          )}
+        </>
+      ) : (
+        <Breadcrumb.Section as={Link} to={IMPLEMENTATIONS} active={false}>
+          <FormattedMessage id="implementations.crumbs.top" />
+        </Breadcrumb.Section>
+      )}
+
+      {ruleImplementation.id && (
+        <>
+          <Breadcrumb.Divider icon="right angle" />
+          {rule_result_id ? (
+            <Breadcrumb.Section
+              as={Link}
+              to={linkTo.IMPLEMENTATION({
+                implementation_id: ruleImplementation.id,
+              })}
+              active={_.isEmpty(ruleImplementation)}
+            >
+              {ruleImplementation.implementation_key}
+            </Breadcrumb.Section>
+          ) : (
+            <Breadcrumb.Section active>
+              {ruleImplementation.implementation_key}
+            </Breadcrumb.Section>
+          )}
+        </>
+      )}
+      {rule_result_id && (
+        <>
+          <Breadcrumb.Divider icon="right angle" />
+          <Breadcrumb.Section active>
+            {<DateTime value={ruleResultDate} />}
+          </Breadcrumb.Section>
+        </>
+      )}
+    </Breadcrumb>
+  );
+};
+
+ImplementationCrumbs.propTypes = {
+  ruleImplementation: PropTypes.object,
+};
+
+const mapStateToProps = ({ rule, ruleImplementation }) => ({
+  rule,
+  ruleImplementation,
+});
+export default connect(mapStateToProps)(ImplementationCrumbs);

package/src/components/ImplementationResultBar.js

@@ -52,8 +52,7 @@ export default function ImplementationResultBar({ implementation }) {
       <Link
         as="div"
         className="rule-summary pointer"
-        to={linkTo.RULE_IMPLEMENTATION_RESULTS({
-          id: implementation.rule_id,
+        to={linkTo.IMPLEMENTATION_RESULTS({
           implementation_id: implementation.id,
         })}
       >

package/src/components/ImplementationStructures.js

@@ -74,20 +74,18 @@ export const ImplementationStructures = ({ implementation, canCreateLink }) => {
     />
   ));
 
-  const id = _.prop("rule_id")(implementation);
   const implementation_id = _.prop("id")(implementation);
 
   return (
     <Segment attached="bottom">
       <Grid>
-        {id && canCreateLink && (
+        {implementation_id && canCreateLink && (
           <Grid.Column width={16}>
             <Button
               floated="right"
               primary
               as={Link}
               to={linkTo.IMPLEMENTATION_STRUCTURES_NEW({
-                id,
                 implementation_id,
               })}
               content={<FormattedMessage id="links.actions.create" />}

package/src/components/Implementations.js

@@ -78,9 +78,10 @@ export const Implementations = ({
   deletedRender,
   setRuleImplementationStatus,
   manageRuleImplementationAction,
+  rule,
 }) => {
   const handleStatusChange = (id, mode) =>
-    setRuleImplementationStatus({ id, ...mode });
+    setRuleImplementationStatus({ id, ruleId: rule?.id, ...mode });
   const additionalColumns = manageRuleImplementationAction
     ? [<Table.HeaderCell key={"status"} width={1} />]
     : [];
@@ -107,13 +108,19 @@ Implementations.propTypes = {
   deletedRender: PropTypes.bool,
   setRuleImplementationStatus: PropTypes.func,
   manageRuleImplementationAction: PropTypes.bool,
+  rule: PropTypes.object,
 };
 
-const mapStateToProps = ({ ruleImplementations, userRulePermissions }) => ({
+const mapStateToProps = ({
+  ruleImplementations,
+  userRulePermissions,
+  rule,
+}) => ({
   ruleImplementations,
   manageRuleImplementationAction: _.prop("manage_quality_rule_implementations")(
     userRulePermissions
   ),
+  rule,
 });
 
 export default connect(mapStateToProps, { setRuleImplementationStatus })(