@truedat/dq 4.33.8 → 4.34.2

package/src/components/ImplementationSummary.js

@@ -1,11 +1,12 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Header, Icon, Label, Grid, Table } from "semantic-ui-react";
+import { Header, Icon, Table, Segment } from "semantic-ui-react";
 import { Link } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
 import ConditionSummary, { empty, path } from "./ConditionSummary";
+import InformationSummary from "./InformationSummary";
 
 const defaults = [
   "executable",
@@ -38,45 +39,6 @@ FormattedLink.propTypes = {
   operator: PropTypes.object,
 };
 
-const GeneralSummary = ({ executable, implementationKey }) => (
-  <>
-    <Header as="h3">
-      <Icon name="database" size="small" />
-      <Header.Content>
-        <FormattedMessage id="ruleImplementations.summary.headers.implementation" />
-      </Header.Content>
-    </Header>
-    <Grid>
-      <Grid.Row>
-        <Grid.Column>
-          <Label color={executable ? "olive" : "teal"}>
-            <FormattedMessage
-              id={`ruleImplementation.props.executable.${executable}`}
-            />
-          </Label>
-        </Grid.Column>
-      </Grid.Row>
-      {implementationKey && (
-        <Grid.Row columns={2}>
-          <Grid.Column width={4}>
-            <FormattedMessage
-              id={`ruleImplementation.summary.implementation_key`}
-            />
-          </Grid.Column>
-          <Grid.Column width={12}>
-            <span className="highlighted">{`"${implementationKey}"`}</span>
-          </Grid.Column>
-        </Grid.Row>
-      )}
-    </Grid>
-  </>
-);
-
-GeneralSummary.propTypes = {
-  executable: PropTypes.bool,
-  implementationKey: PropTypes.string,
-};
-
 const DatasetSummary = ({ rows }) =>
   empty(rows) ? null : (
     <>
@@ -86,34 +48,36 @@ const DatasetSummary = ({ rows }) =>
           <FormattedMessage id="ruleImplementations.summary.headers.dataset" />
         </Header.Content>
       </Header>
-      <Table basic="very">
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>
-              <FormattedMessage id={`ruleImplementation.summary.structure`} />
-            </Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          {rows.map((row, i) => (
-            <Table.Row key={i}>
-              {_.has("structure")(row) && (
-                <Table.Cell key={i}>
-                  <Link
-                    to={linkTo.STRUCTURE({
-                      id: _.pathOr("", "structure.id")(row),
-                    })}
-                  >
-                    <span key={i} className="highlighted">{`"${path(
-                      _.propOr({}, "structure")(row)
-                    )}"`}</span>
-                  </Link>
-                </Table.Cell>
-              )}
+      <Segment>
+        <Table basic="very">
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>
+                <FormattedMessage id={`ruleImplementation.summary.structure`} />
+              </Table.HeaderCell>
             </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
+          </Table.Header>
+          <Table.Body>
+            {rows.map((row, i) => (
+              <Table.Row key={i}>
+                {_.has("structure")(row) && (
+                  <Table.Cell key={i}>
+                    <Link
+                      to={linkTo.STRUCTURE({
+                        id: _.pathOr("", "structure.id")(row),
+                      })}
+                    >
+                      <span key={i} className="highlighted">{`"${path(
+                        _.propOr({}, "structure")(row)
+                      )}"`}</span>
+                    </Link>
+                  </Table.Cell>
+                )}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </Segment>
     </>
   );
 
@@ -123,16 +87,13 @@ DatasetSummary.propTypes = {
 
 export const ImplementationSummary = ({ ruleImplementation, activeSteps }) => {
   const steps = _.isEmpty(activeSteps) ? defaults : activeSteps;
-  const { executable, implementationKey, dataset, population, validations } =
+  const { dataset, population, validations } =
     _.pick(steps)(ruleImplementation);
   return (
     <>
       {(_.includes("implementationKey")(steps) ||
         _.includes("executable")(steps)) && (
-        <GeneralSummary
-          executable={executable}
-          implementationKey={implementationKey}
-        />
+        <InformationSummary ruleImplementation={ruleImplementation} />
       )}
       {dataset && _.includes("dataset")(steps) && (
         <DatasetSummary rows={dataset} />

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

@@ -0,0 +1,63 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Button } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { UploadModal } from "@truedat/core/components";
+import { API_RULE_IMPLEMENTATIONS_UPLOAD } from "../api";
+import { uploadImplementations } from "../routines";
+
+const uploadAction = {
+  method: "POST",
+  href: API_RULE_IMPLEMENTATIONS_UPLOAD,
+};
+
+export const ImplementationsUploadButton = ({
+  uploadImplementations,
+  loading,
+}) => {
+  const { formatMessage } = useIntl();
+  return (
+    <UploadModal
+      icon="upload"
+      trigger={
+        <Button
+          secondary
+          floated="right"
+          icon="upload"
+          loading={loading}
+          data-tooltip={formatMessage({
+            id: "ruleImplementations.actions.upload.tooltip",
+          })}
+        />
+      }
+      header={
+        <FormattedMessage id="ruleImplementations.actions.upload.confirmation.header" />
+      }
+      content={
+        <FormattedMessage id="ruleImplementations.actions.upload.confirmation.content" />
+      }
+      param={"implementations"}
+      handleSubmit={(data) =>
+        uploadImplementations({
+          action: "upload",
+          data,
+          ...uploadAction,
+        })
+      }
+    />
+  );
+};
+
+ImplementationsUploadButton.propTypes = {
+  uploadImplementations: PropTypes.func,
+  loading: PropTypes.bool,
+};
+
+const mapStateToProps = ({ uploadImplementationsFile: { loading } }) => ({
+  loading,
+});
+
+export default connect(mapStateToProps, { uploadImplementations })(
+  ImplementationsUploadButton
+);

package/src/components/InformationSummary.js

@@ -0,0 +1,68 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Header, Icon, Segment, List } from "semantic-ui-react";
+
+export default function InformationSummary({ ruleImplementation }) {
+  return (
+    <>
+      <Header as="h3">
+        <Icon name="info" size="small" />
+        <Header.Content>
+          <FormattedMessage id="ruleImplementationForm.step.information" />
+        </Header.Content>
+      </Header>
+      <Segment>
+        <List>
+          <List.Item>
+            <List.Header>
+              <FormattedMessage id="quality.thresholds" />
+            </List.Header>
+            <List.Content>
+              <List.Description>
+                <FormattedMessage
+                  id={`ruleImplementations.props.result_type.${ruleImplementation.result_type}`}
+                />
+              </List.Description>
+            </List.Content>
+          </List.Item>
+          <List.Item>
+            <Icon name="circle" color="yellow" />
+            <List.Content>
+              <List.Header>
+                <FormattedMessage id="quality.threshold" />
+              </List.Header>
+              <List.Description>
+                {ruleImplementation.minimum &&
+                  `${ruleImplementation.minimum} ${
+                    ruleImplementation.result_type !== "errors_number"
+                      ? "%"
+                      : ""
+                  }`}
+              </List.Description>
+            </List.Content>
+          </List.Item>
+          <List.Item>
+            <Icon name="circle" color="green" />
+            <List.Content>
+              <List.Header>
+                <FormattedMessage id="quality.goal" />
+              </List.Header>
+              <List.Description>
+                {ruleImplementation.goal &&
+                  `${ruleImplementation.goal} ${
+                    ruleImplementation.result_type !== "errors_number"
+                      ? "%"
+                      : ""
+                  }`}
+              </List.Description>
+            </List.Content>
+          </List.Item>
+        </List>
+      </Segment>
+    </>
+  );
+}
+InformationSummary.propTypes = {
+  ruleImplementation: PropTypes.object.isRequired,
+};

package/src/components/NewRuleImplementation.js

@@ -220,6 +220,9 @@ export const NewRuleImplementation = ({
           },
           dfName: _.prop("df_name")(ruleImplementationProps),
           dfContent: ruleImplementationProps.df_content,
+          result_type: ruleImplementationProps.result_type,
+          minimum: ruleImplementationProps.minimum,
+          goal: ruleImplementationProps.goal,
         }
       : {
           executable: true,
@@ -237,6 +240,9 @@ export const NewRuleImplementation = ({
           },
           dfName: "",
           dfContent: {},
+          result_type: "percentage",
+          minimum: null,
+          goal: null,
         }
   );
 
@@ -343,6 +349,9 @@ export const NewRuleImplementation = ({
             df_content: dfContent,
             rule_id: rule.id,
             raw_content: { ...raw_content, source },
+            result_type: ruleImplementation.result_type,
+            minimum: ruleImplementation.minimum,
+            goal: ruleImplementation.goal,
           }
         : {
             executable: ruleImplementation.executable,
@@ -355,6 +364,9 @@ export const NewRuleImplementation = ({
             df_name,
             df_content: dfContent,
             rule_id: rule.id,
+            result_type: ruleImplementation.result_type,
+            minimum: ruleImplementation.minimum,
+            goal: ruleImplementation.goal,
           };
 
     clone || !edition

package/src/components/RuleForm.js

@@ -85,12 +85,9 @@ export class RuleForm extends React.Component {
     domain_id: null,
     name: "",
     description: null,
-    minimum: null,
-    goal: null,
     type_params: {},
     df_name: "",
     df_content: {},
-    result_type: "percentage",
   };
 
   componentDidMount() {
@@ -218,86 +215,6 @@ export class RuleForm extends React.Component {
     this.setState({ activeSelection: !activeSelection });
   };
 
-  percentageResultValidationMessages = () => {
-    const rule = this.state;
-    const {
-      intl: { formatMessage },
-    } = this.props;
-    const minimumMessages = [];
-    const goalMessages = [];
-    if (rule.goal > 100)
-      goalMessages.push(formatMessage({ id: "rule.form.validation.max_goal" }));
-
-    if (
-      !_.isNil(rule.minimum) &&
-      !_.isNil(rule.goal) &&
-      rule.minimum > rule.goal
-    ) {
-      minimumMessages.push(
-        formatMessage({ id: "rule.form.validation.minimum_greater" })
-      );
-      goalMessages.push(
-        formatMessage({ id: "rule.form.validation.goal_less" })
-      );
-    }
-    return { minimumMessages, goalMessages };
-  };
-
-  errorsNumberResultValidationMessages = () => {
-    const rule = this.state;
-    const {
-      intl: { formatMessage },
-    } = this.props;
-    const minimumMessages = [];
-    const goalMessages = [];
-
-    if (
-      !_.isNil(rule.minimum) &&
-      !_.isNil(rule.goal) &&
-      rule.minimum < rule.goal
-    ) {
-      minimumMessages.push(
-        formatMessage({
-          id: "rule.form.validation.minimum.greater_eq.goal",
-        })
-      );
-      goalMessages.push(
-        formatMessage({ id: "rule.form.validation.goal.less_eq.minimum" })
-      );
-    }
-    return { minimumMessages, goalMessages };
-  };
-
-  deviationResultValidationMessages = () => {
-    const rule = this.state;
-    const {
-      intl: { formatMessage },
-    } = this.props;
-    const minimumMessages = [];
-    const goalMessages = [];
-
-    if (rule.minimum > 100)
-      minimumMessages.push(
-        formatMessage({ id: "rule.form.validation.max_minimum" })
-      );
-
-    if (
-      !_.isNil(rule.minimum) &&
-      !_.isNil(rule.goal) &&
-      rule.minimum < rule.goal
-    ) {
-      minimumMessages.push(
-        formatMessage({
-          id: "rule.form.validation.minimum.greater_eq.goal",
-        })
-      );
-      goalMessages.push(
-        formatMessage({ id: "rule.form.validation.goal.less_eq.minimum" })
-      );
-    }
-    return { minimumMessages, goalMessages };
-  };
-
   generateValidationMessages = () => {
     const rule = this.state;
     const {
@@ -311,30 +228,9 @@ export class RuleForm extends React.Component {
       : undefined;
     const domain = _.isNil(rule.domain_id) ? [requiredMessage] : undefined;
 
-    const { minimumMessages, goalMessages } = (() => {
-      switch (rule.result_type) {
-        case "percentage":
-          return this.percentageResultValidationMessages();
-        case "errors_number":
-          return this.errorsNumberResultValidationMessages();
-        case "deviation":
-          return this.deviationResultValidationMessages();
-      }
-    })();
-
-    if (_.isNil(rule.minimum)) minimumMessages.push(requiredMessage);
-    if (_.isNil(rule.goal)) goalMessages.push(requiredMessage);
-
-    const minimum_validation = !_.isEmpty(minimumMessages)
-      ? minimumMessages
-      : undefined;
-    const goal_validation = !_.isEmpty(goalMessages) ? goalMessages : undefined;
-
     return {
       domain,
       name: name_validation,
-      minimum: minimum_validation,
-      goal: goal_validation,
     };
   };
 
@@ -454,80 +350,6 @@ export class RuleForm extends React.Component {
               </Accordion>
             </Segment>
           )}
-          <Segment>
-            <FieldLabelWrapping
-              label={formatMessage({ id: "rule.props.result_type" })}
-              messages={_.prop("result_type")(messages)}
-              required
-              tooltip={formatMessage({ id: "rule.form.tooltip.result_type" })}
-            >
-              <Form.Group inline>
-                <Form.Radio
-                  name={"result_type"}
-                  label={formatMessage({
-                    id: "rule.props.result_type.percentage",
-                  })}
-                  value={"percentage"}
-                  checked={rule.result_type == "percentage"}
-                  onChange={this.handleChange}
-                />
-                <Form.Radio
-                  name={"result_type"}
-                  label={formatMessage({
-                    id: "rule.props.result_type.deviation",
-                  })}
-                  value={"deviation"}
-                  checked={rule.result_type == "deviation"}
-                  onChange={this.handleChange}
-                />
-                <Form.Radio
-                  name={"result_type"}
-                  label={formatMessage({
-                    id: "rule.props.result_type.errors_number",
-                  })}
-                  value={"errors_number"}
-                  checked={rule.result_type == "errors_number"}
-                  onChange={this.handleChange}
-                />
-              </Form.Group>
-            </FieldLabelWrapping>
-            <FieldLabelWrapping
-              label={formatMessage({ id: "rule.props.minimum" })}
-              messages={_.prop("minimum")(messages)}
-              required
-              tooltip={formatMessage({
-                id: `rule.form.tooltip.${rule.result_type}.minimum`,
-              })}
-            >
-              <Form.Input
-                name="minimum"
-                onChange={this.handleChangeInteger}
-                value={_.isNil(rule.minimum) ? "" : rule.minimum}
-                placeholder={formatMessage({
-                  id: "rule.props.minimum.placeholder",
-                })}
-                autoComplete="off"
-              />
-            </FieldLabelWrapping>
-            <FieldLabelWrapping
-              label={formatMessage({ id: "rule.props.goal" })}
-              messages={_.prop("goal")(messages)}
-              required
-              tooltip={formatMessage({
-                id: `rule.form.tooltip.${rule.result_type}.goal`,
-              })}
-            >
-              <Form.Input
-                name="goal"
-                onChange={this.handleChangeInteger}
-                value={_.isNil(rule.goal) ? "" : rule.goal}
-                placeholder={formatMessage({
-                  id: "rule.props.goal.placeholder",
-                })}
-                autoComplete="off"
-              />
-            </FieldLabelWrapping>
-          </Segment>
           {!_.isNil(rule.df_content) && templatesLoaded && (
             <DynamicRuleForm
               name="dynamicForm"

package/src/components/RuleImplementation.js

@@ -4,12 +4,13 @@ import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
-import { Header, Label, Menu, Grid } from "semantic-ui-react";
+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 RuleImplementationTabs from "./RuleImplementationTabs";
+import ImplementationResultBar from "./ImplementationResultBar";
 
 const getAvailableActions = (props, formatMessage) => {
   const contentActions = [
@@ -177,11 +178,13 @@ export const RuleImplementation = ({
     <>
       <Grid>
         <Grid.Column width={8}>
-          <Header
-            as="h2"
-            content={ruleImplementation.implementation_key}
-            icon={{ name: "clipboard check", circular: true }}
-          />
+          <Header as="h2">
+            <Icon circular name="clipboard check" />
+            <Header.Content>
+              {ruleImplementation.implementation_key}
+              <ImplementationResultBar implementation={ruleImplementation} />
+            </Header.Content>
+          </Header>
         </Grid.Column>
         <Grid.Column width={8} textAlign="right">
           <>
@@ -215,6 +218,7 @@ RuleImplementation.propTypes = {
   rule: PropTypes.object,
   ruleImplementation: PropTypes.object,
   userRulePermissions: PropTypes.object,
+  children: PropTypes.node,
 };
 
 const mapStateToProps = ({