@truedat/bg 5.8.1 → 5.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "5.8.1",
+  "version": "5.8.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.8.1",
+    "@truedat/test": "5.8.3",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -86,9 +86,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "5.8.1",
-    "@truedat/df": "5.8.1",
-    "@truedat/lm": "5.8.1",
+    "@truedat/core": "5.8.3",
+    "@truedat/df": "5.8.3",
+    "@truedat/lm": "5.8.3",
     "decode-uri-component": "^0.2.2",
     "file-saver": "^2.0.5",
     "moment": "^2.29.4",
@@ -111,5 +111,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "aacafb9e014ac8d1193a5dc2a37c92ea36c3d816"
+  "gitHead": "36771348dbfbdb680f5694454d7549bca927cbaa"
 }

package/src/concepts/components/ConceptLinksDropdownSelector.js

@@ -0,0 +1,55 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Form, Dropdown } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+const formatOption = (formatMessage) => (options) =>
+  _.flow(
+    _.map(({ value, text }) =>
+      _.isNil(text) || text == ""
+        ? { value, text }
+        : {
+            value,
+            text: formatMessage({
+              id: `conceptRelations.${text}`,
+              defaultMessage: formatMessage({ id: text, defaultMessage: text }),
+            }),
+          }
+    )
+  )(options);
+
+export const ConceptLinksDropdownSelector = ({
+  defaultOption,
+  options,
+  handleChange,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Form.Field>
+      <label>
+        <b>
+          <FormattedMessage id="conceptRelations.linkType" />
+        </b>
+      </label>
+      <div>
+        <Dropdown
+          className="concept-link-dropdown"
+          value={defaultOption}
+          selection
+          options={formatOption(formatMessage)(options)}
+          onChange={(_e, { value }) => handleChange(value)}
+        />
+      </div>
+    </Form.Field>
+  );
+};
+
+ConceptLinksDropdownSelector.propTypes = {
+  setSelectedLinkType: PropTypes.func,
+  options: PropTypes.array,
+  defaultOption: PropTypes.string,
+};
+
+export default ConceptLinksDropdownSelector;

package/src/concepts/components/ConceptsLinksManagement.js

@@ -18,6 +18,12 @@ import {
 import { createRelation, deleteRelation } from "@truedat/core/routines";
 import ConceptSelector from "../relations/components/ConceptSelector";
 import { fetchConcepts } from "../routines";
+import { pickConceptAttrs } from "../relations/components/ConceptRelationForm";
+import ConceptLinksDropdownSelector from "./ConceptLinksDropdownSelector";
+import ConceptUserFiltersLoader from "./ConceptUserFiltersLoader";
+const RelationsLoader = React.lazy(() =>
+  import("@truedat/lm/components/RelationsLoader")
+);
 
 const TagTypeDropdownSelector = React.lazy(() =>
   import("@truedat/lm/components/TagTypeDropdownSelector")
@@ -32,12 +38,19 @@ const linksDefaultFilters = {
   status: ["pending_approval", "draft", "rejected", "published"],
 };
 
+const linkOptions = [
+  { value: "structures", text: "structures" },
+  { value: "concepts", text: "concepts" },
+];
+
 const STATUS_PENDING = "pending";
 const STATUS_CREATED = "created";
 const STATUS_DELETED = "deleted";
 
 const LinkedMessage = ({
-  selectedConcept,
+  selectedSourceConcept,
+  selectedTargetConcept,
+  selectedLinkType,
   selectedStructure,
   selectedTag,
   status,
@@ -54,27 +67,41 @@ const LinkedMessage = ({
     <Message success={status !== STATUS_PENDING} floating>
       <Message.Header>{messagesMap[status]}</Message.Header>
       <Message.List>
-        {selectedConcept ? (
+        {selectedSourceConcept ? (
           <Message.Item>
-            {formatMessage({ id: "conceptRelations.concept" })}
-            {": "} {selectedConcept.name}
+            {formatMessage({ id: "conceptRelations.from" })}
+            {": "} {selectedSourceConcept.name}
           </Message.Item>
         ) : null}
         {selectedStructure ? (
           <Message.Item>
-            {formatMessage({ id: "conceptRelations.structure" })}
+            {formatMessage({ id: "conceptRelations.to" })}
             {": "}
             {selectedStructure.name}
           </Message.Item>
+        ) : selectedTargetConcept ? (
+          <Message.Item>
+            {formatMessage({ id: "conceptRelations.to" })}
+            {": "}
+            {selectedTargetConcept.name}
+          </Message.Item>
         ) : null}
         {selectedTag ? (
           <Message.Item>
             {formatMessage({ id: "conceptRelations.tag" })}
             {": "}
-            {formatMessage({
-              id: selectedTag.text,
-              defaultMessage: selectedTag.text,
-            })}
+            {selectedLinkType === "structures"
+              ? formatMessage({
+                  id: selectedTag.text,
+                  defaultMessage: selectedTag.text,
+                })
+              : formatMessage({
+                  id: `source.${selectedTag.text}`,
+                  defaultMessage: formatMessage({
+                    id: selectedTag.text,
+                    defaultMessage: selectedTag.text,
+                  }),
+                })}
           </Message.Item>
         ) : null}
       </Message.List>
@@ -83,8 +110,10 @@ const LinkedMessage = ({
 };
 
 LinkedMessage.propTypes = {
-  selectedConcept: PropTypes.object,
+  selectedSourceConcept: PropTypes.object,
   selectedStructure: PropTypes.object,
+  selectedTargetConcept: PropTypes.object,
+  selectedLinkType: PropTypes.string,
   selectedTag: PropTypes.object,
   status: PropTypes.string,
 };
@@ -95,11 +124,11 @@ export const ConceptsLinksManagement = ({
   icon,
   createRelation,
   deleteRelation,
-  creatingRelation,
-  deletingRelation,
+  conceptLinks,
+  tagStructureOptions,
+  tagConceptOptions,
   fetchConcepts,
   conceptPayload,
-  tagOptions,
   selectedRelationTags,
   clearStructures,
   clearStructureFilters,
@@ -109,97 +138,128 @@ export const ConceptsLinksManagement = ({
   structurePayload,
 }) => {
   const { formatMessage } = useIntl();
-  const [selectedConcept, setSelectedConcept] = useState(null);
+  const [selectedLinkType, setSelectedLinkType] = useState("structures");
+  const [selectedSourceConcept, setSelectedSourceConcept] = useState(null);
+  const [selectedTargetConcept, setSelectedTargetConcept] = useState(null);
   const [selectedStructure, setSelectedStructure] = useState(null);
 
+  const [tagOptions, setTagOptions] = useState(tagStructureOptions);
   const [selectedTag, setselectedTag] = useState(null);
+
   const [status, setStatus] = useState(STATUS_PENDING);
-  const [links, setLinks] = useState([]);
+  const [links, setLinks] = useState(null);
+
+  useEffect(() => {
+    if (selectedLinkType == "concepts") {
+      setTagOptions(tagConceptOptions);
+      setSelectedStructure(null);
+    } else if (selectedLinkType == "structures") {
+      setSelectedTargetConcept(null);
+      const filters = conceptPayload.filters;
+      const payload = {
+        ...conceptPayload,
+        filters: { ...filters, ...linksDefaultFilters },
+        size: 7,
+      };
+      fetchConcepts(payload);
+      setTagOptions(tagStructureOptions);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedLinkType, tagStructureOptions]);
 
-  const isStructureLinked = (selectedStructure, links) => {
+  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(() => {
+    setLinks(conceptLinks);
+  }, [conceptLinks]);
+
+  const isLinked = (conceptLinks, id, targetType) => {
     return _.find(
       (link) =>
-        _.propEq("resource_id", selectedStructure.id.toString())(link) &&
-        _.propEq("resource_type", "data_structure")(link)
-    )(links);
+        _.propEq("target_id", id)(link) &&
+        _.propEq("target_type", targetType)(link)
+    )(conceptLinks);
   };
 
-  const handleConceptSelected = (selectedConcept) => {
+  const handleSourceConceptSelected = (selectedSourceConcept) => {
     setStatus(STATUS_PENDING);
-    setLinks(selectedConcept.links);
+    setSelectedSourceConcept(selectedSourceConcept);
     setSelectedStructure(null);
-    setSelectedConcept(selectedConcept);
-    clearStructures();
-    clearStructureFilters();
-    fetchStructureFilters();
-    resetStructureFilters();
-    fetchStructures({ ...structurePayload, size: 7, page: 0 });
-    fetchConcepts({
-      ...conceptPayload,
-      filters: { ...conceptPayload.filters, ...linksDefaultFilters },
-      size: 7,
-    });
+    setSelectedTargetConcept(null);
+
+    if (selectedLinkType == "structures") {
+      clearStructures();
+      clearStructureFilters();
+      fetchStructureFilters();
+      resetStructureFilters();
+      fetchStructures({ ...structurePayload, size: 7, page: 0 });
+    }
+  };
+
+  const handleTargetConceptSelected = (concept) => {
+    setSelectedTargetConcept(concept);
+    if (selectedSourceConcept && concept) {
+      const isConceptLinked = isLinked(
+        conceptLinks,
+        concept.business_concept_id,
+        "business_concept"
+      );
+      if (isConceptLinked) {
+        setStatus(STATUS_DELETED);
+        deleteRelation({ id: isConceptLinked.id });
+      } else {
+        const conceptLink = {
+          source_id: selectedSourceConcept.business_concept_id,
+          source_type: "business_concept",
+          target_id: concept.business_concept_id,
+          target_type: "business_concept",
+          tag_ids: selectedRelationTags ? selectedRelationTags : [],
+          context: {
+            target: pickConceptAttrs(concept),
+            source: pickConceptAttrs(selectedSourceConcept),
+          },
+        };
+        setStatus(STATUS_CREATED);
+        createRelation(conceptLink);
+      }
+    }
   };
 
   const handleStructureSelected = (structure) => {
     setSelectedStructure(structure);
-    if (selectedConcept && structure) {
-      const isLinked = isStructureLinked(structure, links);
-      if (isLinked) {
-        deleteRelation({ id: isLinked.id });
+    if (selectedSourceConcept && structure) {
+      const isStructureLinked = isLinked(
+        conceptLinks,
+        structure.id,
+        "data_structure"
+      );
+      if (isStructureLinked) {
+        setStatus(STATUS_DELETED);
+        deleteRelation({ id: isStructureLinked.id });
       } else {
         const structureLink = {
-          source_id: selectedConcept.business_concept_id,
+          source_id: selectedSourceConcept.business_concept_id,
           source_type: "business_concept",
           target_id: structure.id,
           target_type: "data_structure",
           tag_ids: selectedRelationTags ? selectedRelationTags : [],
         };
+        setStatus(STATUS_CREATED);
         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>
@@ -213,16 +273,28 @@ export const ConceptsLinksManagement = ({
         <Segment attached="bottom">
           <Grid>
             <Grid.Row>
-              <Grid.Column width={8}>
+              <Grid.Column width={4}>
+                {
+                  <ConceptLinksDropdownSelector
+                    handleChange={setSelectedLinkType}
+                    defaultOption={selectedLinkType}
+                    options={linkOptions}
+                  />
+                }
+              </Grid.Column>
+              <Grid.Column width={4}>
                 {!_.isEmpty(tagOptions) && (
                   <TagTypeDropdownSelector options={tagOptions} />
                 )}
               </Grid.Column>
+
               <Grid.Column width={8}>
-                {selectedConcept || selectedTag ? (
+                {selectedSourceConcept || selectedTag ? (
                   <LinkedMessage
                     selectedStructure={selectedStructure}
-                    selectedConcept={selectedConcept}
+                    selectedTargetConcept={selectedTargetConcept}
+                    selectedLinkType={selectedLinkType}
+                    selectedSourceConcept={selectedSourceConcept}
                     selectedTag={selectedTag}
                     status={status}
                   />
@@ -240,8 +312,8 @@ export const ConceptsLinksManagement = ({
                   </Header>
                   <ConceptSelector
                     showTitle={false}
-                    selectedConcept={selectedConcept}
-                    handleConceptSelected={handleConceptSelected}
+                    selectedConcept={selectedSourceConcept}
+                    handleConceptSelected={handleSourceConceptSelected}
                     tagOptions={tagOptions}
                   />
                 </Segment>
@@ -250,16 +322,47 @@ export const ConceptsLinksManagement = ({
                 <Segment>
                   <Header as="h4">
                     <Header.Content>
-                      {formatMessage({ id: "conceptRelations.structures" })}
+                      {formatMessage({
+                        id:
+                          selectedLinkType == "structures"
+                            ? "conceptRelations.structures"
+                            : "conceptRelations.concepts",
+                      })}
                     </Header.Content>
                   </Header>
-                  {selectedConcept ? (
-                    <StructureSelector
-                      selectedStructure={selectedStructure}
-                      onSelect={handleStructureSelected}
-                      links={links}
-                      placeToTop={false}
-                    />
+                  {selectedSourceConcept && selectedLinkType == "structures" ? (
+                    <>
+                      <ConceptUserFiltersLoader />
+                      <RelationsLoader
+                        resource_id={selectedSourceConcept.business_concept_id}
+                        resource_type="business_concept"
+                        target_type="data_structure"
+                      />
+                      <StructureSelector
+                        selectedStructure={selectedStructure}
+                        onSelect={handleStructureSelected}
+                        links={conceptLinks}
+                        placeToTop={false}
+                      />
+                    </>
+                  ) : selectedSourceConcept &&
+                    selectedLinkType == "concepts" ? (
+                    <>
+                      <RelationsLoader
+                        resource_id={selectedSourceConcept.business_concept_id}
+                        resource_type="business_concept"
+                        target_type="business_concept"
+                      />
+                      <ConceptSelector
+                        selectedConcept={selectedTargetConcept}
+                        handleConceptSelected={handleTargetConceptSelected}
+                        businessConceptId={
+                          selectedSourceConcept.business_concept_id
+                        }
+                        links={links}
+                        showTitle={false}
+                      />
+                    </>
                   ) : null}
                 </Segment>
               </Grid.Column>
@@ -286,17 +389,18 @@ ConceptsLinksManagement.propTypes = {
   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]),
+  tagStructureOptions: PropTypes.array,
+  tagConceptOptions: PropTypes.array,
+  conceptLinks: PropTypes.object,
 };
 
 const makeMapStateToProps = () => {
-  const getTagOptions = makeTagOptionsSelector("data_field");
+  const getTagStructureOptions = makeTagOptionsSelector("data_field");
   const searchQuerySelector = makeSearchQuerySelector(
     "conceptQuery",
     "conceptActiveFilters"
   );
+  const getTagConceptOptions = makeTagOptionsSelector("business_concept");
   const structureSearchQuerySelector = makeSearchQuerySelector(
     "structureQuery",
     "structureActiveFilters",
@@ -306,9 +410,9 @@ const makeMapStateToProps = () => {
     conceptPayload: searchQuerySelector(state, props),
     selectedRelationTags: state.selectedRelationTags,
     structurePayload: structureSearchQuerySelector(state, props),
-    tagOptions: getTagOptions(state),
-    creatingRelation: state.creatingRelation,
-    deletingRelation: state.relations,
+    tagStructureOptions: getTagStructureOptions(state),
+    tagConceptOptions: getTagConceptOptions(state),
+    conceptLinks: state.relations,
   });
 
   return mapStateToProps;

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

@@ -1,6 +1,5 @@
 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";

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

@@ -33,7 +33,71 @@ exports[`<ConceptsLinksManagement /> matches the latest snapshot 1`] = `
           class="row"
         >
           <div
-            class="eight wide column"
+            class="four wide column"
+          >
+            <div
+              class="field"
+            >
+              <label>
+                <b>
+                  Link type
+                </b>
+              </label>
+              <div>
+                <div
+                  aria-expanded="false"
+                  class="ui selection dropdown concept-link-dropdown"
+                  role="listbox"
+                  tabindex="0"
+                >
+                  <div
+                    aria-atomic="true"
+                    aria-live="polite"
+                    class="divider text"
+                    role="alert"
+                  >
+                    Structures
+                  </div>
+                  <i
+                    aria-hidden="true"
+                    class="dropdown icon"
+                  />
+                  <div
+                    class="menu transition"
+                  >
+                    <div
+                      aria-checked="true"
+                      aria-selected="true"
+                      class="active selected item"
+                      role="option"
+                      style="pointer-events: all;"
+                    >
+                      <span
+                        class="text"
+                      >
+                        Structures
+                      </span>
+                    </div>
+                    <div
+                      aria-checked="false"
+                      aria-selected="false"
+                      class="item"
+                      role="option"
+                      style="pointer-events: all;"
+                    >
+                      <span
+                        class="text"
+                      >
+                        Concepts
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="four wide column"
           />
           <div
             class="eight wide column"