@truedat/bg 7.14.2 → 7.14.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "7.14.2",
+  "version": "7.14.4",
   "description": "Truedat Web Business Glossary",
   "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.14.2",
+    "@truedat/test": "7.14.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -81,5 +81,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "819dbd2c48ef3339194608f79a58d502fe6c01a6"
+  "gitHead": "ff4102dd37ec8de3894938db2f3ed8a482adf2ca"
 }

package/src/concepts/components/ConceptTabs.js

@@ -38,13 +38,6 @@ export const ConceptTabs = ({
   const rulesActive = useActiveRoute(CONCEPT_RULES);
   const implementationsActive = useActiveRoute(CONCEPT_LINKS_IMPLEMENTATIONS);
   const structureLinksActive = useActiveRoute(CONCEPT_LINKS_STRUCTURES);
-  
-  console.clear();
-  console.log("enableQualityRules", enableQualityRules);
-  console.log("manageQualityRule", manageQualityRule);
-  console.log("viewQualityRule", viewQualityRule);
-  console.log("isAdmin", isAdmin);
-  console.log("rule_count", concept.rule_count);
 
   return _.isEmpty(concept) ? null : (
     <Menu attached="top" pointing secondary tabular>
@@ -90,15 +83,15 @@ export const ConceptTabs = ({
       {(!emptyImplementationLinks ||
         createImplementation ||
         createRawImplementation) && (
-        <Menu.Item
-          active={implementationsActive}
-          as={Link}
-          to={linkTo.CONCEPT_LINKS_IMPLEMENTATIONS(concept)}
-          replace
-        >
-          <FormattedMessage id="tabs.bg.qualityImplementations" />
-        </Menu.Item>
-      )}
+          <Menu.Item
+            active={implementationsActive}
+            as={Link}
+            to={linkTo.CONCEPT_LINKS_IMPLEMENTATIONS(concept)}
+            replace
+          >
+            <FormattedMessage id="tabs.bg.qualityImplementations" />
+          </Menu.Item>
+        )}
       <Menu.Item
         active={archiveActive}
         as={Link}

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

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import {
@@ -24,6 +24,7 @@ import {
   EMPTY,
 } from "@truedat/lm/services/relationGraphTraversal";
 import { RelationGraphDepth } from "@truedat/lm/components";
+import { config } from "@truedat/core/truedatConfig";
 import { getConceptToConceptRelations } from "../selectors/getConceptRelations";
 
 import ConceptRelationActions from "./ConceptRelationActions";
@@ -57,9 +58,32 @@ export const ConceptRelations = ({
 
   const navigate = useNavigate();
   const location = useLocation();
+  const hasAppliedConfig = useRef(false);
+
   const [graphRender, setGraphRender] = useState(
     _.propOr(true, "state.show_graph")(location) && !_.isEmpty(conceptRelations)
   );
+
+  useEffect(() => {
+    if (_.isEmpty(conceptRelations) || hasAppliedConfig.current) {
+      return;
+    }
+
+    const locationShowGraph = _.prop("state.show_graph")(location);
+    if (!_.isUndefined(locationShowGraph)) {
+      setGraphRender(locationShowGraph);
+    } else {
+      const renderMode = config?.RelatedConceptsActiveRenderMode;
+      // If renderMode is undefined, keep the default value (true)
+      if (renderMode === "list") {
+        setGraphRender(false);
+      } else if (renderMode === "graph") {
+        setGraphRender(true);
+      }
+    }
+    hasAppliedConfig.current = true;
+  }, [conceptRelations, location]);
+
   const navigateToConcept = ({ resource_id }, emptyEdges) => {
     navigate(
       linkTo.CONCEPT_LINKS_CONCEPTS({

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

@@ -1,23 +1,186 @@
 import { render, waitForLoad } from "@truedat/test/render";
 import { ConceptRelations } from "../ConceptRelations";
+import { setConfig } from "@truedat/core/truedatConfig";
+
+const mockUseLocation = jest.fn(() => ({ pathname: "/bar" }));
+const mockUseNavigate = jest.fn(() => jest.fn());
 
 jest.mock("react-router", () => ({
   ...jest.requireActual("react-router"),
-  useLocation: () => ({ pathname: "/bar" }),
-  useNavigate: () => jest.fn(),
+  useLocation: () => mockUseLocation(),
+  useNavigate: () => mockUseNavigate(),
+}));
+
+jest.mock("@truedat/lm/components", () => ({
+  RelationGraph: () => <div data-testid="relation-graph">RelationGraph</div>,
+  RelationGraphDepth: () => (
+    <div data-testid="relation-graph-depth">RelationGraphDepth</div>
+  ),
 }));
 
 describe("<ConceptRelations />", () => {
+  beforeEach(() => {
+    setConfig({});
+    mockUseLocation.mockReturnValue({ pathname: "/bar" });
+  });
+
+  afterEach(() => {
+    setConfig({});
+    jest.clearAllMocks();
+  });
+
+  const baseState = {
+    concept: { business_concept_id: 1 },
+    conceptActions: {},
+  };
+
+  const baseProps = {
+    concept: { business_concept_id: 1 },
+    conceptRelations: [
+      {
+        id: 1,
+        name: "Related Concept",
+        tags: [],
+        context: {},
+      },
+    ],
+    relationsGraph: {
+      nodes: [{ id: "business_concept:1" }],
+      edges: [],
+    },
+    initialDepth: Infinity,
+    visible: true,
+  };
+
   it("matches the latest snapshot", async () => {
     const props = {
-      concept: { business_concept_id: 1 },
-      conceptRelationsLoading: false,
+      ...baseProps,
       conceptRelations: [],
       relationsGraph: {},
     };
 
-    const rendered = render(<ConceptRelations {...props} />);
+    const rendered = render(<ConceptRelations {...props} />, {
+      state: baseState,
+    });
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
+
+  it("activates graph button when RelatedConceptsActiveRenderMode is graph", async () => {
+    setConfig({ RelatedConceptsActiveRenderMode: "graph" });
+
+    const rendered = render(<ConceptRelations {...baseProps} />, {
+      state: baseState,
+    });
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.container.querySelector('button[data-tooltip*="maps"]')
+    ).toHaveClass("active");
+    expect(
+      rendered.container.querySelector('button[data-tooltip*="list"]')
+    ).not.toHaveClass("active");
+    expect(rendered.getByTestId("relation-graph")).toBeInTheDocument();
+  });
+
+  it("activates list button when RelatedConceptsActiveRenderMode is list", async () => {
+    setConfig({ RelatedConceptsActiveRenderMode: "list" });
+
+    const rendered = render(<ConceptRelations {...baseProps} />, {
+      state: baseState,
+    });
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.container.querySelector('button[data-tooltip*="list"]')
+    ).toHaveClass("active");
+    expect(
+      rendered.container.querySelector('button[data-tooltip*="maps"]')
+    ).not.toHaveClass("active");
+    expect(rendered.queryByTestId("relation-graph")).not.toBeInTheDocument();
+  });
+
+  it("shows graph view by default when RelatedConceptsActiveRenderMode is not set", async () => {
+    setConfig({});
+
+    const rendered = render(<ConceptRelations {...baseProps} />, {
+      state: baseState,
+    });
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.container.querySelector('button[data-tooltip*="maps"]')
+    ).toHaveClass("active");
+    expect(
+      rendered.container.querySelector('button[data-tooltip*="list"]')
+    ).not.toHaveClass("active");
+    expect(rendered.getByTestId("relation-graph")).toBeInTheDocument();
+  });
+
+  it("prioritizes location.state.show_graph over RelatedConceptsActiveRenderMode", async () => {
+    setConfig({ RelatedConceptsActiveRenderMode: "graph" });
+    mockUseLocation.mockReturnValue({
+      pathname: "/bar",
+      state: { show_graph: false },
+    });
+
+    const rendered = render(<ConceptRelations {...baseProps} />, {
+      state: baseState,
+    });
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.container.querySelector('button[data-tooltip*="list"]')
+    ).toHaveClass("active");
+    expect(
+      rendered.container.querySelector('button[data-tooltip*="maps"]')
+    ).not.toHaveClass("active");
+    expect(rendered.queryByTestId("relation-graph")).not.toBeInTheDocument();
+  });
+
+  it("prioritizes location.state.show_graph true over RelatedConceptsActiveRenderMode list", async () => {
+    setConfig({ RelatedConceptsActiveRenderMode: "list" });
+    mockUseLocation.mockReturnValue({
+      pathname: "/bar",
+      state: { show_graph: true },
+    });
+
+    const rendered = render(<ConceptRelations {...baseProps} />, {
+      state: baseState,
+    });
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.container.querySelector('button[data-tooltip*="maps"]')
+    ).toHaveClass("active");
+    expect(
+      rendered.container.querySelector('button[data-tooltip*="list"]')
+    ).not.toHaveClass("active");
+    expect(rendered.getByTestId("relation-graph")).toBeInTheDocument();
+  });
+
+  it("applies configuration when conceptRelations loads after initial render", async () => {
+    setConfig({ RelatedConceptsActiveRenderMode: "list" });
+
+    const propsWithoutRelations = {
+      ...baseProps,
+      conceptRelations: [],
+    };
+
+    const rendered = render(<ConceptRelations {...propsWithoutRelations} />, {
+      state: baseState,
+    });
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.container.querySelector('button[data-tooltip*="maps"]')
+    ).not.toBeInTheDocument();
+
+    rendered.rerender(<ConceptRelations {...baseProps} />);
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.container.querySelector('button[data-tooltip*="list"]')
+    ).toHaveClass("active");
+  });
 });