@truedat/core 5.9.1 → 5.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "5.9.1",
+  "version": "5.9.2",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "5.8.5",
+    "@truedat/test": "5.9.2",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -117,5 +117,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "aaeee38d6569e8c4c6bb605b0cc9b888bd4723a3"
+  "gitHead": "ba5871e60ce56d909e08e0ec304f9b9c6a30ca1c"
 }

package/src/components/CatalogMenu.js

@@ -1,6 +1,12 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
 import React from "react";
+import { useQuery } from "@apollo/client";
+import { CATALOG_VIEW_CONFIGS_QUERY } from "@truedat/dd/api/queries";
+import { linkTo } from "@truedat/core/routes";
 import { useAuthorized } from "../hooks";
 import {
+  BUCKET_VIEW_CONFIGS,
   PENDING_STRUCTURE_NOTES,
   REFERENCE_DATASETS,
   STRUCTURES,
@@ -9,14 +15,20 @@ import {
   SYSTEMS,
   STRUCTURE_TAGS,
 } from "../routes";
+import { Loading } from "./Loading";
 import Submenu from "./Submenu";
 
 const items = [
-  { name: "structures", routes: [STRUCTURES, SYSTEMS] },
+  { name: "structures", routes: [STRUCTURES, SYSTEMS], beforeRest: true },
   { name: "referenceData", routes: [REFERENCE_DATASETS] },
 ];
 
 const adminItems = [
+  {
+    name: "catalogViewConfigs",
+    routes: [BUCKET_VIEW_CONFIGS],
+    beforeRest: true,
+  },
   { name: "structureTypes", routes: [STRUCTURE_TYPES] },
   { name: "structureTags", routes: [STRUCTURE_TAGS] },
 ];
@@ -26,17 +38,32 @@ const structureNoteItems = [
   { name: "structures_upload_events", routes: [STRUCTURES_UPLOAD_EVENTS] },
 ];
 
-export const CatalogMenu = () => {
+const catalogViewConfigItems = _.flow(
+  _.map(({ fieldType, fieldName }) => ({
+    name: `${fieldType}.${fieldName}`,
+    routes: [
+      linkTo.BUCKETS_VIEW({ propertyPath: `${fieldType}.${fieldName}` }),
+    ],
+    beforeRest: true,
+  })),
+  _.orderBy(["name"], ["asc"])
+);
+
+export const CatalogMenu = ({ catalogViewConfigs }) => {
   const adminAuthorized = useAuthorized();
   const structureNotesAuthorized = useAuthorized(
     "data_dictionary_structure_notes"
   );
 
-  const submenuItems = [
+  const submenuItems = _.flow(
+    _.partition({ beforeRest: true }),
+    _.flatten
+  )([
     ...items,
+    ...catalogViewConfigItems(catalogViewConfigs),
     ...(adminAuthorized ? adminItems : []),
     ...(structureNotesAuthorized ? structureNoteItems : []),
-  ];
+  ]);
 
   const authorized = useAuthorized("data_dictionary");
   return authorized ? (
@@ -44,4 +71,20 @@ export const CatalogMenu = () => {
   ) : null;
 };
 
-export default CatalogMenu;
+CatalogMenu.propTypes = {
+  catalogViewConfigs: PropTypes.array,
+};
+
+export const CatalogMenuLoader = (props) => {
+  const { loading, error, data } = useQuery(CATALOG_VIEW_CONFIGS_QUERY, {
+    fetchPolicy: "cache-and-network",
+  });
+  if (error) return null;
+  if (loading) return <Loading />;
+  const configs = data?.catalogViewConfigs || [];
+  return (
+    <CatalogMenu loading={loading} catalogViewConfigs={configs} {...props} />
+  );
+};
+
+export default CatalogMenuLoader;

package/src/components/ConfirmModal.js

@@ -6,11 +6,13 @@ import { FormattedMessage } from "react-intl";
 const defaultActions = (onConfirm) => [
   {
     key: "no",
+    "aria-label": "modal-negative-action",
     secondary: true,
     content: <FormattedMessage id="confirmation.no" />,
   },
   {
     key: "yes",
+    "aria-label": "modal-affirmative-action",
     negative: true,
     content: <FormattedMessage id="confirmation.yes" />,
     onClick: onConfirm,

package/src/components/Submenu.js

@@ -6,10 +6,10 @@ import { connect } from "react-redux";
 import { useLocation, useHistory, Link } from "react-router-dom";
 import { Dropdown, Icon, Menu } from "semantic-ui-react";
 import { useAuthorizedItems, useActiveRoutes } from "@truedat/core/hooks";
+import { clearNavFilter as clearBucketFilterRoutine } from "@truedat/dd/routines";
 
-export const MenuItem = ({ name, routes }) => {
+export const MenuItem = ({ active, clearNavFilter, name, routes }) => {
   const { formatMessage } = useIntl();
-  const active = useActiveRoutes(routes);
   const primaryRoute = _.flow(_.castArray, _.head)(routes);
   return (
     <Menu.Item
@@ -19,19 +19,23 @@ export const MenuItem = ({ name, routes }) => {
       to={primaryRoute}
       active={active}
       content={formatMessage({ id: `sidemenu.${name}`, defaultMessage: name })}
-      onClick={(e) => e.stopPropagation()}
+      onClick={(e) => {
+        clearNavFilter();
+        return e.stopPropagation();
+      }}
     />
   );
 };
 
 MenuItem.propTypes = {
+  active: PropTypes.bool,
+  clearNavFilter: PropTypes.func,
   name: PropTypes.string,
   routes: PropTypes.array,
 };
 
-export const DropdownItem = ({ name, routes }) => {
+export const DropdownItem = ({ active, clearNavFilter, name, routes }) => {
   const { formatMessage } = useIntl();
-  const active = useActiveRoutes(routes);
   const primaryRoute = _.flow(_.castArray, _.head)(routes);
   return (
     <Dropdown.Item
@@ -40,19 +44,31 @@ export const DropdownItem = ({ name, routes }) => {
       to={primaryRoute}
       active={active}
       content={formatMessage({ id: `sidemenu.${name}`, defaultMessage: name })}
-      onClick={(e) => e.stopPropagation()}
+      onClick={(e) => {
+        clearNavFilter();
+        return e.stopPropagation();
+      }}
     />
   );
 };
 
 DropdownItem.propTypes = {
+  active: PropTypes.bool,
+  clearNavFilter: PropTypes.func,
   name: PropTypes.string,
   routes: PropTypes.array,
 };
 
-export const Submenu = ({ items, icon, name, sidebarVisible }) => {
+export const Submenu = ({
+  navFilter,
+  clearNavFilter,
+  items,
+  icon,
+  name,
+  sidebarVisible,
+}) => {
   const [open, setOpen] = useState(false);
-  const active = useActiveRoutes(_.flatMap("routes")(items));
+  const active = useActiveRoutes(_.flatMap("routes")(items), navFilter);
   const filteredItems = useAuthorizedItems(items);
   const location = useLocation();
   const history = useHistory();
@@ -62,7 +78,14 @@ export const Submenu = ({ items, icon, name, sidebarVisible }) => {
   const primaryRoute = _.flow(_.flatMap("routes"), _.head)(filteredItems);
   if (active && sidebarVisible) {
     const menuItems = filteredItems.map((item, i) => (
-      <MenuItem key={i} {...item} />
+      <MenuItem
+        key={i}
+        {...{
+          ...item,
+          clearNavFilter,
+          active: _.includes(active, item?.routes),
+        }}
+      />
     ));
     return (
       <Menu.Item
@@ -91,8 +114,17 @@ export const Submenu = ({ items, icon, name, sidebarVisible }) => {
       </Link>
     );
     const dropdownItems = filteredItems.map((item, i) => (
-      <DropdownItem key={i} {...item} />
+      <DropdownItem
+        key={i}
+        {...{
+          ...item,
+          navFilter,
+          clearNavFilter,
+          active: _.includes(active, item?.routes),
+        }}
+      />
     ));
+
     return (
       <div
         className={className}
@@ -131,11 +163,19 @@ export const Submenu = ({ items, icon, name, sidebarVisible }) => {
 };
 
 Submenu.propTypes = {
+  active: PropTypes.bool,
+  navFilter: PropTypes.object,
+  clearNavFilter: PropTypes.func,
   items: PropTypes.array,
   icon: PropTypes.string,
+  name: PropTypes.string,
   sidebarVisible: PropTypes.bool,
 };
 
-export const mapStateToProps = ({ sidebarVisible }) => ({ sidebarVisible });
+export const mapStateToProps = ({ sidebarVisible, navFilter }) => {
+  return { sidebarVisible, navFilter };
+};
 
-export default connect(mapStateToProps)(Submenu);
+export default connect(mapStateToProps, {
+  clearNavFilter: clearBucketFilterRoutine,
+})(Submenu);

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

@@ -1,5 +1,9 @@
+import _ from "lodash/fp";
 import React from "react";
 import { render } from "@truedat/test/render";
+import { within } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { linkTo } from "@truedat/core/routes";
 import { CatalogMenu } from "../CatalogMenu";
 
 jest.mock("../../hooks", () => ({
@@ -7,7 +11,7 @@ jest.mock("../../hooks", () => ({
   useAuthorized: jest.fn(() => true),
 }));
 
-const renderOpts = {
+const commonRenderOpts = {
   messages: {
     en: {},
   },
@@ -15,7 +19,63 @@ const renderOpts = {
 
 describe("<CatalogMenu />", () => {
   it("matches the latest snapshot", () => {
-    const { container } = render(<CatalogMenu />, renderOpts);
+    const { container } = render(<CatalogMenu />, commonRenderOpts);
     expect(container).toMatchSnapshot();
   });
+
+  it("Path active route", () => {
+    const { container } = render(
+      <MemoryRouter initialEntries={[linkTo.STRUCTURE({ id: 1234 })]}>
+        <CatalogMenu />
+      </MemoryRouter>,
+      commonRenderOpts
+    );
+
+    const activeMenus = container.querySelectorAll('a[aria-checked="true"]');
+    expect(activeMenus.length).toBe(1);
+    expect(within(activeMenus[0]).getByText("structures")).toBeInTheDocument();
+  });
+
+  it("Navigation filter has priority over path for active menu and submenu", () => {
+    const renderOpts = {
+      ...commonRenderOpts,
+      state: {
+        navFilter: { "metadata.region": "eu-west-1" },
+      },
+    };
+
+    const catalogViewConfigs = [
+      {
+        id: "1",
+        fieldType: "metadata",
+        fieldName: "region",
+      },
+      {
+        id: "2",
+        fieldType: "note",
+        fieldName: "layer",
+      },
+    ];
+
+    const { getByText, container } = render(
+      <MemoryRouter initialEntries={[linkTo.STRUCTURE({ id: 1234 })]}>
+        <CatalogMenu catalogViewConfigs={catalogViewConfigs} />
+      </MemoryRouter>,
+      renderOpts
+    );
+
+    const structuresMenu = getByText("structures").closest("a");
+    const metadataBucketMenu = getByText("metadata.region").closest("a");
+    const noteBucketMenu = getByText("note.layer").closest("a");
+
+    expect(structuresMenu).toBeInTheDocument();
+    expect(metadataBucketMenu).toBeInTheDocument();
+    expect(noteBucketMenu).toBeInTheDocument();
+
+    const activeMenus = container.querySelectorAll('a[aria-checked="true"]');
+    expect(activeMenus.length).toBe(1);
+    expect(
+      within(activeMenus[0]).getByText("metadata.region")
+    ).toBeInTheDocument();
+  });
 });

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

@@ -42,6 +42,19 @@ exports[`<CatalogMenu /> matches the latest snapshot 1`] = `
             structures
           </span>
         </a>
+        <a
+          aria-checked="false"
+          class="item"
+          href="/bucketViewConfigs"
+          name="catalogViewConfigs"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            catalogViewConfigs
+          </span>
+        </a>
         <a
           aria-checked="false"
           class="item"

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

@@ -32,8 +32,8 @@ exports[`<GlossaryMenu /> matches the latest snapshot, finds fixed and subscopes
           class="divider"
         />
         <a
-          aria-checked="true"
-          class="active item"
+          aria-checked="false"
+          class="item"
           href="/concepts"
           name="concepts"
           role="option"
@@ -45,8 +45,8 @@ exports[`<GlossaryMenu /> matches the latest snapshot, finds fixed and subscopes
           </span>
         </a>
         <a
-          aria-checked="true"
-          class="active item"
+          aria-checked="false"
+          class="item"
           href="/subscopedConcepts/subscope1"
           name="subscope1"
           role="option"
@@ -58,8 +58,8 @@ exports[`<GlossaryMenu /> matches the latest snapshot, finds fixed and subscopes
           </span>
         </a>
         <a
-          aria-checked="true"
-          class="active item"
+          aria-checked="false"
+          class="item"
           href="/subscopedConcepts/subscope2"
           name="subscope2"
           role="option"
@@ -71,8 +71,8 @@ exports[`<GlossaryMenu /> matches the latest snapshot, finds fixed and subscopes
           </span>
         </a>
         <a
-          aria-checked="true"
-          class="active item"
+          aria-checked="false"
+          class="item"
           href="/pendingConcepts"
           name="concepts_management"
           role="option"
@@ -84,8 +84,8 @@ exports[`<GlossaryMenu /> matches the latest snapshot, finds fixed and subscopes
           </span>
         </a>
         <a
-          aria-checked="true"
-          class="active item"
+          aria-checked="false"
+          class="item"
           href="/links/concepts/management"
           name="concepts_links_management"
           role="option"

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

@@ -32,8 +32,8 @@ exports[`<QualityMenu /> matches the latest snapshot 1`] = `
           class="divider"
         />
         <a
-          aria-checked="true"
-          class="active item"
+          aria-checked="false"
+          class="item"
           href="/rules"
           name="rules"
           role="option"
@@ -45,8 +45,8 @@ exports[`<QualityMenu /> matches the latest snapshot 1`] = `
           </span>
         </a>
         <a
-          aria-checked="true"
-          class="active item"
+          aria-checked="false"
+          class="item"
           href="/implementations"
           name="implementations"
           role="option"
@@ -58,8 +58,8 @@ exports[`<QualityMenu /> matches the latest snapshot 1`] = `
           </span>
         </a>
         <a
-          aria-checked="true"
-          class="active item"
+          aria-checked="false"
+          class="item"
           href="/pendingImplementations"
           name="implementations_management"
           role="option"
@@ -71,8 +71,8 @@ exports[`<QualityMenu /> matches the latest snapshot 1`] = `
           </span>
         </a>
         <a
-          aria-checked="true"
-          class="active item"
+          aria-checked="false"
+          class="item"
           href="/deprecatedImplementations"
           name="implementations_deprecated"
           role="option"
@@ -84,8 +84,8 @@ exports[`<QualityMenu /> matches the latest snapshot 1`] = `
           </span>
         </a>
         <a
-          aria-checked="true"
-          class="active item"
+          aria-checked="false"
+          class="item"
           href="/executionGroups"
           name="executions"
           role="option"

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

@@ -44,6 +44,9 @@ exports[`<SideMenu /> matches the latest snapshot 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="ui active loader"
+      />
       <a
         class="item bottom"
       >

package/src/hooks/useActiveRoute.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import { useRouteMatch } from "react-router-dom";
 
-export const useActiveRoute = props => {
+export const useActiveRoute = (props) => {
   const match = useRouteMatch(props);
   return _.has("path")(match);
 };

package/src/hooks/useActiveRoutes.js

@@ -1,12 +1,32 @@
 import _ from "lodash/fp";
 import { useLocation } from "react-router-dom";
+import { BUCKETS_VIEW } from "@truedat/core/routes";
+import { matchPath } from "react-router";
 
-export const useActiveRoutes = route => {
+export const useActiveRoutes = (route, navFilter) => {
   const location = useLocation();
   const pathname = _.prop("pathname")(location);
   const routes = _.castArray(route);
-  return (
-    _.any(_.eq(pathname))(routes) ||
-    _.any(route => _.startsWith(`${route}/`)(pathname))(routes)
-  );
+
+  return _.flow(
+    _.map((route) => ({
+      route,
+      filterMatch: matchPath(route, { path: BUCKETS_VIEW }),
+    })),
+    _.reduce(
+      (acc, { route, filterMatch }) => {
+        const { filterMatchRoutes, pathMatchRoutes } = acc;
+
+        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);
 };

package/src/messages/en.js

@@ -32,6 +32,9 @@ export default {
   "alert.status.500.header": "Internal Server Error (500)",
   "alert.status.504.content": "No response received from service ({text}).",
   "alert.status.504.header": "Gateway Timeout (504)",
+  "bucketViewConfig.fieldName": "Field name",
+  "bucketViewConfig.fieldType": "Field type",
+  "bucketViewConfigs.new": "New catalog view",
   "comments.actions.new": "New comment",
   "comments.header": "Comments",
   "components.CardGroupsAccordion.withoutGroups": "Without Groups",
@@ -73,7 +76,7 @@ export default {
   "i18n.messages.locale.es": "Spanish",
   "i18n.messages.locale.en": "English",
   "i18n.messages.search.placeholder": "Search messages",
-
+  missingBucket: "(Missing selected bucket)",
   "navigation.dashboard": "Dashboard",
   "navigation.menu": "Menu",
   "search.applied_filters": "Filters:",
@@ -100,6 +103,7 @@ export default {
   "validation.header.message.error": "Could you check something!",
   "sidemenu.admin": "Administration",
   "sidemenu.catalog": "Catalog",
+  "sidemenu.catalogViewConfigs": "Bucket view config",
   "sidemenu.concepts_links_management": "Links manager",
   "sidemenu.concepts_management": "Drafts",
   "sidemenu.concepts": "Glossary",

package/src/messages/es.js

@@ -33,6 +33,9 @@ export default {
   "alert.status.504.content":
     "No se ha recibido ninguna respuesta del servicio ({text})",
   "alert.status.504.header": "Gateway Timeout (504)",
+  "bucketViewConfig.fieldName": "Nombre del campo",
+  "bucketViewConfig.fieldType": "Tipo de campo",
+  "bucketViewConfigs.new": "Nueva vista de catálogo",
   "comments.actions.new": "Añadir comentario",
   "comments.header": "Comentarios",
   "components.CardGroupsAccordion.withoutGroups": "Sin Agrupación",
@@ -75,6 +78,7 @@ export default {
   "i18n.messages.search.placeholder": "Buscar mensajes",
 
   loading: "cargando...",
+  missingBucket: "(Sin bucket seleccionado)",
   "navigation.dashboard": "Dashboard",
   "navigation.menu": "Menú",
   "search.applied_filters": "Filtros aplicados:",
@@ -103,6 +107,7 @@ export default {
   "validation.header.message.error": "Faltan campos por rellenar!",
   "sidemenu.admin": "Administración",
   "sidemenu.catalog": "Catálogo",
+  "sidemenu.catalogViewConfigs": "Config vistas bucket",
   "sidemenu.concepts_links_management": "Gestión de vínculos",
   "sidemenu.concepts_management": "Borradores",
   "sidemenu.concepts": "Glosario",

package/src/routes.js

@@ -2,6 +2,11 @@ import _ from "lodash/fp";
 import { compile } from "path-to-regexp";
 
 export const CALLBACK = "/callback";
+export const BUCKETS_VIEW = "/buckets/:propertyPath";
+export const BUCKET_VIEW = "/bucketStructures";
+export const BUCKET_VIEW_CONFIGS = "/bucketViewConfigs";
+export const BUCKET_VIEW_CONFIG_EDIT = "/bucketViewConfigs/:id/edit";
+export const BUCKET_VIEW_CONFIG_NEW = "/bucketViewConfigs/new";
 export const CONCEPTS = "/concepts";
 export const CONCEPTS_BULK_UPDATE = "/concepts/bulk_update";
 export const CONCEPTS_NEW = "/concepts/new";
@@ -226,6 +231,11 @@ export const USER_EDIT_PASSWORD = "/users/:id/password";
 
 const routes = {
   CALLBACK,
+  BUCKETS_VIEW,
+  BUCKET_VIEW,
+  BUCKET_VIEW_CONFIG_EDIT,
+  BUCKET_VIEW_CONFIG_NEW,
+  BUCKET_VIEW_CONFIGS,
   CONCEPTS,
   CONCEPTS_BULK_UPDATE,
   CONCEPTS_NEW,