@truedat/bg 4.38.4 → 4.38.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.38.8] 2022-02-22
+
+### Added
+
+- [TD-4481] Allow domain change on business concept
+
 ## [4.37.4] 2022-02-04
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "4.38.4",
+  "version": "4.38.8",
   "description": "Truedat Web Business Glossary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.38.4",
+    "@truedat/test": "4.38.8",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -83,8 +83,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.38.4",
-    "@truedat/df": "4.38.4",
+    "@truedat/core": "4.38.8",
+    "@truedat/df": "4.38.8",
     "file-saver": "^2.0.5",
     "moment": "^2.24.0",
     "path-to-regexp": "^1.7.0",
@@ -104,5 +104,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "2e83dbac040e237b3f688782b40b6bd35edbd148"
+  "gitHead": "66f56f3fe3e1b5eb0b18379f2d141b1433bf82c1"
 }

package/src/concepts/components/ConceptActions.js

@@ -228,6 +228,7 @@ const hiddenActions = [
   "upload",
   "bulk_update",
   "set_confidential",
+  "update_domain",
 ];
 
 const editUrl = (conceptActions, concept) =>

package/src/concepts/components/ConceptHeader.js

@@ -16,12 +16,12 @@ export const ConceptHeader = ({
   setConfidentialConcept,
   share,
   domain,
-  template
+  template,
 }) => {
   const { formatMessage } = useIntl();
   const path = linkTo.CONCEPT_VERSION({
     business_concept_id: _.prop("business_concept_id")(concept),
-    id: "current"
+    id: "current",
   });
   const name = concept?.name;
   const description = concept?.description;
@@ -78,15 +78,15 @@ ConceptHeader.propTypes = {
   share: PropTypes.bool,
   concept: PropTypes.object,
   domain: PropTypes.object,
-  template: PropTypes.object
+  template: PropTypes.object,
 };
 
 const mapStateToProps = ({ concept, conceptActions, conceptPermissions }) => ({
-  share: _.has("share")(conceptPermissions),
+  share: _.prop("share")(conceptPermissions),
   concept,
   setConfidentialConcept: _.prop("set_confidential")(conceptActions),
   domain: concept.domain || {},
-  template: concept.template || {}
+  template: concept.template || {},
 });
 
 export default connect(mapStateToProps)(ConceptHeader);

package/src/concepts/components/ConceptManageDomain.js

@@ -0,0 +1,87 @@
+import _ from "lodash/fp";
+import React from "react";
+import { Button, Container, Form, Header } from "semantic-ui-react";
+import { connect } from "react-redux";
+import { useForm, Controller } from "react-hook-form";
+import { useIntl } from "react-intl";
+import PropTypes from "prop-types";
+import DomainDropdownSelector from "../../taxonomy/components/DomainDropdownSelector";
+import { getDomainConceptSelectorOptions } from "../../taxonomy/selectors/getDomainsConcept";
+import { conceptAction } from "../routines";
+
+const actionKey = "update_domain";
+
+export const ConceptManageDomain = ({
+  domainOptions,
+  conceptAction,
+  action,
+  setToDomain,
+}) => {
+  const { formatMessage } = useIntl();
+  const { handleSubmit, control, formState } = useForm({
+    mode: "all",
+    defaultValues: {
+      setToDomain: _.prop("id")(setToDomain),
+    },
+  });
+  const { isDirty, isValid } = formState;
+  const onSubmit = ({ setToDomain }) => {
+    conceptAction({
+      action: actionKey,
+      ...action,
+      domain_id: setToDomain,
+    });
+  };
+
+  return (
+    <Container style={{ width: "400px" }}>
+      <Header
+        as="h2"
+        content={formatMessage({
+          id: "concept.changeDomain.header",
+        })}
+      />
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <Controller
+          control={control}
+          name="setToDomain"
+          render={({ onBlur, onChange, value }, { invalid }) => (
+            <DomainDropdownSelector
+              domainOptions={domainOptions}
+              name="setToDomain"
+              clearable={false}
+              error={invalid}
+              label={formatMessage({ id: "concept.changeDomain.label" })}
+              onBlur={onBlur}
+              required
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
+            />
+          )}
+        />
+        <div className="actions">
+          <Button
+            type="submit"
+            disabled={!isDirty || !isValid}
+            primary
+            content={formatMessage({ id: "conceptDomain.actions.update" })}
+          />
+        </div>
+      </Form>
+    </Container>
+  );
+};
+
+ConceptManageDomain.propTypes = {
+  domainOptions: PropTypes.array,
+  conceptAction: PropTypes.func,
+  setToDomain: PropTypes.array,
+};
+
+const mapStateToProps = (state) => ({
+  domainOptions: getDomainConceptSelectorOptions(state),
+  action: _.prop(actionKey)(state.conceptActions),
+  setToDomain: state.concept.domain,
+});
+
+export default connect(mapStateToProps, { conceptAction })(ConceptManageDomain);

package/src/concepts/components/ConceptManageDomainPopup.js

@@ -0,0 +1,50 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
+import { Button, Icon, Popup } from "semantic-ui-react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import ConceptManageDomain from "./ConceptManageDomain";
+
+export const ConceptManageDomainPopup = ({ update_domain, saving }) => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (saving === false) {
+      setOpen(false);
+    }
+  }, [saving]);
+
+  return update_domain ? (
+    <Popup
+      on="click"
+      basic
+      flowing
+      content={<ConceptManageDomain />}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      open={open}
+      position="bottom right"
+      size="large"
+      positionFixed
+      trigger={
+        <Button
+          basic
+          icon={<Icon name={"pencil alternate"} />}
+          style={{ boxShadow: "none" }}
+        />
+      }
+    />
+  ) : null;
+};
+
+ConceptManageDomainPopup.propTypes = {
+  update_domain: PropTypes.bool,
+  saving: PropTypes.bool,
+};
+
+export const mapStateToProps = ({
+  conceptActions,
+  updatingDomain: saving,
+}) => ({ update_domain: _.has("update_domain")(conceptActions), saving });
+
+export default connect(mapStateToProps)(ConceptManageDomainPopup);

package/src/concepts/components/ConceptTaxonomy.js

@@ -6,6 +6,11 @@ import { List, Header, Segment } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { getConceptDomainPath } from "../selectors";
 import DomainItem from "../../taxonomy/components/DomainItem";
+import ConceptManageDomainPopup from "./ConceptManageDomainPopup";
+
+const DomainsConceptLoader = React.lazy(() =>
+  import("../../taxonomy/components/DomainsConceptLoader")
+);
 
 export const ConceptTaxonomy = ({ domainPath }) =>
   _.negate(_.isEmpty)(domainPath) && (
@@ -13,6 +18,9 @@ export const ConceptTaxonomy = ({ domainPath }) =>
       <Header as="h3" dividing>
         <FormattedMessage id="concepts.taxonomy" defaultMessage="Taxonomía" />
       </Header>
+      <DomainsConceptLoader actions="manage_business_concepts_domain" />
+      <ConceptManageDomainPopup conceptAction="concepts.actions.edit" />
+
       <List horizontal>
         {_.map.convert({ cap: false })((domain, i) => (
           <DomainItem
@@ -27,11 +35,11 @@ export const ConceptTaxonomy = ({ domainPath }) =>
   );
 
 ConceptTaxonomy.propTypes = {
-  domainPath: PropTypes.array
+  domainPath: PropTypes.array,
 };
 
-const mapStateToProps = state => ({
-  domainPath: getConceptDomainPath(state)
+const mapStateToProps = (state) => ({
+  domainPath: getConceptDomainPath(state),
 });
 
 export default connect(mapStateToProps)(ConceptTaxonomy);

package/src/concepts/components/__tests__/ConceptManageDomain.spec.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { ConceptManageDomain } from "../ConceptManageDomain";
+
+describe("<ConceptManageDomain />", () => {
+  // const id = 5;
+  const domainOptions = [
+    { id: 1, name: "foo", level: 0 },
+    { id: 2, name: "bar", level: 0 },
+    { id: 3, name: "baz", level: 0 },
+  ];
+  const conceptAction = jest.fn();
+  // const saving = false;
+  const setToDomain = [{ id: 2, name: "bar" }];
+  const props = {
+    domainOptions,
+    // id,
+    conceptAction,
+    // saving,
+    setToDomain,
+  };
+  const renderOpts = {
+    messages: {
+      en: {
+        "concept.changeDomain.header": "edit domain",
+        "concept.changeDomain.label": "domain",
+        "conceptDomain.actions.update": "update",
+        "domain.selector.label": "domain",
+        "domain.selector.placeholder": "select a domain...",
+      },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <ConceptManageDomain {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/concepts/components/__tests__/ConceptManageDomainPopup.spec.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { mount } from "enzyme";
+import { intl } from "@truedat/test/intl-stub";
+import { ConceptManageDomainPopup } from "../ConceptManageDomainPopup";
+
+// workaround for enzyme issue with React.useContext
+// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
+jest.spyOn(React, "useContext").mockImplementation(() => intl);
+jest.mock("../ConceptManageDomain");
+
+describe("<ConceptManageDomainPopup />", () => {
+  const props = {
+    saving: false,
+    update_domain: true,
+  };
+
+  it("matches the latest snapshot", () => {
+    const wrapper = mount(<ConceptManageDomainPopup {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("manages open and close popup", () => {
+    const wrapper = mount(<ConceptManageDomainPopup {...props} />);
+    wrapper.setProps({ saving: true, update_domain: true });
+    expect(wrapper.find("Popup").prop("open")).toBeFalsy();
+    wrapper.find("Popup").find("Portal").find("Button").simulate("click");
+    expect(wrapper.find("Popup").prop("open")).toBeTruthy();
+    wrapper.find("Popup").find("Portal").find("Button").simulate("click");
+    expect(wrapper.find("Popup").prop("open")).toBeFalsy();
+    wrapper.find("Popup").find("Portal").find("Button").simulate("click");
+    expect(wrapper.find("Popup").prop("open")).toBeTruthy();
+    wrapper.setProps({ saving: false, update_domain: true });
+    wrapper.update();
+    expect(wrapper.find("Popup").prop("open")).toBeFalsy();
+  });
+});

package/src/concepts/components/__tests__/__snapshots__/ConceptManageDomain.spec.js.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ConceptManageDomain /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui container"
+    style="width: 400px;"
+  >
+    <h2
+      class="ui header"
+    >
+      edit domain
+    </h2>
+    <form
+      class="ui form"
+    >
+      <div
+        class="required field"
+      >
+        <label>
+          domain
+        </label>
+        <div
+          class="field"
+        >
+          <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 default text"
+              role="alert"
+            >
+              select a domain...
+            </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;"
+              >
+                <div
+                  class="text"
+                  style="margin-left: 0px;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="icon"
+                  />
+                  foo
+                </div>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <div
+                  class="text"
+                  style="margin-left: 0px;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="icon"
+                  />
+                  bar
+                </div>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <div
+                  class="text"
+                  style="margin-left: 0px;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="icon"
+                  />
+                  baz
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="actions"
+      >
+        <button
+          class="ui primary disabled button"
+          disabled=""
+          tabindex="-1"
+          type="submit"
+        >
+          update
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+`;

package/src/concepts/components/__tests__/__snapshots__/ConceptManageDomainPopup.spec.js.snap

@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ConceptManageDomainPopup /> matches the latest snapshot 1`] = `
+<ConceptManageDomainPopup
+  saving={false}
+  update_domain={true}
+>
+  <Popup
+    basic={true}
+    content={<Memo(Connect(ConceptManageDomain)) />}
+    disabled={false}
+    eventsEnabled={true}
+    flowing={true}
+    on="click"
+    onClose={[Function]}
+    onOpen={[Function]}
+    open={false}
+    pinned={false}
+    popperModifiers={Array []}
+    position="bottom right"
+    positionFixed={true}
+    size="large"
+    trigger={
+      <Button
+        as="button"
+        basic={true}
+        icon={
+          <Icon
+            as="i"
+            name="pencil alternate"
+          />
+        }
+        style={
+          Object {
+            "boxShadow": "none",
+          }
+        }
+      />
+    }
+  >
+    <Portal
+      closeOnDocumentClick={true}
+      closeOnEscape={true}
+      closeOnTriggerClick={true}
+      eventPool="default"
+      onClose={[Function]}
+      onMount={[Function]}
+      onOpen={[Function]}
+      onUnmount={[Function]}
+      open={false}
+      openOnTriggerClick={true}
+      trigger={
+        <Button
+          as="button"
+          basic={true}
+          icon={
+            <Icon
+              as="i"
+              name="pencil alternate"
+            />
+          }
+          style={
+            Object {
+              "boxShadow": "none",
+            }
+          }
+        />
+      }
+      triggerRef={
+        Object {
+          "current": <button
+            class="ui basic icon button"
+            style="box-shadow: none;"
+          >
+            <i
+              aria-hidden="true"
+              class="pencil alternate icon"
+            />
+          </button>,
+        }
+      }
+    >
+      <Ref
+        innerRef={[Function]}
+      >
+        <RefFindNode
+          innerRef={[Function]}
+        >
+          <Button
+            as="button"
+            basic={true}
+            icon={
+              <Icon
+                as="i"
+                name="pencil alternate"
+              />
+            }
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            style={
+              Object {
+                "boxShadow": "none",
+              }
+            }
+          >
+            <Ref
+              innerRef={
+                Object {
+                  "current": <button
+                    class="ui basic icon button"
+                    style="box-shadow: none;"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="pencil alternate icon"
+                    />
+                  </button>,
+                }
+              }
+            >
+              <RefFindNode
+                innerRef={
+                  Object {
+                    "current": <button
+                      class="ui basic icon button"
+                      style="box-shadow: none;"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="pencil alternate icon"
+                      />
+                    </button>,
+                  }
+                }
+              >
+                <button
+                  className="ui basic icon button"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  style={
+                    Object {
+                      "boxShadow": "none",
+                    }
+                  }
+                >
+                  <Icon
+                    as="i"
+                    name="pencil alternate"
+                  >
+                    <i
+                      aria-hidden="true"
+                      className="pencil alternate icon"
+                      onClick={[Function]}
+                    />
+                  </Icon>
+                </button>
+              </RefFindNode>
+            </Ref>
+          </Button>
+        </RefFindNode>
+      </Ref>
+    </Portal>
+  </Popup>
+</ConceptManageDomainPopup>
+`;

package/src/concepts/components/__tests__/__snapshots__/ConceptTaxonomy.spec.js.snap

@@ -11,6 +11,12 @@ exports[`<ConceptTaxonomy /> matches the latest snapshot 1`] = `
       id="concepts.taxonomy"
     />
   </Header>
+  <lazy
+    actions="manage_business_concepts_domain"
+  />
+  <Connect(ConceptManageDomainPopup)
+    conceptAction="concepts.actions.edit"
+  />
   <List
     horizontal={true}
   >

package/src/concepts/reducers/index.js

@@ -28,6 +28,7 @@ import { conceptUserFilters } from "./conceptUserFilters";
 import { conceptSelectedUserFilter } from "./conceptSelectedUserFilter";
 import { sharedToDomains } from "./sharedToDomains";
 import { savingSharedTo } from "./savingSharedTo";
+import { updatingDomain } from "./updatingDomain";
 
 export {
   bulkUpdateLoading,
@@ -59,7 +60,8 @@ export {
   conceptUpdating,
   conceptUserFilters,
   sharedToDomains,
-  savingSharedTo
+  savingSharedTo,
+  updatingDomain,
 };
 
 export * from "../relations/reducers";

package/src/concepts/reducers/updatingDomain.js

@@ -0,0 +1,16 @@
+import { conceptAction } from "../routines";
+
+const initialState = false;
+
+export const updatingDomain = (state = initialState, { type }) => {
+  switch (type) {
+    case conceptAction.TRIGGER:
+      return true;
+    case conceptAction.FULFILL:
+      return false;
+    default:
+      return state;
+  }
+};
+
+export default updatingDomain;

package/src/messages/en.js

@@ -13,6 +13,8 @@ export default {
     "Repeated Concept name",
   "bulkUpdate.no.concepts.body": "No concepts selected",
   "bulkUpdate.no.concepts.header": "Empty Search",
+  business_concept_to_field_master: "Master Relation",
+  "conceptDomain.actions.update": "Update",
   "conceptRelations.relationType.business_concept_to_field_master":
     "Master Relation",
   "concept.error.existing.business.concept":
@@ -54,6 +56,8 @@ export default {
   "concept.sharedTo.dropdown.label": "Domain",
   "concept.sharedTo.dropdown.placeholder": "Select domain",
   "concept.sharedTo.header": "Share in",
+  "concept.changeDomain.header": "Edit Domain",
+  "concept.changeDomain.label": "Domain",
   "conceptRelation.actions.create": "New Link",
   "conceptRelation.actions.delete.confirmation.content":
     "The Concept will be unlinked from the field. Are you sure?",

package/src/messages/es.js

@@ -15,6 +15,8 @@ export default {
     "Nombre de concepto repetido",
   "bulkUpdate.no.concepts.body": "Ningún concepto seleccionado",
   "bulkUpdate.no.concepts.header": "Búsqueda vacía",
+  business_concept_to_field_master: "Relación master",
+  "conceptDomain.actions.update": "Actualizar",
   "conceptRelations.relationType.business_concept_to_field_master":
     "Relación master",
   "concept.error.existing.business.concept":
@@ -56,6 +58,8 @@ export default {
   "concept.sharedTo.dropdown.label": "Dominios",
   "concept.sharedTo.dropdown.placeholder": "Seleccionar dominio",
   "concept.sharedTo.header": "Compartir en",
+  "concept.changeDomain.label": "Dominios",
+  "concept.changeDomain.header": "Editar Dominio",
   "conceptRelation.actions.create": "Crear vínculo",
   "conceptRelation.actions.delete.confirmation.content":
     "Se eliminará esta vinculación. ¿Estás seguro?",

package/src/taxonomy/components/DomainsConceptLoader.js

@@ -0,0 +1,43 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Loading } from "@truedat/core/components";
+import { clearDomainsConcept, fetchDomainsConcept } from "../routines";
+
+export class DomainsConceptLoader extends React.Component {
+  static propTypes = {
+    actions: PropTypes.string,
+    clearDomainsConcept: PropTypes.func,
+    fetchDomainsConcept: PropTypes.func,
+    filter: PropTypes.string,
+    domainsConceptLoading: PropTypes.bool,
+  };
+
+  componentDidMount() {
+    const { fetchDomainsConcept, actions, filter } = this.props;
+    fetchDomainsConcept({ actions, filter });
+  }
+
+  componentWillUnmount() {
+    const { clearDomainsConcept } = this.props;
+    clearDomainsConcept();
+  }
+
+  render() {
+    const { domainsConceptLoading } = this.props;
+    if (domainsConceptLoading) {
+      return <Loading />;
+    } else {
+      return null;
+    }
+  }
+}
+
+const mapStateToProps = ({ domainsConceptLoading }) => ({
+  domainsConceptLoading,
+});
+
+export default connect(mapStateToProps, {
+  clearDomainsConcept,
+  fetchDomainsConcept,
+})(DomainsConceptLoader);

package/src/taxonomy/components/__tests__/DomainsConceptLoader.spec.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { mount } from "enzyme";
+import { DomainsConceptLoader } from "../DomainsConceptLoader";
+
+const getProps = () => ({
+  clearDomainsConcept: jest.fn(),
+  domainsConceptLoading: false,
+  fetchDomainsConcept: jest.fn(),
+  actions: "create_ingest",
+  filter: "all",
+});
+
+describe("<DomainsConceptLoader />", () => {
+  it("calls fetchDomainsConcept when component mounts but not when it unmounts", () => {
+    const props = getProps();
+    const wrapper = mount(<DomainsConceptLoader {...props} />);
+    expect(props.fetchDomainsConcept).toHaveBeenCalledTimes(1);
+    wrapper.unmount();
+    expect(props.fetchDomainsConcept).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls clearDomainsConcept and clearDomainDefaultFilters when component unmounts but not when it mounts", () => {
+    const props = getProps();
+    const wrapper = mount(<DomainsConceptLoader {...props} />);
+    expect(props.clearDomainsConcept).toHaveBeenCalledTimes(0);
+    wrapper.unmount();
+    expect(props.clearDomainsConcept).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders Loading when domainLoading is true", () => {
+    const props = getProps();
+
+    const wrapper = mount(
+      <DomainsConceptLoader {...{ ...props, domainsConceptLoading: true }} />
+    );
+    expect(wrapper.find("Loading").length).toBe(1);
+  });
+});

package/src/taxonomy/reducers/__tests__/domainConceptLoading.spec.js

@@ -0,0 +1,26 @@
+import { fetchDomainsConcept } from "../../routines";
+import { domainsConceptLoading } from "..";
+
+const fooState = { foo: "bar" };
+
+describe("reducers: domainsConceptLoading", () => {
+  it("should provide the initial state", () => {
+    expect(domainsConceptLoading(undefined, {})).toBe(false);
+  });
+
+  it("should be true after receiving the fetchDomainsConcept.TRIGGER action", () => {
+    expect(
+      domainsConceptLoading(false, { type: fetchDomainsConcept.TRIGGER })
+    ).toBe(true);
+  });
+
+  it("should be false after receiving the fetchDomainsConcept.FULFILL action", () => {
+    expect(
+      domainsConceptLoading(true, { type: fetchDomainsConcept.FULFILL })
+    ).toBe(false);
+  });
+
+  it("should ignore unhandled actions", () => {
+    expect(domainsConceptLoading(fooState, { type: "FOO" })).toBe(fooState);
+  });
+});

package/src/taxonomy/reducers/__tests__/domainsConcept.spec.js

@@ -0,0 +1,30 @@
+import { fetchDomainsConcept } from "../../routines";
+import { domainsConcept } from "..";
+
+const fooState = { foo: "bar" };
+
+describe("reducers: domainsConcept", () => {
+  const initialState = [];
+
+  it("should provide the initial state", () => {
+    expect(domainsConcept(undefined, {})).toEqual(initialState);
+  });
+
+  it("should handle the SUCCESS action", () => {
+    const data = [
+      { id: 1, name: "Domain 1", description: "Desc 1" },
+      { id: 2, name: "Domain 2", description: "Desc 2", parent_id: 1 },
+    ];
+
+    expect(
+      domainsConcept(fooState, {
+        type: fetchDomainsConcept.SUCCESS,
+        payload: { data: { data } },
+      })
+    ).toMatchObject(data);
+  });
+
+  it("should ignore unknown actions", () => {
+    expect(domainsConcept(fooState, { type: "FOO" })).toBe(fooState);
+  });
+});

package/src/taxonomy/reducers/domainsConcept.js

@@ -0,0 +1,19 @@
+import _ from "lodash/fp";
+import { fetchDomainsConcept, clearDomainsConcept } from "../routines";
+
+const initialState = [];
+
+const caseInsensitiveName = ({ name }) => _.toLower(name);
+
+export const domainsConcept = (state = initialState, { type, payload }) => {
+  switch (type) {
+    case fetchDomainsConcept.SUCCESS:
+      const { data } = payload;
+      const collection = _.prop("data")(data);
+      return _.sortBy(caseInsensitiveName)(collection);
+    case clearDomainsConcept.TRIGGER:
+      return initialState;
+    default:
+      return state;
+  }
+};

package/src/taxonomy/reducers/domainsConceptLoading.js

@@ -0,0 +1,12 @@
+import { fetchDomainsConcept } from "../routines";
+
+export const domainsConceptLoading = (state = false, { type }) => {
+  switch (type) {
+    case fetchDomainsConcept.TRIGGER:
+      return true;
+    case fetchDomainsConcept.FULFILL:
+      return false;
+    default:
+      return state;
+  }
+};

package/src/taxonomy/reducers/index.js

@@ -5,6 +5,8 @@ import { domainLoading } from "./domainLoading";
 import { domainMemberDeleting } from "./domainMemberDeleting";
 import { domainMemberSaving } from "./domainMemberSaving";
 import { domainMembers } from "./domainMembers";
+import { domainsConcept } from "./domainsConcept";
+import { domainsConceptLoading } from "./domainsConceptLoading";
 import { domainConceptChildren } from "./domainConceptChildren";
 import { domainConceptChildrenLoading } from "./domainConceptChildrenLoading";
 import { domainMembersActions } from "./domainMembersActions";
@@ -26,6 +28,8 @@ export {
   domainMembersActions,
   domainMembers,
   domainMembersLoading,
+  domainsConcept,
+  domainsConceptLoading,
   domainConceptChildren,
   domainConceptChildrenLoading,
   domainRedirect,

package/src/taxonomy/routines.js

@@ -1,6 +1,8 @@
 import { createRoutine } from "redux-saga-routines";
 
 export const fetchDomains = createRoutine("FETCH_DOMAINS");
+export const fetchDomainsConcept = createRoutine("FETCH_CONCEPT_DOMAINS");
+export const clearDomainsConcept = createRoutine("CLEAR_DOMAINS");
 export const clearDomains = createRoutine("CLEAR_DOMAINS");
 export const filterDomains = createRoutine("FILTER_DOMAINS");
 export const clearDomainConceptChildren = createRoutine(

package/src/taxonomy/sagas/__tests__/fetchDomainsConcept.spec.js

@@ -0,0 +1,93 @@
+import { testSaga } from "redux-saga-test-plan";
+import { apiJson, JSON_OPTS } from "@truedat/core/services/api";
+import {
+  fetchDomainsConceptRequestSaga,
+  fetchDomainsConceptSaga,
+} from "../fetchDomainsConcept";
+import { fetchDomainsConcept } from "../../routines";
+import { API_DOMAINS } from "../../api";
+
+describe("sagas: fetchDomainsConceptRequestSaga", () => {
+  it("should invoke fetchDomainsConceptSaga on trigger", () => {
+    expect(() => {
+      testSaga(fetchDomainsConceptRequestSaga)
+        .next()
+        .takeLatest(fetchDomainsConcept.TRIGGER, fetchDomainsConceptSaga)
+        .finish()
+        .isDone();
+    }).not.toThrow();
+  });
+
+  it("should throw exception if an unhandled action is received", () => {
+    expect(() => {
+      testSaga(fetchDomainsConceptRequestSaga)
+        .next()
+        .takeLatest("FOO", fetchDomainsConceptSaga);
+    }).toThrow();
+  });
+});
+
+describe("sagas: fetchDomainsConceptSaga", () => {
+  const data = {
+    collection: [
+      { id: 1, name: "Top domain", description: "Desc" },
+      { id: 2, name: "Child domain", description: "Desc2", parent_id: 2 },
+    ],
+  };
+
+  it("should put a success action when a response is returned", () => {
+    const actions = undefined;
+    expect(() => {
+      testSaga(fetchDomainsConceptSaga, {})
+        .next()
+        .put(fetchDomainsConcept.request())
+        .next()
+        .call(apiJson, API_DOMAINS, JSON_OPTS)
+        .next({ data })
+        .put(fetchDomainsConcept.success({ data, actions }))
+        .next()
+        .put(fetchDomainsConcept.fulfill())
+        .next()
+        .isDone();
+    }).not.toThrow();
+  });
+
+  it("should handle actions in the payload", () => {
+    const actions = "show";
+    const filter = "foo";
+    const payload = { actions, filter };
+    const json_opts = { params: { actions, filter }, ...JSON_OPTS };
+    expect(() => {
+      testSaga(fetchDomainsConceptSaga, { payload })
+        .next()
+        .put(fetchDomainsConcept.request(payload))
+        .next()
+        .call(apiJson, API_DOMAINS, json_opts)
+        .next({ data })
+        .put(fetchDomainsConcept.success({ data, actions }))
+        .next()
+        .put(fetchDomainsConcept.fulfill())
+        .next()
+        .isDone();
+    }).not.toThrow();
+  });
+
+  it("should put a failure action when the call throws an error", () => {
+    const message = "Request failed";
+    const error = { message };
+
+    expect(() => {
+      testSaga(fetchDomainsConceptSaga, {})
+        .next()
+        .put(fetchDomainsConcept.request())
+        .next()
+        .call(apiJson, API_DOMAINS, JSON_OPTS)
+        .throw(error)
+        .put(fetchDomainsConcept.failure(message))
+        .next()
+        .put(fetchDomainsConcept.fulfill())
+        .next()
+        .isDone();
+    }).not.toThrow();
+  });
+});

package/src/taxonomy/sagas/fetchDomainsConcept.js

@@ -0,0 +1,37 @@
+import _ from "lodash/fp";
+import { call, put, takeLatest } from "redux-saga/effects";
+import { apiJson, JSON_OPTS } from "@truedat/core/services/api";
+import { fetchDomainsConcept } from "../routines";
+import { API_DOMAINS } from "../api";
+
+export function* fetchDomainsConceptSaga({ payload }) {
+  try {
+    const { actions, filter } = payload || {};
+    const json_opts = actions
+      ? {
+          ...JSON_OPTS,
+          params: {
+            actions: _.flow(_.castArray, _.join(","))(actions),
+            filter,
+          },
+        }
+      : JSON_OPTS;
+    const url = API_DOMAINS;
+    yield put(fetchDomainsConcept.request(payload));
+    const { data } = yield call(apiJson, url, json_opts);
+    yield put(fetchDomainsConcept.success({ data, actions }));
+  } catch (error) {
+    if (error.response) {
+      const { status, data } = error.response;
+      yield put(fetchDomainsConcept.failure({ status, data }));
+    } else {
+      yield put(fetchDomainsConcept.failure(error.message));
+    }
+  } finally {
+    yield put(fetchDomainsConcept.fulfill());
+  }
+}
+
+export function* fetchDomainsConceptRequestSaga() {
+  yield takeLatest(fetchDomainsConcept.TRIGGER, fetchDomainsConceptSaga);
+}

package/src/taxonomy/sagas/index.js

@@ -4,6 +4,7 @@ import { deleteDomainMemberRequestSaga } from "./deleteDomainMember";
 import { updateDomainMemberRequestSaga } from "./updateDomainMember";
 import { updateDomainRequestSaga } from "./updateDomain";
 import { deleteDomainRequestSaga } from "./deleteDomain";
+import { fetchDomainsConceptRequestSaga } from "./fetchDomainsConcept";
 import { fetchDomainConceptChildrenRequestSaga } from "./fetchDomainConceptChildren";
 import { fetchDomainMembersRequestSaga } from "./fetchDomainMembers";
 import { fetchDomainRequestSaga } from "./fetchDomain";
@@ -16,6 +17,7 @@ export {
   updateDomainMemberRequestSaga,
   updateDomainRequestSaga,
   deleteDomainRequestSaga,
+  fetchDomainsConceptRequestSaga,
   fetchDomainConceptChildrenRequestSaga,
   fetchDomainMembersRequestSaga,
   fetchDomainRequestSaga,
@@ -29,6 +31,7 @@ export default [
   updateDomainMemberRequestSaga(),
   updateDomainRequestSaga(),
   deleteDomainRequestSaga(),
+  fetchDomainsConceptRequestSaga(),
   fetchDomainConceptChildrenRequestSaga(),
   fetchDomainMembersRequestSaga(),
   fetchDomainRequestSaga(),

package/src/taxonomy/selectors/getDomainsConcept.js

@@ -0,0 +1,176 @@
+import _ from "lodash/fp";
+import { createSelector } from "reselect";
+import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
+import { getPrimaryActions, getSecondaryActions } from "./getDomainActions";
+import { getDomainGroups } from "./getDomainGroups";
+import { domainParentOptionsSelector } from "./domainParentOptionsSelector";
+
+const getDomain = ({ domain }) => domain;
+const getDomains = ({ domainsConcept }) => domainsConcept;
+const getDomainsFilter = ({ domainsFilter }) => domainsFilter;
+
+const isChildOf =
+  ({ id }) =>
+  ({ parent_id }) =>
+    parent_id === id;
+const isParentOf =
+  ({ parent_id }) =>
+  ({ id }) =>
+    parent_id === id;
+
+const hasNoParentIn = (domainsConcept) => (domain) =>
+  !_.some(isParentOf(domain))(domainsConcept);
+
+/**
+ * Creates a selector which returns the child domainsConcept of the currently selected domain.
+ * If no domain is currently selected, it returns the domainsConcept for which no parent is found.
+ */
+const getChildOrRootDomains = createSelector(
+  [getDomain, getDomains],
+  (domain, domainsConcept) => {
+    return _.isEmpty(domain)
+      ? _.filter(hasNoParentIn(domainsConcept))(domainsConcept)
+      : _.filter(isChildOf(domain))(domainsConcept);
+  }
+);
+
+const findParentsIn = (domainsConcept) => (child) =>
+  _.filter(isParentOf(child))(domainsConcept);
+const findChildrenIn = (domainsConcept) => (parent) =>
+  _.filter(isChildOf(parent))(domainsConcept);
+
+const findDescendents = (parents) => (domainsConcept) => {
+  const children = _.flatMap(findChildrenIn(domainsConcept))(parents);
+  return _.isEmpty(children)
+    ? children
+    : _.concat(children, findDescendents(children)(domainsConcept));
+};
+
+/**
+ * A selector to compute the descendents of the currently selected domain.
+ * If no domain is currently selected, all domainsConcept are returned.
+ */
+const getDescendents = createSelector(
+  [getDomain, getDomains],
+  (domain, domainsConcept) =>
+    _.isEmpty(domain)
+      ? domainsConcept
+      : findDescendents([domain])(domainsConcept)
+);
+
+const toSearchable = _.flow(_.deburr, _.toLower, _.trim);
+
+const isValidFilter = (filter) => !_.isEmpty(toSearchable(filter));
+
+const matchesFilter = (filter) =>
+  _.flow(
+    _.at(["name", "description"]),
+    _.map(toSearchable),
+    _.some(_.includes(toSearchable(filter)))
+  );
+
+/**
+ * A selector to compute the domainsConcept whose name or description matches a search string.
+ * If a domain is currently selected, the scope of the search will be limited to descendents
+ * of the currently selected domain. The search is case-insensitive and accent-insensitive.
+ */
+const getFilteredDomains = createSelector(
+  [getDescendents, getDomainsFilter],
+  (descendents, domainsFilter) =>
+    isValidFilter(domainsFilter)
+      ? _.filter(matchesFilter(domainsFilter))(descendents)
+      : []
+);
+
+const _getVisibleDomains = createSelector(
+  [getDomainsFilter, getFilteredDomains, getChildOrRootDomains],
+  (filter, filteredDomains, childOrRootDomains) =>
+    _.isEmpty(filter) ? childOrRootDomains : filteredDomains
+);
+
+/**
+ * A selector to compute the currently visible domainsConcept. If a filter is present, the selector
+ * returns descendent domainsConcept matching the filter within the scope of the currently selected
+ * domain (or within the scope of all domainsConcept if no domain is currently selected).
+ * If no filter is present, the selector returns domainsConcept without parents.
+ * Enriches domainsConcept with child count.
+ */
+const getVisibleDomains = createSelector(
+  [_getVisibleDomains, getDomains],
+  (visibleDomains, domainsConcept) =>
+    visibleDomains
+      .map((d) => ({
+        ...d,
+        children: _.filter(isChildOf(d))(domainsConcept),
+      }))
+      .map(({ children, ...d }) => ({ childCount: children.length, ...d }))
+);
+
+/**
+ * A selector to obtain unique domain types, sorted case-insensitively.
+ */
+const getDomainTypes = createSelector(
+  getDomains,
+  _.flow(_.map("type"), _.filter(_.isString), _.uniq, _.sortBy(_.toLower))
+);
+
+const findAncestorsIn = (domainsConcept) => (children) => {
+  const parents = _.flatMap(findParentsIn(domainsConcept))(children);
+  return _.isEmpty(parents)
+    ? parents
+    : _.concat(findAncestorsIn(domainsConcept)(parents), parents);
+};
+
+/**
+ * A selector to obtain the parents of the currently selected domain.
+ */
+const getAncestorDomains = createSelector(
+  [getDomains, getDomain],
+  (domainsConcept, domain) =>
+    _.isEmpty(domain) ? [] : findAncestorsIn(domainsConcept)([domain])
+);
+
+const reduceTaxonomy = (domainsConcept) => (domainsInLevel, level) => {
+  if (domainsConcept)
+    return _.reduce((acc, domain) => {
+      const children = findChildrenIn(domainsConcept)(domain);
+      return [
+        ...acc,
+        {
+          ...domain,
+          ancestors: findAncestorsIn(domainsConcept)([domain]),
+          descendents: findDescendents([domain])(domainsConcept),
+          children,
+          level,
+        },
+        ...reduceTaxonomy(domainsConcept)(children, level + 1),
+      ];
+    }, [])(domainsInLevel);
+  return [];
+};
+
+const getDomainConceptSelectorOptions = createSelector(
+  [getDomains],
+  (domainsConcept) => {
+    const roots = getChildOrRootDomains({
+      domainsConcept: _.sortBy(accentInsensitivePathOrder("name"))(
+        domainsConcept
+      ),
+    });
+    return reduceTaxonomy(domainsConcept)(roots, 0);
+  }
+);
+
+export {
+  domainParentOptionsSelector,
+  getChildOrRootDomains,
+  getDescendents,
+  getDomainConceptSelectorOptions,
+  getFilteredDomains,
+  getVisibleDomains,
+  getDomainGroups,
+  getDomainTypes,
+  getAncestorDomains,
+  getPrimaryActions,
+  getSecondaryActions,
+};