@truedat/dq 4.58.3 → 4.58.4

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

@@ -0,0 +1,203 @@
+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,
+  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"
+        domainIds={_.isNil(domainId) ? null : [domainId]}
+        required
+        content={ruleImplementation?.dfContent}
+        name={ruleImplementation?.dfName}
+        onChange={handleContentChange}
+        onNameChange={(dfName) => onChange("dfName", dfName)}
+      />
+      {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,
+  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/__tests__/RuleImplementationBasicForm.spec.js

@@ -0,0 +1,136 @@
+import _ from "lodash/fp";
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { DOMAIN_QUERY, DOMAINS_QUERY } from "@truedat/core/api/queries";
+import { multipleTemplatesMock } from "@truedat/test/mocks";
+import { RuleImplementationBasicForm } from "../RuleImplementationBasicForm";
+
+jest.setTimeout(30000);
+
+const domains = [
+  { id: 1, name: "domain1", actions: ["publishImplementation"] },
+];
+const domainsMock = {
+  request: { query: DOMAINS_QUERY },
+  result: { data: { domains: domains } },
+};
+
+const domainMock = {
+  request: { query: DOMAIN_QUERY },
+  result: { data: { domain: domains } },
+};
+
+const renderOpts = {
+  mocks: [
+    multipleTemplatesMock({ scope: "ri", domainIds: [1] }),
+    domainMock,
+    domainsMock,
+  ],
+  state: {
+    rule: { domain_id: 1 },
+    ruleImplementationCreating: false,
+  },
+  fallback: "lazy",
+};
+
+const props = {
+  onChange: jest.fn(),
+  onSubmit: jest.fn(),
+  implementationKey: "",
+  isSubmitting: false,
+  ruleImplementation: {
+    id: 1,
+    goal: "10",
+    minimum: "1",
+    result_type: "percentage",
+  },
+};
+
+describe("<RuleImplementationBasicForm />", () => {
+  it("matches the latest snapshot", async () => {
+    const updatedProps = _.flow(_.set("ruleImplementation.domain_id", 1))(
+      props
+    );
+    const { container, queryByText } = render(
+      <RuleImplementationBasicForm {...updatedProps} />,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument(), {
+      timeout: 10000,
+    });
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("Implementation_key field is editable with status published", () => {
+    const updatedProps = _.flow(
+      _.set("ruleImplementation.domain_id", 1),
+      _.set("ruleImplementation.status", "published"),
+      _.set("ruleImplementation.implementation_key", "implementation_test")
+    )(props);
+    const { queryByPlaceholderText } = render(
+      <RuleImplementationBasicForm {...updatedProps} />,
+      renderOpts
+    );
+    expect(
+      queryByPlaceholderText("Rule Implementation Key")
+    ).not.toBeDisabled();
+  });
+
+  it("submit button enabled if there is valid content in form without rule", async () => {
+    const updatedProps = _.flow(
+      _.set("ruleImplementation.domain_id", 1),
+      _.set("ruleImplementation.dfName", "template1"),
+      _.set("ruleImplementation.dfContent", { field1: "foo" })
+    )(props);
+    const customProps = {
+      ...updatedProps,
+    };
+
+    const { getByRole } = render(
+      <RuleImplementationBasicForm {...customProps} />,
+      renderOpts
+    );
+    await waitFor(() => {
+      expect(getByRole("button", { name: "Save" })).toBeEnabled();
+    });
+  });
+
+  it("submit button enabled if there is valid content in form with rule", async () => {
+    const updatedProps = _.flow(
+      _.set("ruleImplementation.domain_id", 1),
+      _.set("ruleImplementation.dfName", "template1"),
+      _.set("ruleImplementation.dfContent", { field1: "foo" })
+    )(props);
+    const customProps = {
+      ...updatedProps,
+      rule: { id: 5, name: "regla" },
+    };
+
+    const { findByRole } = render(
+      <RuleImplementationBasicForm {...customProps} />,
+      renderOpts
+    );
+    expect(await findByRole("button", { name: /save/i })).toBeEnabled();
+  });
+
+  it("submit button disabled if there is invalid content in form", async () => {
+    const updatedProps = _.flow(
+      _.set("ruleImplementation.domain_id", 1),
+      _.set("ruleImplementation.dfName", "template1"),
+      _.set("ruleImplementation.dfContent", {})
+    )(props);
+    const customProps = {
+      ...updatedProps,
+    };
+    const { queryByRole } = render(
+      <RuleImplementationBasicForm {...customProps} />,
+      renderOpts
+    );
+    expect(queryByRole("button", { name: /save/i })).toBeDisabled();
+  });
+});