@truedat/dq 4.44.2 → 4.44.3

package/src/components/RemediationForm.js

@@ -6,20 +6,16 @@ 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 { TemplateSelector } from "@truedat/core/components";
 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,
@@ -36,8 +32,18 @@ export const RemediationForm = ({
   const isValidContent = _.flow(validateContent(template), _.isEmpty);
   const isValid = _.has("name")(template) && isValidContent(content);
 
-  const handleTemplateSelected = (e, { value }) => {
-    setTemplate(_.find({ id: value }, templates));
+  const handleTemplatesLoaded = ({ templates }) => {
+    const name = remediation?.df_name;
+    const template = name
+      ? _.find(_.propEq("name", name))(templates)
+      : _.size(templates) == 1
+      ? templates[0]
+      : null;
+    setTemplate(template);
+  };
+
+  const handleTemplateSelected = (e, { template }) => {
+    setTemplate(template);
   };
 
   const handleContentChange = (content) => {
@@ -63,41 +69,29 @@ export const RemediationForm = ({
   };
 
   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]);
+    const content =
+      template && remediation?.df_content
+        ? applyTemplate(template)(remediation.df_content)
+        : null;
+    setContent(content);
+  }, [remediation, template]);
 
   return (
     <Form aria-label="remediation-form">
-      {_.size(templates) > 1 && (
-        <TemplateSelector
-          name="template"
-          selectedValue={_.prop("id")(template)}
-          onChange={handleTemplateSelected}
-        />
-      )}
-
-      {!template ? null : (
+      <TemplateSelector
+        scope="remediation"
+        selectedValue={template?.id}
+        onChange={handleTemplateSelected}
+        onLoad={handleTemplatesLoaded}
+        required
+      />
+      {template ? (
         <DynamicForm
           template={template}
           onChange={handleContentChange}
           content={content || {}}
         />
-      )}
-
+      ) : null}
       <Button
         primary
         disabled={!isValid}
@@ -112,18 +106,13 @@ export const RemediationForm = ({
 
 RemediationForm.propTypes = {
   createRemediation: PropTypes.func.isRequired,
-  updateRemediation: PropTypes.func,
-  templates: PropTypes.array,
-  remediation: PropTypes.object,
-  onSave: PropTypes.func,
   latestResultId: PropTypes.number,
+  onSave: PropTypes.func,
+  remediation: PropTypes.object,
+  updateRemediation: PropTypes.func,
 };
 
-const mapStateToProps = ({ templates }) => ({
-  templates,
-});
-
-export default connect(mapStateToProps, {
+export default connect(null, {
   createRemediation,
   updateRemediation,
 })(RemediationForm);

package/src/components/RuleForm.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { injectIntl } from "react-intl";
+import { FormattedMessage, injectIntl } from "react-intl";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 import { compose } from "redux";
@@ -16,11 +16,10 @@ import {
   Popup,
   Icon,
 } from "semantic-ui-react";
-import { HistoryBackButton } from "@truedat/core/components";
+import { HistoryBackButton, TemplateSelector } from "@truedat/core/components";
 import { applyTemplate } from "@truedat/df/utils";
 import { selectDomain } from "@truedat/df/routines";
 import { getDomainSelectorOptions } from "@truedat/bg/selectors";
-import DynamicRuleForm from "./DynamicRuleForm";
 
 const DomainDropdownSelector = React.lazy(() =>
   import("@truedat/bg/taxonomy/components/DomainDropdownSelector")
@@ -34,6 +33,10 @@ const ConceptSelector = React.lazy(() =>
   import("@truedat/bg/concepts/relations/components/ConceptSelector")
 );
 
+const DynamicForm = React.lazy(() =>
+  import("@truedat/df/components/DynamicForm")
+);
+
 export const FieldLabelWrapping = ({
   children,
   label,
@@ -44,8 +47,8 @@ export const FieldLabelWrapping = ({
   <Form.Field>
     <label className="rule-form-label">
       {label}
-      {required && <span>*</span>}
-      {tooltip && (
+      {required ? <span>*</span> : null}
+      {tooltip ? (
         <Popup
           trigger={
             <Icon className="rule-form-popup" name="question circle outline" />
@@ -54,9 +57,9 @@ export const FieldLabelWrapping = ({
           on="click"
           hideOnScroll
         />
-      )}
-      {messages.map((msg, idx) => (
-        <Label key={idx} pointing="left">
+      ) : null}
+      {messages.map((msg, key) => (
+        <Label key={key} pointing="left">
           {msg}
         </Label>
       ))}
@@ -88,11 +91,12 @@ export class RuleForm extends React.Component {
     type_params: {},
     df_name: "",
     df_content: {},
+    template: null,
+    templatesLoading: true,
   };
 
   componentDidMount() {
     const { rule, concept, selectDomain } = this.props;
-    const isConceptPreselected = concept !== undefined;
     const description = rule ? _.propOr({}, "description")(rule) : {};
     if (rule) {
       !_.isNil(rule.domain_id) && selectDomain({ id: rule.domain_id });
@@ -102,35 +106,45 @@ export class RuleForm extends React.Component {
           name: rule?.current_business_concept_version?.name,
           business_concept_id: rule.business_concept_id,
         },
-        isConceptPreselected,
       });
-    } else if (_.negate(_.isEmpty)(concept)) {
+    } else if (!_.isEmpty(concept)) {
       !_.isNil(concept.domain.id) && selectDomain({ id: concept.domain.id });
-      this.setState({
-        concept,
-        isConceptPreselected,
-      });
+      this.setState({ concept });
     }
 
     this.updateDescription(description);
   }
 
-  componentDidUpdate(prevProps) {
-    const { applyTemplate, selectDomain, template, rule } = this.props;
-    const { domain_id } = this.state;
+  updateRule = (rule) => {
+    this.setState({ ...rule });
+  };
 
-    if (!_.isEmpty(template) && !_.eq(prevProps.template, template)) {
-      this.setState({
-        type: _.prop("name")(template),
-        df_content: applyTemplate(rule?.df_content, domain_id),
-      });
-      selectDomain({ id: domain_id });
-    }
-  }
+  handleTemplateChange = (template) => {
+    const { domain_id, df_content } = this.state;
+    this.setState({
+      template,
+      df_name: template?.name || null,
+      df_content: template
+        ? applyTemplate(template)(df_content, domain_id)
+        : null,
+    });
+  };
 
-  updateRule = (rule) => this.setState({ ...rule });
+  handleTemplatesLoaded = ({ templates }) => {
+    const name = this.props.rule?.df_name;
+    const template = name
+      ? _.find(_.propEq("name", name))(templates)
+      : _.size(templates) == 1
+      ? templates[0]
+      : null;
+    this.setState({ template, templatesLoading: false });
+  };
+
+  handleTemplateSelected = (e, { template }) => {
+    this.setState({ template });
+  };
 
-  handleDfContentChange = (df_content) => this.setState({ df_content });
+  handleContentChange = (df_content) => this.setState({ df_content });
 
   messagesInformed = (messages) => _.some(_.negate(_.isNil))(messages);
 
@@ -165,49 +179,37 @@ export class RuleForm extends React.Component {
   handleSubmit = (e) => {
     e.preventDefault();
     if (this.messagesInformed(this.generateValidationMessages())) return;
-    const { applyTemplate, template, handleSubmit, match, editMode } =
-      this.props;
-
-    const fieldsToOmit = ["concept"];
-    if (editMode) fieldsToOmit.push("rule_type_id");
-    const rule = _.flow(this.withConceptId, _.omit(fieldsToOmit))(this.state);
-    const df_content = applyTemplate(rule?.df_content, rule?.domain_id);
+    const { onSubmit, match } = this.props;
+    // eslint-disable-next-line no-unused-vars
+    const { template, concept, templatesLoading, ...rule } = this.state;
+    const df_content = template
+      ? applyTemplate(template)(rule?.df_content, rule?.domain_id)
+      : null;
 
-    handleSubmit({
-      rule: {
-        ...rule,
-        df_name: template.name,
-        df_content,
-      },
+    onSubmit({
+      rule: { ...rule, df_content },
       ids: match.params,
     });
   };
 
-  withConceptId = (rule) => {
-    const business_concept_id = _.negate(_.isNil)(
-      _.path("concept.business_concept_id")(rule)
-    )
-      ? _.path("concept.business_concept_id")(rule).toString()
-      : null;
-    return { ...rule, business_concept_id };
-  };
-
   handleConceptSelected = (concept) => {
-    this.setState({ concept });
+    this.setState({
+      concept,
+      business_concept_id: concept?.business_concept_id || null,
+    });
     concept && this.handleSelectionClick();
   };
 
   handleDomainSelected = (e, { value }) => {
     const domain_id = value;
-
     const { selectDomain, editMode } = this.props;
     !_.isString(domain_id) && selectDomain({ id: domain_id });
-    const concept =
-      this.state.isConceptPreselected && !editMode ? this.state.concept : null;
-    this.setState({
-      concept,
-      domain_id,
-    });
+
+    this.setState(
+      editMode
+        ? { concept: null, business_concept_id: null, domain_id }
+        : { domain_id }
+    );
   };
 
   handleSelectionClick = () => {
@@ -237,10 +239,9 @@ export class RuleForm extends React.Component {
   render() {
     const {
       isSubmitting,
-      templatesLoaded,
       intl: { formatMessage },
     } = this.props;
-    const rule = this.state;
+    const { template, ...rule } = this.state;
     const { domain_id } = rule;
     const { concept, domainOptions } = this.props;
     const messages = this.generateValidationMessages();
@@ -270,6 +271,7 @@ export class RuleForm extends React.Component {
             required
           >
             <Form.Input
+              aria-label={formatMessage({ id: "rule.props.name.placeholder" })}
               name="name"
               onChange={this.handleChange}
               value={rule.name}
@@ -288,30 +290,30 @@ export class RuleForm extends React.Component {
                 onChange={this.handleEditorChange}
               />
             )}
-            <FieldLabelWrapping
-              label={formatMessage({ id: "domain.selector.label" })}
-              messages={_.prop("domain")(messages)}
-              required
-            >
-              <DomainDropdownSelector
-                name="domain"
-                domainOptions={
-                  domainOptions
-                    ? getDomainSelectorOptions({ domains: domainOptions })
-                    : null
-                }
-                hideLabel
-                invalid={!_.isFinite(this.state.domain_id)}
-                onChange={this.handleDomainSelected}
-                value={this.state.domain_id}
-              />
-            </FieldLabelWrapping>
+          </FieldLabelWrapping>
+          <FieldLabelWrapping
+            label={formatMessage({ id: "domain.selector.label" })}
+            messages={_.prop("domain")(messages)}
+            required
+          >
+            <DomainDropdownSelector
+              name="domain"
+              domainOptions={
+                domainOptions
+                  ? getDomainSelectorOptions({ domains: domainOptions })
+                  : null
+              }
+              hideLabel
+              invalid={!_.isFinite(this.state.domain_id)}
+              onChange={this.handleDomainSelected}
+              value={this.state.domain_id}
+            />
           </FieldLabelWrapping>
           {_.isEmpty(concept) && (
             <Segment disabled={_.isNil(domain_id)}>
               <Form.Group inline>
                 <label className="rule-form-label">
-                  {formatMessage({ id: "rule.form.concept.label" })}
+                  <FormattedMessage id="rule.form.concept.label" />
                 </label>
                 {_.path("concept.name")(rule) && (
                   <Label size={"medium"}>
@@ -329,34 +331,37 @@ export class RuleForm extends React.Component {
 
               <Accordion>
                 <Accordion.Title
-                  active={rule.activeSelection && !_.isNil(domain_id)}
+                  active={rule.activeSelection && !!domain_id}
                   onClick={this.handleSelectionClick}
                 >
                   <Icon name="dropdown" />
-                  {formatMessage({ id: "rule.form.accordion.select" })}{" "}
+                  <FormattedMessage id="rule.form.accordion.select" />
                 </Accordion.Title>
-                <Accordion.Content
-                  active={rule.activeSelection && !_.isNil(domain_id)}
-                >
+                <Accordion.Content active={rule.activeSelection && !!domain_id}>
                   <ConceptSelector
                     showTitle={false}
                     defaultFilters={defaultFilters}
                     handleConceptSelected={this.handleConceptSelected}
-                    businessConceptId={_.path("concept.business_concept_id")(
-                      rule
-                    )}
+                    businessConceptId={rule?.concept?.business_concept_id}
                   />
                 </Accordion.Content>
               </Accordion>
             </Segment>
           )}
-          {!_.isNil(rule.df_content) && templatesLoaded && (
-            <DynamicRuleForm
-              name="dynamicForm"
-              handleContentChange={this.handleDfContentChange}
-              dfContent={rule.df_content}
+          <TemplateSelector
+            scope="dq"
+            selectedValue={template?.id}
+            onChange={this.handleTemplateSelected}
+            onLoad={this.handleTemplatesLoaded}
+            required
+          />
+          {template ? (
+            <DynamicForm
+              onChange={this.handleContentChange}
+              content={rule.df_content}
+              template={template}
             />
-          )}
+          ) : null}
           <div className="actions">
             <HistoryBackButton
               content={formatMessage({ id: "actions.cancel" })}
@@ -385,25 +390,19 @@ export class RuleForm extends React.Component {
 
 RuleForm.propTypes = {
   concept: PropTypes.object,
-  applyTemplate: PropTypes.func,
-  handleSubmit: PropTypes.func.isRequired,
+  domainOptions: PropTypes.array,
   editMode: PropTypes.bool,
+  intl: PropTypes.object,
   isSubmitting: PropTypes.bool,
-  templatesLoaded: PropTypes.bool,
+  match: PropTypes.object,
+  onSubmit: PropTypes.func.isRequired,
   rule: PropTypes.object,
   selectDomain: PropTypes.func,
-  template: PropTypes.object,
-  match: PropTypes.object,
-  intl: PropTypes.object,
-  domainOptions: PropTypes.array,
 };
 
 const mapStateToProps = (state) => ({
   isSubmitting: state.ruleCreating || state.ruleUpdating,
   concept: state.concept,
-  templatesLoaded: !state.templatesLoading && !_.isEmpty(state.templates),
-  template: state.template,
-  applyTemplate: applyTemplate(state.template),
   domainOptions: _.pathOr(null, "conceptRulesActions.domain_ids")(state),
 });
 

package/src/components/RuleImplementation.js

@@ -8,9 +8,10 @@ import { Header, Label, Menu, Grid, Icon } from "semantic-ui-react";
 import { ConfirmModal, GroupActions } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
 import { linkTo } from "@truedat/core/routes";
-import { setRuleImplementationStatus } from "../routines";
+import { createExecutionGroup, setRuleImplementationStatus } from "../routines";
 import RuleImplementationTabs from "./RuleImplementationTabs";
 import ImplementationResultBar from "./ImplementationResultBar";
+import ExecutionPopup from "./ExecutionPopup";
 
 const getAvailableActions = (props, formatMessage) => {
   const contentActions = _.isEmpty(props?.ruleImplementation)
@@ -73,7 +74,7 @@ const getAvailableActions = (props, formatMessage) => {
           to: linkTo.IMPLEMENTATION_EDIT({
             implementation_id: _.path("ruleImplementation.id")(props),
           }),
-          filter: props.editPermission,
+          filter: props.canEdit,
           selected: false,
           active: false,
         },
@@ -157,10 +158,12 @@ OptionModal.propTypes = {
 
 export const RuleImplementation = ({
   children,
+  createExecutionGroup,
+  canExecute,
   setRuleImplementationStatus,
   ruleImplementation,
-  editPermission,
-  managePermission,
+  canEdit,
+  canManage,
 }) => {
   const authorized = useAuthorized();
   const { formatMessage } = useIntl();
@@ -172,10 +175,16 @@ export const RuleImplementation = ({
       authorized,
       ruleImplementation,
       setRuleImplementationStatus,
-      editPermission,
+      canEdit,
     },
     formatMessage
   );
+
+  const handleSubmit = (df_content) => {
+    const query = { filters: { id: [ruleImplementation?.id] } };
+    createExecutionGroup({ ...query, df_content });
+  };
+
   return (
     <>
       <Grid>
@@ -190,6 +199,9 @@ export const RuleImplementation = ({
         </Grid.Column>
         <Grid.Column width={8} textAlign="right">
           <>
+            {canExecute && ruleImplementation.executable ? (
+              <ExecutionPopup onSubmit={handleSubmit} count={1} />
+            ) : null}
             {deletedAt && (
               <Label
                 className="alert warning"
@@ -199,7 +211,7 @@ export const RuleImplementation = ({
                 icon={{ name: "warning circle", color: "red" }}
               />
             )}
-            {managePermission && !_.isEmpty(availableActions) && (
+            {canManage && !_.isEmpty(availableActions) && (
               <GroupActions availableActions={availableActions} />
             )}
           </>
@@ -212,20 +224,24 @@ export const RuleImplementation = ({
 };
 
 RuleImplementation.propTypes = {
+  createExecutionGroup: PropTypes.func,
+  canExecute: PropTypes.bool,
   ruleImplementation: PropTypes.object.isRequired,
   setRuleImplementationStatus: PropTypes.func,
   ruleImplementation: PropTypes.object,
-  editPermission: PropTypes.bool,
-  managePermission: PropTypes.bool,
+  canEdit: PropTypes.bool,
+  canManage: PropTypes.bool,
   children: PropTypes.node,
 };
 
 const mapStateToProps = ({ ruleImplementation, implementationActions }) => ({
   ruleImplementation,
-  editPermission: !!_.pathOr(false, "edit")(implementationActions),
-  managePermission: !!_.pathOr(false, "manage")(implementationActions),
+  canExecute: !!implementationActions?.execute,
+  canEdit: !!implementationActions?.edit,
+  canManage: !!implementationActions?.manage,
 });
 
-export default connect(mapStateToProps, { setRuleImplementationStatus })(
-  RuleImplementation
-);
+export default connect(mapStateToProps, {
+  createExecutionGroup,
+  setRuleImplementationStatus,
+})(RuleImplementation);

package/src/components/RuleImplementationActions.js

@@ -1,34 +1,31 @@
-import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { FormattedMessage } from "react-intl";
+import { useIntl } from "react-intl";
 import { connect } from "react-redux";
 import { Link, useParams } from "react-router-dom";
 import { Button } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 
-const RuleImplementationActions = ({
-  manageRuleImplementationAction,
-  manageRawRuleImplementationAction,
-}) => {
+const RuleImplementationActions = ({ canCreate, canCreateRaw }) => {
+  const { formatMessage } = useIntl();
   const params = useParams();
   return (
     <>
-      {manageRawRuleImplementationAction && (
+      {canCreateRaw && (
         <Button
           as={Link}
           to={linkTo.RULE_IMPLEMENTATION_NEW_RAW(params)}
           className="primary_action"
-          content={<FormattedMessage id="quality.rule.actions.create_raw" />}
+          content={formatMessage({ id: "quality.rule.actions.create_raw" })}
         />
       )}
-      {manageRuleImplementationAction && (
+      {canCreate && (
         <Button
           primary
           as={Link}
           to={linkTo.RULE_IMPLEMENTATION_NEW(params)}
           className="primary_action"
-          content={<FormattedMessage id="quality.rule.actions.create" />}
+          content={formatMessage({ id: "quality.rule.actions.create" })}
         />
       )}
     </>
@@ -36,20 +33,13 @@ const RuleImplementationActions = ({
 };
 
 RuleImplementationActions.propTypes = {
-  manageRuleImplementationAction: PropTypes.bool,
-  manageRawRuleImplementationAction: PropTypes.bool,
+  canCreate: PropTypes.bool,
+  canCreateRaw: PropTypes.bool,
 };
 
 const mapStateToProps = ({ userRulePermissions }) => ({
-  userRulePermissions: userRulePermissions,
-  manageRuleImplementationAction: _.propOr(
-    false,
-    "manage_quality_rule_implementations"
-  )(userRulePermissions),
-  manageRawRuleImplementationAction: _.propOr(
-    false,
-    "manage_raw_quality_rule_implementations"
-  )(userRulePermissions),
+  canCreate: !!userRulePermissions?.manage_quality_rule_implementations,
+  canCreateRaw: !!userRulePermissions?.manage_raw_quality_rule_implementations,
 });
 
 export default connect(mapStateToProps)(RuleImplementationActions);

package/src/components/RuleImplementationsActions.js

@@ -81,7 +81,7 @@ export const RuleImplementationsActions = ({
                 ? ruleImplementationCount
                 : selectedImplementations.length
             }
-            handleSubmit={handleSubmit}
+            onSubmit={handleSubmit}
           />
         </>
       )}