@truedat/dq 4.41.3 → 4.42.1

package/src/components/ruleImplementationForm/RuleImplementationRawForm.js

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Button, Form, Icon, Popup } from "semantic-ui-react";
+import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
 import { validateContent as validDfContent } from "@truedat/df/utils";
 import { selectTemplate } from "@truedat/df/routines";
 import LimitsForm from "./LimitsForm";
@@ -17,9 +18,7 @@ const Help = ({ message }) => {
       trigger={
         <Icon className="rule-form-popup" name="question circle outline" />
       }
-      content={formatMessage({
-        id: message,
-      })}
+      content={formatMessage({ id: message })}
       on="click"
       hideOnScroll
     />
@@ -38,10 +37,6 @@ const DynamicForm = React.lazy(() =>
   import("@truedat/df/components/DynamicForm")
 );
 
-const SourcesLoader = React.lazy(() =>
-  import("@truedat/cx/sources/components/SourcesLoader")
-);
-
 const ImplementationDynamicForm = ({
   ruleImplementation,
   onChange,
@@ -89,8 +84,9 @@ export const RuleImplementationRawForm = ({
   rawContent,
   setImplementationKey,
   setImplementationRawContent,
-  sources,
   selectTemplate,
+  sources,
+  sourcesLoading,
   template = {},
   templates,
   onChange,
@@ -115,33 +111,29 @@ export const RuleImplementationRawForm = ({
   const onChangeImplementation = (prop, value) =>
     setImplementationRawContent({ ...rawContent, [prop]: value });
 
-  const onChangeSource = (id) =>
+  const onChangeSource = (value) => {
     setImplementationRawContent({
       ...rawContent,
-      source_id: id,
+      source_id: value,
       database: "",
     });
+  };
+
+  const selectedSourceId = rawContent?.source_id?.toString();
 
-  const sourcesOptions = _.flow(
-    _.filter((source) =>
-      _.includes("quality")(_.getOr([], "config.job_types")(source))
-    ),
-    _.map(({ id, external_id }) => ({
+  const sourceOptions = _.flow(
+    _.sortBy(accentInsensitivePathOrder("externalId")),
+    _.map(({ id, externalId }) => ({
       key: id,
-      text: external_id,
       value: id,
+      text: externalId,
     }))
   )(sources);
-  const selectedSourceId = _.prop("source_id")(rawContent);
-
-  const databasesOptions = _.flow(
+  const databaseOptions = _.flow(
     _.find({ id: selectedSourceId }),
-    _.getOr([], "config.databases"),
-    _.map((database) => ({
-      key: database,
-      text: database,
-      value: database,
-    }))
+    _.path(["config", "databases"]),
+    _.sortedUniq,
+    _.map((value) => ({ key: value, text: value, value }))
   )(sources);
 
   const getBannedWordsAndChars = (text) => {
@@ -159,7 +151,7 @@ export const RuleImplementationRawForm = ({
     return (
       validInformation() &&
       isNotEmptyProp("source_id") &&
-      (_.isEmpty(databasesOptions) || isNotEmptyProp("database")) &&
+      (_.isEmpty(databaseOptions) || isNotEmptyProp("database")) &&
       _.every(isNotEmptyProp)(["dataset", "validations"]) &&
       _.every(hasNoErrors)(["dataset", "population", "validations"])
     );
@@ -193,183 +185,178 @@ export const RuleImplementationRawForm = ({
   const errors = getErrors();
 
   return (
-    <>
-      <SourcesLoader />
-      <Form className="rule">
-        <Form.Radio
-          checked={ruleImplementation.executable}
-          name="executable"
-          label={formatMessage({ id: "ruleImplementation.props.executable" })}
-          onChange={(_e, { checked }) => onChange("executable", checked)}
-          toggle
+    <Form className="rule">
+      <Form.Radio
+        checked={ruleImplementation.executable}
+        name="executable"
+        label={formatMessage({ id: "ruleImplementation.props.executable" })}
+        onChange={(_e, { checked }) => onChange("executable", checked)}
+        toggle
+      />
+      <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>
-          <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>
-        <LimitsForm
-          onChange={onChange}
+      </Form.Field>
+      <LimitsForm onChange={onChange} ruleImplementation={ruleImplementation} />
+      {!_.isEmpty(templates) && (
+        <ImplementationDynamicForm
+          selectTemplate={selectTemplate}
+          template={template}
+          templates={templates}
           ruleImplementation={ruleImplementation}
+          onChange={onChange}
         />
-        {!_.isEmpty(templates) && (
-          <ImplementationDynamicForm
-            selectTemplate={selectTemplate}
-            template={template}
-            templates={templates}
-            ruleImplementation={ruleImplementation}
-            onChange={onChange}
-          />
-        )}
+      )}
+      <Form.Dropdown
+        label={
+          <label>
+            <FormattedMessage id="ruleImplementationRawForm.props.source" />
+          </label>
+        }
+        loading={sourcesLoading}
+        name="source_id"
+        onChange={(_e, { value }) => onChangeSource(value)}
+        options={sourceOptions}
+        placeholder={formatMessage({
+          id: "ruleImplementationRawForm.props.source.placeholder",
+        })}
+        required
+        search
+        selection
+        value={selectedSourceId}
+      />
+      {selectedSourceId && !_.isEmpty(databaseOptions) ? (
         <Form.Dropdown
           label={
             <label>
-              <FormattedMessage id="ruleImplementationRawForm.props.source" />
+              <FormattedMessage id="ruleImplementationRawForm.props.database" />
             </label>
           }
+          loading={sourcesLoading}
+          name="database"
           placeholder={formatMessage({
-            id: "ruleImplementationRawForm.props.source.placeholder",
+            id: "ruleImplementationRawForm.props.database.placeholder",
           })}
-          name="source_id"
-          onChange={(_e, { value }) => onChangeSource(value)}
-          options={sourcesOptions}
-          required
-          selection
-          value={selectedSourceId}
-        />
-        {selectedSourceId && !_.isEmpty(databasesOptions) && (
-          <Form.Dropdown
-            label={
-              <label>
-                <FormattedMessage id="ruleImplementationRawForm.props.database" />
-              </label>
-            }
-            name="database"
-            placeholder={formatMessage({
-              id: "ruleImplementationRawForm.props.database.placeholder",
-            })}
-            onChange={(_e, { value }) =>
-              onChangeImplementation("database", value)
-            }
-            options={databasesOptions}
-            required
-            selection
-            value={_.prop("database")(rawContent)}
-          />
-        )}
-        <Form.TextArea
-          className="raw"
-          error={
-            _.path("dataset.hasErrors")(errors) && {
-              content: _.path("dataset.errorMessage")(errors),
-            }
+          onChange={(_e, { value }) =>
+            onChangeImplementation("database", value)
           }
-          label={
-            <label>
-              <FormattedMessage id="ruleImplementationRawForm.props.dataset" />
-              <Help message="ruleImplementationRawForm.props.dataset.help"></Help>
-            </label>
-          }
-          name="dataset"
-          onChange={(e, { value }) => onChangeImplementation("dataset", value)}
-          placeholder={formatMessage({
-            id: "ruleImplementationRawForm.props.dataset.placeholder",
-          })}
+          options={databaseOptions}
           required
-          rows={4}
-          size="small"
-          value={_.prop("dataset")(rawContent) || ""}
-        />
-        <Form.TextArea
-          className="raw"
-          error={
-            _.path("population.hasErrors")(errors) && {
-              content: _.path("population.errorMessage")(errors),
-            }
-          }
-          label={
-            <label>
-              <FormattedMessage id="ruleImplementationRawForm.props.population" />
-              <Help message="ruleImplementationRawForm.props.population.help"></Help>
-            </label>
-          }
-          name="population"
-          onChange={(e, { value }) =>
-            onChangeImplementation("population", value)
-          }
-          placeholder={formatMessage({
-            id: "ruleImplementationRawForm.props.population.placeholder",
-          })}
-          rows={4}
-          size="small"
-          value={_.prop("population")(rawContent) || ""}
+          selection
+          value={_.prop("database")(rawContent)}
         />
-        <Form.TextArea
-          className="raw"
-          error={
-            _.path("validations.hasErrors")(errors) && {
-              content: _.path("validations.errorMessage")(errors),
-            }
+      ) : null}
+      <Form.TextArea
+        className="raw"
+        error={
+          _.path("dataset.hasErrors")(errors) && {
+            content: _.path("dataset.errorMessage")(errors),
           }
-          label={
-            <label>
-              <FormattedMessage id="ruleImplementationRawForm.props.validations" />
-              <Help message="ruleImplementationRawForm.props.validations.help"></Help>
-            </label>
+        }
+        label={
+          <label>
+            <FormattedMessage id="ruleImplementationRawForm.props.dataset" />
+            <Help message="ruleImplementationRawForm.props.dataset.help"></Help>
+          </label>
+        }
+        name="dataset"
+        onChange={(e, { value }) => onChangeImplementation("dataset", value)}
+        placeholder={formatMessage({
+          id: "ruleImplementationRawForm.props.dataset.placeholder",
+        })}
+        required
+        rows={4}
+        size="small"
+        value={_.prop("dataset")(rawContent) || ""}
+      />
+      <Form.TextArea
+        className="raw"
+        error={
+          _.path("population.hasErrors")(errors) && {
+            content: _.path("population.errorMessage")(errors),
           }
-          name="validations"
-          onChange={(e, { value }) =>
-            onChangeImplementation("validations", value)
+        }
+        label={
+          <label>
+            <FormattedMessage id="ruleImplementationRawForm.props.population" />
+            <Help message="ruleImplementationRawForm.props.population.help"></Help>
+          </label>
+        }
+        name="population"
+        onChange={(e, { value }) => onChangeImplementation("population", value)}
+        placeholder={formatMessage({
+          id: "ruleImplementationRawForm.props.population.placeholder",
+        })}
+        rows={4}
+        size="small"
+        value={_.prop("population")(rawContent) || ""}
+      />
+      <Form.TextArea
+        className="raw"
+        error={
+          _.path("validations.hasErrors")(errors) && {
+            content: _.path("validations.errorMessage")(errors),
           }
-          placeholder={formatMessage({
-            id: "ruleImplementationRawForm.props.validations.placeholder",
-          })}
-          required
-          rows={4}
-          size="small"
-          value={_.prop("validations")(rawContent) || ""}
-        />
-        <Form.Button
-          floated="right"
-          disabled={!isValidForm()}
-          type="submit"
-          primary
-          loading={isSubmitting}
-          onClick={() => doSubmit()}
-          content={formatMessage({ id: "actions.submit" })}
-        />
-        <Button
-          content={formatMessage({ id: "actions.cancel" })}
-          floated="right"
-          onClick={() => doCancel()}
-          secondary
-        />
-      </Form>
-    </>
+        }
+        label={
+          <label>
+            <FormattedMessage id="ruleImplementationRawForm.props.validations" />
+            <Help message="ruleImplementationRawForm.props.validations.help"></Help>
+          </label>
+        }
+        name="validations"
+        onChange={(e, { value }) =>
+          onChangeImplementation("validations", value)
+        }
+        placeholder={formatMessage({
+          id: "ruleImplementationRawForm.props.validations.placeholder",
+        })}
+        required
+        rows={4}
+        size="small"
+        value={_.prop("validations")(rawContent) || ""}
+      />
+      <Form.Button
+        floated="right"
+        disabled={!isValidForm()}
+        type="submit"
+        primary
+        loading={isSubmitting}
+        onClick={() => doSubmit()}
+        content={formatMessage({ id: "actions.submit" })}
+      />
+      <Button
+        content={formatMessage({ id: "actions.cancel" })}
+        floated="right"
+        onClick={() => doCancel()}
+        secondary
+      />
+    </Form>
   );
 };
 
 RuleImplementationRawForm.propTypes = {
-  mode: PropTypes.string,
   handleSubmit: PropTypes.func.isRequired,
   implementationKey: PropTypes.string,
   isSubmitting: PropTypes.bool,
   rawContent: PropTypes.object,
   setImplementationKey: PropTypes.func,
   setImplementationRawContent: PropTypes.func,
-  sources: PropTypes.array,
   selectTemplate: PropTypes.func,
+  sources: PropTypes.array,
+  sourcesLoading: PropTypes.bool,
   template: PropTypes.object,
   templates: PropTypes.object,
   ruleImplementation: PropTypes.object,
@@ -378,7 +365,6 @@ RuleImplementationRawForm.propTypes = {
 
 const mapStateToProps = (state) => ({
   isSubmitting: state.ruleImplementationCreating,
-  sources: _.get("sources")(state),
   templates: state.templates,
   template: getTemplate(state),
 });

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

@@ -18,12 +18,12 @@ describe("<RuleImplementationRawForm />", () => {
   const isSubmitting = false;
   const sources = [
     {
-      id: 1,
+      id: "1",
       config: { alias: "source1", job_types: ["quality"] },
       external_id: "ext_id_1",
     },
     {
-      id: 2,
+      id: "2",
       config: {
         alias: "source2",
         job_types: ["quality"],
@@ -31,7 +31,7 @@ describe("<RuleImplementationRawForm />", () => {
       },
       external_id: "ext_id_2",
     },
-    { id: 3, config: {}, external_id: "ext_id_3" },
+    { id: "3", config: {}, external_id: "ext_id_3" },
   ];
   const setImplementationRawContent = jest.fn();
 

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

@@ -37,7 +37,7 @@ exports[`<RuleImplementationForm /> matches the latest snapshot 1`] = `
           }
         }
         key="2"
-        name="population"
+        name="populations"
       />
       <RuleImplementationStep
         activeStep="information"