@truedat/bg 5.2.1 → 5.2.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [5.2.3] 2023-02-23
+
+### Added
+
+- [TD-4554] Concept links manager
+
 ## [5.1.1] 2023-02-10
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "5.2.1",
+  "version": "5.2.3",
   "description": "Truedat Web Business Glossary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "5.2.1",
+    "@truedat/test": "5.2.3",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -86,8 +86,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "5.2.1",
-    "@truedat/df": "5.2.1",
+    "@truedat/core": "5.2.3",
+    "@truedat/df": "5.2.3",
     "decode-uri-component": "^0.2.2",
     "file-saver": "^2.0.5",
     "moment": "^2.29.4",
@@ -110,5 +110,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "1f9ce2ad2fb29d1d8dc5ccb8940a7f573e7127bc"
+  "gitHead": "fecedbbb623fc091ced1eebf41bdcea30f2800fa"
 }

package/src/concepts/components/ConceptRoutes.js

@@ -6,13 +6,14 @@ import { connect } from "react-redux";
 import { Unauthorized } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
 import {
-  CONCEPTS,
+  CONCEPT_EDIT,
+  CONCEPT_LINKS_MANAGEMENT,
+  CONCEPT_VERSION,
   CONCEPTS_BULK_UPDATE,
   CONCEPTS_NEW,
   CONCEPTS_PENDING,
   CONCEPTS_SUBSCOPED,
-  CONCEPT_EDIT,
-  CONCEPT_VERSION,
+  CONCEPTS,
 } from "@truedat/core/routes";
 import { useIntl } from "react-intl";
 import Concept from "./Concept";
@@ -21,6 +22,7 @@ import ConceptEdit from "./ConceptEdit";
 import ConceptFiltersLoader from "./ConceptFiltersLoader";
 import ConceptUserFiltersLoader from "./ConceptUserFiltersLoader";
 import ConceptForm from "./ConceptForm";
+import ConceptsLinksManagement from "./ConceptsLinksManagement";
 import ConceptLoader from "./ConceptLoader";
 import Concepts from "./Concepts";
 import ConceptsBulkUpdate from "./ConceptsBulkUpdate";
@@ -50,6 +52,29 @@ export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
   };
   return (
     <>
+      <Route
+        exact
+        path={CONCEPT_LINKS_MANAGEMENT}
+        render={() =>
+          authorized ? (
+            <>
+              <RelationTagsLoader />
+              <ConceptsLinksManagement
+                header={formatMessage({
+                  id: "concepts.header.linksManager",
+                })}
+                subheader={formatMessage({
+                  id: "concepts.subheader.linksManager",
+                })}
+                icon="linkify"
+              />
+            </>
+          ) : (
+            <Unauthorized />
+          )
+        }
+      />
+
       <Route
         exact
         path={CONCEPTS_PENDING}
@@ -74,7 +99,6 @@ export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
           )
         }
       />
-
       <Route
         exact
         path={CONCEPTS_SUBSCOPED}

package/src/concepts/components/ConceptsLinksManagement.js

@@ -0,0 +1,326 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { connect } from "react-redux";
+import { Header, Icon, Segment, Grid, Message } from "semantic-ui-react";
+import {
+  makeTagOptionsSelector,
+  makeSearchQuerySelector,
+} from "@truedat/core/selectors";
+import {
+  clearStructures,
+  fetchStructures,
+  clearStructureFilters,
+  fetchStructureFilters,
+  resetStructureFilters,
+} from "@truedat/dd/routines";
+import { createRelation, deleteRelation } from "@truedat/core/routines";
+import ConceptSelector from "../relations/components/ConceptSelector";
+import { fetchConcepts } from "../routines";
+
+const TagTypeDropdownSelector = React.lazy(() =>
+  import("@truedat/lm/components/TagTypeDropdownSelector")
+);
+
+const StructureSelector = React.lazy(() =>
+  import("@truedat/dd/components/StructureSelector")
+);
+
+const linksDefaultFilters = {
+  current: [true],
+  status: ["pending_approval", "draft", "rejected", "published"],
+};
+
+const STATUS_PENDING = "pending";
+const STATUS_CREATED = "created";
+const STATUS_DELETED = "deleted";
+
+const LinkedMessage = ({
+  selectedConcept,
+  selectedStructure,
+  selectedTag,
+  status,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const messagesMap = {
+    [STATUS_PENDING]: formatMessage({ id: "concept.events.relation_creating" }),
+    [STATUS_DELETED]: formatMessage({ id: "concept.events.relation_deleted" }),
+    [STATUS_CREATED]: formatMessage({ id: "concept.events.relation_created" }),
+  };
+
+  return (
+    <Message success={status !== STATUS_PENDING} floating>
+      <Message.Header>{messagesMap[status]}</Message.Header>
+      <Message.List>
+        {selectedConcept ? (
+          <Message.Item>
+            {formatMessage({ id: "conceptRelations.concept" })}
+            {": "} {selectedConcept.name}
+          </Message.Item>
+        ) : null}
+        {selectedStructure ? (
+          <Message.Item>
+            {formatMessage({ id: "conceptRelations.structure" })}
+            {": "}
+            {selectedStructure.name}
+          </Message.Item>
+        ) : null}
+        {selectedTag ? (
+          <Message.Item>
+            {formatMessage({ id: "conceptRelations.tag" })}
+            {": "}
+            {formatMessage({
+              id: selectedTag.text,
+              defaultMessage: selectedTag.text,
+            })}
+          </Message.Item>
+        ) : null}
+      </Message.List>
+    </Message>
+  );
+};
+
+LinkedMessage.propTypes = {
+  selectedConcept: PropTypes.object,
+  selectedStructure: PropTypes.object,
+  selectedTag: PropTypes.object,
+  status: PropTypes.string,
+};
+
+export const ConceptsLinksManagement = ({
+  header,
+  subheader,
+  icon,
+  createRelation,
+  deleteRelation,
+  creatingRelation,
+  deletingRelation,
+  fetchConcepts,
+  conceptPayload,
+  tagOptions,
+  selectedRelationTags,
+  clearStructures,
+  clearStructureFilters,
+  fetchStructureFilters,
+  resetStructureFilters,
+  fetchStructures,
+  structurePayload,
+}) => {
+  const { formatMessage } = useIntl();
+  const [selectedConcept, setSelectedConcept] = useState(null);
+  const [selectedStructure, setSelectedStructure] = useState(null);
+
+  const [selectedTag, setselectedTag] = useState(null);
+  const [status, setStatus] = useState(STATUS_PENDING);
+  const [links, setLinks] = useState([]);
+
+  const isStructureLinked = (selectedStructure, links) => {
+    return _.find(
+      (link) =>
+        _.propEq("resource_id", selectedStructure.id.toString())(link) &&
+        _.propEq("resource_type", "data_structure")(link)
+    )(links);
+  };
+
+  const handleConceptSelected = (selectedConcept) => {
+    setStatus(STATUS_PENDING);
+    setLinks(selectedConcept.links);
+    setSelectedStructure(null);
+    setSelectedConcept(selectedConcept);
+    clearStructures();
+    clearStructureFilters();
+    fetchStructureFilters();
+    resetStructureFilters();
+    fetchStructures({ ...structurePayload, size: 7, page: 0 });
+    fetchConcepts({
+      ...conceptPayload,
+      filters: { ...conceptPayload.filters, ...linksDefaultFilters },
+      size: 7,
+    });
+  };
+
+  const handleStructureSelected = (structure) => {
+    setSelectedStructure(structure);
+    if (selectedConcept && structure) {
+      const isLinked = isStructureLinked(structure, links);
+      if (isLinked) {
+        deleteRelation({ id: isLinked.id });
+      } else {
+        const structureLink = {
+          source_id: selectedConcept.business_concept_id,
+          source_type: "business_concept",
+          target_id: structure.id,
+          target_type: "data_structure",
+          tag_ids: selectedRelationTags ? selectedRelationTags : [],
+        };
+        createRelation(structureLink);
+      }
+      fetchConcepts({
+        ...conceptPayload,
+        filters: { ...conceptPayload.filters, ...linksDefaultFilters },
+        size: 7,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (status !== STATUS_PENDING) setSelectedStructure(null);
+
+    setStatus(STATUS_PENDING);
+    if (selectedRelationTags) {
+      const [id] = selectedRelationTags;
+      const tag = _.find(_.propEq("value", id))(tagOptions);
+      setselectedTag(tag);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedRelationTags]);
+
+  useEffect(() => {
+    if (deletingRelation?.id) {
+      setLinks(_.filter(_.negate(_.propEq("id", deletingRelation.id)))(links));
+      setStatus(STATUS_DELETED);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [deletingRelation]);
+
+  useEffect(() => {
+    if (creatingRelation) {
+      setLinks([
+        ...links,
+        {
+          id: creatingRelation.id.toString(),
+          resource_id: creatingRelation.target_id.toString(),
+          resource_type: "data_structure",
+        },
+      ]);
+      setStatus(STATUS_CREATED);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [creatingRelation]);
+
+  return (
+    <>
+      <Segment>
+        <Header as="h2">
+          <Icon circular name={icon} />
+          <Header.Content>
+            {header}
+            <Header.Subheader>{subheader}</Header.Subheader>
+          </Header.Content>
+        </Header>
+        <Segment attached="bottom">
+          <Grid>
+            <Grid.Row>
+              <Grid.Column width={8}>
+                {!_.isEmpty(tagOptions) && (
+                  <TagTypeDropdownSelector options={tagOptions} />
+                )}
+              </Grid.Column>
+              <Grid.Column width={8}>
+                {selectedConcept || selectedTag ? (
+                  <LinkedMessage
+                    selectedStructure={selectedStructure}
+                    selectedConcept={selectedConcept}
+                    selectedTag={selectedTag}
+                    status={status}
+                  />
+                ) : null}
+              </Grid.Column>
+            </Grid.Row>
+            <Grid.Row>
+              <Grid.Column width={8}>
+                <Segment>
+                  <Header as="h4">
+                    <Header.Content>
+                      {" "}
+                      {formatMessage({ id: "conceptRelations.concepts" })}
+                    </Header.Content>
+                  </Header>
+                  <ConceptSelector
+                    showTitle={false}
+                    selectedConcept={selectedConcept}
+                    handleConceptSelected={handleConceptSelected}
+                    tagOptions={tagOptions}
+                  />
+                </Segment>
+              </Grid.Column>
+              <Grid.Column width={8}>
+                <Segment>
+                  <Header as="h4">
+                    <Header.Content>
+                      {formatMessage({ id: "conceptRelations.structures" })}
+                    </Header.Content>
+                  </Header>
+                  {selectedConcept ? (
+                    <StructureSelector
+                      selectedStructure={selectedStructure}
+                      onSelect={handleStructureSelected}
+                      links={links}
+                      placeToTop={false}
+                    />
+                  ) : null}
+                </Segment>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Segment>
+      </Segment>
+    </>
+  );
+};
+
+ConceptsLinksManagement.propTypes = {
+  header: PropTypes.string,
+  icon: PropTypes.string,
+  subheader: PropTypes.string,
+  fetchConcepts: PropTypes.func,
+  conceptPayload: PropTypes.object,
+  structurePayload: PropTypes.object,
+  fetchStructures: PropTypes.func,
+  clearStructures: PropTypes.func,
+  clearStructureFilters: PropTypes.func,
+  fetchStructureFilters: PropTypes.func,
+  resetStructureFilters: PropTypes.func,
+  createRelation: PropTypes.func,
+  deleteRelation: PropTypes.func,
+  selectedRelationTags: PropTypes.array,
+  tagOptions: PropTypes.array,
+  creatingRelation: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+  deletingRelation: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+};
+
+const makeMapStateToProps = () => {
+  const getTagOptions = makeTagOptionsSelector("data_field");
+  const searchQuerySelector = makeSearchQuerySelector(
+    "conceptQuery",
+    "conceptActiveFilters"
+  );
+  const structureSearchQuerySelector = makeSearchQuerySelector(
+    "structureQuery",
+    "structureActiveFilters",
+    "structureDateFilter"
+  );
+  const mapStateToProps = (state, props) => ({
+    conceptPayload: searchQuerySelector(state, props),
+    selectedRelationTags: state.selectedRelationTags,
+    structurePayload: structureSearchQuerySelector(state, props),
+    tagOptions: getTagOptions(state),
+    creatingRelation: state.creatingRelation,
+    deletingRelation: state.relations,
+  });
+
+  return mapStateToProps;
+};
+
+export default connect(makeMapStateToProps, {
+  fetchConcepts,
+  createRelation,
+  deleteRelation,
+  fetchStructures,
+  clearStructures,
+  clearStructureFilters,
+  fetchStructureFilters,
+  resetStructureFilters,
+})(ConceptsLinksManagement);

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

@@ -0,0 +1,84 @@
+import React, { Suspense } from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ConceptsLinksManagement from "../ConceptsLinksManagement";
+import en from "../../../messages/en";
+
+const messages = {
+  en: {
+    ...en,
+    "concepts.status.undefined": "undefined",
+    "search.save_filters": "save filters",
+    "search.clear_filters": "clear filters",
+    "search.applied_filters": "apply filters",
+    "structures.not_found.body": "",
+  },
+};
+
+const link = {
+  id: 745,
+  resource_id: 4569480,
+  resource_type: "data_structure",
+};
+
+const concept = {
+  _actions: { can_create_structure_link: true },
+  id: 1,
+  business_concept_id: 1111,
+  name: "foo",
+  domain: { id: 1, name: "bar" },
+  status: "draft",
+  business_concept_id: 1,
+  links: [link],
+};
+const structure = {
+  id: 4569480,
+  name: "Contrato",
+  path: ["Trabajadores"],
+  system: {
+    external_id: "micro",
+    id: 68,
+    name: "System",
+  },
+};
+
+const props = {
+  header: "header",
+  subheader: "subheader",
+  icon: "linkify",
+};
+
+describe("<ConceptsLinksManagement />", () => {
+  const renderOpts = {
+    messages,
+    state: {
+      loading: false,
+      links: [link],
+      concepts: [concept],
+      structures: [structure],
+      structuresRows: [structure],
+      conceptActiveFilters: { filter: "some" },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <ConceptsLinksManagement {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("select a concept and shows LinkedMessage and structure search table", async () => {
+    const { queryByText } = render(
+      <Suspense fallback={null}>
+        <ConceptsLinksManagement {...props} />
+      </Suspense>,
+      renderOpts
+    );
+
+    userEvent.click(await queryByText(/foo/));
+    expect(queryByText("Adding a link to a structure")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,225 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ConceptsLinksManagement /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <h2
+      class="ui header"
+    >
+      <i
+        aria-hidden="true"
+        class="linkify circular icon"
+      />
+      <div
+        class="content"
+      >
+        header
+        <div
+          class="sub header"
+        >
+          subheader
+        </div>
+      </div>
+    </h2>
+    <div
+      class="ui bottom attached segment"
+    >
+      <div
+        class="ui grid"
+      >
+        <div
+          class="row"
+        >
+          <div
+            class="eight wide column"
+          />
+          <div
+            class="eight wide column"
+          />
+        </div>
+        <div
+          class="row"
+        >
+          <div
+            class="eight wide column"
+          >
+            <div
+              class="ui segment"
+            >
+              <h4
+                class="ui header"
+              >
+                <div
+                  class="content"
+                >
+                   
+                  Concepts
+                </div>
+              </h4>
+              <div
+                class="ui segment"
+              >
+                <div
+                  class="ui action left icon input"
+                >
+                  <input
+                    placeholder="Search concepts..."
+                    type="text"
+                    value=""
+                  />
+                  <i
+                    aria-hidden="true"
+                    class="search link icon"
+                  />
+                  <div
+                    aria-expanded="false"
+                    class="ui button floating labeled scrolling dropdown icon"
+                    role="listbox"
+                    tabindex="0"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      class="divider text"
+                      role="alert"
+                    >
+                      Filters
+                    </div>
+                    <i
+                      aria-hidden="true"
+                      class="filter icon"
+                    />
+                    <div
+                      class="menu transition"
+                    >
+                      <div
+                        class="item"
+                        role="option"
+                      >
+                        <em>
+                          (reset filters)
+                        </em>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="selectedFilters"
+                >
+                  <div
+                    class="appliedFilters"
+                  >
+                    apply filters
+                  </div>
+                  <div
+                    aria-expanded="false"
+                    class="ui floating item scrolling dropdown"
+                    role="listbox"
+                    tabindex="0"
+                  >
+                    <div
+                      class="ui label"
+                    >
+                      filter
+                      <i
+                        aria-hidden="true"
+                        class="delete icon"
+                      />
+                    </div>
+                    <div
+                      class="menu transition dimmable"
+                    />
+                  </div>
+                  <a
+                    class="resetFilters"
+                  >
+                    clear filters
+                  </a>
+                  <a
+                    class="resetFilters"
+                  >
+                    save filters
+                  </a>
+                </div>
+                <table
+                  class="ui small selectable table"
+                >
+                  <thead
+                    class=""
+                  >
+                    <tr
+                      class=""
+                    >
+                      <th
+                        class=""
+                      >
+                        Term
+                      </th>
+                      <th
+                        class=""
+                      >
+                        Domain
+                      </th>
+                      <th
+                        class=""
+                      >
+                        Status
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody
+                    class=""
+                  >
+                    <tr
+                      class=""
+                    >
+                      <td
+                        class=""
+                      >
+                        foo
+                      </td>
+                      <td
+                        class=""
+                      >
+                        bar
+                      </td>
+                      <td
+                        class=""
+                      >
+                        <div
+                          class="ui olive label"
+                        >
+                          Draft
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div
+            class="eight wide column"
+          >
+            <div
+              class="ui segment"
+            >
+              <h4
+                class="ui header"
+              >
+                <div
+                  class="content"
+                >
+                  Structures
+                </div>
+              </h4>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/concepts/relations/components/ConceptSelector.js

@@ -26,7 +26,7 @@ const ConceptSelectorRow = ({ concept, active, onClick, disabled }) => {
       onClick={() => onClick && onClick(concept)}
     >
       <Table.Cell content={name} />
-      <Table.Cell content={domain.name} />
+      <Table.Cell content={domain?.name} />
       <Table.Cell
         content={
           <Label color={mapStatusColor[status]}>
@@ -65,6 +65,15 @@ export const ConceptSelector = ({
     false
   )(concepts);
 
+  const isDisabled = (concept) => {
+    return concept
+      ? !_.flow(
+          _.pathOr({}, "_actions"),
+          _.propOr(true, "can_create_structure_link")
+        )(concept)
+      : false;
+  };
+
   return (
     <>
       {loadConcepts && (
@@ -98,7 +107,9 @@ export const ConceptSelector = ({
             <Table.Body>
               {concepts.map((s, i) => (
                 <ConceptSelectorRow
-                  disabled={businessConceptId == s.business_concept_id}
+                  disabled={
+                    businessConceptId == s.business_concept_id || isDisabled(s)
+                  }
                   key={i}
                   concept={s}
                   active={selectedConcept && selectedConcept.id == s.id}

package/src/concepts/relations/components/__tests__/ConceptSelector.spec.js

@@ -1,6 +1,25 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { ConceptSelector } from "../ConceptSelector";
+import en from "../../../../messages/en";
+
+const messages = {
+  en: {
+    ...en,
+    "concepts.status.undefined": "undefined",
+    "search.save_filters": "save filters",
+    "search.clear_filters": "clear filters",
+    "search.applied_filters": "apply filters",
+  },
+};
+const renderOpts = {
+  messages,
+  state: {
+    conceptActiveFilters: { filter: "some" },
+  },
+};
 
 describe("<ConceptSelector />", () => {
   const handleConceptSelected = jest.fn();
@@ -8,46 +27,62 @@ describe("<ConceptSelector />", () => {
     id: 1,
     name: "foo",
     domain: { id: 1, name: "bar" },
-    status: "draft"
+    status: "draft",
+    business_concept_id: 1,
   };
   const props = {
     conceptsLoading: false,
     concepts: [concept],
     selectedConcept: {},
-    handleConceptSelected
+    handleConceptSelected,
+    defaultFilters: {},
   };
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<ConceptSelector {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<ConceptSelector {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 
   it("renders title when specified", () => {
-    const withTitle = shallow(<ConceptSelector {...props} />);
-    const withoutTitle = shallow(
-      <ConceptSelector {...{ ...props, showTitle: false }} />
+    const { queryByText } = render(<ConceptSelector {...props} />, renderOpts);
+    expect(queryByText("Related concept")).toBeInTheDocument();
+  });
+
+  it("renders no title when is not specified", () => {
+    const { queryByText } = render(
+      <ConceptSelector {...{ ...props, showTitle: false }} />,
+      renderOpts
     );
-    expect(withTitle.find("label").length).toBe(1);
-    expect(withoutTitle.find("label").length).toBe(0);
+    expect(queryByText("Related concept")).not.toBeInTheDocument();
   });
 
-  it("renders Loader when specified", () => {
-    const withLoader = shallow(<ConceptSelector {...props} />);
-    const withoutLoader = shallow(
-      <ConceptSelector {...{ ...props, loadConcepts: false }} />
+  it("calls handleConceptSelected on concept row click", async () => {
+    const { queryByText } = render(
+      <ConceptSelector {...{ ...props, selectedConcept: null }} />,
+      renderOpts
+    );
+    userEvent.click(await queryByText(/foo/));
+    await waitFor(() => {
+      expect(handleConceptSelected.mock.calls.length).toBe(1);
+    });
+    expect(handleConceptSelected).toHaveBeenCalledWith(
+      expect.objectContaining(concept)
     );
-    expect(withLoader.find("Connect(ConceptsLoader)").length).toBe(1);
-    expect(withoutLoader.find("Connect(ConceptsLoader)").length).toBe(0);
   });
 
-  it("calls handleConceptSelected on concept row click", () => {
-    const wrapper = shallow(
-      <ConceptSelector {...{ ...props, selectedConcept: null }} />
+  it("renders disable when cannot create structure link", () => {
+    const conceptWithActions = {
+      id: 1,
+      name: "foo",
+      domain: { id: 1, name: "bar" },
+      status: "draft",
+      business_concept_id: 1,
+      _actions: { can_create_structure_link: false },
+    };
+
+    const { container } = render(
+      <ConceptSelector {...{ ...props, concepts: [conceptWithActions] }} />,
+      renderOpts
     );
-    const ConceptSelectorRow = wrapper.find("ConceptSelectorRow");
-    expect(ConceptSelectorRow.length).toBe(1);
-    ConceptSelectorRow.dive()
-      .find("TableRow")
-      .simulate("click");
-    expect(handleConceptSelected).toBeCalledWith(concept);
+    expect(container.querySelector("tbody > tr")).toHaveClass("disabled");
   });
 });

package/src/concepts/relations/components/__tests__/__snapshots__/ConceptSelector.spec.js.snap

@@ -1,100 +1,168 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ConceptSelector /> matches the latest snapshot 1`] = `
-<Fragment>
-  <Connect(ConceptsLoader)
-    defaultFilters={
-      Object {
-        "current": Array [
-          true,
-        ],
-        "status": Array [
-          "pending_approval",
-          "draft",
-          "rejected",
-          "published",
-        ],
-      }
-    }
-    pageSize={7}
-  />
-  <Connect(FiltersLoader) />
-  <Connect(ConceptUserFiltersLoader) />
+<div>
   <label>
-    <MemoizedFormattedMessage
-      id="conceptRelations.relatedConcept"
-    />
+    Related concept
   </label>
-  <Segment>
-    <Connect(ConceptsSearch) />
-    <ConceptSelectedFilters />
-    <Table
-      as="table"
-      selectable={true}
-      size="small"
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui action left icon input"
     >
-      <TableHeader
-        as="thead"
+      <input
+        placeholder="Search concepts..."
+        type="text"
+        value=""
+      />
+      <i
+        aria-hidden="true"
+        class="search link icon"
+      />
+      <div
+        aria-expanded="false"
+        class="ui button floating labeled scrolling dropdown icon"
+        role="listbox"
+        tabindex="0"
       >
-        <TableRow
-          as="tr"
-          cellAs="td"
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider text"
+          role="alert"
         >
-          <TableHeaderCell
-            as="th"
-            content={
-              <Memo(MemoizedFormattedMessage)
-                id="concepts.props.name"
-              />
-            }
+          Filters
+        </div>
+        <i
+          aria-hidden="true"
+          class="filter icon"
+        />
+        <div
+          class="menu transition"
+        >
+          <div
+            class="item"
+            role="option"
+          >
+            <em>
+              (reset filters)
+            </em>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="selectedFilters"
+    >
+      <div
+        class="appliedFilters"
+      >
+        apply filters
+      </div>
+      <div
+        aria-expanded="false"
+        class="ui floating item scrolling dropdown"
+        role="listbox"
+        tabindex="0"
+      >
+        <div
+          class="ui label"
+        >
+          filter
+          <i
+            aria-hidden="true"
+            class="delete icon"
           />
-          <TableHeaderCell
-            as="th"
-            content={
-              <Memo(MemoizedFormattedMessage)
-                id="concepts.props.domain"
-              />
-            }
+        </div>
+        <div
+          class="menu transition dimmable"
+        />
+      </div>
+      <a
+        class="resetFilters"
+      >
+        clear filters
+      </a>
+      <a
+        class="resetFilters"
+      >
+        save filters
+      </a>
+    </div>
+    <table
+      class="ui small selectable table"
+    >
+      <thead
+        class=""
+      >
+        <tr
+          class=""
+        >
+          <th
+            class=""
+          >
+            Term
+          </th>
+          <th
+            class=""
+          >
+            Domain
+          </th>
+          <th
+            class=""
+          >
+            Status
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class=""
+      >
+        <tr
+          class=""
+        >
+          <td
+            class=""
+          >
+            foo
+          </td>
+          <td
+            class=""
+          >
+            bar
+          </td>
+          <td
+            class=""
+          >
+            <div
+              class="ui olive label"
+            >
+              Draft
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="active"
+        >
+          <td
+            class=""
           />
-          <TableHeaderCell
-            as="th"
-            content={
-              <Memo(MemoizedFormattedMessage)
-                id="concepts.props.status"
-              />
-            }
+          <td
+            class=""
           />
-        </TableRow>
-      </TableHeader>
-      <TableBody
-        as="tbody"
-      >
-        <ConceptSelectorRow
-          active={false}
-          concept={
-            Object {
-              "domain": Object {
-                "id": 1,
-                "name": "bar",
-              },
-              "id": 1,
-              "name": "foo",
-              "status": "draft",
-            }
-          }
-          disabled={true}
-          key="0"
-          onClick={[MockFunction]}
-        />
-        <ConceptSelectorRow
-          active={true}
-          concept={Object {}}
-        />
-      </TableBody>
-    </Table>
-    <Connect(Pagination)
-      size="small"
-    />
-  </Segment>
-</Fragment>
+          <td
+            class=""
+          >
+            <div
+              class="ui label"
+            >
+              undefined
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
 `;

package/src/messages/en.js

@@ -43,9 +43,10 @@ export default {
   "concept.events.new_concept_draft":
     "created a new draft form a published concept",
   "concept.events.update_concept_draft": "updated the draft",
-  "concept.events.relation_created": "added a link to a structure",
-  "concept.events.relation_deleted": "removed a link to a structure",
-  "concept.events.relation_deprecated": "deprecated link to a structure",
+  "concept.events.relation_creating": "Adding a link to a structure",
+  "concept.events.relation_created": "Added a link to a structure",
+  "concept.events.relation_deleted": "Removed a link to a structure",
+  "concept.events.relation_deprecated": "Deprecated link to a structure",
   "concept.props.in_progress": "In progress",
   "concept.props.last_update_at": "Update",
   "concept.props.last_update_by": "User",
@@ -89,6 +90,11 @@ export default {
     "This concept is not currently linked to any concept",
   "conceptRelations.relatedConcept": "Related concept",
   "conceptRelations.relationType": "Relation type",
+  "conceptRelations.concept": "Concept",
+  "conceptRelations.concepts": "Concepts",
+  "conceptRelations.structure": "Structure",
+  "conceptRelations.structures": "Structures",
+  "conceptRelations.tag": "Tag",
   "conceptRelations.tags": "Tags",
   "concepts.actions.bulk_update.popup":
     "You should select only one type in filters",
@@ -131,6 +137,7 @@ export default {
   "concepts.header.edit.bulk.concepts_count":
     'Selected concepts: "{concepts_count}"',
   "concepts.header.edit.bulk.info_message": "Only modify fields to be updated",
+  "concepts.header.linksManager": "Concepts link manager",
   "concepts.header.manage": "Concepts Management",
   "concepts.props.completeness": "Completeness",
   "concepts.props.description": "Description",
@@ -164,6 +171,7 @@ export default {
   "concepts.status.published": "Published",
   "concepts.status.rejected": "Rejected",
   "concepts.status.versioned": "Versioned",
+  "concepts.subheader.linksManager": "Query links business concepts",
   "concepts.subheader.manage": "Concept Versions in Progress",
   "concepts.subheader.view": "Query business concepts",
   "concepts.summary": "Summary",

package/src/messages/es.js

@@ -45,9 +45,10 @@ export default {
   "concept.events.new_concept_draft":
     "creó un nuevo borrador a partir de la publicación existente",
   "concept.events.update_concept_draft": "actualizó el borrador",
-  "concept.events.relation_created": "Nueva relación",
-  "concept.events.relation_deleted": "Relación eliminada",
-  "concept.events.relation_deprecated": "Relación deprecada",
+  "concept.events.relation_creating": "Creando un nuevo vínculo",
+  "concept.events.relation_created": "Nuevo vínculo creado",
+  "concept.events.relation_deleted": "Vínculo eliminado",
+  "concept.events.relation_deprecated": "Vínculo deprecado",
   "concept.props.in_progress": "Sin completar",
   "concept.props.last_update_at": "Modificación",
   "concept.props.last_update_by": "Usuario",
@@ -88,6 +89,11 @@ export default {
     "Este concepto no tiene conceptos relacionados actualmente",
   "conceptRelations.relatedConcept": "Concepto relacionado",
   "conceptRelations.relationType": "Tipo de relación",
+  "conceptRelations.concept": "Concepto",
+  "conceptRelations.concepts": "Conceptos",
+  "conceptRelations.structure": "Estructura",
+  "conceptRelations.structures": "Estructuras",
+  "conceptRelations.tag": "Etiqueta",
   "conceptRelations.tags": "Etiquetas",
   "concepts.actions.bulk_update.popup":
     "Seleccione un único tipo en los filtros",
@@ -130,6 +136,7 @@ export default {
     'Conceptos seleccionados: "{concepts_count}"',
   "concepts.header.edit.bulk.info_message":
     "Rellenar únicamente los campos que se quieran actualizar",
+  "concepts.header.linksManager": "Gestion de vínculos para conceptos",
   "concepts.header.manage": "Gestión de Conceptos",
   "concepts.props.completeness": "Completitud",
   "concepts.props.description": "Descripción",
@@ -164,6 +171,8 @@ export default {
   "concepts.status.published": "Publicado",
   "concepts.status.rejected": "Rechazado",
   "concepts.status.versioned": "Versionado",
+  "concepts.subheader.linksManager":
+    "Consultar vínculos de conceptos de negocio",
   "concepts.subheader.manage": "Versiones de Conceptos en Progreso",
   "concepts.subheader.view": "Consultar conceptos de negocio",
   "concepts.summary": "Resumen",