@truedat/ie 7.5.9 → 7.5.11

package/src/ingests/components/IngestSummary.js

@@ -1,4 +1,3 @@
-import React from "react";
 import Moment from "react-moment";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
@@ -38,7 +37,6 @@ export const IngestSummary = ({
     <Header as="h3" dividing>
       <FormattedMessage id="ingests.summary" defaultMessage="Resumen" />
     </Header>
-
     <FieldValue
       field="status"
       value={<FormattedMessage id={`ingests.status.${status}`} />}

package/src/ingests/components/IngestTabs.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Menu } from "semantic-ui-react";
-import { Link, useRouteMatch } from "react-router-dom";
+import { Link } from "react-router";
+import { useLocation } from "react-router";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
 import {
@@ -12,16 +12,16 @@ import {
   INGEST_EVENTS,
   INGEST_EXECUTIONS,
   INGEST_RELATIONS_STRUCTURES,
-  INGEST_RELATIONS_INGESTS
+  INGEST_RELATIONS_INGESTS,
 } from "@truedat/core/routes";
 import { makeTagOptionsSelector } from "@truedat/core/selectors";
 
 const IngestTabs = ({ ingest, tagOptions }) => {
-  const match = useRouteMatch();
+  const { pathname } = useLocation();
   return _.isEmpty(ingest) ? null : (
     <Menu attached="top" pointing secondary tabular>
       <Menu.Item
-        active={match.path === INGEST}
+        active={pathname === INGEST}
         as={Link}
         to={linkTo.INGEST(ingest)}
         replace
@@ -29,7 +29,7 @@ const IngestTabs = ({ ingest, tagOptions }) => {
         <FormattedMessage id="tabs.ie.ingest" />
       </Menu.Item>
       <Menu.Item
-        active={match.path === INGEST_EXECUTIONS}
+        active={pathname === INGEST_EXECUTIONS}
         as={Link}
         to={linkTo.INGEST_EXECUTIONS(ingest)}
         replace
@@ -37,7 +37,7 @@ const IngestTabs = ({ ingest, tagOptions }) => {
         <FormattedMessage id="tabs.ie.ingestExecutions" />
       </Menu.Item>
       <Menu.Item
-        active={match.path === INGEST_RELATIONS_STRUCTURES}
+        active={pathname === INGEST_RELATIONS_STRUCTURES}
         as={Link}
         to={linkTo.INGEST_RELATIONS_STRUCTURES(ingest)}
         replace
@@ -46,7 +46,7 @@ const IngestTabs = ({ ingest, tagOptions }) => {
       </Menu.Item>
       {_.isEmpty(tagOptions) ? null : (
         <Menu.Item
-          active={match.path === INGEST_RELATIONS_INGESTS}
+          active={pathname === INGEST_RELATIONS_INGESTS}
           as={Link}
           to={linkTo.INGEST_RELATIONS_INGESTS(ingest)}
           replace
@@ -55,7 +55,7 @@ const IngestTabs = ({ ingest, tagOptions }) => {
         </Menu.Item>
       )}
       <Menu.Item
-        active={match.path === INGEST_ARCHIVE}
+        active={pathname === INGEST_ARCHIVE}
         as={Link}
         to={linkTo.INGEST_ARCHIVE(ingest)}
         replace
@@ -63,7 +63,7 @@ const IngestTabs = ({ ingest, tagOptions }) => {
         <FormattedMessage id="tabs.ie.history" />
       </Menu.Item>
       <Menu.Item
-        active={match.path === INGEST_EVENTS}
+        active={pathname === INGEST_EVENTS}
         as={Link}
         to={linkTo.INGEST_EVENTS(ingest)}
         replace
@@ -76,14 +76,14 @@ const IngestTabs = ({ ingest, tagOptions }) => {
 
 IngestTabs.propTypes = {
   ingest: PropTypes.object,
-  tagOptions: PropTypes.array
+  tagOptions: PropTypes.array,
 };
 
 const makeMapStateToProps = () => {
   const getTagOptions = makeTagOptionsSelector("ingest");
-  const mapStateToProps = state => ({
+  const mapStateToProps = (state) => ({
     tagOptions: getTagOptions(state),
-    ingest: state.ingest
+    ingest: state.ingest,
   });
   return mapStateToProps;
 };

package/src/ingests/components/Ingests.js

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

package/src/ingests/components/IngestsActions.js

@@ -1,9 +1,8 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Popup } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { INGESTS_NEW } from "@truedat/core/routes";
 import { downloadIngests } from "../routines";

package/src/ingests/components/IngestsLabelResults.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
@@ -14,7 +13,7 @@ export const IngestsLabelResults = ({ ingestCount }) => (
 );
 
 IngestsLabelResults.propTypes = {
-  ingestCount: PropTypes.number
+  ingestCount: PropTypes.number,
 };
 
 const mapStateToProps = ({ ingestCount }) => ({ ingestCount });

package/src/ingests/components/IngestsLoader.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Loading } from "@truedat/core/components";

package/src/ingests/components/IngestsSearch.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";

package/src/ingests/components/IngestsSelector.js

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

package/src/ingests/components/IngestsTable.js

@@ -1,103 +1,104 @@
 import _ from "lodash/fp";
-import React from "react";
+import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { compose } from "redux";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Table, Header, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
-import { withRouter } from "react-router";
+import { useLocation } from "react-router";
 import { getSortInfo, sortColumn } from "@truedat/core/services/sort";
 import { INGESTS, INGESTS_PENDING } from "@truedat/core/routes";
 import { sortIngests } from "../routines";
 import { getIngestsRows, getIngestColumns } from "../selectors";
 import IngestRow from "./IngestRow";
 
-export class IngestsTable extends React.Component {
-  state = {
-    sortedColumn: _.prop("column")(getSortInfo(this.props.ingestsSorting)),
-    direction: _.prop("direction")(getSortInfo(this.props.ingestsSorting)),
-  };
-
-  setDirection = (direction) => this.setState({ direction });
+export function IngestsTable() {
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const columns = useSelector(getIngestColumns);
+  const ingests = useSelector(getIngestsRows);
+  const ingestsLoading = useSelector((state) => state.ingestsLoading);
+  const ingestsSorting = useSelector((state) =>
+    _.path("ingestQuery.sort")(state)
+  );
 
-  setColumn = (sortedColumn) => this.setState({ sortedColumn });
+  const initialSortInfo = getSortInfo(ingestsSorting);
+  const [sortedColumn, setSortedColumn] = useState(
+    _.prop("column")(initialSortInfo)
+  );
+  const [direction, setDirection] = useState(
+    _.prop("direction")(initialSortInfo)
+  );
 
-  componentDidUpdate(prevProps) {
-    const { ingestsSorting: prevIngestsSorting } = prevProps;
-    const { ingestsSorting } = this.props;
+  useEffect(() => {
+    const { column, direction } = getSortInfo(ingestsSorting);
+    setSortedColumn(column);
+    setDirection(direction);
+  }, [ingestsSorting]);
 
-    if (ingestsSorting !== prevIngestsSorting) {
-      const { column: sortedColumn, direction } = getSortInfo(ingestsSorting);
-      this.setState({ sortedColumn, direction });
-    }
-  }
+  const pathname = _.prop("pathname")(location);
+  const ingestColumns = columns.filter(
+    (column) =>
+      (pathname == INGESTS && column.name != "status") ||
+      pathname == INGESTS_PENDING
+  );
 
-  render() {
-    const { ingests, columns, ingestsLoading, location, sortIngests } =
-      this.props;
-    const { sortedColumn, direction } = this.state;
-    const pathname = _.prop("pathname")(location);
-    const ingestColumns = columns.filter(
-      (column) =>
-        (pathname == INGESTS && column.name != "status") ||
-        pathname == INGESTS_PENDING
+  const handleSortColumn = (column) => {
+    sortColumn(
+      column,
+      (payload) => dispatch(sortIngests(payload)),
+      setDirection,
+      setSortedColumn,
+      direction,
+      sortedColumn
     );
+  };
 
-    return (
-      <>
-        {!_.isEmpty(ingests) && (
-          <Table selectable sortable>
-            <Table.Header>
-              <Table.Row>
-                {ingestColumns &&
-                  ingestColumns.map((column, key) => (
-                    <Table.HeaderCell
-                      key={key}
-                      width={column.width}
-                      content={
-                        <FormattedMessage
-                          id={`ingests.props.${column.header || column.name}`}
-                        />
-                      }
-                      sorted={
-                        _.path("sort.name")(column) === sortedColumn
-                          ? direction
-                          : null
-                      }
-                      className={_.path("sort.name")(column) ? "" : "disabled"}
-                      onClick={() =>
-                        sortColumn(
-                          column,
-                          sortIngests,
-                          this.setDirection,
-                          this.setColumn,
-                          direction,
-                          sortedColumn
-                        )
-                      }
-                    />
-                  ))}
-              </Table.Row>
-            </Table.Header>
-            <Table.Body>
-              {ingests.map((ingest, i) => (
-                <IngestRow key={i} ingest={ingest} columns={ingestColumns} />
-              ))}
-            </Table.Body>
-          </Table>
-        )}
-        {_.isEmpty(ingests) && !ingestsLoading && (
-          <Header as="h4">
-            <Icon name="search" />
-            <Header.Content>
-              <FormattedMessage id="ingests.search.results.empty" />
-            </Header.Content>
-          </Header>
-        )}
-      </>
-    );
-  }
+  return (
+    <>
+      {!_.isEmpty(ingests) && (
+        <Table selectable sortable>
+          <Table.Header>
+            <Table.Row>
+              {ingestColumns &&
+                ingestColumns.map((column, key) => (
+                  <Table.HeaderCell
+                    key={key}
+                    width={column.width}
+                    content={
+                      <FormattedMessage
+                        id={`ingests.props.${column.header || column.name}`}
+                      />
+                    }
+                    sorted={
+                      _.path("sort.name")(column) === sortedColumn
+                        ? direction
+                        : null
+                    }
+                    className={_.path("sort.name")(column) ? "" : "disabled"}
+                    onClick={() => handleSortColumn(column)}
+                  />
+                ))}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {ingests.map((ingest, i) => (
+              <IngestRow key={i} ingest={ingest} columns={ingestColumns} />
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+      {_.isEmpty(ingests) && !ingestsLoading && (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            <FormattedMessage id="ingests.search.results.empty" />
+          </Header.Content>
+        </Header>
+      )}
+    </>
+  );
 }
+
 IngestsTable.propTypes = {
   ingestsLoading: PropTypes.bool,
   ingests: PropTypes.array,
@@ -105,14 +106,4 @@ IngestsTable.propTypes = {
   location: PropTypes.object,
 };
 
-const mapStateToProps = (state) => ({
-  columns: getIngestColumns(state),
-  ingests: getIngestsRows(state),
-  ingestsLoading: state.ingestsLoading,
-  ingestsSorting: _.path("ingestQuery.sort")(state),
-});
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, { sortIngests })
-)(IngestsTable);
+export default IngestsTable;

package/src/ingests/components/IngestsTabs.js

@@ -1,7 +1,6 @@
-import React from "react";
 import { FormattedMessage } from "react-intl";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Menu, Divider } from "semantic-ui-react";
 import { usePath } from "@truedat/core/hooks";
 import { INGESTS, INGESTS_PENDING } from "@truedat/core/routes";
@@ -31,7 +30,7 @@ const IngestTabs = () => {
 IngestTabs.propTypes = {};
 
 const mapStateToProps = ({ ingestQuery: { filters } }) => ({
-  activeFilters: filters
+  activeFilters: filters,
 });
 
 export default connect(mapStateToProps)(IngestTabs);

package/src/ingests/components/__tests__/Events.spec.js

@@ -1,9 +1,8 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { Events } from "../Events";
 
 describe("<Events />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const events = [
       {
         id: 1,
@@ -11,8 +10,8 @@ describe("<Events />", () => {
         resource_id: 2,
         payload: [
           { field: "Ou", value: 5 },
-          { field: "id", value: 6 }
-        ]
+          { field: "id", value: 6 },
+        ],
       },
       {
         id: 2,
@@ -20,12 +19,13 @@ describe("<Events />", () => {
         resource_id: 2,
         payload: [
           { field: "Ou", value: 7 },
-          { field: "id", value: 3 }
-        ]
-      }
+          { field: "id", value: 3 },
+        ],
+      },
     ];
     const props = { events };
-    const wrapper = shallow(<Events {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<Events {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/ingests/components/__tests__/Ingest.spec.js

@@ -1,12 +1,23 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { Ingest } from "../Ingest";
 
+// Mock the components used in Ingest
+jest.mock("../IngestActions", () => () => (
+  <div data-testid="ingest-actions">IngestActions Mock</div>
+));
+jest.mock("../IngestHeader", () => () => (
+  <div data-testid="ingest-header">IngestHeader Mock</div>
+));
+jest.mock("../IngestTabs", () => () => (
+  <div data-testid="ingest-tabs">IngestTabs Mock</div>
+));
+
 describe("<Ingest />", () => {
   const props = { ingest: { id: 1, name: "foo" } };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<Ingest {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<Ingest {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/ingests/components/__tests__/IngestActions.spec.js

@@ -1,21 +1,21 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { IngestActions } from "../IngestActions";
 
 describe("<IngestActions />", () => {
   const ingestAction = jest.fn();
   const ingestActions = {
     action1: { method: "POST", href: "/api/action1" },
-    action2: { method: "GET", href: "/api/action2" }
+    action2: { method: "GET", href: "/api/action2" },
   };
 
   const props = {
     ingestAction,
-    ingestActions
+    ingestActions,
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<IngestActions {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<IngestActions {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/ingests/components/__tests__/IngestArchive.spec.js

@@ -1,20 +1,20 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { IngestArchive } from "../IngestArchive";
 
 describe("<IngestArchive />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const ingestArchive = [
       {
         id: 123,
         status: "status",
         last_change_at: "2018-06-27T07:32:53.154377Z",
         last_change_by: "maixu",
-        version: 1
-      }
+        version: 1,
+      },
     ];
     const props = { ingestArchive };
-    const wrapper = shallow(<IngestArchive {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<IngestArchive {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });