@truedat/dq 4.49.5 → 4.49.6

package/src/components/ruleImplementationForm/RuleImplementationRawForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useHistory } from "react-router-dom";
@@ -8,6 +8,8 @@ import { gql, useQuery } from "@apollo/client";
 import { Loading } from "@truedat/core/components";
 import { Button, Form, Icon, Popup } from "semantic-ui-react";
 import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
+import { DomainSelector } from "@truedat/core/components";
+import { DOMAIN_QUERY } from "@truedat/core/api/queries";
 import LimitsForm from "./LimitsForm";
 import { areLimitsValid } from "./limitsValidation";
 
@@ -15,9 +17,14 @@ const SelectableDynamicForm = React.lazy(() =>
   import("@truedat/df/components/SelectableDynamicForm")
 );
 
-const DomainDropdownSelector = React.lazy(() =>
-  import("@truedat/bg/taxonomy/components/DomainDropdownSelector")
-);
+const DomainActionsLoader = ({ id, actions, onLoad }) => {
+  useQuery(DOMAIN_QUERY, {
+    fetchPolicy: "cache-and-network",
+    variables: { id, actions },
+    onCompleted: onLoad,
+  });
+  return null;
+};
 
 const Help = ({ message }) => {
   const { formatMessage } = useIntl();
@@ -38,7 +45,6 @@ Help.propTypes = {
 };
 
 export const RuleImplementationRawForm = ({
-  actions,
   implementationKey,
   isSubmitting,
   onChange,
@@ -51,10 +57,30 @@ export const RuleImplementationRawForm = ({
   sources,
   sourcesLoading,
 }) => {
+  const domainActions = ["publishImplementation"];
   const { formatMessage } = useIntl();
   const history = useHistory();
   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));
@@ -68,10 +94,9 @@ export const RuleImplementationRawForm = ({
   const hasNoErrors = (propName) =>
     _.path([propName, "hasErrors"])(errors) == false;
 
-  const doSubmit = () => {
+  const doSubmit = (params) => {
     if (isValidForm()) {
-      const canPublish = !!actions?.publish;
-      onSubmit(canPublish ? { status: "published" } : {});
+      onSubmit(params);
     }
   };
 
@@ -113,7 +138,7 @@ export const RuleImplementationRawForm = ({
     ruleImplementation?.dfName &&
     !_.isEmpty(ruleImplementation?.dfName) &&
     isContentValid &&
-    (!_.isEmpty(rule) || _.isNumber(_.prop("domain_id")(ruleImplementation))) &&
+    (!_.isEmpty(rule) || _.prop("domain_id")(ruleImplementation)) &&
     areLimitsValid(ruleImplementation);
 
   const isValidForm = () =>
@@ -147,7 +172,6 @@ export const RuleImplementationRawForm = ({
 
   const doCancel = () => history.goBack();
   const errors = getErrors();
-
   const domainId = ruleImplementation?.domain_id || rule?.domain_id;
   return (
     <Form className="rule">
@@ -175,13 +199,26 @@ export const RuleImplementationRawForm = ({
           disabled={ruleImplementation?.status === "published"}
         />
       </Form.Field>
-      {_.isEmpty(rule) && !ruleImplementation?.rule_id && (
+      {_.isEmpty(rule) && !ruleImplementation?.rule_id ? (
         <Form.Field>
-          <DomainDropdownSelector
-            value={domainId}
+          <DomainSelector
+            action={
+              ruleImplementation.rule_id
+                ? "manageRawImplementations"
+                : "manageRawRulelessImplementations"
+            }
+            value={ruleImplementation.domain_id}
+            domainActions={domainActions}
+            onLoad={(data) => setDomains(data.domains)}
             onChange={(_e, { value }) => onChange("domain_id", value)}
           />
         </Form.Field>
+      ) : (
+        <DomainActionsLoader
+          id={domainId}
+          actions={domainActions}
+          onLoad={(data) => setDomains([data.domain])}
+        />
       )}
       <LimitsForm onChange={onChange} ruleImplementation={ruleImplementation} />
       <SelectableDynamicForm
@@ -303,13 +340,24 @@ export const RuleImplementationRawForm = ({
         size="small"
         value={_.prop("validations")(rawContent) || ""}
       />
-      <Form.Button
+      {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()}
+        onClick={() => doSubmit({ status: "draft" })}
         content={formatMessage({ id: "actions.save" })}
       />
       <Button
@@ -323,7 +371,6 @@ export const RuleImplementationRawForm = ({
 };
 
 RuleImplementationRawForm.propTypes = {
-  actions: PropTypes.object,
   implementationKey: PropTypes.string,
   isSubmitting: PropTypes.bool,
   onChange: PropTypes.func,
@@ -363,12 +410,7 @@ export const RuleImplementationRawFormLoader = (props) => {
   );
 };
 
-const mapStateToProps = ({
-  implementationActions,
-  rule,
-  ruleImplementationCreating,
-}) => ({
-  actions: implementationActions,
+const mapStateToProps = ({ rule, ruleImplementationCreating }) => ({
   isSubmitting: ruleImplementationCreating,
   rule,
 });

package/src/components/ruleImplementationForm/__tests__/InformationForm.spec.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
+import InformationForm from "../InformationForm";
+
+const domains = [
+  {
+    id: "123",
+    name: "foo",
+    parentId: "",
+    actions: ["publishImplementation", "manageSegments"],
+  },
+];
+const requestVariables = {
+  action: "manageRulelessImplementations",
+  domainActions: ["publishImplementation", "manageSegments"],
+};
+const domainsMock = {
+  request: { query: DOMAINS_QUERY, variables: requestVariables },
+  result: { data: { domains: domains } },
+};
+const renderOpts = {
+  mocks: [domainsMock],
+  state: {
+    rule: {},
+    ruleImplementationCreating: true,
+  },
+  fallback: "lazy",
+};
+
+describe("<RuleImplementationForm />", () => {
+  const props = {
+    setImplementationKey: jest.fn(),
+    onChange: jest.fn(),
+    setIsValid: jest.fn(),
+    onDomainsLoad: jest.fn(),
+    ruleImplementation: {
+      implementationKey: "foo",
+      executable: true,
+      result_type: "percentage",
+      goal: 20,
+      minimum: 10,
+    },
+  };
+
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <InformationForm {...props} />,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/ruleImplementationForm/__tests__/RuleImplementationForm.spec.js

@@ -2,13 +2,30 @@ import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import { multipleTemplatesMock } from "@truedat/test/mocks";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
 import RuleImplementationForm from "../RuleImplementationForm";
 
+const domains = [
+  {
+    id: "123",
+    name: "foo",
+    parentId: "",
+    actions: ["publishImplementation", "manageSegments"],
+  },
+];
+const requestVariables = {
+  action: "manageRulelessImplementations",
+  domainActions: ["publishImplementation", "manageSegments"],
+};
+
+const domainsMock = {
+  request: { query: DOMAINS_QUERY, variables: requestVariables },
+  result: { data: { domains: domains } },
+};
 const renderOpts = {
-  mocks: [multipleTemplatesMock({ scope: "ri", domainIds: null })],
+  mocks: [multipleTemplatesMock({ scope: "ri", domainIds: null }), domainsMock],
   state: {
     rule: {},
-    implementationActions: { manage_segments: {} },
     ruleImplementationCreating: true,
   },
   fallback: "lazy",

package/src/components/ruleImplementationForm/__tests__/RuleImplementationRawForm.spec.js

@@ -3,17 +3,32 @@ 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 { RuleImplementationRawForm } from "../RuleImplementationRawForm";
 
 jest.setTimeout(30000);
 
+const domains = [{ id: 1, name: "domain1", actions: [] }];
+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] })],
+  mocks: [
+    multipleTemplatesMock({ scope: "ri", domainIds: [1] }),
+    domainMock,
+    domainsMock,
+  ],
   state: {
     rule: { domain_id: 1 },
     ruleImplementationCreating: false,
-    domains: [{ id: 1, name: "domain1" }],
   },
   fallback: "lazy",
 };

package/src/components/ruleImplementationForm/__tests__/__snapshots__/InformationForm.spec.js.snap

@@ -0,0 +1,260 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RuleImplementationForm /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="field"
+    style=""
+  >
+    <div
+      class="ui checked toggle checkbox"
+    >
+      <input
+        checked=""
+        class="hidden"
+        name="executable"
+        readonly=""
+        tabindex="0"
+        type="radio"
+        value=""
+      />
+      <label>
+        Executable
+      </label>
+    </div>
+  </div>
+  <div
+    class="field"
+    style=""
+  >
+    <label>
+      Implementation Key
+      <i
+        aria-hidden="true"
+        class="question circle outline icon rule-form-popup"
+      />
+    </label>
+    <div
+      class="field"
+    >
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          name="implementation_key"
+          placeholder="Rule Implementation Key"
+          type="text"
+          value="foo"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="required field"
+    style=""
+  >
+    <label>
+      Domain
+    </label>
+    <div
+      class="field"
+    >
+      <div
+        aria-expanded="false"
+        aria-multiselectable="false"
+        class="ui floating dropdown"
+        role="listbox"
+        tabindex="0"
+      >
+        <label>
+          Select a domain...
+        </label>
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          class="menu transition"
+        >
+          <div
+            class="ui left icon input search"
+          >
+            <input
+              type="text"
+            />
+            <i
+              aria-hidden="true"
+              class="search icon"
+            />
+          </div>
+          <div
+            class="scrolling menu transition"
+          >
+            <div
+              aria-selected="false"
+              class="item"
+              role="option"
+            >
+              <div
+                style="margin-left: 0px;"
+              >
+                <i
+                  aria-hidden="true"
+                  class="icon"
+                />
+                foo
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ui segment"
+    style=""
+  >
+    <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"
+        />
+      </label>
+      <div
+        class="field"
+      >
+        <div
+          class="ui input"
+        >
+          <input
+            autocomplete="off"
+            name="minimum"
+            placeholder="Threshold value"
+            type="text"
+            value="10"
+          />
+        </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"
+        />
+      </label>
+      <div
+        class="field"
+      >
+        <div
+          class="ui input"
+        >
+          <input
+            autocomplete="off"
+            name="goal"
+            placeholder="Goal value"
+            type="text"
+            value="20"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;