@truedat/dq 4.41.3 → 4.41.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.41.4] 2022-04-04
+
+### Changed
+
+- [TD-4450] Sources in implementation form are now fetched using GraphQL API
+  instead of from global state
+
 ## [4.40.13] 2022-03-21
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.41.3",
+  "version": "4.41.4",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -31,7 +31,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.41.2",
+    "@truedat/test": "4.41.4",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -82,8 +82,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.10",
-    "@truedat/core": "4.41.3",
-    "@truedat/df": "4.41.3",
+    "@truedat/core": "4.41.4",
+    "@truedat/df": "4.41.4",
     "axios": "^0.19.2",
     "graphql": "^15.5.3",
     "path-to-regexp": "^1.7.0",
@@ -103,5 +103,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "946829496288ea4ff05b3029b37d8c8d16393127"
+  "gitHead": "c7038921dceb3cb9d6950fd9f57b23126ee0d8b0"
 }

package/src/components/NewRuleImplementation.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Divider, Header, Grid } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
+import { gql, useQuery } from "@apollo/client";
+import { Loading } from "@truedat/core/components";
 import { getFieldType } from "@truedat/core/services/fieldType";
 import { applyTemplate } from "@truedat/df/utils";
 import {
@@ -240,6 +242,7 @@ export const NewRuleImplementation = ({
   rule,
   ruleImplementationProps,
   sources,
+  sourcesLoading,
   structuresFields,
   structuresSiblings,
   operators,
@@ -250,6 +253,7 @@ export const NewRuleImplementation = ({
     _.propOr([{}], "dataset"),
     withDefaultAlias
   )(ruleImplementationProps);
+
   const [ruleImplementation, setRuleImplementation] = useState(
     edition
       ? {
@@ -522,6 +526,8 @@ export const NewRuleImplementation = ({
                 ruleImplementation={ruleImplementation}
                 onChange={onChange}
                 handleSubmit={doSubmit}
+                sources={sources}
+                sourcesLoading={sourcesLoading}
               />
             ) : (
               <RuleImplementationForm
@@ -561,6 +567,33 @@ NewRuleImplementation.propTypes = {
   template: PropTypes.object,
   applyTemplate: PropTypes.func,
   sources: PropTypes.array,
+  sourcesLoading: PropTypes.bool,
+};
+
+export const SOURCES_WITH_CONFIG = gql`
+  query SOURCES_WITH_CONFIG($jobTypes: String) {
+    sources(jobTypes: $jobTypes) {
+      id
+      externalId
+      config
+    }
+  }
+`;
+
+export const NewRuleImplementationLoader = (props) => {
+  const { data, error, loading } = useQuery(SOURCES_WITH_CONFIG, {
+    variables: { jobTypes: "quality" },
+  });
+  if (loading) return <Loading />;
+  if (error) return null;
+  const sources = data?.sources || [];
+  return (
+    <NewRuleImplementation
+      sources={sources}
+      sourcesLoading={loading}
+      {...props}
+    />
+  );
 };
 
 const mapStateToProps = (state) => ({
@@ -570,7 +603,6 @@ const mapStateToProps = (state) => ({
     raw_content: state.ruleImplementationRaw,
   },
   ruleImplementationRaw: state.ruleImplementationRaw,
-  sources: state.sources,
   structuresFields: state.structuresFields,
   structuresSiblings: state.structuresSiblings,
   canManageRaw: _.prop("manage_raw_quality_rule_implementations")(
@@ -584,4 +616,4 @@ const mapStateToProps = (state) => ({
 export default connect(mapStateToProps, {
   createRuleImplementation,
   updateRuleImplementation,
-})(NewRuleImplementation);
+})(NewRuleImplementationLoader);

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__/RuleImplementationRawForm.spec.js.snap

@@ -1,168 +1,171 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RuleImplementationRawForm /> matches the latest snapshot 1`] = `
-<Fragment>
-  <lazy />
-  <Form
-    as="form"
-    className="rule"
-  >
-    <FormRadio
-      as={[Function]}
-      checked={true}
-      control={[Function]}
-      label="ruleImplementation.props.executable"
-      name="executable"
-      onChange={[Function]}
-      toggle={true}
-    />
-    <FormField>
-      <label>
-        ruleImplementation.props.name
-        <Help
-          message="datasetForm.implementation_key.tooltip"
-        />
-      </label>
-      <FormInput
-        as={[Function]}
-        autoComplete="off"
-        control={[Function]}
-        name="implementation_key"
-        onChange={[Function]}
-        placeholder="ruleImplementation.props.name.placeholder"
-        required={true}
-        value=""
+<Form
+  as="form"
+  className="rule"
+>
+  <FormRadio
+    as={[Function]}
+    checked={true}
+    control={[Function]}
+    label="ruleImplementation.props.executable"
+    name="executable"
+    onChange={[Function]}
+    toggle={true}
+  />
+  <FormField>
+    <label>
+      ruleImplementation.props.name
+      <Help
+        message="datasetForm.implementation_key.tooltip"
       />
-    </FormField>
-    <LimitsForm
-      onChange={[MockFunction]}
-      ruleImplementation={
-        Object {
-          "executable": true,
-          "goal": "10",
-          "id": 1,
-          "minimum": "1",
-          "result_type": "percentage",
-        }
-      }
-    />
-    <FormDropdown
-      as={[Function]}
-      control={[Function]}
-      label={
-        <label>
-          <Memo(MemoizedFormattedMessage)
-            id="ruleImplementationRawForm.props.source"
-          />
-        </label>
-      }
-      name="source_id"
-      onChange={[Function]}
-      options={
-        Array [
-          Object {
-            "key": 1,
-            "text": "ext_id_1",
-            "value": 1,
-          },
-          Object {
-            "key": 2,
-            "text": "ext_id_2",
-            "value": 2,
-          },
-        ]
-      }
-      placeholder="ruleImplementationRawForm.props.source.placeholder"
-      required={true}
-      selection={true}
-      value={1}
-    />
-    <FormTextArea
+    </label>
+    <FormInput
       as={[Function]}
-      className="raw"
+      autoComplete="off"
       control={[Function]}
-      error={false}
-      label={
-        <label>
-          <Memo(MemoizedFormattedMessage)
-            id="ruleImplementationRawForm.props.dataset"
-          />
-          <Help
-            message="ruleImplementationRawForm.props.dataset.help"
-          />
-        </label>
-      }
-      name="dataset"
+      name="implementation_key"
       onChange={[Function]}
-      placeholder="ruleImplementationRawForm.props.dataset.placeholder"
+      placeholder="ruleImplementation.props.name.placeholder"
       required={true}
-      rows={4}
-      size="small"
-      value=""
-    />
-    <FormTextArea
-      as={[Function]}
-      className="raw"
-      control={[Function]}
-      error={false}
-      label={
-        <label>
-          <Memo(MemoizedFormattedMessage)
-            id="ruleImplementationRawForm.props.population"
-          />
-          <Help
-            message="ruleImplementationRawForm.props.population.help"
-          />
-        </label>
-      }
-      name="population"
-      onChange={[Function]}
-      placeholder="ruleImplementationRawForm.props.population.placeholder"
-      rows={4}
-      size="small"
       value=""
     />
-    <FormTextArea
-      as={[Function]}
-      className="raw"
-      control={[Function]}
-      error={false}
-      label={
-        <label>
-          <Memo(MemoizedFormattedMessage)
-            id="ruleImplementationRawForm.props.validations"
-          />
-          <Help
-            message="ruleImplementationRawForm.props.validations.help"
-          />
-        </label>
+  </FormField>
+  <LimitsForm
+    onChange={[MockFunction]}
+    ruleImplementation={
+      Object {
+        "executable": true,
+        "goal": "10",
+        "id": 1,
+        "minimum": "1",
+        "result_type": "percentage",
       }
-      name="validations"
-      onChange={[Function]}
-      placeholder="ruleImplementationRawForm.props.validations.placeholder"
-      required={true}
-      rows={4}
-      size="small"
-      value=""
-    />
-    <FormButton
-      as={[Function]}
-      content="actions.submit"
-      control={[Function]}
-      disabled={true}
-      floated="right"
-      loading={false}
-      onClick={[Function]}
-      primary={true}
-      type="submit"
-    />
-    <Button
-      as="button"
-      content="actions.cancel"
-      floated="right"
-      onClick={[Function]}
-      secondary={true}
-    />
-  </Form>
-</Fragment>
+    }
+  />
+  <FormDropdown
+    as={[Function]}
+    control={[Function]}
+    label={
+      <label>
+        <Memo(MemoizedFormattedMessage)
+          id="ruleImplementationRawForm.props.source"
+        />
+      </label>
+    }
+    name="source_id"
+    onChange={[Function]}
+    options={
+      Array [
+        Object {
+          "key": "1",
+          "text": undefined,
+          "value": "1",
+        },
+        Object {
+          "key": "2",
+          "text": undefined,
+          "value": "2",
+        },
+        Object {
+          "key": "3",
+          "text": undefined,
+          "value": "3",
+        },
+      ]
+    }
+    placeholder="ruleImplementationRawForm.props.source.placeholder"
+    required={true}
+    search={true}
+    selection={true}
+    value="1"
+  />
+  <FormTextArea
+    as={[Function]}
+    className="raw"
+    control={[Function]}
+    error={false}
+    label={
+      <label>
+        <Memo(MemoizedFormattedMessage)
+          id="ruleImplementationRawForm.props.dataset"
+        />
+        <Help
+          message="ruleImplementationRawForm.props.dataset.help"
+        />
+      </label>
+    }
+    name="dataset"
+    onChange={[Function]}
+    placeholder="ruleImplementationRawForm.props.dataset.placeholder"
+    required={true}
+    rows={4}
+    size="small"
+    value=""
+  />
+  <FormTextArea
+    as={[Function]}
+    className="raw"
+    control={[Function]}
+    error={false}
+    label={
+      <label>
+        <Memo(MemoizedFormattedMessage)
+          id="ruleImplementationRawForm.props.population"
+        />
+        <Help
+          message="ruleImplementationRawForm.props.population.help"
+        />
+      </label>
+    }
+    name="population"
+    onChange={[Function]}
+    placeholder="ruleImplementationRawForm.props.population.placeholder"
+    rows={4}
+    size="small"
+    value=""
+  />
+  <FormTextArea
+    as={[Function]}
+    className="raw"
+    control={[Function]}
+    error={false}
+    label={
+      <label>
+        <Memo(MemoizedFormattedMessage)
+          id="ruleImplementationRawForm.props.validations"
+        />
+        <Help
+          message="ruleImplementationRawForm.props.validations.help"
+        />
+      </label>
+    }
+    name="validations"
+    onChange={[Function]}
+    placeholder="ruleImplementationRawForm.props.validations.placeholder"
+    required={true}
+    rows={4}
+    size="small"
+    value=""
+  />
+  <FormButton
+    as={[Function]}
+    content="actions.submit"
+    control={[Function]}
+    disabled={true}
+    floated="right"
+    loading={false}
+    onClick={[Function]}
+    primary={true}
+    type="submit"
+  />
+  <Button
+    as="button"
+    content="actions.cancel"
+    floated="right"
+    onClick={[Function]}
+    secondary={true}
+  />
+</Form>
 `;