@truedat/dd 5.8.5 → 5.9.2

package/src/components/FilteredNav.js

@@ -1,13 +1,20 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { lowerDeburrTrim } from "@truedat/core/services/sort";
-import { getSortedStructureChildren, getStructureParent } from "../selectors";
+import { Loader } from "semantic-ui-react";
+import { useBucketStructures } from "../hooks/useBucketStructures";
+import { clearNavFilter as clearNavFilterRoutine } from "../routines";
+import { getStructureParent } from "../selectors";
 import StructureNav from "./StructureNav";
 import StructureSearch from "./StructureSearch";
 
-export const FilteredNav = ({ childStructures, parentStructure }) => {
+export const FilteredNav = ({
+  childStructures,
+  parentStructure,
+  totalStructures,
+}) => {
   const [searchValue, setSearchValue] = useState("");
   const onChange = (searchValue) => setSearchValue(searchValue);
 
@@ -24,6 +31,7 @@ export const FilteredNav = ({ childStructures, parentStructure }) => {
       <StructureNav
         childStructures={filteredStructures(childStructures)}
         parentStructure={parentStructure}
+        totalChildStructures={totalStructures}
       />
     </>
   );
@@ -32,11 +40,45 @@ export const FilteredNav = ({ childStructures, parentStructure }) => {
 FilteredNav.propTypes = {
   childStructures: PropTypes.array,
   parentStructure: PropTypes.object,
+  totalStructures: PropTypes.number,
+};
+
+export const FilteredNavLoader = ({ structure, filter, parentStructure }) => {
+  const { trigger, data, error } = useBucketStructures();
+
+  useEffect(() => {
+    const parentFilter = _.isObject(structure)
+      ? {
+          parent_id: _.isEmpty(structure.children)
+            ? _.pathOr("", "parents[0].data_structure_id")(structure)
+            : _.pathOr("", "id")(structure),
+        }
+      : { parent_id: "" };
+
+    trigger({ ...filter, ...parentFilter });
+  }, [trigger, structure, filter]);
+
+  return !data && !error ? (
+    <Loader />
+  ) : (
+    <FilteredNav
+      childStructures={data.data.data}
+      parentStructure={parentStructure}
+      totalStructures={data.headers["x-total-count"]}
+    />
+  );
+};
+
+FilteredNavLoader.propTypes = {
+  filter: PropTypes.object,
+  structure: PropTypes.object,
+  parentStructure: PropTypes.object,
 };
 
 const mapStateToProps = (state) => ({
   parentStructure: getStructureParent(state),
-  childStructures: getSortedStructureChildren(state),
 });
 
-export default connect(mapStateToProps)(FilteredNav);
+export default connect(mapStateToProps, {
+  clearNavFilter: clearNavFilterRoutine,
+})(FilteredNavLoader);

package/src/components/StructureCrumbs.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
 import { connect } from "react-redux";
@@ -16,24 +16,51 @@ export const StructuresCrumb = () => (
   </>
 );
 
-export const SystemCrumb = ({ id, name }) => (
-  <>
-    <Breadcrumb.Section
-      as={Link}
-      to={linkTo.SYSTEM_STRUCTURES({ id })}
-      active={false}
-    >
-      {name}
-    </Breadcrumb.Section>
-    <Breadcrumb.Divider icon="right angle" />
-  </>
+const filterQueryParams = _.flow(
+  Object.entries,
+  _.first,
+  ([propertyPath, propertyValue]) => ({
+    propertyPath,
+    propertyValue,
+  }),
+  (queryParams) => new URLSearchParams(queryParams)
 );
 
+export const SystemCrumb = ({ id, name, navFilter }) => {
+  return (
+    <>
+      {_.isEmpty(navFilter) || navFilter?.system_id ? (
+        <Breadcrumb.Section
+          as={Link}
+          to={linkTo.SYSTEM_STRUCTURES({ id })}
+          active={false}
+        >
+          {name}
+        </Breadcrumb.Section>
+      ) : (
+        <Breadcrumb.Section
+          as={Link}
+          to={`${linkTo.BUCKET_VIEW()}?${filterQueryParams(navFilter)}`}
+          active={false}
+        >
+          {JSON.stringify(navFilter)}
+        </Breadcrumb.Section>
+      )}
+      <Breadcrumb.Divider icon="right angle" />
+    </>
+  );
+};
+
 SystemCrumb.propTypes = {
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   name: PropTypes.string,
 };
 
+const SystemCrumbConnected = connect(
+  ({ navFilter }) => ({ navFilter }),
+  null
+)(SystemCrumb);
+
 export const AncestorCrumb = ({ name, id }) => (
   <>
     <Breadcrumb.Section as={Link} to={linkTo.STRUCTURE({ id })} active={false}>
@@ -82,11 +109,11 @@ export const StructureCrumbs = ({
   name,
   version,
   isStructureCrumbActive,
-}) =>
-  name ? (
+}) => {
+  return name ? (
     <Breadcrumb>
       <StructuresCrumb />
-      {_.isEmpty(system) ? null : <SystemCrumb {...system} />}
+      {_.isEmpty(system) ? null : <SystemCrumbConnected {...system} />}
       {_.isEmpty(ancestry)
         ? null
         : _.map(({ data_structure_id, name }) => (
@@ -110,6 +137,7 @@ export const StructureCrumbs = ({
       )}
     </Breadcrumb>
   ) : null;
+};
 
 StructureCrumbs.propTypes = {
   ancestry: PropTypes.array,

package/src/components/StructureItem.js

@@ -13,8 +13,26 @@ const getIcon = (formatMessage, type) =>
     defaultMessage: "question circle outline",
   });
 
-export const StructureItem = ({ name, id, type, active, deleted_at }) => {
+const filterQueryParams = _.flow(
+  Object.entries,
+  _.first,
+  ([propertyPath, propertyValue]) => ({
+    propertyPath,
+    propertyValue,
+  }),
+  (queryParams) => new URLSearchParams(queryParams)
+);
+
+export const StructureItem = ({
+  name,
+  id,
+  type,
+  active,
+  deleted_at,
+  navFilter,
+}) => {
   const { formatMessage } = useIntl();
+
   return (
     <List.Item
       as={active ? "a" : Link}
@@ -24,6 +42,8 @@ export const StructureItem = ({ name, id, type, active, deleted_at }) => {
           ? undefined
           : type == "system" && id
           ? linkTo.SYSTEM_STRUCTURES({ id })
+          : type == "bucket"
+          ? `${linkTo.BUCKET_VIEW()}?${filterQueryParams(navFilter)}`
           : id
           ? linkTo.STRUCTURE({ id })
           : STRUCTURES
@@ -45,10 +65,11 @@ StructureItem.propTypes = {
   id: PropTypes.number,
   name: PropTypes.string,
   type: PropTypes.string,
+  navFilter: PropTypes.object,
 };
 
 export const mapStateToProps = (
-  { structure },
+  { structure, navFilter },
   { data_structure_id, id: structureId, type, name, alias }
 ) => {
   const id = data_structure_id || structureId;
@@ -57,6 +78,7 @@ export const mapStateToProps = (
     active:
       type !== "system" && _.isFinite(id) && _.propEq("id", id)(structure),
     name: _.defaultTo(name)(alias),
+    navFilter,
   };
 };
 

package/src/components/StructureItemRoot.js

@@ -1,13 +1,36 @@
+import _ from "lodash/fp";
 import React from "react";
+import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
 import { useHistory } from "react-router-dom";
+import PropTypes from "prop-types";
 import { List } from "semantic-ui-react";
-import { STRUCTURES } from "@truedat/core/routes";
+import { STRUCTURES, linkTo } from "@truedat/core/routes";
 
-export const StructureItemRoot = () => {
+const isBucketFilter = _.flow(
+  Object.keys,
+  // Both metadata and mutable_metadata are "metadata"
+  _.any((entry) => entry.startsWith("metadata", "note"))
+);
+
+const filterParams = _.flow(
+  Object.entries,
+  _.first,
+  ([propertyPath, propertyValue]) => ({
+    propertyPath,
+    propertyValue,
+  })
+);
+
+export const StructureItemRoot = ({ navFilter }) => {
   const history = useHistory();
+  const url = isBucketFilter(navFilter)
+    ? linkTo.BUCKETS_VIEW({
+        propertyPath: filterParams(navFilter)?.propertyPath,
+      })
+    : STRUCTURES;
   return (
-    <List.Item onClick={() => history.push(STRUCTURES)}>
+    <List.Item onClick={() => history.push(url)}>
       <List.Icon name="angle double left" verticalAlign="middle" />
       <List.Content>
         <FormattedMessage id="structure.navigation.home" />
@@ -19,6 +42,12 @@ export const StructureItemRoot = () => {
   );
 };
 
-StructureItemRoot.propTypes = {};
+const mapStateToProps = ({ navFilter }) => ({
+  navFilter,
+});
+
+StructureItemRoot.propTypes = {
+  navFilter: PropTypes.object,
+};
 
-export default StructureItemRoot;
+export default connect(mapStateToProps, null)(StructureItemRoot);

package/src/components/StructureItems.js

@@ -2,10 +2,11 @@ import React from "react";
 import PropTypes from "prop-types";
 import StructureItem from "./StructureItem";
 
-export const StructureItems = ({ structures }) =>
-  structures.map((structure, index) => (
+export const StructureItems = ({ bucketChildStructures, structures }) => {
+  return (bucketChildStructures || structures).map((structure, index) => (
     <StructureItem key={index} {...structure} />
   ));
+};
 
 StructureItems.propTypes = {
   structures: PropTypes.array,

package/src/components/StructureNav.js

@@ -63,7 +63,7 @@ export const StructureNav = ({
 
 StructureNav.propTypes = {
   childStructures: PropTypes.array,
-  parentStructure: PropTypes.array,
+  parentStructure: PropTypes.object,
   totalChildStructures: PropTypes.number,
 };
 

package/src/components/StructureTabs.js

@@ -42,108 +42,110 @@ export const StructureTabs = ({
   version,
 }) => {
   const { formatMessage } = useIntl();
-  const items = _.filter("content")([
-    {
-      active: activeTab === "fields",
-      as: Link,
-      to: structureLink(structure, version),
-      content: fields ? formatMessage({ id: "tabs.dd.fields" }) : false,
-      key: "fields",
-    },
-    {
-      active: activeTab === "children",
-      as: Link,
-      to: linkTo.STRUCTURE_CHILDREN(structure),
-      content: children ? formatMessage({ id: "tabs.dd.children" }) : false,
-      key: "children",
-    },
-    {
-      active: activeTab === "notes",
-      as: Link,
-      to: linkTo.STRUCTURE_NOTES(structure),
-      content: notes ? formatMessage({ id: "tabs.dd.notes" }) : false,
-      key: "notes",
-    },
-    {
-      active: activeTab === "parents",
-      as: Link,
-      to: linkTo.STRUCTURE_PARENTS(structure),
-      content: parents ? formatMessage({ id: "tabs.dd.parents" }) : false,
-      key: "parents",
-    },
-    {
-      active: activeTab === "grants",
-      as: Link,
-      to: linkTo.STRUCTURE_GRANTS(structure),
-      content: grants ? formatMessage({ id: "tabs.dd.grants" }) : false,
-      key: "grants",
-    },
-    {
-      active: activeTab === "metadata",
-      as: Link,
-      to: linkTo.STRUCTURE_METADATA(structure),
-      content: metadata ? formatMessage({ id: "tabs.dd.metadata" }) : false,
-      key: "metadata",
-    },
-    {
-      active: activeTab === "profile",
-      as: Link,
-      to: linkTo.STRUCTURE_PROFILE(structure),
-      content: profile ? formatMessage({ id: "tabs.dd.profile" }) : false,
-      key: "profile",
-    },
-    {
-      active: activeTab === "rules",
-      as: Link,
-      to: linkTo.STRUCTURE_RULES(structure),
-      content: rules ? formatMessage({ id: "tabs.dd.rules" }) : false,
-      key: "rules",
-    },
-    {
-      active: activeTab === "links",
-      as: Link,
-      to: linkTo.STRUCTURE_LINKS(structure),
-      content: links ? formatMessage({ id: "tabs.dd.links" }) : false,
-      key: "links",
-    },
-    {
-      active: activeTab === "structureLinks",
-      as: Link,
-      to: linkTo.STRUCTURE_STRUCTURE_LINKS(structure),
-      content: structureLinks
-        ? formatMessage({ id: "tabs.dd.structureLinks" })
-        : false,
-      key: "structureLinks",
-    },
-    {
-      active: activeTab === "lineage",
-      as: Link,
-      to: linkTo.STRUCTURE_LINEAGE(structure),
-      content: lineage ? formatMessage({ id: "tabs.dd.lineage" }) : false,
-      key: "lineage",
-    },
-    {
-      active: activeTab === "impact",
-      as: Link,
-      to: linkTo.STRUCTURE_IMPACT(structure),
-      content: impact ? formatMessage({ id: "tabs.dd.impact" }) : false,
-      key: "impact",
-    },
-    {
-      active: activeTab === "versions",
-      as: Link,
-      to: versionsLink(structure, version),
-      content: versions ? formatMessage({ id: "tabs.dd.versions" }) : false,
-      key: "versions",
-    },
-    {
-      active: activeTab === "events",
-      as: Link,
-      to: linkTo.STRUCTURE_EVENTS(structure),
-      content: events ? formatMessage({ id: "tabs.dd.audit" }) : false,
-      key: "events",
-    },
-  ]);
+  const items = !_.isEmpty(structure)
+    ? _.filter("content")([
+        {
+          active: activeTab === "fields",
+          as: Link,
+          to: structureLink(structure, version),
+          content: fields ? formatMessage({ id: "tabs.dd.fields" }) : false,
+          key: "fields",
+        },
+        {
+          active: activeTab === "children",
+          as: Link,
+          to: linkTo.STRUCTURE_CHILDREN(structure),
+          content: children ? formatMessage({ id: "tabs.dd.children" }) : false,
+          key: "children",
+        },
+        {
+          active: activeTab === "notes",
+          as: Link,
+          to: linkTo.STRUCTURE_NOTES(structure),
+          content: notes ? formatMessage({ id: "tabs.dd.notes" }) : false,
+          key: "notes",
+        },
+        {
+          active: activeTab === "parents",
+          as: Link,
+          to: linkTo.STRUCTURE_PARENTS(structure),
+          content: parents ? formatMessage({ id: "tabs.dd.parents" }) : false,
+          key: "parents",
+        },
+        {
+          active: activeTab === "grants",
+          as: Link,
+          to: linkTo.STRUCTURE_GRANTS(structure),
+          content: grants ? formatMessage({ id: "tabs.dd.grants" }) : false,
+          key: "grants",
+        },
+        {
+          active: activeTab === "metadata",
+          as: Link,
+          to: linkTo.STRUCTURE_METADATA(structure),
+          content: metadata ? formatMessage({ id: "tabs.dd.metadata" }) : false,
+          key: "metadata",
+        },
+        {
+          active: activeTab === "profile",
+          as: Link,
+          to: linkTo.STRUCTURE_PROFILE(structure),
+          content: profile ? formatMessage({ id: "tabs.dd.profile" }) : false,
+          key: "profile",
+        },
+        {
+          active: activeTab === "rules",
+          as: Link,
+          to: linkTo.STRUCTURE_RULES(structure),
+          content: rules ? formatMessage({ id: "tabs.dd.rules" }) : false,
+          key: "rules",
+        },
+        {
+          active: activeTab === "links",
+          as: Link,
+          to: linkTo.STRUCTURE_LINKS(structure),
+          content: links ? formatMessage({ id: "tabs.dd.links" }) : false,
+          key: "links",
+        },
+        {
+          active: activeTab === "structureLinks",
+          as: Link,
+          to: linkTo.STRUCTURE_STRUCTURE_LINKS(structure),
+          content: structureLinks
+            ? formatMessage({ id: "tabs.dd.structureLinks" })
+            : false,
+          key: "structureLinks",
+        },
+        {
+          active: activeTab === "lineage",
+          as: Link,
+          to: linkTo.STRUCTURE_LINEAGE(structure),
+          content: lineage ? formatMessage({ id: "tabs.dd.lineage" }) : false,
+          key: "lineage",
+        },
+        {
+          active: activeTab === "impact",
+          as: Link,
+          to: linkTo.STRUCTURE_IMPACT(structure),
+          content: impact ? formatMessage({ id: "tabs.dd.impact" }) : false,
+          key: "impact",
+        },
+        {
+          active: activeTab === "versions",
+          as: Link,
+          to: versionsLink(structure, version),
+          content: versions ? formatMessage({ id: "tabs.dd.versions" }) : false,
+          key: "versions",
+        },
+        {
+          active: activeTab === "events",
+          as: Link,
+          to: linkTo.STRUCTURE_EVENTS(structure),
+          content: events ? formatMessage({ id: "tabs.dd.audit" }) : false,
+          key: "events",
+        },
+      ])
+    : null;
   return (
     <>
       <Menu attached="top" secondary pointing tabular items={items} />

package/src/components/StructureTags.js

@@ -44,10 +44,10 @@ StructureTags.propTypes = {
 };
 
 export const StructureTagsLoader = () => {
-  const { id } = useParams();
+  const { id, structureId } = useParams();
   const { loading, error, data } = useQuery(STRUCTURE_TAGS_QUERY, {
     fetchPolicy: "cache-and-network",
-    variables: { id },
+    variables: { id: id || structureId },
   });
   if (error) return null;
   if (loading) return <Loading />;

package/src/components/StructureView.js

@@ -3,6 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Grid, Segment } from "semantic-ui-react";
+import { useParams } from "react-router-dom";
 import FilteredNav from "./FilteredNav";
 import StructureCrumbs from "./StructureCrumbs";
 import StructureGrantCart from "./StructureGrantCart";
@@ -11,43 +12,54 @@ import StructureTabPaneRoutes from "./StructureTabPaneRoutes";
 import StructureTabRoutes from "./StructureTabRoutes";
 
 export const StructureView = ({
+  navFilter,
   structureLoading,
   structure,
   showGrantRequestCart,
-}) => (
-  <Segment loading={structureLoading} className="structures">
-    {structure && structure.id && !structureLoading && (
-      <Grid>
-        <Grid.Row>
-          <Grid.Column width={16}>
-            <StructureCrumbs />
-          </Grid.Column>
-        </Grid.Row>
-        <Grid.Row stretched>
-          <Grid.Column width={4}>
-            <Segment>
-              <FilteredNav />
-            </Segment>
-          </Grid.Column>
-          <Grid.Column width={showGrantRequestCart ? 8 : 12}>
-            <Segment>
-              <StructureSummary />
-              <StructureTabRoutes />
-              <StructureTabPaneRoutes />
-            </Segment>
-          </Grid.Column>
-          {showGrantRequestCart && (
+}) => {
+  const { id: url_structure_id } = useParams();
+
+  return (
+    <Segment loading={structureLoading} className="structures">
+      {structure &&
+      structure.id &&
+      structure.id === url_structure_id &&
+      !structureLoading ? (
+        <Grid>
+          <Grid.Row>
+            <Grid.Column width={16}>
+              <StructureCrumbs />
+            </Grid.Column>
+          </Grid.Row>
+          <Grid.Row stretched>
             <Grid.Column width={4}>
-              <StructureGrantCart />
+              <Segment id="filter-nav-container">
+                <FilteredNav filter={navFilter} structure={structure} />
+              </Segment>
             </Grid.Column>
-          )}
-        </Grid.Row>
-      </Grid>
-    )}
-  </Segment>
-);
+            <Grid.Column width={showGrantRequestCart ? 8 : 12}>
+              <Segment>
+                <StructureSummary />
+                <StructureTabRoutes />
+                <StructureTabPaneRoutes />
+              </Segment>
+            </Grid.Column>
+            {showGrantRequestCart && (
+              <Grid.Column width={4}>
+                <StructureGrantCart />
+              </Grid.Column>
+            )}
+          </Grid.Row>
+        </Grid>
+      ) : (
+        <p>NADA</p>
+      )}
+    </Segment>
+  );
+};
 
 StructureView.propTypes = {
+  navFilter: PropTypes.object,
   structureLoading: PropTypes.bool,
   structure: PropTypes.object,
   showGrantRequestCart: PropTypes.bool,
@@ -57,12 +69,19 @@ const mapStateToProps = ({
   structureLoading,
   structure,
   grantRequestsCart,
-}) => ({
-  structureLoading,
-  structure,
-  showGrantRequestCart:
-    !grantRequestsCart.modificationGrant &&
-    _.flow(_.pathOr([], "structures"), _.negate(_.isEmpty))(grantRequestsCart),
-});
+  navFilter,
+}) => {
+  return {
+    navFilter,
+    structureLoading,
+    structure,
+    showGrantRequestCart:
+      !grantRequestsCart.modificationGrant &&
+      _.flow(
+        _.pathOr([], "structures"),
+        _.negate(_.isEmpty)
+      )(grantRequestsCart),
+  };
+};
 
 export default connect(mapStateToProps)(StructureView);