@truedat/dq 4.51.2 → 4.51.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.51.3] 2022-09-16
+
+### Changed
+
+- [TD-4794] Replace `DomainDropdownSelector` and `DomainMenuSelector` with
+  common `DomainSelector`
+
 ## [4.51.0] 2022-09-13
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.51.2",
+  "version": "4.51.3",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.47.9",
+    "@truedat/test": "4.51.3",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -93,8 +93,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.4",
-    "@truedat/core": "4.51.2",
-    "@truedat/df": "4.51.2",
+    "@truedat/core": "4.51.3",
+    "@truedat/df": "4.51.3",
     "graphql": "^15.5.3",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -114,5 +114,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "9bdc76f3ee59a6e28fb2312e26d0cba2807f069b"
+  "gitHead": "69d6cf8f7379eb2ef5744a4fdd357a7dd662b115"
 }

package/src/components/ExecutionGroup.js

@@ -117,12 +117,8 @@ export const ExecutionGroup = ({ executionGroup }) => {
 
 ExecutionGroup.propTypes = {
   executionGroup: PropTypes.object,
-  executionGroupLoading: PropTypes.bool,
 };
 
-export const mapStateToProps = ({ executionGroup, executionGroupLoading }) => ({
-  executionGroup,
-  executionGroupLoading,
-});
+export const mapStateToProps = ({ executionGroup }) => ({ executionGroup });
 
 export default connect(mapStateToProps)(ExecutionGroup);

package/src/components/ImplementationsRoutes.js

@@ -49,9 +49,6 @@ import RuleSubscriptionLoader from "./RuleSubscriptionLoader";
 const TemplatesLoader = React.lazy(() =>
   import("@truedat/df/templates/components/TemplatesLoader")
 );
-const DomainsLoader = React.lazy(() =>
-  import("@truedat/bg/taxonomy/components/DomainsLoader")
-);
 const EventsLoader = React.lazy(() =>
   import("@truedat/audit/components/EventsLoader")
 );
@@ -72,12 +69,11 @@ const ImplementationEventsLoader = () => {
 };
 
 export const ImplementationsRoutes = ({
-  structuresAliasesLoading,
-  systemsLoading,
-  ruleImplementationLoaded,
-  ruleImplementation,
   implementationStructures,
   implementationStructuresLoaded,
+  ruleImplementationLoaded,
+  structuresAliasesLoading,
+  systemsLoading,
 }) => {
   const authorized = useAuthorized();
   const { rule_result_id: ruleResultId } = useParams();
@@ -88,13 +84,6 @@ export const ImplementationsRoutes = ({
         path={IMPLEMENTATION_NEW}
         render={() => (
           <>
-            <DomainsLoader
-              actions={[
-                "manage_ruleless_implementations",
-                "manage_quality_rule_implementations",
-              ]}
-              filter="all"
-            />
             {!structuresAliasesLoading && !systemsLoading ? (
               <NewRuleImplementation />
             ) : null}
@@ -106,13 +95,6 @@ export const ImplementationsRoutes = ({
         path={IMPLEMENTATION_NEW_RAW}
         render={() => (
           <>
-            <DomainsLoader
-              actions={[
-                "manage_ruleless_implementations",
-                "manage_raw_quality_rule_implementations",
-              ]}
-              filter="all"
-            />
             <TemplatesLoader scope="ri" />
             {!structuresAliasesLoading && !systemsLoading ? (
               <NewRuleImplementation implementationType="raw" />
@@ -165,17 +147,6 @@ export const ImplementationsRoutes = ({
               path={IMPLEMENTATION_CLONE}
               render={() => (
                 <>
-                  {!ruleImplementation?.rule_id ? (
-                    <DomainsLoader
-                      actions={[
-                        "manage_ruleless_implementations",
-                        ruleImplementation?.implementation_type === "raw"
-                          ? "manage_raw_quality_rule_implementations"
-                          : "manage_quality_rule_implementations",
-                      ]}
-                      filter="all"
-                    />
-                  ) : null}
                   {ruleImplementationLoaded ? (
                     <ImplementationStructuresLoader
                       structureIds={implementationStructures}
@@ -194,17 +165,6 @@ export const ImplementationsRoutes = ({
               path={IMPLEMENTATION_EDIT}
               render={() => (
                 <>
-                  {!ruleImplementation?.rule_id ? (
-                    <DomainsLoader
-                      actions={[
-                        "manage_ruleless_implementations",
-                        ruleImplementation?.implementation_type === "raw"
-                          ? "manage_raw_quality_rule_implementations"
-                          : "manage_quality_rule_implementations",
-                      ]}
-                      filter="all"
-                    />
-                  ) : null}
                   {ruleImplementationLoaded ? (
                     <ImplementationStructuresLoader
                       structureIds={implementationStructures}
@@ -385,24 +345,20 @@ export const ImplementationsRoutes = ({
 };
 
 ImplementationsRoutes.propTypes = {
-  structuresAliasesLoading: PropTypes.bool,
-  systemsLoading: PropTypes.bool,
-  ruleImplementationLoaded: PropTypes.bool,
-  ruleImplementation: PropTypes.object,
   implementationStructures: PropTypes.array,
   implementationStructuresLoaded: PropTypes.bool,
+  ruleImplementationLoaded: PropTypes.bool,
+  structuresAliasesLoading: PropTypes.bool,
+  systemsLoading: PropTypes.bool,
 };
 
 export const mapStateToProps = (state) => ({
-  ..._.pick([
-    "structuresAliasesLoading",
-    "systemsLoading",
-    "ruleImplementation",
-  ])(state),
-  ruleImplementationLoaded:
-    !state.ruleImplementationLoading && !_.isEmpty(state.ruleImplementation),
   implementationStructures: getImplementationStructures(state),
   implementationStructuresLoaded: getImplementationStructuresLoaded(state),
+  ruleImplementationLoaded:
+    !state.ruleImplementationLoading && !_.isEmpty(state.ruleImplementation),
+  structuresAliasesLoading: state.structuresAliasesLoading,
+  systemsLoading: state.systemsLoading,
 });
 
 export default connect(mapStateToProps)(ImplementationsRoutes);

package/src/components/NewRule.js

@@ -7,10 +7,6 @@ import { Container, Header, Icon, Segment } from "semantic-ui-react";
 import { createRule } from "../routines";
 import RuleForm from "./RuleForm";
 
-const DomainsLoader = React.lazy(() =>
-  import("@truedat/bg/taxonomy/components/DomainsLoader")
-);
-
 export const ConceptRuleForm = ({ createRule, concept }) => {
   if (!concept?.business_concept_id) return null;
   return <RuleForm concept={concept} onSubmit={createRule} />;
@@ -31,7 +27,6 @@ export const NewRule = ({ createRule, concept }) => {
           <FormattedMessage id="rules.actions.create" />
         </Header.Content>
       </Header>
-      <DomainsLoader actions="manage_quality_rule" />
       {business_concept_id ? (
         <ConceptRuleForm concept={concept} createRule={createRule} />
       ) : (

package/src/components/RuleForm.js

@@ -16,12 +16,11 @@ import {
   Popup,
   Icon,
 } from "semantic-ui-react";
-import { HistoryBackButton, RichTextEditor } from "@truedat/core/components";
-import { getDomainSelectorOptions } from "@truedat/bg/selectors";
-
-const DomainDropdownSelector = React.lazy(() =>
-  import("@truedat/bg/taxonomy/components/DomainDropdownSelector")
-);
+import {
+  DomainSelector,
+  HistoryBackButton,
+  RichTextEditor,
+} from "@truedat/core/components";
 
 const ConceptSelector = React.lazy(() =>
   import("@truedat/bg/concepts/relations/components/ConceptSelector")
@@ -80,12 +79,12 @@ export class RuleForm extends React.Component {
     activeSelection: false,
     concept: null,
     domain_id: null,
+    domainsLoading: true,
     name: "",
     description: null,
     df_name: "",
     df_content: {},
     template: null,
-    templatesLoading: true,
   };
 
   componentDidMount() {
@@ -102,7 +101,7 @@ export class RuleForm extends React.Component {
     } else if (!_.isEmpty(concept)) {
       this.setState({
         business_concept_id: concept?.business_concept_id,
-        domain_id: concept?.domain_id,
+        domain_id: concept?.domain?.id,
         concept,
       });
     }
@@ -154,8 +153,8 @@ export class RuleForm extends React.Component {
     const rule = _.omit([
       "activeSelection",
       "concept",
+      "domainsLoading",
       "template",
-      "templatesLoading",
       "valid",
     ])(this.state);
 
@@ -174,11 +173,9 @@ export class RuleForm extends React.Component {
   };
 
   handleDomainSelected = (e, { value }) => {
-    const domain_id = value;
-    const { editMode } = this.props;
-
+    const domain_id = value ? _.toInteger(value) : null;
     this.setState(
-      editMode
+      this.props.editMode
         ? { concept: null, business_concept_id: null, domain_id }
         : { domain_id }
     );
@@ -189,6 +186,10 @@ export class RuleForm extends React.Component {
     this.setState({ activeSelection: !activeSelection });
   };
 
+  handleDomainsLoaded = () => {
+    this.setState({ domainsLoading: false });
+  };
+
   generateValidationMessages = () => {
     const rule = this.state;
     const {
@@ -213,9 +214,9 @@ export class RuleForm extends React.Component {
       isSubmitting,
       intl: { formatMessage },
     } = this.props;
-    const { valid, ...rule } = this.state;
-    const { domain_id } = rule;
-    const { concept, domainOptions } = this.props;
+    const { valid, domainsLoading, ...rule } = this.state;
+    const domain_id = rule?.domain_id;
+    const { concept } = this.props;
     const messages = this.generateValidationMessages();
     const hasDomainSelected = !!domain_id;
     const defaultFilters = hasDomainSelected
@@ -224,7 +225,11 @@ export class RuleForm extends React.Component {
 
     return (
       <>
-        <Form onSubmit={this.handleSubmit} className="rule-form">
+        <Form
+          loading={domainsLoading}
+          onSubmit={this.handleSubmit}
+          className="rule-form"
+        >
           <Form.Field className="rule-form__field-right">
             <Radio
               name="active"
@@ -265,17 +270,13 @@ export class RuleForm extends React.Component {
             messages={_.prop("domain")(messages)}
             required
           >
-            <DomainDropdownSelector
-              name="domain"
-              domainOptions={
-                domainOptions
-                  ? getDomainSelectorOptions({ domains: domainOptions })
-                  : null
-              }
-              hideLabel
-              invalid={!_.isFinite(this.state.domain_id)}
+            <DomainSelector
+              action="manageQualityRule"
+              labels
               onChange={this.handleDomainSelected}
-              value={this.state.domain_id}
+              onLoad={this.handleDomainsLoaded}
+              required
+              value={domain_id}
             />
           </FieldLabelWrapping>
           {_.isEmpty(concept) && (
@@ -356,7 +357,6 @@ export class RuleForm extends React.Component {
 
 RuleForm.propTypes = {
   concept: PropTypes.object,
-  domainOptions: PropTypes.array,
   editMode: PropTypes.bool,
   intl: PropTypes.object,
   isSubmitting: PropTypes.bool,
@@ -365,10 +365,9 @@ RuleForm.propTypes = {
   rule: PropTypes.object,
 };
 
-const mapStateToProps = (state) => ({
-  isSubmitting: state.ruleCreating || state.ruleUpdating,
-  concept: state.concept,
-  domainOptions: _.pathOr(null, "conceptRulesActions.domain_ids")(state),
+const mapStateToProps = ({ ruleCreating, ruleUpdating, concept }) => ({
+  isSubmitting: ruleCreating || ruleUpdating,
+  concept,
 });
 
 export default compose(

package/src/components/RuleRoutes.js

@@ -27,9 +27,6 @@ import RuleLoader from "./RuleLoader";
 import RuleProperties from "./RuleProperties";
 import RuleSubscriptionLoader from "./RuleSubscriptionLoader";
 
-const DomainsLoader = React.lazy(() =>
-  import("@truedat/bg/taxonomy/components/DomainsLoader")
-);
 const DynamicFormViewer = React.lazy(() =>
   import("@truedat/df/components/DynamicFormViewer")
 );
@@ -83,16 +80,7 @@ export const RuleRoutes = ({
             </>
           )}
         />
-        <Route
-          exact
-          path={RULE_EDIT}
-          render={() => (
-            <>
-              <DomainsLoader actions="manage_quality_rule" />
-              <EditRule />
-            </>
-          )}
-        />
+        <Route exact path={RULE_EDIT} render={() => <EditRule />} />
         <Route
           exact
           path={RULE_EVENTS}

package/src/components/RulesRoutes.js

@@ -7,9 +7,6 @@ import RuleRoutes from "./RuleRoutes";
 import Rules from "./Rules";
 import RulesLoader from "./RulesLoader";
 
-const DomainsLoader = React.lazy(() =>
-  import("@truedat/bg/taxonomy/components/DomainsLoader")
-);
 const UserSearchFiltersLoader = React.lazy(() =>
   import("@truedat/dd/components/UserSearchFiltersLoader")
 );

package/src/components/__tests__/NewRuleImplementation.spec.js

@@ -17,7 +17,13 @@ import {
 
 const domainActions = ["publishImplementation", "manageSegments"];
 const domains = [
-  { id: "2", name: "Truedat", parentId: "", actions: domainActions },
+  {
+    id: "2",
+    externalId: "td",
+    name: "Truedat",
+    parentId: "",
+    actions: domainActions,
+  },
 ];
 const requestVariables = {
   action: "manageRulelessImplementations",

package/src/components/__tests__/RuleForm.spec.js

@@ -2,7 +2,7 @@ import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import userEvent from "@testing-library/user-event";
-import { multipleTemplatesMock } from "@truedat/test/mocks";
+import { domainsMock, multipleTemplatesMock } from "@truedat/test/mocks";
 import RuleForm from "../RuleForm";
 import { globalState } from "./__fixtures__/RuleForm";
 
@@ -19,7 +19,10 @@ const state = {
 };
 
 const renderOpts = {
-  mocks: [multipleTemplatesMock({ scope: "dq", domainIds: [1] })],
+  mocks: [
+    domainsMock({ action: "manageQualityRule" }),
+    multipleTemplatesMock({ scope: "dq", domainIds: [1] }),
+  ],
   state,
   fallback: "lazy",
 };
@@ -53,11 +56,14 @@ describe("<RuleForm />", () => {
 
   it("enables save button after name and domain are specified", async () => {
     const props = { onSubmit: jest.fn() };
-    const { getByRole } = render(<RuleForm {...props} />, renderOpts);
+    const { getByRole, findByText } = render(
+      <RuleForm {...props} />,
+      renderOpts
+    );
     await waitFor(() =>
       expect(getByRole("button", { name: /save/i })).toBeDisabled()
     );
-    userEvent.click(getByRole("option", { name: "domain1" }));
+    userEvent.click(await findByText("barDomain"));
     userEvent.type(getByRole("textbox", { name: /rule name/i }), "rule1");
     await waitFor(() => {
       expect(getByRole("button", { name: /save/i })).not.toBeDisabled();
@@ -68,16 +74,22 @@ describe("<RuleForm />", () => {
     const onSubmit = jest.fn();
 
     const renderOpts = {
-      mocks: [multipleTemplatesMock({ scope: "dq", domainIds: [1] })],
+      mocks: [
+        domainsMock({ action: "manageQualityRule" }),
+        multipleTemplatesMock({ scope: "dq", domainIds: [1] }),
+      ],
       state: globalState,
       fallback: "lazy",
     };
 
-    const { getByRole } = render(<RuleForm onSubmit={onSubmit} />, renderOpts);
+    const { getByRole, findByText } = render(
+      <RuleForm onSubmit={onSubmit} />,
+      renderOpts
+    );
     await waitFor(() =>
       expect(getByRole("button", { name: /save/i })).toBeDisabled()
     );
-    userEvent.click(getByRole("option", { name: "ARQ" }));
+    userEvent.click(await findByText("barDomain"));
     const ruleNameTextbox = getByRole("textbox", { name: /rule name/i });
     userEvent.paste(ruleNameTextbox, "rule1");
     expect(ruleNameTextbox).toHaveValue("rule1");
@@ -95,7 +107,7 @@ describe("<RuleForm />", () => {
         description: {},
         df_content: {},
         df_name: undefined,
-        domain_id: 1,
+        domain_id: 2,
         name: "rule1",
       },
     });

package/src/components/__tests__/__fixtures__/RuleForm.js

@@ -2,6 +2,7 @@ export const globalState = {
   ruleCreating: false,
   ruleUpdating: false,
   conceptRulesActions: {
+    create: "/api/rules/123/foo",
     domain_ids: [
       {
         external_id: "ARQUITECTURA",

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

@@ -20,7 +20,7 @@ exports[`<NewRule /> matches the latest snapshot (with concept) 1`] = `
       </div>
     </h2>
     <form
-      class="ui form rule-form"
+      class="ui loading form rule-form"
     >
       <div
         class="field rule-form__field-right"
@@ -212,53 +212,12 @@ exports[`<NewRule /> matches the latest snapshot (with concept) 1`] = `
           <span>
             *
           </span>
-        </label>
-        <div
-          class="field"
-        >
           <div
-            class="field"
+            class="ui left pointing label"
           >
-            <div
-              aria-expanded="false"
-              class="ui fluid search selection dropdown"
-              name="domain"
-              role="combobox"
-            >
-              <input
-                aria-autocomplete="list"
-                autocomplete="off"
-                class="search"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-              <div
-                aria-atomic="true"
-                aria-live="polite"
-                class="divider text"
-                role="alert"
-              >
-                Select a domain...
-              </div>
-              <i
-                aria-hidden="true"
-                class="dropdown icon clear"
-              />
-              <div
-                aria-multiselectable="false"
-                class="menu transition"
-                role="listbox"
-              >
-                <div
-                  class="message"
-                >
-                  No results found.
-                </div>
-              </div>
-            </div>
+            Required field is empty
           </div>
-        </div>
+        </label>
       </div>
       <div
         class="required field"

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

@@ -195,60 +195,90 @@ exports[`<RuleForm /> matches the latest snapshot (edit mode) 1`] = `
         <span>
           *
         </span>
+        <div
+          class="ui left pointing label"
+        >
+          Required field is empty
+        </div>
       </label>
       <div
-        class="field"
+        class="required field"
       >
         <div
-          class="field"
+          aria-expanded="false"
+          aria-multiselectable="false"
+          class="ui floating dropdown"
+          required=""
+          role="listbox"
+          tabindex="0"
         >
+          <label>
+            Select a domain...
+          </label>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
           <div
-            aria-expanded="false"
-            class="ui fluid search selection dropdown"
-            name="domain"
-            role="combobox"
+            class="menu transition"
           >
-            <input
-              aria-autocomplete="list"
-              autocomplete="off"
-              class="search"
-              tabindex="0"
-              type="text"
-              value=""
-            />
             <div
-              aria-atomic="true"
-              aria-live="polite"
-              class="divider text"
-              role="alert"
+              class="ui left icon input search"
             >
-              domain1
+              <input
+                type="text"
+              />
+              <i
+                aria-hidden="true"
+                class="search icon"
+              />
             </div>
-            <i
-              aria-hidden="true"
-              class="dropdown icon"
-            />
             <div
-              aria-multiselectable="false"
-              class="menu transition"
-              role="listbox"
+              class="scrolling menu transition"
             >
               <div
-                aria-checked="true"
-                aria-selected="true"
-                class="active selected item"
+                aria-selected="false"
+                class="item"
+                role="option"
+              >
+                <div
+                  style="margin-left: 0px;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="plus icon"
+                  />
+                  barDomain
+                </div>
+              </div>
+              <div
+                aria-selected="false"
+                class="item"
+                role="option"
+              >
+                <div
+                  style="margin-left: 0px;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="icon"
+                  />
+                  bazDomain
+                </div>
+              </div>
+              <div
+                aria-selected="false"
+                class="item"
                 role="option"
-                style="pointer-events: all;"
               >
                 <div
-                  class="text"
                   style="margin-left: 0px;"
                 >
                   <i
                     aria-hidden="true"
                     class="icon"
                   />
-                  domain1
+                  fooDomain
                 </div>
               </div>
             </div>
@@ -257,7 +287,7 @@ exports[`<RuleForm /> matches the latest snapshot (edit mode) 1`] = `
       </div>
     </div>
     <div
-      class="ui segment"
+      class="ui disabled segment"
     >
       <div
         class="inline fields"
@@ -346,81 +376,6 @@ exports[`<RuleForm /> matches the latest snapshot (edit mode) 1`] = `
         </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>
     <div
       class="actions"
     >
@@ -640,60 +595,90 @@ exports[`<RuleForm /> matches the latest snapshot 1`] = `
         <span>
           *
         </span>
+        <div
+          class="ui left pointing label"
+        >
+          Required field is empty
+        </div>
       </label>
       <div
-        class="field"
+        class="required field"
       >
         <div
-          class="field"
+          aria-expanded="false"
+          aria-multiselectable="false"
+          class="ui floating dropdown"
+          required=""
+          role="listbox"
+          tabindex="0"
         >
+          <label>
+            Select a domain...
+          </label>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
           <div
-            aria-expanded="false"
-            class="ui fluid search selection dropdown"
-            name="domain"
-            role="combobox"
+            class="menu transition"
           >
-            <input
-              aria-autocomplete="list"
-              autocomplete="off"
-              class="search"
-              tabindex="0"
-              type="text"
-              value=""
-            />
             <div
-              aria-atomic="true"
-              aria-live="polite"
-              class="divider text"
-              role="alert"
+              class="ui left icon input search"
             >
-              domain1
+              <input
+                type="text"
+              />
+              <i
+                aria-hidden="true"
+                class="search icon"
+              />
             </div>
-            <i
-              aria-hidden="true"
-              class="dropdown icon"
-            />
             <div
-              aria-multiselectable="false"
-              class="menu transition"
-              role="listbox"
+              class="scrolling menu transition"
             >
               <div
-                aria-checked="true"
-                aria-selected="true"
-                class="active selected item"
+                aria-selected="false"
+                class="item"
+                role="option"
+              >
+                <div
+                  style="margin-left: 0px;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="plus icon"
+                  />
+                  barDomain
+                </div>
+              </div>
+              <div
+                aria-selected="false"
+                class="item"
+                role="option"
+              >
+                <div
+                  style="margin-left: 0px;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="icon"
+                  />
+                  bazDomain
+                </div>
+              </div>
+              <div
+                aria-selected="false"
+                class="item"
                 role="option"
-                style="pointer-events: all;"
               >
                 <div
-                  class="text"
                   style="margin-left: 0px;"
                 >
                   <i
                     aria-hidden="true"
                     class="icon"
                   />
-                  domain1
+                  fooDomain
                 </div>
               </div>
             </div>
@@ -702,7 +687,7 @@ exports[`<RuleForm /> matches the latest snapshot 1`] = `
       </div>
     </div>
     <div
-      class="ui segment"
+      class="ui disabled segment"
     >
       <div
         class="inline fields"
@@ -791,81 +776,6 @@ exports[`<RuleForm /> matches the latest snapshot 1`] = `
         </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>
     <div
       class="actions"
     >

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

@@ -24,6 +24,9 @@ exports[`<RuleRow /> matches the latest snapshot 1`] = `
         >
           
         </td>
+        <td
+          class=""
+        />
       </tr>
     </tbody>
   </table>
@@ -54,6 +57,9 @@ exports[`<RuleRow /> row prints column fields 1`] = `
         >
           
         </td>
+        <td
+          class=""
+        />
         <td
           class=""
         >

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

@@ -57,6 +57,19 @@ exports[`<Rules /> matches the latest snapshot 1`] = `
           sorted={null}
           width={3}
         />
+        <TableHeaderCell
+          as="th"
+          className=""
+          content={
+            <Memo(MemoizedFormattedMessage)
+              id="quality.updated_at"
+            />
+          }
+          key="3"
+          onClick={[Function]}
+          sorted={null}
+          width={3}
+        />
       </TableRow>
     </TableHeader>
     <TableBody
@@ -90,6 +103,13 @@ exports[`<Rules /> matches the latest snapshot 1`] = `
               },
               "width": 3,
             },
+            Object {
+              "name": "updated_at",
+              "sort": Object {
+                "name": "updated_at",
+              },
+              "width": 3,
+            },
           ]
         }
         key="0"
@@ -132,6 +152,13 @@ exports[`<Rules /> matches the latest snapshot 1`] = `
               },
               "width": 3,
             },
+            Object {
+              "name": "updated_at",
+              "sort": Object {
+                "name": "updated_at",
+              },
+              "width": 3,
+            },
           ]
         }
         key="1"

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

@@ -7,6 +7,7 @@ import InformationForm from "../InformationForm";
 const domains = [
   {
     id: "123",
+    externalId: "123",
     name: "foo",
     parentId: "",
     actions: ["publishImplementation", "manageSegments"],

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

@@ -8,6 +8,7 @@ import RuleImplementationForm from "../RuleImplementationForm";
 const domains = [
   {
     id: "123",
+    externalId: "123",
     name: "foo",
     parentId: "",
     actions: ["publishImplementation", "manageSegments"],

package/src/reducers/conceptRulesActions.js

@@ -18,6 +18,7 @@ export const conceptRulesActions = (
       const actions = _.propOr({}, "_actions")(payload);
       return {
         ...actions,
+        // TODO: Why??
         domain_ids: _.flow(
           _.pathOr([], "domain_ids"),
           _.map((domain) => {

package/src/reducers/rules.js

@@ -17,6 +17,7 @@ const pickFields = _.pick([
   "minimum",
   "name",
   "result_type",
+  "updated_at",
 ]);
 
 const rules = (state = initialState, { type, payload }) => {

package/src/selectors/ruleColumnsSelector.js

@@ -48,6 +48,11 @@ export const defaultRuleColumns = () => [
     sort: { name: "current_business_concept_version.name.raw" },
     width: 3,
   },
+  {
+    name: "updated_at",
+    width: 3,
+    sort: { name: "updated_at" },
+  },
 ];
 
 export const optionalRuleColumns = [