@truedat/dd 5.0.7 → 5.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [5.1.0] 2023-02-09
+
+### Changed
+
+- [TD-5444] Search system root structures
+
 ## [5.0.7] 2023-02-07
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "5.0.7",
+  "version": "5.1.1",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -114,5 +114,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "5919ee71f696378a71010642f5bcd2fb6c68f1c7"
+  "gitHead": "28731e6c6de05ad746edb43d5a23f99c6e0a5779"
 }

package/src/components/StructureNav.js

@@ -2,6 +2,7 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { List, Divider } from "semantic-ui-react";
+import { useIntl } from "react-intl";
 import StructureItemRoot from "./StructureItemRoot";
 import StructureItem from "./StructureItem";
 import StructureItems from "./StructureItems";
@@ -14,37 +15,56 @@ export const navClasses = _.flow(
 );
 export const hasNavClass = _.flow(navClasses, _.negate(_.isEmpty));
 
-export const StructureNav = ({ childStructures, parentStructure }) => {
+export const StructureNav = ({
+  childStructures,
+  parentStructure,
+  totalChildStructures,
+}) => {
+  const { formatMessage } = useIntl();
   const firstWithClasses = _.find(hasNavClass)(childStructures);
   const classifier = firstWithClasses
     ? _.flow(navClasses, _.head)(firstWithClasses)
     : undefined;
 
   return (
-    <List relaxed selection className="structure-nav">
-      <StructureItemRoot />
-      {_.isEmpty(parentStructure) ? null : (
-        <>
-          <Divider />
-          <StructureItem {...parentStructure} />
-          <Divider />
-        </>
-      )}
-      {classifier ? (
-        <StructureNavClassified
-          classifier={classifier}
-          structures={childStructures}
-        />
-      ) : (
-        <StructureItems structures={childStructures} />
-      )}
-    </List>
+    <>
+      <List relaxed selection className="structure-nav">
+        <StructureItemRoot />
+        {_.isEmpty(parentStructure) ? null : (
+          <>
+            <Divider />
+            <StructureItem {...parentStructure} />
+            <Divider />
+          </>
+        )}
+        {classifier ? (
+          <StructureNavClassified
+            classifier={classifier}
+            structures={childStructures}
+          />
+        ) : (
+          <StructureItems structures={childStructures} />
+        )}
+      </List>
+      {totalChildStructures && totalChildStructures > childStructures.length ? (
+        <List>
+          <List.Item disabled active={false}>
+            <span>
+              {`${childStructures.length} ${formatMessage({
+                id: "structure.navigation.showing",
+              })} ${totalChildStructures}`}
+            </span>
+          </List.Item>
+        </List>
+      ) : null}
+    </>
   );
 };
 
 StructureNav.propTypes = {
   childStructures: PropTypes.array,
-  parentStructure: PropTypes.object,
+  parentStructure: PropTypes.array,
+  totalChildStructures: PropTypes.number,
 };
 
 export default StructureNav;

package/src/components/StructureSearch.js

@@ -3,9 +3,9 @@ import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Input } from "semantic-ui-react";
 
-export const StructureSearch = ({ onChange }) => {
+export const StructureSearch = ({ onChange, loading = false }) => {
   const { formatMessage } = useIntl();
-  const handleChange = e => {
+  const handleChange = (e) => {
     onChange(e.target.value);
   };
   return (
@@ -14,13 +14,15 @@ export const StructureSearch = ({ onChange }) => {
       icon={{ name: "search", link: true }}
       iconPosition="left"
       fluid
+      loading={loading}
       placeholder={formatMessage({ id: "structure.search.placeholder" })}
     />
   );
 };
 
 StructureSearch.propTypes = {
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  loading: PropTypes.bool,
 };
 
 export default StructureSearch;

package/src/components/SystemFilteredNav.js

@@ -0,0 +1,32 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { useParams } from "react-router-dom";
+import { useStructures } from "../hooks/useStructures";
+import StructureNav from "./StructureNav";
+import StructureSearch from "./StructureSearch";
+
+const SystemFilteredNav = ({ delay = 500 }) => {
+  const { id: systemId } = useParams();
+  const [query, setQuery] = useState();
+  const { data, isLoading, count } = useStructures({ systemId, query });
+
+  return (
+    <>
+      <StructureSearch
+        onChange={_.debounce(delay)(setQuery)}
+        loading={isLoading}
+      />
+      <StructureNav
+        childStructures={data || []}
+        parentStructure={[]}
+        totalChildStructures={count}
+      />
+    </>
+  );
+};
+SystemFilteredNav.propTypes = {
+  delay: PropTypes.number,
+};
+
+export default SystemFilteredNav;

package/src/components/SystemStructures.js

@@ -4,14 +4,14 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Grid, Segment } from "semantic-ui-react";
 import { getSystem, getSystemTemplate } from "../selectors";
-import FilteredNav from "./FilteredNav";
+import SystemFilteredNav from "./SystemFilteredNav";
 import SystemCrumbs from "./SystemCrumbs";
 import SystemView from "./SystemView";
 
 export const SystemStructures = ({
   system,
   systemStructuresLoading,
-  systemTemplate
+  systemTemplate,
 }) =>
   !systemStructuresLoading && (
     <Grid>
@@ -23,7 +23,7 @@ export const SystemStructures = ({
       <Grid.Row stretched>
         <Grid.Column width={4}>
           <Segment>
-            <FilteredNav parentStructures={[]} />
+            <SystemFilteredNav />
           </Segment>
         </Grid.Column>
         <Grid.Column width={12}>
@@ -36,13 +36,13 @@ export const SystemStructures = ({
 SystemStructures.propTypes = {
   system: PropTypes.object,
   systemStructuresLoading: PropTypes.bool,
-  systemTemplate: PropTypes.object
+  systemTemplate: PropTypes.object,
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   system: getSystem(state),
   systemStructuresLoading: _.prop("systemStructuresLoading")(state),
-  systemTemplate: getSystemTemplate(state)
+  systemTemplate: getSystemTemplate(state),
 });
 
 export default connect(mapStateToProps)(SystemStructures);

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

@@ -4,7 +4,10 @@ import { StructureNav, hasNavClass, navClasses } from "../StructureNav";
 
 const renderOpts = {
   messages: {
-    en: { "structure.navigation.home": "Home" },
+    en: {
+      "structure.navigation.home": "Home",
+      "structure.navigation.showing": "from a total of",
+    },
   },
 };
 
@@ -24,6 +27,15 @@ describe("<StructureNav />", () => {
     const { container } = render(<StructureNav {...props} />, renderOpts);
     expect(container).toMatchSnapshot();
   });
+
+  it("matches the latest snapshot with total greater than showed structures", () => {
+    const childStructures = [{ id: 1, classes: { foo: "bar" } }];
+    const totalChildStructures = 10;
+    const props = { childStructures, totalChildStructures };
+
+    const { container } = render(<StructureNav {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
 });
 
 describe("navClasses", () => {

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import SystemFilteredNav from "../SystemFilteredNav";
+
+jest.mock("../../hooks/useStructures.js", () => {
+  const originalModule = jest.requireActual("../../hooks/useStructures.js");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useStructures: jest.fn(() => ({
+      data: [
+        { id: 1, name: "bank_capital" },
+        { id: 2, name: "consumorenovables" },
+      ],
+      count: 2,
+    })),
+  };
+});
+
+describe("<SystemFilteredNav />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<SystemFilteredNav />, {});
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -96,3 +96,65 @@ exports[`<StructureNav /> matches the latest snapshot with classified structures
   </div>
 </div>
 `;
+
+exports[`<StructureNav /> matches the latest snapshot with total greater than showed structures 1`] = `
+<div>
+  <div
+    class="ui selection relaxed list structure-nav"
+    role="list"
+  >
+    <div
+      class="item"
+      role="listitem"
+    >
+      <i
+        aria-hidden="true"
+        class="angle double left icon middle aligned"
+      />
+      <div
+        class="content"
+      >
+        Home
+      </div>
+      <div
+        class="content"
+      >
+        <a
+          class="description"
+        />
+      </div>
+    </div>
+    <div
+      class="item"
+      role="listitem"
+    >
+      <i
+        aria-hidden="true"
+        class="right triangle icon"
+      />
+      <div
+        class="content"
+      >
+        <div
+          class="header noselect"
+        >
+          bar
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ui list"
+    role="list"
+  >
+    <div
+      class="disabled item"
+      role="listitem"
+    >
+      <span>
+        1 from a total of 10
+      </span>
+    </div>
+  </div>
+</div>
+`;

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

@@ -10,6 +10,7 @@ exports[`<StructureSearch/> matches the latest snapshot 1`] = `
     }
   }
   iconPosition="left"
+  loading={false}
   onChange={[Function]}
   placeholder="structure.search.placeholder"
   type="text"

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

@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SystemFilteredNav /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui fluid left icon input"
+  >
+    <input
+      placeholder="Enter a search..."
+      type="text"
+    />
+    <i
+      aria-hidden="true"
+      class="search link icon"
+    />
+  </div>
+  <div
+    class="ui selection relaxed list structure-nav"
+    role="list"
+  >
+    <div
+      class="item"
+      role="listitem"
+    >
+      <i
+        aria-hidden="true"
+        class="angle double left icon middle aligned"
+      />
+      <div
+        class="content"
+      >
+        Home
+      </div>
+      <div
+        class="content"
+      >
+        <a
+          class="description"
+        />
+      </div>
+    </div>
+    <a
+      class="item"
+      href="/structures/1"
+      role="listitem"
+      title="bank_capital"
+    >
+      <i
+        aria-hidden="true"
+        class="question circle outline icon middle aligned"
+      />
+      <div
+        class="content"
+      >
+        <div
+          class="description"
+        >
+          bank_capital
+        </div>
+      </div>
+    </a>
+    <a
+      class="item"
+      href="/structures/2"
+      role="listitem"
+      title="consumorenovables"
+    >
+      <i
+        aria-hidden="true"
+        class="question circle outline icon middle aligned"
+      />
+      <div
+        class="content"
+      >
+        <div
+          class="description"
+        >
+          consumorenovables
+        </div>
+      </div>
+    </a>
+  </div>
+</div>
+`;

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

@@ -16,9 +16,7 @@ exports[`<SystemStructures /> matches the latest snapshot 1`] = `
       width={4}
     >
       <Segment>
-        <Connect(FilteredNav)
-          parentStructures={Array []}
-        />
+        <SystemFilteredNav />
       </Segment>
     </GridColumn>
     <GridColumn

package/src/hooks/useStructures.js

@@ -0,0 +1,41 @@
+import _ from "lodash/fp";
+import { compile } from "path-to-regexp";
+import useSWR from "swr";
+import { apiJson } from "@truedat/core/services/api";
+import { API_SYSTEM_STRUCTURES } from "../api";
+
+const toApiPath = compile(API_SYSTEM_STRUCTURES);
+
+const allowedQueryParams = ["query"];
+
+const asQueryParams = (queryParams) => {
+  const stringifyQueryParams = _.flow(
+    _.pick(allowedQueryParams),
+    _.entries,
+    _.map(([key, value]) =>
+      _.isEmpty(value) ? "" : `${encodeURI(key)}=${encodeURI(value)}`
+    ),
+    _.join("&")
+  )(queryParams);
+  return _.isEmpty(stringifyQueryParams) ? "" : `?${stringifyQueryParams}`;
+};
+
+export const useStructures = (args) => {
+  console.log(args);
+  const url = toApiPath({ id: args.systemId });
+  const requestData = () => apiJson(`${url}${asQueryParams(args)}`);
+  const options = { keepPreviousData: true };
+
+  const { data, isLoading, error } = useSWR(
+    { url, args },
+    requestData,
+    options
+  );
+
+  return {
+    data: data?.data?.data,
+    isLoading,
+    error,
+    count: parseInt(data?.headers["x-total-count"]),
+  };
+};

package/src/messages/en.js

@@ -330,6 +330,7 @@ export default {
   "structure.metadata._protected": "Protected metadata",
   "structure.name": "Structure",
   "structure.navigation.home": "Home",
+  "structure.navigation.showing": "from a total of",
   "structure.no_description": "No definition",
   "structure.notes.actions.deleted": "Delete",
   "structure.notes.actions.deleted.confirmation.content":

package/src/messages/es.js

@@ -339,6 +339,7 @@ export default {
   "structure.metadata._protected": "Metadata protegida",
   "structure.name": "Estructura",
   "structure.navigation.home": "Inicio",
+  "structure.navigation.showing": "mostrados de",
   "structure.no_description": "Sin descripción",
   "structure.notes.actions.deleted": "Eliminar",
   "structure.notes.actions.deleted.confirmation.content":