@truedat/dd 5.0.5 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [5.1.0] 2023-02-09
+
+### Changed
+
+- [TD-5444] Search system root structures
+
+## [5.0.7] 2023-02-07
+
+### Added
+
+- [TD-5479] Show external_ref in grants
+
 ## [5.0.0] 2023-01-24
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "5.0.5",
+  "version": "5.1.0",
   "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": "a90adc0fcf336af276a585669065b661e28a8739"
+  "gitHead": "0875313aacca475224716822c465a29973c285f3"
 }

package/src/components/Grant.js

@@ -171,6 +171,14 @@ export const Grant = ({ grant, actions, loading, onStatusChange }) => {
                       </List.Description>
                     </List.Item>
                   )}
+                  {grant?.external_ref && (
+                    <List.Item>
+                      <List.Header>
+                        {formatMessage({ id: "grant.header.external_ref" })}
+                      </List.Header>
+                      <List.Description>{grant?.external_ref}</List.Description>
+                    </List.Item>
+                  )}
                   <List.Item>
                     <List.Header>
                       {formatMessage({ id: "grant.header.created_at" })}

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__/Grant.spec.js

@@ -38,6 +38,7 @@ describe("<Grant />", () => {
     end_date: "2019-12-31",
     inserted_at: "2022-12-12T12:49:09.789722Z",
     pending_removal: false,
+    external_ref: "foo",
     user: {
       email: "foo@gmail.com",
       full_name: "foo user",

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__/Grant.spec.js.snap

@@ -124,6 +124,21 @@ exports[`<Grant /> matches the latest snapshot 1`] = `
                 </h4>
               </div>
             </div>
+            <div
+              class="item"
+              role="listitem"
+            >
+              <div
+                class="header"
+              >
+                External reference
+              </div>
+              <div
+                class="description"
+              >
+                foo
+              </div>
+            </div>
             <div
               class="item"
               role="listitem"
@@ -330,6 +345,21 @@ exports[`<Grant /> matches the latest snapshot with cancel_removal action 1`] =
                 </h4>
               </div>
             </div>
+            <div
+              class="item"
+              role="listitem"
+            >
+              <div
+                class="header"
+              >
+                External reference
+              </div>
+              <div
+                class="description"
+              >
+                foo
+              </div>
+            </div>
             <div
               class="item"
               role="listitem"
@@ -588,6 +618,21 @@ exports[`<Grant /> matches the latest snapshot with update action 1`] = `
                 </h4>
               </div>
             </div>
+            <div
+              class="item"
+              role="listitem"
+            >
+              <div
+                class="header"
+              >
+                External reference
+              </div>
+              <div
+                class="description"
+              >
+                foo
+              </div>
+            </div>
             <div
               class="item"
               role="listitem"

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

@@ -52,15 +52,16 @@ export default {
   "grant.cell.end_date.null": "No expiration set",
   "grant.cell.end_date.pending_removal": "Grant pending removal",
   "grant.cell.end_date.same_user": "It's you",
-  "grant.header": "Grants",
+  "grant.header.created_at": "Grant created",
   "grant.header.data_structure": "Structure",
+  "grant.header.details": "Details",
+  "grant.header.end_date": "Expires",
+  "grant.header.external_ref": "External reference",
   "grant.header.id": "Id",
-  "grant.header.user": "Account",
-  "grant.header.user_name": "User name",
-  "grant.header.created_at": "Grant created",
   "grant.header.start_date": "Access granted",
-  "grant.header.end_date": "Expires",
-  "grant.header.details": "Details",
+  "grant.header.user_name": "User name",
+  "grant.header.user": "Account",
+  "grant.header": "Grants",
   "grant.updated_at": "Last changed",
   "grantApprovalRule.action": "Action",
   "grantApprovalRule.action.approve": "Approve",
@@ -329,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

@@ -56,15 +56,16 @@ export default {
   "grant.cell.end_date.null": "Sin fecha de expiración",
   "grant.cell.end_date.pending_removal": "Solicitada expiración del acceso",
   "grant.cell.end_date.same_user": "Eres tú",
-  "grant.header": "Acceso",
+  "grant.header.created_at": "Acceso creado",
   "grant.header.data_structure": "Estructura",
+  "grant.header.details": "Detalles",
+  "grant.header.end_date": "Expira",
+  "grant.header.external_ref": "Referencia externa",
   "grant.header.id": "Id",
-  "grant.header.user": "Cuenta",
-  "grant.header.user_name": "Usuario",
-  "grant.header.created_at": "Acceso creado",
   "grant.header.start_date": "Acceso desde",
-  "grant.header.end_date": "Expira",
-  "grant.header.details": "Detalles",
+  "grant.header.user_name": "Usuario",
+  "grant.header.user": "Cuenta",
+  "grant.header": "Acceso",
   "grant.updated_at": "Actualizada",
   "grantApprovalRules.header": "Reglas de aprobación",
   "grantApprovalRules.subheader":
@@ -338,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":