@truedat/dq 4.44.2 → 4.44.5

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [4.44.5] 2022-05-20
+
+### Changed
+
+- [TD-4230] Refactored components to use `SelectableDynamicForm`:
+  - `NewRuleImplementation`
+  - `RemediationForm`
+  - `RuleForm`
+  - `InformationForm`
+  - `RuleImplementationRawForm`
+
+## [4.44.3] 2022-05-11
+
+### Added
+
+- [TD-4045] Implementation execution button in implementation view
+
 ## [4.44.2] 2022-05-11
 
 ### Fixed
@@ -16,7 +33,8 @@
 
 # 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.2",
+  "version": "4.44.5",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -22,17 +22,20 @@
     "eslint:fix": "eslint --fix src/**"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.0",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.44.2",
-    "babel-jest": "^27.0.6",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-react": "^7.17.12",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@truedat/test": "4.44.5",
+    "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-react-intl": "^5.1.18",
@@ -41,7 +44,8 @@
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.6",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "redux-saga-test-plan": "^4.0.4",
@@ -49,6 +53,8 @@
     "semantic-ui-react": "^2.0.3"
   },
   "jest": {
+    "maxWorkers": "50%",
+    "testTimeout": 10000,
     "moduleDirectories": [
       "<rootDir>/src",
       "../../node_modules"
@@ -81,15 +87,16 @@
     ]
   },
   "dependencies": {
-    "@apollo/client": "^3.4.10",
-    "@truedat/core": "4.44.2",
-    "@truedat/df": "4.44.2",
+    "@apollo/client": "^3.6.4",
+    "@truedat/core": "4.44.5",
+    "@truedat/df": "4.44.5",
     "axios": "^0.19.2",
     "graphql": "^15.5.3",
     "path-to-regexp": "^1.7.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "rc-slider": "^8.6.1",
     "react-intl": "^5.20.10",
+    "react-moment": "^1.1.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "redux": "^4.1.1",
@@ -103,5 +110,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "ca0c5fffcba96736f7a2054f3c37789da8c30a9e"
+  "gitHead": "5a339468198c803592b285eddd0dd0c0b0eced93"
 }

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/NewRule.js

@@ -21,7 +21,7 @@ export const NewRule = ({ rule, createRule }) => (
       </Header.Content>
     </Header>
     <DomainsLoader actions="manage_quality_rule" />
-    <RuleForm handleSubmit={createRule} />
+    <RuleForm onSubmit={createRule} />
   </Container>
 );