@truedat/df 7.5.9 → 7.5.10

package/src/components/hierarchies/HierarchyRoutes.js

@@ -1,9 +1,7 @@
-import React from "react";
-import { Route, Switch } from "react-router-dom";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
-import { useParams } from "react-router-dom";
-import { useHistory } from "react-router-dom";
+import { Route, Routes } from "react-router";
+import { ProtectedRoute, Loader } from "@truedat/core/router";
+import { useParams } from "react-router";
+import { useNavigate } from "react-router";
 import {
   linkTo,
   HIERARCHY,
@@ -17,15 +15,26 @@ import {
   useHierarchyPatch,
   useHierarchyPost,
   useHierarchyDelete,
-} from "../../hooks/useHierarchies";
+} from "@truedat/core/hooks/useHierarchies";
 
 import HierarchiesView from "./HierarchiesView";
 import HierarchyView from "./HierarchyView";
 
+const HierarchyLoader = () => {
+  const { hierarchyId } = useParams();
+  useHierarchy(hierarchyId);
+  return null;
+};
+
+const InitialHierarchyLoader = () => {
+  useInitialHiearchy();
+  return null;
+};
+
 const HierarchyEdit = () => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const navigateToDetail = ({ id: id }) =>
-    history.push(linkTo.HIERARCHY({ hierarchyId: id }));
+    navigate(linkTo.HIERARCHY({ hierarchyId: id }));
   const { hierarchyId } = useParams();
   const { trigger: patch } = useHierarchyPatch(hierarchyId, navigateToDetail);
   const { data: originalHierarchy, loading } = useHierarchy(hierarchyId);
@@ -40,9 +49,9 @@ const HierarchyEdit = () => {
 };
 
 const HierarchyNew = () => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const navigateToDetail = ({ id: id }) =>
-    history.push(linkTo.HIERARCHY({ hierarchyId: id }));
+    navigate(linkTo.HIERARCHY({ hierarchyId: id }));
   const { trigger: post } = useHierarchyPost(navigateToDetail);
   const { data: originalHierarchy, loading } = useInitialHiearchy();
   return (
@@ -56,8 +65,8 @@ const HierarchyNew = () => {
 };
 
 const HierarchyDetail = () => {
-  const history = useHistory();
-  const navigateToList = () => history.push(linkTo.HIERARCHIES());
+  const navigate = useNavigate();
+  const navigateToList = () => navigate(linkTo.HIERARCHIES());
   const { hierarchyId } = useParams();
   const { trigger: onDelete } = useHierarchyDelete(hierarchyId, navigateToList);
   const { data: originalHierarchy, loading } = useHierarchy(hierarchyId);
@@ -72,33 +81,29 @@ const HierarchyDetail = () => {
 };
 
 export const HierarchyRoutes = () => {
-  const authorized = useAuthorized();
   return (
-    <Route
-      path={HIERARCHIES}
-      render={() => (
-        <Switch>
-          <Route
-            exact
-            path={HIERARCHY_EDIT}
-            render={() => (authorized ? <HierarchyEdit /> : <Unauthorized />)}
-          />
-          <Route
-            exact
-            path={HIERARCHY_CREATE}
-            render={() => (authorized ? <HierarchyNew /> : <Unauthorized />)}
-          />
-          <Route
-            exact
-            path={HIERARCHY}
-            render={() => (authorized ? <HierarchyDetail /> : <Unauthorized />)}
-          />
-          <Route
-            render={() => (authorized ? <HierarchiesView /> : <Unauthorized />)}
-          />
-        </Switch>
-      )}
-    />
+    <Routes>
+      <Route path={HIERARCHIES} element={<ProtectedRoute />}>
+        <Route index element={<HierarchiesView />} />
+        <Route
+          path={"new"}
+          element={
+            <>
+              <InitialHierarchyLoader />
+              <HierarchyNew />
+            </>
+          }
+        />
+        <Route
+          path={":hierarchyId"}
+          element={<Loader loaders={<HierarchyLoader />} />}
+        >
+          <Route index element={<HierarchyDetail />} />
+          <Route path={"edit"} element={<HierarchyEdit />} />
+        </Route>
+      </Route>
+      <Route path="*" element={null} />
+    </Routes>
   );
 };
 

package/src/components/hierarchies/HierarchyView.js

@@ -1,9 +1,9 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Button, Header, Icon, Segment } from "semantic-ui-react";
 import { useIntl } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { linkTo } from "@truedat/core/routes";
 import { CSVFileModal } from "@truedat/core/components";
 import { HistoryBackButton } from "@truedat/core/components";
@@ -107,8 +107,8 @@ export const HierarchyView = ({
                   originalNode?.description != description)
                   ? "dirty"
                   : node.editionStatus == "dirty"
-                  ? null
-                  : node.editionStatus
+                    ? null
+                    : node.editionStatus
               )(originalHierarchy.nodes),
             }
           : node
@@ -169,12 +169,10 @@ export const HierarchyView = ({
                       }
                     )}
                   />
-
                   <HistoryBackButton
                     floated="right"
                     content={formatMessage({ id: "actions.cancel" })}
                   />
-
                   <CSVFileModal
                     param="hierarchy"
                     onSubmit={(nodes) => {
@@ -204,7 +202,6 @@ export const HierarchyView = ({
                     to={linkTo.HIERARCHY_EDIT({ hierarchyId: hierarchy.id })}
                     content={formatMessage({ id: "actions.edit" })}
                   />
-
                   <ConfirmModal
                     icon="trash"
                     trigger={

package/src/components/hierarchies/__tests__/Hierarchies.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import Hierarchies from "../Hierarchies";
 import en from "../../../messages/en";
@@ -7,7 +6,7 @@ const renderOpts = { messages: { en: en } };
 
 const data = [
   {
-    id: 1,
+    id: "1",
     name: "Baggins",
     nodes: [
       {
@@ -19,7 +18,7 @@ const data = [
   },
 ];
 
-jest.mock("../../../hooks/useHierarchies", () => ({
+jest.mock("@truedat/core/hooks/useHierarchies", () => ({
   useHierarchies: jest.fn(() => ({
     loading: false,
     data: data,

package/src/components/hierarchies/__tests__/HierarchiesView.spec.js

@@ -1,13 +1,9 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import HierarchiesView from "../HierarchiesView";
-import en from "../../../messages/en";
-
-const renderOpts = { messages: { en: en } };
 
 const data = [
   {
-    id: 1,
+    id: "1",
     name: "Baggins",
     nodes: [
       {
@@ -19,7 +15,7 @@ const data = [
   },
 ];
 
-jest.mock("../../../hooks/useHierarchies", () => ({
+jest.mock("@truedat/core/hooks/useHierarchies", () => ({
   useHierarchies: jest.fn(() => ({
     loading: false,
     data: data,
@@ -28,7 +24,7 @@ jest.mock("../../../hooks/useHierarchies", () => ({
 
 describe("<HierarchiesView />", () => {
   it("matche the last snapshot", () => {
-    const { container } = render(<HierarchiesView />, renderOpts);
+    const { container } = render(<HierarchiesView />);
     expect(container).toMatchSnapshot();
   });
 });

package/src/components/hierarchies/__tests__/HierarchyCrumbs.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import HierarchyCrumbs from "../HierarchyCrumbs";
 

package/src/components/hierarchies/__tests__/HierarchyRoutes.spec.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { HierarchyRoutes } from "../HierarchyRoutes";
+import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
+import {
+  HIERARCHIES,
+  HIERARCHY,
+  HIERARCHY_EDIT,
+  HIERARCHY_CREATE,
+} from "@truedat/core/routes";
+
+jest.mock("@truedat/core/hooks/useAuthorized", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
+// Mock all child components
+jest.mock("../HierarchiesView", () => () => <div>HierarchiesView</div>);
+jest.mock("../HierarchyView", () => () => <div>HierarchyView</div>);
+
+// Mock hooks
+jest.mock("@truedat/core/hooks/useHierarchies", () => ({
+  useInitialHiearchy: jest.fn(() => ({
+    data: { id: "initial" },
+    loading: false,
+  })),
+  useHierarchy: jest.fn(() => ({ data: { id: "123" }, loading: false })),
+  useHierarchyPatch: jest.fn(() => ({ trigger: jest.fn() })),
+  useHierarchyPost: jest.fn(() => ({ trigger: jest.fn() })),
+  useHierarchyDelete: jest.fn(() => ({ trigger: jest.fn() })),
+}));
+
+describe("<HierarchyRoutes />", () => {
+  it("renders correctly with default route", async () => {
+    const rendered = render(<HierarchyRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with hierarchies route", async () => {
+    const rendered = render(<HierarchyRoutes />, {
+      routes: [HIERARCHIES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with hierarchy detail route", async () => {
+    const rendered = render(<HierarchyRoutes />, {
+      routes: [HIERARCHY.replace(":hierarchyId", "123")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with hierarchy edit route", async () => {
+    const rendered = render(<HierarchyRoutes />, {
+      routes: [HIERARCHY_EDIT.replace(":hierarchyId", "123")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with hierarchy create route", async () => {
+    const rendered = render(<HierarchyRoutes />, {
+      routes: [HIERARCHY_CREATE],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders unauthorized component when not authorized", async () => {
+    useAuthorized.mockReturnValueOnce(false);
+    const rendered = render(<HierarchyRoutes />, {
+      routes: [HIERARCHIES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+});

package/src/components/hierarchies/__tests__/HierarchyView.spec.js

@@ -1,16 +1,8 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import HierarchyView from "../HierarchyView";
-import en from "../../../messages/en";
-
-const renderOpts = {
-  messages: {
-    en: { ...en, "actions.edit": "Edit", "actions.delete": "Delete" },
-  },
-};
 
 const originalHierarchy = {
-  id: 1,
+  id: "1",
   name: "Baggins",
   nodes: [
     {
@@ -30,7 +22,7 @@ const opts = {
 
 describe("<HierarchyView />", () => {
   it("matches the last snapshot", () => {
-    const { container } = render(<HierarchyView {...opts} />, renderOpts);
+    const { container } = render(<HierarchyView {...opts} />);
     expect(container).toMatchSnapshot();
   });
 });

package/src/components/hierarchies/__tests__/__snapshots__/Hierarchies.spec.js.snap

@@ -33,6 +33,7 @@ exports[`<Hierarchies /> matches the last snapshot 1`] = `
           class=""
         >
           <a
+            data-discover="true"
             href="/hierarchies/1"
           >
             Baggins

package/src/components/hierarchies/__tests__/__snapshots__/HierarchiesView.spec.js.snap

@@ -10,10 +10,11 @@ exports[`<HierarchiesView /> matche the last snapshot 1`] = `
     >
       <a
         class="ui primary right floated button"
+        data-discover="true"
         href="/hierarchies/new"
         role="button"
       >
-        New hierarchy
+        hierarchy.create
       </a>
       <i
         aria-hidden="true"
@@ -22,11 +23,11 @@ exports[`<HierarchiesView /> matche the last snapshot 1`] = `
       <div
         class="content"
       >
-        Hierarchies
+        hierarchies.header
         <div
           class="sub header"
         >
-          List of hierarchies
+          hierarchies.subheader
         </div>
       </div>
     </h2>
@@ -45,12 +46,12 @@ exports[`<HierarchiesView /> matche the last snapshot 1`] = `
             <th
               class=""
             >
-              Hierarchy name
+              hierarchy.name
             </th>
             <th
               class=""
             >
-              Description
+              hierarchy.description
             </th>
           </tr>
         </thead>
@@ -64,6 +65,7 @@ exports[`<HierarchiesView /> matche the last snapshot 1`] = `
               class=""
             >
               <a
+                data-discover="true"
                 href="/hierarchies/1"
               >
                 Baggins

package/src/components/hierarchies/__tests__/__snapshots__/HierarchyCrumbs.spec.js.snap

@@ -10,9 +10,10 @@ exports[`<HierarchyCrumbs /> matches the latest snapshot 1`] = `
       >
         <a
           class="section"
+          data-discover="true"
           href="/hierarchies"
         >
-          Hierarchies
+          navigation.hierarchies
         </a>
         <i
           aria-hidden="true"
@@ -32,9 +33,10 @@ exports[`<HierarchyCrumbs /> matches the latest snapshot 1`] = `
     >
       <a
         class="section"
+        data-discover="true"
         href="/hierarchies"
       >
-        Hierarchies
+        navigation.hierarchies
       </a>
       <i
         aria-hidden="true"

package/src/components/hierarchies/__tests__/__snapshots__/HierarchyRoutes.spec.js.snap

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HierarchyRoutes /> renders correctly with default route 1`] = `<div />`;
+
+exports[`<HierarchyRoutes /> renders correctly with hierarchies route 1`] = `
+<div>
+  <div>
+    HierarchiesView
+  </div>
+</div>
+`;
+
+exports[`<HierarchyRoutes /> renders correctly with hierarchy create route 1`] = `
+<div>
+  <div>
+    HierarchyView
+  </div>
+</div>
+`;
+
+exports[`<HierarchyRoutes /> renders correctly with hierarchy detail route 1`] = `
+<div>
+  <div>
+    HierarchyView
+  </div>
+</div>
+`;
+
+exports[`<HierarchyRoutes /> renders correctly with hierarchy edit route 1`] = `
+<div>
+  <div>
+    HierarchyView
+  </div>
+</div>
+`;
+
+exports[`<HierarchyRoutes /> renders unauthorized component when not authorized 1`] = `
+<div>
+  <div
+    class="ui icon visible bottom attached message center"
+  >
+    <i
+      aria-hidden="true"
+      class="warning sign icon"
+    />
+    <div
+      class="content"
+    >
+      <div
+        class="header"
+      >
+        view.unauthorized.head
+      </div>
+      <p>
+        view.unauthorized.content
+      </p>
+    </div>
+  </div>
+</div>
+`;

package/src/components/hierarchies/__tests__/__snapshots__/HierarchyView.spec.js.snap

@@ -7,9 +7,10 @@ exports[`<HierarchyView /> matches the last snapshot 1`] = `
   >
     <a
       class="section"
+      data-discover="true"
       href="/hierarchies"
     >
-      Hierarchies
+      navigation.hierarchies
     </a>
     <i
       aria-hidden="true"
@@ -35,15 +36,16 @@ exports[`<HierarchyView /> matches the last snapshot 1`] = `
         >
           <a
             class="ui primary right floated button"
+            data-discover="true"
             href="/hierarchies/1/edit"
             role="button"
           >
-            Edit
+            actions.edit
           </a>
           <button
             class="ui secondary right floated button"
           >
-            Delete
+            actions.delete
           </button>
         </div>
       </div>
@@ -80,7 +82,7 @@ exports[`<HierarchyView /> matches the last snapshot 1`] = `
             >
               <input
                 disabled=""
-                placeholder="Hierarchy name"
+                placeholder="hierarchy.name"
                 tabindex="-1"
                 type="text"
                 value="Baggins"
@@ -103,7 +105,7 @@ exports[`<HierarchyView /> matches the last snapshot 1`] = `
               aria-hidden="true"
               class="cut large icon li_trash"
               style="cursor: pointer; visibility: hidden;"
-              title="Delete node"
+              title="hierarchy.delete_node"
             />
             <div
               style="display: flex; flex-direction: row; align-items: self-start;"
@@ -124,7 +126,7 @@ exports[`<HierarchyView /> matches the last snapshot 1`] = `
                   </div>
                   <input
                     disabled=""
-                    placeholder="Node"
+                    placeholder="hierarchy.node"
                     tabindex="-1"
                     type="text"
                     value="Fosco"

package/src/components/widgets/CheckboxField.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
 

package/src/components/widgets/ColorPickerField.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { GithubPicker } from "react-color";
 
@@ -6,7 +5,7 @@ export const ColorPickerField = ({ field: { name, value }, onChange }) => (
   <GithubPicker
     name="color_picker"
     value={value}
-    onChangeComplete={color => {
+    onChangeComplete={(color) => {
       onChange(null, { name, value: color.hex });
     }}
   />
@@ -14,7 +13,7 @@ export const ColorPickerField = ({ field: { name, value }, onChange }) => (
 
 ColorPickerField.propTypes = {
   field: PropTypes.object,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
 export default ColorPickerField;

package/src/components/widgets/DateField.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import React from "react";
 import { DateInput } from "semantic-ui-calendar-react";
 
 export const DateField = ({ field: { name, value }, onChange }) => {

package/src/components/widgets/DateTimeField.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import React from "react";
 import { DateTimeInput } from "semantic-ui-calendar-react";
 
 export const DateTimeField = ({ field: { name, value } = {}, onChange }) => (

package/src/components/widgets/DomainDropdown.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
 import { DomainSelector } from "@truedat/core/components";

package/src/components/widgets/DomainPreview.js

@@ -1,10 +1,9 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { useQuery } from "@apollo/client";
 import { linkTo } from "@truedat/core/routes";
 import { Label } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { DOMAIN_PREVIEW_QUERY } from "../../api/queries";
 
 export const DomainPreview = ({ domains }) =>

package/src/components/widgets/DropdownDataLoader.js

@@ -1,8 +1,8 @@
-import React from "react";
+import { lazy } from "react";
 import PropTypes from "prop-types";
 
-const SystemsLoader = React.lazy(() =>
-  import("@truedat/dd/components/SystemsLoader")
+const SystemsLoader = lazy(
+  () => import("@truedat/core/components/SystemsLoader")
 );
 
 export const DropdownDataLoader = ({ type }) =>

package/src/components/widgets/DropdownField.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Dimmer, Loader } from "semantic-ui-react";
@@ -22,9 +21,11 @@ export const DropdownField = ({ field, loading, onChange, scope }) => {
           <StandardDropdown field={field} onChange={onChange} />
         </>
       )}
-      <Dimmer active={loading} inverted>
-        <Loader />
-      </Dimmer>
+      {loading ? (
+        <Dimmer active inverted>
+          <Loader />
+        </Dimmer>
+      ) : null}
     </Dimmer.Dimmable>
   );
 };

package/src/components/widgets/DynamicField.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Form, Icon, Popup, Label } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
@@ -19,7 +18,6 @@ import TableField from "./TableField";
 import TextField from "./TextField";
 import NumberField from "./NumberField";
 import DateField from "./DateField";
-import CopyField from "./CopyField/CopyField";
 
 const isNullOrEmpty = (value) =>
   !_.isNumber(value) && (!value || _.isEmpty(value));
@@ -38,8 +36,6 @@ const FieldByWidget = ({ scope, widget, onChange, field }) => {
       return <TextField field={field} onChange={onChange} />;
     case "color_picker":
       return <ColorPickerField field={field} onChange={onChange} />;
-    case "copy":
-      return <CopyField fields={field} onChange={onChange} />;
     case "pair_list":
       return <PairListField field={field} onChange={onChange} />;
     case "enriched_text":
@@ -144,7 +140,6 @@ export const DynamicField = ({
           </Label>
         ) : null}
       </label>
-
       <FieldByWidget
         field={{ ...fieldProps, value, cardinality }}
         onChange={onChange}