@truedat/lm 5.13.0 → 5.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/lm",
-  "version": "5.13.0",
+  "version": "5.13.2",
   "description": "Truedat Link Manager",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -86,7 +86,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "5.13.0",
+    "@truedat/core": "5.13.2",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
     "react-graph-vis": "1.0.6",
@@ -107,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "fb6c617448a53494b5031dbb8b8418d8f4cf19ba"
+  "gitHead": "f702ebedee85733e60b46b26fd468a18e93b8c20"
 }

package/src/components/ImplementationRelationForm.js

@@ -3,41 +3,35 @@ 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 { Button, Form, Grid, Header, Segment } from "semantic-ui-react";
 import { HistoryBackButton } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";
+import { makeTagOptionsSelector } from "@truedat/core/selectors";
 import { linkConcept } from "../routines";
 import RelationTagsLoader from "./RelationTagsLoader";
 
+const TagTypeDropdownSelector = React.lazy(() =>
+  import("@truedat/lm/components/TagTypeDropdownSelector")
+);
+
 const ConceptSelector = React.lazy(() =>
   import("@truedat/bg/concepts/relations/components/ConceptSelector")
 );
 
+const filters = {
+  current: [true],
+  status: ["pending_approval", "draft", "rejected", "published"],
+};
+
 export const ImplementationRelationForm = ({
   conceptLinking,
   implementation,
   tagOptions,
   linkConcept,
+  selectedRelationTags,
 }) => {
   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);
@@ -53,7 +47,7 @@ export const ImplementationRelationForm = ({
       source_type: "implementation_ref",
       target_id: selectedConcept.business_concept_id,
       target_type: "business_concept",
-      tag_ids: selectedTag ? selectedTag : [],
+      tag_ids: selectedRelationTags ? selectedRelationTags : [],
       context: {},
     };
     linkConcept(conceptLink);
@@ -72,44 +66,29 @@ export const ImplementationRelationForm = ({
           />
 
           {!_.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 className="concept-relation-form">
+              <TagTypeDropdownSelector options={tagOptions} />
             </Form.Field>
           ) : null}
           <ConceptSelector
             selectedConcept={selectedConcept}
             handleConceptSelected={handleConceptSelected}
+            defaultFilters={filters}
           />
 
           <div className="actions">
-            <HistoryBackButton
-              content={formatMessage({ id: "actions.cancel" })}
-              disabled={conceptLinking}
-            />
-
             <Button
               primary
               content={formatMessage({ id: "actions.create" })}
-              disabled={submitDisabled}
+              disabled={!selectedConcept}
               loading={conceptLinking}
               onClick={handleSubmit}
             />
+
+            <HistoryBackButton
+              content={formatMessage({ id: "actions.cancel" })}
+              disabled={conceptLinking}
+            />
           </div>
         </Grid.Column>
       </Grid>
@@ -122,26 +101,20 @@ ImplementationRelationForm.propTypes = {
   tagOptions: PropTypes.array,
   conceptLinking: PropTypes.bool,
   linkConcept: PropTypes.func,
+  selectedRelationTags: PropTypes.array,
 };
 
-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) == "implementations" ||
-        !_.path("value.target_type")
-    ),
-    tagsToOptions
-  )(state.relationTags),
-});
+const makeMapStateToProps = () => {
+  const getTagOptions = makeTagOptionsSelector("implementations");
+  const mapStateToProps = (state) => ({
+    tagOptions: getTagOptions(state),
+    conceptLinking: state.conceptLinking,
+    implementation: state.ruleImplementation,
+    selectedRelationTags: state.selectedRelationTags,
+  });
+  return mapStateToProps;
+};
 
-export default connect(mapStateToProps, { linkConcept })(
+export default connect(makeMapStateToProps, { linkConcept })(
   ImplementationRelationForm
 );

package/src/components/StructureRelationForm.js

@@ -1,11 +1,11 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { FormattedMessage, injectIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { connect } from "react-redux";
-import { compose } from "redux";
-import { Button, Grid, Header, Form, Checkbox } from "semantic-ui-react";
+import { Button, Grid, Header, Form } from "semantic-ui-react";
 import { HistoryBackButton } from "@truedat/core/components";
+import { makeTagOptionsSelector } from "@truedat/core/selectors";
 import { linkTo } from "@truedat/core/routes";
 import { linkConcept } from "../routines";
 import RelationTagsLoader from "./RelationTagsLoader";
@@ -14,139 +14,98 @@ const ConceptSelector = React.lazy(() =>
   import("@truedat/bg/concepts/relations/components/ConceptSelector")
 );
 
-export class StructureRelationForm extends React.Component {
-  state = {
-    selectedTag: [],
-    selectedConcept: null,
-  };
-  handleTagOnChange = (e, { value }) => {
-    const { selectedTag } = this.state;
-
-    const newSelectedTag = _.cond([
-      [_.includes(value), _.without([value])],
-      [_.stubTrue, _.concat(value)],
-    ])(selectedTag);
+const TagTypeDropdownSelector = React.lazy(() =>
+  import("@truedat/lm/components/TagTypeDropdownSelector")
+);
 
-    this.setState({ selectedTag: newSelectedTag });
-  };
-  handleConceptSelected = (selectedConcept) =>
-    this.setState({ selectedConcept });
+const filters = {
+  current: [true],
+  status: ["pending_approval", "draft", "rejected", "published"],
+};
 
-  handleSubmit = () => {
-    const { selectedConcept, selectedTag } = this.state;
-    const { structure, linkConcept } = this.props;
+export const StructureRelationForm = ({
+  structure,
+  tagOptions,
+  linkConcept,
+  selectedRelationTags,
+  conceptLinking,
+}) => {
+  const [selectedConcept, setSelectedConcept] = useState(null);
 
-    const redirectUrl = linkTo.STRUCTURE({ id: structure.id });
+  const handleConceptSelected = (selectedConcept) =>
+    setSelectedConcept(selectedConcept);
 
+  const handleSubmit = () => {
+    const redirectUrl = linkTo.STRUCTURE_LINKS({ id: structure.id });
     const conceptLink = {
       redirectUrl,
       source_id: selectedConcept.business_concept_id,
       source_type: "business_concept",
       target_id: structure.id,
       target_type: "data_structure",
-      tag_ids: selectedTag ? selectedTag : [],
+      tag_ids: selectedRelationTags ? selectedRelationTags : [],
       context: {},
     };
     linkConcept(conceptLink);
   };
 
-  render() {
-    const { selectedConcept } = this.state;
-    const {
-      conceptLinking,
-      intl: { formatMessage },
-      tagOptions,
-    } = this.props;
-    const submitDisabled = conceptLinking || !selectedConcept;
-
-    return (
-      <Grid>
-        <Grid.Column width={16}>
-          <RelationTagsLoader />
-          <Header
-            as="h4"
-            content={<FormattedMessage id="structures.relation.new.header" />}
+  return (
+    <Grid>
+      <Grid.Column width={16}>
+        <RelationTagsLoader />
+        <Header
+          as="h4"
+          content={<FormattedMessage id="structures.relation.new.header" />}
+        />
+
+        {!_.isEmpty(tagOptions) ? (
+          <Form.Field className="concept-relation-form">
+            <TagTypeDropdownSelector options={tagOptions} />
+          </Form.Field>
+        ) : null}
+
+        <ConceptSelector
+          selectedConcept={selectedConcept}
+          handleConceptSelected={handleConceptSelected}
+          defaultFilters={filters}
+        />
+
+        <div className="actions">
+          <Button
+            primary
+            content={<FormattedMessage id="actions.create" />}
+            disabled={!selectedConcept}
+            loading={conceptLinking}
+            onClick={handleSubmit}
           />
 
-          {!_.isEmpty(tagOptions) && (
-            <Form.Field style={{ marginBottom: "10px" }}>
-              <label>
-                <FormattedMessage 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.value}
-                    onChange={this.handleTagOnChange}
-                  />
-                </div>
-              ))}
-            </Form.Field>
-          )}
-
-          <ConceptSelector
-            loadConcepts={false}
-            selectedConcept={selectedConcept}
-            handleConceptSelected={this.handleConceptSelected}
+          <HistoryBackButton
+            content={<FormattedMessage id="actions.cancel" />}
           />
-          <div className="actions">
-            <HistoryBackButton
-              content={<FormattedMessage id="actions.cancel" />}
-              disabled={conceptLinking}
-            />
-            <Button
-              primary
-              content={<FormattedMessage id="actions.create" />}
-              disabled={submitDisabled}
-              loading={conceptLinking}
-              onClick={this.handleSubmit}
-            />
-          </div>
-        </Grid.Column>
-      </Grid>
-    );
-  }
-}
+        </div>
+      </Grid.Column>
+    </Grid>
+  );
+};
 
 StructureRelationForm.propTypes = {
   conceptLinking: PropTypes.bool,
-  intl: PropTypes.object,
   linkConcept: PropTypes.func,
   structure: PropTypes.object,
   tagOptions: PropTypes.array,
 };
 
-const tagsToOptions = _.map(({ id: value, value: { type } }) => ({
-  value,
-  text: type,
-}));
-
-const mapStateToProps = ({ conceptLinking, relationTags, structure }) => ({
-  conceptLinking,
-  tagOptions: _.flow(
-    _.filter(
-      (tag) =>
-        _.path("value.target_type")(tag) == "data_field" ||
-        !_.path("value.target_type")
-    ),
-    tagsToOptions
-  )(relationTags),
-  structure,
-});
+const makeMapStateToProps = () => {
+  const getTagOptions = makeTagOptionsSelector("data_field");
+  const mapStateToProps = (state) => ({
+    conceptLinking: state.conceptLinking,
+    tagOptions: getTagOptions(state),
+    selectedRelationTags: state.selectedRelationTags,
+    structure: state.structure,
+  });
+  return mapStateToProps;
+};
 
-export default compose(
-  injectIntl,
-  connect(mapStateToProps, { linkConcept })
-)(StructureRelationForm);
+export default connect(makeMapStateToProps, { linkConcept })(
+  StructureRelationForm
+);

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

@@ -1,33 +1,145 @@
-import React, { Suspense } from "react";
+import React from "react";
 import { render } from "@truedat/test/render";
+import { linkTo } from "@truedat/core/routes";
+import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
 import { ImplementationRelationForm } from "../ImplementationRelationForm";
+import en from "../../messages/en";
 
-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 linkConcept = jest.fn();
+
+const domain = {
+  external_id: "foo domain",
+  id: 381,
+  name: "foo domain",
+};
+
+const tagOptions = [
+  { id: 1, text: "relates_to", value: 0 },
+  { id: 2, text: "text", value: 1 },
+];
+
+const concepts = [
+  {
+    _actions: { can_create_structure_link: true },
+    business_concept_id: 2,
+    domain: domain,
+    id: 12355,
+    name: "foo concept",
+    status: "published",
+  },
+  {
+    _actions: { can_create_structure_link: true },
+    business_concept_id: 123,
+    domain: domain,
+    id: 12290,
+    name: "bar concept",
+    status: "draft",
+  },
+];
+
+const props = {
+  implementation: { rule_id: 2, id: 4, implementation_ref: 1 },
+  tagOptions,
+  conceptLinking: false,
+  linkConcept,
+  selectedRelationTags: [1],
+};
+
+const renderOpts = {
+  messages: {
+    en: {
+      ...en,
+      "implementations.relation.new.header": "header",
+      "conceptRelations.relationType": "relationType",
+      "actions.cancel": "Cancel",
+      "actions.create": "Create",
+      "conceptRelations.relationType.text": "text",
+      "concepts.props.name": "Name",
+      "concepts.props.domain": "Domain",
+      "concepts.props.status": "Status",
+      "search.save_filters": "Save Filters",
+      "search.clear_filters": "Clear Filters",
+      "search.applied_filters": "Applied Filters",
+      "conceptRelations.relatedConcept": "Related Concept",
+      "concepts.search.placeholder": "Search",
     },
-  };
-
-  const props = {
-    implementation: { rule_id: 2, id: 4, implementation_ref: 1 },
-    tagOptions: [{ id: 2, text: "text" }],
-    conceptLinking: false,
-    linkConcept: () => {},
-  };
-  it("matches the latest snapshot", () => {
-    const { container } = render(
-      <Suspense fallback={null}>
-        <ImplementationRelationForm {...props} />
-      </Suspense>,
+  },
+  state: {
+    concepts,
+    conceptActiveFilters: { filter: "some" },
+  },
+  fallback: "lazy",
+};
+
+describe("<ImplementationRelationForm />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container, getByText } = render(
+      <ImplementationRelationForm {...props} />,
+
       renderOpts
     );
+
+    await waitFor(() => {
+      expect(getByText(/relates_to/)).toBeInTheDocument();
+    });
     expect(container).toMatchSnapshot();
   });
+
+  it("disables submit and shows loading state if concept is linking", async () => {
+    const newProps = {
+      ...props,
+      conceptLinking: true,
+    };
+
+    const { queryByText, queryByRole, getByText, findByRole, findByText } =
+      render(<ImplementationRelationForm {...newProps} />, renderOpts);
+
+    await waitFor(() => {
+      expect(getByText(/relates_to/)).toBeInTheDocument();
+    });
+
+    expect(queryByRole("button", { name: /Create/ })).toBeDisabled();
+    userEvent.click(await findByText(/relates_to/));
+    userEvent.click(await queryByText(/bar concept/));
+
+    await waitFor(() => {
+      expect(queryByRole("button", { name: /Create/ })).toBeEnabled();
+    });
+
+    userEvent.click(await findByRole("button", { name: /Create/ }));
+
+    await waitFor(() => {
+      expect(queryByRole("button", { name: /Create/ })).toHaveClass("loading");
+    });
+  });
+
+  it("submits the selected relation", async () => {
+    const { queryByText, getByText, findByRole, findByText } = render(
+      <ImplementationRelationForm {...props} />,
+      renderOpts
+    );
+
+    await waitFor(() => {
+      expect(getByText(/relates_to/)).toBeInTheDocument();
+    });
+
+    userEvent.click(await findByText(/relates_to/));
+    userEvent.click(await queryByText(/bar concept/));
+
+    userEvent.click(await findByRole("button", { name: /Create/ }));
+
+    const expectedRelation = {
+      redirectUrl: linkTo.IMPLEMENTATION_CONCEPT_LINKS({
+        implementation_id: 4,
+      }),
+      source_id: 1,
+      source_type: "implementation_ref",
+      target_id: 123,
+      target_type: "business_concept",
+      tag_ids: [1],
+      context: {},
+    };
+    expect(linkConcept.mock.calls[0][0]).toEqual(expectedRelation);
+  });
 });

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

@@ -1,108 +1,148 @@
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
 import { linkTo } from "@truedat/core/routes";
+import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
 import { StructureRelationForm } from "../StructureRelationForm";
+import en from "../../messages/en";
+
+const linkConcept = jest.fn();
+
+const domain = {
+  external_id: "foo domain",
+  id: 381,
+  name: "foo domain",
+};
+
+const concepts = [
+  {
+    _actions: { can_create_structure_link: true },
+    business_concept_id: 2,
+    domain: domain,
+    id: 12355,
+    name: "foo concept",
+    status: "published",
+  },
+  {
+    _actions: { can_create_structure_link: true },
+    business_concept_id: 123,
+    domain: domain,
+    id: 12290,
+    name: "bar concept",
+    status: "draft",
+  },
+];
+
+const tagOptions = [
+  { id: 1, text: "relates_to", value: 0 },
+  { id: 2, text: "text", value: 1 },
+];
+
+const structure = {
+  group: "s_group",
+  system: { name: "sys_name" },
+  name: "s_name",
+  id: 3,
+};
+
+const props = {
+  tagOptions,
+  structure,
+  linkConcept,
+  selectedRelationTags: [1],
+};
+const messages = {
+  en: {
+    ...en,
+    "structures.relation.new.header": "Header",
+    "actions.create": "Create",
+    "actions.cancel": "Cancel",
+    "concepts.props.name": "Name",
+    "concepts.props.domain": "Domain",
+    "concepts.props.status": "Status",
+    "search.save_filters": "Save Filters",
+    "search.clear_filters": "Clear Filters",
+    "search.applied_filters": "Applied Filters",
+    "conceptRelations.relatedConcept": "Related Concept",
+    "concepts.search.placeholder": "Search",
+  },
+};
+
+const renderOpts = {
+  messages,
+  state: {
+    structure,
+    concepts,
+    conceptActiveFilters: { filter: "some" },
+  },
+  fallback: "lazy",
+};
 
 describe("<StructureRelationForm />", () => {
-  it("matches the latest snapshot", () => {
-    const props = {
-      tagOptions: [],
-      structureField: {},
-      structure: {},
-      linkConcept: jest.fn()
-    };
-    const wrapper = shallowWithIntl(<StructureRelationForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
+  it("matches the latest snapshot", async () => {
+    const { container, getByText } = render(
+      <StructureRelationForm {...props} />,
+      renderOpts
+    );
 
-  it("disables submit and shows loading state if concept is linking", () => {
-    const props = {
-      tagOptions: [],
-      structureField: {},
-      structure: {},
-      conceptLinking: true
-    };
-    const wrapper = shallowWithIntl(<StructureRelationForm {...props} />);
-    const submitButton = wrapper.find(".actions").find("Button[primary=true]");
-    expect(submitButton.prop("loading")).toBe(true);
-    expect(submitButton.prop("disabled")).toBe(true);
+    await waitFor(() => {
+      expect(getByText(/relates_to/)).toBeInTheDocument();
+    });
+
+    expect(container).toMatchSnapshot();
   });
 
-  it("handles tag and concept selection", () => {
-    const props = {
-      tagOptions: [
-        { text: "-", value: 0 },
-        { text: "relates to", value: 1 }
-      ],
-      structureField: {},
-      structure: {},
-      linkConcept: jest.fn()
+  it("disables submit and shows loading state if concept is linking", async () => {
+    const newProps = {
+      ...props,
+      conceptLinking: true,
     };
-    const wrapper = shallowWithIntl(<StructureRelationForm {...props} />);
 
-    const selectedTag = [1];
-    const selectedConcept = { business_concept_id: 123, id: 2 };
-    const expectedState = { selectedTag, selectedConcept };
+    const { queryByText, queryByRole, getByText, findByRole, findByText } =
+      render(<StructureRelationForm {...newProps} />, renderOpts);
 
-    wrapper
-      .find("Checkbox")
-      .at(0)
-      .prop("onChange")(null, { value: selectedTag });
+    await waitFor(() => {
+      expect(getByText(/relates_to/)).toBeInTheDocument();
+    });
 
-    wrapper
-      .findWhere(n => n.prop("handleConceptSelected"))
-      .prop("handleConceptSelected")(selectedConcept);
+    expect(queryByRole("button", { name: /Create/ })).toBeDisabled();
+    userEvent.click(await findByText(/relates_to/));
+    userEvent.click(await queryByText(/bar concept/));
 
-    expect(wrapper.state()).toEqual(expectedState);
-  });
+    await waitFor(() => {
+      expect(queryByRole("button", { name: /Create/ })).toBeEnabled();
+    });
 
-  it("submits the selected relation", () => {
-    const linkConcept = jest.fn();
-    const props = {
-      linkConcept,
-      tagOptions: [
-        { text: "-", value: 0 },
-        { text: "relates to", value: 2 }
-      ],
-      structure: {
-        group: "s_group",
-        system: { name: "sys_name" },
-        name: "s_name",
-        id: 3
-      },
-      structureField: { id: 545, name: "f_name" }
-    };
-    const wrapper = shallowWithIntl(<StructureRelationForm {...props} />);
+    userEvent.click(await findByRole("button", { name: /Create/ }));
 
-    const selectedConcept = { business_concept_id: 123, id: 2 };
+    await waitFor(() => {
+      expect(queryByRole("button", { name: /Create/ })).toHaveClass("loading");
+    });
+  });
 
-    wrapper
-      .find("Checkbox")
-      .at(0)
-      .prop("onChange")(null, { value: 0 });
+  it("submits the selected relation", async () => {
+    const { queryByText, getByText, findByRole, findByText } = render(
+      <StructureRelationForm {...props} />,
+      renderOpts
+    );
 
-    wrapper
-      .find("Checkbox")
-      .at(1)
-      .prop("onChange")(null, { value: 2 });
+    await waitFor(() => {
+      expect(getByText(/relates_to/)).toBeInTheDocument();
+    });
 
-    wrapper
-      .findWhere(n => n.prop("handleConceptSelected"))
-      .prop("handleConceptSelected")(selectedConcept);
+    userEvent.click(await findByText(/relates_to/));
+    userEvent.click(await queryByText(/bar concept/));
 
-    wrapper
-      .find("Button")
-      .find({ primary: true })
-      .prop("onClick")();
+    userEvent.click(await findByRole("button", { name: /Create/ }));
 
     const expectedRelation = {
-      redirectUrl: linkTo.STRUCTURE({ id: 3 }),
+      redirectUrl: linkTo.STRUCTURE_LINKS({ id: 3 }),
       source_id: 123,
       source_type: "business_concept",
       target_id: 3,
       target_type: "data_structure",
-      tag_ids: [2, 0],
-      context: {}
+      tag_ids: [1],
+      context: {},
     };
     expect(linkConcept.mock.calls[0][0]).toEqual(expectedRelation);
   });

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

@@ -4,7 +4,7 @@ exports[`<ImplementationRelationForm /> matches the latest snapshot 1`] = `
 <div>
   <div
     class="ui bottom attached segment"
-    style="display: none;"
+    style=""
   >
     <div
       class="ui grid"
@@ -19,49 +19,244 @@ exports[`<ImplementationRelationForm /> matches the latest snapshot 1`] = `
           header
         </h4>
         <div
-          class="field"
-          style="margin-bottom: 10px;"
+          class="field concept-relation-form"
         >
-          <label>
-            relationType
-          </label>
           <div
-            style="margin: 6px 0px;"
+            class="field"
           >
+            <b>
+              <label>
+                Relation types
+              </label>
+            </b>
+            <div>
+              <div
+                aria-expanded="false"
+                class="ui selection dropdown concept-link-dropdown"
+                role="listbox"
+                tabindex="0"
+              >
+                <i
+                  aria-hidden="true"
+                  class="dropdown icon"
+                />
+                <div
+                  class="menu transition"
+                >
+                  <div
+                    aria-checked="false"
+                    aria-selected="true"
+                    class="selected item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
+                    <span
+                      class="text"
+                    >
+                      relates_to
+                    </span>
+                  </div>
+                  <div
+                    aria-checked="false"
+                    aria-selected="false"
+                    class="item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
+                    <span
+                      class="text"
+                    >
+                      text
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <label>
+          Related Concept
+        </label>
+        <div
+          class="ui segment"
+        >
+          <div
+            class="ui action left icon input"
+          >
+            <input
+              placeholder="Search"
+              type="text"
+              value=""
+            />
+            <i
+              aria-hidden="true"
+              class="search link icon"
+            />
             <div
-              class="ui toggle checkbox"
+              aria-expanded="false"
+              class="ui button floating labeled scrolling dropdown icon"
+              role="listbox"
+              tabindex="0"
             >
-              <input
-                class="hidden"
-                name="text"
-                readonly=""
-                tabindex="0"
-                type="checkbox"
-                value="2"
+              <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"
+            >
+              Applied 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"
               />
-              <label>
-                text
-              </label>
             </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=""
+                >
+                  Name
+                </th>
+                <th
+                  class=""
+                >
+                  Domain
+                </th>
+                <th
+                  class=""
+                >
+                  Status
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class=""
+            >
+              <tr
+                class=""
+              >
+                <td
+                  class=""
+                >
+                  foo concept
+                </td>
+                <td
+                  class=""
+                >
+                  foo domain
+                </td>
+                <td
+                  class=""
+                >
+                  <div
+                    class="ui green label"
+                  >
+                    published
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class=""
+              >
+                <td
+                  class=""
+                >
+                  bar concept
+                </td>
+                <td
+                  class=""
+                >
+                  foo domain
+                </td>
+                <td
+                  class=""
+                >
+                  <div
+                    class="ui olive label"
+                  >
+                    draft
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
         <div
           class="actions"
         >
-          <a
-            class="ui secondary button"
-            href="/"
-            role="button"
-          >
-            cancel
-          </a>
           <button
             class="ui primary disabled button"
             disabled=""
             tabindex="-1"
           >
-            create
+            Create
           </button>
+          <a
+            class="ui secondary button"
+            href="/"
+            role="button"
+          >
+            Cancel
+          </a>
         </div>
       </div>
     </div>

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

@@ -1,46 +1,260 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StructureRelationForm /> matches the latest snapshot 1`] = `
-<Grid>
-  <GridColumn
-    width={16}
+<div>
+  <div
+    class="ui grid"
+    style=""
   >
-    <Connect(RelationTagsLoader) />
-    <Header
-      as="h4"
-      content={
-        <Memo(MemoizedFormattedMessage)
-          id="structures.relation.new.header"
-        />
-      }
-    />
-    <lazy
-      handleConceptSelected={[Function]}
-      loadConcepts={false}
-      selectedConcept={null}
-    />
     <div
-      className="actions"
+      class="sixteen wide column"
     >
-      <HistoryBackButton
-        content={
-          <Memo(MemoizedFormattedMessage)
-            id="actions.cancel"
+      <h4
+        class="ui header"
+      >
+        Header
+      </h4>
+      <div
+        class="field concept-relation-form"
+      >
+        <div
+          class="field"
+        >
+          <b>
+            <label>
+              Relation types
+            </label>
+          </b>
+          <div>
+            <div
+              aria-expanded="false"
+              class="ui selection dropdown concept-link-dropdown"
+              role="listbox"
+              tabindex="0"
+            >
+              <i
+                aria-hidden="true"
+                class="dropdown icon"
+              />
+              <div
+                class="menu transition"
+              >
+                <div
+                  aria-checked="false"
+                  aria-selected="true"
+                  class="selected item"
+                  role="option"
+                  style="pointer-events: all;"
+                >
+                  <span
+                    class="text"
+                  >
+                    relates_to
+                  </span>
+                </div>
+                <div
+                  aria-checked="false"
+                  aria-selected="false"
+                  class="item"
+                  role="option"
+                  style="pointer-events: all;"
+                >
+                  <span
+                    class="text"
+                  >
+                    text
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <label>
+        Related Concept
+      </label>
+      <div
+        class="ui segment"
+      >
+        <div
+          class="ui action left icon input"
+        >
+          <input
+            placeholder="Search"
+            type="text"
+            value=""
           />
-        }
-      />
-      <Button
-        as="button"
-        content={
-          <Memo(MemoizedFormattedMessage)
-            id="actions.create"
+          <i
+            aria-hidden="true"
+            class="search link icon"
           />
-        }
-        disabled={true}
-        onClick={[Function]}
-        primary={true}
-      />
+          <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"
+          >
+            Applied 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=""
+              >
+                Name
+              </th>
+              <th
+                class=""
+              >
+                Domain
+              </th>
+              <th
+                class=""
+              >
+                Status
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class=""
+          >
+            <tr
+              class=""
+            >
+              <td
+                class=""
+              >
+                foo concept
+              </td>
+              <td
+                class=""
+              >
+                foo domain
+              </td>
+              <td
+                class=""
+              >
+                <div
+                  class="ui green label"
+                >
+                  published
+                </div>
+              </td>
+            </tr>
+            <tr
+              class=""
+            >
+              <td
+                class=""
+              >
+                bar concept
+              </td>
+              <td
+                class=""
+              >
+                foo domain
+              </td>
+              <td
+                class=""
+              >
+                <div
+                  class="ui olive label"
+                >
+                  draft
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div
+        class="actions"
+      >
+        <button
+          class="ui primary disabled button"
+          disabled=""
+          tabindex="-1"
+        >
+          Create
+        </button>
+        <a
+          class="ui secondary button"
+          href="/"
+          role="button"
+        >
+          Cancel
+        </a>
+      </div>
     </div>
-  </GridColumn>
-</Grid>
+  </div>
+</div>
 `;