@truedat/lm 8.2.0 → 8.2.2

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

@@ -0,0 +1,284 @@
+import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { StructureLinkForm } from "../StructureLinkForm";
+
+const mockNavigate = jest.fn();
+const mockCreateRelation = jest.fn();
+const mockDispatch = jest.fn();
+const mockSetAlertMessage = 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),
+  useSelector: jest.fn((selector) => {
+    const state = {
+      selectedRelationTags: [1],
+      relationTags: [{ value: { target_type: "data_structure" } }],
+    };
+    return selector(state);
+  }),
+}));
+
+jest.mock("react-intl", () => ({
+  ...jest.requireActual("react-intl"),
+  useIntl: () => ({
+    formatMessage: ({ id }) => id,
+  }),
+}));
+
+jest.mock("@truedat/core/webContext", () => ({
+  useWebContext: () => ({
+    setAlertMessage: mockSetAlertMessage,
+    alertMessage: {},
+  }),
+}));
+
+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/dd/components/StructureSelector", () =>
+  jest.fn(({ selectedStructure, onSelect }) => (
+    <div>
+      <div>StructureSelector</div>
+      <button
+        onClick={() =>
+          onSelect({
+            id: 456,
+            name: "Test Structure",
+          })
+        }
+      >
+        Select Structure
+      </button>
+      {selectedStructure && (
+        <div data-testid="selected-structure">{selectedStructure.name}</div>
+      )}
+    </div>
+  ))
+);
+
+jest.mock("@truedat/core/components", () => ({
+  HistoryBackButton: ({ content }) => <button>{content}</button>,
+}));
+
+const props = {
+  sourceId: 10,
+  sourceType: "quality_control",
+  redirectUrl: "/qualityControls/10/version/1/links/structures",
+  selectTagOptions: jest.fn(() => [{ id: 1, text: "relates_to", value: 1 }]),
+};
+
+describe("<StructureLinkForm />", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockCreateRelation.mockResolvedValue({
+      data: {
+        data: {
+          id: 789,
+          source_id: 10,
+          target_id: 456,
+        },
+      },
+    });
+  });
+
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<StructureLinkForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders all form components", async () => {
+    const rendered = render(<StructureLinkForm {...props} />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText("RelationTagsLoader")).toBeInTheDocument();
+    expect(rendered.getByText("TagTypeDropdownSelector")).toBeInTheDocument();
+    expect(rendered.getByText("StructureSelector")).toBeInTheDocument();
+    expect(rendered.getByText("actions.create")).toBeInTheDocument();
+    expect(rendered.getByText("actions.cancel")).toBeInTheDocument();
+  });
+
+  it("disables create button when structure or tags are not selected", async () => {
+    const rendered = render(<StructureLinkForm {...props} />);
+    await waitForLoad(rendered);
+
+    const createButton = rendered.getByText("actions.create");
+    expect(createButton).toBeDisabled();
+  });
+
+  it("enables create button when both structure and tags are selected", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<StructureLinkForm {...props} />);
+    await waitForLoad(rendered);
+
+    const createButton = rendered.getByText("actions.create");
+    expect(createButton).toBeDisabled();
+
+    await user.click(rendered.getByText("Select Structure"));
+
+    await waitFor(() => {
+      expect(createButton).toBeEnabled();
+    });
+  });
+
+  it("calls createRelation and navigates on submit", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<StructureLinkForm {...props} />);
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getByText("Select Structure"));
+
+    await waitFor(() => {
+      expect(rendered.getByText("actions.create")).toBeEnabled();
+    });
+
+    await user.click(rendered.getByText("actions.create"));
+
+    await waitFor(() => {
+      expect(mockCreateRelation).toHaveBeenCalledWith({
+        relation: {
+          source_id: 10,
+          source_type: "quality_control",
+          target_id: 456,
+          target_type: "data_structure",
+          tag_ids: [1],
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith(props.redirectUrl, {
+        state: {
+          createdRelation: {
+            id: 789,
+            source_id: 10,
+            target_id: 456,
+            target_name: "Test Structure",
+            target_data: {
+              id: 456,
+              name: "Test Structure",
+            },
+          },
+        },
+      });
+    });
+  });
+
+  it("handles error with _originalErrors and sets alert message", async () => {
+    const user = userEvent.setup({ delay: null });
+    const error = {
+      _originalErrors: {
+        source_id: ["has already been taken"],
+      },
+      message: "An error occurred",
+    };
+    mockCreateRelation.mockRejectedValueOnce(error);
+
+    const rendered = render(<StructureLinkForm {...props} />);
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getByText("Select Structure"));
+
+    await waitFor(() => {
+      expect(rendered.getByText("actions.create")).toBeEnabled();
+    });
+
+    await user.click(rendered.getByText("actions.create"));
+
+    await waitFor(() => {
+      expect(mockSetAlertMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          error: true,
+          header: "relations.create.failed.header",
+          icon: "attention",
+          content: expect.any(String),
+        })
+      );
+    });
+  });
+
+  it("handles error without _originalErrors and sets alert message", async () => {
+    const user = userEvent.setup({ delay: null });
+    const error = {
+      message: "Network error",
+    };
+    mockCreateRelation.mockRejectedValueOnce(error);
+
+    const rendered = render(<StructureLinkForm {...props} />);
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getByText("Select Structure"));
+
+    await waitFor(() => {
+      expect(rendered.getByText("actions.create")).toBeEnabled();
+    });
+
+    await user.click(rendered.getByText("actions.create"));
+
+    await waitFor(() => {
+      expect(mockSetAlertMessage).toHaveBeenCalledWith({
+        error: true,
+        content: "Network error",
+      });
+    });
+  });
+
+  it("dispatches clearSelectedRelationTags on unmount", () => {
+    const { unmount } = render(<StructureLinkForm {...props} />);
+    unmount();
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: "CLEAR_SELECTED_RELATION_TAGS",
+    });
+  });
+
+  it("does not render TagTypeDropdownSelector when tagOptions is empty", async () => {
+    const rendered = render(
+      <StructureLinkForm
+        {...{ ...props, selectTagOptions: jest.fn(() => []) }}
+      />
+    );
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.queryByText("TagTypeDropdownSelector")
+    ).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ConceptLinkForm /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui hidden divider"
+  />
+  <div>
+    RelationTagsLoader
+  </div>
+  <div>
+    <div>
+      TagTypeDropdownSelector
+    </div>
+    <button>
+      relates_to
+    </button>
+  </div>
+  <div
+    class="ui hidden divider"
+  />
+  <div>
+    <div>
+      ConceptSelector
+    </div>
+    <button>
+      Select Concept
+    </button>
+  </div>
+  <div
+    class="ui hidden divider"
+  />
+  <div
+    class="ui buttons"
+  >
+    <button
+      class="ui primary disabled button"
+      disabled=""
+      tabindex="-1"
+    >
+      actions.create
+    </button>
+    <button>
+      actions.cancel
+    </button>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LinksSearch /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <div>
+      SearchWidget
+    </div>
+    <h4
+      class="ui header"
+    >
+      <i
+        aria-hidden="true"
+        class="search icon"
+      />
+      <div
+        class="content"
+      >
+        linked_concepts.empty
+      </div>
+    </h4>
+    <div>
+      LinksPagination
+    </div>
+  </div>
+</div>
+`;

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

@@ -126,6 +126,19 @@ exports[`<NewRelationTag /> matches the latest snapshot 1`] = `
                 target_type.data_field
               </span>
             </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                target_type.quality_control
+              </span>
+            </div>
           </div>
         </div>
       </div>

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

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<QualityControlConcepts /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui basic segment"
+  >
+    <div
+      class="ui grid"
+    >
+      <div
+        class="sixteen wide column"
+      >
+        <a
+          class="ui primary right floated button"
+          href="/qualityControls/10/version/1/links/concepts/new"
+          role="button"
+        >
+          links.actions.create
+        </a>
+      </div>
+      <div
+        class="sixteen wide column"
+      >
+        <div>
+          <div>
+            LinksSearch
+          </div>
+          <div
+            data-testid="columns-count"
+          >
+            5
+          </div>
+          <div
+            data-testid="set-refetch-search"
+          >
+            function
+          </div>
+          <div
+            data-testid="default-filters"
+          >
+            {"target_id":10,"target_type":"quality_control","source_type":"business_concept"}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<QualityControlStructures /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui basic segment"
+  >
+    <div
+      class="ui grid"
+    >
+      <div
+        class="sixteen wide column"
+      >
+        <a
+          class="ui primary right floated button"
+          href="/qualityControls/10/version/1/links/structures/new"
+          role="button"
+        >
+          links.actions.create
+        </a>
+      </div>
+      <div
+        class="sixteen wide column"
+      >
+        <div>
+          <div>
+            LinksSearch
+          </div>
+          <div
+            data-testid="columns-count"
+          >
+            8
+          </div>
+          <div
+            data-testid="set-refetch-search"
+          >
+            function
+          </div>
+          <div
+            data-testid="default-filters"
+          >
+            {"source_id":10,"target_type":"data_structure","source_type":"quality_control"}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -110,6 +110,19 @@ exports[`<RelationTagForm /> matches the latest snapshot 1`] = `
               target_type.data_field
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              target_type.quality_control
+            </span>
+          </div>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<StructureLinkForm /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui hidden divider"
+  />
+  <div>
+    RelationTagsLoader
+  </div>
+  <div>
+    <div>
+      TagTypeDropdownSelector
+    </div>
+    <button>
+      relates_to
+    </button>
+  </div>
+  <div
+    class="ui hidden divider"
+  />
+  <div>
+    <div>
+      StructureSelector
+    </div>
+    <button>
+      Select Structure
+    </button>
+  </div>
+  <div
+    class="ui hidden divider"
+  />
+  <div
+    class="ui buttons"
+  >
+    <button
+      class="ui primary disabled button"
+      disabled=""
+      tabindex="-1"
+    >
+      actions.create
+    </button>
+    <button>
+      actions.cancel
+    </button>
+  </div>
+</div>
+`;

package/src/hooks/useRelations.js

@@ -0,0 +1,53 @@
+import useSWRMutations from "swr/mutation";
+import { apiJsonPost, apiJsonDelete } from "@truedat/core/services/api";
+import {
+  API_RELATION,
+  API_RELATIONS,
+  API_RELATIONS_INDEX_SEARCH,
+  API_RELATIONS_FILTERS,
+} from "../api";
+import { compile } from "path-to-regexp";
+
+export const useRelations = (params) => {
+  const query = queryString(params);
+  return useSWRMutations(API_RELATIONS_INDEX_SEARCH, (url, { arg }) =>
+    apiJsonPost(`${url}${query}`, arg)
+  );
+};
+
+export const useRelationFilters = (params) => {
+  const query = queryString(params);
+  return useSWRMutations(API_RELATIONS_FILTERS, (url, { arg }) =>
+    apiJsonPost(`${url}${query}`, arg)
+  );
+};
+
+export const useCreateRelation = () => {
+  return useSWRMutations(
+    API_RELATIONS,
+    (url, { arg }) => apiJsonPost(url, arg),
+    {
+      onError: (error) => {
+        // Review! This is a workaround to prevent the middleware from dispatching logError in redux store
+        // Remove errors from response to prevent middleware from dispatching logError
+        // The error will still be available in the catch block
+        if (error?.response?.data?.errors) {
+          // Store original errors for our custom handling
+          error._originalErrors = error.response.data.errors;
+          // Remove errors so middleware doesn't dispatch logError
+          delete error.response.data.errors;
+        }
+      },
+    }
+  );
+};
+
+export const useDeleteRelation = () => {
+  return useSWRMutations(API_RELATION, (_url, { arg }) =>
+    apiJsonDelete(compile(API_RELATION)({ id: `${arg}` }))
+  );
+};
+
+const queryString = (params) => {
+  return params ? `?${new URLSearchParams(params).toString()}` : "";
+};

package/src/messages/en.js

@@ -25,4 +25,5 @@ export default {
   "target_type.implementations": "Implementations",
   "target_type.ingest": "Ingest",
   "target_type.data_field": "Structure",
+  "relations.create.failed.header": "Failed to create relation",
 };

package/src/messages/es.js

@@ -26,4 +26,5 @@ export default {
   "target_type.implementations": "Implementaciones",
   "target_type.ingest": "Ingesta",
   "target_type.data_field": "Estructura",
+  "relations.create.failed.header": "Error al crear la relación",
 };

package/src/selectors/index.js

@@ -1,3 +1,4 @@
 export * from "./getStructureLinks";
 export * from "./getImplementationToConceptLinks";
 export * from "../services/relationGraphTraversal";
+export * from "./messages";

package/src/selectors/messages.js

@@ -0,0 +1,48 @@
+import _ from "lodash/fp";
+
+export const getRelationErrorAlertMessage = (error, formatMessage) => {
+  if (!error._originalErrors) {
+    return {
+      error: true,
+      content: error.message || "An error occurred",
+    };
+  }
+
+  const errors = error?._originalErrors;
+
+  if (errors) {
+    const errorMessages = _.flow(
+      _.toPairs,
+      _.map(([field, messages]) => ({
+        field,
+        message: Array.isArray(messages) ? messages[0] : messages,
+      }))
+    )(errors);
+
+    const content = errorMessages
+      .map(({ field, message }) =>
+        formatMessage({
+          id: `relations.create.failed.${message}`,
+          defaultMessage: `${field}: ${message}`,
+        })
+      )
+      .join(", ");
+
+    return {
+      error: true,
+      header: "relations.create.failed.header",
+      icon: "attention",
+      content,
+    };
+  }
+
+  const errorMessage =
+    data?.error?.message || data?.error || "An error occurred";
+
+  return {
+    error: true,
+    header: "relations.create.failed.header",
+    icon: "attention",
+    content: errorMessage,
+  };
+};