@truedat/bg 5.8.1 → 5.8.2

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

@@ -1,49 +1,44 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { injectIntl } from "react-intl";
-import { compose } from "redux";
-import { Button, Form, Checkbox } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Button, Form } 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 ConceptSelector from "./ConceptSelector";
 
+const TagTypeDropdownSelector = React.lazy(() =>
+  import("@truedat/lm/components/TagTypeDropdownSelector")
+);
+
 const filters = {
   current: [true],
   status: ["pending_approval", "draft", "rejected", "published"],
 };
 
-export class ConceptRelationForm extends React.Component {
-  state = {
-    selectedTag: [],
-    selectedConcept: null,
-  };
-  handleTagOnChange = (e, { value }) => {
-    const { selectedTag } = this.state;
+export const pickConceptAttrs = _.pick([
+  "name",
+  "business_concept_id",
+  "id",
+  "version",
+]);
 
-    const newSelectedTag = _.cond([
-      [_.includes(value), _.without([value])],
-      [_.stubTrue, _.concat(value)],
-    ])(selectedTag);
+export const ConceptRelationForm = ({
+  concept,
+  tagOptions,
+  linkConcept,
+  selectedRelationTags,
+}) => {
+  const { formatMessage } = useIntl();
+  const [selectedConcept, setSelectedConcept] = useState(null);
 
-    this.setState({ selectedTag: newSelectedTag });
-  };
-  handleConceptSelected = (selectedConcept) =>
-    this.setState({ selectedConcept });
-  handleSubmit = () => {
-    const pickConceptAttrs = _.pick([
-      "name",
-      "business_concept_id",
-      "id",
-      "version",
-    ]);
-    const { selectedConcept, selectedTag } = this.state;
-    const { concept } = this.props;
+  const handleConceptSelected = (selectedConcept) =>
+    setSelectedConcept(selectedConcept);
 
+  const handleSubmit = () => {
     const redirectUrl = linkTo.CONCEPT_LINKS_CONCEPTS(concept);
 
     const conceptLink = {
@@ -52,77 +47,46 @@ export class ConceptRelationForm extends React.Component {
       source_type: "business_concept",
       target_id: selectedConcept.business_concept_id,
       target_type: "business_concept",
-      tag_ids: selectedTag ? selectedTag : [],
+      tag_ids: selectedRelationTags ? selectedRelationTags : [],
       context: {
         target: pickConceptAttrs(selectedConcept),
         source: pickConceptAttrs(concept),
       },
     };
-    this.props.linkConcept(conceptLink);
+    linkConcept(conceptLink);
   };
 
-  render() {
-    const {
-      tagOptions,
-      concept: { business_concept_id },
-      intl: { formatMessage },
-    } = this.props;
-
-    const { selectedConcept, selectedTag } = this.state;
-    return (
-      <>
-        {!_.isEmpty(tagOptions) && (
-          <Form.Field className="concept-relation-form">
-            <label>
-              <FormattedMessage id="conceptRelations.relationType" />
-            </label>
-
-            {tagOptions.map((tagOption, key) => (
-              <div key={key} className="concept-relation-form__field">
-                <Checkbox
-                  toggle
-                  label={formatMessage({
-                    id: `source.${tagOption.text}`,
-                    defaultMessage: formatMessage({
-                      id: tagOption.text,
-                      defaultMessage: tagOption.text,
-                    }),
-                  })}
-                  name={tagOption.text}
-                  value={tagOption.value}
-                  onChange={this.handleTagOnChange}
-                />
-              </div>
-            ))}
-          </Form.Field>
-        )}
-        <ConceptSelector
-          selectedConcept={selectedConcept}
-          handleConceptSelected={this.handleConceptSelected}
-          businessConceptId={business_concept_id}
-          defaultFilters={filters}
+  return (
+    <>
+      {!_.isEmpty(tagOptions) ? (
+        <Form.Field className="concept-relation-form">
+          <TagTypeDropdownSelector options={tagOptions} />
+        </Form.Field>
+      ) : null}
+      <ConceptSelector
+        selectedConcept={selectedConcept}
+        handleConceptSelected={handleConceptSelected}
+        businessConceptId={concept.business_concept_id}
+        defaultFilters={filters}
+      />
+      <Button.Group>
+        <Button
+          primary
+          content={<FormattedMessage id="actions.create" />}
+          disabled={!selectedConcept}
+          onClick={handleSubmit}
         />
-        <Button.Group>
-          <Button
-            primary
-            content={<FormattedMessage id="actions.create" />}
-            disabled={!selectedConcept || _.isEmpty(selectedTag)}
-            onClick={this.handleSubmit}
-          />
-          <HistoryBackButton
-            content={formatMessage({ id: "actions.cancel" })}
-          />
-        </Button.Group>
-      </>
-    );
-  }
-}
+        <HistoryBackButton content={formatMessage({ id: "actions.cancel" })} />
+      </Button.Group>
+    </>
+  );
+};
 
 ConceptRelationForm.propTypes = {
   tagOptions: PropTypes.array,
   concept: PropTypes.object,
-  intl: PropTypes.object,
   linkConcept: PropTypes.func,
+  selectedRelationTags: PropTypes.array,
 };
 
 const makeMapStateToProps = () => {
@@ -130,11 +94,11 @@ const makeMapStateToProps = () => {
   const mapStateToProps = (state) => ({
     tagOptions: getTagOptions(state),
     concept: state.concept,
+    selectedRelationTags: state.selectedRelationTags,
   });
   return mapStateToProps;
 };
 
-export default compose(
-  injectIntl,
-  connect(makeMapStateToProps, { linkConcept })
-)(ConceptRelationForm);
+export default connect(makeMapStateToProps, { linkConcept })(
+  ConceptRelationForm
+);

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

@@ -17,13 +17,32 @@ const filters = {
   status: ["pending_approval", "draft", "rejected", "published"],
 };
 
-const ConceptSelectorRow = ({ concept, active, onClick, disabled }) => {
+const isPositive = (links, id, selectedId) => {
+  const link =
+    id === selectedId
+      ? false
+      : _.find(
+          (link) =>
+            _.propEq("target_id", id)(link) &&
+            _.propEq("target_type", "business_concept")(link)
+        )(links);
+  return link ? true : false;
+};
+
+const ConceptSelectorRow = ({
+  concept,
+  active,
+  onClick,
+  disabled,
+  positive,
+}) => {
   const { name, status, domain } = concept;
   return (
     <Table.Row
       disabled={disabled}
       active={active}
       onClick={() => onClick && onClick(concept)}
+      positive={positive}
     >
       <Table.Cell content={name} />
       <Table.Cell content={domain?.name} />
@@ -48,6 +67,7 @@ ConceptSelectorRow.propTypes = {
   active: PropTypes.bool,
   onClick: PropTypes.func,
   disabled: PropTypes.bool,
+  positive: PropTypes.bool,
 };
 
 export const ConceptSelector = ({
@@ -59,6 +79,7 @@ export const ConceptSelector = ({
   pageSize = 7,
   selectedConcept,
   showTitle = true,
+  links,
 }) => {
   const selectedConceptIsFiltered = !_.reduce(
     (acc, c) => (selectedConcept && c.id == selectedConcept.id) || acc,
@@ -114,6 +135,11 @@ export const ConceptSelector = ({
                   concept={s}
                   active={selectedConcept && selectedConcept.id == s.id}
                   onClick={handleConceptSelected}
+                  positive={isPositive(
+                    links,
+                    s.business_concept_id,
+                    businessConceptId
+                  )}
                 />
               ))}
               {selectedConcept && selectedConceptIsFiltered && (
@@ -141,6 +167,7 @@ ConceptSelector.propTypes = {
   pageSize: PropTypes.number,
   selectedConcept: PropTypes.object,
   showTitle: PropTypes.bool,
+  links: PropTypes.array,
 };
 
 const mapStateToProps = ({ concepts }) => ({ concepts });

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

@@ -1,90 +1,129 @@
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { linkTo } from "@truedat/core/routes";
 import { ConceptRelationForm } from "../ConceptRelationForm";
+import en from "../../../../messages/en";
 
-describe("<ConceptRelationForm />", () => {
-  it("matches the latest snapshot", () => {
-    const props = {
-      tagOptions: [{ text: "-", value: 0 }],
-      concept: {}
-    };
-    const wrapper = shallowWithIntl(<ConceptRelationForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
+const linkConcept = jest.fn();
 
-  it("handles tag and concept selection", () => {
-    const props = {
-      tagOptions: [
-        { text: "-", value: 0 },
-        { text: "relates to", value: 1 }
-      ],
-      concept: {}
-    };
-    const wrapper = shallowWithIntl(<ConceptRelationForm {...props} />);
+const domain = {
+  external_id: "foo domain",
+  id: 381,
+  name: "foo domain",
+};
+
+const concepts = [
+  {
+    business_concept_id: 2,
+    domain: domain,
+    id: 12355,
+    name: "foo concept",
+    status: "published",
+  },
+  {
+    business_concept_id: 3,
+    domain: domain,
+    id: 12290,
+    name: "bar concept",
+    status: "draft",
+  },
+];
+
+const concept = {
+  id: 1,
+  business_concept_id: 543,
+};
 
-    const selectedTag = [1];
-    const selectedConcept = { business_concept_id: 123, id: 2 };
-    const expectedState = { selectedTag, selectedConcept };
+const tagOptions = [
+  { value: 0, text: "-" },
+  { value: 1, text: "relates_to" },
+];
 
-    wrapper
-      .find("Checkbox")
-      .at(1)
-      .prop("onChange")(null, { value: selectedTag });
+const props = {
+  tagOptions,
+  concept,
+  linkConcept,
+  selectedRelationTags: [1],
+};
 
-    wrapper
-      .findWhere(n => n.prop("handleConceptSelected"))
-      .prop("handleConceptSelected")(selectedConcept);
+const renderOpts = {
+  messages: {
+    en: {
+      ...en,
+      "actions.create": "create",
+      "actions.cancel": "cancel",
+      "search.save_filters": "save filters",
+      "search.clear_filters": "clear filters",
+      "search.applied_filters": "applied filters",
+      "relations.relationType": "relation type",
+    },
+  },
+  state: {
+    conceptActiveFilters: { filter: "some" },
+    concepts,
+    tagOptions,
+  },
+  fallback: "lazy",
+};
 
-    expect(wrapper.state()).toEqual(expectedState);
+describe("<ConceptRelationForm />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <ConceptRelationForm {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
   });
 
-  it("submits the selected relation", () => {
-    const linkConcept = jest.fn();
-    const concept = { business_concept_id: 543, id: 3 };
-    const props = {
-      linkConcept,
-      tagOptions: [
-        { text: "-", value: 0 },
-        { text: "relates to", value: 2 }
-      ],
-      concept
-    };
-    const wrapper = shallowWithIntl(<ConceptRelationForm {...props} />);
+  it("handles tag and concept selection", async () => {
+    const { findByText, findByRole, getByRole } = render(
+      <ConceptRelationForm {...props} />,
+      renderOpts
+    );
+    await waitFor(() => {
+      expect(getByRole("button", { name: "create" })).toBeDisabled();
+    });
 
-    const selectedConcept = { business_concept_id: 123, id: 2 };
+    userEvent.click(await findByText("bar concept"));
+
+    userEvent.click(await findByRole("option", { name: "relates_to" }));
+
+    await waitFor(() => {
+      expect(getByRole("button", { name: "create" })).toBeEnabled();
+    });
+  });
 
-    wrapper
-      .find("Checkbox")
-      .at(0)
-      .prop("onChange")(null, { value: 0 });
+  it("submits the selected relation", async () => {
+    const { findByText, findByRole, getByRole } = render(
+      <ConceptRelationForm {...props} />,
+      renderOpts
+    );
+    userEvent.click(await findByText("bar concept"));
 
-    wrapper
-      .find("Checkbox")
-      .at(1)
-      .prop("onChange")(null, { value: 2 });
+    userEvent.click(await findByRole("option", { name: "relates_to" }));
 
-    wrapper
-      .findWhere(n => n.prop("handleConceptSelected"))
-      .prop("handleConceptSelected")(selectedConcept);
+    await waitFor(() => {
+      expect(getByRole("button", { name: "create" })).toBeEnabled();
+    });
 
-    wrapper
-      .find("Button")
-      .find({ primary: true })
-      .prop("onClick")();
+    userEvent.click(await getByRole("button", { name: "create" }));
 
     const expectedRelation = {
       redirectUrl: linkTo.CONCEPT_LINKS_CONCEPTS(concept),
       source_id: 543,
       source_type: "business_concept",
-      target_id: 123,
+      target_id: 3,
       target_type: "business_concept",
-      tag_ids: [2, 0],
+      tag_ids: [1],
       context: {
-        target: { business_concept_id: 123, id: 2 },
-        source: { business_concept_id: 543, id: 3 }
-      }
+        target: { business_concept_id: 3, id: 12290, name: "bar concept" },
+        source: { business_concept_id: 543, id: 1 },
+      },
     };
-    expect(linkConcept.mock.calls[0][0]).toEqual(expectedRelation);
+    await waitFor(() =>
+      expect(linkConcept).toHaveBeenCalledWith(expectedRelation)
+    );
   });
 });