@truedat/lm 4.40.0 → 4.40.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.40.3] 2022-03-14
+
+### Added
+
+- [TD-4271] Support for linking implementations with business_concepts
+
 ## [4.39.2] 2022-03-04
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/lm",
-  "version": "4.40.0",
+  "version": "4.40.3",
   "description": "Truedat Link Manager",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -33,7 +33,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.39.0",
+    "@truedat/test": "4.40.3",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -83,7 +83,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.40.0",
+    "@truedat/core": "4.40.3",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
     "react-graph-vis": "1.0.5",
@@ -100,5 +100,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "0bd677584da73a5021a5c96f2e5525fde9a1958a"
+  "gitHead": "03104a28941b568007ad53b85874ff58225eaa6a"
 }

package/src/components/ConceptImplementationLink.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+import { linkTo } from "@truedat/core/routes";
+
+export const ConceptImplementationLink = ({
+  resource_id: business_concept_id,
+  name,
+}) => (
+  <Link
+    to={linkTo.CONCEPT_LINKS_IMPLEMENTATIONS({
+      business_concept_id,
+      id: "current",
+    })}
+  >
+    {name}
+  </Link>
+);
+
+ConceptImplementationLink.propTypes = {
+  resource_id: PropTypes.number,
+  name: PropTypes.string,
+};
+
+export default ConceptImplementationLink;

package/src/components/ConfirmDeleteRelation.js

@@ -6,15 +6,19 @@ import { FormattedMessage } from "react-intl";
 import { ConfirmModal } from "@truedat/core/components";
 import { deleteRelation } from "../routines";
 
-export const ConfirmDeleteRelation = ({ id, deleteRelation }) => (
+export const ConfirmDeleteRelation = ({ id, deleteRelation, resourceType }) => (
   <ConfirmModal
     icon="trash"
-    trigger={<Icon name="trash alternate outline" />}
+    trigger={<Icon name="trash alternate outline" color="red" />}
     header={
-      <FormattedMessage id="relations.actions.data_field.delete.confirmation.header" />
+      <FormattedMessage
+        id={`relations.actions.${resourceType}.delete.confirmation.header`}
+      />
     }
     content={
-      <FormattedMessage id="relations.actions.data_field.delete.confirmation.content" />
+      <FormattedMessage
+        id={`relations.actions.${resourceType}.delete.confirmation.content`}
+      />
     }
     onConfirm={() => deleteRelation({ id })}
     onOpen={(e) => e.stopPropagation()}
@@ -22,6 +26,10 @@ export const ConfirmDeleteRelation = ({ id, deleteRelation }) => (
   />
 );
 
-ConfirmDeleteRelation.propTypes = { id: PropTypes.string };
+ConfirmDeleteRelation.propTypes = {
+  id: PropTypes.number,
+  deleteRelation: PropTypes.func,
+  resourceType: PropTypes.string,
+};
 
 export default connect(null, { deleteRelation })(ConfirmDeleteRelation);

package/src/components/ImplementationLinkRow.js

@@ -0,0 +1,24 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Table } from "semantic-ui-react";
+import { columnDecorator } from "@truedat/core/services";
+
+export const ImplementationLinkRow = ({ link, columns }) => (
+  <Table.Row>
+    {columns.map((column, i) => (
+      <Table.Cell
+        key={i}
+        textAlign={_.prop("textAlign")(column)}
+        content={columnDecorator(column)(link)}
+      />
+    ))}
+  </Table.Row>
+);
+
+ImplementationLinkRow.propTypes = {
+  link: PropTypes.object,
+  columns: PropTypes.array,
+};
+
+export default ImplementationLinkRow;

package/src/components/ImplementationLinks.js

@@ -0,0 +1,114 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Table, Button, Grid, Segment } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+import { linkTo } from "@truedat/core/routes";
+import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
+import { getImplementationToConceptLinks } from "../selectors/getImplementationToConceptLinks";
+import ConceptImplementationLink from "./ConceptImplementationLink";
+import ConceptLinkTags from "./ConceptLinkTags";
+import ImplementationLinkRow from "./ImplementationLinkRow";
+import ConfirmDeleteRelation from "./ConfirmDeleteRelation";
+
+const ConfirmDeleteImplementationRelation = ({ id }) => (
+  <ConfirmDeleteRelation id={id} resourceType="implementation" />
+);
+ConfirmDeleteImplementationRelation.propTypes = {
+  id: PropTypes.number,
+};
+
+export const ImplementationLinks = ({
+  implementation,
+  implementationLinks,
+  canCreateLink,
+}) => {
+  const deleteColumn = canCreateLink
+    ? [
+        {
+          fieldSelector: _.identity,
+          fieldDecorator: ConfirmDeleteImplementationRelation,
+        },
+      ]
+    : [];
+
+  const columns = [
+    {
+      header: "concepts.props.name",
+      fieldSelector: _.identity,
+      fieldDecorator: ConceptImplementationLink,
+    },
+    {
+      header: "concepts.props.tags",
+      fieldSelector: _.identity,
+      fieldDecorator: ConceptLinkTags,
+    },
+    {
+      header: "concepts.props.domain",
+      fieldSelector: _.path("domain.name"),
+    },
+    ...deleteColumn,
+  ];
+
+  const headerRow = columns.map(({ header }, key) => (
+    <Table.HeaderCell
+      key={key}
+      content={header ? <FormattedMessage id={header} /> : null}
+    />
+  ));
+
+  const id = _.prop("rule_id")(implementation);
+  const implementation_id = _.prop("id")(implementation);
+
+  const renderBodyRow = (link, i) => (
+    <ImplementationLinkRow key={i} link={link} columns={columns} />
+  );
+
+  return (
+    <Segment attached="bottom">
+      <Grid>
+        {id && canCreateLink && (
+          <Grid.Column width={16}>
+            <Button
+              floated="right"
+              primary
+              as={Link}
+              to={linkTo.IMPLEMENTATION_CONCEPT_LINKS_NEW({
+                id: id,
+                implementation_id: implementation_id,
+              })}
+              content={<FormattedMessage id="links.actions.create" />}
+            />
+          </Grid.Column>
+        )}
+        {!_.isEmpty(implementationLinks) ? (
+          <Grid.Column width={16}>
+            <Table
+              headerRow={headerRow}
+              renderBodyRow={renderBodyRow}
+              tableData={implementationLinks}
+            />
+          </Grid.Column>
+        ) : null}
+      </Grid>
+    </Segment>
+  );
+};
+
+ImplementationLinks.propTypes = {
+  implementation: PropTypes.object,
+  canCreateLink: PropTypes.bool,
+  implementationLinks: PropTypes.array,
+};
+
+const mapStateToProps = (state) => ({
+  implementation: state.ruleImplementation,
+  implementationLinks: _.sortBy(accentInsensitivePathOrder("name"))(
+    getImplementationToConceptLinks(state)
+  ),
+  canCreateLink: _.propOr(false, "link_concept")(state.implementationActions),
+});
+
+export default connect(mapStateToProps)(ImplementationLinks);

package/src/components/ImplementationRelationForm.js

@@ -0,0 +1,147 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import {
+  Button,
+  Checkbox,
+  Form,
+  Grid,
+  Header,
+  Segment,
+} from "semantic-ui-react";
+import { HistoryBackButton } from "@truedat/core/components";
+import { linkTo } from "@truedat/core/routes";
+import { linkConcept } from "../routines";
+import RelationTagsLoader from "./RelationTagsLoader";
+
+const ConceptSelector = React.lazy(() =>
+  import("@truedat/bg/concepts/relations/components/ConceptSelector")
+);
+
+export const ImplementationRelationForm = ({
+  conceptLinking,
+  implementation,
+  tagOptions,
+  linkConcept,
+}) => {
+  const { formatMessage } = useIntl();
+  const [selectedTag, setSelectedTag] = useState([]);
+  const [selectedConcept, setSelectedConcept] = useState(null);
+  const submitDisabled = conceptLinking || !selectedConcept;
+
+  const handleTagOnChange = (e, { value }) => {
+    const newSelectedTag = _.cond([
+      [_.includes(value), _.without([value])],
+      [_.stubTrue, _.concat(value)],
+    ])(selectedTag);
+    setSelectedTag(newSelectedTag);
+  };
+
+  const handleConceptSelected = (selectedConcept) =>
+    setSelectedConcept(selectedConcept);
+
+  const handleSubmit = () => {
+    const redirectUrl = linkTo.IMPLEMENTATION_CONCEPT_LINKS({
+      id: implementation.rule_id,
+      implementation_id: implementation.id,
+    });
+    const conceptLink = {
+      redirectUrl,
+      source_id: implementation.id,
+      source_type: "implementation",
+      target_id: selectedConcept.business_concept_id,
+      target_type: "business_concept",
+      tag_ids: selectedTag ? selectedTag : [],
+      context: {},
+    };
+    linkConcept(conceptLink);
+  };
+
+  return (
+    <Segment attached="bottom">
+      <Grid>
+        <Grid.Column with={16}>
+          <RelationTagsLoader />
+          <Header
+            as="h4"
+            content={formatMessage({
+              id: "implementations.relation.new.header",
+            })}
+          />
+
+          {!_.isEmpty(tagOptions) ? (
+            <Form.Field style={{ marginBottom: "10px" }}>
+              <label>
+                {formatMessage({ id: "conceptRelations.relationType" })}
+              </label>
+              {tagOptions.map((tagOption, key) => (
+                <div key={key} style={{ margin: "6px 0" }}>
+                  <Checkbox
+                    toggle
+                    label={formatMessage({
+                      id: `conceptRelations.relationType.${tagOption.text}`,
+                      defaultMessage: tagOption.text,
+                    })}
+                    name={tagOption.text}
+                    value={tagOption.id}
+                    onChange={handleTagOnChange}
+                  />
+                </div>
+              ))}
+            </Form.Field>
+          ) : null}
+          <ConceptSelector
+            selectedConcept={selectedConcept}
+            handleConceptSelected={handleConceptSelected}
+          />
+
+          <div className="actions">
+            <HistoryBackButton
+              content={formatMessage({ id: "actions.cancel" })}
+              disabled={conceptLinking}
+            />
+
+            <Button
+              primary
+              content={formatMessage({ id: "actions.create" })}
+              disabled={submitDisabled}
+              loading={conceptLinking}
+              onClick={handleSubmit}
+            />
+          </div>
+        </Grid.Column>
+      </Grid>
+    </Segment>
+  );
+};
+
+ImplementationRelationForm.propTypes = {
+  implementation: PropTypes.object,
+  tagOptions: PropTypes.array,
+  conceptLinking: PropTypes.bool,
+  linkConcept: PropTypes.func,
+};
+
+const tagsToOptions = _.map(({ id: id, value: { type } }) => ({
+  id,
+  text: type,
+}));
+
+const mapStateToProps = (state) => ({
+  conceptLinking: state.conceptLinking,
+  implementation: state.ruleImplementation,
+  tagOptions: _.flow(
+    _.filter(
+      (tag) =>
+        _.path("value.target_type")(tag) == "rule_implementations" ||
+        !_.path("value.target_type")
+    ),
+    tagsToOptions
+  )(state.relationTags),
+});
+
+export default connect(mapStateToProps, { linkConcept })(
+  ImplementationRelationForm
+);

package/src/components/LinksPane.js

@@ -18,6 +18,11 @@ const Row = ({ columns, link }) => (
   </Table.Row>
 );
 
+Row.propTypes = {
+  columns: PropTypes.array,
+  link: PropTypes.object,
+};
+
 export const Links = ({ tag, sourceType, targetType, columns, links }) => {
   const headerRow = columns.map(({ name }, key) => (
     <Table.HeaderCell
@@ -50,6 +55,14 @@ export const Links = ({ tag, sourceType, targetType, columns, links }) => {
   );
 };
 
+Links.propTypes = {
+  tag: PropTypes.string,
+  sourceType: PropTypes.string,
+  targetType: PropTypes.string,
+  columns: PropTypes.array,
+  links: PropTypes.array,
+};
+
 const columnPredicate = (column) => {
   const { fieldSelector, name } = column || {};
   return _.isFunction(fieldSelector)

package/src/components/RelationTagForm.js

@@ -13,20 +13,24 @@ export const RelationTagForm = ({ relationTag, isSubmitting, onSubmit }) => {
     defaultValues: {
       type: "",
       target_type: "",
-      ...relationTag
-    }
+      ...relationTag,
+    },
   });
   const { isDirty, isValid } = formState;
   const targetTypeOptions = [
     {
       value: "business_concept",
-      text: formatMessage({ id: "target_type.business_concept" })
+      text: formatMessage({ id: "target_type.business_concept" }),
     },
     { value: "ingest", text: formatMessage({ id: "target_type.ingest" }) },
+    {
+      value: "implementations",
+      text: formatMessage({ id: "target_type.implementations" }),
+    },
     {
       value: "data_field",
-      text: formatMessage({ id: "target_type.data_field" })
-    }
+      text: formatMessage({ id: "target_type.data_field" }),
+    },
   ];
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
@@ -37,7 +41,7 @@ export const RelationTagForm = ({ relationTag, isSubmitting, onSubmit }) => {
           required: formatMessage(
             { id: "form.validation.required" },
             { prop: formatMessage({ id: "relationTags.props.type" }) }
-          )
+          ),
         }}
         render={({ onBlur, onChange, value }) => (
           <Form.Input
@@ -46,12 +50,12 @@ export const RelationTagForm = ({ relationTag, isSubmitting, onSubmit }) => {
             error={errors.type?.message}
             label={{
               children: formatMessage({ id: "relationTags.props.type" }),
-              htmlFor: "type"
+              htmlFor: "type",
             }}
             onBlur={onBlur}
             onChange={(_e, { value }) => onChange(value)}
             placeholder={formatMessage({
-              id: "relationTags.props.type.placeholder"
+              id: "relationTags.props.type.placeholder",
             })}
             value={value || ""}
             required
@@ -65,7 +69,7 @@ export const RelationTagForm = ({ relationTag, isSubmitting, onSubmit }) => {
           required: formatMessage(
             { id: "form.validation.required" },
             { prop: formatMessage({ id: "relationTags.props.target_type" }) }
-          )
+          ),
         }}
         render={({ onBlur, onChange, value }) => (
           <Form.Dropdown
@@ -74,12 +78,12 @@ export const RelationTagForm = ({ relationTag, isSubmitting, onSubmit }) => {
             error={errors.target_type?.message}
             label={{
               children: formatMessage({ id: "relationTags.props.target_type" }),
-              htmlFor: "target_type"
+              htmlFor: "target_type",
             }}
             onBlur={onBlur}
             onChange={(_e, { value }) => onChange(value)}
             placeholder={formatMessage({
-              id: "relationTags.props.target_type.placeholder"
+              id: "relationTags.props.target_type.placeholder",
             })}
             value={value || ""}
             selection
@@ -109,11 +113,11 @@ export const RelationTagForm = ({ relationTag, isSubmitting, onSubmit }) => {
 RelationTagForm.propTypes = {
   relationTag: PropTypes.object,
   isSubmitting: PropTypes.bool,
-  onSubmit: PropTypes.func
+  onSubmit: PropTypes.func,
 };
 
 const mapStateToProps = ({ relationTagCreating }) => ({
-  isSubmitting: relationTagCreating
+  isSubmitting: relationTagCreating,
 });
 
 export default connect(mapStateToProps)(RelationTagForm);

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { ConceptImplementationLink } from "../ConceptImplementationLink";
+
+describe("<ConceptImplementationLink />", () => {
+  const renderOpts = {
+    messages: {
+      en: {},
+    },
+  };
+
+  const props = {
+    resource_id: 8,
+    name: "ConceptImplementationLink",
+  };
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <ConceptImplementationLink {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { ConfirmDeleteRelation } from "../ConfirmDeleteRelation";
+
+describe("<ConfirmDeleteRelation />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "relations.actions.resourceType.delete.confirmation.header": "header",
+        "relations.actions.resourceType.delete.confirmation.content": "content",
+      },
+    },
+  };
+
+  const props = {
+    id: 10,
+    deleteRelation: () => {},
+    resourceType: "resourceType",
+  };
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <ConfirmDeleteRelation {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { Table } from "semantic-ui-react";
+import { ImplementationLinkRow } from "../ImplementationLinkRow";
+
+describe("<ImplementationLinkRow />", () => {
+  const renderOpts = {
+    messages: {
+      en: { "props.name": "name" },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const columns = [{ header: "props.name" }];
+    const renderBodyRow = (link, i) => (
+      <ImplementationLinkRow key={i} link={link} columns={columns} />
+    );
+
+    const { container } = render(
+      <Table renderBodyRow={renderBodyRow} tableData={[{ id: 1 }]} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { ImplementationLinks } from "../ImplementationLinks";
+
+describe("<ImplementationLinks />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "links.actions.create": "create",
+        "concepts.props.name": "name",
+        "concepts.props.tags": "tags",
+        "concepts.props.domain": "domain",
+      },
+    },
+  };
+
+  const props = {
+    implementation: { rule_id: 2, id: 4 },
+    canCreateLink: true,
+    implementationLinks: [
+      { name: "name", tags: [], domain: { name: "domain" }, resource_id: 2 },
+    ],
+  };
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <ImplementationLinks {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,33 @@
+import React, { Suspense } from "react";
+import { render } from "@truedat/test/render";
+import { ImplementationRelationForm } from "../ImplementationRelationForm";
+
+describe("<ImplementationRelationForm />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "implementations.relation.new.header": "header",
+        "conceptRelations.relationType": "relationType",
+        "actions.cancel": "cancel",
+        "actions.create": "create",
+        "conceptRelations.relationType.text": "text",
+      },
+    },
+  };
+
+  const props = {
+    implementation: { rule_id: 2, id: 4 },
+    tagOptions: [{ id: 2, text: "text" }],
+    conceptLinking: false,
+    linkConcept: () => {},
+  };
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <Suspense fallback={null}>
+        <ImplementationRelationForm {...props} />
+      </Suspense>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { LinksPane } from "../LinksPane";
+
+describe("<LinksPane />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "column.header": "header",
+        "implementationDeletedRelation.table.title": "Delete title",
+        "implementationRelation.table.title": "Relation Title",
+        "implementationRelation.master.table.title": "Master title",
+        "concept.column": "column",
+      },
+    },
+  };
+
+  const columns = [
+    {
+      name: "column",
+      header: "column.header",
+    },
+  ];
+  const links = [{ id: 4 }];
+  const props = {
+    groups: [[columns, ["tag", links]]],
+    sourceType: "implementation",
+    targetType: "concept",
+    linksActions: <button>action</button>,
+  };
+  it("matches the latest snapshot", () => {
+    const { container } = render(<LinksPane {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -16,9 +16,10 @@ const renderOpts = {
       "relationTags.props.type.placeholder": "...",
       "target_type.business_concept": "concept",
       "target_type.data_field": "structure",
-      "target_type.ingest": "ingest"
-    }
-  }
+      "target_type.ingest": "ingest",
+      "target_type.implementations": "implementations",
+    },
+  },
 };
 
 describe("<RelationTagForm />", () => {
@@ -32,7 +33,7 @@ describe("<RelationTagForm />", () => {
     const onSubmit = jest.fn();
 
     const { findByRole, getByRole, findByText } = render(
-      <RelationTagForm onSubmit={props => onSubmit(props)} />,
+      <RelationTagForm onSubmit={(props) => onSubmit(props)} />,
       renderOpts
     );
 
@@ -59,7 +60,7 @@ describe("<RelationTagForm />", () => {
     await waitFor(() =>
       expect(onSubmit).toHaveBeenCalledWith({
         type: "foo",
-        target_type: "business_concept"
+        target_type: "business_concept",
       })
     );
   });

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ConceptImplementationLink /> matches the latest snapshot 1`] = `
+<div>
+  <a
+    href="/concepts/8/versions/current/links/implementations"
+  >
+    ConceptImplementationLink
+  </a>
+</div>
+`;

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

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ConfirmDeleteRelation /> matches the latest snapshot 1`] = `
+<div>
+  <i
+    aria-hidden="true"
+    class="red trash alternate outline icon"
+  />
+</div>
+`;

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ImplementationLinkRow /> matches the latest snapshot 1`] = `
+<div>
+  <table
+    class="ui table"
+  >
+    <tbody
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <td
+          class=""
+        />
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;

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

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ImplementationLinks /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui bottom attached segment"
+  >
+    <div
+      class="ui grid"
+    >
+      <div
+        class="sixteen wide column"
+      >
+        <a
+          class="ui primary right floated button"
+          href="/rules/2/implementations/4/links/new"
+          role="button"
+        >
+          create
+        </a>
+      </div>
+      <div
+        class="sixteen wide column"
+      >
+        <table
+          class="ui table"
+        >
+          <thead
+            class=""
+          >
+            <tr
+              class=""
+            >
+              <th
+                class=""
+              >
+                name
+              </th>
+              <th
+                class=""
+              >
+                tags
+              </th>
+              <th
+                class=""
+              >
+                domain
+              </th>
+              <th
+                class=""
+              />
+            </tr>
+          </thead>
+          <tbody
+            class=""
+          >
+            <tr
+              class=""
+            >
+              <td
+                class=""
+              >
+                <a
+                  href="/concepts/2/versions/current/links/implementations"
+                >
+                  name
+                </a>
+              </td>
+              <td
+                class=""
+              >
+                <ul
+                  class="concept-link-tags"
+                />
+              </td>
+              <td
+                class=""
+              >
+                domain
+              </td>
+              <td
+                class=""
+              >
+                <i
+                  aria-hidden="true"
+                  class="red trash alternate outline icon"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ImplementationRelationForm /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui bottom attached segment"
+    style="display: none;"
+  >
+    <div
+      class="ui grid"
+    >
+      <div
+        class="column"
+        with="16"
+      >
+        <h4
+          class="ui header"
+        >
+          header
+        </h4>
+        <div
+          class="field"
+          style="margin-bottom: 10px;"
+        >
+          <label>
+            relationType
+          </label>
+          <div
+            style="margin: 6px 0px;"
+          >
+            <div
+              class="ui toggle checkbox"
+            >
+              <input
+                class="hidden"
+                name="text"
+                readonly=""
+                tabindex="0"
+                type="checkbox"
+                value="2"
+              />
+              <label>
+                text
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="actions"
+        >
+          <a
+            class="ui secondary button"
+            href="/"
+            role="button"
+          >
+            cancel
+          </a>
+          <button
+            class="ui primary disabled button"
+            disabled=""
+            tabindex="-1"
+          >
+            create
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LinksPane /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui grid"
+  >
+    <div
+      class="row"
+    >
+      <div
+        class="column"
+      >
+        <button>
+          action
+        </button>
+      </div>
+    </div>
+    <div
+      class="row"
+    >
+      <div
+        class="column"
+      >
+        <h3
+          class="ui header"
+        >
+          Master title
+        </h3>
+        <table
+          class="ui table"
+        >
+          <thead
+            class=""
+          >
+            <tr
+              class=""
+            />
+          </thead>
+          <tbody
+            class=""
+          >
+            <tr
+              class=""
+            />
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

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

package/src/components/index.js

@@ -7,6 +7,7 @@ import RelationTagsLoader from "./RelationTagsLoader";
 import Relations from "./Relations";
 import RelationsLoader from "./RelationsLoader";
 import RelationsGraphLoader from "./RelationsGraphLoader";
+import ImplementationRelationForm from "./ImplementationRelationForm";
 import StructureLinks from "./StructureLinks";
 import StructureRelationForm from "./StructureRelationForm";
 import TagTypeSelector from "./TagTypeSelector";
@@ -26,6 +27,7 @@ export {
   Relations,
   RelationsLoader,
   RelationsGraphLoader,
+  ImplementationRelationForm,
   StructureLinks,
   StructureRelationForm,
   TagTypeSelector,
@@ -33,5 +35,5 @@ export {
   RelationRoutes,
   RelationTags,
   RelationTagCards,
-  NewRelationTag
+  NewRelationTag,
 };

package/src/messages/en.js

@@ -1,8 +1,8 @@
 export default {
+  "implementations.relation.new.header": "Link to Concept",
   "links.actions.create": "Add Link",
   "relations.actions.create": "Add relation",
   "relations.empty": "Not found relations",
-
   "relations.relationType": "Relation types",
   "relation.actions.delete.confirmation.header": "Delete Relation",
   "relation.actions.delete.confirmation.content":
@@ -19,6 +19,7 @@ export default {
   "relationTags.props.type.placeholder": "Type",
   "relationTags.props.target_type.placeholder": "Target type",
   "target_type.business_concept": "Concept",
+  "target_type.implementations": "Implementations",
   "target_type.ingest": "Ingest",
-  "target_type.data_field": "Structure"
+  "target_type.data_field": "Structure",
 };

package/src/messages/es.js

@@ -1,4 +1,6 @@
 export default {
+  "implementations.relation.new.header":
+    "Vas a vincular esta implementación a un término del glosario",
   "links.actions.create": "Añadir vinculación",
   "relations.actions.create": "Añadir relación",
   "relations.empty": "No se han encontrado relaciones",
@@ -19,6 +21,7 @@ export default {
   "relationTags.props.type.placeholder": "Código",
   "relationTags.props.target_type.placeholder": "Destino",
   "target_type.business_concept": "Concepto",
+  "target_type.implementations": "Implementaciones",
   "target_type.ingest": "Ingesta",
-  "target_type.data_field": "Estructura"
+  "target_type.data_field": "Estructura",
 };

package/src/sagas/__tests__/deleteRelation.spec.js

@@ -3,7 +3,7 @@ import { testSaga } from "redux-saga-test-plan";
 import { apiJsonDelete, JSON_OPTS } from "@truedat/core/services/api";
 import {
   deleteRelationSaga,
-  deleteRelationRequestSaga
+  deleteRelationRequestSaga,
 } from "../deleteRelation";
 import { deleteRelation } from "../../routines";
 import { API_RELATIONS_ID } from "../../api";
@@ -41,7 +41,7 @@ describe("sagas: deleteRelationSaga", () => {
         .put({ meta, ...deleteRelation.request() })
         .next()
         .call(apiJsonDelete, url, JSON_OPTS)
-        .next({ data: payload })
+        .next({ data: "" })
         .put({ meta, ...deleteRelation.success(payload) })
         .next()
         .put(deleteRelation.fulfill())

package/src/sagas/deleteRelation.js

@@ -12,8 +12,8 @@ export function* deleteRelationSaga({ payload }) {
     const meta = { id };
     const url = toApiPath(payload);
     yield put({ meta, ...deleteRelation.request() });
-    const { data } = yield call(apiJsonDelete, url, JSON_OPTS);
-    yield put({ meta, ...deleteRelation.success(data) });
+    yield call(apiJsonDelete, url, JSON_OPTS);
+    yield put({ meta, ...deleteRelation.success(payload) });
   } catch (error) {
     if (error.response) {
       const { status, data } = error.response;

package/src/selectors/__tests__/getImplementationToConceptLinks.js

@@ -0,0 +1,11 @@
+import { getImplementationToConceptLinks } from "..";
+
+const conceptLink = { resource_type: "concept" };
+describe("selectors: getGrantAvailableFilters", () => {
+  const implementationLinks = [conceptLink, { resource_type: "other" }];
+  const state = { implementationLinks };
+
+  it("should return implementation links with 'concept' resource_type", () => {
+    expect(getImplementationToConceptLinks(state)).toEqual([conceptLink]);
+  });
+});

package/src/selectors/getImplementationToConceptLinks.js

@@ -0,0 +1,9 @@
+import _ from "lodash/fp";
+import { createSelector } from "reselect";
+
+const getImplementationLinks = (state) => state.implementationLinks;
+
+export const getImplementationToConceptLinks = createSelector(
+  getImplementationLinks,
+  _.filter(_.propEq("resource_type", "concept"))
+);

package/src/selectors/index.js

@@ -1 +1,2 @@
 export * from "./getStructureLinks";
+export * from "./getImplementationToConceptLinks";