@truedat/lm 7.5.12 → 7.5.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/lm",
-  "version": "7.5.12",
+  "version": "7.5.14",
   "description": "Truedat Link Manager",
   "sideEffects": false,
   "module": "src/index.js",
@@ -48,7 +48,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "7.5.12",
+    "@truedat/test": "7.5.14",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -79,9 +79,8 @@
     "redux-saga": "^1.3.0",
     "redux-saga-routines": "^3.2.3",
     "reselect": "^5.1.1",
-    "semantic-ui-calendar-react": "^0.15.3",
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "1476061ceb9ed15e0bacec71e20d695a0cd57986"
+  "gitHead": "46d017329f0f074db1feb2304c06ba696bb68a14"
 }

package/src/components/ConceptSuggestionLinkForm.js

@@ -0,0 +1,82 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
+import { Divider } from "semantic-ui-react";
+import { useParams } from "react-router";
+import { useDispatch, useSelector } from "react-redux";
+import { useIntl } from "react-intl";
+import { makeTagOptionsSelector } from "@truedat/core/selectors";
+import { HistoryBackButton } from "@truedat/core/components";
+import { linkTo } from "@truedat/core/routes";
+import { Button } from "semantic-ui-react";
+
+import { createRelation, clearSelectedRelationTags } from "../routines";
+import TagTypeDropdownSelector from "./TagTypeDropdownSelector";
+
+const StructureSuggestions = React.lazy(() =>
+  import("@truedat/dd/components/StructureSuggestions")
+);
+
+const selectTagOptions = makeTagOptionsSelector("data_field");
+
+export const ConceptSuggestionLinkForm = () => {
+  const { business_concept_id: sourceId, id: version } = useParams();
+  const { tagOptions, selectedRelationTags } = useSelector((state) => ({
+    tagOptions: selectTagOptions(state),
+    selectedRelationTags: state.selectedRelationTags,
+  }));
+  const dispatch = useDispatch();
+  const [selectedStructure, setSelectedStructure] = useState(null);
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    return () => {
+      dispatch(clearSelectedRelationTags.trigger());
+    };
+  }, [clearSelectedRelationTags, dispatch]);
+
+  const handleSubmit = () => {
+    const structureLink = {
+      redirectUrl: linkTo.CONCEPT_LINKS_STRUCTURES({
+        business_concept_id: sourceId,
+        id: version,
+      }),
+      source_id: sourceId,
+      source_type: "business_concept",
+      target_id: selectedStructure.id,
+      target_type: "data_structure",
+      tag_ids: selectedRelationTags ? selectedRelationTags : [],
+    };
+    dispatch(createRelation.trigger(structureLink));
+  };
+
+  const disabled = !(selectedStructure && selectedRelationTags);
+
+  return (
+    <>
+      <Divider hidden />
+      {!_.isEmpty(tagOptions) && (
+        <>
+          <TagTypeDropdownSelector options={tagOptions} />
+          <Divider hidden />
+        </>
+      )}
+      <StructureSuggestions
+        handleSelectedStructure={setSelectedStructure}
+        selectedStructure={selectedStructure}
+        selectable={true}
+      />
+      <Divider hidden />
+      <Button.Group>
+        <Button
+          primary
+          content={formatMessage({ id: "actions.create" })}
+          disabled={disabled}
+          onClick={handleSubmit}
+        />
+        <HistoryBackButton content={formatMessage({ id: "actions.cancel" })} />
+      </Button.Group>
+    </>
+  );
+};
+
+export default ConceptSuggestionLinkForm;

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

@@ -0,0 +1,115 @@
+import { render, fireEvent, screen, waitFor } from "@testing-library/react";
+import ConceptSuggestionLinkForm from "../ConceptSuggestionLinkForm";
+import { useSelector, useDispatch } from "react-redux";
+import { useParams } from "react-router";
+import { createRelation, clearSelectedRelationTags } from "../../routines";
+
+jest.mock("react-redux", () => ({
+    useSelector: jest.fn(),
+    useDispatch: jest.fn(),
+}));
+
+jest.mock("react-router", () => ({
+    useParams: jest.fn(),
+}));
+
+jest.mock("react-intl", () => ({
+    useIntl: () => ({
+        formatMessage: ({ id }) => id, // mock translated strings
+    }),
+}));
+
+// Mock selector factory
+jest.mock("@truedat/core/selectors", () => ({
+    makeTagOptionsSelector: jest.fn(() => jest.fn(() => [{ id: "tag1", name: "Tag 1" }])),
+}));
+
+// Mock components
+jest.mock("@truedat/dd/components/StructureSuggestions", () =>
+    jest.fn((props) => {
+        // Include a button to simulate structure selection
+        return (
+            <div>
+                <div>MockStructureSuggestions</div>
+                <button onClick={() => props.handleSelectedStructure({ id: "structure123" })}>
+                    Select Structure
+                </button>
+            </div>
+        );
+    })
+);
+
+jest.mock("../TagTypeDropdownSelector", () =>
+    jest.fn(() => <div>MockTagTypeDropdownSelector</div>)
+);
+
+jest.mock("@truedat/core/components", () => ({
+    HistoryBackButton: (props) => <button>{props.content}</button>,
+}));
+
+jest.mock("@truedat/core/routes", () => ({
+    linkTo: {
+        CONCEPT_LINKS_STRUCTURES: jest.fn(() => "/mocked/redirect/url"),
+    },
+}));
+
+describe("ConceptSuggestionLinkForm", () => {
+    const mockDispatch = jest.fn();
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        useParams.mockReturnValue({ business_concept_id: "bc1", id: "v1" });
+        useDispatch.mockReturnValue(mockDispatch);
+        useSelector.mockImplementation((selector) =>
+            selector({
+                selectedRelationTags: ["tag1"],
+            })
+        );
+
+        clearSelectedRelationTags.trigger = jest.fn(() => ({ type: "CLEAR_TAGS" }));
+        createRelation.trigger = jest.fn((payload) => ({ type: "CREATE_RELATION", payload }));
+    });
+
+    it("renders structure suggestions and tag dropdown", async () => {
+        render(<ConceptSuggestionLinkForm />);
+
+        await waitFor(() => {
+            expect(screen.getByText("MockStructureSuggestions")).toBeInTheDocument();
+            expect(screen.getByText("actions.create")).toBeDisabled();
+        });
+
+    });
+
+    it("dispatches createRelation on submit", async () => {
+        render(<ConceptSuggestionLinkForm />);
+
+        // Simulate structure selection
+        fireEvent.click(screen.getByText("Select Structure"));
+
+        // Now the submit button should be enabled
+        const createBtn = screen.getByText("actions.create");
+        expect(createBtn).not.toBeDisabled();
+
+        fireEvent.click(createBtn);
+
+        expect(createRelation.trigger).toHaveBeenCalledWith({
+            redirectUrl: "/mocked/redirect/url",
+            source_id: "bc1",
+            source_type: "business_concept",
+            target_id: "structure123",
+            target_type: "data_structure",
+            tag_ids: ["tag1"],
+        });
+
+        expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({ type: "CREATE_RELATION" }));
+    });
+
+    it("dispatches clearSelectedRelationTags on unmount", () => {
+        const { unmount } = render(<ConceptSuggestionLinkForm />);
+        unmount();
+
+        expect(clearSelectedRelationTags.trigger).toHaveBeenCalled();
+        expect(mockDispatch).toHaveBeenCalledWith({ type: "CLEAR_TAGS" });
+    });
+});