@truedat/lm 8.2.0 → 8.2.2

package/src/components/StructureLinkForm.js

@@ -0,0 +1,105 @@
+import _ from "lodash/fp";
+import { lazy, useState, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { useIntl } from "react-intl";
+import { clearSelectedRelationTags } from "../routines";
+import { Divider, Button } from "semantic-ui-react";
+import { HistoryBackButton } from "@truedat/core/components";
+import { useWebContext } from "@truedat/core/webContext";
+import RelationTagsLoader from "./RelationTagsLoader";
+import { useCreateRelation } from "../hooks/useRelations";
+import { useNavigate } from "react-router";
+import { getRelationErrorAlertMessage } from "../selectors/messages";
+
+const TagTypeDropdownSelector = lazy(
+  () => import("@truedat/lm/components/TagTypeDropdownSelector")
+);
+
+const StructureSelector = lazy(
+  () => import("@truedat/dd/components/StructureSelector")
+);
+
+export const StructureLinkForm = ({
+  sourceId,
+  sourceType,
+  redirectUrl,
+  selectTagOptions,
+}) => {
+  const navigate = useNavigate();
+  const selectedRelationTags = useSelector(
+    (state) => state?.selectedRelationTags
+  );
+  const tagOptions = useSelector(selectTagOptions);
+  const { trigger: createRelation, isMutating: creatingRelation } =
+    useCreateRelation();
+  const dispatch = useDispatch();
+  const [selectedStructure, setSelectedStructure] = useState(null);
+  const { formatMessage } = useIntl();
+  const { setAlertMessage } = useWebContext();
+
+  useEffect(() => {
+    return () => {
+      dispatch(clearSelectedRelationTags.trigger());
+    };
+  }, [clearSelectedRelationTags, dispatch]);
+
+  const handleSubmit = () => {
+    const link = {
+      source_id: sourceId,
+      source_type: sourceType,
+      target_id: selectedStructure?.id,
+      target_type: "data_structure",
+      tag_ids: selectedRelationTags ? selectedRelationTags : [],
+    };
+    createRelation({ relation: link })
+      .then(({ data }) => {
+        navigate(redirectUrl, {
+          state: {
+            createdRelation: {
+              ...data?.data,
+              target_name: selectedStructure?.name,
+              target_data: selectedStructure,
+            },
+          },
+        });
+      })
+      .catch((error) => {
+        const alertMessage = getRelationErrorAlertMessage(error, formatMessage);
+        if (alertMessage) {
+          setAlertMessage(alertMessage);
+        }
+      });
+  };
+
+  const disabled = !(selectedStructure && selectedRelationTags);
+
+  return (
+    <>
+      <Divider hidden />
+      <RelationTagsLoader />
+      {!_.isEmpty(tagOptions) && (
+        <>
+          <TagTypeDropdownSelector options={tagOptions} />
+          <Divider hidden />
+        </>
+      )}
+      <StructureSelector
+        selectedStructure={selectedStructure}
+        onSelect={setSelectedStructure}
+      />
+      <Divider hidden />
+      <Button.Group>
+        <Button
+          primary
+          loading={creatingRelation}
+          content={formatMessage({ id: "actions.create" })}
+          disabled={disabled}
+          onClick={handleSubmit}
+        />
+        <HistoryBackButton content={formatMessage({ id: "actions.cancel" })} />
+      </Button.Group>
+    </>
+  );
+};
+
+export default StructureLinkForm;

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

@@ -0,0 +1,252 @@
+import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { ConceptLinkForm } from "../ConceptLinkForm";
+
+const mockNavigate = jest.fn();
+const mockCreateRelation = jest.fn();
+const mockDispatch = jest.fn();
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useNavigate: () => mockNavigate,
+}));
+
+jest.mock("../../hooks/useRelations", () => ({
+  useCreateRelation: () => ({
+    trigger: mockCreateRelation,
+    isMutating: false,
+  }),
+}));
+
+jest.mock("react-redux", () => ({
+  ...jest.requireActual("react-redux"),
+  useDispatch: jest.fn(() => mockDispatch),
+}));
+
+jest.mock("react-intl", () => ({
+  ...jest.requireActual("react-intl"),
+  useIntl: () => ({
+    formatMessage: ({ id }) => id,
+  }),
+}));
+
+jest.mock("../../routines", () => ({
+  clearSelectedRelationTags: {
+    trigger: jest.fn(() => ({ type: "CLEAR_SELECTED_RELATION_TAGS" })),
+  },
+}));
+
+jest.mock("../RelationTagsLoader", () =>
+  jest.fn(() => <div>RelationTagsLoader</div>)
+);
+
+jest.mock("@truedat/lm/components/TagTypeDropdownSelector", () =>
+  jest.fn(({ options }) => (
+    <div>
+      <div>TagTypeDropdownSelector</div>
+      {options?.map((option, i) => (
+        <button
+          key={i}
+          onClick={() => option.onClick && option.onClick(option.value)}
+        >
+          {option.text}
+        </button>
+      ))}
+    </div>
+  ))
+);
+
+jest.mock("@truedat/bg/concepts/relations/components/ConceptSelector", () =>
+  jest.fn(({ handleConceptSelected }) => (
+    <div>
+      <div>ConceptSelector</div>
+      <button
+        onClick={() =>
+          handleConceptSelected({
+            business_concept_id: 123,
+            name: "Test Concept",
+            id: 456,
+          })
+        }
+      >
+        Select Concept
+      </button>
+    </div>
+  ))
+);
+
+jest.mock("@truedat/core/components", () => ({
+  HistoryBackButton: ({ content }) => <button>{content}</button>,
+}));
+
+const props = {
+  targetId: 10,
+  targetType: "quality_control",
+  redirectUrl: "/qualityControls/10/version/1/links/concepts",
+  selectTagOptions: jest.fn(() => [{ id: 1, text: "relates_to", value: 1 }]),
+};
+
+const renderOpts = {
+  state: {
+    relationTags: [{ value: { target_type: "quality_control" } }],
+    selectedRelationTags: [1],
+  },
+};
+
+describe("<ConceptLinkForm />", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockCreateRelation.mockResolvedValue({
+      data: {
+        data: {
+          id: 789,
+          source_id: 123,
+          target_id: 10,
+        },
+      },
+    });
+  });
+
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<ConceptLinkForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders all form components", async () => {
+    const rendered = render(<ConceptLinkForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText("RelationTagsLoader")).toBeInTheDocument();
+    expect(rendered.getByText("TagTypeDropdownSelector")).toBeInTheDocument();
+    expect(rendered.getByText("ConceptSelector")).toBeInTheDocument();
+    expect(rendered.getByText("actions.create")).toBeInTheDocument();
+    expect(rendered.getByText("actions.cancel")).toBeInTheDocument();
+  });
+
+  it("disables create button when concept or tags are not selected", async () => {
+    const rendered = render(<ConceptLinkForm {...props} />, {
+      state: {
+        relationTags: [],
+        selectedRelationTags: null,
+      },
+    });
+    await waitForLoad(rendered);
+
+    const createButton = rendered.getByText("actions.create");
+    expect(createButton).toBeDisabled();
+  });
+
+  it("enables create button when both concept and tags are selected", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<ConceptLinkForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+
+    const createButton = rendered.getByText("actions.create");
+    expect(createButton).toBeDisabled();
+
+    await user.click(rendered.getByText("Select Concept"));
+
+    await waitFor(() => {
+      expect(createButton).toBeEnabled();
+    });
+  });
+
+  it("calls createRelation and navigates on submit", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<ConceptLinkForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getByText("Select Concept"));
+
+    await waitFor(() => {
+      expect(rendered.getByText("actions.create")).toBeEnabled();
+    });
+
+    await user.click(rendered.getByText("actions.create"));
+
+    await waitFor(() => {
+      expect(mockCreateRelation).toHaveBeenCalledWith({
+        relation: {
+          source_id: 123,
+          source_type: "business_concept",
+          target_id: 10,
+          target_type: "quality_control",
+          tag_ids: [1],
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith(props.redirectUrl, {
+        state: {
+          createdRelation: {
+            id: 789,
+            source_id: 123,
+            target_id: 10,
+            source_name: "Test Concept",
+            source_data: {
+              business_concept_id: 123,
+              name: "Test Concept",
+              id: 456,
+            },
+          },
+        },
+      });
+    });
+  });
+
+  it("dispatches clearSelectedRelationTags on unmount", () => {
+    const { unmount } = render(<ConceptLinkForm {...props} />, renderOpts);
+    unmount();
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: "CLEAR_SELECTED_RELATION_TAGS",
+    });
+  });
+
+  it("handles empty tag_ids when selectedRelationTags is empty", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<ConceptLinkForm {...props} />, {
+      state: { selectedRelationTags: [] },
+    });
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getByText("Select Concept"));
+
+    await waitFor(() => {
+      expect(rendered.getByText("actions.create")).toBeEnabled();
+    });
+
+    await user.click(rendered.getByText("actions.create"));
+
+    await waitFor(() => {
+      expect(mockCreateRelation).toHaveBeenCalledWith({
+        relation: {
+          source_id: 123,
+          source_type: "business_concept",
+          target_id: 10,
+          target_type: "quality_control",
+          tag_ids: [],
+        },
+      });
+    });
+  });
+
+  it("does not render TagTypeDropdownSelector when tagOptions is empty", async () => {
+    const rendered = render(
+      <ConceptLinkForm
+        {...{ ...props, selectTagOptions: jest.fn(() => []) }}
+      />,
+      {
+        state: {},
+      }
+    );
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.queryByText("TagTypeDropdownSelector")
+    ).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,299 @@
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import LinksSearch from "../LinksSearch";
+
+const mockNavigate = jest.fn();
+const mockSearchRelations = jest.fn();
+const mockSearchRelationsFilters = jest.fn();
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useNavigate: () => mockNavigate,
+  useLocation: () => ({ pathname: "/test/path" }),
+}));
+
+jest.mock("../../hooks/useRelations", () => ({
+  useRelations: () => ({
+    trigger: mockSearchRelations,
+  }),
+  useRelationFilters: () => ({
+    trigger: mockSearchRelationsFilters,
+  }),
+}));
+
+jest.mock("@truedat/core/search/SearchContext", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/core/search/SearchContext"
+  );
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useSearchContext: jest.fn(),
+  };
+});
+
+jest.mock("../LinksPagination", () =>
+  jest.fn(() => <div>LinksPagination</div>)
+);
+
+jest.mock("@truedat/core/search/SearchWidget", () =>
+  jest.fn(() => <div>SearchWidget</div>)
+);
+
+const { useSearchContext } = require("@truedat/core/search/SearchContext");
+
+const columns = [
+  {
+    header: "concepts.props.name",
+    fieldSelector: (item) => item.name,
+  },
+  {
+    header: "concepts.props.domain",
+    fieldSelector: (item) => item.domain,
+  },
+];
+
+const defaultFilters = {
+  target_id: 10,
+  target_type: "quality_control",
+  source_type: "business_concept",
+};
+
+const searchData = {
+  data: [
+    { id: 1, name: "Concept 1", domain: "Domain 1" },
+    { id: 2, name: "Concept 2", domain: "Domain 2" },
+    { id: 3, name: "Concept 3", domain: "Domain 1" },
+  ],
+};
+
+const filterParams = {
+  must: defaultFilters,
+  page: 0,
+  size: 10,
+};
+
+describe("<LinksSearch />", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockSearchRelations.mockResolvedValue({ data: searchData });
+    mockSearchRelationsFilters.mockResolvedValue({ data: {} });
+  });
+
+  it("matches the latest snapshot", async () => {
+    useSearchContext.mockReturnValue({
+      searchData: { data: [] },
+      loading: false,
+      filterParams,
+    });
+
+    const rendered = render(
+      <LinksSearch columns={columns} defaultFilters={defaultFilters} />
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders SearchWidget and LinksPagination", async () => {
+    useSearchContext.mockReturnValue({
+      searchData: { data: [] },
+      loading: false,
+      filterParams,
+    });
+
+    const rendered = render(
+      <LinksSearch columns={columns} defaultFilters={defaultFilters} />
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText("SearchWidget")).toBeInTheDocument();
+    expect(rendered.getByText("LinksPagination")).toBeInTheDocument();
+  });
+
+  it("displays empty message when no relations", async () => {
+    useSearchContext.mockReturnValue({
+      searchData: { data: [] },
+      loading: false,
+      filterParams,
+    });
+
+    const rendered = render(
+      <LinksSearch columns={columns} defaultFilters={defaultFilters} />
+    );
+    await waitForLoad(rendered);
+
+    await waitFor(() => {
+      expect(rendered.getByText("linked_concepts.empty")).toBeInTheDocument();
+    });
+  });
+
+  it("displays relations table when data is available", async () => {
+    useSearchContext.mockReturnValue({
+      searchData,
+      loading: false,
+      filterParams,
+    });
+
+    const rendered = render(
+      <LinksSearch columns={columns} defaultFilters={defaultFilters} />
+    );
+    await waitForLoad(rendered);
+
+    await waitFor(() => {
+      expect(rendered.getByText("Concept 1")).toBeInTheDocument();
+      expect(rendered.getByText("Concept 2")).toBeInTheDocument();
+    });
+  });
+
+  it("includes extraRow when provided and not in data", async () => {
+    useSearchContext.mockReturnValue({
+      searchData,
+      loading: false,
+      filterParams,
+    });
+
+    const extraRow = { id: 999, name: "New Concept", domain: "New Domain" };
+
+    const rendered = render(
+      <LinksSearch
+        columns={columns}
+        defaultFilters={defaultFilters}
+        extraRow={extraRow}
+      />
+    );
+    await waitForLoad(rendered);
+
+    await waitFor(() => {
+      expect(rendered.getByText("New Concept")).toBeInTheDocument();
+      expect(rendered.getByText("Concept 1")).toBeInTheDocument();
+    });
+  });
+
+  it("does not include extraRow when it already exists in data", async () => {
+    useSearchContext.mockReturnValue({
+      searchData,
+      loading: false,
+      filterParams,
+    });
+
+    const extraRow = { id: 1, name: "Concept 1", domain: "Domain 1" };
+
+    const rendered = render(
+      <LinksSearch
+        columns={columns}
+        defaultFilters={defaultFilters}
+        extraRow={extraRow}
+      />
+    );
+    await waitForLoad(rendered);
+
+    await waitFor(() => {
+      const concept1Elements = rendered.queryAllByText("Concept 1");
+      expect(concept1Elements.length).toBe(1);
+    });
+  });
+
+  it("filters out deletedLinkId from data", async () => {
+    useSearchContext.mockReturnValue({
+      searchData,
+      loading: false,
+      filterParams,
+    });
+
+    const rendered = render(
+      <LinksSearch
+        columns={columns}
+        defaultFilters={defaultFilters}
+        deletedLinkId={2}
+      />
+    );
+    await waitForLoad(rendered);
+
+    await waitFor(() => {
+      expect(rendered.getByText("Concept 1")).toBeInTheDocument();
+      expect(rendered.queryByText("Concept 2")).not.toBeInTheDocument();
+      expect(rendered.getByText("Concept 3")).toBeInTheDocument();
+    });
+  });
+
+  it("triggers refetch when refetchSearch is true", async () => {
+    const setRefetchSearch = jest.fn();
+
+    useSearchContext.mockReturnValue({
+      searchData: { data: [] },
+      loading: false,
+      filterParams,
+    });
+
+    const rendered = render(
+      <LinksSearch
+        columns={columns}
+        defaultFilters={defaultFilters}
+        refetchSearch={true}
+        setRefetchSearch={setRefetchSearch}
+      />
+    );
+    await waitForLoad(rendered);
+
+    await waitFor(() => {
+      expect(mockSearchRelations).toHaveBeenCalledWith(filterParams);
+      expect(mockSearchRelationsFilters).toHaveBeenCalledWith(filterParams);
+      expect(setRefetchSearch).toHaveBeenCalledWith(false);
+    });
+  });
+
+  it("clears extraRow when filterParams change", async () => {
+    const initialFilterParams = { ...filterParams, page: 0 };
+    const changedFilterParams = { ...filterParams, page: 1 };
+
+    useSearchContext
+      .mockReturnValueOnce({
+        searchData,
+        loading: false,
+        filterParams: initialFilterParams,
+      })
+      .mockReturnValueOnce({
+        searchData,
+        loading: false,
+        filterParams: changedFilterParams,
+      });
+
+    const extraRow = { id: 999, name: "New Concept", domain: "New Domain" };
+
+    const rendered = render(
+      <LinksSearch
+        columns={columns}
+        defaultFilters={defaultFilters}
+        extraRow={extraRow}
+      />
+    );
+    await waitForLoad(rendered);
+
+    await waitFor(() => {
+      expect(rendered.getByText("New Concept")).toBeInTheDocument();
+    });
+
+    // Simulate filterParams change by re-rendering with new filterParams
+    useSearchContext.mockReturnValue({
+      searchData,
+      loading: false,
+      filterParams: changedFilterParams,
+    });
+
+    rendered.rerender(
+      <LinksSearch
+        columns={columns}
+        defaultFilters={defaultFilters}
+        extraRow={extraRow}
+      />
+    );
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith("/test/path", {
+        replace: true,
+        state: null,
+      });
+    });
+  });
+});