@truedat/dq 4.58.3 → 4.58.5

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

@@ -0,0 +1,314 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NewBasicRuleImplementation /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui divided grid full-height"
+    style=""
+  >
+    <div
+      class="eleven wide column"
+    >
+      <div
+        class="row"
+      >
+        <h2
+          class="ui header"
+        >
+          <div
+            class="content"
+          >
+            New Implementation
+          </div>
+        </h2>
+        <div
+          class="ui hidden divider"
+        />
+      </div>
+      <div
+        class="stretched row"
+      >
+        <form
+          class="ui form rule"
+        >
+          <div
+            class="field"
+          >
+            <label>
+              Implementation Key
+              <i
+                aria-hidden="true"
+                class="question circle outline icon rule-form-popup"
+              />
+            </label>
+            <div
+              class="required field"
+            >
+              <div
+                class="ui input"
+              >
+                <input
+                  autocomplete="off"
+                  name="implementation_key"
+                  placeholder="Rule Implementation Key"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="field"
+          />
+          <div
+            class="ui segment"
+          >
+            <div
+              class="field"
+            >
+              <label
+                class="rule-form-label"
+              >
+                Result Type
+                <span>
+                  *
+                </span>
+                <i
+                  aria-hidden="true"
+                  class="question circle outline icon rule-form-popup"
+                />
+              </label>
+              <div
+                class="inline fields"
+              >
+                <div
+                  class="field"
+                >
+                  <div
+                    class="ui checked radio checkbox"
+                  >
+                    <input
+                      checked=""
+                      class="hidden"
+                      name="result_type"
+                      readonly=""
+                      tabindex="0"
+                      type="radio"
+                      value="percentage"
+                    />
+                    <label>
+                      Percentage
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="field"
+                >
+                  <div
+                    class="ui radio checkbox"
+                  >
+                    <input
+                      class="hidden"
+                      name="result_type"
+                      readonly=""
+                      tabindex="0"
+                      type="radio"
+                      value="deviation"
+                    />
+                    <label>
+                      Deviation
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="field"
+                >
+                  <div
+                    class="ui radio checkbox"
+                  >
+                    <input
+                      class="hidden"
+                      name="result_type"
+                      readonly=""
+                      tabindex="0"
+                      type="radio"
+                      value="errors_number"
+                    />
+                    <label>
+                      Error count
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="field"
+            >
+              <label
+                class="rule-form-label"
+              >
+                Threshold
+                <span>
+                  *
+                </span>
+                <i
+                  aria-hidden="true"
+                  class="question circle outline icon rule-form-popup"
+                />
+                <div
+                  class="ui left pointing label"
+                >
+                  Required field is empty
+                </div>
+              </label>
+              <div
+                class="field"
+              >
+                <div
+                  class="ui input"
+                >
+                  <input
+                    autocomplete="off"
+                    name="minimum"
+                    placeholder="Threshold value"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="field"
+            >
+              <label
+                class="rule-form-label"
+              >
+                Goal
+                <span>
+                  *
+                </span>
+                <i
+                  aria-hidden="true"
+                  class="question circle outline icon rule-form-popup"
+                />
+                <div
+                  class="ui left pointing label"
+                >
+                  Required field is empty
+                </div>
+              </label>
+              <div
+                class="field"
+              >
+                <div
+                  class="ui input"
+                >
+                  <input
+                    autocomplete="off"
+                    name="goal"
+                    placeholder="Goal value"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="required field"
+          >
+            <label>
+              Template
+              <div
+                class="ui left pointing label"
+              >
+                Empty required field
+              </div>
+            </label>
+            <div
+              class="field"
+            >
+              <div
+                aria-busy="false"
+                aria-expanded="false"
+                class="ui search selection dropdown"
+                name="template"
+                role="combobox"
+              >
+                <input
+                  aria-autocomplete="list"
+                  autocomplete="off"
+                  class="search"
+                  tabindex="0"
+                  type="text"
+                  value=""
+                />
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  class="divider default text"
+                  role="alert"
+                >
+                  Select a template...
+                </div>
+                <i
+                  aria-hidden="true"
+                  class="dropdown icon"
+                />
+                <div
+                  class="menu transition"
+                  role="listbox"
+                >
+                  <div
+                    aria-checked="false"
+                    aria-selected="true"
+                    class="selected item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
+                    <span
+                      class="text"
+                    >
+                      template1
+                    </span>
+                  </div>
+                  <div
+                    aria-checked="false"
+                    aria-selected="false"
+                    class="item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
+                    <span
+                      class="text"
+                    >
+                      template2
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <button
+            class="ui primary disabled right floated button"
+            disabled=""
+            tabindex="-1"
+            type="submit"
+          >
+            Save
+          </button>
+          <button
+            class="ui secondary right floated button"
+          >
+            Cancel
+          </button>
+        </form>
+      </div>
+    </div>
+    <div
+      class="five wide column"
+    />
+  </div>
+</div>
+`;

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

@@ -65,6 +65,7 @@ exports[`<RuleImplementationsActions /> matches the latest snapshot 1`] = `
     to="/implementations/new"
   />
   <RuleImplementationsOptions
+    canCreateBasicImplementations={false}
     canUploadResults={true}
     loading={false}
   />

package/src/components/ruleImplementationForm/InformationForm.js

@@ -22,13 +22,14 @@ const DomainActionsLoader = ({ id, actions, onLoad }) => {
 };
 
 export const InformationForm = ({
-  setImplementationKey,
+  conceptDomainId,
+  domainIds,
+  isModification,
   onChange,
+  onDomainsLoad,
   ruleImplementation,
+  setImplementationKey,
   setIsValid,
-  onDomainsLoad,
-  conceptDomainId,
-  domainIds,
 }) => {
   const { formatMessage } = useIntl();
 
@@ -106,25 +107,27 @@ export const InformationForm = ({
       <LimitsForm onChange={onChange} ruleImplementation={ruleImplementation} />
       <SelectableDynamicForm
         scope="ri"
-        domainIds={_.isNil(domainId) ? null : [domainId]}
-        required
         content={ruleImplementation?.dfContent}
+        domainIds={_.isNil(domainId) ? null : [domainId]}
+        isModification={isModification}
         name={ruleImplementation?.dfName}
         onChange={handleContentChange}
         onNameChange={(dfName) => onChange("dfName", dfName)}
+        required
       />
     </>
   );
 };
 
 InformationForm.propTypes = {
+  conceptDomainId: PropTypes.array,
+  domainIds: PropTypes.array,
+  isModification: PropTypes.bool,
   onChange: PropTypes.func,
+  onDomainsLoad: PropTypes.func,
   ruleImplementation: PropTypes.object,
   setImplementationKey: PropTypes.func,
   setIsValid: PropTypes.func,
-  onDomainsLoad: PropTypes.func,
-  conceptDomainId: PropTypes.array,
-  domainIds: PropTypes.array,
 };
 
 export default InformationForm;

package/src/components/ruleImplementationForm/RuleImplementationBasicForm.js

@@ -0,0 +1,206 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useHistory } from "react-router-dom";
+import { useIntl } from "react-intl";
+import { useQuery } from "@apollo/client";
+import { Button, Form, Icon, Popup } from "semantic-ui-react";
+import { DomainSelector } from "@truedat/core/components";
+import { DOMAIN_QUERY } from "@truedat/core/api/queries";
+import LimitsForm from "./LimitsForm";
+import { areLimitsValid } from "./limitsValidation";
+
+const SelectableDynamicForm = React.lazy(() =>
+  import("@truedat/df/components/SelectableDynamicForm")
+);
+
+const DomainActionsLoader = ({ id, actions, onLoad }) => {
+  useQuery(DOMAIN_QUERY, {
+    fetchPolicy: "cache-and-network",
+    variables: { id, actions },
+    onCompleted: onLoad,
+  });
+  return null;
+};
+
+DomainActionsLoader.propTypes = {
+  id: PropTypes.number,
+  actions: PropTypes.array,
+  onLoad: PropTypes.func,
+};
+
+const Help = ({ message }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Popup
+      trigger={
+        <Icon className="rule-form-popup" name="question circle outline" />
+      }
+      content={formatMessage({ id: message })}
+      on="click"
+      hideOnScroll
+    />
+  );
+};
+
+Help.propTypes = {
+  message: PropTypes.string,
+};
+
+export const RuleImplementationBasicForm = ({
+  implementationKey,
+  isModification,
+  isSubmitting,
+  onChange,
+  onSubmit,
+  rule,
+  ruleImplementation,
+  setImplementationKey,
+}) => {
+  const { formatMessage } = useIntl();
+  const history = useHistory();
+
+  const domainActions = ["publishImplementation"];
+
+  const [isContentValid, setIsContentValid] = useState();
+
+  const [domains, setDomains] = useState();
+  const [canPublish, setCanPublish] = useState(false);
+
+  useEffect(() => {
+    const currentDomainActions = _.flow(
+      _.find((domain) => domain.id === String(ruleImplementation.domain_id)),
+      _.pathOr([], "actions")
+    )(domains);
+
+    _.flow(
+      _.any((action) => action == "publishImplementation"),
+      setCanPublish
+    )(currentDomainActions);
+
+    return () => {
+      setCanPublish(false);
+    };
+  }, [domains, ruleImplementation.domain_id]);
+
+  const handleContentChange = ({ content, valid }) => {
+    onChange("dfContent", content);
+    setIsContentValid(_.isEmpty(valid));
+  };
+
+  const doSubmit = (params) => {
+    if (isValidForm()) {
+      onSubmit(params);
+    }
+  };
+
+  const isValidForm = () =>
+    ruleImplementation?.dfName &&
+    !_.isEmpty(ruleImplementation?.dfName) &&
+    isContentValid &&
+    (!_.isEmpty(rule) || _.prop("domain_id")(ruleImplementation)) &&
+    areLimitsValid(ruleImplementation);
+
+  const doCancel = () => history.goBack();
+
+  const domainId = ruleImplementation?.domain_id || rule?.domain_id;
+
+  return (
+    <Form className="rule">
+      <Form.Field>
+        <label>
+          {formatMessage({ id: "ruleImplementation.props.name" })}
+          <Help message="datasetForm.implementation_key.tooltip" />
+        </label>
+        <Form.Input
+          autoComplete="off"
+          name="implementation_key"
+          onChange={(_e, { value }) => setImplementationKey(value)}
+          placeholder={formatMessage({
+            id: "ruleImplementation.props.name.placeholder",
+          })}
+          required
+          value={implementationKey}
+        />
+      </Form.Field>
+      {_.isEmpty(rule) && !ruleImplementation?.rule_id ? (
+        <Form.Field>
+          <DomainSelector
+            action={
+              ruleImplementation.rule_id
+                ? "manageBasicImplementations"
+                : "manageBasicRulelessImplementations"
+            }
+            value={domainId}
+            domainActions={domainActions}
+            onLoad={(data) => setDomains(data.domains)}
+            onChange={(_e, { value }) => onChange("domain_id", value)}
+            labels
+          />
+        </Form.Field>
+      ) : (
+        <DomainActionsLoader
+          id={domainId}
+          actions={domainActions}
+          onLoad={(data) => setDomains([data.domain])}
+        />
+      )}
+      <LimitsForm onChange={onChange} ruleImplementation={ruleImplementation} />
+      <SelectableDynamicForm
+        scope="ri"
+        content={ruleImplementation?.dfContent}
+        domainIds={_.isNil(domainId) ? null : [domainId]}
+        isModification={isModification}
+        name={ruleImplementation?.dfName}
+        onChange={handleContentChange}
+        onNameChange={(dfName) => onChange("dfName", dfName)}
+        required
+      />
+      {canPublish ? (
+        <Button
+          floated="right"
+          disabled={!isValidForm()}
+          type="submit"
+          primary
+          loading={isSubmitting}
+          onClick={() => doSubmit({ status: "published" })}
+          content={formatMessage({ id: "actions.publish" })}
+        />
+      ) : null}
+      <Button
+        floated="right"
+        disabled={!isValidForm()}
+        type="submit"
+        primary
+        loading={isSubmitting}
+        onClick={() => doSubmit({ status: "draft" })}
+        content={formatMessage({ id: "actions.save" })}
+      />
+      <Button
+        content={formatMessage({ id: "actions.cancel" })}
+        floated="right"
+        onClick={() => doCancel()}
+        secondary
+      />
+    </Form>
+  );
+};
+
+RuleImplementationBasicForm.propTypes = {
+  implementationKey: PropTypes.string,
+  isModification: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
+  onChange: PropTypes.func,
+  onSubmit: PropTypes.func.isRequired,
+  rule: PropTypes.object,
+  ruleImplementation: PropTypes.object,
+  setImplementationKey: PropTypes.func,
+};
+
+const mapStateToProps = ({ rule, ruleImplementationCreating }) => ({
+  isSubmitting: ruleImplementationCreating,
+  rule,
+});
+
+export default connect(mapStateToProps)(RuleImplementationBasicForm);

package/src/components/ruleImplementationForm/RuleImplementationForm.js

@@ -50,6 +50,7 @@ export const RuleImplementationForm = ({
   addValidation,
   conceptDomainId,
   domainIds,
+  isModification,
   isSubmitting,
   onChange,
   onSubmit,
@@ -342,16 +343,17 @@ export const RuleImplementationForm = ({
             {activeStep == "information" && (
               <InformationForm
                 {...{
-                  onChange,
-                  ruleImplementation,
-                  setImplementationKey,
                   conceptDomainId,
                   domainIds,
-                  setIsValid: setContentIsValid,
+                  isModification,
+                  onChange,
                   onDomainsLoad: (domains) => {
                     setDomains(domains);
                     setIsLoadingDomains(false);
                   },
+                  ruleImplementation,
+                  setImplementationKey,
+                  setIsValid: setContentIsValid,
                 }}
               />
             )}
@@ -507,12 +509,13 @@ export const RuleImplementationForm = ({
 
 RuleImplementationForm.propTypes = {
   addPopulation: PropTypes.func,
-  addValidation: PropTypes.func,
   addSegment: PropTypes.func,
+  addValidation: PropTypes.func,
   authManageSegments: PropTypes.bool,
   conceptDomainId: PropTypes.number,
   domainIds: PropTypes.array,
   isAdmin: PropTypes.bool,
+  isModification: PropTypes.bool,
   isSubmitting: PropTypes.bool,
   onChange: PropTypes.func,
   onSubmit: PropTypes.func.isRequired,

package/src/components/ruleImplementationForm/RuleImplementationRawForm.js

@@ -54,6 +54,7 @@ export const RuleImplementationRawForm = ({
   conceptDomainId,
   domainIds,
   implementationKey,
+  isModification,
   isSubmitting,
   onChange,
   onSubmit,
@@ -235,12 +236,13 @@ export const RuleImplementationRawForm = ({
       <LimitsForm onChange={onChange} ruleImplementation={ruleImplementation} />
       <SelectableDynamicForm
         scope="ri"
-        domainIds={_.isNil(domainId) ? null : [domainId]}
-        required
         content={ruleImplementation?.dfContent}
+        domainIds={_.isNil(domainId) ? null : [domainId]}
+        isModification={isModification}
         name={ruleImplementation?.dfName}
         onChange={handleContentChange}
         onNameChange={(dfName) => onChange("dfName", dfName)}
+        required
       />
       <Form.Dropdown
         label={
@@ -386,6 +388,7 @@ RuleImplementationRawForm.propTypes = {
   conceptDomainId: PropTypes.number,
   domainIds: PropTypes.array,
   implementationKey: PropTypes.string,
+  isModification: PropTypes.bool,
   isSubmitting: PropTypes.bool,
   onChange: PropTypes.func,
   onSubmit: PropTypes.func.isRequired,