@truedat/core 8.1.0 → 8.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.1.0",
+  "version": "8.1.3",
   "description": "Truedat Web Core",
   "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": "8.1.0",
+    "@truedat/test": "8.1.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -85,5 +85,5 @@
     "slate-react": "^0.22.10",
     "swr": "^2.3.3"
   },
-  "gitHead": "c954898f854501a4e91a10be48ea563e55967284"
+  "gitHead": "0eaf0c4b1342771cddb87d09ed78a9e4c65a5ca2"
 }

package/src/components/GlossaryMenu.js

@@ -26,20 +26,17 @@ import {
 import Submenu from "./Submenu";
 
 function isMenuSubscope(pathname, subscope) {
-  // const match = matchPath(
-  //   {
-  //     path: [
-  //       CONCEPTS_SUBSCOPE,
-  //       CONCEPTS_SIDEMENU_SUBSCOPE,
-  //       CONCEPTS_SIDEMENU_SUBSCOPE_DEPRECATED,
-  //       CONCEPTS_SIDEMENU_SUBSCOPE_PENDING,
-  //     ],
-  //   },
-  //   pathname
-  // );
-
-  // return !!match?.params?.subscope && subscope === match.params.subscope;
-  return false;
+  const pathsToCheck = [
+    CONCEPTS_SUBSCOPE,
+    CONCEPTS_SIDEMENU_SUBSCOPE,
+    CONCEPTS_SIDEMENU_SUBSCOPE_DEPRECATED,
+    CONCEPTS_SIDEMENU_SUBSCOPE_PENDING,
+  ];
+
+  return pathsToCheck.some(path => {
+    const match = matchPath({ path }, pathname);
+    return match?.params?.subscope && subscope === decodeURIComponent(match.params.subscope);
+  });
 }
 
 function mainMenuSubscopes(allSubscopes, rootSubscopes) {
@@ -247,7 +244,6 @@ export const GlossaryMenu = ({ bgSubscopes, rootSubscopes }) => {
 
     const isActiveSubscope = () =>
       conceptSubscope === name || isMenuSubscope(location.pathname, name);
-
     return (
       <Submenu
         key={name}

package/src/components/QualityMenu.js

@@ -6,16 +6,17 @@ import { useAuthorized } from "../hooks";
 import {
   EXECUTION_GROUPS,
   IMPLEMENTATIONS,
+  IMPLEMENTATIONS_BY_SUBSCOPE,
   IMPLEMENTATIONS_DEPRECATED,
   IMPLEMENTATIONS_PENDING,
   IMPLEMENTATIONS_UPLOAD_JOBS,
   QUALITY_DASHBOARD,
   RULES,
 } from "../routes";
-import { getQualityDashboardConfig } from "../selectors";
+import { getQualityDashboardConfig, getRiSubscopes } from "../selectors";
 import Submenu from "./Submenu";
 
-export const ITEMS = [
+export const BASE_ITEMS = [
   { name: "rules", routes: [RULES], groups: ["quality"] },
   { name: "implementations", routes: [IMPLEMENTATIONS], groups: ["quality"] },
   {
@@ -45,7 +46,7 @@ export const ITEMS = [
   },
 ];
 
-export const QualityMenu = ({ dashboardConfig }) => {
+export const QualityMenu = ({ dashboardConfig, riSubscopes }) => {
   const { formatMessage } = useIntl();
   const iconQuality = formatMessage({
     id: "sidemenu.quality.icon",
@@ -57,21 +58,45 @@ export const QualityMenu = ({ dashboardConfig }) => {
     "quality_implementation_additional_actions"
   );
 
-  const filteredItems = _.filter(
+  if (!authorized) return null;
+
+  const filteredBaseItems = _.filter(
     ({ name }) => name != "quality_dashboard" || !_.isEmpty(dashboardConfig)
-  )(ITEMS);
+  )(BASE_ITEMS);
+
+  const extendedItems = filteredBaseItems.reduce((acc, item) => {
+    acc.push(item);
+
+    if (item.name === "implementations") {
+      riSubscopes.forEach(subscope => {
+        acc.push({
+          name: subscope,
+          routes: [IMPLEMENTATIONS_BY_SUBSCOPE.replace(':subscope', subscope)],  
+          groups: ["quality"],
+        });
+      });
+    }
+
+    return acc;
+  }, []);
 
-  return authorized ? (
-    <Submenu items={filteredItems} icon={iconQuality} name="quality" />
-  ) : null;
+  return (
+    <Submenu items={extendedItems} icon={iconQuality} name="quality" />
+  );
 };
 
 QualityMenu.propTypes = {
   dashboardConfig: PropTypes.object,
+  riSubscopes: PropTypes.array,
+};
+
+QualityMenu.defaultProps = {
+  riSubscopes: [],
 };
 
 export const mapStateToProps = (state) => ({
   dashboardConfig: getQualityDashboardConfig(state),
+  riSubscopes: getRiSubscopes(state),
 });
 
-export default connect(mapStateToProps)(QualityMenu);
+export default connect(mapStateToProps)(QualityMenu);

package/src/components/Submenu.js

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl, FormattedMessage } from "react-intl";
 import { connect } from "react-redux";
-import { useLocation, Link, useNavigate } from "react-router";
+import { useLocation, Link, useNavigate, matchPath } from "react-router";
 import { Dropdown, Icon, Menu } from "semantic-ui-react";
 import { useAuthorizedItems, useActiveRoutes } from "@truedat/core/hooks";
 import { clearNavFilter as clearBucketFilterRoutine } from "@truedat/core/routines";
@@ -84,14 +84,49 @@ export const Submenu = ({
   }, [location]);
 
   const primaryRoute = _.flow(_.flatMap("routes"), _.head)(filteredItems);
+  const pathname = location.pathname;
+  const decodedPathname = decodeURIComponent(pathname);
+  const routes = _.flatMap("routes")(filteredItems);
+
+  const pathParts = pathname.split('/').filter(part => part !== '');
+  const hasSubscopeInPath = pathname.includes('/subscope/');
+  let subscopeName = null;
+  if (hasSubscopeInPath && pathParts.length >= 3 && pathParts[1] === 'subscope') {
+    subscopeName = decodeURIComponent(pathParts[2]).replace(/%20/g, ' ');
+  }
+
+  const isSubmenuActiveForSubscope = hasSubscopeInPath && subscopeName &&
+    _.some(item =>
+      item.name.toLowerCase() === subscopeName.toLowerCase()
+    )(filteredItems);
+
+  const isSubmenuActiveForRoutes = _.some(item =>
+    _.some(route => {
+      const decodedPathname = decodeURIComponent(pathname);
+      return decodedPathname === route ||
+             decodedPathname.startsWith(`${route}/`) ||
+             matchPath({ path: route }, decodedPathname);
+    })(item.routes)
+  )(filteredItems);
+
+  // Determine if submenu should be active, with special handling for management URLs
+  const submenuIsActive = (isActive || isSubmenuActiveForSubscope || isSubmenuActiveForRoutes) &&
+    !(name === 'glossary' && location.pathname.startsWith('/concepts/management/'));
+
 
-  if (isActive && sidebarVisible) {
+  if (submenuIsActive && sidebarVisible) {
     const menuItems = filteredItems.map((item, i) => {
       const isItemActive =
-        isActive &&
+        submenuIsActive &&
         (item.isActive
           ? item.isActive()
-          : _.includes(activeRoute, item.routes));
+          : hasSubscopeInPath && subscopeName
+            ? item.name.toLowerCase() === subscopeName.toLowerCase() 
+            : item.routes.some(route =>
+                route === activeRoute || 
+                route === pathname || route === decodedPathname || 
+                matchPath({ path: route }, pathname) || matchPath({ path: route }, decodedPathname) // Pattern match
+              ));
 
       return (
         <MenuItem
@@ -120,7 +155,7 @@ export const Submenu = ({
       </Menu.Item>
     );
   } else {
-    const className = isActive ? "active" : null;
+    const className = submenuIsActive ? "active" : null;
 
     const trigger = (
       <Link to={primaryRoute} className="ui">
@@ -132,10 +167,16 @@ export const Submenu = ({
     );
     const dropdownItems = filteredItems.map((item, i) => {
       const isItemActive =
-        isActive &&
+        submenuIsActive &&
         (item.isActive
           ? item.isActive()
-          : _.includes(activeRoute, item.routes));
+          : hasSubscopeInPath && subscopeName
+            ? item.name.toLowerCase() === subscopeName.toLowerCase() 
+            : item.routes.some(route =>
+                route === activeRoute || 
+                route === pathname || route === decodedPathname || 
+                matchPath({ path: route }, pathname) || matchPath({ path: route }, decodedPathname) 
+              ));
 
       return (
         <DropdownItem

package/src/components/TemplateSelector.js

@@ -20,8 +20,10 @@ export const TemplateSelector = ({
   clearable,
   loading,
   name = "template",
+  onBlur,
   onChange,
   required,
+  requiredError = false,
   selectedValue,
   templates,
   label,
@@ -52,17 +54,19 @@ export const TemplateSelector = ({
       )}
       <Form.Dropdown
         disabled={disabled}
+        error={!!requiredError}
         clearable={clearable}
         loading={loading}
         name={name}
+        onBlur={onBlur}
         onChange={handleChange}
         options={options}
         placeholder={
           placeholder
             ? placeholder
             : formatMessage({
-                id: loading ? "loading" : "template.selector.placeholder",
-              })
+              id: loading ? "loading" : "template.selector.placeholder",
+            })
         }
         search
         selection

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

@@ -13,4 +13,17 @@ describe("<Submenu />", () => {
     const { container } = render(<Submenu {...props} />, renderOpts);
     expect(container).toMatchSnapshot();
   });
+
+  it("should handle subscope path detection correctly", () => {
+    const items = [
+      { name: "implementations", routes: ["/implementations"] },
+      { name: "subscope1", routes: ["/implementations/subscope/subscope1"] },
+    ];
+    const props = { name: "quality", items };
+    const { container } = render(<Submenu {...props} />, {
+      state: { sidebarVisible: true },
+      routes: ["/implementations/subscope/subscope1"]
+    });
+    expect(container).toMatchSnapshot();
+  });
 });

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

@@ -32,6 +32,7 @@ exports[`<AdminMenu /> matches the latest snapshot 1`] = `
           class="divider"
         />
         <a
+          aria-checked="false"
           class="item"
           data-discover="true"
           href="/templates"
@@ -45,6 +46,7 @@ exports[`<AdminMenu /> matches the latest snapshot 1`] = `
           </span>
         </a>
         <a
+          aria-checked="false"
           class="item"
           data-discover="true"
           href="/hierarchies"
@@ -58,6 +60,7 @@ exports[`<AdminMenu /> matches the latest snapshot 1`] = `
           </span>
         </a>
         <a
+          aria-checked="false"
           class="item"
           data-discover="true"
           href="/relationTags"
@@ -71,6 +74,7 @@ exports[`<AdminMenu /> matches the latest snapshot 1`] = `
           </span>
         </a>
         <a
+          aria-checked="false"
           class="item"
           data-discover="true"
           href="/subscriptions"
@@ -84,6 +88,7 @@ exports[`<AdminMenu /> matches the latest snapshot 1`] = `
           </span>
         </a>
         <a
+          aria-checked="false"
           class="item"
           data-discover="true"
           href="/sources"
@@ -97,6 +102,7 @@ exports[`<AdminMenu /> matches the latest snapshot 1`] = `
           </span>
         </a>
         <a
+          aria-checked="false"
           class="item"
           data-discover="true"
           href="/jobs"
@@ -110,6 +116,7 @@ exports[`<AdminMenu /> matches the latest snapshot 1`] = `
           </span>
         </a>
         <a
+          aria-checked="false"
           class="item"
           data-discover="true"
           href="/configurations"
@@ -123,6 +130,7 @@ exports[`<AdminMenu /> matches the latest snapshot 1`] = `
           </span>
         </a>
         <a
+          aria-checked="false"
           class="item"
           data-discover="true"
           href="/i18n/messages"
@@ -136,6 +144,7 @@ exports[`<AdminMenu /> matches the latest snapshot 1`] = `
           </span>
         </a>
         <a
+          aria-checked="false"
           class="item"
           data-discover="true"
           href="/reindex"
@@ -149,6 +158,7 @@ exports[`<AdminMenu /> matches the latest snapshot 1`] = `
           </span>
         </a>
         <a
+          aria-checked="false"
           class="item"
           data-discover="true"
           href="/search/elasticIndexes"

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

@@ -36,3 +36,40 @@ exports[`<Submenu /> matches the latest snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`<Submenu /> should handle subscope path detection correctly 1`] = `
+<div>
+  <div
+    class="active item selectable"
+  >
+    <a
+      data-discover="true"
+      href="/implementations"
+    >
+      <i
+        aria-hidden="true"
+        class="large icon"
+      />
+      quality
+    </a>
+    <div
+      class="menu"
+    >
+      <a
+        class="link item"
+        data-discover="true"
+        href="/implementations"
+      >
+        implementations
+      </a>
+      <a
+        class="active link item"
+        data-discover="true"
+        href="/implementations/subscope/subscope1"
+      >
+        subscope1
+      </a>
+    </div>
+  </div>
+</div>
+`;

package/src/hooks/__tests__/useActiveRoutes.spec.js

@@ -0,0 +1,83 @@
+import { useActiveRoutes } from "../useActiveRoutes";
+
+// Mock the react-router and lodash functions that are used in the hook
+jest.mock("react-router", () => ({
+  useLocation: () => ({ pathname: "/test" }),
+}));
+
+jest.mock("lodash/fp", () => ({
+  prop: jest.fn((key) => (obj) => obj[key]),
+  orderBy: jest.fn((iteratees, orders, collection) => collection.sort()),
+  castArray: jest.fn((val) => Array.isArray(val) ? val : [val]),
+  size: jest.fn((val) => typeof val === 'string' ? val.length : 0),
+  flow: jest.fn((...funcs) => (...args) => funcs.reduceRight((arg, fn) => fn(arg), args)),
+  map: jest.fn((fn) => (arr) => arr.map(fn)),
+  head: jest.fn((arr) => arr[0]),
+}));
+
+jest.mock("@truedat/core/routes", () => ({
+  BUCKETS_VIEW: "/buckets/:propertyPath",
+}));
+
+jest.mock("react-router", () => ({
+  matchPath: jest.fn(() => null),
+}));
+
+describe("hooks: useActiveRoutes", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    
+    // Setup default mocks
+    require("lodash/fp").prop.mockImplementation((key) => (obj) => obj[key]);
+    require("lodash/fp").orderBy.mockImplementation((iteratees, orders, collection) => collection);
+    require("lodash/fp").castArray.mockImplementation((val) => Array.isArray(val) ? val : [val]);
+    require("react-router").useLocation = () => ({ pathname: "/test" });
+  });
+
+  it("should return the most specific route when multiple routes match", () => {
+    const mockUseLocation = jest.spyOn(require("react-router"), "useLocation");
+    mockUseLocation.mockReturnValue({ pathname: "/implementations/subscope/test" });
+
+    const mockRoutes = ["/implementations", "/implementations/subscope/test"];
+    
+    const result = useActiveRoutes(mockRoutes, null);
+    
+    // Should return the more specific route
+    expect(result).toBe("/implementations/subscope/test");
+  });
+
+  it("should handle subscope path detection correctly", () => {
+    const mockUseLocation = jest.spyOn(require("react-router"), "useLocation");
+    mockUseLocation.mockReturnValue({ pathname: "/concepts/subscope/AI_Initiative" });
+
+    const mockRoutes = ["/concepts", "/concepts/subscope/AI_Initiative"];
+    
+    const result = useActiveRoutes(mockRoutes, null);
+    
+    // Should return the more specific route
+    expect(result).toBe("/concepts/subscope/AI_Initiative");
+  });
+
+  it("should return null when no routes match", () => {
+    const mockUseLocation = jest.spyOn(require("react-router"), "useLocation");
+    mockUseLocation.mockReturnValue({ pathname: "/other" });
+
+    const mockRoutes = ["/implementations", "/concepts"];
+    
+    const result = useActiveRoutes(mockRoutes, null);
+    
+    expect(result).toBeNull();
+  });
+
+  it("should handle URL decoding properly", () => {
+    const mockUseLocation = jest.spyOn(require("react-router"), "useLocation");
+    mockUseLocation.mockReturnValue({ pathname: "/concepts/subscope/AI%20Initiative" });
+
+    const mockRoutes = ["/concepts", "/concepts/subscope/AI Initiative"];
+    
+    const result = useActiveRoutes(mockRoutes, null);
+    
+    // Should match the decoded route
+    expect(result).toBe("/concepts/subscope/AI Initiative");
+  });
+});

package/src/hooks/useActiveRoutes.js

@@ -6,27 +6,33 @@ import { matchPath } from "react-router";
 export const useActiveRoutes = (route, navFilter) => {
   const location = useLocation();
   const pathname = _.prop("pathname")(location);
-  const routes = _.castArray(route);
+  const decodedPathname = decodeURIComponent(pathname);
+  const routes = _.orderBy([_.size], ['desc'], _.castArray(route)); // Sort routes by length in descending order to prioritize more specific routes
 
-  return _.flow(
-    _.map((route) => ({
-      route,
-      filterMatch: matchPath({ path: BUCKETS_VIEW }, route),
-    })),
-    _.reduce(
-      (acc, { route, filterMatch }) => {
-        const { filterMatchRoutes, pathMatchRoutes } = acc;
+  for (const routeObj of _.map((route) => ({
+    route,
+    filterMatch: matchPath({ path: BUCKETS_VIEW }, route),
+  }))(routes)) {
+    const { route, filterMatch } = routeObj;
 
-        return navFilter &&
-          _.includes(filterMatch?.params?.propertyPath, Object.keys(navFilter))
-          ? { ...acc, filterMatchRoutes: route }
-          : route === pathname || _.startsWith(`${route}/`)(pathname)
-            ? { ...acc, pathMatchRoutes: route }
-            : { filterMatchRoutes, pathMatchRoutes };
-      },
-      { filterMatchRoutes: null, pathMatchRoutes: null }
-    ),
-    ({ filterMatchRoutes, pathMatchRoutes }) =>
-      !_.isEmpty(filterMatchRoutes) ? filterMatchRoutes : pathMatchRoutes
-  )(routes);
+    if (navFilter &&
+        filterMatch?.params?.propertyPath &&
+        _.includes(filterMatch?.params?.propertyPath, Object.keys(navFilter))) {
+      return route;
+    }
+
+    if (route === pathname || route === decodedPathname) {
+      return route;
+    }
+
+    if (_.startsWith(`${route}/`)(pathname) || _.startsWith(`${route}/`)(decodedPathname)) {
+      return route;
+    }
+
+    if (matchPath({ path: route }, pathname) || matchPath({ path: route }, decodedPathname)) {
+      return route;
+    }
+  }
+
+  return null;
 };

package/src/routes.js

@@ -127,6 +127,7 @@ export const IMPLEMENTATION_MOVE = "/implementations/:implementation_id/move";
 export const IMPLEMENTATION_NEW = "/implementations/new";
 export const IMPLEMENTATION_NEW_BASIC = "/implementations/basic";
 export const IMPLEMENTATION_NEW_RAW = "/implementations/new_raw";
+export const IMPLEMENTATIONS_BY_SUBSCOPE = "/implementations/subscope/:subscope";
 export const IMPLEMENTATION_RESULTS =
   "/implementations/:implementation_id/results";
 export const IMPLEMENTATION_RESULTS_DETAILS =
@@ -385,6 +386,7 @@ const routes = {
   IMPLEMENTATION_NEW,
   IMPLEMENTATION_NEW_BASIC,
   IMPLEMENTATION_NEW_RAW,
+  IMPLEMENTATIONS_BY_SUBSCOPE,
   IMPLEMENTATION_RESULTS,
   IMPLEMENTATION_RESULTS_DETAILS,
   IMPLEMENTATION_RESULT_DETAILS,

package/src/selectors/__tests__/getRiSubscopes.spec.js

@@ -0,0 +1,53 @@
+import { getRiSubscopes } from "../getRiSubscopes";
+
+describe("selectors: getRiSubscopes", () => {
+  it("should return subscopes for ri scope", () => {
+    const allTemplates = [
+      { scope: "ri", subscope: "subscope1" },
+      { scope: "ri", subscope: "subscope2" },
+      { scope: "ri", subscope: "subscope1" }, // duplicate
+      { scope: "ri", subscope: null }, // should be filtered out
+      { scope: "bg", subscope: "other" }, // different scope
+    ];
+
+    const state = { allTemplates };
+
+    const result = getRiSubscopes(state);
+
+    expect(result).toEqual(["subscope1", "subscope2"]);
+  });
+
+  it("should return empty array when no templates match", () => {
+    const allTemplates = [
+      { scope: "bg", subscope: "subscope1" },
+      { scope: "dq", subscope: "subscope2" },
+    ];
+
+    const state = { allTemplates };
+
+    const result = getRiSubscopes(state);
+
+    expect(result).toEqual([]);
+  });
+
+  it("should return empty array when no subscopes exist", () => {
+    const allTemplates = [
+      { scope: "ri", subscope: null },
+      { scope: "ri", subscope: undefined },
+    ];
+
+    const state = { allTemplates };
+
+    const result = getRiSubscopes(state);
+
+    expect(result).toEqual([]);
+  });
+
+  it("should return empty array when allTemplates is empty", () => {
+    const state = { allTemplates: [] };
+
+    const result = getRiSubscopes(state);
+
+    expect(result).toEqual([]);
+  });
+});

package/src/selectors/getRiSubscopes.js

@@ -0,0 +1,8 @@
+import _ from "lodash/fp";
+import { createSelector } from "reselect";
+import { getSubscopes } from "./subscopedTemplates";
+
+export const getRiSubscopes = createSelector(
+  _.prop("allTemplates"),
+  (allTemplates) => getSubscopes(allTemplates, "ri")
+);

package/src/selectors/index.js

@@ -5,6 +5,7 @@ export * from "./makeSearchQuerySelector";
 export * from "./getDashboardConfig";
 export * from "./getRecipients";
 export * from "./getConceptSubscope";
+export * from "./getRiSubscopes";
 export * from "./getSidemenuGlossarySubscopes";
 export * from "./subscopedTemplates";
 export * from "./taxonomy";

package/src/services/formRules.js

@@ -5,27 +5,27 @@ export const numberRules = ({
   maxValue,
 }) => ({
   required: required
-    ? formatMessage({ id: "form.validation.empty_required" })
+    ? { value: true, message: formatMessage({ id: "form.validation.empty_required" }) }
     : null,
   min:
     minValue || minValue === 0
       ? {
-          value: minValue,
-          message: formatMessage(
-            { id: "form.validation.must_be_greater_than_or_equal" },
-            { value: minValue }
-          ),
-        }
+        value: minValue,
+        message: formatMessage(
+          { id: "form.validation.must_be_greater_than_or_equal" },
+          { value: minValue }
+        ),
+      }
       : null,
   max:
     maxValue || maxValue === 0
       ? {
-          value: maxValue,
-          message: formatMessage(
-            { id: "form.validation.must_be_less_than_or_equal" },
-            { value: maxValue }
-          ),
-        }
+        value: maxValue,
+        message: formatMessage(
+          { id: "form.validation.must_be_less_than_or_equal" },
+          { value: maxValue }
+        ),
+      }
       : null,
   pattern: {
     value: /^(-)?\d+(\.\d+)?$/,