@truedat/df 4.49.10 → 4.50.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.50.3] 2022-08-29
+
+### Changed
+
+- [TD-5091] Dynamic `domain` fields are now integer ids instead of embedded
+  documents
+
 ## [4.48.5] 2022-07-11
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "4.49.10",
+  "version": "4.50.4",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -87,8 +87,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.49.10",
-    "@truedat/core": "4.49.10",
+    "@truedat/auth": "4.50.4",
+    "@truedat/core": "4.50.4",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
     "react-color": "^2.17.3",
@@ -106,5 +106,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "fb6fcd549a722d777d692f2938dbc991c72dd3a1"
+  "gitHead": "d9f12f551a3780a8785197e02c6842b89ab24ec3"
 }

package/src/api/queries.js

@@ -0,0 +1,19 @@
+import { gql } from "@apollo/client";
+
+export const DOMAINS_QUERY = gql`
+  query Domains($action: String!) {
+    domains(action: $action) {
+      id
+      name
+    }
+  }
+`;
+
+export const DOMAIN_PREVIEW_QUERY = gql`
+  query DomainPreviewQuery($ids: [ID!]!) {
+    domains(ids: $ids) {
+      id
+      name
+    }
+  }
+`;

package/src/components/DynamicFieldValue.js

@@ -3,6 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Icon, List, Container } from "semantic-ui-react";
+import DomainPreview from "./widgets/DomainPreview";
 import SystemPreview from "./widgets/SystemPreview";
 import FieldViewerValue from "./FieldViewerValue";
 import "../styles/fieldGroupDetail.less";
@@ -30,6 +31,8 @@ export const DynamicFieldValue = ({
         ) : (
           <Icon name="minus" color="grey" />
         )
+      ) : type == "domain" ? (
+        <DomainPreview domainIds={_.castArray(value)} />
       ) : _.isArray(value) ? (
         type == "table" ? (
           <FieldViewerValue type={type} value={value} values={values} />

package/src/components/EditableDynamicFieldValue.js

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Icon, List, Button, Container } from "semantic-ui-react";
+import DomainPreview from "./widgets/DomainPreview";
 import SystemPreview from "./widgets/SystemPreview";
 import DynamicField from "./widgets/DynamicField";
 import FieldViewerValue from "./FieldViewerValue";
@@ -91,6 +92,8 @@ export const EditableDynamicFieldValue = (props) => {
           ) : (
             <Icon name="minus" color="grey" />
           )
+        ) : type == "domain" ? (
+          <DomainPreview domainIds={_.castArray(value)} />
         ) : _.isArray(value) ? (
           type == "table" ? (
             <FieldViewerValue type={type} value={value} values={values} />

package/src/components/FieldViewerValue.js

@@ -3,7 +3,6 @@ import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Icon, Label, Table } from "semantic-ui-react";
 import { SafeLink, RichTextEditor } from "@truedat/core/components";
-import DomainPreview from "./widgets/DomainPreview";
 import FieldGroupCopy from "./FieldGroupCopy";
 import ImagePreview from "./widgets/ImagePreview";
 import SystemPreview from "./widgets/SystemPreview";
@@ -66,16 +65,13 @@ export const FieldViewerValue = ({
       return <ImagePreview value={value} />;
     case "system":
       return <SystemPreview value={value} />;
-    case "domain":
-      return <DomainPreview value={value} />;
     case "copy":
       return <FieldGroupCopy value={value} />;
     case "user_group":
       const [type, name] = value.split(":");
       return multiple ? (
         <Label>
-          <Icon name={type} />
-          {name}
+          <Icon name={type} /> {name}
         </Label>
       ) : (
         <>

package/src/components/SelectableDynamicForm.js

@@ -1,5 +1,6 @@
 import _ from "lodash/fp";
 import React, { useState } from "react";
+import PropTypes from "prop-types";
 import { TemplateSelector } from "@truedat/core/components";
 import { applyTemplate, validateContent } from "@truedat/df/utils";
 import DynamicForm from "./DynamicForm";
@@ -13,12 +14,14 @@ export default function SelectableDynamicForm({
   name,
   onChange,
   onNameChange,
+  placeholder,
+  hideLabel,
 }) {
   const [template, setTemplate] = useState();
   const domain = _.size(domainIds) > 0 ? { id: _.head(domainIds) } : null;
 
-  const handleChange = (content) => {
-    onChange({ content, valid: validateContent(template)(content) });
+  const handleChange = (content, currentTemplate = template) => {
+    onChange({ content, valid: validateContent(currentTemplate)(content) });
   };
 
   const handleLoad = ({ templates }) => {
@@ -30,13 +33,19 @@ export default function SelectableDynamicForm({
     if (template?.name !== name) {
       onNameChange(template?.name);
     }
-    handleChange(template ? applyTemplate(template)(content, domain?.id) : {});
+    handleChange(
+      template ? applyTemplate(template)(content, domain?.id) : {},
+      template
+    );
     setTemplate(template);
   };
 
   const handleSelected = (_e, { template }) => {
     onNameChange(template?.name);
-    handleChange(template ? applyTemplate(template)(content, domain?.id) : {});
+    handleChange(
+      template ? applyTemplate(template)(content, domain?.id) : {},
+      template
+    );
     setTemplate(template);
   };
 
@@ -49,6 +58,8 @@ export default function SelectableDynamicForm({
         selectedValue={template?.id}
         onChange={handleSelected}
         onLoad={handleLoad}
+        placeholder={placeholder}
+        hideLabel={hideLabel}
       />
       {template ? (
         <>
@@ -64,3 +75,16 @@ export default function SelectableDynamicForm({
     </>
   );
 }
+
+SelectableDynamicForm.propTypes = {
+  domainIds: PropTypes.array,
+  scope: PropTypes.string,
+  required: PropTypes.bool,
+  content: PropTypes.object,
+  header: PropTypes.node,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  onNameChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  hideLabel: PropTypes.bool,
+};

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

@@ -21,10 +21,6 @@ describe("<FieldViewerValue />", () => {
       value: { id: 1, name: "name" },
       type: "system",
     },
-    {
-      value: { id: 1, name: "name" },
-      type: "domain",
-    },
     {
       value: "copy",
       type: "copy",

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

@@ -36,20 +36,6 @@ exports[`<FieldViewerValue /> matches the latest snapshot with type: datetime 1`
 </div>
 `;
 
-exports[`<FieldViewerValue /> matches the latest snapshot with type: domain 1`] = `
-<div>
-  <div
-    class="ui label"
-  >
-    <a
-      href="/domains/1"
-    >
-      name
-    </a>
-  </div>
-</div>
-`;
-
 exports[`<FieldViewerValue /> matches the latest snapshot with type: image 1`] = `
 <div>
   <img

package/src/components/widgets/DomainDropdown.js

@@ -1,55 +1,54 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { getDomainSelectorOptions } from "@truedat/bg/selectors";
-
-const DomainDropdownSelector = React.lazy(() =>
-  import("@truedat/bg/taxonomy/components/DomainDropdownSelector")
-);
-
-const DomainMenuSelector = React.lazy(() =>
-  import("@truedat/bg/taxonomy/components/DomainMenuSelector")
-);
-
-const templateValue = (value, options) => {
-  if (_.isNil(value)) return value;
-  if (_.isArray(value)) return _.map((id) => _.find({ id })(options))(value);
-  return _.find({ id: value })(options);
-};
-
-const widgetValue = (value) => {
-  if (_.isNil(value)) return value;
-  if (_.isArray(value)) return _.map("id")(value);
-  return value.id;
+import { Form } from "semantic-ui-react";
+import { DomainSelector } from "@truedat/core/components";
+
+const toIntegerId = _.cond([
+  [_.isInteger, _.identity],
+  [_.eq(""), _.constant(null)],
+  [_.isString, _.toInteger],
+  [_.conformsTo({ id: _.isInteger }), _.prop("id")],
+  [_.conformsTo({ id: _.isString }), _.flow(_.prop("id"), _.toInteger)],
+  [_.stubTrue, _.constant(null)],
+]);
+
+const idOrIds = _.cond([
+  [_.isArray, _.flow(_.map(toIntegerId), _.reject(_.isNil))],
+  [_.stubTrue, toIntegerId],
+]);
+
+const actionsByScope = {
+  cx: "manageSource",
+  ca: "manageConfiguration",
+  bg: "manageConcept",
+  dd: "manageNotes",
+  dq: "manageRule",
+  ie: "manageIngest",
 };
 
 export const DomainDropdown = ({
-  field: { name, cardinality, value },
+  field: { name, cardinality, value: currentValue },
   onChange,
-  domainOptions,
+  scope,
 }) => {
-  const handleChange = (e, data) => {
-    const value = { name, value: templateValue(data.value, domainOptions) };
-    onChange(e, value);
-  };
+  const [loading, setLoading] = useState(true);
+  const handleLoad = () => setLoading(false);
+  const handleChange = (e, { value }) =>
+    onChange(e, { name, value: idOrIds(value) });
+  const multiple = _.includes(cardinality)(["+", "*"]);
+  const action = _.prop(scope)(actionsByScope);
   return (
     <>
-      {_.includes(cardinality)(["1", "?"]) && (
-        <DomainDropdownSelector
-          domainOptions={domainOptions}
-          hideLabel
-          onChange={handleChange}
-          value={widgetValue(value)}
-        />
-      )}
-      {_.includes(cardinality)(["+", "*"]) && (
-        <DomainMenuSelector
-          domainOptions={domainOptions}
-          onChange={handleChange}
-          value={widgetValue(value)}
-        />
-      )}
+      {loading ? <Form.Input loading /> : null}
+      <DomainSelector
+        action={action}
+        multiple={multiple}
+        onChange={handleChange}
+        onLoad={handleLoad}
+        value={idOrIds(currentValue)}
+        labels
+      />
     </>
   );
 };
@@ -57,11 +56,7 @@ export const DomainDropdown = ({
 DomainDropdown.propTypes = {
   field: PropTypes.object,
   onChange: PropTypes.func,
-  domainOptions: PropTypes.array,
+  scope: PropTypes.string,
 };
 
-const mapStateToProps = (state) => ({
-  domainOptions: getDomainSelectorOptions(state),
-});
-
-export default connect(mapStateToProps)(DomainDropdown);
+export default DomainDropdown;

package/src/components/widgets/DomainPreview.js

@@ -1,27 +1,37 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
+import { useQuery } from "@apollo/client";
 import { linkTo } from "@truedat/core/routes";
 import { Label } from "semantic-ui-react";
 import { Link } from "react-router-dom";
+import { DOMAIN_PREVIEW_QUERY } from "../../api/queries";
 
-export const DomainPreview = ({ value }) => {
-  const domains = _.isArray(value) ? value : [value];
-  return (
-    <>
-      {_.map.convert({ cap: false })((domain, i) => (
-        <Label key={i}>
-          <Link to={linkTo.DOMAIN({ id: _.prop("id")(domain) })}>
-            {_.prop("name")(domain)}
-          </Link>
-        </Label>
-      ))(domains)}
-    </>
+export const DomainPreview = ({ domains }) =>
+  _.map(({ id, name }) => (
+    <Label key={id}>
+      <Link to={linkTo.DOMAIN({ id })}>{name}</Link>
+    </Label>
+  ))(domains);
+
+DomainPreview.propTypes = {
+  domains: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+export const DomainPreviewLoader = ({ domainIds }) => {
+  const { loading, error, data } = useQuery(DOMAIN_PREVIEW_QUERY, {
+    variables: { ids: domainIds },
+  });
+  if (error) return null;
+  return loading ? (
+    <Label>...</Label>
+  ) : (
+    <DomainPreview domains={data.domains} />
   );
 };
 
-DomainPreview.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+DomainPreviewLoader.propTypes = {
+  domainIds: PropTypes.arrayOf(PropTypes.number).isRequired,
 };
 
-export default DomainPreview;
+export default DomainPreviewLoader;

package/src/components/widgets/DropdownDataLoader.js

@@ -1,36 +1,15 @@
-import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 
-const permissions = {
-  cx: ["manage_data_sources", "show"],
-  ca: ["manage_configurations", "show"],
-  bg: ["update_business_concept", "show"],
-  dd: ["update_data_structure", "show"],
-  dq: ["manage_quality_rule", "show"],
-  ie: ["update_ingest", "show"]
-};
 const SystemsLoader = React.lazy(() =>
   import("@truedat/dd/components/SystemsLoader")
 );
-const DomainsLoader = React.lazy(() =>
-  import("@truedat/bg/taxonomy/components/DomainsLoader")
-);
 
-const getPermissions = scope => _.prop(scope)(permissions);
-
-export const DropdownDataLoader = ({ scope, type }) => (
-  <>
-    {type === "system" && <SystemsLoader />}
-    {type === "domain" && (
-      <DomainsLoader actions={getPermissions(scope)} filter="all" />
-    )}
-  </>
-);
+export const DropdownDataLoader = ({ type }) =>
+  type === "system" ? <SystemsLoader /> : null;
 
 DropdownDataLoader.propTypes = {
-  scope: PropTypes.string,
-  type: PropTypes.string
+  type: PropTypes.string,
 };
 
 export default DropdownDataLoader;

package/src/components/widgets/DropdownField.js

@@ -10,24 +10,24 @@ import StandardDropdown from "./StandardDropdown";
 export const DropdownField = ({ field, loading, onChange, scope }) => {
   const type = field.type;
   return (
-    <>
-      <DropdownDataLoader scope={scope} type={type} />
-      <Dimmer.Dimmable dimmed={loading}>
-        {type === "domain" ? (
-          <DomainDropdown field={field} onChange={onChange} />
-        ) : (
+    <Dimmer.Dimmable dimmed={loading}>
+      {type === "domain" ? (
+        <DomainDropdown field={field} onChange={onChange} scope={scope} />
+      ) : (
+        <>
+          <DropdownDataLoader type={type} />
           <StandardDropdown field={field} onChange={onChange} />
-        )}
-        <Dimmer active={loading} inverted>
-          <Loader />
-        </Dimmer>
-      </Dimmer.Dimmable>
-    </>
+        </>
+      )}
+      <Dimmer active={loading} inverted>
+        <Loader />
+      </Dimmer>
+    </Dimmer.Dimmable>
   );
 };
 
 DropdownField.propTypes = {
-  field: PropTypes.object,
+  field: PropTypes.object.isRequired,
   loading: PropTypes.bool,
   onChange: PropTypes.func,
   scope: PropTypes.string,

package/src/components/widgets/__tests__/DomainPreview.spec.js

@@ -6,7 +6,7 @@ import { DomainPreview } from "../DomainPreview";
 // see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
 
 describe("<DomainPreview />", () => {
-  const props = { value: { id: 1, external_id: "external_id" } };
+  const props = { domains: [{ id: 1, external_id: "external_id" }] };
 
   it("matches the latest snapshot when value is object", () => {
     const wrapper = shallow(<DomainPreview {...props} />);
@@ -15,10 +15,10 @@ describe("<DomainPreview />", () => {
 
   it("matches the latest snapshot when value is array", () => {
     const props = {
-      value: [
+      domains: [
         { id: 1, external_id: "external_id", name: "name" },
-        { id: 2, external_id: "external_id1", name: "name1" }
-      ]
+        { id: 2, external_id: "external_id1", name: "name1" },
+      ],
     };
     const wrapper = shallow(<DomainPreview {...props} />);
     expect(wrapper).toMatchSnapshot();

package/src/components/widgets/__tests__/DropdownDataLoader.spec.js

@@ -3,31 +3,13 @@ import { shallow } from "enzyme";
 import { DropdownDataLoader } from "../DropdownDataLoader";
 
 describe("<DropdownDataLoader />", () => {
-  const scope = "bg";
-  const type = "domain";
   const props = {
-    scope,
-    type
+    scope: "dd",
+    type: "system",
   };
 
-  it("matches the latest snapshot when type domain", () => {
-    const wrapper = shallow(<DropdownDataLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
   it("matches the latest snapshot when type system", () => {
-    const wrapper = shallow(
-      <DropdownDataLoader {...{ ...props, type: "system" }} />
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("calls loader with proper props when type is domain", () => {
     const wrapper = shallow(<DropdownDataLoader {...props} />);
-    expect(wrapper.find("lazy").prop("filter")).toBe("all");
-    expect(wrapper.find("lazy").prop("actions")).toEqual([
-      "update_business_concept",
-      "show"
-    ]);
+    expect(wrapper).toMatchSnapshot();
   });
 });

package/src/components/widgets/__tests__/DropdownField.spec.js

@@ -1,12 +1,13 @@
 import _ from "lodash/fp";
 import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
+import defaultMessages from "@truedat/test/messages";
+import { waitFor } from "@testing-library/react";
 import { DropdownField } from "../DropdownField";
 
 // workaround for enzyme issue with React.useContext
 // see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
 
 describe("<DropdownField />", () => {
   const label = "label";
@@ -27,83 +28,47 @@ describe("<DropdownField />", () => {
     options,
     onChange,
     scope,
+    loading: false,
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<DropdownField {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("matches the latest snapshot when type system", () => {
-    const field = { ...fieldData, type: "system" };
-    const wrapper = shallow(<DropdownField {...{ ...props, field }} />);
-    expect(wrapper).toMatchSnapshot();
-  });
+  const domains = [{ id: "2", name: "Truedat", parentId: "", actions: [] }];
+  const domainsMock = {
+    request: { query: DOMAINS_QUERY, variables: {} },
+    result: { data: { domains: domains } },
+  };
 
-  it("matches the latest snapshot when type domain", () => {
-    const field = { ...fieldData, type: "domain" };
-    const wrapper = shallow(<DropdownField {...{ ...props, field }} />);
-    expect(wrapper).toMatchSnapshot();
-  });
+  const messages = {
+    en: { ...defaultMessages.en },
+  };
+  const renderOpts = {
+    mocks: [domainsMock],
+    messages,
+    fallback: "lazy",
+  };
 
-  it("renders loader when type system", () => {
-    const field = { ...fieldData, type: "system" };
-    const wrapper = shallow(<DropdownField {...{ ...props, field }} />);
-    expect(wrapper.find("DropdownDataLoader").prop("type")).toBe("system");
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(<DropdownField {...props} />);
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
   });
 
-  it("renders loader when type domain", () => {
+  it("matches the latest snapshot when type domain", async () => {
     const field = { ...fieldData, type: "domain" };
-    const wrapper = shallow(<DropdownField {...{ ...props, field }} />);
-    expect(wrapper.find("DropdownDataLoader").prop("type")).toBe("domain");
+    const { container, queryByText } = render(
+      <DropdownField {...{ ...props, field }} />
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
   });
 
-  it("renders StandardDropdown when type is system", () => {
+  it("renders loader when type system", async () => {
     const field = { ...fieldData, type: "system" };
-    const wrapper = shallow(<DropdownField {...{ ...props, field }} />);
-    expect(wrapper.find("Connect(StandardDropdown)").prop("field")).toEqual(
-      field
+    const { container, queryByText } = render(
+      <DropdownField {...{ ...props, field }} />,
+      renderOpts
     );
-  });
 
-  it("renders DomainDropdown when type is domain", () => {
-    const field = { ...fieldData, type: "domain" };
-    const wrapper = shallow(<DropdownField {...{ ...props, field }} />);
-    expect(wrapper.find("Connect(DomainDropdown)").prop("field")).toEqual(
-      field
-    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
   });
-
-  // it("gives proper dropdown props depending on cardinality and value", () => {
-  //   const wrapper = shallow(<DropdownField {...props} />);
-  //   expect(wrapper.find("FormDropdown").prop("value")).toBe(
-  //     _.prop("value")(fieldData)
-  //   );
-  //   expect(wrapper.find("FormDropdown").prop("multiple")).toBeFalsy();
-  //   expect(wrapper.find("FormDropdown").prop("options")).toEqual([
-  //     { key: 0, text: "selector.no.selection", value: null },
-  //     { key: 1, text: "Foo", value: "Foo" },
-  //     { key: 2, text: "Bar", value: "Bar" }
-  //   ]);
-
-  //   const multiple = { ...fieldData, cardinality: "*", value: [{ id: 1 }] };
-  //   wrapper.setProps({ ...props, field: multiple });
-
-  //   expect(wrapper.find("FormDropdown").prop("value")).toEqual([{ id: 1 }]);
-  //   expect(wrapper.find("FormDropdown").prop("multiple")).toBeTruthy();
-  //   expect(wrapper.find("FormDropdown").prop("options")).toEqual([
-  //     { key: 0, text: "Foo", value: "Foo" },
-  //     { key: 1, text: "Bar", value: "Bar" }
-  //   ]);
-
-  //   const withoutValue = { ...fieldData, cardinality: "*", value: null };
-  //   wrapper.setProps({ ...props, field: withoutValue });
-
-  //   expect(wrapper.find("FormDropdown").prop("value")).toEqual([]);
-  //   expect(wrapper.find("FormDropdown").prop("multiple")).toBeTruthy();
-  //   expect(wrapper.find("FormDropdown").prop("options")).toEqual([
-  //     { key: 0, text: "Foo", value: "Foo" },
-  //     { key: 1, text: "Bar", value: "Bar" }
-  //   ]);
-  // });
 });

package/src/components/widgets/__tests__/__snapshots__/DomainPreview.spec.js.snap

@@ -1,36 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<DomainPreview /> matches the latest snapshot when value is array 1`] = `
-<Fragment>
+Array [
   <Label
-    key="0"
+    key="1"
   >
     <Link
       to="/domains/1"
     >
       name
     </Link>
-  </Label>
+  </Label>,
   <Label
-    key="1"
+    key="2"
   >
     <Link
       to="/domains/2"
     >
       name1
     </Link>
-  </Label>
-</Fragment>
+  </Label>,
+]
 `;
 
 exports[`<DomainPreview /> matches the latest snapshot when value is object 1`] = `
-<Fragment>
-  <Label
-    key="0"
-  >
-    <Link
-      to="/domains/1"
-    />
-  </Label>
-</Fragment>
+<Label
+  key="1"
+>
+  <Link
+    to="/domains/1"
+  />
+</Label>
 `;

package/src/components/widgets/__tests__/__snapshots__/DropdownDataLoader.spec.js.snap

@@ -1,21 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<DropdownDataLoader /> matches the latest snapshot when type domain 1`] = `
-<Fragment>
-  <lazy
-    actions={
-      Array [
-        "update_business_concept",
-        "show",
-      ]
-    }
-    filter="all"
-  />
-</Fragment>
-`;
-
-exports[`<DropdownDataLoader /> matches the latest snapshot when type system 1`] = `
-<Fragment>
-  <lazy />
-</Fragment>
-`;
+exports[`<DropdownDataLoader /> matches the latest snapshot when type system 1`] = `<lazy />`;

package/src/components/widgets/__tests__/__snapshots__/DropdownField.spec.js.snap

@@ -1,83 +1,177 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<DropdownField /> matches the latest snapshot 1`] = `
-<Fragment>
-  <DropdownDataLoader
-    scope="bg"
-  />
-  <DimmerDimmable>
-    <Connect(StandardDropdown)
-      field={
-        Object {
-          "cardinality": "1",
-          "label": "label",
-          "name": "name",
-          "value": "Foo",
-        }
-      }
-      onChange={[MockFunction]}
-    />
-    <Dimmer
-      inverted={true}
+<div>
+  <div
+    class="dimmable"
+  >
+    <div
+      class="field"
     >
-      <Loader />
-    </Dimmer>
-  </DimmerDimmable>
-</Fragment>
+      <div
+        aria-expanded="false"
+        class="ui fluid search selection dropdown"
+        name="name"
+        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 one...
+        </div>
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          aria-multiselectable="false"
+          class="menu transition"
+          role="listbox"
+        >
+          <div
+            aria-checked="false"
+            aria-selected="true"
+            class="selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              No selection
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ui inverted dimmer"
+    >
+      <div
+        class="content"
+      >
+        <div
+          class="ui loader"
+        />
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<DropdownField /> matches the latest snapshot when type domain 1`] = `
-<Fragment>
-  <DropdownDataLoader
-    scope="bg"
-    type="domain"
-  />
-  <DimmerDimmable>
-    <Connect(DomainDropdown)
-      field={
-        Object {
-          "cardinality": "1",
-          "label": "label",
-          "name": "name",
-          "type": "domain",
-          "value": "Foo",
-        }
-      }
-      onChange={[MockFunction]}
-    />
-    <Dimmer
-      inverted={true}
+<div>
+  <div
+    class="dimmable"
+  >
+    <div
+      class="field"
+    >
+      <div
+        class="ui loading icon input"
+      >
+        <input
+          type="text"
+        />
+        <i
+          aria-hidden="true"
+          class="spinner icon"
+        />
+      </div>
+    </div>
+    <div
+      class="ui inverted dimmer"
     >
-      <Loader />
-    </Dimmer>
-  </DimmerDimmable>
-</Fragment>
+      <div
+        class="content"
+      >
+        <div
+          class="ui loader"
+        />
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
-exports[`<DropdownField /> matches the latest snapshot when type system 1`] = `
-<Fragment>
-  <DropdownDataLoader
-    scope="bg"
-    type="system"
-  />
-  <DimmerDimmable>
-    <Connect(StandardDropdown)
-      field={
-        Object {
-          "cardinality": "1",
-          "label": "label",
-          "name": "name",
-          "type": "system",
-          "value": "Foo",
-        }
-      }
-      onChange={[MockFunction]}
-    />
-    <Dimmer
-      inverted={true}
+exports[`<DropdownField /> renders loader when type system 1`] = `
+<div>
+  <div
+    class="dimmable"
+    style=""
+  >
+    <div
+      class="field"
+    >
+      <div
+        aria-expanded="false"
+        class="ui fluid search selection dropdown"
+        name="name"
+        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 one...
+        </div>
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          aria-multiselectable="false"
+          class="menu transition"
+          role="listbox"
+        >
+          <div
+            aria-checked="false"
+            aria-selected="true"
+            class="selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              No selection
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ui inverted dimmer"
     >
-      <Loader />
-    </Dimmer>
-  </DimmerDimmable>
-</Fragment>
+      <div
+        class="content"
+      >
+        <div
+          class="ui loader"
+        />
+      </div>
+    </div>
+  </div>
+</div>
 `;

package/src/selectors/getOptions.js

@@ -11,26 +11,10 @@ const transformValues = (systems) =>
     }))
   )(systems);
 
-const getValuesFromProps = (_state, props) =>
-  _.path("field.parsedValues")(props);
-
-const getValuesFromState = (state, _props) => _.pick(["systems"])(state);
-
-const getType = (_state, props) => _.path("field.type")(props);
-
-const getOptions = (type, valuesFromProps, valuesFromState) =>
-  type == "system"
-    ? transformValues(_.prop("systems")(valuesFromState))
-    : valuesFromProps;
-
 export const getDropdownOptions = createSelector(
-  getType,
-  getValuesFromProps,
-  getValuesFromState,
-  (type, valuesFromProps, valuesFromState) => {
-    const options = getOptions(type, valuesFromProps, valuesFromState);
-    return _.sortBy("text")(options);
-  }
+  ({ systems }, { field }) =>
+    field?.type === "system" ? transformValues(systems) : field?.parsedValues,
+  _.sortBy("text")
 );
 
 export const makeGetDropdownOptions = () => getDropdownOptions;

package/src/templates/components/templateForm/DependentDomain.js

@@ -1,9 +1,10 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Form, List } from "semantic-ui-react";
+import { useQuery } from "@apollo/client";
 import { useIntl } from "react-intl";
+import { Form, List } from "semantic-ui-react";
+import { DOMAINS_QUERY } from "../../../api/queries";
 import SwitchSegment from "./SwitchSegment";
 
 export const DependentDomain = ({
@@ -13,9 +14,10 @@ export const DependentDomain = ({
   onChange,
   onDefaultValueChange,
   values,
+  loading,
 }) => {
   const { formatMessage } = useIntl();
-  const selectedDomains = _.flow(_.keys, _.map(_.toInteger))(values);
+  const selectedDomains = _.keys(values);
   const handleChange = (e, { value }) => onChange({ ...values, [value]: [] });
 
   const handleContentChange = (id, contentValues) =>
@@ -31,7 +33,8 @@ export const DependentDomain = ({
 
   const options = _.flow(
     _.reject(({ id }) => _.includes(id)(selectedDomains)),
-    _.map(({ id, name }) => ({ text: name, value: id }))
+    _.map(({ id, name }) => ({ text: name, value: id })),
+    _.sortBy("text")
   )(domains);
 
   return (
@@ -54,6 +57,7 @@ export const DependentDomain = ({
       )(values)}
       <List.Item>
         <Form.Dropdown
+          loading={loading}
           selection
           placeholder={formatMessage({
             id: "template.field.values.domain_field",
@@ -74,8 +78,21 @@ DependentDomain.propTypes = {
   onChange: PropTypes.func,
   onDefaultValueChange: PropTypes.func,
   values: PropTypes.object,
+  loading: PropTypes.bool,
 };
 
-const mapStateToProps = (state) => ({ domains: state.domains });
+export const DependentDomainLoader = (props) => {
+  const { loading, error, data } = useQuery(DOMAINS_QUERY, {
+    variables: { action: "viewDomain" },
+  });
+  if (error) return null;
+  return (
+    <DependentDomain
+      {...props}
+      domains={data?.domains || []}
+      loading={loading}
+    />
+  );
+};
 
-export default connect(mapStateToProps)(DependentDomain);
+export default DependentDomainLoader;

package/src/templates/components/templateForm/__tests__/__snapshots__/DependentDomain.spec.js.snap

@@ -103,6 +103,19 @@ exports[`<DependentDomain /> matches the latest snapshot 1`] = `
               class="selected item"
               role="option"
               style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                d1
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
             >
               <span
                 class="text"