@truedat/dq 4.33.8 → 4.33.9

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [4.33.9] 2021-11-29
+
+- [TD-4306] Add `df_content` to execution groups
+
 ## [4.33.6] 2021-11-29
 
 ### Added
@@ -16,7 +20,7 @@
 
 ### Hotfix
 
-[TD-4327] Fix dropdown domain selector for glossay new quality rule
+- [TD-4327] Fix dropdown domain selector for glossay new quality rule
 
 ## [4.31.4] 2021-10-25
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.33.8",
+  "version": "4.33.9",
   "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.33.8",
+    "@truedat/test": "4.33.9",
     "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.33.8",
-    "@truedat/df": "4.33.8",
+    "@truedat/core": "4.33.9",
+    "@truedat/df": "4.33.9",
     "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": "14e8164b15d17c5d25ebd0296b6a9899b32dff1d"
+  "gitHead": "f2635d86f1fc4efccf638aba8ebab749f39a9b1e"
 }

package/src/components/ExecutionForm.js

@@ -0,0 +1,105 @@
+import _ from "lodash/fp";
+import React, { Suspense, useState } from "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 { 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,
+}) => {
+  const { formatMessage } = useIntl();
+  const [content, setContent] = useState({});
+
+  const handleContentChange = (content) => setContent(content);
+
+  const handleTemplateSelected = (e, { value }) =>
+    selectTemplate({ id: value });
+
+  const isInvalid = () =>
+    template && !_.isEmpty(validateContent(template)(content));
+
+  if (_.size(templates) == 1) {
+    const id = _.flow(_.head, _.prop("id"))(templates);
+    selectTemplate({ id });
+  }
+
+  return (
+    <>
+      <Header
+        as="h2"
+        content={formatMessage({
+          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}
+            />
+          )}
+          {template && template.id && (
+            <>
+              <Header
+                as="h3"
+                content={formatMessage({
+                  id: "implementations.actions.execution.confirmation.legend",
+                })}
+              />
+              <DynamicForm onChange={handleContentChange} content={content} />
+            </>
+          )}
+          <p>
+            {formatMessage(
+              { id: "implementations.actions.execution.confirmation.content" },
+              { implementations_count: count }
+            )}
+          </p>
+          <div className="actions">
+            <Button
+              primary
+              disabled={isInvalid()}
+              onClick={() => handleSubmit(content)}
+              content={formatMessage({ id: "actions.create" })}
+            />
+          </div>
+        </Form>
+      </Suspense>
+    </>
+  );
+};
+
+ExecutionForm.propTypes = {
+  count: PropTypes.number,
+  template: PropTypes.object,
+  templates: PropTypes.array,
+  selectTemplate: PropTypes.func,
+  handleSubmit: PropTypes.func,
+};
+
+const mapStateToProps = _.pick(["templates", "template"]);
+
+export default connect(mapStateToProps, { selectTemplate })(ExecutionForm);

package/src/components/ExecutionPopup.js

@@ -0,0 +1,54 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { Button, Popup } from "semantic-ui-react";
+import ExecutionForm from "./ExecutionForm";
+
+export const ExecutionPopup = ({
+  disabled,
+  executionGroupLoading,
+  count,
+  handleSubmit,
+}) => {
+  const { formatMessage } = useIntl();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popup
+      on="click"
+      basic
+      flowing
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      open={open}
+      position="bottom right"
+      size="large"
+      positionFixed
+      trigger={
+        <Button
+          secondary
+          disabled={disabled}
+          loading={executionGroupLoading}
+          content={formatMessage({
+            id: "implementations.actions.do_execution",
+          })}
+        />
+      }
+    >
+      <ExecutionForm count={count} handleSubmit={handleSubmit} />
+    </Popup>
+  );
+};
+
+ExecutionPopup.propTypes = {
+  count: PropTypes.number,
+  disabled: PropTypes.bool,
+  executionGroupLoading: PropTypes.bool,
+  handleSubmit: PropTypes.func,
+};
+
+const mapStateToProps = _.pick(["executionGroupLoading"]);
+
+export default connect(mapStateToProps)(ExecutionPopup);

package/src/components/ImplementationsRoutes.js

@@ -5,12 +5,22 @@ import ImplementationFiltersLoader from "./ImplementationFiltersLoader";
 import RuleImplementations from "./RuleImplementations";
 import RuleImplementationsLoader from "./RuleImplementationsLoader";
 
+const TemplatesLoader = React.lazy(() =>
+  import("@truedat/df/templates/components/TemplatesLoader")
+);
+
 const ImplementationsRoutes = () => (
-  <>
-    <Route path={IMPLEMENTATIONS} component={RuleImplementationsLoader} />
-    <Route path={IMPLEMENTATIONS} component={ImplementationFiltersLoader} />
-    <Route path={IMPLEMENTATIONS} component={RuleImplementations} exact />
-  </>
+  <Route
+    path={IMPLEMENTATIONS}
+    render={() => (
+      <>
+        <RuleImplementationsLoader />
+        <ImplementationFiltersLoader />
+        <TemplatesLoader scope="qe" />
+        <RuleImplementations exact />
+      </>
+    )}
+  />
 );
 
 export default ImplementationsRoutes;

package/src/components/RuleImplementationsActions.js

@@ -4,8 +4,6 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Checkbox } from "semantic-ui-react";
 import { useIntl } from "react-intl";
-import { FormattedMessage } from "react-intl";
-import { ConfirmModal } from "@truedat/core/components";
 import { downloadImplementations } from "../routines";
 import { getImplementationsExecution } from "../selectors";
 import {
@@ -14,6 +12,7 @@ import {
   removeImplementationFilter,
   createExecutionGroup,
 } from "../routines";
+import ExecutionPopup from "./ExecutionPopup";
 
 const staticHeaderLabels = [
   "implementation_key",
@@ -39,20 +38,6 @@ const staticContentLabels = [
   "executable.false",
 ];
 
-const actions = (handleSubmit) => [
-  {
-    key: "no",
-    secondary: true,
-    content: <FormattedMessage id="confirmation.no" />,
-  },
-  {
-    key: "yes",
-    primary: true,
-    content: <FormattedMessage id="confirmation.yes" />,
-    onClick: handleSubmit,
-  },
-];
-
 export const RuleImplementationsActions = ({
   addImplementationFilter,
   canExecute,
@@ -60,7 +45,6 @@ export const RuleImplementationsActions = ({
   executeImplementationsOn,
   toggleImplementationFilterValue,
   removeImplementationFilter,
-  executionGroupLoading,
   createExecutionGroup,
   selectedImplementations,
   implementationQuery,
@@ -99,11 +83,11 @@ export const RuleImplementationsActions = ({
     checked ? showExecutableInfo() : hideExecutableInfo();
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = (df_content) => {
     const query = _.isEmpty(selectedImplementations)
       ? implementationQuery
       : { filters: { id: selectedImplementations } };
-    createExecutionGroup({ ...query });
+    createExecutionGroup({ ...query, df_content });
   };
   return (
     <div style={{ float: "right" }}>
@@ -117,32 +101,14 @@ export const RuleImplementationsActions = ({
             checked={executeImplementationsOn}
             style={{ top: "6px", marginRight: "7.5px" }}
           />
-          <ConfirmModal
-            actions={actions(handleSubmit)}
-            trigger={
-              <Button
-                id="execute_button"
-                secondary
-                disabled={!executeImplementationsOn}
-                loading={executionGroupLoading}
-                content={
-                  <FormattedMessage id="implementations.actions.do_execution" />
-                }
-              />
-            }
-            header={
-              <FormattedMessage id="implementations.actions.execution.confirmation.header" />
-            }
-            content={
-              <FormattedMessage
-                id="implementations.actions.execution.confirmation.content"
-                values={{
-                  implementations_count: _.isEmpty(selectedImplementations)
-                    ? ruleImplementationCount
-                    : selectedImplementations.length,
-                }}
-              />
+          <ExecutionPopup
+            disabled={!executeImplementationsOn}
+            count={
+              _.isEmpty(selectedImplementations)
+                ? ruleImplementationCount
+                : selectedImplementations.length
             }
+            handleSubmit={handleSubmit}
           />
         </>
       )}
@@ -170,7 +136,6 @@ RuleImplementationsActions.propTypes = {
   canExecute: PropTypes.bool,
   createExecutionGroup: PropTypes.func,
   executeImplementationsOn: PropTypes.bool,
-  executionGroupLoading: PropTypes.bool,
   implementationsExecution: PropTypes.bool,
   implementationQuery: PropTypes.object,
   removeImplementationFilter: PropTypes.func,
@@ -184,7 +149,6 @@ RuleImplementationsActions.propTypes = {
 
 const mapStateToProps = (state) => ({
   canExecute: _.propOr(false, "userImplementationsPermissions.execute")(state),
-  executionGroupLoading: state.executionGroupLoading,
   ruleImplementationCount: state.ruleImplementationCount,
   implementationsExecution: getImplementationsExecution(state),
   ruleImplementationsDownloading: state.ruleImplementationsDownloading,

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { ExecutionForm } from "../ExecutionForm";
+
+describe("<ExecutionForm />", () => {
+  const handleSubmit = jest.fn();
+  const selectTemplate = jest.fn();
+  const props = { count: 1, templates: [], handleSubmit, selectTemplate };
+  const renderOpts = {
+    messages: {
+      en: {
+        "actions.create": "create",
+        "implementations.actions.execution.confirmation.content": "content",
+        "implementations.actions.execution.confirmation.header": "header",
+        "implementations.actions.execution.confirmation.legend": "legend",
+      },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ExecutionForm {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { ExecutionPopup } from "../ExecutionPopup";
+
+describe("<ExecutionPopup />", () => {
+  const handleSubmit = jest.fn();
+  const props = { count: 1, handleSubmit };
+  const renderOpts = {
+    messages: {
+      en: {
+        "implementations.actions.do_execution": "do_execution",
+      },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ExecutionPopup {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -24,7 +24,7 @@ describe("<RuleImplementationsActions />", () => {
     addImplementationFilter,
     executeImplementationsOn: false,
     setMode,
-    removeImplementationFilter
+    removeImplementationFilter,
   };
   it("matches the latest snapshot", () => {
     const wrapper = shallow(<RuleImplementationsActions {...props} />);
@@ -43,11 +43,11 @@ describe("<RuleImplementationsActions />", () => {
       executionGroupLoading: false,
       ruleImplementationCount: 12,
       implementationsExecution: true,
-      role: "user"
+      role: "user",
     };
     const wrapper = shallow(<RuleImplementationsActions {...props} />);
     expect(wrapper.find({ id: "execute_checkbox" }).length).toBe(1);
-    expect(wrapper.find("ConfirmModal").length).toBe(1);
+    expect(wrapper.find("Connect(ExecutionPopup)").length).toBe(1);
   });
 
   it("as user I do not see execute rules actions if I have no permission", () => {
@@ -55,11 +55,11 @@ describe("<RuleImplementationsActions />", () => {
       canExecute: false,
       executionGroupLoading: false,
       ruleImplementationCount: 12,
-      implementationsExecution: true
+      implementationsExecution: true,
     };
     const wrapper = shallow(<RuleImplementationsActions {...props} />);
     expect(wrapper.find("Checkbox").length).toBe(0);
-    expect(wrapper.find("ConfirmModal").length).toBe(0);
+    expect(wrapper.find("Connect(ExecutionPopup)").length).toBe(0);
     expect(wrapper.find({ id: "execute_button" }).length).toBe(0);
   });
 
@@ -69,12 +69,12 @@ describe("<RuleImplementationsActions />", () => {
       executionGroupLoading: false,
       ruleImplementationCount: 12,
       implementationsExecution: true,
-      executeImplementationsOn: true
+      executeImplementationsOn: true,
     };
     const wrapper = shallow(<RuleImplementationsActions {...props} />);
     expect(wrapper.find("Checkbox").length).toBe(1);
     expect(wrapper.find("Checkbox").props().checked).toBeTruthy();
-    expect(wrapper.find("ConfirmModal").length).toBe(1);
+    expect(wrapper.find("Connect(ExecutionPopup)").length).toBe(1);
   });
 
   it("handles checkbox onChange", () => {
@@ -85,11 +85,11 @@ describe("<RuleImplementationsActions />", () => {
     toCheck.simulate("change");
     expect(setMode).toHaveBeenCalledWith(true);
     expect(addImplementationFilter).toHaveBeenCalledWith({
-      filter: "executable"
+      filter: "executable",
     });
     expect(toggleImplementationFilterValue).toHaveBeenCalledWith({
       filter: "executable",
-      value: true
+      value: true,
     });
     wrapper.setProps({ executeImplementationsOn: true });
     setMode.mockReset();
@@ -98,29 +98,7 @@ describe("<RuleImplementationsActions />", () => {
     toUncheck.simulate("change");
     expect(setMode).toHaveBeenCalledWith(false);
     expect(removeImplementationFilter).toHaveBeenCalledWith({
-      filter: "executable"
-    });
-  });
-
-  it("as user I can submit an execution", () => {
-    const createExecutionGroup = jest.fn();
-    const props = {
-      canExecute: true,
-      executionGroupLoading: false,
-      ruleImplementationCount: 12,
-      implementationsExecution: true,
-      executeImplementationsOn: true,
-      createExecutionGroup,
-      selectedImplementations: [],
-      implementationQuery: { filters: { concept: ["foo"] } }
-    };
-    const wrapper = shallow(<RuleImplementationsActions {...props} />);
-    _.find({ key: "yes" })(
-      wrapper.find("ConfirmModal").props().actions
-    ).onClick({ preventDefault() {} });
-    expect(props.createExecutionGroup.mock.calls.length).toBe(1);
-    expect(props.createExecutionGroup).toHaveBeenCalledWith({
-      filters: { concept: ["foo"] }
+      filter: "executable",
     });
   });
 });

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

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ExecutionForm /> matches the latest snapshot 1`] = `
+<div>
+  <h2
+    class="ui header"
+  >
+    header
+  </h2>
+  <form
+    class="ui form"
+    style="display: none;"
+  >
+    <p>
+      content
+    </p>
+    <div
+      class="actions"
+    >
+      <button
+        class="ui primary button"
+      >
+        create
+      </button>
+    </div>
+  </form>
+</div>
+`;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ExecutionPopup /> matches the latest snapshot 1`] = `
+<div>
+  <button
+    class="ui secondary button"
+  >
+    do_execution
+  </button>
+</div>
+`;

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

@@ -22,55 +22,10 @@ exports[`<RuleImplementationsActions /> matches the latest snapshot 1`] = `
     toggle={true}
     type="checkbox"
   />
-  <ConfirmModal
-    actions={
-      Array [
-        Object {
-          "content": <Memo(MemoizedFormattedMessage)
-            id="confirmation.no"
-          />,
-          "key": "no",
-          "secondary": true,
-        },
-        Object {
-          "content": <Memo(MemoizedFormattedMessage)
-            id="confirmation.yes"
-          />,
-          "key": "yes",
-          "onClick": [Function],
-          "primary": true,
-        },
-      ]
-    }
-    content={
-      <Memo(MemoizedFormattedMessage)
-        id="implementations.actions.execution.confirmation.content"
-        values={
-          Object {
-            "implementations_count": 12,
-          }
-        }
-      />
-    }
-    header={
-      <Memo(MemoizedFormattedMessage)
-        id="implementations.actions.execution.confirmation.header"
-      />
-    }
-    trigger={
-      <Button
-        as="button"
-        content={
-          <Memo(MemoizedFormattedMessage)
-            id="implementations.actions.do_execution"
-          />
-        }
-        disabled={true}
-        id="execute_button"
-        loading={false}
-        secondary={true}
-      />
-    }
+  <Connect(ExecutionPopup)
+    count={12}
+    disabled={true}
+    handleSubmit={[Function]}
   />
   <Button
     as="button"

package/src/messages/en.js

@@ -48,6 +48,7 @@ export default {
   "implementations.actions.download.tooltip": "Download to csv",
   "implementations.actions.execution.confirmation.content": "{implementations_count} implementations will be executed. Are you sure?",
   "implementations.actions.execution.confirmation.header": "Implementations execution",
+  "implementations.actions.execution.confirmation.legend": "Template fields",
   "implementations.execute.filtered": "{count} implementations to execute",
   "implementations.search.placeholder": "Search implementations...",
   "navigation.quality": "Quality",

package/src/messages/es.js

@@ -48,6 +48,7 @@ export default {
   "implementations.actions.download.tooltip": "Descargar en csv",
   "implementations.actions.execution.confirmation.content": "Se va a solicitar la ejecución de {implementations_count} implementaciones. ¿Estás seguro?",
   "implementations.actions.execution.confirmation.header": "Solicitar ejecución de implementaciones",
+  "implementations.actions.execution.confirmation.legend": "Campos de la plantilla",
   "implementations.execute.filtered": "{count} implementaciones a ejecutar",
   "implementations.search.placeholder": "Buscar implementaciones...",
   "navigation.quality": "Calidad",