@truedat/dd 7.5.9 → 7.5.11

package/src/components/SystemsRoutes.js

@@ -1,68 +1,49 @@
 import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { connect } from "react-redux";
-import { Route, Switch } from "react-router-dom";
-import {
-  SYSTEM_EDIT,
-  SYSTEM_NEW,
-  SYSTEM_STRUCTURES,
-} from "@truedat/core/routes";
+import { useSelector } from "react-redux";
+import { Route, Routes } from "react-router";
+// import {
+//   SYSTEM_EDIT,
+//   SYSTEM_NEW,
+//   SYSTEM_STRUCTURES,
+// } from "@truedat/core/routes";
 import SystemCrumbs from "./SystemCrumbs";
 import SystemForm from "./SystemForm";
 import SystemLoader from "./SystemLoader";
 import SystemStructures from "./SystemStructures";
-import SystemStructuresLoader from "./SystemStructuresLoader";
 
-export const SystemsRoutes = ({ system }) => {
+export default function SystemsRoutes() {
   const { formatMessage } = useIntl();
+  const system = useSelector((state) => state.system);
   return (
-    <Switch>
+    <Routes>
       <Route
-        path={SYSTEM_STRUCTURES}
-        exact
-        render={() => (
-          <>
-            {/* <SystemStructuresLoader /> */}
-            <SystemStructures />
-          </>
-        )}
-      />
-      <Route
-        path={SYSTEM_NEW}
-        exact
-        render={() => (
+        path="new"
+        element={
           <>
             <SystemCrumbs
               action={formatMessage({ id: "structures.actions.new_system" })}
             />
             <SystemForm />
           </>
-        )}
+        }
       />
-      <Route
-        path={SYSTEM_EDIT}
-        exact
-        render={() => (
-          <>
-            <SystemLoader />
-            <SystemCrumbs
-              system={system}
-              action={formatMessage({ id: "structures.actions.edit_system" })}
-            />
-            {!_.isEmpty(system) && <SystemForm system={system} />}
-          </>
-        )}
-      />
-    </Switch>
+      <Route path=":id">
+        <Route path="structures" element={<SystemStructures />} />
+        <Route
+          path="edit"
+          element={
+            <>
+              <SystemLoader />
+              <SystemCrumbs
+                system={system}
+                action={formatMessage({ id: "structures.actions.edit_system" })}
+              />
+              {!_.isEmpty(system) && <SystemForm system={system} />}
+            </>
+          }
+        />
+      </Route>
+    </Routes>
   );
-};
-
-SystemsRoutes.propTypes = {
-  system: PropTypes.object,
-};
-
-const mapStateToProps = _.pick(["system"]);
-
-export default connect(mapStateToProps)(SystemsRoutes);
+}

package/src/components/Tag.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Header, Icon, Container, Segment } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";

package/src/components/TagCards.js

@@ -1,8 +1,7 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Button, Card, Message, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { useQuery } from "@apollo/client";

package/src/components/TagCrumbs.js

@@ -1,8 +1,7 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { STRUCTURE_TAGS } from "@truedat/core/routes";
 

package/src/components/TagForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { Button, Form } from "semantic-ui-react";
 import { useForm, Controller } from "react-hook-form";

package/src/components/TagStructureButton.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";

package/src/components/Tags.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Button, Header, Icon, Segment } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { STRUCTURE_TAGS_NEW } from "@truedat/core/routes";

package/src/components/TagsRoutes.js

@@ -1,9 +1,12 @@
 import React from "react";
-import { Route, Switch, useParams } from "react-router-dom";
+import { Route, useParams, Routes } from "react-router";
 import { useQuery } from "@apollo/client";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
-import { STRUCTURE_TAGS, STRUCTURE_TAG_EDIT, STRUCTURE_TAGS_NEW } from "@truedat/core/routes";
+import { ProtectedRoute } from "@truedat/core/router";
+import {
+  STRUCTURE_TAGS,
+  STRUCTURE_TAG_EDIT,
+  STRUCTURE_TAGS_NEW,
+} from "@truedat/core/routes";
 import { TAG_QUERY } from "../api/queries";
 import Tag from "./Tag";
 import Tags from "./Tags";
@@ -18,22 +21,12 @@ export const TagLoader = () => {
   return <Tag id={id} tag={tag} loading={loading} />;
 };
 
-export const AuthorizedTagsRoutes = () => (
-  <Switch>
-    <Route exact path={STRUCTURE_TAGS_NEW} render={() => <Tag />} />
-    <Route exact path={STRUCTURE_TAGS} render={() => <Tags />} />
-    <Route path={STRUCTURE_TAG_EDIT} render={() => <TagLoader />} />
-  </Switch>
+export const TagsRoutes = () => (
+  <Routes>
+    <Route index element={<Tags />} />
+    <Route path="new" element={<Tag />} />
+    <Route path=":id/edit" element={<TagLoader />} />
+  </Routes>
 );
 
-export const TagsRoutes = () => {
-  const authorized = useAuthorized();
-  return (
-    <Route
-      path={STRUCTURE_TAGS}
-      render={() => (authorized ? <AuthorizedTagsRoutes /> : <Unauthorized />)}
-    />
-  );
-};
-
 export default TagsRoutes;

package/src/components/Task.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
-import React from "react";
-import { useParams, Link } from "react-router-dom";
+import { Link } from "react-router";
+import { useParams } from "react-router";
 import { useQuery } from "@apollo/client";
 import { FormattedMessage, useIntl } from "react-intl";
 import {
@@ -106,9 +106,11 @@ function Task() {
           />
         </Segment>
         <Dimmer.Dimmable dimmed={loading}>
-          <Dimmer active={loading} inverted>
-            <Loader />
-          </Dimmer>
+          {loading ? (
+            <Dimmer active inverted>
+              <Loader />
+            </Dimmer>
+          ) : null}
           {task ? (
             <>
               <Grid columns={4} divided>
@@ -126,7 +128,6 @@ function Task() {
                 <FormattedMessage id="task.progress" />
               </Progress>
               <Divider />
-
               <Grid columns={4} divided>
                 <Grid.Row>
                   {propertyElement(

package/src/components/Tasks.js

@@ -1,7 +1,6 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useQuery } from "@apollo/client";
 import { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -16,7 +15,7 @@ export const Tasks = ({ reindexAllGrants, reindexAllStructures }) => {
   const { loading, data, refetch } = useQuery(TASKS_QUERY, {
     fetchPolicy: "cache-and-network",
   });
-  const history = useHistory();
+  const navigate = useNavigate();
   const { formatMessage } = useIntl();
   const tasks = _.flow(
     _.get("tasks"),
@@ -66,9 +65,11 @@ export const Tasks = ({ reindexAllGrants, reindexAllStructures }) => {
         />
       </Segment>
       <Dimmer.Dimmable dimmed={loading}>
-        <Dimmer active={loading} inverted>
-          <Loader />
-        </Dimmer>
+        {loading ? (
+          <Dimmer active inverted>
+            <Loader />
+          </Dimmer>
+        ) : null}
         {data ? (
           <Table selectable>
             <Table.Header>
@@ -97,11 +98,10 @@ export const Tasks = ({ reindexAllGrants, reindexAllStructures }) => {
               {tasks.map((task) => (
                 <Table.Row
                   key={task.started_at}
-                  onClick={() => history.push(linkTo.TASK(task))}
+                  onClick={() => navigate(linkTo.TASK(task))}
                 >
                   <Table.Cell content={task.index} />
                   <Table.Cell content={task.status} />
-
                   <Table.Cell
                     content={
                       <Moment

package/src/components/TasksRoutes.js

@@ -1,26 +1,16 @@
-import { Route } from "react-router-dom";
+import { Routes, Route } from "react-router";
 import React from "react";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
+import { ProtectedRoute } from "@truedat/core/router";
 import { TASKS, TASK } from "@truedat/core/routes";
 import Tasks from "./Tasks";
 import Task from "./Task";
 
 export const TasksRoutes = () => {
-  const authorized = useAuthorized();
   return (
-    <>
-      <Route
-        exact
-        path={TASK}
-        render={() => (authorized ? <Task /> : <Unauthorized />)}
-      />
-      <Route
-        exact
-        path={TASKS}
-        render={() => (authorized ? <Tasks /> : <Unauthorized />)}
-      />
-    </>
+    <Routes>
+      <Route index element={<Tasks />} />
+      <Route path=":id" element={<Task />} />
+    </Routes>
   );
 };
 

package/src/components/ValueConditionStructure.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";

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

@@ -1,12 +1,12 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import AddStructureMember from "../AddStructureMember";
 
 const props = { id: 1 };
 
 describe("<AddStructureMember />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<AddStructureMember {...props} />);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<AddStructureMember {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,9 +1,8 @@
-import React from "react";
-import { render } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
-import { MemoryRouter } from "react-router-dom";
+import { render, waitForLoad } from "@truedat/test/render";
 import { BucketView } from "../BucketView";
-import en from "../../messages/en";
+
+jest.mock("assets/searching.png", () => "searchImageMock.png");
 
 const state = {
   authentication: { role: "admin" },
@@ -20,34 +19,21 @@ const state = {
 };
 
 describe("<BucketView />", () => {
-  it("Applies navFilter", async () => {
+  it("applies navfilter", async () => {
     const saveNavFilter = jest.fn();
     const navFilter = {};
     const renderOpts = {
       state,
-      messages: {
-        en: {
-          ...en,
-          "metadata.region": "metadata.region",
-        },
-      },
+      routes: ["?propertyPath=metadata.region&propertyValue=eu-west-1"],
     };
 
-    render(
-      <MemoryRouter
-        initialEntries={[
-          "?propertyPath=metadata.region&propertyValue=eu-west-1",
-        ]}
-      >
-        <BucketView {...{ navFilter, saveNavFilter }} />
-      </MemoryRouter>,
+    const rendered = render(
+      <BucketView {...{ navFilter, saveNavFilter }} />,
       renderOpts
     );
+    await waitForLoad(rendered);
 
     await waitFor(() =>
-      /* Maybe it would be better to test the real store instead of the
-       * mock store from "@truedat/test/render"
-       */
       expect(saveNavFilter).toHaveBeenCalledWith({
         view: "BUCKET_VIEW",
         filter: { "metadata.region": "eu-west-1" },

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { within } from "@testing-library/react";
 import SearchContext from "@truedat/core/search/SearchContext";
@@ -57,8 +56,8 @@ const messages = {
   },
 };
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ propertyPath: "metadata.database" }),
 }));
 
@@ -72,9 +71,9 @@ const searchProps = {
 describe("<CatalogCustomViewCard />", () => {
   it("Shows a structure filter value and count inside each Card", () => {
     const { getByRole } = render(
-      <SearchContext.Provider value={searchProps}>
+      <SearchContext value={searchProps}>
         <CatalogCustomViewCards />
-      </SearchContext.Provider>,
+      </SearchContext>,
 
       {
         locale: "es",

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

@@ -1,7 +1,6 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { waitFor, within } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import { CatalogViewConfigFormLoader } from "../CatalogViewConfigForm";
 import { CATALOG_VIEW_CONFIG_QUERY } from "../../api/queries";
 import { upsertCatalogViewConfig } from "../../routines";
@@ -24,44 +23,49 @@ jest.mock("@truedat/core/hooks", () => ({
   useAuthorized: jest.fn(() => true),
 }));
 
-const mockHistoryPush = jest.fn();
-
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useHistory: () => ({
-    push: mockHistoryPush,
-  }),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useNavigate: () => jest.fn(),
 }));
 
 describe("<CatalogViewConfigFormLoader />", () => {
   it("Saves the configuration", async () => {
     const dispatch = jest.fn();
-    const { findByRole, getByRole } = render(<CatalogViewConfigFormLoader />, {
+    const rendered = render(<CatalogViewConfigFormLoader />, {
       ...renderOpts,
       dispatch,
     });
+    await waitForLoad(rendered);
 
     /* https://github.com/testing-library/dom-testing-library/issues/474#issuecomment-597606894
      *  A <form> element needs an accessible name to have the form role. So you
      * need <form aria-label="form" /> or
      * <form aria-labelledby="form-label-element-id" />.
      */
-    await findByRole("form");
+    await rendered.findByRole("form");
 
-    const fieldTypeDropdown = getByRole("listbox", { name: "fieldType" });
+    const fieldTypeDropdown = rendered.getByRole("listbox", {
+      name: /fieldtype/i,
+    });
     const selectedFieldType = within(fieldTypeDropdown).getByRole("option", {
       selected: true,
     });
-    expect(within(selectedFieldType).getByText(/Metadata/)).toBeInTheDocument();
+    expect(
+      within(selectedFieldType).getByText(/metadata/i)
+    ).toBeInTheDocument();
 
-    const fieldName = getByRole("textbox", { name: "fieldName" });
-    expect(fieldName).toHaveValue("someFieldName");
+    const fieldName = rendered.getByRole("textbox", { name: /fieldname/i });
+
+    await waitFor(() => {
+      expect(fieldName).toHaveValue("someFieldName");
+    });
 
-    userEvent.clear(fieldName);
-    userEvent.type(fieldName, "updatedFieldName");
-    const saveButton = getByRole("button", { name: "save" });
+    const user = userEvent.setup({ delay: null });
+    await user.clear(fieldName);
+    await user.type(fieldName, "updatedFieldName");
+    const saveButton = rendered.getByRole("button", { name: /save/i });
 
-    userEvent.click(saveButton);
+    await user.click(saveButton);
     await waitFor(() => {
       expect(dispatch).toHaveBeenLastCalledWith(
         upsertCatalogViewConfig({

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

@@ -1,9 +1,8 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { waitFor, within } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import { CatalogViewConfigsLoader } from "../CatalogViewConfigs";
-import { CATALOG_VIEW_CONFIGS_QUERY } from "../../api/queries";
+import { CATALOG_VIEW_CONFIGS_QUERY } from "@truedat/core/api/queries";
 import { deleteCatalogViewConfig } from "../../routines";
 
 const config = {
@@ -26,12 +25,13 @@ jest.mock("@truedat/core/hooks", () => ({
 
 describe("<CatalogViewConfigsLoader />", () => {
   it("loads all catalog view configs and shows them in a table", async () => {
-    const { findByRole } = render(<CatalogViewConfigsLoader />, renderOpts);
+    const rendered = render(<CatalogViewConfigsLoader />, renderOpts);
+    await waitForLoad(rendered);
 
-    const table = await findByRole("table");
+    const table = await rendered.findByRole("table");
     const row = within(table).getAllByRole("row")[1];
-    const fieldType = within(row).getByText(/someFieldType/);
-    const fieldName = within(row).getByText(/someFieldName/);
+    const fieldType = within(row).getByText(/somefieldtype/i);
+    const fieldName = within(row).getByText(/somefieldname/i);
     expect(fieldType).toBeInTheDocument();
     expect(fieldName).toBeInTheDocument();
     expect(fieldType).toHaveAttribute("href", "/bucketViewConfigs/123/edit");
@@ -39,20 +39,22 @@ describe("<CatalogViewConfigsLoader />", () => {
 
   it("deletes a catalog view config", async () => {
     const dispatch = jest.fn();
-    const { findByRole, getByRole } = render(<CatalogViewConfigsLoader />, {
+    const rendered = render(<CatalogViewConfigsLoader />, {
       ...renderOpts,
       dispatch,
     });
+    await waitForLoad(rendered);
 
-    const table = await findByRole("table");
+    const user = userEvent.setup({ delay: null });
+    const table = await rendered.findByRole("table");
     const row = within(table).getAllByRole("row")[1];
-    const deleteButton = within(row).getByRole("button", { name: "delete" });
-    userEvent.click(deleteButton);
+    const deleteButton = within(row).getByRole("button", { name: /delete/i });
+    await user.click(deleteButton);
 
-    const modalConfirmDeleteButton = getByRole("button", {
-      name: "modal-affirmative-action",
+    const modalConfirmDeleteButton = rendered.getByRole("button", {
+      name: /modal-affirmative-action/i,
     });
-    userEvent.click(modalConfirmDeleteButton);
+    await user.click(modalConfirmDeleteButton);
 
     await waitFor(() => {
       expect(dispatch).toHaveBeenLastCalledWith(