@truedat/dd 5.9.4 → 5.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "5.9.4",
+  "version": "5.9.5",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "5.9.4",
+    "@truedat/test": "5.9.5",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -62,7 +62,8 @@
       "@truedat/test/setup"
     ],
     "moduleNameMapper": {
-      "\\.(css|less|png)$": "identity-obj-proxy",
+      "\\.(css|less)$": "identity-obj-proxy",
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
       "^@truedat/([^/]+)$": "<rootDir>/../$1/src/index",
       "^@truedat/([^/]+)/(.*)$": "<rootDir>/../$1/src/$2"
     },
@@ -87,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "5.9.4",
-    "@truedat/core": "5.9.4",
-    "@truedat/df": "5.9.4",
+    "@truedat/auth": "5.9.5",
+    "@truedat/core": "5.9.5",
+    "@truedat/df": "5.9.5",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -114,5 +115,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "63e5534704106cdab8d4294b1b1f52ac7fc36e02"
+  "gitHead": "e5921f6b5e5a2142ac6be90ad269d5e1fecb1e2c"
 }

package/src/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

package/src/components/BucketView.js

@@ -1,9 +1,11 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Grid, Segment } from "semantic-ui-react";
+import { Grid, Header, Image, Segment } from "semantic-ui-react";
 import { useParams, useLocation } from "react-router-dom";
+import searchImage from "assets/searching.png";
+import { FormattedMessage, useIntl } from "react-intl";
 import { saveNavFilter as saveNavFilterRoutine } from "../routines";
 import FilteredNav from "./FilteredNav";
 import StructureCrumbs from "./StructureCrumbs";
@@ -18,6 +20,20 @@ const isBucketFilter = _.flow(
   _.any((entry) => entry.startsWith("metadata", "note"))
 );
 
+const EmptyImage = () => (
+  <div
+    style={{
+      textAlign: "center",
+      paddingBottom: "100px",
+    }}
+  >
+    <Image className="search" src={searchImage} />
+    <span className="system-structures-search__text">
+      <FormattedMessage id="sytems.structures.select_message" />
+    </span>
+  </div>
+);
+
 export const BucketView = ({
   showGrantRequestCart,
   saveNavFilter,
@@ -26,13 +42,20 @@ export const BucketView = ({
   const params = useParams();
   const { id: structureId } = params;
   const location = useLocation();
+  const [navFilterOneProp, setNavFilterOneProp] = useState({});
+  const { formatMessage } = useIntl();
+
+  const getNavFilterURLParams = _.flow(
+    _.path("search"),
+    (search) => new URLSearchParams(search).entries(),
+    (entries) => Object.fromEntries(entries),
+    _.pick(["propertyPath", "propertyValue"])
+  );
 
   useEffect(() => {
+    _.flow(getNavFilterURLParams, setNavFilterOneProp)(location);
     _.flow(
-      _.path("search"),
-      (search) => new URLSearchParams(search).entries(),
-      (entries) => Object.fromEntries(entries),
-      _.pick(["propertyPath", "propertyValue"]),
+      getNavFilterURLParams,
       _.values,
       (keyValue) => Object.fromEntries(new Map([keyValue]).entries()),
       saveNavFilter
@@ -64,7 +87,19 @@ export const BucketView = ({
                   <StructureTabPaneRoutes />
                 </>
               ) : (
-                <p> {JSON.stringify(navFilter)} </p>
+                <>
+                  <Header as="h1">
+                    <FormattedMessage id="bucketView.header" />
+                  </Header>
+                  <Header as="h2">
+                    {navFilterOneProp?.propertyPath
+                      ? `${formatMessage({
+                          id: navFilterOneProp.propertyPath,
+                        })} > ${navFilterOneProp?.propertyValue}`
+                      : null}
+                  </Header>
+                  <EmptyImage />
+                </>
               )}
             </Segment>
           </Grid.Column>

package/src/components/CatalogCustomViewCards.js

@@ -9,6 +9,15 @@ import { FormattedNumber } from "react-intl";
 import { CardGroupsAccordion } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";
 
+const moveMissingBucketToTheEnd = (buckets) =>
+  _.sortBy(({ key }) => (key === "_missing" ? 1 : 0))(buckets);
+
+const orderBuckets = (buckets) =>
+  _.flow(
+    _.orderBy([({ key }) => key.toLowerCase()], ["asc"]),
+    moveMissingBucketToTheEnd
+  )(buckets);
+
 export const CatalogCustomViewCards = ({ structureFilters }) => {
   const { propertyPath } = useParams();
   const groups = [];
@@ -27,7 +36,7 @@ export const CatalogCustomViewCards = ({ structureFilters }) => {
           name={name}
           structures_count={structures_count}
         />
-      ))(structureFilters[propertyPath]?.buckets)}
+      ))(orderBuckets(structureFilters[propertyPath]?.buckets))}
     </Card.Group>
   );
 };

package/src/components/StructureCrumbs.js

@@ -27,6 +27,9 @@ const filterQueryParams = _.flow(
 );
 
 export const SystemCrumb = ({ id, name, navFilter }) => {
+  const [propertyPath, propertyValue] = !_.isEmpty(navFilter)
+    ? _.toPairs(navFilter)[0]
+    : [null, null];
   return (
     <>
       {_.isEmpty(navFilter) || navFilter?.system_id ? (
@@ -38,13 +41,23 @@ export const SystemCrumb = ({ id, name, navFilter }) => {
           {name}
         </Breadcrumb.Section>
       ) : (
-        <Breadcrumb.Section
-          as={Link}
-          to={`${linkTo.BUCKET_VIEW()}?${filterQueryParams(navFilter)}`}
-          active={false}
-        >
-          {JSON.stringify(navFilter)}
-        </Breadcrumb.Section>
+        <>
+          <Breadcrumb.Section
+            as={Link}
+            to={`${linkTo.BUCKETS_VIEW({ propertyPath })}`}
+            active={false}
+          >
+            <FormattedMessage id={propertyPath} />
+          </Breadcrumb.Section>
+          <Breadcrumb.Divider icon="right angle" />
+          <Breadcrumb.Section
+            as={Link}
+            to={`${linkTo.BUCKET_VIEW()}?${filterQueryParams(navFilter)}`}
+            active={false}
+          >
+            {propertyValue}
+          </Breadcrumb.Section>
+        </>
       )}
       <Breadcrumb.Divider icon="right angle" />
     </>
@@ -53,6 +66,7 @@ export const SystemCrumb = ({ id, name, navFilter }) => {
 
 SystemCrumb.propTypes = {
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  navFilter: PropTypes.object,
   name: PropTypes.string,
 };
 

package/src/components/StructureItem.js

@@ -23,6 +23,11 @@ const filterQueryParams = _.flow(
   (queryParams) => new URLSearchParams(queryParams)
 );
 
+const bucketToBreadcrumbs = ({ navFilter, formatMessage }) => {
+  const [propertyPath, propertyValue] = _.toPairs(navFilter)[0];
+  return `${formatMessage({ id: propertyPath })} > ${propertyValue}`;
+};
+
 export const StructureItem = ({
   name,
   id,
@@ -53,7 +58,11 @@ export const StructureItem = ({
     >
       <List.Icon name={getIcon(formatMessage, type)} verticalAlign="middle" />
       <List.Content>
-        <List.Description>{name}</List.Description>
+        <List.Description>
+          {type == "bucket"
+            ? bucketToBreadcrumbs({ navFilter, formatMessage })
+            : name}
+        </List.Description>
       </List.Content>
     </List.Item>
   );

package/src/components/StructureView.js

@@ -51,9 +51,7 @@ export const StructureView = ({
             )}
           </Grid.Row>
         </Grid>
-      ) : (
-        <p>NADA</p>
-      )}
+      ) : null}
     </Segment>
   );
 };

package/src/components/StructuresView.js

@@ -2,10 +2,11 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { useHistory } from "react-router-dom";
+import { useHistory, useRouteMatch } from "react-router-dom";
 import { Header, Icon, Segment, Divider } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
+import { BUCKETS_VIEW } from "@truedat/core/routes";
 import { structureRowsSelector } from "../selectors";
 import StructureSelectedFilters from "./StructureSelectedFilters";
 import StructuresOptions from "./StructuresOptions";
@@ -15,17 +16,33 @@ import StructuresSearchResults from "./StructuresSearchResults";
 import SystemCards from "./SystemCards";
 import CatalogCustomViewCards from "./CatalogCustomViewCards";
 
-export const StructuresHeader = () => (
-  <Header as="h2">
-    <Icon circular name="block layout" />
-    <Header.Content>
-      <FormattedMessage id="structures.header" />
-      <Header.Subheader>
-        <FormattedMessage id="structures.subheader" />
-      </Header.Subheader>
-    </Header.Content>
-  </Header>
-);
+const StructuresHeader = () => {
+  const match = useRouteMatch(BUCKETS_VIEW);
+
+  return (
+    <Header as="h2">
+      <Icon circular name="block layout" />
+      <Header.Content>
+        <FormattedMessage
+          id={
+            !match?.params?.propertyPath
+              ? "structures.header"
+              : "bucketsView.header"
+          }
+        />
+        <Header.Subheader>
+          <FormattedMessage
+            id={
+              !match?.params?.propertyPath
+                ? "structures.subheader"
+                : match?.params?.propertyPath
+            }
+          />
+        </Header.Subheader>
+      </Header.Content>
+    </Header>
+  );
+};
 
 const StructuresViewContent = ({
   actions = {},

package/src/components/SystemStructures.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Grid, Segment } from "semantic-ui-react";
 import { useParams } from "react-router-dom";
+import { withRouter } from "react-router-dom";
 import { getSystem, getSystemTemplate } from "../selectors";
 import { saveNavFilter as saveNavFilterRoutine } from "../routines";
 import FilteredNav from "./FilteredNav";
@@ -54,13 +55,17 @@ SystemStructures.propTypes = {
   systemTemplate: PropTypes.object,
 };
 
-const mapStateToProps = (state) => ({
-  navFilter: state?.navFilter,
-  system: getSystem(state),
-  systemStructuresLoading: _.prop("systemStructuresLoading")(state),
-  systemTemplate: getSystemTemplate(state),
-});
+const mapStateToProps = (state, props) => {
+  return {
+    navFilter: state?.navFilter,
+    system: getSystem(state, props.match.params.id),
+    systemStructuresLoading: _.prop("systemStructuresLoading")(state),
+    systemTemplate: getSystemTemplate(state),
+  };
+};
 
-export default connect(mapStateToProps, {
-  saveNavFilter: saveNavFilterRoutine,
-})(SystemStructures);
+export default withRouter(
+  connect(mapStateToProps, {
+    saveNavFilter: saveNavFilterRoutine,
+  })(SystemStructures)
+);

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

@@ -3,6 +3,7 @@ import { render } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { BucketView } from "../BucketView";
+import en from "../../messages/en";
 
 const state = {
   authentication: { role: "admin" },
@@ -24,6 +25,12 @@ describe("<BucketView />", () => {
     const navFilter = {};
     const renderOpts = {
       state,
+      messages: {
+        en: {
+          ...en,
+          "metadata.region": "metadata.region",
+        },
+      },
     };
 
     render(

package/src/messages/en.js

@@ -9,6 +9,8 @@ export default {
   "alert.updateReferenceDataset.success.header": "Dataset updated",
   "alert.updateTag.failed.header": "Error editing structure tag",
   "alert.updateSystem.failed.header": "Error updating system",
+  "bucketView.header": "Catalog view",
+  "bucketsView.header": "Catalog views",
   "createTag.error.name.has already been taken":
     "A Structure Tag with this name already exists",
   "execution.pending.content":

package/src/messages/es.js

@@ -11,6 +11,8 @@ export default {
     "Dataset actualizado correctamente",
   "alert.updateTag.failed.header": "Error al editar Etiqueta",
   "alert.updateSystem.failed.header": "Error actualizando sistema",
+  "bucketView.header": "Catalog view",
+  "bucketsView.header": "Catalog views",
   "createTag.error.name.has already been taken":
     "Ya existe una Etiqueta de Estructura con ese nombre",
   "execution.pending.content":

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

@@ -7,7 +7,7 @@ describe("selectors: getSystem", () => {
     const systems = [system1, system2];
     const systemId = 1;
     const state = { systems, systemId };
-    const res = getSystem(state);
+    const res = getSystem(state, systemId);
     expect(res).toBe(system1);
   });
 });

package/src/selectors/getStructureParent.js

@@ -29,7 +29,7 @@ export const getStructureParent = createSelector(
   (structure, structureParents, navFilter) =>
     _.isEmpty(structureParents)
       ? !_.isEmpty(structure) && isBucketFilter(navFilter)
-        ? { type: "bucket", name: JSON.stringify(navFilter) }
+        ? { type: "bucket" }
         : _.has("system")(structure)
         ? rootNavItem(structure)
         : {}

package/src/selectors/getSystem.js

@@ -2,6 +2,6 @@ import _ from "lodash/fp";
 import { createSelector } from "reselect";
 
 export const getSystem = createSelector(
-  [_.prop("systems"), _.prop("systemId")],
-  (systems, systemId) => _.find(_.propEq("id", systemId))(systems)
+  [(state) => state?.systems, (_, systemId) => systemId],
+  (systems, systemId) => _.find(({ id }) => id == systemId)(systems)
 );